（任务5-4）制作以表格布局的展示千岛湖旅游景点的网课件1.pptx

1、网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）网页设计与制作任务驱动教程 （第3版）网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）2单元5 制作包含列表和表格的网页【任务5-4】制作以表格布局的展示千岛湖旅游景点的网页网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）3【任务描述】【任务5-4-1】插入表格1并设置其属性（1）创建并打开网页）创建并打开网页0501.html。（2）插入）插入1个个2行行1列的表格列的表格1，且设置其属性：，且设置其属性：宽为宽为880，边框为，边框为1，填充、间距为，填充、间距为0

2、，对齐方式为，对齐方式为居中对齐。居中对齐。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）4【任务实施】1 1创建文件夹与网页文档0504.html0504.html在站点在站点“单元单元5”中创建文件夹中创建文件夹“task05-4”，在该文件夹中创建子文件夹在该文件夹中创建子文件夹“CSS”。在文件夹在文件夹“task05-4”中创建网页文档中创建网页文档0504.html，双击网页文档，双击网页文档0501.html，打开该网，打开该网页，然后将光标置于页面的起始位置。页，然后将光标置于页面的起始位置。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（

3、第3 3版）版）52 2通过“表格”对话框插入表格1 1在在Dreamweaver CC主界面中，选择命令主界面中，选择命令【插入】【插入】【表格】，弹出【表格】对话框。【表格】，弹出【表格】对话框。（1）在【表格】对话框）在【表格】对话框“行数行数”文本框中文本框中输入输入“2”，在，在“列数列数”文本框中输入文本框中输入“1”。（2）在）在“表格宽度表格宽度”文本框输入文本框输入“880”，其后的下拉列表框中选择宽度的单位为其后的下拉列表框中选择宽度的单位为“像素像素”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）6（3）在）在“边框粗细边框粗细”文本框中指定

4、表格边框文本框中指定表格边框的宽度，这里为了便识别表格边框，暂设置边框的宽度，这里为了便识别表格边框，暂设置边框宽度为宽度为1，以后再设置为，以后再设置为0。其他参数暂保持其默。其他参数暂保持其默认值不变。如图认值不变。如图5-16所示。所示。图5-16 插入表格1时的【表格】对话框网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）7（4）设置完成后单击【确定】按钮，）设置完成后单击【确定】按钮，1个个2行行1列的表格便插入到页面。列的表格便插入到页面。所插入表格所插入表格1的的HTML代码如下所示：代码如下所示：  （5）保存网页中所插入的表格）保

5、存网页中所插入的表格1。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）82 2设置表格1 1的属性（1 1）选择所插入的表格）选择所插入的表格1 1用鼠标指针指向表格边框线，当鼠标光标用鼠标指针指向表格边框线，当鼠标光标变为变为 形状时形状时单击鼠标左键选中整个表格。单击鼠标左键选中整个表格。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）9（2 2）通过表格的【属性】面板设置其属性）通过表格的【属性】面板设置其属性在表格的【属性】面板中对齐方式选择在表格的【属性】面板中对齐方式选择“居中居中对齐对齐”，表格的属性更改后，表格【属性】面板如

6、，表格的属性更改后，表格【属性】面板如图图5-17所示。所示。图5-17 设置4行3列表格1的属性（3 3）保存网页中表格的属性设置）保存网页中表格的属性设置网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）10【任务描述】【任务5-4-2】设置表格1单元格的 背景图像（1）设置表格）设置表格1第第1行和第行和第2行单元格的背景图像为行单元格的背景图像为bg01.gif。（2）设置表格）设置表格1第第1行和第行和第2行单元格的水平对齐方式为行单元格的水平对齐方式为“居中对齐居中对齐”，垂直对齐方式为，垂直对齐方式为“居中居中”。（3）设置表格）设置表格1第第1行的行高为

7、行的行高为35像素，第像素，第3行的行高为行的行高为30像素。像素。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）11【任务实施】1 1创建文件夹与网页文档0504.html0504.html在站点在站点“单元单元5”中创建文件夹中创建文件夹“task05-4”，在该文件夹中创建子文件夹在该文件夹中创建子文件夹“CSS”。在文件夹在文件夹“task05-4”中创建网页文档中创建网页文档0504.html，双击网页文档，双击网页文档0501.html，打开该网，打开该网页，然后将光标置于页面的起始位置。页，然后将光标置于页面的起始位置。网页设计与制作任务驱动教程（第网

8、页设计与制作任务驱动教程（第3 3版）版）12（1）将光标置于表格）将光标置于表格1第第1行的单元格中，在行的单元格中，在Dreamweaver CC的主窗体【文档】工具栏中单击的主窗体【文档】工具栏中单击【代码】按钮，切换到【代码】按钮，切换到“代码代码”编辑窗口，在表格编辑窗口，在表格1第第1行的单元格标签行的单元格标签“”中添加以下设置背景中添加以下设置背景图像的代码：图像的代码：background=images/bg01.gif。（2）设置该单元格的水平对齐方式为）设置该单元格的水平对齐方式为“居中居中对齐对齐”，垂直对齐方式为，垂直对齐方式为“居中居中”，选中，选中“不换行不换行”

9、复选框，其他属性保持其默认值。复选框，其他属性保持其默认值。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）13（3）将鼠标指针指向表格）将鼠标指针指向表格1的第的第1行的左边线，当行的左边线，当鼠标指针变成鼠标指针变成1个黑色箭头形状时，单击鼠标左键即可个黑色箭头形状时，单击鼠标左键即可选中该行。选中该行。在表格行的【属性】面板的在表格行的【属性】面板的“高高”文本框中输入文本框中输入行的高度行的高度“35”，单位默认为，单位默认为“像素像素”。按照同样的方式，设置第按照同样的方式，设置第2行单元格的背景图像为行单元格的背景图像为bg01.gif，行高为，行高为“3

10、0像素像素”，其他属性设置与第，其他属性设置与第1行行单元格相同。单元格相同。保存表格保存表格1单元格和行的属性设置。单元格和行的属性设置。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）14【任务描述】【任务5-4-3】在表格1的单元格中 输入文本（1）在表格）在表格1的第的第1行输入所需要的文本，行输入所需要的文本，用于设置超链接。用于设置超链接。（2）在表格）在表格1的第的第2行输入所需要的文本，行输入所需要的文本，用于设置文字滚动效果。用于设置文字滚动效果。（3）将第）将第2行中的文字设置为滚动效果。行中的文字设置为滚动效果。网页设计与制作任务驱动教程（第网页

11、设计与制作任务驱动教程（第3 3版）版）15【任务实施】（1 1）在表格）在表格1 1各单元格输入必要的文字各单元格输入必要的文字在表格在表格1第第1行的单元格中输入行的单元格中输入“首页首页|千岛湖千岛湖梅峰观岛梅峰观岛|千岛湖五龙岛千岛湖五龙岛|千岛湖猴岛千岛湖猴岛|千岛湖鸵鸟千岛湖鸵鸟岛岛|千岛湖森林氧吧千岛湖森林氧吧|上西村瀑布群上西村瀑布群”，由于该单，由于该单元格的属性事先已设置好，我们发现输入的文本在元格的属性事先已设置好，我们发现输入的文本在水平方向和垂直方向都会自动居中对齐。水平方向和垂直方向都会自动居中对齐。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3

12、版）版）16在所插入表格第在所插入表格第2行的单元格中输入行的单元格中输入“千千岛湖旅游景点：千岛湖梅峰观岛岛湖旅游景点：千岛湖梅峰观岛|千岛湖五龙千岛湖五龙岛岛|千岛湖猴岛千岛湖猴岛|千岛湖鸵鸟岛千岛湖鸵鸟岛|千岛湖森林氧千岛湖森林氧吧吧|上西村瀑布群上西村瀑布群|千岛湖屏溪竹筏漂流千岛湖屏溪竹筏漂流|千岛千岛湖三潭岛湖三潭岛”。保存网页中所输入的文本及其属性设置。保存网页中所输入的文本及其属性设置。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）17（2 2）将第）将第2 2行中的文字设置为滚动效果行中的文字设置为滚动效果在【文档】工具栏中单击【代码】按钮，切在【

13、文档】工具栏中单击【代码】按钮，切换到换到“代码代码”编辑窗口，将光标置于第编辑窗口，将光标置于第2行单元行单元格中文字格中文字“千岛湖旅游景点千岛湖旅游景点”的左侧，输入的左侧，输入“”，此时会自动出现标签列表框，在该列表，此时会自动出现标签列表框，在该列表框中双击选取框中双击选取“marquee”，如图，如图5-19所示。接所示。接着通过键盘输入以下着通过键盘输入以下HTML代码。代码。图5-19 Dreamweaver CC的标签列表框网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）18然后将光标置于第然后将光标置于第2行单元格中文字行单元格中文字“千岛湖千岛湖

14、三潭岛三潭岛”的右侧，输入的右侧，输入HTML代码代码“”，这样滚动文本效果的这样滚动文本效果的HTML代码便输入完成，保存代码便输入完成，保存所输入的所输入的HTML代码代码。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）19将第将第1个表格的个表格的“边框边框”设置为设置为“0”，以保，以保证各个表格宽度的一致性。保存表格中的滚动文证各个表格宽度的一致性。保存表格中的滚动文字的设置。字的设置。按按F12浏览表格浏览表格1的效果，如图的效果，如图5-20所示。第所示。第2行单元格的文本由右向左滚动。行单元格的文本由右向左滚动。图5-20 表格1及其中的SWF动画和文本的浏览效果网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）