超级链接-4

实验：完成实验6、7、8
在网页中文字作为超链接的触发点是网页上创建 链接的主要方式。这不免有些单调。Dreamweaver允许 用户使用图像或图像中的某些区域来创建超级链接。假 若有一幅图像，像平时用的地图一样，我们可以把它分 为若干区域，每个区域对应不同的URL，这便是影像地图 影像地图是一幅被划分为若干区域或“热区”的图像，单击“热区”时一页 网页即可显现。 影像地图分为服务台器端影像地图和客户端影像图。由于服务器端影像 地图存在不少缺点现以被客户端影像地图取代。客户端影像地图是将超级链接 信息存放在HTML文档中，当用户单击图像中的一个热区时相关的URL会直接 发送到服务器。 使用“图像属性检查器”可以以图形方式方便地创建客户端影像地图，如图 所示，具体步骤如下：
• 给站点地图上的文件创建链接 (1) 选择“站点”的“站点地图”命令，打开站点地图。 (2) 在站点地图上选择HTML文件，例如“aboutus.htm” 。选定文件右上角出现指向文件图标。 (3)拖动指向文件图标，指向站点窗口中的一个文档，例 如“select.htm”，即可创建链接。如图所示。
(4)按住Shift拖动鼠标左键指向锚点，如图所示。 当浏览该页的时候，单击文字“评委组成”，页 面会自动调到锚点所在的位置。
任务2 文本超级链接应用
案例引入： 案例引入：
案例分析： 案例分析：
1、在dw8中打开页面 2、分析页面布局及导航条设计 3、注意图像与文字的应用
相关知识点： 相关知识点：
（2）在“属性检查器”中的“链接”中输入要链接到 的文件名称如图所示
（3）或单击浏览文件图标打开“选择文件”对话框，选择要 链接的文件“howtoselect.htm”，如图所示
（4）选择链接文档的载入方式。如图所示选择“_self”方式。
注意：默认情况链接的文档在当前窗口或框架中打开“_self”方式， “_blank”是将被链接文档载入到新的未命名浏览器窗口中， “_parent”是将被链接文档载入到父框架集或包含该链接的框架窗口 中，“_top”是将被链接文档载入到整个浏览器窗口并删除所有框架。 (5)设置完成，效果如图所示。
（4）设置完成后用浏览器浏览的效果如右图所示。
任务3 图像热点超级链接
案例引入： 案例引入：
案例分析： 案例分析：
• 1、在dw8中打开页面 • 2、分析页面布局及导航条设计 • 3、注意图像与文字的应用
相关知识点： 相关知识点：
1、图像超级链接如何实现 2、热点超级链接实现
•创建图像热点区域
第四项目单元 超级链接应用
项目4 超级链接
•教学重点：熟练掌握命名锚记应用，掌握文本超级链接、 图像超级链接、热点区域超级链接设置方法 •教学难点：理解超级链接在网站的功能，掌握文本、图 像超级链接的设置方法，学会用代码设置超级链接<a href=> •教学目标：
•专业能力：熟练掌握文本、图像超级链接的设置方法。 •社会能力：独立思考、紧跟课堂教学培养服从意识。 •方法能力：自学分析能力
（7）在“替代”框为所定义的热区输入替代的文本，供文本浏览器显示。当用 户在热区上暂停鼠标时显示替代的文本，如图所示。
（8）要在影像地图中选择多相热区，在保持整幅图像被选择的状态下，按住 Shift键单击相选择的其他热区或按Ctrl+A组合键选择。
2 应用实例
在页面中插入一副图像，修改图像的大小使之居 中对齐，并设定图像热区的链接。 用户可按以下方法操作： （1）打开Deamweaver MX，选择“插入”菜单里的 “图像”，弹出“选择图像源”对话框，选择要插入 的图像如图所示。
• 直接为页面元素创建链接 （1）在文档窗口选择文本。 （2） 按住Shift键，在选定的文本上拖动鼠标指针， 拖动时指向文件图标出现，如图所示：
(3)指定链接到目标，例如链接到“index.htm”，释放鼠标，链接被建立,这 就样链接就被建成。结果与上面的方法相同这里不在重复。注意：给图像建 立链接的方法与上相同。
（2）插入图像后，修饰图像的属性。如图所示。
（3）设定图像的热点链接，如左图所示。 （4）保存该页面为“image.htm”，使用IE浏览该页面 效果如右图所示。
小结： 小结：超级链接在网站起着至关重要的作 用，通过超级链接可以把多个网页文件组 成一个网站，通常文本、图像、 成一个网站，通常文本、图像、热区都可 以实现超级链接
•教学内容：
任务1 命名锚记应用
案例引入： 案例引入：
案例分析： 案例分析： • 1、在dw8中打开页面 • 2、页面内超链实现分析：命名锚记
相关知识点： 相关知识点：
• 链接到命名锚点
锚点是指在文档中设置位置标记，并给这些标记 命名，以便于引用。通过创建锚点，可以设置当前文 档或不同文档内容的链接，锚点一般用于跳转到特定 的主题或文档的顶部，使访问者能够快速浏览到选定 的位置，加快信息检索的速度。 创建锚点并设置链接的步骤如下： （1）在文档窗口中，将光标置于需要创、超级链接目标设置与相应代码
创建链接
•创建超链接 创建超链接 使用属性检查器创建 链接 这是最常用的一种 方法。使用“属性检查 器”可以把当前文档中 的文本或图像链接到另 一个文档。使用属性检 查器创建链接的步骤如 下： （1）选择需要创建链接 的文本或图像，例如选 择文字“评审办法”如 图所示
• 使用指向文件图标创建链接 使用指向文件图标创建链接的步骤如下： (1)在文档窗口选择文档或图像。样选择“评审办法” 。 (2)在“属性检查器”中，拖动链接域右边的指向文件 图标，按住鼠标左键并拖动连向“站点面板”中的一个文 档，如“index.htm”。如图所示。
(3)释放鼠标左键，链接被创建，在属性面板的链接地址框中出现已 链接的地址即可。
（1）选择要编辑图像 （2）在“属性检查器”右下 角的“地图”中输入影像地图 名。如果在同一文档使用多个 影像地图则必须每个地图起一 个唯一的名称。 （3）定义影像地图的热区， 执行下面操作之一 选择矩形工具，在选定图 像上拖动鼠标指针，创建矩形 热区。 选择圆形工具，在选定图 像上拖动鼠标指针，创建圆形 热区。 选择多边形工具，在选定 图像上每个角点单击一次，定 义一个不规则的热区。单击箭 头工具，结束多边形的定义。 设置地图的效果如图所示
• 影像地图中链接的创建 在图像的影像地图中创建链接的步骤如下： (1) 选择图像，如图所示。
(2) 单击“属性检查器”左下角的矩形热点工具按钮， 在图像上拖动创建影像，如图所示。
(3) 为影像部分创建链接。到“aboutus.htm”，并且设定 “目标”为“_blank”，“替代”为“关于本次大赛”， 如左图所示。
(2) 选择“查看”|“可视化助理”|“不可见元素”命令， 显示即将要创建的锚点。 使用“插入”|“命名锚记”命令或Ctrl+Alt+A快捷键 创建一个命名锚点 注意：这里也可以单击“插入栏”上命名锚记按钮， 创建一个命名锚点。这时会出现“命名锚点”对话框 ，如图所示，为锚点命名为“star”
(3)选择要建立链接的文本或图像。例如选定文字“评委组成”图所示：
（4）当编辑好的热区被选中后在四周出现方块，没 有被选中的则无方块如左图所示。 （5）在“热区检查器”中，单击文件夹图标，浏 览并选取当热区被选中时要打开的文件如右图所示， 单击“确定”按钮或在“链接”直接输入文件名。
（6）在“热区检查器”中的“目标”栏中“_self”方式 链接的文档在当前窗口或框架中打开，“_blank”是将被 链接文档载入到新的未命名浏览器窗口中，“_parent” 是将被链接文档载入到父框架集或包含该链接的框架窗 口中，“_top”是将被链接文档载入到整个浏览器窗口并 删除所有框架。如图所示。