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