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

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