《网页传统设计》PPT课件.ppt
《《网页传统设计》PPT课件.ppt》由会员分享,可在线阅读,更多相关《《网页传统设计》PPT课件.ppt(35页珍藏版)》请在三一办公上搜索。
1、1,第5章 网页传统设计,前面章节所介绍的各种网页元素在网页中的插入,均是直接插入。这时生成的网页,其中的文本或者图像会随着IE窗口的放大或者缩小发生变化,这使得网页处于不稳定状态。要想改变这种情况,最简单的方法就是使用表格。表格不仅能够控制网页在IE窗口中的位置,还可以控制网页元素在网页中的显示位置,这样无论IE窗口如何变化,其中的网页都会保持默认的状态。,本章学习要点:,2,创建表格编辑表格资源管理器库元素模板网页,5.1 表格建立,3,表格具有归纳的作用,在Dreamweaver中,表格除了具有上述作用外,还具有定位与组合作用。这样才能够将网页元素,定位在网页中任何想要显示的区域中。所以
2、说,网页设计就是从创建表格开始,而表格的创建可以为后来的网页设计奠定基础。,5.1.1 创建各种表格,4,对于较为复杂的网页图像来说,并不是只有一个表格组成,而是有多个表格,甚至包括表格中的表格组合而成,也就是嵌套表格。嵌套表格,顾名思义就是在表格中插入表格。这样一来,由总表格负责整体的排版,由嵌套的表格负责各个子栏目的排版,并插入到总表格的相应位置中。各司其职,互不冲突。,1插入表格,2插入嵌套表格,5,1插入表格,在网页中插入表格的方法非常简单,在【插入】面板中,单击【常用】选项卡中的【表格】按钮,在弹出的【表格】对话框中设置相应的参数,即可插入表格。,6,2插入嵌套表格,要想插入嵌套表格
3、,首先要插入表格,然后将光标放置在表格中,使用插入表格的方法插入嵌套表格即可。,5.1.2 在表格中插入网页元素,为了使网页中的元素能够有序地、按照要求显示在IE窗口中,在插入文本或者图像之前,插入表格是最好的解决方法。在表格中插入文本或者图像的方法与直接在网页中插入方法是基本相同的,只是在插入之前,需要将光标放置在表格中即可。,7,8,1在表格中输入文本,在输入文本之前,首先插入一个1行1列表格。然后将光标放置在表格中,即可输入文本。,9,2在表格中插入图像,图像的插入与文本输入顺序相同,都是先插入表格后,将光标放置在表格中,按照图像插入方法在表格中插入图像。,5.2 设置表格属性,表格是由
4、单元格组成的,即使是一个最简单的表格,也是由一个单元格组成。而表格与单元格的属性完全不同,选择不同的对象,【属性】检查器中的属性选项就会显示相应的选项参数。,10,5.2.1 表格属性,当插入表格后,该表格同时被选中。而在【属性】检查器中,则显示表格的基本属性,比如表格整体、行、列和单元格。,11,5.2.2 单元格属性,由于一个最简单的表格中包括一个单元格、一行与一列,所以将光标放置在表格中后,其实是将光标放置在单元格,也就是选中了单元格。这时【属性】检查器中显示的是单元格属性。,12,5.2.3 表格标签,表格是一种复杂的XHTML元素。在使用Dreamweaver创建和编辑表格时,应了解
5、表格的XHTML标签结构,从而更有效地控制和使用表格显示数据。一个XHTML表格通常多种嵌套的XHTML标签组成。,13,常见的表格标签,5.3 编辑表格,由于Dreamweaver是一个可视化操作的软件,所以表格的属性除了能够在【属性】检查器中设置外,还能够通过鼠标进行改变,并且进行某些【属性】检查器无法完成的操作,比如选中表格、复制与粘贴单元格等。,14,5.3.1 选中表格元素,在设置表格属性时发现,将光标放置在表格中,【属性】检查器中显示的是单元格属性,而不是表格属性,这说明选中的是单元格,而不是表格。创建一个表格,既包含其本身,还包含单元格、行与列元素,而这些元素的选择方法各不相同。
6、,15,5.3.2 调整表格大小,当选中整个表格后,在表格右下角区域显示3个控制点,分别通过这3个控制点能够将表格横向、纵向或者整体放大。,16,5.3.3 合并及拆分表格元素,当创建的表格不符合要求时,可以通过合并或者拆分单元格来改变单元格的数量,其中,删除或者增加表格的行与列同样能够改变单元格的数量。,17,18,1删除和增加表格行与列,要想删除表格中的行,而不影响其他行中的单元格,可以将光标放置在想要删除行的其中一个单元格中,然后执行【修改】|【表格】|【删除行】命令,19,2合并及拆分单元格,删除或者增加行与列,就会删除或者增加整行或者整列的单元格。如果只需要一个单元格时,合并或者拆分
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页传统设计 网页 传统 设计 PPT 课件
链接地址:https://www.31ppt.com/p-5590527.html