网页中的超级链接.ppt

合集下载

Ppt中的超链接

Ppt中的超链接

Ppt中的超链接Ppt中的超链接PowerPoint提供了功能强⼤的超链接功能,使⽤它可以在幻灯⽚与幻灯⽚之间、幻灯⽚与其他外界⽂件或程序之间以及幻灯⽚与⽹络之间⾃由地转换,但在实际应⽤中很多⽼师对这⼀功能并不⼗分熟悉,下⾯我就将如何在PowerPoint中设置超链接的⽅法介绍给⼤家,希望对您有所帮助。

创建超链接在PowerPoint中我们可以使⽤以下三种⽅法来创建超链接。

1、利⽤“动作设置”创建超链接(1)⿏标单击⽤于创建超链接的对象,使之⾼亮度显⽰,并将⿏标指针停留在所选对象上(对象指⽂字、图⽚等内容)。

(2)单击⿏标右键,在弹出的快捷菜单中选择“动作设置”选项,系统将弹出“动作设置”对话框,在对话框中有两个选项卡“单击⿏标”与“⿏标移过”,通常选择默认的“⿏标单击”,单击[超级链接到]选项,打开超链接选项下拉菜单,根据实际情况选择其⼀,然后单击[确定]按钮即可。

若要将超链接的范围扩⼤到其他演⽰⽂稿或PowerPoint以外的⽂件中去,则只需要在选项中选择“其他PowerPoint演⽰⽂稿...”或“其他⽂件...”选项即可。

2、利⽤超链接按钮创建超链接利⽤常⽤⼯具栏中的[超链接]按钮(“地球”图标)来设置超链接是⾮常常⽤的⼀种⽅法,虽然它只能创建⿏标单击的激活⽅式,但在超链接的创建过程中不仅可以⽅便地选择所要跳转的⽬的地⽂件,同时还可以清楚地了解到所创建的超链接路径。

(1)同第⼀种⽅法,⿏标单击⽤于创建超链接的对象使之⾼亮度显⽰,并将⿏标指针停留在所选对象上。

(2)单击常⽤⼯具栏中的[超链接]按钮,则系统将会弹出“插⼊超链接”对话框。

如果链接的是此⽂稿中的其他幻灯⽚,就在左侧的“链接到:”选项中单击“本⽂档中的位置”图标,在“请选择⽂档中的位置”中单击所要链接到的那张幻灯⽚(此时会在右侧的“幻灯⽚预览”框中看到所要链接到的幻灯⽚),然后点击[确定]按钮确认即可完成超链接的建⽴。

如果链接的⽬的地⽂件在计算机其他⽂件中,或是在Internet上的某个⽹页上或是⼀个电⼦邮件的地址,便在“链接到:”选项中,点击相应的图标进⾏相关的设置即可。

第6章 网页中超级链接的应用

第6章 网页中超级链接的应用
中输入“#锚记名称”
6.4 创建各种类型的链接
4. 创建下载链接
如.exe,.zip,.rar等。

网 页 制 作 基 础 教 程
如想提供文件下载 ,只需将浏览器无法识别的文件链接到网页中 ,
选择要创建链接的文本或图像,在“属性窗口”的“链接”文本框
中拖动文件指向按钮,指向一个浏览器无法识别的文件,如rar文件。
1.
管理超链接
在首选参数对话框中设置自动更新 选择“编辑”|“首选参数”命令,打开“首选 参数”对话框,在“移动文件时更新链接”选 项的下拉列表中进行选择。 总是——每当移动或重命名选定文档时, Dreamweaver将自动更新该文档的所有链接。 提示——将显示一个提示对话框,列出更改 影响到的所有文件,以进行进一步选择,系统 默认的选项是“提示”。



5 使用图像与多媒体丰富网页内容
网 页 制 作 基 础 教 程
插入FLV视频
“插入”菜单→“媒体” →FLV “插入”面板→“常用”子面板→“媒体” →FLV
直接将flv视频文件拖动到Dreamweaver的设计窗口
为网页添加背景音乐
在“代码”窗口的<body>后面插入<bgsound src=“…mp3文件 autostart=true loop=-1”/>
每当在本地站点内移动或重命名文件时,Dreamweaver可自动更新 指向该文件的链接。

“编辑”菜单—>“首选参数”,在“常规”中单击展开“移动文件 时更新链接”下拉按钮,选择不同的选项,则进行不同的设置。
2.
在整个站点范围内更改链接
手动更改所有链接,包括电子邮件链接、FTP链接、空链接和脚本

ch06-网页中超级链接的应用

ch06-网页中超级链接的应用

6.4.1 创建文本超链接
• 启动Dreamweaver CS5,在菜单栏中,选择[文 件]→[打开]菜单项,打开素材文件.
• 展开[属性]面板,在面板中,选择[链接]文本框右侧 的[浏览文件]按钮.
• 弹出[选择文件]对话框,选择准备插入的文件,单击 [确定]按钮.
• 保存文档,按下键盘上的[F12]键,即可在浏览器中 预览到网页的效果.
6.2.3 根路径
• 站点根目录相对路径提供从站点的根文件夹到 文档的路径,如果在处理使用多个服务器的大 型Web站点,或者在使用承载有多个不同站点 的服务器,则可能需要使用这些类型的路径,如 果不熟悉此类型的路径,最好坚持使用文档相 对路径.
6.3 创建超级链接的方法
• 使用[属性]面板创建链接 • 使用指向文件图标创建链接 • 使用菜单创建链接
• 首先需要将鼠标光标定位于准备要插入锚记的 位置,在菜单栏中,选择[插入]→[命名锚记]菜单 项,弹出[命名锚记]对话框,在[锚记名称]文本框 中输入锚记的名称,单击[确定]按钮,即可完成 创建锚记的操作.
6.4.5 创建空链接
• 启动Dreamweaver CS5,在菜单栏中,选择[文 件]→[打开]菜单项,打开素材文件.
在站点范围内更改链接
• 启动Dreamweaver CS5,在[文件]面板中,在[本地文件] 区域中选择一个文件.
• 在菜单栏中,选择[站点]→[改变站点范围的链接]菜单 项.
• 弹出[更改整个站点链接]对话框,在[变成新链接]文本 框中,输入准备准备链接的文件,单击[确定]按钮,即可 完成在站点范围内更改链接的操作.
Dreamweaver CS5网页设计与制 作基础教程
第6章 网页中超级链接的应用

网页中使用超链接

网页中使用超链接
所有链接(包括电子邮件链接、FTP 链接、空链 接和脚本链接),使它们指向其它位置。


6.1.3 图像超链接
1.创建图像超链接
给图像添加链接,使其指向其他的网页或者文
档,就是图像超链接。 (1)选中需要建立超链接的图像,此时属性面板显 示图像的属性 。 (2)在属性面板中为图像添加文档相对路径的链接。

在Dreamweaver CS5中创建文本超链接的步骤为: (1)在网页上选择需要添加超链接的文本,打开文本 的属性面板。 (2)在属性面板上指定文字的链接目标。
(3)按“F12”预览网页。
2.删除图像超链接
删除图片超链接与删除文本超链接的方法相同 。

6.1.4 创建图像热点链接
热点即图像上不可见的区域,该区域分配了一 个超链接。为图像添加热点就是在图像上划分区域,

6.1.6 创建电子邮件超链接
如果希望浏览者在浏览网页时,只要浏览者单击
E-mail链接时,就会在浏览端自动打开浏览器默认的 E-mail处理程序,收件人的地址将会被E-mail超链接 中的指定地址自动装入,无需浏览者输入,就需要创 建电子邮件链接 。
(2)删除文本超链接 在Dreamweaver CS5中要删除一个文本超链 接很容易,先用鼠标选定文本对象,将光标定位 于属性面板的“链接”文本框中,用“BackSpace” 键或“Delete”键,将其显示的超链接对象文件名 删除,再回车,或选择“修改”→“移除链接”命
令,都可以删除超链接而保留原文本对象。
本,然后在属性面板中的“链接”栏中输入一个数值
符“#”即可。建立空链接的目的就是为了应用行为,
其他情况下不必建立空链接。

Html语言——超级链接

Html语言——超级链接

编码 %3B %2F %3F %3A %40 %3D %26 %3C
7
School of Applied Technology Soochow University
URL的保留字符和不安全字符 的保留字符和不安全字符
字符 > “ # : % { } |
2011-3-21
描述 大于号 双引号 井号 冒号 百分号 左大括号 又大括号 竖线
注意:一般除了字母、数字和“ 注意:一般除了字母、数字和“$,-,_,.,+,!,*,’,()外,其他 外 所有字符都应该使用编码” 所有字符都应该使用编码”
2011-3-21 School of Applied Technology Soochow University 9
2 建立指向其他页面的链接 其格式为: 其格式为: <a href=”目标文件的路径/目 目标文件的路径/ 目标文件的路径 标 文 件 名 .html”> 热点文本 </a>
热点文本
5) 创建指向本页中的链接 要在当前页面内实现超链接,需要定义两个标记: 要在当前页面内实现超链接,需要定义两个标记:一个为超链接标 另一个为书签标记。超链接标记的格式为: 记,另一个为书签标记。超链接标记的格式为: <a href=”#记号名”> 热点文本</a> 记号名” 热点文本 / 记号名 即单击热点文本,将跳转到“记号名”开始的文本。 即单击热点文本,将跳转到“记号名”开始的文本。 书签就是用<a>标记对该文本做一个记号。若有多个链接的书签名, <a>标记对该文本做一个记号 书签就是用 <a> 标记对该文本做一个记号 。 若有多个链接的书签名 , 书签名在<a> name属性中定义 <a>的 属性中定义。 书签名在<a>的name属性中定义。 格式为: 格式为: <a name=”记号名”> 目标文本附近的字符串 </a> 记号名” 记号名 /

AdobeDreamweaver教程第4章超级链接精品PPT课件

AdobeDreamweaver教程第4章超级链接精品PPT课件
同文件夹内的文件链接:直接写文件名 下一级文件夹的文件链接:文件名/文件 如:images/loge.gif 上一级文件夹的文件链接:../文件名/文件 如: ../images/loge.gif
(3)站点根目录相对路径:所有路径都开始于当前站点的根目录。
站点的根目录相对路径都以“/”开始,如/images/loge.gif
javascript:window.close()
设为首页
<a onclick="this.style.behavior='url(#default#hom epage)';this.setHomePage('');" href="#">设为 首页</a>
创建远程登陆链接
在链接地址输入:telnet://站点地址,如 telnet://
javascript:history.back(-1)
javascript:history.go(-1)
2.3创建打印链接:
javascript:window.print()
2.4创建收藏链接:
javascript:window.
external.AddFavorite(‘网址’,’名称’)
2.5关闭窗口:
下载、邮件链接和锚点
1 下载文件 2 下载软件 3 邮件链接 mailto:?subject=咨询问题&cc= &bcc=
下载、邮件链接和锚点
4. 创建命名锚记链接
1.创建命名锚记
2.创建到该命名锚记的链接
空链接和脚本链接
1 空链接 #(或javascript:) 2 脚本链接
2.1创建简单的脚本链接:javascript:alert(‘弹出的内容’) 2.2创建前进和后退链接:javascript:history.go(1)

第4章 超级链接

第4章  超级链接

4.4 实训
4.4.2 实训二:制作爱家美食网站“美味靓汤”系列页面 实训二:制作爱家美食网站“美味靓汤” 【实训综述】本实训通过“美味靓汤”系列页面的制作,进 实训综述】本实训通过“美味靓汤”系列页面的制作, 一步加强读者综合利用各种形式的超链接的能力, 一步加强读者综合利用各种形式的超链接的能力,为以后的 网站设计打好基础。 网站设计打好基础。 【实训展示】本实训中的素材包括6幅图片和2个下载压缩包 实训展示】本实训中的素材包括6幅图片和2 文件,制作爱家美食网站“美味靓汤”栏目的系列页面, 文件,制作爱家美食网站“美味靓汤”栏目的系列页面,效 果如图4 26所示 所示。 果如图4-26所示。
4.3 创建其他类型超链接
4.3.4 下载链接 如果链接到的文件不是HTML文件 则该文件作为下载文件, 文件, 如果链接到的文件不是HTML文件,则该文件作为下载文件, 下载链接的格式为: 下载链接的格式为: <a herf= “下载文件名” >热点文本</a> “下载文件名 >热点文本 下载文件名” 热点文本</a> 可以使用属性面板的链接文本框创建下载链接。 可以使用属性面板的链接文本框创建下载链接。创建下载链接 的方法如下: 的方法如下: 1)在“文档”窗口的设计视图中选择要从其创建链接的文字或 文档” 图像。 图像。 2)打开“属性”面板,在“链接”文本框中输入下载文件的名 打开“属性”面板, 链接” 称。
4.3 创建其他类型超链接
4.3.2 E-mail超链接 E-mail超链接 在很多网页中会看到网站管理员或公司的E-mail邮件超 链接,单击指向E-mail邮件的链接,将打开缺省的电子邮件 程序,如FoxMail、Outlook Express等,并自动填写邮件地址。 指向电子邮件链接的格式为: <a href="mailto:E-mail地址"> 热点文本 </a> 例如,E-mail地址是zhby1972@,建立如下链接: 信箱:<a href="mailto: zhby1972@">和我联系</a> 可以使用属性面板的链接文本框创建E-mail超链接。创建Email超链接的方法是: ① 在文档窗口的设计视图中选择要从其创建链接的文字或图 像。 ② 打开属性面板,在“链接”文本框中输入mailto: E-mail地址。

PowerPoint(ppt)超链接功能设置技巧

PowerPoint(ppt)超链接功能设置技巧

PowerPoint(ppt)超链接功能设置技巧PowerPoint提供了功能强大的超链接功能,使用它可以在幻灯片与幻灯片之间、幻灯片与其他外界文件或程序之间以及幻灯片与网络之间自由地转换,但在实际应用中很多老师对这一功能并不十分熟悉,下面我就将如何在PowerPoint中设置超链接的方法介绍给大家,希望对您有所帮助。

创建超链接在PowerPoint中我们可以使用以下三种方法来创建超链接。

1、利用“动作设置”创建超链接(1)鼠标单击用于创建超链接的对象,使之高亮度显示,并将鼠标指针停留在所选对象上(对象指文字、图片等内容)。

(2)单击鼠标右键,在弹出的快捷菜单中选择“动作设置”选项,系统将弹出“动作设置”对话框,在对话框中有两个选项卡“单击鼠标”与“鼠标移过”,通常选择默认的“鼠标单击”,单击[超级链接到]选项,打开超链接选项下拉菜单,根据实际情况选择其一,然后单击[确定]按钮即可。

若要将超链接的范围扩大到其他演示文稿或PowerPoint以外的文件中去,则只需要在选项中选择“其他PowerPoint 演示文稿...”或“其他文件...”选项即可。

2、利用超链接按钮创建超链接利用常用工具栏中的[超链接]按钮(“地球”图标)来设置超链接是非常常用的一种方法,虽然它只能创建鼠标单击的激活方式,但在超链接的创建过程中不仅可以方便地选择所要跳转的目的地文件,同时还可以清楚地了解到所创建的超链接路径。

(1)同第一种方法,鼠标单击用于创建超链接的对象使之高亮度显示,并将鼠标指针停留在所选对象上。

(2)单击常用工具栏中的[超链接]按钮,则系统将会弹出“插入超链接”对话框。

如果链接的是此文稿中的其他幻灯片,就在左侧的“链接到:”选项中单击“本文档中的位置”图标,在“请选择文档中的位置”中单击所要链接到的那张幻灯片(此时会在右侧的“幻灯片预览”框中看到所要链接到的幻灯片),然后点击[确定]按钮确认即可完成超链接的建立。

第七章 超级链接

第七章 超级链接

图像热点链接
• 创建图像热点链接的具体操作步骤如下。 创建图像热点链接的具体操作步骤如下。 • (1)选取一张图片,在“属性”面板的“地图” 选取一张图片, 属性”面板的“地图” 选项下方选择热区创建工具。 选项下方选择热区创建工具。 • (2)利用“矩形热点工具”、“圆形热点工具” 利用“矩形热点工具” 圆形热点工具” 多边形热点工具” 指针热点工具” 、“多边形热点工具”、“指针热点工具”在图 片上建立或选择相应形状的热区。 片上建立或选择相应形状的热区。 • (3)在“属性”面板中进行设置。 属性”面板中进行设置。 • (4)按<F12>快捷键预览网页的效果。 <F12>快捷键预览网页的效果 快捷键预览网页的效果。
鼠标经过图像链接
“鼠标经过图像”是一种常用的互动技术, 鼠标经过图像”是一种常用的互动技术, 当鼠标指针经过图像时,图像会随之发生变化。 当鼠标指针经过图像时,图像会随之发生变化。 一般, 鼠标经过图像” 一般,“鼠标经过图像”效果由两张大小相等的 图像组成,一张称为主图像,另一张称为次图像。 图像组成,一张称为主图像,另一张称为次图像。 主图像是首次载入网页时显示的图像, 主图像是首次载入网页时显示的图像,次图像是 当鼠标指针经过时更换的另一张图像。“鼠标经 当鼠标指针经过时更换的另一张图像。 过图像”经常应用于网页中的按钮上。 过图像”经常应用于网页中的按钮上。
使用指向文件图标创建链接
• 在“属性”面板中拖动“链接”文本框右边的“ 属性”面板中拖动“链接”文本框右边的“ 指向文件” 以创建链接, 指向文件”按钮 以创建链接,拖动鼠标时会出现 一条带箭头的细线,指示要拖动的位置, 一条带箭头的细线,指示要拖动的位置,指向链 接的文件后,释放鼠标,即会链接到该文件。 接的文件后,释放鼠标,即会链接到该文件。

超级链接

超级链接
对路径------是指Internet上资源的完 整地址。 格式如下: 协议://主机名[/路径/]资源文件名 例: . cn/index.html /(省略了最后文 件名的URL通常也认为是一个绝对URL)
二、下载链接的创建

如何制作下载文件 要点:


被链接的文件后缀名必须是 ①.rar ②.exe③.mp3④.zip(压缩文件) ⑤.asp⑥.jsp⑦.php(动态脚本语言程序) 被链接的文件后缀名不能是 ①.doc②.xls③.htm ④.swf等
如何让网友下载Word 或Excel格式的文件?

建立超链接的标签为<A>和</A>
项目四

超级链接的应用
超链接允许我们从自己的页面出发直接 指向因特网上存在的任何一个页面,或 者说,在一台计算机上可以打开因特网 上成千上万的网页文件。
项目四
一、
超级链接的应用
绝对URL、相对URL及常见的超级链接类型
超级链接是网页中最重要、最根本的元素之一。它
五、热点链接的创建
多边形热点工具
椭圆热点工具 矩形热点工具 指针热点工具
六、命名锚记链接的创建
锚点常常被用来实现到特定的主题或 者文档顶部的跳转链接,使访问者能
够快速跳转到选定的位置,加快信息
检索的速度。
创建锚点链接
1.首先要设置一个锚点(即链接目标)

方法是将插入点放在需要创建锚点的地 方,单击“常用”------“命名锚记”,设 置“锚记名称”。
项目四
一、
超级链接的应用
绝对URL、相对URL及常见的超级链
接类型 二、各种超级链接的创建方法 三、实例

网页设计与制作_第05章创建和设置超级链接ppt课件

网页设计与制作_第05章创建和设置超级链接ppt课件

装备一个铸造车间,需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清 能形成 生产能 力。
装备一个铸造车间,需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械,通 风除尘 设备等 。只有 设备配 套,才 能形成 生产能 力。
装备一个铸造车间,需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械,通 风除尘 设备等 。只有 设备配 套,才 能形成 生产能 力。
文本超级链接 图像超级链接 图像地图 电子邮件超级链接 锚记超级链接 空链接 鼠标经过图像 导航条 Flash文本 Flash按钮 脚本链接
装备一个铸造车间,需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械,通 风除尘 设备等 。只有 设备配 套,才 能形成 生产能 力。
(2) 根据目标端点的不同,超级链接可分为内部超级链接、外部超 级链接、电子邮件超级链接和锚记超级链接。
装备一个铸造车间,需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械,通 风除尘 设备等 。只有 设备配 套,才 能形成 生产能 力。
5.2 创建超级链接
装备一个铸造车间,需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械,通 风除尘 设备等 。只有 设备配 套,才 能形成 生产能 力。
5.1.3 链接目标
链接目标用于设置单击某个链接时,被链接文件打开的位置。 通常,链接目标有以下4种形式。
【_blank】:将链接的文档载入一个新的浏览器窗口。 【_parent】:将链接的文档载入该链接所在框架的父框架或 父窗口。如果包含链接的框架不是嵌套框架,则所链接的文档 载入整个浏览器窗口。 【_self】:将链接的文档载入链接所在的同一框架或窗口。 此目标是默认的,因此通常不需要特别指定。 【_top】:将链接的文档载入整个浏览器窗口,从而删除所有 框架。

Web前端设计与开发实用教程 第3章-超级链接

Web前端设计与开发实用教程 第3章-超级链接

3.2.2 绝对路径与相对路径
(2)文档相对路径:是指和当前文档所在的文件夹相对的路径。这 种路径通常是最简单的路径,可以用来链接和当前文档处于同一文 件夹下的文档。下面举例说明。
3.2.2 绝对路径与相对路径
1.绝对路径
绝对路径是包含服务器协议(对于网页来说通常是http:// 或ftp://)的完全路径,绝对路径包含的是精确地址而不用考虑源文 件的位置。但是如果目标文件被移动,则链接无效。创建外部超 链接时必须使用绝对路径。
绝对路径是指资源的完整地址,包括URL的所有3个部分 ,形式如下: 协议://计算机/文档名 例如,/20110721/n314120792.shtml就是绝 对路径,协议为http,访问主机20110721目录下 的n314120792.shtml文件。
表3-1
服务
文字描述
URL形式
WWW FTP4;">新 浪</a>
清华大学ftp服 <a href=" ftp:// ">清
务器
华大学</a>
邮件地址
<a href="mailto:itwangwu@"> 写信</a>
3.1.2 超链接类型
1.按照链接路径分类
按照链接路径的不同,网页中超链接一般分为以下3种 类型: 内部链接、锚点链接和外部链接。
所谓内部链接,指的是在同一个网站内部,不同的html 页面之间的链接关系,在建立网站内部链接的时候,要明确哪个 是主链接文件(即当前页),哪个是被链接文件。
所谓外部链接,指的是跳转到当前网站外部,与其它网 站中页面或其它元素之间的链接关系。
3.2.1 <a>标记

第4章 在网页中建立各种超级链接

第4章 在网页中建立各种超级链接

网页设计与制作
许多网站提供了文件下载的功能,实现文件 下载的功能很简单,就是建立一个到文件的超级 链接!(下载的文件和其它网页文件都放在本地 站点中。)
网页设计与制作
二、创建外部超级链接
所谓外部超级链接:即链接了本地站点以外 的网页文件。我们平时常见的“友情链接”就是 外部超级链接,当单击“友情链接”中的某个链 接时,浏览器将打开相应网站。
例如, 设计目标:在网页中为“与我联系”文本创建 E-mail链接,其E-mail地址为yiiz@
网页设计与制作
实现步骤:
(1)添加“与我联系”文本。 (2)选中文本 (3)添加链接的方法 A、插入浮动面板常用电子邮件链接图标 B、菜单栏插入(insert)Email link打开 “insert Email link(插入E-mail链接)”对 话 框进行设置 C、在文本属性面板上link文本框中直接输入: “mailto:yiiz@” 网页设计与制作
网页设计与制作
创建空链接的步骤如下:
(1)选择需要创建链接的文本或图像 (2)在属性面板中的“Link”文本框中输入空链接符号 “#”, 即创建了一个空链接
创建空链接
网页设计与制作
四、创建脚本链接
利用脚本链接可以执行JavaScript代码或者 调用JavaScript函数。当来访者单击了某个指定 项目时,脚本链接也可以用于执行计算、表单确 认和其它任务。

设置链接目标
网页设计与制作
说明: 在“Target(目标)”文本框的下拉列表中 “_blank”表示在新的未命名的浏览器窗口中打 开链接文档。 “_parent”、 “_self”、 “_top”选项的含义与 框架有关。
网页设计与制作

网页设计与制作项目7超链接

网页设计与制作项目7超链接

鼠标指向导航图像
7.2 网页制作
步骤 10 重复同样的操作,插入鼠标经过图像,在 图像名称的文本输入框中输入“酒店机票”,用与设置 “首页”相同的方法选择所需要的图像,【插入鼠标经过 图像】对话框中的参数设置如图所示。
【插入鼠标经过图像】对话框参数设置
7.2 网页制作
7.2.2 创建文本与图片超链接 步骤1 创建文本超级链接。在【属性】面板上单击 “页面属性”按钮 ,设置文本链接的属性,参数设置如 图所示。 步骤2 在“目的地”页面中选择文本“预订酒店”, 如图所示;在【属性】面板上单击“链接(L)”右侧的 “浏览文件”按钮 。
步骤7 单击“预览”按钮 ,当鼠标指向 文本“黄山”图片时,单击即可跳转到“黄山” 页面上。 步骤8 按照相同的操作,可以完成图片 “苏州园林”、“桂林”的超级链接。
7.2 网页制作
7.2.3 创建图像映像超链接 步骤1 在“目的地”页面上单击“地图”图片,在 【属性】面板单击“矩形热点工具”按钮 ,在地图上的 “北京”处绘制“矩形”,如图所示。 步骤2 在【属性】面板上单击“链接(L)”右侧的 “浏览文件”按钮 ,或直接输入超级链接的目标文件名, 如图所示。
“目的地”页面效果
7.2 网页制作
7.2.1 设置导航条超链接 步骤1 启动Dreamweaver CS6后,在letuweb 站点中创建新文档,命名为“destination.html”。 步骤2 在destination文档中绘制表格布局页面,输 入相应的文字、选择图像等素材,插入页面顶部LOGO及其 他元素,如图所示。
7.2 网页制作
步骤3 在表格的第3行定位光标,执行【插入】| 【图像对象】|【鼠标经过图像】菜单命令,弹出【插 入鼠标经过图像】对话框,如图所示。
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

6.2.2 相对路径
• 文档的相对路径,例如data/html/doc/201212/21/25126/index.html。
• 相对路径对于绝大多数Web站点的本地链接,是最全适的 路径。相对路径还可以需要站点内移动文件时,提供更大 的灵活性。
• 在当前文档与所要链接的文档处于同一文件夹内,而且在 继续保持这种状态的情况下,文档相对路径非常有用。
• 2. 根据超链接目标位置的不同分 • (1)内部链接:指在同一站点内部,不同页面之
间的超链接。 • (2)锚记链接:网页内部的链接。通常情况下,
锚记链接用于链接到网页内部某个特定的位置。 • (3)外部链接:站点外部的链接,是网页与因特
网中某个目标网页的链接。 • (4)E-mail链接:指链接到电子邮箱的链接。单
• 超链接由源端点和目标端点两部分组成,其中设置了链接 的一端称为源端点,跳转到的页面或对象称为链接的目标 端点,同样,超级链接也是网页中最重要、最基本的元素 之一。
• 而在一个网页中用来作超链接的对象,可以是一段文本或 者是一个图片。当浏览者单击已经链接的文字或图片后, 链接目标将显示在浏览器上,并且根据目标的类型来打开 或运行。
• 本章对网页中的链接进行一个综合的介绍,以期让大家对 它有一个全面而深入的理解。对于链接在HTML 中的写法, 在这里就不作过多讲解,有兴趣的读者可参考有关资料学 习。
6.1 超级链接概述
• 超级链接在通过网页浏览获取信息中有如此重要的作用, 所以要想实现一个科学合理的链接,就应学习超级链接的 相关知识并熟练掌握实现的技术。
• 站点根目录相对路径以一个正斜扛“/”开始,正斜扛表 示站点根文件夹。比如/lwjun/index.html是文件 index.html的站点根目录相对路径,该文件位于站点根文 件夹的lwjun子文件夹中。
6.1.2 超链接的类型
• 1. 根据超链接的链接路径分 • 通常情况下将超链接分为以下三种: • (1)绝对URL超链接也称为绝对路径。页面之间的链接是
用统一资源定位符URL(United Resource Location)来表 示。 • (2)相对URL的超链接,又称为相对路径。 • (3)同一网页的超链接。
击该链接可以用于发送电子邮件。 • (5)可执行文件链接:通常又称为下载链接,单
击该链接可以运行可执行文件,可以用于下载文 件或或在线运行可执行文件。 • 超链接源与目标路径概括如图6-1所示。
图6-1 链接源与目标路径
6.1.3 内部、外部与脚本链接
• 常规的链接包括内部超链接、外部超链接和脚本链接。下 面介绍各个链接的操作方法。3.脚本超链接
• 就是通过脚本的方法来控制链接。其主要用来执行计算、 表单验证和其他处理。
• 1.内部超链接
• 内部超链接是指目标端点内部的超链接,其设置非常灵活。
6.2 关于链接路径
• 链接是有路径的,深入理解路径的含意, 根据网站的不同需要选择不同的路径,对 创建网站非常重要。
6.2.1 绝对路径
• 绝对路径提供链接文档的完整的URL,包括所使用的协议, 比如对于Web页来说,通常使用http:/,其中http (Hypertext Transfer Protocol)就超文本传输协议。 例如,/cms/data/html/doc/201212/21/25126/index.html就是一个绝对路径。
• 文档相对路径还可以用来链接到其他文件夹中的文档,方 法是利用文件夹层次结构,指定从当前文档所链接的文档 的路径。
• 文档相对路径,是省略掉了当前文档和所链接的文档都相 同的绝对URL部分,而只提供不同的路径部分。如图6-2所 示我们建立的一个站点的内部结构。
图6-2 站点结构
• 如果成组移动一组文件,例如移动整个文件夹时,该文件 夹内所有文件保持彼此间的相对路径不变,此时不需要更 新文件间的文档相对链接。如果,移动含有文档相对链接 的单个文件或者移动文档相对链接到的单个文件时,则必 须更新这些链接
6.2.3 根路径
• 站点根目录相对路径,例如/cms/data/html/doc/201212/21/25126/index.html。即紧跟在网站域名后。
• 站点根目录相对路径提供从站点的根文件夹到文档的路径, 在处理使用多个服务器的大型Web站点,或者在承载有多 个不同站点的服务器路径,最好使用文档相对路径为 妥。
6.1.1 超级链接的定义
• 所谓的超链接是指从一个网页指向一个目标的连接关系, 这个目标可以是另一个网页,也可以是相同网页上的不同 位置,还可以是一个图片、一个电子邮件地址、一个文件, 甚至是一个应用程序。能合理、协调地把网站中的各个元 素以及网站中的页面通过超级链接构成了一个有机整体, 使浏览者能快速地访问到想要访问的页面。
• 尽管本地链接(即到同一站点文档的链接)也可以使用绝 对路径链接,但最好不要采用这种方式,因为一旦将此站 点移动到其它域,则所有本地绝对路径链接都将断开。
• 绝对路径也会出现在尚未保存的网页上,在没有保存的网 页上插入图像或添加链接,Dreamweaver会暂时使用绝对 路径。
• 当插入图像(非链接)时,如果使用图像的绝对路径,而 图像又驻留在远程服务器而不在本地硬盘驱动器上,则将 无法在文档窗口中查看该图像,此时,必须在浏览器中预 览该文档才能看到,只要情况允许,对于图像,就要使用 文档或站点根目录相对路径。
第6章 网页中的超级链接
• 在主页制作中,大家对链接的作用并不陌生,可以这样说, 链接是主页的灵魂是网页的核心。有了它,就能够轻而易 举地实现互联网上的信息访问、资源共享。在此,作为超 文本标记语言(HTML)可以链接到其他的网页、图像、多 媒体、电子邮件地址、可下载的文件等。可以说只要浏览 器能够显示的内容,都可以从一个HTML文件中得到。我们 只所以能在网络世界恣意畅游,页面之间的链接功不可没。 而对于网页制作者来说,链接看似简单却并不容易。
相关文档
最新文档