tceic.com
学霸学习网 这下你爽了
相关文章
当前位置:首页 >> 其它课程 >>

网页设置基础:网页中的超链接上课课件 2_图文

第6章 在网页中设置链接
? 在这一章我们引入一个新的概念——超链接

(Hyperlink)。 ? 在网页设计中,超链接的应用非常广泛,熟 练地应用超链接是设计网页的基本要求。 ? 本章主要讲解的内容是超链接的基本知识, 各种超链接的操作方法,以及检查和修复网 页中的超链接。

6.1 超链接概述
? 超链接是Web页中最吸引人的部分。Internet

之所以如此受到人们的欢迎,很大程度上是 由于在网页中使用了大量的超级链接。
? 在介绍使用Dreamweaver

cs3在文档中创建超 链接之前,我们先来了解一些关于超链接的 基本概念和基本知识。

6.1.1 超链接的基本概念
? 超链接是指从一个对象指向另一个对象的指

针,它可以是网页中的一段文字也可以是一 张图片,甚至可以是图片中的某一部分。
? 它允许我们同其它网页、站点、图片、文件

等进行连接,从而使Internet上的信息构成 一个有机的整体。

设置基本链接
? 根据链接方式的不同超链接可分为:绝对路

径连接、相对路径连接两种。
? 而根据链接对象的不同超链接又可分为:超

文本链接、命名锚链接、图像链接、电子邮 件链接、热区链接,空链接等。

6.1.2 超链接的路径
? 相对路径与绝对路径作为超链接的两种基本

连接方式是十分重要的也是容易混淆的.
? 要想熟练运用超链接我们首先就的弄清什么

相对路径什么是绝对路径,它们的区别在哪 里。

? 1.绝对路径 ? 绝对路径:指明目标端点所在具体位置的完

整URL地址的链接路径。 ? 2.相对路径 ? 相对路径:指明目标端点与源端点之间相对 位置关系的路径称为相对路径。

6.2 超文本链接
? 超文本链接是最普通、最简单的一种超链接。 ? 在Dreamweaver

中根据链接目标的不同,超 文本链接可以分为与本地网页文档的链接、 与外部网页的链接、空链接等几种类型。下 面将逐一介绍。

6.2.1 创建与文档的链接
? 与本地网页文档的链接,是最常见的超文本

链接类型。通过创建与文档的链接,可以将 本地站点的一个个单独的文档连接起来,形 成网站。具体操作步骤如下:

6.2.2 创建与外部网页的链接
? 上一小节介绍了创建与本地文档的链接,下

面就来学习如何创建与外部网页的链接。具 体操作步骤如下: ? (1)选中要创建链接的文本“中国美术学院 美术馆”;在“属性检查器”的“链接”文 本框中直接输入URL地址 “http://msg.caa.edu.cn/about.asp?id=11 ”,“目标”下拉列表框中选择“_blank” 。

设置外部、内部网页链接
? (2)保存文件,在浏览器中预览时,单击文

本“中国美术学院美术馆”,就会在新窗口 中打开中国美术学院美术馆网站的主页。 ? 按快捷键F12预览页面,当单击链接文字后, 可以在一个新开的窗口中打开链接的网页。 ? 内部页面链接指的是链接到站点内部的文件。 ? (1)示例页面中为指定项目建立相应的链接。 ? (2)在“属性”面板的“链接”文本框中输 入已经制作好的目标网页的路径。 ? (3)按F12预览页面。

6.2 电子邮件链接
? 电子邮件链接是一种特殊的链接,在网页中

单击这种链接,不是跳转到其他网页中,而 是会自动启动电脑中的Outlook Express或其 他E-mail程序,允许书写电子邮件,并发送 到指定的地址。具体操作步骤如下:

6.2.3 创建空链接
? 空链接是指未指定目标文档的链接。使用空

链接可以为页面上的对象或文本附加行为。 具体操作步骤如下: ? (1)选中要创建链接的文本“更多进入”; 在“属性检查器”,“链接”文本框中直接 输入 “#” 。 ? (2)保存文件,在浏览器中预览时,“更多 进入”显示为超文本链接的样式,单击后不 会跳转到别的页面。

设置脚本链接
? 脚本链接对多数人来说是一个比较陌生的词

汇,它一般用于为浏览者提供某个方面的额 外信息,而不用离开当前页面。 ? 脚本链接就是执行JavaScript代码的功能。 例如:选择“关闭”文字,在“属性”面板的 “ 链接”文本框中输入javascript代码, “javascript:window.close()” 按f12预览页面。

6.3.1 创建锚点
? 在创建锚链接之前,首先要在页面中创建锚

点。具体操作步骤如下:

6.3 命名锚链接
? 当用户浏览一个内容较多的网页时,查找信

息会浪费大量的时间。在这种情况下,可以 在网页中创建锚链接,放在页面顶部作为书 签。
? 锚实质上就是在文件中命名的位置或文本范

围,锚链接起到的作用就是在文档中定位。 单击锚链接,就会跳转到页面中指定的位置。

设置本页面的锚点链接
? 创建到同页面锚点的链接的过程分为两步。首先,

创建命名锚记;然后,创建到命名锚记的链接。 (1)将光标放在页面需要插入命名锚记的位置,然 后在菜单栏上选择“插入”----“命名锚记”命令。 (2)在弹出的“命名锚记”对话框中的“锚记名称” 文本框中输入锚记名称。 (3)单击“确定”按钮。 (4)下面将链接到命名锚记。 (5)按F12预览页面。

6.3.2设置不同页面的锚点链接
? 创建到不同页面锚点的链接的过程分为两步。首先,

在链接的目标页面上创建命名锚记;然后,在要设置 链接的页面上,创建到命名锚记的链接。 (1)将光标放在页面上需要插入命名锚记的位置,这 里放在页面图片前,然后在菜单上选择“插入”-----“命名锚记”命令。 (2)在弹出的“命名锚记”对话框中的“锚记名称” 文本框中,输入锚记的名称。 (3)单击“确定”按钮,命名锚记即插入到光标所在 的位置。 (4)下面将链接到命名锚记。选中页面中要设置链接 的文字,在“属性”面板上的“链接”文本框中输入 “页面名称#锚记名称”,本例中为 “chap06.html#p1". (5)按快捷键F12预览页面。

6.3.3 图像热区链接
? 在Dreamweaver

cs5中,除了可以给文本添加 超链接,还可以给图像添加超链接。图像的 超链接包括为整张图像创建超链接和在图像 上创建热区两种方式。

6.3设置图像映射
热点链接的原理就是利用HTML语言在图像上定 义一定形状区域,然后给这些区域加上链接, 这些区域被称之为热点。

6.3.4 为整张图像创建超链接
? 这种应用方式很普遍,在网页中经常会用到。

当鼠标移到设置了链接的图像上时,会变成 “手型”;单击图像,会跳转到指定的页面。 具体操作步骤如下:

6.3.5设置图像映射
热点链接的原理就是利用HTML语言在图像上定义一定形状 区域,然后给这些区域加上链接,这些区域被称为热点。 (1)打开示例页面,选择图像文件。 (2)单击“属性”面板左侧“地图”选项组中的“矩形热点 工具”按钮。 (3)鼠标指针转变为“十”字形,在当前选中的图像上单击, 框选设置链接的部分,此时图像上出现一个透明的蓝色区域, 这就是要指定的图像热点区域。 (4)选中图像中的热点区域,在“属性”面板上可以给图像 热点设置超链接。 (5)按快捷键F12预览页面。
?

6.3.6 创建热区
? 在Dreamweaver

cs5中,除了为整张图像创建 超链接外,还可以在一张图像上创建多个链 接区域,这些区域可以是矩形、圆形或者多 变形。这些链接区域就叫做热区。当单击图 像上的热区时,就会跳转到热区所链接的页 面上。具体操作步骤如下:

9.6 检查与修复链接
? 对于一个内容繁多的网站来说,通常包含有

大量的超链接。使用Dreamweaver cs3的检查 与修复链接功能,可以对当前网页文档中的 所有链接进行检查,报告网页中断掉的链接 并进行修复,省去了手工检查的麻烦。具体 操作步骤如下:

①做作业前的准备工作:
? 1、创建一个站点(注意路径千万不要有中文) ? 2、把练习文件.html复制进站点的根目录里 ? 3、把1.jpg图片文件复制进站点的images目

录里

②课堂作业
? 1.

用Dreamweaver软件打开练习文件.html,将标 题下面的九大点,分别链接到下面的对应的每一小 点中(即如点击9、加载稿纸,网页即跳转到最下 面的第9点)。 ? 2.1 新建一网页,将图片1.jpg插入网页中,将三朵 花的区域作为热点区域,将它们分别链接到 ? http://www.baidu.com; ? http://www.google.com; ? http://www.sina.com.cn ? 2.2 在图片后输入你的邮箱地址,并设置为你自己 的电子邮件链接。如abc@163.com,点击后会打开 Outlook邮件程序。

③提交作业
? 1、每次的作业都会计入平时成绩 ? 2、做完作业后,把你创建的站点所在的文件

夹(即原来千万不要用中文名的文件夹)改名 为 你的名字,然后把整个文件夹提交上来。


推荐相关:

网页设置基础:网页中的超链接上课课件 2_图文.ppt

网页设置基础:网页中的超链接上课课件 2 - 第6章 在网页中设置链接 ? 在这

网页设置基础:网页中的超链接上课课件_图文.ppt

网页设置基础:网页中的超链接上课课件_其它课程_高中教育_教育专区。网页中的超链

HTML课件第一章 网页设计基础(上课)_图文.ppt

HTML课件第一章 网页设计基础(上课)_工学_高等教育_教育专区。HTML课件 ...图1-2 超链接 网页设计基础 什么是网站网站是一个存放在网络服务器上 的完整...

网页超链接公开课课件_图文.ppt

? 任务4:完成试题汇编第五章第2、第8、 第15题第5个步骤。邮件超链接。 (...网页设置基础:网页中的... 21页 1下载券 网页中的超链接 课件 暂无评价 14...

公开课课件 网页的链接_图文.ppt

做一做1: 在“诗文荟萃”网页中建立文字超链接 ?第1步:打开“诗文荟萃”网站的主页,选定“唐 诗赏析”这几个字。 ?第2步:单机常用工具栏上的“插入超链接...

网页上超链接的制作学习教育课件PPT_图文.ppt

沪教版六年级信息技术上册 网页上超链接的制作 学习目标 1.知道网页间的联系需通过超链接才能实现。 2.了解常见的各种超链接类型(文件链接、 外部站点链接、e-...

Dw网页设计 课件2_图文.ppt

Dw网页设计 课件2_工学_高等教育_教育专区。第2章通过本章学习,应该掌握以下内容: 1.Dreamweavercs4概述 2.用dreamweavercs4制作基本的网页 一、 Dreamweavercs4...

网页设计第2章课件_图文.ppt

网页设计第2课件_其它课程_高中教育_教育专区。第二章 HTML基础 HTML基础一...?超链接网页上连接其它网页网页上指定位 置的超文本和超媒体。 ?超链接分...

在网页中插入各种超级链接_图文.doc

超级链接 1、课件(超链接.ppt)2上课资料(教材配备的素材,本校网站) 案例式...链接路径、脚本链接、设置链接颜色。 超级链接网页的基本要素,是 web 服务...

高中信息技术《网页制作之建立超级链接》课件 人教版_图文.ppt

(3)链接到网站 4.建立图像映射 (5)图形热区超链接 (4)链接到电子邮件 难点突破 书签:就是网页中被标记的位置或被标记的选中文本,可 以作为超链接的目的地。...

2_HTML静态网页版面设置_电子课件_图文.ppt

静态网页版面设置 本章要点 任务1 文字段落与图片的设定 任务2 页面布局 任务3 超链接的使用 引例描述 具体学习计划: 第一步:使用HTML基本标签完成简单的图文混...

《网页设计基础》PPT课件_图文.ppt

网页设计基础PPT课件_教育学_高等教育_教育专区。《网页设计基础PPT课件 第1 章 网页设计基础 1.1 网页中的常见元素 1.2 常用网页制作工具 1.3 常用的...

网页制作教程CH7 在网页使用超链接-PPT课件_图文.ppt

建议: 避免孤立文件的存在 在网页中避免使用过多的超链接 网页中的超链接不要超过4层 页面较长时可以使用书签 设置主页或上一层的链接 2.建立文本超链接在一个...

《网页设计与制作》教学课件_图文.ppt

网页设计与制作》教学课件_理学_高等教育_教育专区。第1章 网页设计与制作...? 超链接网页中最为有用的功能之一。超链接是从一个网页 指向另一个网页...

《网页设计与制作》教学课件(精)_图文.ppt

网页设计与制作》教学课件 第9章:超级链接与导航栏一、课程引导二、明确知识...(2)在该网页中创建外部链接和内部链接。(3)在该网页中制作图像映射,设置图像...

...第7章在网页中使用超链接课件 粤教版选修3_图文.ppt

利用 HTML 和 FrontPage 创建、编 辑超 链接的方法网页制作的基本步骤 7.1 ...2。在网页中避免使用过多的超级链接:在一个网页中设置过 。在网页中避免使用...

ppt 2010设置超链接_图文.ppt

什么是超链接? 2. 超链接分几类? 3. 设置步骤 4. 操作任务 5. 小结 什么是超链接?超链接:是一个网页指向另一个 PPT 2010 课件制作设置超链接 设置...

网页设计超链接_图文.ppt

搜试试 5 悬赏文档 全部 DOC PPT TXT PDF XLS ...会在网站的友情链接中使用 8 6.2.2 设置相对路径...网页效果 19.1.9 设置图片热区链接 ? 基本语法 ...

HTML网页设计基础PPT_图文.ppt

第3章 HTML网页设计 基础 3.1 认识和使用HTML 3.2 HTML常用标记 3.3 HTML...? ? ? ? ? 3.4.3 插入表格 3.4.4 设置超级链接 3.4.5 表单网页制作...

终极博鳌网页设计:第7章 在网页中使用超链接_图文.ppt

利用 HTML和 FrontPage创 建、 编辑超 链接的方法网页制作的基本步骤 7.1 ...2。在网页中避免使用过多的超级链接:在一个网页中设置过 多超链接会导致网页...

网站首页 | 网站地图
All rights reserved Powered by 学霸学习网 www.tceic.com
copyright ©right 2010-2021。
文档资料库内容来自网络,如有侵犯请联系客服。zhit325@126.com