网页制作培训教程第课

《网页制作培训教程第课》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页制作培训教程第11课第11课用表格和层进行布局本课要点具体要求本课导读上机练习本课要点使用表格和层布局设计具体要求掌握表格与单元格的属性设置掌握边框样式的设置掌握层的属性设置了解一般网页的大小本课导读表格与层是进行网页布局的常用工具，主要用于对文本和图形进行定位，对页面进行分栏等。11.1使用表格表格是处理数据最有效的工具，它能使数据得到合理的分配。通过表格与单元格的属性控制，可以使表格及表格数据表现出丰富的视觉效果。11.1使用表格11.1.1知识讲解11.1.2典型案例——制作细框表格11.1.1知识讲解本节将介绍表格和表格元素标签，以

2、及如何对表格与单元格进行属性设置。11.1.1知识讲解1.认识表格及表格元素标签2.设置表格属性3.设置单元格属性1.认识表格及表格元素标签在HTML语言中，表格标签用<table></table>表示，表格元素标签位于<table>和</table>之间。行标签为<tr></tr>，单元格标签为<td></td>。2.设置表格属性在设置表格属性前，首先要插入表格并选择表格。将光标定位在插入的表格中，此时表格的上方或下方出现带有标注的绿线，单击绿线区

3、域即可选取光标所在的表格。如果没有绿线，则可以通过在表格左下方的标签栏上单击<table>标签来选取表格。2.设置表格属性选取表格后，【属性】面板如下图所示。3.设置单元格属性按住鼠标左键拖动选取需要的单元格后，其【属性】面板如下图所示。11.1.2典型案例——制作细框表格案例目标本案例将制作如下图所示的表格效果，主要练习设置表格背景、单元格背景和表格边框等。11.1.2典型案例——制作细框表格操作思路：（1）将第9课创建的snsp站点复制到第11课中，在【文件】面板中重新编辑站点位置。（2）创建table.html文件，并插入一个

4、9行3列的表格。（3）设置表格属性和单元格属性。操作步骤请老师参照软件讲解11.1.2典型案例——制作细框表格案例小结本案例通过制作table.html表格文档，主要练习了表格的插入、填充、对齐，单元格的背景颜色、背景图像、水平对齐方式、标题及字号的设置以及单元格的合并等。11.2布局设计布局是网页效果的实现方式，分为表格布局和框架布局等，本节将学习表格布局。11.2布局设计11.2.1知识讲解11.2.2典型案例——对“圣能赛普”的主页进行布局11.2.1知识讲解本节将介绍一般网页的大小、表格的嵌套、用CSS定义表格边框、表格与层的转换等知识

5、。11.2.1知识讲解1.网页大小的规定2.嵌套表格3.定义边框样式4.使用层5.表格与层的相互转换1.网页大小的规定一般以800×600像素和1024×768像素下全屏显示时的网页宽度来确定网页的大小。一般来说，除去浏览器的边框，800×600像素下全屏显示时的网页宽度是778或776像素；1024×768像素下全屏显示时的网页宽度为1002或1000像素。用户也可以根据设计效果指定所需的宽度。网页高度一般不受限制，可以向下适当延展。2.嵌套表格在使用表格对网页进行布局时，嵌套表格使用得十分广泛。嵌套表格是指在表格的单元格中再插入表格来放置网

6、页元素。一般而言，一个网页中嵌套表格的层次不能超过3层。层次越多，文件越大，因此，应尽量采用较少的嵌套层次来进行网页布局。2.嵌套表格嵌套表格一般是通过文档窗口左下侧的标签栏来选择的：将光标定位在嵌套表格的单元格中，单击标签栏中的标签即可选中嵌套表格，例如，单击中的标签，即可选中嵌套表格。此外，嵌套表格的属性设置方法与普通表格相同。3.定义边框样式除了在【属性】面板中设置外，也可以通过【CSS样式】面板来定义表格的边框样式。3.定义边框样式表格由行线和列线组成，如果只需要表格的外边框线，则要将表格分成上、上与左、上与右、左、右、下、下与左、下与

7、右8个部分来定义才能实现如下图所示的效果，这是设置表格属性与单元格属性所无法实现的。4.使用层层也是进行网页布局的一种工具，但常在使用表格进行布局时作为辅助工具。由于层具有浮动性，可以在窗口中随意拖动，因此它的定位相对于表格更为灵活。例如，要在网页左右侧空白处或浮于网页上方添加一些广告、宣传画等，就可以通过层来完成。层的绘制方法为：单击插入栏的【布局】选项卡中的按钮，在窗口中按住鼠标左键并拖动；如果要连续绘制多个，则在按住【Ctrl】键的同时绘制。4.使用层单击层边框选中层，其【属性】面板如下图所示。如果要使多个层对齐、大小一致等，则按住【Sh

8、ift】键选中这些层，然后在【属性】面板中设置对应的参数。5.表格与层的相互转换在Dreamweaver中，表格与层之间可以相互转换。有些低版本的浏览