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

DreamweaverCS3网页设计培训教程第5课用表格规范网页本课要点具体要求本课导读上机练习DreamweaverCS3网页设计培训教程本课要点表格的创建及基本编辑表格属性设置DreamweaverCS3网页设计培训教程具体要求掌握普通表格及嵌套表格的创建方法熟悉表格和单元格的选择方法熟悉单元格的合并、拆分及删除方法熟悉表格及单元格属性的设置方法熟悉表格内容的添加方法DreamweaverCS3网页设计培训教程本课导读表格在日常办公中很常见，它能使数据的显示更清晰明了，网页中的表格还有更重要的作用——进行页面布局。表格可以将网页分割为很多组合在一起的小块，既加快了网页的加载速度，又使网页整齐而美观。DreamweaverCS3网页设计培训教程5.1创建及编辑表格页面布局是网页制作的宏观设置，使用表格进行页面布局是其中最常用的手段。DreamweaverCS3网页设计培训教程5.1创建及编辑表格5.1.1知识讲解5.1.2典型案例——制作“我的课程表”表格DreamweaverCS3网页设计培训教程5.1.1知识讲解表格是进行页面布局时非常有用的工具。利用表格进行页面布局，可以将图像或文本放置在表格的各个单元格中，从而精确控制其位置。DreamweaverCS3网页设计培训教程5.1.1知识讲解1.创建表格2.编辑表格DreamweaverCS3网页设计培训教程1.创建表格在DreamweaverCS3中，表格分为普通表格和嵌套表格。普通表格即是传统意义上的表格，嵌套表格是在表格的某个单元格内插入的表格，即表格之中再嵌套表格。1）创建普通表格2）创建嵌套表格DreamweaverCS3网页设计培训教程2.编辑表格表格创建好后，可以对表格进行合并或拆分单元格、删除或添加行（或列）等编辑操作。在表格中添加图像和文本等内容后，根据实际需要，也可对表格的大小等进行调整。1）选择整个表格2）选择行或列3）选择单元格4）拆分单元格5）合并单元格6）添加行或列7）删除行或列DreamweaverCS3网页设计培训教程5.1.2典型案例——制作“我的课程表”表格案例目标本案例主要练习创建表格和添加简单的内容。DreamweaverCS3网页设计培训教程5.1.2典型案例——制作“我的课程表”表格操作思路（1）创建一个5行6列的表格。（2）将第1列的前两个单元格合并，将第1行的后5个单元格合并。（3）在第3行的后5个单元格中各插入一个4行1列的嵌套表格，在第4行的后5个单元格中各插入一个2行1列的嵌套表格。（4）在相应单元格中添加文本或图像。DreamweaverCS3网页设计培训教程5.1.2典型案例——制作“我的课程表”表格操作步骤具体操作步骤请教师参照软件和书中内容进行讲解。DreamweaverCS3网页设计培训教程5.1.2典型案例——制作“我的课程表”表格案例小结本案例利用表格创建了一个“我的课程表”网页，运用了创建表格、合并单元格、输入文本以及插入图像等知识。在DreamweaverCS3中，表格内容的对齐方式默认为“左对齐”，而在IE浏览器中则为“居中对齐”，所以在Dreamweaver和IE浏览器中的效果有一定差别，为了避免因表格内容的默认对齐方式不同而引起浏览效果与预期效果的不同，需要在设计网页时为表格设置属性，下面我们就来学习怎样设置表格属性。DreamweaverCS3网页设计培训教程5.2表格属性设置要使表格美观，需要对表格及单元格的属性进行设置，如设置边框线颜色和单元格的对齐方式等。DreamweaverCS3网页设计培训教程5.2表格属性设置5.2.1知识讲解5.2.2典型案例——美化“我的课程表”表格DreamweaverCS3网页设计培训教程5.2.1知识讲解表格的属性很多，包括表格的宽度、高度，表格包含的行数、列数，表格中各单元格间的距离，单元格中内容与单元格边框线间的距离以及是否有边框、边框线粗细和表格背景颜色等，下面分别进行讲解。DreamweaverCS3网页设计培训教程5.2.1知识讲解1.设置表格属性2.设置单元格属性DreamweaverCS3网页设计培训教程1.设置表格属性要进行表格属性设置，需先选中表格。选中表格后，在【属性】面板可进行表格的属性设置。DreamweaverCS3网页设计培训教程2.设置单元格属性除了可以设置整个表格的属性外，还可对表格的单元格、行或列的属性进行设置。选择要设置属性的单元格、行或列后，其【属性】面板如图所示。在单元格的【属性】面板中，可以对单元格中的文本进行属性设置，其设置方法与普通文本相同。另外，还可以对单元格的对齐方式、宽和高及是否换行等进行设置。DreamweaverCS3网页设计培训教程5.2.2典型案例——美化“我的课程表”表格案例目标本案例主要练习表格属性及单元格属性的设置。DreamweaverCS3网页设计培训教程5.2.2典型案例——美化“我的课程表”表格操作思路（1）设置第1层（外层）表格的属性。（2）设置第1层表格的单元格属性。（3）设置第2层（嵌套）表格的属性。（4）设置第2层表格的单元格属性。DreamweaverCS3网页设计培训教程5.2.2典型案例——美化“我的课程表”表格操作步骤具体操作步骤请教师参照软件和书中内容进行讲解。DreamweaverCS3网页设计培训教程5.2.2典型案例——美化“我的课程表”表格案例小结本案例练习美化表格，包括对表格属性（如表格边框粗细、边框颜色、间距、填充、对齐方式和高度等）及单元格属性（如单元格的对齐方式和单元格高度等）进行设置。通过这些设置，可以使创建的表格及其内容的显示效果更好。DreamweaverCS3网页设计培训教程5.3上机练习5.3.1“个人简历”网页的制作5.3.2“个人简历”网页的美化DreamweaverCS3网页设计培训教程5.3.1“个人简历”网页的制作本练习将利用表格进行页面布局。DreamweaverCS3网页设计培训教程5.3.1“个人简历”网页的制作操作思路在DreamweaverCS3中创建一个9行1列、宽度为605像素、边框为1像素、其余值保持默认设置的表格。将素材图像“1px.gif”复制到保存网页文档的位置。在第3行中插入图像“1px.gif”。在第4～8行中分别插入宽度为90%的嵌套表格。将各嵌套表格的第2行中的单元格合并，在合并后的单元格中分别插入宽度为80%的嵌套表格。输入文本，然后对文本的属性进行设置。DreamweaverCS3网页设计培训教程5.3.2“个人简历”网页的美化本练习将对5.3.1节中制作的“个人简历”网页进行美化。DreamweaverCS3网页设计培训教程5.3.2“个人简历”网页的美化操作思路将“个人简历.html”网页另存为“个人简历2.html”。选中最外层表格，设置填充、间距和边框值分别为“0”、“2”和“0”，背景颜色和边框颜色均为“#FFFFFF”。设置最外层表格9行单元格的水平对齐方式均为“居中对齐”、第1行的垂直对齐方式为“顶端对齐”、第2～6行的垂直对齐方式为“居中对齐”。设置第1，2，3，9行单元格的背景颜色。DreamweaverCS3网页设计培训教程5.3.2“个人简历”网页的美化继续设置所有第2层嵌套表格的填充、间距和边框值分别为“0”、“3”和“1”，边框颜色为“#FFFFFF”。设置所有第2层嵌套表格中各单元格的水平对齐方式以及背景颜色。设置所有第3层嵌套表格中各单元格的水平对齐方式以及背景颜色。