【任务5-4】制作以表格布局的展示千岛湖旅游景点的网页课件(1)

1、网页设计与制作任务驱动教程 （第3版）2单元5 制作包含列表和表格的网页【任务5-4】制作以表格布局的展示千岛湖旅游景点的网页3【任务描述】【任务5-4-1】插入表格1并设置其属性（1）创建并打开网页0501.html。（2）插入1个2行1列的表格1，且设置其属性：宽为880，边框为1，填充、间距为0，对齐方式为居中对齐。4【任务实施】1创建文件夹与网页文档0504.html在站点“单元5”中创建文件夹“task05-4”，在该文件夹中创建子文件夹“CSS”。在文件夹“task05-4”中创建网页文档0504.html，双击网页文档0501.html，打开该网页，然后将光标置于页面的起始位置。

2、52通过“表格”对话框插入表格1在Dreamweaver CC主界面中，选择命令【插入】【表格】，弹出【表格】对话框。（1）在【表格】对话框“行数”文本框中输入“2”，在“列数”文本框中输入“1”。（2）在“表格宽度”文本框输入“880”，其后的下拉列表框中选择宽度的单位为“像素”。6（3）在“边框粗细”文本框中指定表格边框的宽度，这里为了便识别表格边框，暂设置边框宽度为1，以后再设置为0。其他参数暂保持其默认值不变。如图5-16所示。图5-16 插入表格1时的【表格】对话框7（4）设置完成后单击【确定】按钮，1个2行1列的表格便插入到页面。所插入表格1的HTML代码如下所示： （5）保存网页

3、中所插入的表格1。82设置表格1的属性（1）选择所插入的表格1用鼠标指针指向表格边框线，当鼠标光标变为 形状时单击鼠标左键选中整个表格。9（2）通过表格的【属性】面板设置其属性在表格的【属性】面板中对齐方式选择“居中对齐”，表格的属性更改后，表格【属性】面板如图5-17所示。图5-17 设置4行3列表格1的属性（3）保存网页中表格的属性设置10【任务描述】【任务5-4-2】设置表格1单元格的 背景图像（1）设置表格1第1行和第2行单元格的背景图像为bg01.gif。（2）设置表格1第1行和第2行单元格的水平对齐方式为“居中对齐”，垂直对齐方式为“居中”。（3）设置表格1第1行的行高为35像素，

4、第3行的行高为30像素。11【任务实施】1创建文件夹与网页文档0504.html在站点“单元5”中创建文件夹“task05-4”，在该文件夹中创建子文件夹“CSS”。在文件夹“task05-4”中创建网页文档0504.html，双击网页文档0501.html，打开该网页，然后将光标置于页面的起始位置。12（1）将光标置于表格1第1行的单元格中，在Dreamweaver CC的主窗体【文档】工具栏中单击【代码】按钮，切换到“代码”编辑窗口，在表格1第1行的单元格标签“”中添加以下设置背景图像的代码：background=images/bg01.gif。（2）设置该单元格的水平对齐方式为“居中对齐

5、”，垂直对齐方式为“居中”，选中“不换行”复选框，其他属性保持其默认值。13（3）将鼠标指针指向表格1的第1行的左边线，当鼠标指针变成1个黑色箭头形状时，单击鼠标左键即可选中该行。在表格行的【属性】面板的“高”文本框中输入行的高度“35”，单位默认为“像素”。按照同样的方式，设置第2行单元格的背景图像为bg01.gif，行高为“30像素”，其他属性设置与第1行单元格相同。保存表格1单元格和行的属性设置。14【任务描述】【任务5-4-3】在表格1的单元格中 输入文本（1）在表格1的第1行输入所需要的文本，用于设置超链接。（2）在表格1的第2行输入所需要的文本，用于设置文字滚动效果。（3）将第2行

6、中的文字设置为滚动效果。15【任务实施】（1）在表格1各单元格输入必要的文字在表格1第1行的单元格中输入“首页 | 千岛湖梅峰观岛 | 千岛湖五龙岛 | 千岛湖猴岛 | 千岛湖鸵鸟岛 | 千岛湖森林氧吧 | 上西村瀑布群 ”，由于该单元格的属性事先已设置好，我们发现输入的文本在水平方向和垂直方向都会自动居中对齐。16在所插入表格第2行的单元格中输入“千岛湖旅游景点：千岛湖梅峰观岛 | 千岛湖五龙岛 | 千岛湖猴岛 | 千岛湖鸵鸟岛 | 千岛湖森林氧吧 | 上西村瀑布群 | 千岛湖屏溪竹筏漂流 | 千岛湖三潭岛”。保存网页中所输入的文本及其属性设置。17（2）将第2行中的文字设置为滚动效果在【文档】工具栏中单击【代码】按钮，切换到“代码”编辑窗口，将光标置于第2行单元格中文字“千岛湖旅游景点”的左侧，输入“”，此时会自动出现标签列表框，在该列表框中双击选取“marquee”，如图5-19所示。接着通过键盘输入以下HTML代码。图5-19 Dreamweaver CC的标签列表框18然后将光标置于第2行单元格中文字“千岛湖三潭岛”的右侧，输入HTML代码“”，这样滚动文本效果的HTML代码便输入完成，保存所输入的HTML代码。19将第1个表格的“边框”设