第8讲为网页添加超链接PPT优秀课件

《第8讲为网页添加超链接PPT优秀课件》由会员分享，可在线阅读，更多相关《第8讲为网页添加超链接PPT优秀课件（31页珍藏版）》请在装配图网上搜索。

1、2021/5/251上一讲回顾上一讲回顾网页中表格的使用网页中表格的使用2013计本2021/5/252本讲主要内容本讲主要内容为网页添加超链接为网页添加超链接认识超链接认识超链接创建超链接创建超链接移除与变更超链接移除与变更超链接图像热区超链接图像热区超链接创建图像导航条创建图像导航条创建跳转菜单创建跳转菜单脚本链接脚本链接2021/5/253超链接超链接-实现页面间的导航实现页面间的导航链接文本或图像链接文本或图像链接地址（目标）链接地址（目标）一、认识超链接一、认识超链接 所谓的超链接是指从一个网页指向一个目标的连接关系所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一

2、个网页这个目标可以是另一个网页,也可以是相同网页上的不也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。文件，甚至是一个应用程序。超链接超链接返回返回二、创建超链接二、创建超链接2 2选择目标对象路径选择目标对象路径1 1 选中要添加超链接的对象选中要添加超链接的对象3 3选择选择目标对象目标对象的打开位置的打开位置 *创建超链接详解创建超链接详解 *1 1、选中要添加超链接的对象选中要添加超链接的对象2 2、添加超链接添加超链接4 4、选择选择目标对象目标对象的打开位置的打开位置3 3、选择选择目标

3、对象目标对象 文字链接：文字链接：在文字上添加超链接，这是常见的功能并不在文字上添加超链接，这是常见的功能并不会占用太多网页空间且维护容易。会占用太多网页空间且维护容易。图片链接：图片链接：在图片上添加超链接，比文字链接更容易传在图片上添加超链接，比文字链接更容易传达信息，让人一目了然。达信息，让人一目了然。按钮链接：按钮链接：在按钮上添加超链接，大多网页皆使用按钮在按钮上添加超链接，大多网页皆使用按钮链接来方便浏览者做内容选择。链接来方便浏览者做内容选择。：文字、图片、按钮等：文字、图片、按钮等 方法方法1 1：在属性面板的在属性面板的“链接链接”文本框中输入目标对象地址文本框中输入目标对象

4、地址 方法方法2 2：使用菜单使用菜单“插入插入/超级链接超级链接”：属性面板、菜单：属性面板、菜单：内部、外部、锚点、：内部、外部、锚点、emailemail、文件等、文件等 内部链接：内部链接：到到同个网站中的其他网页（文档）同个网站中的其他网页（文档）外部链接：外部链接：到到不同站点或本站点以外的网页（文档）不同站点或本站点以外的网页（文档）锚点链接：锚点链接：到网页某一特定位置的超链接到网页某一特定位置的超链接 电子邮件链接：电子邮件链接：到到E-mailE-mail的超链接的超链接 下载链接：下载链接：将文件以超链接的方式提供下载服务将文件以超链接的方式提供下载服务 空连接：空连接：

5、用来激活页面中的对象或文本用来激活页面中的对象或文本路径选择注意事项路径选择注意事项：新窗口、本窗口等：新窗口、本窗口等 _self_self：在当前网页所在的窗口或框架中打开（默认）在当前网页所在的窗口或框架中打开（默认）_blank:_blank:每个链接会创建一个新的窗口每个链接会创建一个新的窗口 _new_new：在同一个刚创建的窗口中打开在同一个刚创建的窗口中打开 _parent_parent：如果是嵌套的框架，则在父框架中打开如果是嵌套的框架，则在父框架中打开 _top_top：在完整的浏览器窗口中打开，忽略任何框架在完整的浏览器窗口中打开，忽略任何框架下一节下一节*超链接的目标对

6、象的路径表达方式超链接的目标对象的路径表达方式*对链接路径的正确理解是确保链接有效的先决条件。对链接路径的正确理解是确保链接有效的先决条件。相对于站点根目录路径相对于站点根目录路径:所有链接的路径都是从站点的根目录所有链接的路径都是从站点的根目录开始的。开始的。绝对路径：绝对路径：在链接中使用完整的在链接中使用完整的URLURL地址，一般用于链接外部地址，一般用于链接外部网站或外部文件资源时，例如：网站或外部文件资源时，例如：http:/ 电子邮件链接：电子邮件链接：到到E-mailE-mail的超链接的超链接 下载链接：下载链接：将文件以超链接的方式提供下载服务将文件以超链接的方式提供下载服

7、务 空连接：空连接：用来激活页面中的对象或文本用来激活页面中的对象或文本*创建不同类型的链接创建不同类型的链接 *1 1、内部链接、内部链接 选中要添加超链接的对象：页面中的文字或图像等选中要添加超链接的对象：页面中的文字或图像等 在属性面板中单击在属性面板中单击“链接链接”文本框右侧的文件夹图标文本框右侧的文件夹图标 通过浏览本站点内的文件，选择一个文件通过浏览本站点内的文件，选择一个文件 设定打开位置设定打开位置2021/5/2510HTMLHTML语法解释语法解释l l 灿坤蒸气电熨灿坤蒸气电熨斗斗a href=链接链接热点文本或图像热点文本或图像链接在链接在新窗口新窗口中打开中打开修改

8、文字超链接的样式修改文字超链接的样式在在 Dreamweaver Dreamweaver 中，默认的链接文字颜色为蓝色，中，默认的链接文字颜色为蓝色，而浏览过的颜色为紫红色而浏览过的颜色为紫红色若想改变超链接文字的颜色，请于若想改变超链接文字的颜色，请于 属性属性 面板按面板按 页面页面属性属性 钮开启对话方块更改相关设定：钮开启对话方块更改相关设定：链接颜色链接颜色：添加了超添加了超链接链接的的文字颜色文字颜色已访问链接：已访问链接：文字超链接文字超链接被访问过的颜色被访问过的颜色变换图像链接：变换图像链接：当鼠标位于当鼠标位于文字超文字超链接上时的颜色链接上时的颜色活动链接：活动链接：当当

9、鼠标在鼠标在超超链接上点击时的颜色链接上点击时的颜色点点小小图开大图图开大图l因版面的考虑，因版面的考虑，图片图片仅能缩小放在一旁。仅能缩小放在一旁。l如何让网站影像变得更大、更清楚？如何让网站影像变得更大、更清楚？外部链接外部链接选中页面中的文字或图像选中页面中的文字或图像使用插入菜单插入使用插入菜单插入/超链接，打开超级链接对话框超链接，打开超级链接对话框输入外部的链接地址输入外部的链接地址，如，如http:/http:/设定打开位置设定打开位置锚点链接锚点链接若将文字、图片全部设计在同一个网页可能会使该网页若将文字、图片全部设计在同一个网页可能会使该网页变得太过冗长，进而造成阅读上的不易

10、。变得太过冗长，进而造成阅读上的不易。锚点链接的目标端点是网页中的命名锚点，利用这种链锚点链接的目标端点是网页中的命名锚点，利用这种链接，可以跳转到当前网页中的某一指定位置上，也可以接，可以跳转到当前网页中的某一指定位置上，也可以跳转到其他网页中的某一指定位置上。跳转到其他网页中的某一指定位置上。Dreamweaver Dreamweaver 中的命名锚点，类似于中的命名锚点，类似于 Word Word 中的书签，中的书签，只需要在几个关键地方插入只需要在几个关键地方插入 命名锚点，当它与连结搭命名锚点，当它与连结搭配时就能很快地卷动到命名锚点的位置。配时就能很快地卷动到命名锚点的位置。创建命

11、名锚点创建命名锚点l预备工作：确认菜单栏预备工作：确认菜单栏 查看查看 可视化助理可视化助理 不不可见元素可见元素 为被核选状态，如此就可看到插入锚为被核选状态，如此就可看到插入锚点时所有元素符号。点时所有元素符号。创建命名锚点创建命名锚点创建命名锚记，就是在网页中设置位置标记，并给创建命名锚记，就是在网页中设置位置标记，并给该位置一个名称，以便引用。该位置一个名称，以便引用。1 12 23 3*锚点命名规则锚点命名规则 *只能使用字母和数字，锚点命名不支持中文。只能使用字母和数字，锚点命名不支持中文。锚点名称的第锚点名称的第1 1个字符最好是英文字母。个字符最好是英文字母。锚点名称要区别英文

12、字母的大小写。锚点名称要区别英文字母的大小写。锚点名称间不能含有空格，也不能含有特殊字符。锚点名称间不能含有空格，也不能含有特殊字符。创建到命名锚点的超链接创建到命名锚点的超链接选中页面中的文字或图像，选中页面中的文字或图像，在在属性面板的链接栏中直属性面板的链接栏中直接输入接输入 “#锚点名锚点名”注意：注意：l如果链接的目标锚点标记如果链接的目标锚点标记在当前页面在当前页面即输入即输入#锚点锚点名名l如果链接的目标锚点标记如果链接的目标锚点标记在其他网页在其他网页，即要输入目，即要输入目标网页的地址和名称，然后再输入标网页的地址和名称，然后再输入“#锚点名锚点名”电子邮件链接电子邮件链接E

13、mailEmail链接可以启动电子邮件程序（例如：链接可以启动电子邮件程序（例如：OffieceOffiece办办公软件中的公软件中的OutlookOutlook）书写邮件，并发送到指定的地址。）书写邮件，并发送到指定的地址。电子邮件链接电子邮件链接步骤步骤1 1：选中文本和图像：选中文本和图像步骤步骤2 2：插入栏常用电子邮件链接输入邮件地址：插入栏常用电子邮件链接输入邮件地址或在属性面板的链接栏中直接输入：或在属性面板的链接栏中直接输入：mailto:mailto:邮件地址邮件地址文件下载超链接文件下载超链接当被链接的文件是当被链接的文件是exeexe文件或文件或zipzip、rarrar

14、类型的文件时，浏类型的文件时，浏览器无法直接打开，便会提示文件会被下载，这就是网览器无法直接打开，便会提示文件会被下载，这就是网上下载的方法。上下载的方法。空链接空链接空链接用来激活页面中的对象或文本。空链接用来激活页面中的对象或文本。当文本或对象被激活后，可以为之添加行为。当文本或对象被激活后，可以为之添加行为。方法：选中要制作空链接的对象，在链接文本框中直方法：选中要制作空链接的对象，在链接文本框中直接输入接输入在一般站点首页的导航栏中的首页链接，就可以是一在一般站点首页的导航栏中的首页链接，就可以是一个空链接个空链接返回返回三、移除与变更超链接三、移除与变更超链接倘若当初设定的链接网址、

15、锚点有误或者变更时该怎倘若当初设定的链接网址、锚点有误或者变更时该怎么办呢？么办呢？变更链接：变更链接：在已设定链接的对象上单击鼠标在已设定链接的对象上单击鼠标右键，选按右键，选按 更改链接更改链接 开启开启 选择文件选择文件 对话方块重新对话方块重新选择选择 文件名称、文件类型文件名称、文件类型 或者输入新的或者输入新的 URL URL 链接地链接地址址移除链接：移除链接：在已设定链接的对象上单击鼠标右键，选在已设定链接的对象上单击鼠标右键，选按按 删除标签删除标签，就可移除其链接，就可移除其链接返回返回四、图像热区链接四、图像热区链接图像热区指在一幅图片上创建多个区域（热点），并图像热区指

16、在一幅图片上创建多个区域（热点），并可可以点击触发。当用户单击某个热点时，会发生某可可以点击触发。当用户单击某个热点时，会发生某种链接或行为。种链接或行为。步骤：步骤：1.1.选中图像选中图像2.2.在图像属性面板中，使用热区工具（矩形、椭圆、在图像属性面板中，使用热区工具（矩形、椭圆、多边形），在图像上划分热区。多边形），在图像上划分热区。3.3.为绘制的每一个热区设置不同的链接地址和替代文为绘制的每一个热区设置不同的链接地址和替代文字。字。返回返回HTMLHTML语法解释语法解释area：为图片添加热区：为图片添加热区Shape：定义区域的形状（：定义区域的形状（default（全部区域）

17、、（全部区域）、rect（矩形）、（矩形）、circ（圆形）、（圆形）、poly（多边形）（多边形）五、创建图像导航条五、创建图像导航条使用鼠标经过变换图像的特效，创建图像导航条使用鼠标经过变换图像的特效，创建图像导航条提示提示：可以为：可以为flashflash按钮添加超链接按钮添加超链接返回返回六、创建跳转菜单六、创建跳转菜单跳转菜单是网页中的弹出式菜单，可以创建任何文件跳转菜单是网页中的弹出式菜单，可以创建任何文件类型的链接。类型的链接。步骤：步骤：1 1、插入栏表单跳转菜单、插入栏表单跳转菜单2 2、在、在“插入跳转菜单插入跳转菜单”对话框中，单击号添加菜对话框中，单击号添加菜单项单项

18、3 3、在、在“选择时。转到选择时。转到URL”URL”文本框中，输入该文件的文本框中，输入该文件的路径。路径。返回返回七、脚本链接七、脚本链接通过链接触发脚本命令通过链接触发脚本命令1.1.表示关闭窗口：表示关闭窗口：javascript:window.close()javascript:window.close()2.2.表示弹出一个提示对话框：表示弹出一个提示对话框：javascript:alert(javascript:alert(欢迎光临本站点欢迎光临本站点)返回返回如何给滚动字幕、滚动图片添加超链接？如何给滚动字幕、滚动图片添加超链接？进阶与提高进阶与提高 思路：思路：先为文字、图

19、片设置好超链接先为文字、图片设置好超链接 再添加滚动字幕特效再添加滚动字幕特效 字幕内容字幕内容/图片代码图片代码本讲练习题本讲练习题1.1.为超链接添加提示文字应该使用为超链接添加提示文字应该使用标记的哪个属性标记的哪个属性值？值？2.2.通过通过标记的哪个属性值，可以控制链接目标打开标记的哪个属性值，可以控制链接目标打开的窗口？的窗口？3.3.创建邮件超链接是，创建邮件超链接是，hrefhref属性值必须以什么开头？属性值必须以什么开头？4.4.使用什么标签为图片增加热区？使用什么标签为图片增加热区？本讲实践任务本讲实践任务在在“印象师大印象师大”的站点中添加网页的站点中添加网页lianjie.htmllianjie.html，外，外观如下，练习添加本讲中的所有超链接观如下，练习添加本讲中的所有超链接