1、网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）网页设计与制作任务驱动教程 （第3版）网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）2单元6制作包含超级链接和 导航栏的网页【任务6-1】制作包含超级链接的展示 张家界景点的网页网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）3【任务描述】【任务6-1】制作包含超级链接的展示 张家界景点的网页（1）创建样式文件）创建样式文件base.css和和main.css，在该，在该样式文件中定义标签的属性、类选择符及其属性。样式文件中定义标签的属性、类选择符及其属性。（2）创建
2、网页文档）创建网页文档0401.html，且链接外部，且链接外部样式文件样式文件base.css和和main.css。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）4【任务实施】1 1打开网页打开已有网页打开已有网页0601.html。2 2设置超级链接的属性打开【页面属性】对话框，在该对话框单击打开【页面属性】对话框，在该对话框单击“分类分类”列表项列表项“链接（链接（CSS）”，在右侧设置，在右侧设置“链接链接”属性，将属性，将“链接颜色链接颜色”颜色设置为颜色设置为“#00A5F6”，“变换图像链接变换图像链接”颜色设置为颜色设置为“#C60119”，“已访问
3、链接已访问链接”颜色设置为颜色设置为“#1A22C4”，“活动链接活动链接”颜色设置为颜色设置为“#FFA024”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）5“下划线样式下划线样式”设置为设置为“仅在变换图像时显示仅在变换图像时显示下划线下划线”，如图，如图6-2所示，设置完成单击【确定】所示，设置完成单击【确定】按钮即可。按钮即可。图6-2在【页面属性】对话框设置链接属性网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）63 3创建文本形式的外部链接（1）选中网页底部导航栏中的文字）选中网页底部导航栏中的文字“张家界张家界旅游网旅游网
4、”。（2）在【属性】面板的）在【属性】面板的“链接链接”文本框中输文本框中输入外部链接的绝对路径入外部链接的绝对路径“http:/”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）7（3）外部链接的绝对路径输入完成之后，）外部链接的绝对路径输入完成之后，属性面板中的属性面板中的“目标目标”下拉列表框即变为可选下拉列表框即变为可选状态，下拉列表中有多个选项可供选择，这里状态，下拉列表中有多个选项可供选择，这里选择选择“_blank”。可以按照同样的方法为可以按照同样的方法为“黄山旅游网黄山旅游网”、“途牛网途牛网”、“昆明旅游网昆明旅游网”、“桂林旅游网桂林旅游网”等
5、文本设置外部超级链接。等文本设置外部超级链接。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）84 4创建文本形式的内部链接（1）选中网页顶部导航栏中的文字）选中网页顶部导航栏中的文字“天子山自然天子山自然保护区保护区”。（2）在）在Dreamweaver CC的主界面中，选择命令的主界面中，选择命令【插入】【插入】【Hyperlink】，弹出【】，弹出【Hyperlink】对话框。】对话框。（3）在【）在【Hyperlink】对话框中，单击】对话框中，单击“链接链接”列列表框中右边的【浏览文件】按钮，在弹出的【选择文件】表框中右边的【浏览文件】按钮，在弹出的【选择文
6、件】对话框中选择文件夹对话框中选择文件夹“webpage”中的网页文件中的网页文件“tzs.html”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）9（4）在）在“目标目标”下拉列表框中选择下拉列表框中选择“_blank”。（5）在）在“标题标题”文本框中输入文字文本框中输入文字“欣赏天子欣赏天子山美景山美景”，如图，如图6-5所示。所示。超级链接的参数设置完成后，单击【确定】按超级链接的参数设置完成后，单击【确定】按钮即可。钮即可。图6-5在【Hyperlink】对话框中设置超级链接的参数网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）
7、10至此，至此，1个文本形式的内部链接便创建完成。个文本形式的内部链接便创建完成。可以按照同样的方法为网页顶部导航栏中的可以按照同样的方法为网页顶部导航栏中的文本文本“索溪峪自然保护区索溪峪自然保护区”、“黄龙洞黄龙洞”、“宝宝峰湖峰湖”、“张家界其他景点张家界其他景点”添加内部链接，添加内部链接，“目标目标”设置为设置为“_blank”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）115 5创建图片形式的内部链接（1）选 中 网 页）选 中 网 页 0 6 0 1.h t m l 中 的 图 片中 的 图 片“bfh.jpg”，然后在【属性】面板中，单击，然后在
8、【属性】面板中，单击“链链接接”列表框中右边的【浏览文件】按钮，在弹出列表框中右边的【浏览文件】按钮，在弹出的【选择文件】对话框中选择文件夹的【选择文件】对话框中选择文件夹“webpage”中的网页文档中的网页文档“bfh.html”，单击【确定】按钮，单击【确定】按钮返回【属性】面板。返回【属性】面板。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）12接着在【属性】面板的接着在【属性】面板的“目标目标”下拉列表框下拉列表框中选择中选择“_blank”，如图，如图6-6所示。所示。图6-6在【属性】面板中设置图片的链接属性（2）设置超级链接）设置超级链接title属
9、性属性单击【文档】工具栏中的【拆分】按钮，切换单击【文档】工具栏中的【拆分】按钮，切换到拆分视图窗口。到拆分视图窗口。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）13在标签在标签内添加内添加title属性，即输入以下属性，即输入以下HTML代码：代码：title=云梯百丈上天台，高峡平湖云梯百丈上天台，高峡平湖一鉴开一鉴开。（3）保存网页，按）保存网页，按F12键预览其效果，将鼠键预览其效果，将鼠标指针放置在设置了超级链接的图片上时，就会标指针放置在设置了超级链接的图片上时，就会看到图片旁边的提示信息看到图片旁边的提示信息。网页设计与制作任务驱动教程（第网页设计与
10、制作任务驱动教程（第3 3版）版）14按照同样的方法为网页按照同样的方法为网页0601.html中另一张图中另一张图片片“tzs.jpg”设置超级链接和提示信息，链接到设置超级链接和提示信息，链接到文件夹文件夹“webpage”中的网页文档中的网页文档“tzs.html”，“目标目标”设置为设置为“_blank”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）156 6创建电子邮件链接（1）选中网页）选中网页0601.html底部导航栏底部导航栏的文字的文字“您的建议您的建议”，在【属性】面板的，在【属性】面板的“链接链接”文本框中输入文本框中输入“mailto:”
11、和邮箱和邮箱地址，如地址，如“mailto:”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）16（2）在邮箱地址的后面加上）在邮箱地址的后面加上“?subject=对网站的意见与建议对网站的意见与建议”，完整的语句为，完整的语句为“mailto:?subject=对网站的意见对网站的意见与建议与建议”。这样预览页面时，用户单击该电子。这样预览页面时，用户单击该电子邮件链接弹出发信窗口会有现有的主题。然后邮件链接弹出发信窗口会有现有的主题。然后单击【确定】按钮即可。单击【确定】按钮即可。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）177
12、 7创建锚点链接创建到命名锚记的链接分为两个步骤：首先创创建到命名锚记的链接分为两个步骤：首先创建建1个命名锚记，然后创建到该命名锚记的链接，个命名锚记，然后创建到该命名锚记的链接，也就是锚点链接。也就是锚点链接。（1 1）插入第）插入第1 1个命名锚记个命名锚记切换到【代码】视图，将鼠标指针置于网页顶切换到【代码】视图，将鼠标指针置于网页顶部导航栏文字部导航栏文字“首页首页”的左侧。然后输入以下代码的左侧。然后输入以下代码插入一个命名锚记：插入一个命名锚记：网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）18（2 2）插入第二个命名锚记）插入第二个命名锚记将光标置于
13、网页顶部导航栏文字将光标置于网页顶部导航栏文字“索溪峪自然索溪峪自然保护区保护区”的左侧，然后输入以下代码插入另一个命的左侧，然后输入以下代码插入另一个命名锚记：名锚记：网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）19（3 3）创建锚点链接）创建锚点链接选中表格中的文字选中表格中的文字“回到页首回到页首”，在【属性】，在【属性】面板的面板的“链接链接”文本框中输入文本框中输入“#top”，如图，如图6-8所示。所示。图6-8 在【属性】面板中设置链接为“#top”保存该网页，按保存该网页，按F12预览其效果，单击锚点链预览其效果，单击锚点链接文字接文字“回到页首回
14、到页首”即可跳转到网页中文字即可跳转到网页中文字“首页首页”的命名锚记位置。的命名锚记位置。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）208 8、创建空地址链接选中网页中的文字选中网页中的文字“返回首页返回首页”，然后在【属，然后在【属性】面板的性】面板的“链接链接”文本框中输入半角字符文本框中输入半角字符“#”，即可创建空地址链接。即可创建空地址链接。保存该网页，按保存该网页，按F12预览其效果，单击该空地预览其效果，单击该空地址链接址链接“返回首页返回首页”，则会跳转到当前网页的开始。，则会跳转到当前网页的开始。网页设计与制作任务驱动教程（第网页设计与制作任
15、务驱动教程（第3 3版）版）219 9、创建图像热点链接在一幅尺寸较大的图像中，可以同时创建多个在一幅尺寸较大的图像中，可以同时创建多个热点，热点的形状可以是矩形、椭圆形或多边形。热点，热点的形状可以是矩形、椭圆形或多边形。（1 1）选中绘制热点区域的图像）选中绘制热点区域的图像单击选中表格中的图像单击选中表格中的图像“map01.jpg”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）22（2 2）绘制矩形热点区域）绘制矩形热点区域在图像的【属性】面板中单击【矩形热点工在图像的【属性】面板中单击【矩形热点工具】按钮，此时鼠标指针变成具】按钮，此时鼠标指针变成“”形
16、状，然后形状，然后将鼠标指针移到图像将鼠标指针移到图像“map01.jpg”左上角左上角“天天子山自然保护区子山自然保护区”位置，按住鼠标左键拖动绘制位置，按住鼠标左键拖动绘制1个矩形，当矩形的大小合适时释放鼠标左键，个矩形，当矩形的大小合适时释放鼠标左键，于是于是1个矩形的热点区域便绘制完成，且用透明个矩形的热点区域便绘制完成，且用透明的蓝色矩形显示指定图像的热点区域。的蓝色矩形显示指定图像的热点区域。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）23在热点的【属性】面板中，单击在热点的【属性】面板中，单击“链接链接”文文本框中右边的【浏览文件】按钮，在弹出的【选
17、本框中右边的【浏览文件】按钮，在弹出的【选择文件】对话框中选择文件夹择文件】对话框中选择文件夹“webpage”中的网中的网页文档页文档“tzs.html”，单击【确定】按钮返回【属，单击【确定】按钮返回【属性】面板，在性】面板，在“目标目标”列表框中选择列表框中选择“_blank”，在在“替换替换”列表框中输入列表框中输入“天子山自然保护区天子山自然保护区”，且按【且按【Enter】键结束输入，如图】键结束输入，如图6-10所示。所示。图6-10在矩形热点的【属性】面板中设置链接属性网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）241个热点区域创建完成后，单击个热
18、点区域创建完成后，单击“热点热点”的的【属性】面板左下角的【指针热点工具】，结束【属性】面板左下角的【指针热点工具】，结束热点区域的绘制状态。可以选中热点区域，对其热点区域的绘制状态。可以选中热点区域，对其大小和位置进行适当的调整。大小和位置进行适当的调整。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）25（3 3）绘制椭圆形热点区域）绘制椭圆形热点区域在图像的【属性】面板中单击【椭圆形热点工在图像的【属性】面板中单击【椭圆形热点工具】按钮，此时鼠标指针变成具】按钮，此时鼠标指针变成“”形状，然后将形状，然后将鼠标指针移到图像鼠标指针移到图像“map01.jpg”右
19、侧的右侧的“索溪峪索溪峪自然保护区自然保护区”位置，按住鼠标左键拖动绘制位置，按住鼠标左键拖动绘制1个椭个椭圆，当椭圆的大小合适时释放鼠标左键，于是圆，当椭圆的大小合适时释放鼠标左键，于是1个个椭圆的热点区域便绘制完成椭圆的热点区域便绘制完成，网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）26在热点的【属性】面板中，单击在热点的【属性】面板中，单击“链接链接”文文本框中输入本框中输入“#索溪峪索溪峪”，在，在“目标目标”列表框中选列表框中选择择“_blank”，在，在“替换替换”列表框中输入列表框中输入“索溪索溪峪峪”，且按【，且按【Enter】键结束输入，如图】键
20、结束输入，如图6-11所示。所示。然后单击然后单击“热点热点”的【属性】面板左下角的【指的【属性】面板左下角的【指针热点工具】，结束热点区域的绘制状态。针热点工具】，结束热点区域的绘制状态。图6-11在椭圆形热点的【属性】面板中设置链接属性网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）27（4 4）绘制多边形热点区域）绘制多边形热点区域在图像的【属性】面板中单击【多边形热点在图像的【属性】面板中单击【多边形热点工具】按钮，此时鼠标指针变成工具】按钮，此时鼠标指针变成“”形状，然形状，然后将鼠标指针移到图像后将鼠标指针移到图像“map01.jpg”左下角左下角“张张家
21、界国家森林公园家界国家森林公园”的合适位置，单击鼠标左键，的合适位置，单击鼠标左键，然后依次在多个不同的点单击，便会形成然后依次在多个不同的点单击，便会形成1个任意个任意多边形区域。多边形区域。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）28图像图像“map01.jpg”中绘制的中绘制的3个热点区域如图个热点区域如图6-12所示。所示。图6-12 图像“map01.jpg”中绘制的3个热点区域网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）29最后单击最后单击“热点热点”的【属性】面板左下角的的【属性】面板左下角的【指针热点工具】，结束热
22、点区域的绘制状态。【指针热点工具】，结束热点区域的绘制状态。（5）保存网页，预览其效果，单击各个热点）保存网页，预览其效果，单击各个热点链接，观察其效果。链接，观察其效果。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）301010、检查链接（1）在）在Dreamweaver CC主窗口的【窗口】菜主窗口的【窗口】菜单中，选择【结果】单中，选择【结果】【链接检查器】命令，打开【链接检查器】命令，打开【链接检查器】面板。【链接检查器】面板。（2）在【链接检查器】面板中，单击面板左）在【链接检查器】面板中，单击面板左上角的绿色箭头，弹出如图上角的绿色箭头，弹出如图6-15
23、所示的下拉菜单，所示的下拉菜单，在该菜单中选择命令项【检查当前文档中的链接】。在该菜单中选择命令项【检查当前文档中的链接】。图6-15检查链接的下拉菜单网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）31（3）自动开始检查站点链接，检查完毕后，如）自动开始检查站点链接，检查完毕后，如果存在无效链接，便会显示在该对话框中。果存在无效链接，便会显示在该对话框中。如果要修改无效链接，直接单击链接内容，并对如果要修改无效链接，直接单击链接内容，并对其进行修改即可其进行修改即可。（4）显示）显示“外部链接外部链接”在【链接检查器】面板中，单击选择在【链接检查器】面板中，单击选择“显示显示”列表列表框中的【外部链接】选项框中的【外部链接】选项，可以显示当前网页可以显示当前网页文档文档中的中的所有的外部链接所有的外部链接，如图如图6-19所示所示。图6-19在【链接检查器】面板中显示外部链接网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）32保存网页保存网页0601.html，按按F12预览其效果，如图预览其效果，如图6-1所示。所示。图6-1 网页0601.html的浏览效果网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）
