Adobe Dreamweaver 设计‖ 制作 钱海军讲师
Adobe Dreamweaver 钱海军 讲师 设计 制作
制作网站链接 ·超链接的概念 ·制作外部网站链接 ·制作内部页面链接 ·制作电子邮件链接 ·制作空链接 制作脚本链接 ·制作同页面或不同页面之间的锚点链接 ·制作图像映射 ZhuHai Radio And Television University
ZhuHai Radio And Television University 制作网站链接 • 超链接的概念 • 制作外部网站链接 • 制作内部页面链接 • 制作电子邮件链接 • 制作空链接 • 制作脚本链接 • 制作同页面或不同页面之间的锚点链接 • 制作图像映射
一、超链接的概念 超级链接是指页面对象之间的链接关系，它网页的灵魂，能合理，协调地把网站中的各 个元素、页面通过超级链接构成了一个有机整体，使浏览者能快速地纺问到想要访问的页面。 超链接的分为：绝对超级链接、文档相对路径和站点根目录相对路径。 1.绝对超级链接 绝对超级链接就是形如“htp:ww.china/zh_cn'的超级链接地址，它给出了超级链接目标端 点完整的URL地址，包括使用的协议“htp:lP。一般用于创建站外具有固定地址的超级链接。 2.文档相对路径 使用文档相对路径不需要给出完整的URL地址，可省去URL地址的协议，只需保留不同的部分。 如pic/logo.gif,这是本地站点超级链接中最常用的链接形式。由于相对超级链接的文件之间相 互关系并没有发生变化，因此使用文档相对路径创建的超级链接在上传时可以不用更新各个超 级链接。 3.站点根目录相对路径 站点根目录相对路径是形如“help/help.html”的超级链接地址，它基于站点根目录，在同一 个站点中网页的超级链接也可采用这种方法。 ZhuHai Radio And Television University
ZhuHai Radio And Television University 一、超链接的概念 超级链接是指页面对象之间的链接关系，它网页的灵魂，能合理、协调地把网站中的各 个元素、页面通过超级链接构成了一个有机整体，使浏览者能快速地访问到想要访问的页面。 超链接的分为： 绝对超级链接、文档相对路径和站点根目录相对路径。 1. 绝对超级链接 绝对超级链接就是形如“http://www.china/zh_cn”的超级链接地址，它给出了超级链接目标端 点完整的URL地址，包括使用的协议“http://”。一般用于创建站外具有固定地址的超级链接。 2. 文档相对路径 使用文档相对路径不需要给出完整的URL地址，可省去URL地址的协议，只需保留不同的部分。 如pic/logo.gif，这是本地站点超级链接中最常用的链接形式。由于相对超级链接的文件之间相 互关系并没有发生变化，因此使用文档相对路径创建的超级链接在上传时可以不用更新各个超 级链接。 3. 站点根目录相对路径 站点根目录相对路径是形如“/help/help.html”的超级链接地址，它基于站点根目录，在同一 个站点中网页的超级链接也可采用这种方法
二、制作外部网站链接 “外部网站链接”多用于网站之间友情互换的内容。在“链接”文本框中直接输入该 网页在INTERNET上的“绝对路径”，并且包括所使用的协议（如对于WEB页，通常是 “htp:l超文本传输协议)。 1.选择网页上要添加超连接的文本或者图像 2.在“属性”面板中的“链接”项输入绝对超链接： 3.输入后，在“属性”面板的“目标”选项变为可选项目，提供了四个选项，如下图： CS5 B 1生专生目unk itp:/www.bodu.co Font Defaut Font Sze None Target Page Properties.Lst tem 1._blank:在一个新的未命名的浏览器窗口中打开链接的网页。 2.parent::如果是嵌套的框架，链接会在副框架或窗口中打开，如果不是嵌套的框架，就 等同于top,在整个浏览器窗口中显示。 3.sf:此项是浏览器的默认设置，会在当前网页所在的窗口或框架中打开链接的网页。 4.top选择该项，将会在完整的浏览器窗口中打开网页。 ZhuHai Radio And Television University
ZhuHai Radio And Television University 二、制作外部网站链接 “外部网站链接”多用于网站之间友情互换的内容。在“链接”文本框中直接输入该 网页在INTERNET上的“绝对路径”，并且包括所使用的协议（如对于WEB页，通常是 “http://”超文本传输协议）。 1. 选择网页上要添加超连接的文本或者图像； 2. 在“属性”面板中的“链接”项输入绝对超链接； 3. 输入后，在“属性”面板的“目标”选项变为可选项目，提供了四个选项，如下图： 1. _blank:在一个新的未命名的浏览器窗口中打开链接的网页。 2. _parent:如果是嵌套的框架，链接会在副框架或窗口中打开，如果不是嵌套的框架，就 等同于_top,在整个浏览器窗口中显示。 3. _self:此项是浏览器的默认设置，会在当前网页所在的窗口或框架中打开链接的网页。 4. _top:选择该项，将会在完整的浏览器窗口中打开网页
三、制作内部页面链接 “内部页面链接”指的是链接站点内部的文件，在“链接”文本框中，需要输入文档的 “相对路径”，一般使用“选择文件”的方法来创建。在“属性”面板的链接文本框中输入已 经制作好的目标网页或白击“链接”后的 按钮，打开“选择文件”对话框选择一个网页 文件，则连接得之合而 x Stes and Servers 查找范围(D:上es1te ,0t沙画， 名称 apple ash 20123/14期三1117 ima 2012/3/14星期三1116 件 2012/3/14星期三1117 文件名①： 文件类型()：A11F11es(体，制 消 URL: elavet ZhuHai Radio And Television University
ZhuHai Radio And Television University 三、制作内部页面链接 “内部页面链接”指的是链接站点内部的文件，在“链接”文本框中，需要输入文档的 “相对路径”，一般使用“选择文件”的方法来创建。在“属性”面板的链接文本框中输入已 经制作好的目标网页或者单击“链接”后的 按钮，打开“选择文件”对话框选择一个网页 文件，则连接到这个页面
四、制作电子邮件链接 无论是商业网站还是个人网站，人们习惯于将自己的联系方式留在页面的下方，这样便于 网友信息的反馈。 1.在“属性”面板的“白”文本框中输入mato和邮箱地址。 2.按F12快捷键预览页面，当单击邮件链接后，会打开系统默认的邮件软件发送电子邮件。 3.用户设置时还可以替浏览者加入邮件的主题。方法是在输入的电子邮件地址后面加 上"？subject=-要输入的主题”的语句。当用户预览页面，单击链接后弹出的发信窗口中就会出现 邮件主题。 4.如果希望浏览者在发信的时候顺便将邮件抄送到另一个邮箱，可以继续书写链接地址，完整 的语句可以为：mailto:ddc@ddc.com.cn?subject=-网站的意见与建议&cc=ddc2@ddc.com.cn。 填写完成后，在预览页面后单击链接弹出的发信窗口就会出现抄送地址。 Link mailto:wangye@163.com 、白 ZhuHai Radio And Television University
ZhuHai Radio And Television University 四、制作电子邮件链接 无论是商业网站还是个人网站，人们习惯于将自己的联系方式留在页面的下方，这样便于 网友信息的反馈。 1. 在“属性”面板的“链接”文本框中输入mailto:和邮箱地址。 2. 按F12快捷键预览页面，当单击邮件链接后，会打开系统默认的邮件软件发送电子邮件。 3. 用户设置时还可以替浏览者加入邮件的主题。方法是在输入的电子邮件地址后面加 上”?subject=要输入的主题”的语句。当用户预览页面，单击链接后弹出的发信窗口中就会出现 邮件主题。 4. 如果希望浏览者在发信的时候顺便将邮件抄送到另一个邮箱，可以继续书写链接地址，完整 的语句可以为：mailto:ddc@ddc.com.cn?subject=网站的意见与建议&cc=ddc2@ddc.com.cn。 填写完成后，在预览页面后单击链接弹出的发信窗口就会出现抄送地址
五、制作空链接 有些客户端行为的动作，需要由超链接来调用，这时候就需要用到空链接了。空链接用来 激活页面中的对象或文本。当文本或对象被激活后，可以为之添加行为，比如当鼠标上滚后变 换图片，或者使某一层口。访问者单击网页中的空链接，将不会打开任何文件。 1.选择某个网页元素，在“属性”面板的“链接”文本框中直接输入#” 2.按F12键预览页面，单击链接后，将重新刷新当前的网页页面。 Unk料 平80 3.将链接代码修改为： 当单击“链接”文本时，就会弹出“是否设置为主页”对话框。 添加或更改主页 您想使用以下项作为主页吗？ http://www.baidu.con/ ©将此网页用作唯一主页仙 将此网西添加到主页选项卡④ 是①■香) ZhuHai Radio And Television University
ZhuHai Radio And Television University 五、制作空链接 有些客户端行为的动作，需要由超链接来调用，这时候就需要用到空链接了。空链接用来 激活页面中的对象或文本。当文本或对象被激活后，可以为之添加行为，比如当鼠标上滚后变 换图片，或者使某一层显示。访问者单击网页中的空链接，将不会打开任何文件。 1. 选择某个网页元素，在“属性”面板的“链接”文本框中直接输入”#”. 2. 按F12键预览页面，单击链接后，将重新刷新当前的网页页面。 3. 将链接代码修改为： 链 接 当单击“链接”文本时，就会弹出“是否设置为主页”对话框
六、制作脚本链接 脚本链接一般用于给予浏览者有关于某个方面的额外信息，而不用离开当前的页面。脚本 链接具有执行javascriptf代码的功能。 例如在“属性”面板的“链接”里输入javascript代码“javascript:window.close0”,可以实 现关闭当前窗口的功能。 ZhuHai Radio And Television University
ZhuHai Radio And Television University 六、制作脚本链接 脚本链接一般用于给予浏览者有关于某个方面的额外信息，而不用离开当前的页面。脚本 链接具有执行javascript代码的功能。 例如在“属性”面板的“链接”里输入javascript代码“javascript:window.close()”,可以实 现关闭当前窗口的功能
七、制作锚点链接 所谓锚点链接，是指用一个页面中的不同位置链接。比如，一个很长的页面，在页面的最 下方有一个“返回页首”的文字，单击链接后，可以跳转到这个页面的最顶部，这就是一种最 典型的锚点链接。另外，可以在页面的某个分项内容的标题上设置锚点，然后在页面上设置锚 点链接，那么用户就可以通过链接快速地直接跳转到自己感兴趣的内容。 1.制作同页面锚点链接 2.制作不同页面锚点链接 ZhuHai Radio And Television University
ZhuHai Radio And Television University 七、制作锚点链接 所谓锚点链接，是指用一个页面中的不同位置链接。比如，一个很长的页面，在页面的最 下方有一个“返回页首”的文字，单击链接后，可以跳转到这个页面的最顶部，这就是一种最 典型的锚点链接。另外，可以在页面的某个分项内容的标题上设置锚点，然后在页面上设置锚 点链接，那么用户就可以通过链接快速地直接跳转到自己感兴趣的内容。 1. 制作同页面锚点链接 2. 制作不同页面锚点链接
7.1制作同页面锚点链接 创建到同页面锚点（命名错记）的链接的过程分为两步：首先，创建命名错记，然后，创建到 命名锚记的链接。 1.将光标放在需要插入“命名错记”的位置，然后选择“插入”快捷工具栏中的“常用”分类 组，单击左侧“命名锚记”按钮。 2.在弹出的“命名锚记”文本框中输入锚记的名称 3.单击“锚记名称”文本框中的“确定”按钮，将“锚记标记”插入到光标位置。 4.将链接“命名锚记”。先选中要链接的文本，在“属性”面板的“链接”文本框输入“#错记 名称”。 5.按F12预览页面，测答薯葡铲按 错记名称：to 确定 取消 帮助0 ?属性 命名错记 名称o球op ZhuHai Radio And Television University
ZhuHai Radio And Television University 7.1 制作同页面锚点链接 创建到同页面锚点（命名锚记）的链接的过程分为两步：首先，创建命名锚记，然后，创建到 命名锚记的链接。 1. 将光标放在需要插入“命名锚记”的位置，然后选择“插入”快捷工具栏中的“常用”分类 组，单击左侧“命名锚记”按钮。 2. 在弹出的“命名锚记”文本框中输入锚记的名称。 3. 单击“锚记名称”文本框中的“确定”按钮，将“锚记标记”插入到光标位置。 4. 将链接“命名锚记”。先选中要链接的文本，在“属性”面板的“链接”文本框输入“#锚记 名称”。 5. 按F12预览页面，测试锚点链接