【任务】制作包含超级链接的展示张家界景点的网页课件

1、网页设计与制作任务驱动教程 （第3版）2单元6制作包含超级链接和 导航栏的网页【任务6-1】制作包含超级链接的展示 张家界景点的网页3【任务描述】【任务6-1】制作包含超级链接的展示 张家界景点的网页（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。（2）创建网页文档0401.html，且链接外部样式文件base.css和main.css。4【任务实施】1打开网页打开已有网页0601.html。2设置超级链接的属性打开【页面属性】对话框，在该对话框单击“分类”列表项“链接（CSS）”，在右侧设置“链接”属性，将“链接颜色”颜色设置为“#00A

2、5F6”，“变换图像链接”颜色设置为“#C60119”，“已访问链接”颜色设置为“#1A22C4”，“活动链接”颜色设置为“#FFA024”。5“下划线样式”设置为“仅在变换图像时显示下划线”，如图6-2所示，设置完成单击【确定】按钮即可。图6-2在【页面属性】对话框设置链接属性63创建文本形式的外部链接（1）选中网页底部导航栏中的文字“张家界旅游网”。（2）在【属性】面板的“链接”文本框中输入外部链接的绝对路径“”。7（3）外部链接的绝对路径输入完成之后，属性面板中的“目标”下拉列表框即变为可选状态，下拉列表中有多个选项可供选择，这里选择“_blank”。可以按照同样的方法为“黄山旅游网”、

3、“途牛网”、“昆明旅游网”、“桂林旅游网”等文本设置外部超级链接。84创建文本形式的内部链接（1）选中网页顶部导航栏中的文字“天子山自然保护区”。（2）在Dreamweaver CC的主界面中，选择命令【插入】【Hyperlink】，弹出【Hyperlink】对话框。（3）在【Hyperlink】对话框中，单击“链接”列表框中右边的【浏览文件】按钮，在弹出的【选择文件】对话框中选择文件夹“webpage”中的网页文件“tzs.html”。9（4）在“目标”下拉列表框中选择“_blank”。（5）在“标题”文本框中输入文字“欣赏天子山美景”，如图6-5所示。超级链接的参数设置完成后，单击【确定】

4、按钮即可。图6-5在【Hyperlink】对话框中设置超级链接的参数10至此，1个文本形式的内部链接便创建完成。可以按照同样的方法为网页顶部导航栏中的文本“索溪峪自然保护区”、“黄龙洞”、“宝峰湖”、“张家界其他景点”添加内部链接，“目标”设置为“_blank”。115创建图片形式的内部链接（1）选中网页0601.html中的图片“bfh.jpg”，然后在【属性】面板中，单击“链接”列表框中右边的【浏览文件】按钮，在弹出的【选择文件】对话框中选择文件夹“webpage”中的网页文档“bfh.html”，单击【确定】按钮返回【属性】面板。12接着在【属性】面板的“目标”下拉列表框中选择“_bla

5、nk”，如图6-6所示。图6-6在【属性】面板中设置图片的链接属性（2）设置超级链接title属性单击【文档】工具栏中的【拆分】按钮，切换到拆分视图窗口。13在标签内添加title属性，即输入以下HTML代码：title=云梯百丈上天台，高峡平湖一鉴开。（3）保存网页，按F12键预览其效果，将鼠标指针放置在设置了超级链接的图片上时，就会看到图片旁边的提示信息。14按照同样的方法为网页0601.html中另一张图片“tzs.jpg”设置超级链接和提示信息，链接到文件夹“webpage”中的网页文档“tzs.html”，“目标”设置为“_blank”。156创建电子邮件链接（1）选中网页0601.

6、html底部导航栏的文字“您的建议”，在【属性】面板的“链接”文本框中输入“mailto:”和邮箱地址，如“mailto:”。16（2）在邮箱地址的后面加上“?subject=对网站的意见与建议”，完整的语句为“mailto:?subject=对网站的意见与建议”。这样预览页面时，用户单击该电子邮件链接弹出发信窗口会有现有的主题。然后单击【确定】按钮即可。177创建锚点链接创建到命名锚记的链接分为两个步骤：首先创建1个命名锚记，然后创建到该命名锚记的链接，也就是锚点链接。（1）插入第1个命名锚记切换到【代码】视图，将鼠标指针置于网页顶部导航栏文字“首页”的左侧。然后输入以下代码插入一个命名锚记

7、：18（2）插入第二个命名锚记将光标置于网页顶部导航栏文字“索溪峪自然保护区”的左侧，然后输入以下代码插入另一个命名锚记：19（3）创建锚点链接选中表格中的文字“回到页首”，在【属性】面板的“链接”文本框中输入“#top”，如图6-8所示。图6-8 在【属性】面板中设置链接为“#top”保存该网页，按F12预览其效果，单击锚点链接文字“回到页首”即可跳转到网页中文字“首页”的命名锚记位置。208、创建空地址链接选中网页中的文字“返回首页”，然后在【属性】面板的“链接”文本框中输入半角字符“#”，即可创建空地址链接。保存该网页，按F12预览其效果，单击该空地址链接“返回首页”，则会跳转到当前网页

8、的开始。219、创建图像热点链接在一幅尺寸较大的图像中，可以同时创建多个热点，热点的形状可以是矩形、椭圆形或多边形。（1）选中绘制热点区域的图像单击选中表格中的图像“map01.jpg”。22（2）绘制矩形热点区域在图像的【属性】面板中单击【矩形热点工具】按钮，此时鼠标指针变成“”形状，然后将鼠标指针移到图像“map01.jpg”左上角“天子山自然保护区”位置，按住鼠标左键拖动绘制1个矩形，当矩形的大小合适时释放鼠标左键，于是1个矩形的热点区域便绘制完成，且用透明的蓝色矩形显示指定图像的热点区域。23在热点的【属性】面板中，单击“链接”文本框中右边的【浏览文件】按钮，在弹出的【选择文件】对话框

9、中选择文件夹“webpage”中的网页文档“tzs.html”，单击【确定】按钮返回【属性】面板，在“目标”列表框中选择“_blank”，在“替换”列表框中输入“天子山自然保护区”，且按【Enter】键结束输入，如图6-10所示。图6-10在矩形热点的【属性】面板中设置链接属性241个热点区域创建完成后，单击“热点”的【属性】面板左下角的【指针热点工具】，结束热点区域的绘制状态。可以选中热点区域，对其大小和位置进行适当的调整。25（3）绘制椭圆形热点区域在图像的【属性】面板中单击【椭圆形热点工具】按钮，此时鼠标指针变成“”形状，然后将鼠标指针移到图像“map01.jpg”右侧的“索溪峪自然保护

10、区”位置，按住鼠标左键拖动绘制1个椭圆，当椭圆的大小合适时释放鼠标左键，于是1个椭圆的热点区域便绘制完成，26在热点的【属性】面板中，单击“链接”文本框中输入“#索溪峪”，在“目标”列表框中选择“_blank”，在“替换”列表框中输入“索溪峪”，且按【Enter】键结束输入，如图6-11所示。然后单击“热点”的【属性】面板左下角的【指针热点工具】，结束热点区域的绘制状态。图6-11在椭圆形热点的【属性】面板中设置链接属性27（4）绘制多边形热点区域在图像的【属性】面板中单击【多边形热点工具】按钮，此时鼠标指针变成“”形状，然后将鼠标指针移到图像“map01.jpg”左下角“张家界国家森林公园”

11、的合适位置，单击鼠标左键，然后依次在多个不同的点单击，便会形成1个任意多边形区域。28图像“map01.jpg”中绘制的3个热点区域如图6-12所示。图6-12 图像“map01.jpg”中绘制的3个热点区域29最后单击“热点”的【属性】面板左下角的【指针热点工具】，结束热点区域的绘制状态。（5）保存网页，预览其效果，单击各个热点链接，观察其效果。3010、检查链接（1）在Dreamweaver CC主窗口的【窗口】菜单中，选择【结果】【链接检查器】命令，打开【链接检查器】面板。（2）在【链接检查器】面板中，单击面板左上角的绿色箭头，弹出如图6-15所示的下拉菜单，在该菜单中选择命令项【检查当前文档中的链接】。图6-15检查链接的下拉菜单31（3）自动开始检查站点链接，检查完毕后，如果存在无效链接，便会显示在该对话框中。如果要修改无效链接，直接