中职高教版《网页设计与制作任务驱动教程》6.1制作包含超级链接的展示张家界景点的网页课件

1 单元6　制作包含超级链接和 导航栏的网页 【任务6-1】制作包含超级链接的展示 张家界景点的网页 《网页设计与制作任务驱动教程（第3版）》 1 2 【任务描述】 【任务6-1】制作包含超级链接的展示 张家界景点的网页 （1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。 （2）创建网页文档0401.html，且链接外部样式文件base.css和main.css。 《网页设计与制作任务驱动教程（第3版）》 3 【任务实施】 1．打开网页 打开已有网页0601.html。 2．设置超级链接的属性 打开【页面属性】对话框，在该对话框单击“分类”列表项“链接（CSS）”，在右侧设置“链接”属性，将“链接颜色”颜色设置为“#00A5F6”，“变换图像链接”颜色设置为“#C60119”，“已访问链接”颜色设置为“#1A22C4”，“活动链接”颜色设置为“#FFA024”。 《网页设计与制作任务驱动教程（第3版）》 4 “下划线样式”设置为“仅在变换图像时显示下划线”，如图6-2所示，设置完成单击【确定】按钮即可。 图6-2　在【页面属性】对话框设置链接属性 《网页设计与制作任务驱动教程（第3版）》 4 5 3．创建文本形式的外部链接 （1）选中网页底部导航栏中的文字“张家界旅游网”。 （2）在【属性】面板的“链接”文本框中输入外部链接的绝对路径“http://www.zjjvip.com”。 《网页设计与制作任务驱动教程（第3版）》 6 （3）外部链接的绝对路径输入完成之后，属性面板中的“目标”下拉列表框即变为可选状态，下拉列表中有多个选项可供选择，这里选择“_blank”。 可以按照同样的方法为“黄山旅游网”、“途牛网”、“昆明旅游网”、“桂林旅游网”等文本设置外部超级链接。 《网页设计与制作任务驱动教程（第3版）》 7 4．创建文本形式的内部链接 （1）选中网页顶部导航栏中的文字“天子山自然保护区”。 （2）在Dreamweaver CC的主界面中，选择命令【插入】→【Hyperlink】，弹出【Hyperlink】对话框。 （3）在【Hyperlink】对话框中，单击“链接”列表框中右边的【浏览文件】按钮，在弹出的【选择文件】对话框中选择文件夹“webpage”中的网页文件“tzs.html”。 《网页设计与制作任务驱动教程（第3版）》 8 （4）在“目标”下拉列表框中选择“_blank”。 （5）在“标题”文本框中输入文字“欣赏天子山美景”，如图6-5所示。 超级链接的参数设置完成后，单击【确定】按钮即可。 图6-5　在【Hyperlink】对话框中设置超级链接的参数 《网页设计与制作任务驱动教程（第3版）》 9 至此，1个文本形式的内部链接便创建完成。 可以按照同样的方法为网页顶部导航栏中的文本“索溪峪自然保护区”、“黄龙洞”、“宝峰湖”、“张家界其他景点”添加内部链接，“目标”设置为“_blank”。 《网页设计与制作任务驱动教程（第3版）》 10 5．创建图片形式的内部链接 （1）选中网页0601.html中的图片“bfh.jpg”，然后在【属性】面板中，单击“链接”列表框中右边的【浏览文件】按钮，在弹出的【选择文件】对话框中选择文件夹“webpage”中的网页文档“bfh.html”，单击【确定】按钮返回【属性】面板。 《网页设计与制作任务驱动教程（第3版）》 11 接着在【属性】面板的“目标”下拉列表框中选择“_blank”，如图6-6所示。 图6-6　在【属性】面板中设置图片的链接属性 （2）设置超级链接title属性 单击【文档】工具栏中的【拆分】按钮，切换到拆分视图窗口。 《网页设计与制作任务驱动教程（第3版）》 12 在标签<a href="webpage/bfh.html" target="_blank">内添加title属性，即输入以下HTML代码：title="云梯百丈上天台，高峡平湖一鉴开"。 （3）保存网页，按F12键预览其效果，将鼠标指针放置在设置了超级链接的图片上时，就会看到图片旁边的提示信息。 《网页设计与制作任务驱动教程（第3版）》 13 按照同样的方法为网页0601.html中另一张图片“tzs.jpg”设置超级链接和提示信息，链接到文件夹“webpage”中的网页文档“tzs.html”，“目标”设置为“_blank”。 《网页设计与制作任务驱动教程（第3版）》 14 6．创建电子邮件链接 （1）选中网页0601.html底部导航栏的文字“您的建议”，在【属性】面板的“链接”文本框中输入“mailto:”和邮箱地址，如“mailto:abc@163.com”。 《网页设计与制