第五讲制作包含超级链接与AP Div的网页Word格式文档下载.docx

第五讲制作包含超级链接与AP Div的网页Word格式文档下载.docx

《第五讲制作包含超级链接与AP Div的网页Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《第五讲制作包含超级链接与AP Div的网页Word格式文档下载.docx（28页珍藏版）》请在冰豆网上搜索。

网页色彩搭配分析

网页中文字的颜色：

#000000、#FFFFFF、#6633CC、#339933．#66CCFF，

链接颜色：

#6633CC，变换图像链接颜色：

#FF6600，已访问链接颜色：

#00FFFF，活动链接颜色：

#FF9999

网页组成元素分析

主要包括表格、文本、图像、SWF动画和多种形式的超级链接等网页元素

任务实现流程分析

新建网页文档0501.html→在网页中插入多个表格→在表格单元格中输入文字、插入图像→绘制或插入APDiv→在APDiv插入SWF动画或图像→创建多个超级链接

配盘素材导引

原始文件位置：

start\Unit05\task05-1

最终文件位置：

result\Unit05\task05-1

【任务5-1-1】创建网页文档0501.html

【任务描述】

（1）创建网页文档0501.html。

（2）在网页中依次插入6个表格：

表格1（1行1列）、表格2（1行3列）、表格3（1行1列）、表格4（2行3列）、表格5（1行1列）和表格6（4行1列）。

（3）在表格1中插入SWF动画“01.swf”；

在表格2中输入超链接文字；

在表格3中插入图像“map01.jpg”；

在表格4中插入多个嵌套表格，在各个嵌套表格中分别输入文字和插入图像；

在表格5中插入浮动框架；

在表格6中分别输入超链接文字和版权信息。

【任务实施】

1．新建网页文档0501.html

（1）在“单元5”站点文件夹task05-1中，通过【新建文档】对话框或者直接使用【新建文件】快捷菜单创建1个名称为“0501.html”的网页文档。

（2）设置网页标题

在【文档】工具栏的“标题”文本框直接输入网页标题“张家界风光”即可，如果需要设置网页的其他页面属性，单击【属性】面板【页面属性】按钮，打开【页面属性】对话框，在该对话框中设置页面属性即可，这里只将“链接”的“下划线样式”设置为“仅在变换图像时显示下划线”，其他的属性保持默认其设置不变。

2．插入表格1

（1）插入表格1

在网页中插入1个1行1列的表格1，该表格的“宽”设置为“780像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”。

该表格单元格的水平对齐方式设置为“居中对齐”，垂直对齐方式设置为“居中”，“宽”设置为“780像素”，“高”设置为“140像素”。

（2）在表格1中插入SWF动画

将光标置于表格1的单元格中，插入文件夹“flash”中的SWF动画“01.swf”，将该SWF动画的“宽”设置为“780像素”，“高”设置为“140像素”。

（3）保存网页，预览其效果。

3．插入表格2

在表格1的下方插入1个1行3列的表格2，该表格的“宽”设置为“780像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”，行高设置为“32像素”，背景图像设置为文件夹“images”中的图像“bg01.gif”。

将表格2第1列和第3列的列宽设置为“20像素”，将表格2第2列单元格的水平对齐方式设置为“居中对齐”，垂直对齐方式设置为“居中”。

在表格2第2列单元格中输入以下文字“首页|张家界森林公园|天子山自然保护区|索溪峪自然保护区|黄龙洞|宝峰湖|张家界其他景点”。

设置这些文字的大小为“10点数（pt）”、加粗，文字颜色设置为“#FFFFFF”，样式名称命名为style1。

保存该网页，预览其效果。

4．插入表格3

在表格2的下方插入1个1行1列的表格3，该表格的“宽”设置为“780像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”，行高设置为“200像素”。

将表格3单元格的水平对齐方式设置为“居中对齐”，垂直对齐方式设置为“居中”。

在表格3的单元格中插入文件夹“task05-1\images”中图像“map01.jpg”，“替换”文本设置为“张家界导游图,张家界地图,张家界景区示意图”。

将表格3中所插入的图像的“宽”设置为“780像素”，“高”设置为“400像素”。

保存网页，预览其效果。

5．插入表格4

（1）插入表格4且设置其属性

在表格3的下方插入1个2行3列的表格4，该表格的“宽”设置为“780像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”。

将表格4第1列的“宽”设置为“178像素”，第2列的“宽”设置为“2像素”，第3列的“宽”设置为“600像素”，注意切换到网页的【代码视图】窗口，将第2列两个单元格的空格符号“&

nbsp;

”删除，否则第2列的宽度尺寸设置会无效。

将表格4第1列的两个单元格的水平对齐方式设置为“居中对齐”，垂直对齐方式设置为“顶端”。

将表格4第3列单元格的水平对齐方式设置为“居中对齐”。

（2）添加HTML代码，设置表格4的属性

（3）合并单元格并设置背景颜色

将表格4第2列的两个单元格合并为1个单元格，同样将表格4第3列的两个单元格合并为1个单元格。

将表格4第2列合并后的单元格的背景颜色设置为“#CCCCCC”。

（4）插入嵌套表格4-1

在表格4第1列的上方单元格中插入1个3行1列的表格4-1，该表格的“宽”设置为“175像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”。

（5）设置嵌套表格4-1的属性

将表格4-1第2行的单元格的水平对齐方式设置为“居中对齐”，垂直对齐方式设置为“居中”。

将表格4-1第1行的“高”设置为“43像素”，第2行的“高”设置为“85像素”，第3行的“高”设置为“20像素”。

将表格4-1第2行单元格的背景图像设置为文件夹“images”中的图像“02.jpg”。

（6）在表格4-1的单元格中插入图像

在表格4-1第1行单元格中插入文件夹“images”中的图像“01.jpg”，在第3行单元格中插入文件夹“images”中的图像“03.jpg”。

（7）在表格4-1第2行的单元格中插入浮动框架

切换到网页0501.html【代码视图】窗口，在表格4-1第2行单元格的HTML标签<

td>

与<

/td>

之间输入以下HTML代码：

<

iframesrc="

webpage/show_pic.html"

marginwidth="

0"

width="

112"

height="

85"

align="

middle"

scrolling="

no"

>

天子山风光<

/iframe>

（8）插入嵌套表格4-2

在表格4第2行第1列的单元格中插入1个7行1列的表格4-2，该表格的“宽”设置为“90%”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”。

将表格4-2第1行的“高”设置为“45像素”，第1行的单元格的水平对齐方式设置为“居中对齐”，垂直对齐方式设置为“居中”，在该单元格中插入文件夹“images”中的图像“05.jpg”，然后输入两个空格，再输入文字“张家界景点大全”，将所输入文字大小设置为“16像素”，颜色设置为“#66CCFF”，样式名称命名为style2。

将表4-2的第3、5行的行高设置为“6像素”，第7行的行高设置为“35像素”，将所有行单元格的水平对齐方式设置为“居中对齐”，将第7行单元格的“垂直”对齐方式设置为“居中”。

分别将文件夹“text”中文本文件“0501.txt”中“张家界景点大全”相应的文本内容拷贝到表格4-2的第2、4、6行中，在合适位置换行。

在第7行中输入文字“【下载更多的图片】”，将所有文字的大小设置为“10点数（pt）”，样式名称命名为style3。

将文字“【下载更多的图片】”的颜色设置为“#9933CC”，样式名称命名为style31。

（9）插入嵌套表格4-3

在表格4第3列的单元格中插入1个6行1列的表格4-3，该表格的“宽”设置为“96%”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”。

将表格4-3的第1、3、5行的行高设置为“40像素”。

在第1、3、5行的单元格中插入文件夹“images”中的图像“04.jpg”，并将该图像的“宽”设置为“580像素”，“高”设置为“40像素”。

分别将文件夹“text”中文本文件“0501.txt”中“张家界景区介绍”相应的文本内容拷贝到表格4-2的第2、4、6行中，并且文字的大小设置为“10点数（pt）”，居左对齐，样式名称命名为style4。

将第2行中段首文字“张家界国家森林公园”、第4行中段首文字“天子山自然保护区”、第6行中段首文字“索溪峪自然保护区”的颜色设置为“#339933”、粗体，样式名称命名为style41。

在第4行的单元格中合适的位置插入文件夹“images”中的图像“tzs.jpg”，将该图像的“宽”设置为“150像素”，“高”设置为“130像素”，“垂直边距”设置为“6像素”，“水平边距”设置为“10像素”，边框设置为0，居左对齐，在“替换”列表框中输入文本“千山万壑，云雾缭绕”，并且拖动该图像到合适的位置。

在第6行的单元格中合适的位置插入文件夹“images”中的图像“bfh.jpg”，将该图像的“宽”设置为“170像素”，“高”设置为“122像素”，“垂直边距”设置为“6像素”，“水平边距”设置为“10像素”，边框设置为0，居右对齐，在“替换”列表框中输入文本“云梯百丈上天台，高峡平湖一鉴开”，并且拖动该图像到合适的位置。

在第6行中图像的下方输入文字“【回到页首】”，可以通过输入空格调整文字的位置，将文字大小设置为“12点数（pt）”，颜色设置为“#66CCFF”。

6．插入表格5

在表格4的下方插入1个1行1列表格5，该表格的“宽”设置为“780像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”，将该表格的行高设置为“76像素”。

切换到【代码视图】窗口，在表格5的标签<

table…>

内输入以下代码：

style="

border:

1pxsolid#CCCCCC;

border-width:

0222;

"

，这些代码用于设置表格边框线。

在单元格的标签<

之间输入以下代码：

webpage/scroll_pic.html"

name="

scrollimg"

100%"

76"

marginheight="

frameborder="

id="

allowtransparency="

true"

application="

>

张家界风光<

这些代码用于插入浮动框架。

7．插入表格6

在表格5的下方插入1个4行1列的表格6，该表格的“宽”设置为“780像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”。

将该表格第1行的行高设置为“2像素”，其他三行的行高设置为“25像素”，将各行单元格的水平对齐方式设置为“居中对齐”，垂直对齐方式设置为“居中”，将第1行的背景颜色设置为“#0099FF”。

注意切换到网页的【代码视图】窗口，将第1行单元格中的空格符号“&

”删除，否则第1行的行高尺寸设置会无效。

切换到【代码视图】窗口，在表格6的标签<

table……>

在第2行的单元格中输入以下文字“返回首页|联系方式|旅游调查|您的建议|网站地图|设为首页|收藏本站”。

在第3行的单元格中输入以下文字“友情链接：

中国旅游网|张家界旅游网|九寨沟旅游网|黄山旅游网|桂林旅游网”。

在第4行的单元格中输入以下文字“E游天下网版权所有Copyright2013-2016©

蝴蝶工作室”。

将所输入文字的“样式”设置为“style3”。

【任务5-1-2】在网页0501.html中绘制或插入APDiv

（1）绘制1个名称为“apDiv1”的APDiv，且在该APDiv中插入1个SWF动画“02.swf”。

（2）绘制1个名称为“apDiv2”的APDiv，且在该APDiv中插入1个SWF动画“03.swf”。

（3）插入1个名称为“apDiv3”的APDiv，且在该APDiv中插入一幅图像“06.gif”。

1．绘制第1个APDiv

（1）绘制APDiv

切换到【插入】面板的“布局”工具，单击【绘制APDiv】按钮

，鼠标指针变为“＋”形状。

然后将鼠标指针定位到表格4-3中第4行中图像“tzs.jpg”的位置，按住鼠标左键且拖动鼠标，绘制1个大小合适的区域，释放鼠标后即可完成1个APDiv的绘制，该APDiv命名为“apDiv1”。

（2）设置APDiv的属性

选中绘制的apDiv1，在【属性】面板中将“左”设置为“320px”，“上”设置为“868px”，“宽”设置为“138px”，“高”设置为“96px”。

（3）在APDiv中插入SWF动画

在apDiv1内单击，将插入点置于其内部，然后插入文件夹“flash”中的SWF动画“02.swf”。

（4）设置SWF动画的属性

在SWF动画的【属性】面板中，将其“宽”设置为“137像素”，“高”设置为“96像素”，将“Wmode”值设置为“透明”。

2．绘制第二个APDiv

按照类似的方法，在表格4-3中第4行中图像“bfh.jpg”的位置绘制第二个APDiv，该APDiv的命名为“apDiv2”，在apDiv2的【属性】面板中，将其“左”设置为“700px”，“上”设置为“1135px”，“宽”设置为“162px”，“高”设置为“64px”。

在apDiv2内部插入文件夹“flash”中SWF动画“03.swf”，将所插入的SWF动画的“宽”设置为“162像素”，“高”设置为“64像素”，将“Wmode”值设置为“透明”。

3．插入第三个APDiv

（1）插入点定位

将鼠标指针置于表格6的右侧，即在表格6的右侧插入APDiv。

（2）插入APDiv

在DreamweaverCS6的主界面，选择命令【插入】→【布局对象】→【APDiv】，此时在表格6的下方，插入了第三个APDiv，且命名为“apDiv3”。

（3）设置apDiv3的属性

所插入的APDiv默认的“宽”为“200px”，“高”为“115px”。

在apDiv3的【属性】面板中将其“宽”设置为“40px”，“高”设置为“20px”。

（4）调整apDiv3的位置

单击选中APDiv左上角的选择柄，按钮鼠标左键移动APDiv。

当移动到表格6的右侧时释放鼠标即可。

在apDiv3的【属性】面板中微调其位置，将“左”设置为“945px”，“上”设置为“1340px”。

（5）在APDiv中插入图像

在apDiv3内单击，将插入点置于其内部，然后插入文件夹“images”中的图像“06.gif”。

4．观察“AP元素”面板中的APDiv

在DreamweaverCS6主界面中，选择命令【窗口】→【AP元素】，显示“AP元素”的面板，如图5-21所示，在该面板中显示了所插入三个APDiv。

保存网页，按F12预览其效果。

【任务5-1-3】在网页0501.html中创建多种类型的超级链接

（1）设置超级链接的属性。

（2）创建文本形式的外部链接和内部链接。

（3）创建图片形式的内部链接。

（4）创建电子邮件链接。

（5）创建文件下载链接。

（6）创建锚点链接。

（7）创建空地址链接。

（8）创建图像热点链接。

（9）检查链接的有效性和正确性。

1．设置超级链接的属性

打开【页面属性】对话框，在该对话框单击“分类”列表项“链接（CSS）”，在右侧设置“链接”属性，将“链接颜色”颜色设置为“#6633CC”，“变换图像链接”颜色设置为“#FF6600”，“已访问链接”颜色设置为“#00FFFF”，“活动链接”颜色设置为“#FF9999”。

“下划线样式”设置为“仅在变换图像时显示下划线”，设置完成单击【确定】按钮即可。

2．创建文本形式的外部链接

（1）选中表格6第3行中的文字“张家界旅游网”。

（2）在【属性】面板的“链接”文本框中输入外部链接的绝对路径“”。

（3）外部链接的绝对路径输入完成之后，属性面板中的“目标”下拉列表框即变为可选状态，下拉列表中有多个选项可供选择，这里选择“_blank”。

可以按照同样的方法为“中国旅游网”、“九寨沟旅游网”、“黄山旅游网”、“桂林旅游网”等文本设置外部超级链接。

3．创建文本形式的内部链接

（1）选中表格2第2列单元格中的文字“天子山自然保护区”。

（2）在DreamweaverCS6的主界面中，选择命令【插入】→【超级链接】，弹出【超级链接】对话框。

（3）在【超级链接】对话框中，单击“链接”列表框中右边的【浏览文件】按钮，在弹出的【选择文件】对话框中选择文件夹“webpage”中的网页文件“tzs.html”。

（4）在“目标”下拉列表框中选择“_blank”。

（5）在“标题”文本框中输入文字“欣赏天子山美景”。

超级链接的参数设置完成后，单击【确定】按钮即可。

至此，1个文本形式的内部链接便创建完成。

可以按照同样的方法为表格2“索溪峪自然保护区”、“黄龙洞”、“宝峰湖”、“张家界其他景点”和表格4-2中的“金鞭溪”、“后花园”、“宝峰湖”、“天子山”等文本创建内部链接，“目标”设置为“_blank”。

4．创建图片形式的内部链接

（1）打开文件夹“webpage”中的网页文档“show_pic.html”。

（2）选中该网页中的图片“050212.jpg”，然后在【属性】面板中，单击“链接”列表框中右边的【浏览文件】按钮，在弹出的【选择文件】对话框中选择文件夹“webpage”中的网页文档“album0502.html”，单击【确定】按钮返回【属性】面板。

接着在【属性】面板的“目标”下拉列表框中选择“_blank”。

（3）设置超级链接title属性

单击【文档】工具栏中的【拆分】按钮，切换到拆分视图窗口。

在标签<

ahref="

album0502.html"

target="

_blank"

内添加title属性，即输入以下HTML代码：

title="

欣赏更多天子山风景区的美景"

。

（4）保存网页，按F12键预览其效果，将鼠标指针放置在设置了超级链接的图片上时，就会看到图片旁边的提示信息。

按照同样的方法为网页文档0501.html中表格4-3中第4行和第6行中的图片设置超级链接和提示信息，分别链接到文件夹“webpage”中的网页文档“tzs.html”和“bfh.html”，“目标”设置为“_blank”。

5．创建电子邮件链接

（1）选中表格6第2行中的文字“您的建议”，在【属性】面板的“链接”文本框中输入“mailto:

”和邮箱地址，如“mailto:

abc@”。

（2）在邮箱地址的后面加上“?

subject=对网站的意见与建议”，完整的语句为“mailto:

abc@?

subject=对网站的意见与建议”。

这样预览页面时，用户单击该电子邮件链接弹出发信窗口会有现有的主题。

也可以先选中文字“您的建议”，然后选择命令【插入】→【电子邮件链接】，打开【电子邮件链接】对话框，在该对话框的“文本”文本框中输入文字，在“E-Mail”文本框中输入“mailto:

然后单击【确定】按钮即可。

6．创建文件下载链接

选中表格4-2第7行的单元格中的文字“下载更多的图片”，然后在【属性】面板中，单击“链接”列表框中右边的【浏览文件】按钮，在弹出的【选择文件】对话框中选择文件夹“images”中的rar文件“img.rar”，单击【确定】按钮返回【属性】面板。

7．创建锚点链接

（1）插入第1个命名锚记

将鼠标指针置于表格2第2列单元格中文字“首页”的左侧。

在DreamweaverCS6的主界面，选择命令【插入】→【命名锚记】，弹出【命名锚记】对话框，在该对话框的“锚记名称”文本框中输入“top”。

然后单击【确定】按钮，便插入1个命名锚记。

（2）插入第二个命名锚记

将光标置于表格4-3第6行单元格中文字“索溪峪自然保护区”的左侧。

单击【插入】工具面板的“常用”工具中的【命名锚记】按钮，也可以打开【命名锚记】对话框，在该对话框的“锚记名称”文本框中输入“索溪峪自然保护区”，然后单击【确定】按钮，便插入1个命名锚记。

（3）创建锚点链接

选中表格4-3第6行单元格的文字“回到页首”，在【属性】面板的“链接”文本框中输入“#top”。

选中APDiv“apDiv3”内的图像“06.gif”，在【属性】面板的“链接”文本框中输入“#top”。

保存该网页，按F12预览其效果，单击锚点链接文字“回到页首”或者单击锚点链接图片“06.gif”，即可跳转到网页中文字“首页”的命名锚记位置。

8、创建空地址链接

选中表格6第2行单元格中的文字“返回首页”，然后在【属性】面板的“链接”文本框中输入半角字符“#”，即可创建空地址链接。

保存该网页，按F12预览其效果，单击该空地址链接“返回首页”，则会跳转到当前网页的开始。

9、创建图像热点链接

（1）选中绘制热点区域的图像

单击选中表格2中图像“map01.jpg”。

（2）绘制矩形热点区域

在图像的【属性】面板中单击【矩形热点工具】按钮，此时鼠标指针变成“＋”形状，然后将鼠标指针移到图像“map01.jpg”左上角“天子山自然保护区”位置，按住鼠标左键拖动绘制1个矩形，当矩形的大小合适时释放鼠标左键，于是1个矩形的热点区域便绘制完成，且用透明的蓝色矩形显示指定图像的热点区域。

在热点的【属性】面板中，单击“链接”文本框中右边的【浏