Dreamweaver CS3网页设计培训教程电子教案05.ppt

《Dreamweaver CS3网页设计培训教程电子教案05.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

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

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

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

4、格中添加文本或图像。5.1.2典型案例——制作“我的课程表”表格操作步骤具体操作步骤请教师参照软件和书中内容进行讲解。5.1.2典型案例——制作“我的课程表”表格案例小结本案例利用表格创建了一个“我的课程表”网页，运用了创建表格、合并单元格、输入文本以及插入图像等知识。在DreamweaverCS3中，表格内容的对齐方式默认为“左对齐”，而在IE浏览器中则为“居中对齐”，所以在Dreamweaver和IE浏览器中的效果有一定差别，为了避免因表格内容的默认对齐方式不同而引起浏览效果与预期效果的不同，需要在设计网页时为表格设置属性，下

5、面我们就来学习怎样设置表格属性。5.2表格属性设置要使表格美观，需要对表格及单元格的属性进行设置，如设置边框线颜色和单元格的对齐方式等。5.2表格属性设置5.2.1知识讲解5.2.2典型案例——美化“我的课程表”表格5.2.1知识讲解表格的属性很多，包括表格的宽度、高度，表格包含的行数、列数，表格中各单元格间的距离，单元格中内容与单元格边框线间的距离以及是否有边框、边框线粗细和表格背景颜色等，下面分别进行讲解。5.2.1知识讲解1.设置表格属性2.设置单元格属性1.设置表格属性要进行表格属性设置，需先选中表格。选中表格后，在【属性

6、】面板可进行表格的属性设置。2.设置单元格属性除了可以设置整个表格的属性外，还可对表格的单元格、行或列的属性进行设置。选择要设置属性的单元格、行或列后，其【属性】面板如图所示。在单元格的【属性】面板中，可以对单元格中的文本进行属性设置，其设置方法与普通文本相同。另外，还可以对单元格的对齐方式、宽和高及是否换行等进行设置。5.2.2典型案例——美化“我的课程表”表格案例目标本案例主要练习表格属性及单元格属性的设置。5.2.2典型案例——美化“我的课程表”表格操作思路（1）设置第1层（外层）表格的属性。（2）设置第1层表格的单元格属性

7、。（3）设置第2层（嵌套）表格的属性。（4）设置第2层表格的单元格属性。5.2.2典型案例——美化“我的课程表”表格操作步骤具体操作步骤请教师参照软件和书中内容进行讲解。5.2.2典型案例——美化“我的课程表”表格案例小结本案例练习美化表格，包括对表格属性（如表格边框粗细、边框颜色、间距、填充、对齐方式和高度等）及单元格属性（如单元格的对齐方式和单元格高度等）进行设置。通过这些设置，可以使创建的表格及其内容的显示效果更好。5.3上机练习5.3.1“个人简历”网页的制作5.3.2“个人简历”网页的美化5.3.1“个人简历”网页的制作

8、本练习将利用表格进行页面布局。5.3.1“个人简历”网页的制作操作思路在DreamweaverCS3中创建一个9行1列、宽度为605像素、边框为1像素、其余值保持默认设置的表格。将素材图像“1px.gif”复制到保存网页文档的位置。在第3行中插入图