DreamweaverCS3网页设计培训教程电子教案05

1、第5课 用表格规范网页 本课要点具体要求本课导读上机练习本课要点点表格的创创建及基基本编辑辑表格属性性设置具体要求求掌握普通通表格及及嵌套表表格的创创建方法法熟悉表格格和单元元格的选选择方法法熟悉单元元格的合合并、拆拆分及删删除方法法熟悉表格格及单元元格属性性的设置置方法熟悉表格格内容的的添加方方法本课导读读表格在日日常办公公中很常常见，它它能使数数据的显显示更清清晰明了了，网页页中的表表格还有有更重要要的作用用进行页面面布局。表格可可以将网网页分割割为很多多组合在在一起的的小块，既加快快了网页页的加载载速度，又使网网页整齐齐而美观观。5.1创建及编编辑表格格页面布局局是网页页制作的的宏观设设

2、置，使使用表格格进行页页面布局局是其中中最常用用的手段段。5.1创建及编编辑表格格5.1.1知识讲解解5.1.2典型案例例制作“我我的课程程表”表表格5.1.1知识讲解解表格是进进行页面面布局时时非常有有用的工工具。利利用表格格进行页页面布局局，可以以将图像像或文本本放置在在表格的的各个单单元格中中，从而而精确控控制其位位置。5.1.1知识讲解解1.创建表格格2.编辑表格格1.创建表格格在DreamweaverCS3中，表格格分为普普通表格格和嵌套套表格。普通表表格即是是传统意意义上的的表格，嵌套表表格是在在表格的的某个单单元格内内插入的的表格，即表格格之中再再嵌套表表格。1）创建普普通表格格

3、2）创建嵌嵌套表格格2.编辑表格格表格创建建好后，可以对对表格进进行合并并或拆分分单元格格、删除除或添加加行（或或列）等等编辑操操作。在在表格中中添加图图像和文文本等内内容后，根据实实际需要要，也可可对表格格的大小小等进行行调整。1）选择整整个表格格2）选择行行或列3）选择单单元格4）拆分单单元格5）合并单单元格6）添加行行或列7）删除行行或列5.1.2典型案例例制作“我我的课程程表”表表格案例目标标本案例主主要练习习创建表表格和添添加简单单的内容容。5.1.2典型案例例制作“我我的课程程表”表表格操作思路路（1）创建一一个5行6列的表格格。（2）将第1列的前两两个单元元格合并并，将第第1行的

4、后5个单元格格合并。（3）在第3行的后5个单元格格中各插插入一个个4行1列的嵌套套表格，在第4行的后5个单元格格中各插插入一个个2行1列的嵌套套表格。（4）在相应应单元格格中添加加文本或或图像。5.1.2典型案例例制作“我我的课程程表”表表格操作步骤骤具体操作作步骤请请教师参参照软件件和书中中内容进进行讲解解。5.1.2典型案例例制作“我我的课程程表”表表格案例小结结本案例利利用表格格创建了了一个“我的课课程表”网页，运用了了创建表表格、合合并单元元格、输输入文本本以及插插入图像像等知识识。在DreamweaverCS3中，表格格内容的的对齐方方式默认认为“左左对齐”，而在在IE浏览器中中则为

5、“居中对对齐”，所以在在Dreamweaver和IE浏览器中中的效果果有一定定差别，为了避避免因表表格内容容的默认认对齐方方式不同同而引起起浏览效效果与预预期效果果的不同同，需要要在设计计网页时时为表格格设置属属性，下下面我们们就来学学习怎样样设置表表格属性性。5.2表格属性性设置要使表格格美观，需要对对表格及及单元格格的属性性进行设设置，如如设置边边框线颜颜色和单单元格的的对齐方方式等。5.2表格属性性设置5.2.1知识讲解解5.2.2典型案例例美化“我我的课程程表”表表格5.2.1知识讲解解表格的属属性很多多，包括括表格的的宽度、高度，表格包包含的行行数、列列数，表表格中各各单元格格间的距

6、距离，单单元格中中内容与与单元格格边框线线间的距距离以及及是否有有边框、边框线线粗细和和表格背背景颜色色等，下下面分别别进行讲讲解。5.2.1知识讲解解1.设置表格格属性2.设置单元元格属性性1.设置表格格属性要进行表表格属性性设置，需先选选中表格格。选中中表格后后，在【属性】面板可进进行表格格的属性性设置。2.设置单元元格属性性除了可以以设置整整个表格格的属性性外，还还可对表表格的单单元格、行或列列的属性性进行设设置。选选择要设设置属性性的单元元格、行行或列后后，其【属性】面板如图图所示。在单元格格的【属性】面板中，可以对对单元格格中的文文本进行行属性设设置，其其设置方方法与普普通文本本相同

7、。另外，还可以以对单元元格的对对齐方式式、宽和和高及是是否换行行等进行行设置。5.2.2典型案例例美化“我我的课程程表”表表格案例目标标本案例主主要练习习表格属属性及单单元格属属性的设设置。5.2.2典型案例例美化“我我的课程程表”表表格操作思路路（1）设置第第1层（外层层）表格格的属性性。（2）设置第第1层表格的的单元格格属性。（3）设置第第2层（嵌套套）表格格的属性性。（4）设置第第2层表格的的单元格格属性。5.2.2典型案例例美化“我我的课程程表”表表格操作步骤骤具体操作作步骤请请教师参参照软件件和书中中内容进进行讲解解。5.2.2典型案例例美化“我我的课程程表”表表格案例小结结本案例练

8、练习美化化表格，包括对对表格属属性（如如表格边边框粗细细、边框框颜色、间距、填充、对齐方方式和高高度等）及单元元格属性性（如单单元格的的对齐方方式和单单元格高高度等）进行设设置。通通过这些些设置，可以使使创建的的表格及及其内容容的显示示效果更更好。5.3上机练习习5.3.1“个人简简历”网网页的制制作5.3.2“个人简简历”网网页的美美化5.3.1“个人简简历”网网页的制制作本练习将将利用表表格进行行页面布布局。5.3.1“个人简简历”网网页的制制作操作思路路在DreamweaverCS3中创建一一个9行1列、宽度度为605像素、边边框为1像素、其其余值保保持默认认设置的的表格。将素材图图像“

9、1px.gif”复制到保保存网页页文档的的位置。在第3行中插入入图像“1px.gif”。在第48行中分别别插入宽宽度为90%的嵌套表表格。将各嵌套套表格的的第2行中的单单元格合合并，在在合并后后的单元元格中分分别插入入宽度为为80%的嵌套表表格。输入文本本，然后后对文本本的属性性进行设设置。5.3.2“个人简简历”网网页的美美化本练习将将对5.3.1节中制作作的“个个人简历历”网页页进行美美化。5.3.2“个人简简历”网网页的美美化操作思路路将“个人人简历.html”网页另存存为“个个人简历历2.html”。选中最外外层表格格，设置置填充、间距和和边框值值分别为为“0”、“2”和“0”，背景颜颜色和边边框颜色色均为“#FFFFFF”。设置最外外层表格格9行单元格格的水平平对齐方方式均为为“居中中对齐”、第1行的垂直直对齐方方式为“顶端对对齐”、第26行的垂直直对齐方方式为“居中对对齐”。设置第1，2，3，9行单元格格的背景景颜色。5.3.2“个人