《网页制作培训教程第课.doc》由会员分享，可在线阅读，更多相关《网页制作培训教程第课.doc（8页珍藏版）》请在三一文库上搜索。
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文件，并插入一个9行3列的表格。 （3）设置表格属性和单元格属性。操作步骤请老师参照软件讲解11.1.2 典型案例制作细
4、框表格案例小结本案例通过制作table.html表格文档，主要练习了表格的插入、填充、对齐，单元格的背景颜色、背景图像、水平对齐方式、标题及字号的设置以及单元格的合并等。11.2 布局设计 布局是网页效果的实现方式，分为表格布局和框架布局等，本节将学习表格布局。11.2 布局设计11.2.1 知识讲解11.2.2 典型案例对“圣能赛普”的主页进行布局 11.2.1 知识讲解 本节将介绍一般网页的大小、表格的嵌套、用CSS定义表格边框、表格与层的转换等知识。11.2.1 知识讲解 1. 网页大小的规定 2. 嵌套表格 3. 定义边框样式 4. 使用层 5. 表格与层的相互转换 1. 网页大小的规
5、定一般以800600像素和1024768像素下全屏显示时的网页宽度来确定网页的大小。一般来说，除去浏览器的边框，800600像素下全屏显示时的网页宽度是778或776像素；1024768像素下全屏显示时的网页宽度为1002或1000像素。用户也可以根据设计效果指定所需的宽度。网页高度一般不受限制，可以向下适当延展。2. 嵌套表格在使用表格对网页进行布局时，嵌套表格使用得十分广泛。嵌套表格是指在表格的单元格中再插入表格来放置网页元素。一般而言，一个网页中嵌套表格的层次不能超过3层。层次越多，文件越大，因此，应尽量采用较少的嵌套层次来进行网页布局。2. 嵌套表格嵌套表格一般是通过文档窗口左下侧的标
6、签栏来选择的：将光标定位在嵌套表格的单元格中，单击标签栏中的标签即可选中嵌套表格，例如，单击 中的 标签，即可选中嵌套表格。此外，嵌套表格的属性设置方法与普通表格相同。3. 定义边框样式除了在【属性】面板中设置外，也可以通过【CSS样式】面板来定义表格的边框样式。3. 定义边框样式表格由行线和列线组成，如果只需要表格的外边框线，则要将表格分成上、上与左、上与右、左、右、下、下与左、下与右8个部分来定义才能实现如下图所示的效果，这是设置表格属性与单元格属性所无法实现的。4. 使用层层也是进行网页布局的一种工具，但常在使用表格进行布局时作为辅助工具。由于层具有浮动性，可以在窗口中随意拖动，因此它的
7、定位相对于表格更为灵活。例如，要在网页左右侧空白处或浮于网页上方添加一些广告、宣传画等，就可以通过层来完成。层的绘制方法为：单击插入栏的【布局】选项卡中的 按钮，在窗口中按住鼠标左键并拖动；如果要连续绘制多个，则在按住【Ctrl】键的同时绘制。4. 使用层单击层边框选中层，其【属性】面板如下图所示。如果要使多个层对齐、大小一致等，则按住【Shift】键选中这些层，然后在【属性】面板中设置对应的参数。5. 表格与层的相互转换在Dreamweaver中，表格与层之间可以相互转换。有些低版本的浏览器不支持层功能，为了使网页的访问面扩大，可以将网页中的层转换为表格。选择【修改】【转换】【层到表格】命令
8、，可将层转换为表格。选择【修改】【转换】【表格到层】命令，可将表格转换为层。11.2.2 典型案例对“圣能赛普”的主页进行布局 案例目标 本案例将用表格来对“圣能赛普”的主页进行布局，主要练习表格的创建、设置及嵌套表格的使用，完成后的效果如下图所示。11.2.2 典型案例对“圣能赛普”的主页进行布局11.2.2 典型案例对“圣能赛普”的主页进行布局操作思路：（1）在Fireworks中打开前面制作的“第4课素材snsp主页.png”文件，分析网页结构后发现：上部分由左、中、右三列构成，页脚为单独一部分。因此，该网页应采用两个表格来进行布局，上部分为1行3列的表格，下部分为1行1列的表格。（2）
9、插入1行3列的表格，左、中、右单元格中分别再嵌套表格，放置内容。（3）插入1行1列的表格，放置页脚信息。操作步骤请老师参照软件讲解 11.2.2 典型案例对“圣能赛普”的主页进行布局案例小结本案例通过对主页进行布局，练习了表格的插入、嵌套、拆分、合并及表格与单元格的属性设置等。在对网页进行布局时，各个单元格都需要设置顶端对齐，以便使插入的图像之间无缝。采用背景显示效果的单元格需要设置行高以确保网页与设计效果一致。11.3 上机练习 11.3.1 制作粗框表格 11.3.2 用表格对主页进行布局 11.3.1 制作粗框表格 本练习将制作如下图所示的粗框表格，主要练习设置表格属性和单元格属性。11
10、.3.1 制作粗框表格 操作思路：插入5行3列、宽500像素的表格。设置表格边框为“10”，间距为“1”，填充为“2”。在【窗口】菜单中打开【标签检查器】面板，展开【浏览器特定的】项，设置“bordercolordark”的颜色为“#006699”、“bordercolorlight”的颜色为“#FFCC66”。11.3.2 用表格对主页进行布局 本练习将对一个主页进行布局，主要练习表格布局，效果如下图所示。11.3.2 用表格对主页进行布局 操作思路：新建jianyi站点，并新建index.html文件，将“第11课素材jian_img”中的文件复制到jianyi站点的img文件夹中。将bg.gif图像设置为背景。创建5行1列、宽780像素的表格，用于放置所有的网页元素。在对banner下方的内容进行布局时，可以拆分单元格来满足需要。没有背景图像的区域用白色填充。文本可复制“第11课素材生命.#ffff66doc”中的内容。