Dreamweaver-CS5网页制作高级案例教程项目三

项目三创建“蝶舞”珠宝网站——使用表格布局网页一、学习目标二、理论指导三、任务实践一、学习目标掌握在网页中创建表格，选择表格和单元格，以及设置表格和单元格属性的方法。掌握拆分与合并单元格，以及在表格中添加或删除行与列的方法。能够在实践中熟练地应用表格布局网页，制作出符合实际应用需要的网站。二、理论指导（一）创建表格与设置表格属性表格（Table）是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行（在HTML语言中以tr标签开始，/tr标签结束），垂直的多个单元格称为列（以td标签开始，/td标签结束），行与列的交叉区域称为单元格，网页中的元素就放置在这些单元格中。列行单元格此处表示未明确设置单元格的宽度此处显示了表格的宽度。如果只显示一个“▼”符号，表示未明确设置表格宽度1．创建表格DreamweaverCS5拥有非常完善的表格创建与编辑功能，下面我们首先来看一下如何在网页文档中创建表格。2．选择表格和单元格（1）选择表格在Dreamweaver中选择表格的方法主要有以下几种。•将鼠标光标移至单元格边框线上，当鼠标光标变为或形状时单击鼠标左键。•将鼠标光标移至表格外框线上，当鼠标光标变为形状时，单击鼠标左键。•在表格内部任意单元格中单击鼠标左键，然后在标签选择器中单击对应的“table”标签。•将插入点置于表格的任意单元格中，表格上方或下方将显示绿线标志，单击最上方或最下方标有表格宽度的绿线中的，在弹出的下拉列表中选择“选择表格”命令。（2）选择行或列要选择某行或某列，可将光标置于该行左侧或该列顶部，当光标形状变为黑色箭头或时单击鼠标左键。（3）选择单元格在Dreamweaver中可以选择单个单元格，也可以选择连续的多个单元格或不连续的多个单元格。•要选择某个单元格，可首先将插入点置于该单元格内，然后按【Ctrl＋A】组合键或单击“标签选择器”中对应的“td”标签。•要选择连续的单元格区域，应首先在要选择的单元格区域的左上角单元格中单击，然后按住鼠标左键向右下角单元格方向拖动鼠标，最后松开鼠标左键。•如果希望选择一组不相邻的单元格，可按住【Ctrl】键单击选择各单元格。3．设置表格属性选中表格后，可利用属性检查器查看或修改表格的行、列、宽，以及填充、间距、对齐、边框等属性。4．设置单元格属性在表格的某个单元格中单击，属性检查器中将显示水平、垂直、宽、高等单元格属性，此时可通过属性检查器设置单元格属性。（二）编辑表格1．拆分与合并单元格在网页制作中，经常会用到一些特殊结构的表格，此时就需要拆分或合并单元格。（1）拆分单元格拆分单元格就是将一个单元格拆分成多个单元格。（2）合并单元格所谓合并单元格，就是将相邻的两个或多个单元格合并成一个单元格。拖动鼠标选中要合并的连续单元格（此处为第1行中间的2个单元格），然后单击属性检查器上的“合并所选单元格，使用跨度”按钮，则2个单元格合并为1个单元格。2．在表格中添加或删除行与列在使用表格组织大量信息时，往往需要在创建好的表格中添加或删除行与列，以增加或减少记录。三、任务实践任务一构建网站主页主体结构本任务中，我们将通过为“蝶舞”网站主页构建主体结构，来学习表格的基本应用（具体操作见视频3-1）。任务二通过嵌套表格完善网站主页所谓嵌套表格，就是在一个表格的某个单元格里插入一个新表格。使用表格布局的绝大多数网页都是由多个表格相互嵌套进行布局的。本任务中，我们将通过嵌套表格制作“蝶舞”珠宝网站主页的中心内容，来完成网站主页的布局（具体操作见视频3-2）。任务三构建网站子页主体结构本任务通过为“蝶舞”网站子页构建主体结构，来进一步学习表格在实际网页制作中的应用（具体操作见视频3-3）。任务四制作圆角表格适当地使用圆角表格，可以使整个网页看起来更加柔和、美观。本任务通过制作网页中的“登录”模块，来进一步学习拆分与合并单元格，以及圆角表格的制作方法（具体操作见视频3-4）。任务五制作细线表格在Dreamweaver中制作细线表格的方法有很多，其中最简单、常用的方法就是为表格和单元格设置背景颜色，下面通过制作“蝶舞”网站子页中的“商品分类”板块来学习细线表格的制作方法（具体操作见视频3-5）。任务六完善网站子页通过前面几节的学习，“蝶舞”网站子页已经制作得差不多了。本任务通过制作“商品展示板块”来完善该子页，并进一步巩固表格的应用（具体操作见视频3-6）。