第8讲 为网页添加超链接

上一讲回顾,网页中表格的使用,2013计本,本讲主要内容,为网页添加超链接,认识超链接创建超链接移除与变更超链接图像热区超链接创建图像导航条创建跳转菜单脚本链接,超链接-实现页面间的导航,链接文本或图像,链接地址（目标）,一、认识超链接,所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。,超链接,返回,二、创建超链接,*创建超链接详解*,1、选中要添加超链接的对象,2、添加超链接,4、选择目标对象的打开位置,3、选择目标对象,文字链接：在文字上添加超链接，这是常见的功能并不会占用太多网页空间且维护容易。图片链接：在图片上添加超链接，比文字链接更容易传达信息，让人一目了然。按钮链接：在按钮上添加超链接，大多网页皆使用按钮链接来方便浏览者做内容选择。,：文字、图片、按钮等,方法1：在属性面板的“链接”文本框中输入目标对象地址方法2：使用菜单“插入/超级链接”,：属性面板、菜单,：内部、外部、锚点、email、文件等,内部链接：到同个网站中的其他网页（文档）外部链接：到不同站点或本站点以外的网页（文档）锚点链接：到网页某一特定位置的超链接电子邮件链接：到E-mail的超链接下载链接：将文件以超链接的方式提供下载服务空连接：用来激活页面中的对象或文本,路径选择注意事项,：新窗口、本窗口等,_self：在当前网页所在的窗口或框架中打开（默认）_blank:每个链接会创建一个新的窗口_new：在同一个刚创建的窗口中打开_parent：如果是嵌套的框架，则在父框架中打开_top：在完整的浏览器窗口中打开，忽略任何框架,下一节,*超链接的目标对象的路径表达方式*,对链接路径的正确理解是确保链接有效的先决条件。相对于站点根目录路径:所有链接的路径都是从站点的根目录开始的。绝对路径：在链接中使用完整的URL地址，一般用于链接外部网站或外部文件资源时，例如：,返回,根据连接目标对象的不同可以将超链接划分为：内部链接：到同个网站中的其他网页（文档）外部链接：到不同站点或本站点以外的网页（文档）锚点链接：到网页某一特定位置的超链接电子邮件链接：到E-mail的超链接下载链接：将文件以超链接的方式提供下载服务空连接：用来激活页面中的对象或文本,*创建不同类型的链接*,1、内部链接,选中要添加超链接的对象：页面中的文字或图像等在属性面板中单击“链接”文本框右侧的文件夹图标通过浏览本站点内的文件，选择一个文件设定打开位置,提示：可以为其添加标题内容，即：title属性,HTML语法解释,灿坤蒸气电熨斗,链接热点文本或图像,链接在新窗口中打开,修改文字超链接的样式,在Dreamweaver中，默认的链接文字颜色为蓝色，而浏览过的颜色为紫红色若想改变超链接文字的颜色，请于属性面板按页面属性钮开启对话方块更改相关设定：,链接颜色：添加了超链接的文字颜色已访问链接：文字超链接被访问过的颜色变换图像链接：当鼠标位于文字超链接上时的颜色活动链接：当鼠标在超链接上点击时的颜色,点小图开大图,因版面的考虑，图片仅能缩小放在一旁。如何让网站影像变得更大、更清楚？,小窍门,外部链接,选中页面中的文字或图像使用插入菜单插入/超链接，打开超级链接对话框输入外部的链接地址，如设定打开位置,锚点链接,若将文字、图片全部设计在同一个网页可能会使该网页变得太过冗长，进而造成阅读上的不易。锚点链接的目标端点是网页中的命名锚点，利用这种链接，可以跳转到当前网页中的某一指定位置上，也可以跳转到其他网页中的某一指定位置上。Dreamweaver中的命名锚点，类似于Word中的书签，只需要在几个关键地方插入命名锚点，当它与连结搭配时就能很快地卷动到命名锚点的位置。,创建命名锚点预备工作：确认菜单栏查看可视化助理不可见元素为被核选状态，如此就可看到插入锚点时所有元素符号。,创建命名锚点创建命名锚记，就是在网页中设置位置标记，并给该位置一个名称，以便引用。,1,2,3,*锚点命名规则*只能使用字母和数字，锚点命名不支持中文。锚点名称的第1个字符最好是英文字母。锚点名称要区别英文字母的大小写。锚点名称间不能含有空格，也不能含有特殊字符。,创建到命名锚点的超链接选中页面中的文字或图像，在属性面板的链接栏中直接输入“#锚点名”注意：如果链接的目标锚点标记在当前页面即输入#锚点名如果链接的目标锚点标记在其他网页，即要输入目标网页的地址和名称，然后再输入“#锚点名”,电子邮件链接,Email链接可以启动电子邮件程序（例如：Offiece办公软件中的Outlook）书写邮件，并发送到指定的地址。,电子邮件链接,步骤1：选中文本和图像步骤2：插入栏常用电子邮件链接输入邮件地址或在属性面板的链接栏中直接输入：mailto:邮件地址,文件下载超链接,当被链接的文件是exe文件或zip、rar类型的文件时，浏览器无法直接打开，便会提示文件会被下载，这就是网上下载的方法。,空链接,空链接用来激活页面中的对象或文本。当文本或对象被激活后，可以为之添加行为。方法：选中要制作空链接的对象，在链接文本框中直接输入在一般站点首页的导航栏中的首页链接，就可以是一个空链接,返回,三、移除与变更超链接,倘若当初设定的链接网址、锚点有误或者变更时该怎么办呢？变更链接：在已设定链接的对象上单击鼠标右键，选按更改链接开启选择文件对话方块重新选择文件名称、文件类型或者输入新的URL链接地址移除链接：在已设定链接的对象上单击鼠标右键，选按删除标签，就可移除其链接,返回,四、图像热区链接,图像热区指在一幅图片上创建多个区域（热点），并可可以点击触发。当用户单击某个热点时，会发生某种链接或行为。步骤：1.选中图像2.在图像属性面板中，使用热区工具（矩形、椭圆、多边形），在图像上划分热区。3.为绘制的每一个热区设置不同的链接地址和替代文字。,返回,HTML语法解释,area：为图片添加热区Shape：定义区域的形状（default（全部区域）、rect（矩形）、circ（圆形）、poly（多边形）,五、创建图像导航条,使用鼠标经过变换图像的特效，创建图像导航条,提示：可以为flash按钮添加超链接,返回,六、创建跳转菜单,跳转菜单是网页中的弹出式菜单，可以创建任何文件类型的链接。步骤：1、插入栏表单跳转菜单2、在“插入跳转菜单”对话框中，单击号添加菜单项3、在“选择时。转到URL”文本框中，输入该文件的路径。,返回,七、脚本链接,通过链接触发脚本命令1.表示关闭窗口：javascript:window.close()2.表示弹出一个提示对话框：javascript:alert(欢迎光临本站点),返回,如何给滚动字幕、滚动图片添加超链接？,进阶与提高,思路：先为文字、图片设置好超链接再添加滚动字幕特效,字幕内容/图片代码,本讲练习题