五章超链接ppt课件.ppt

《五章超链接ppt课件.ppt》由会员分享，可在线阅读，更多相关《五章超链接ppt课件.ppt（30页珍藏版）》请在三一文库上搜索。

1、第五章 超链接,韦妍,网页设计与制作,第五章 超链接,掌握各种超链接的制作,教学任务,了解站点超链接路径的分类,掌握超链接的相对路径,掌握导航条的设置方法,1,2,3,4,第五章 超链接,教学重点与难点,网页各种超链接的制作,1,站点相对路径,2,第五章 超链接,4,5.1 超链接的概述,超链接 超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。 超链接的分类 根据源端点的不同，超级链接可分为文本超级链接、图像超级链接和表单超级链接。 根据目标端点的不同，可分为内部超级链接、外部

2、超级链接、电子邮件超级链接和锚记超级链接。,第五章 超链接,5,5.2 超链接路径,绝对路径 绝对路径是指某个文件在网络上的完整路径，包括协议、主机名、路径、文件名等。例如：http:/ 。链接到其它站点的页面文档时，必须使用绝对路径。 站点根目录相对路径 提供了站点根文件夹到所链接页面文档的路径，与当前页面文档位置无关。站点根目录相对路径以“/”开始，该符号表示站点根文件夹，例如：/index/index.html。,第五章 超链接,6,5.2 超链接路径,相对路径 指某个文件（文件夹）相对于别外一个文件（文件夹）的相对位置。 若要链接同一个文件夹下的文件，则直接输入其名称，如：index.

3、htm。 若要链接到当前文档所在文件夹的子文件夹中的文件，则输入文件夹名称+“/”+文件名称，如：(htm/index.htm) 若要链接到当前文档所在文件夹的父文件夹中的文件，则在所链接文件名前加/（此处的“”表示在文件夹层次结构中上移一级）。,第五章 超链接,7,5.3 超链接的设置,5.3.1 文本链接 使用【属性】面板中的“链接”，先在网页中选择要进行链接设置的文本，再通过链接文本框右侧的【指向文件】按钮 或【浏览文件】按钮 或直接在文本框中输入被链接的网页文档的路径，来进行文本链接的设置，如图所示。,第五章 超链接,8,5.1 超链接的概述,5.3.1 文本链接 链接目标 【_bla

4、nk】:在新的窗口（或新的标签栏）打开链接。 【_parent】:在上一个窗口（或上一个标签栏）打开链接。 【_self】:在本窗口（或本标签栏）打开链接。 【_top】:在本窗口（或本标签栏）打开链接并且占用整个窗口 对于（框架结构而言） 。,第五章 超链接,9,5.3 超链接的设置,5.3.2 用CSS定义链接文本状态 （1）在【CSS样式】面板中单击【新建CSS规则】按钮 ，在弹出的如图所示的对话框中进行设置。,第五章 超链接,5.3 超链接的设置,5.3.2 用CSS定义链接文本状态 其中： a:link 定义正常链接的样式； a:visited定义已访问过链接的样式； a:hover

5、定义鼠标悬浮在链接上时的样式； a:active定义鼠标单击链接时的样式:,第五章 超链接,11,5.3 超链接的设置,5.3.2 用CSS定义链接文本状态 （2）单击【确定】按钮，弹出a:link的【CSS规则定义】对话框，进行如图所示的设置，在Text-decoration（文本修饰）中选择“none”,即“无下划线”。,第五章 超链接,12,5.3 超链接的设置,5.3.2 用CSS定义链接文本状态 （3）单击【确定】按钮，网页中的链接文本即变为无下划线，如图所示。 （4）其它三种链接文本状态也可同样设置，不过要注意的是：要预览后在浏览器窗口中才可看到效果。,第五章 超链接,13,5.3

6、 超链接的设置,5.3.3 电子邮件链接 所谓的“电子邮件链接”即是当我们点击它时，浏览器会自动调用默认使用的邮件客户端程序（outlook）发送电子邮件。 （1）在【插入】面板的【常用】模式中，单击【电子邮件链接】 按钮 。 （2）弹出如图所示的【电子邮件链接】对话框中，输入“文本”和“E-mail” 地址，然后单击【确定】按钮。,第五章 超链接,14,5.3 超链接的设置,5.3.3 电子邮件链接 或选中文本“写信给我”，在【属性】面板的“链接”文本框中，键入“mailto:”，即“mailto:”加上电子邮件地址，如图所示。,第五章 超链接,15,5.3 超链接的设置,5.3.4 锚点链

7、接 所谓锚点链接，是指同一页面中的不同位置链接，锚记链接主要应用于文本内容较多的网页。 （1）将光标定位在要设置标记的位置，在【插入】面板的【常用】模式中，选择【命名锚记】按钮，如下图所示。,第五章 超链接,16,5.3 超链接的设置,5.3.4 锚点链接 （2）在弹出的【命名锚记】对话框中键入该锚记的名称，如top，然后单击【确定】按钮（注意：区分大小写），名为top的锚点即被插入到文档中的相应的位置。如图所示。,第五章 超链接,17,5.3 超链接的设置,5.3.4 锚点链接 （3）选择要创建链接的文本或图像，例如选中“返回顶部”四个字， 在【属性】面板的“链接”文本框中，键入号和锚记名称

8、“top”。如图所示。,第五章 超链接,18,5.3 超链接的设置,5.3.5 下载链接与空链接 1.下载链接 如果超级链接指向的不是一个网页文档，而是zip、rar、exe、mp3等类型的文件，这样单击链接时就会提示是否选择下载文件。 方法：选中“软件下载”文字，然后在【属性】面板中，将其链接指向压缩文件，如图所示。,第五章 超链接,19,5.3 超链接的设置,5.3.5 下载链接与空链接 2. 空链接 空链接也叫无址链接，也就是没有链接对象的链接即是未指派的链接，在空链接中，目标URL是用“#”来表示的。即在【属性】板的链接输入框中录入#标记，如图所示。,第五章 超链接,20,5.3 超链

9、接的设置,5.3.6 图像链接 方法与文本链接一样，选择“图像”对象，在【属性】板的链接文本框右侧的【指向文件】按钮 或【浏览文件】按钮 或直接在文本框中输入被链接的网页文档的路径，如图所示。,第五章 超链接,21,5.3 超链接的设置,5.3.7 图像热点链接 热点链接也称热区链接，也有的称图像地图。图像热点链接用来划分同一张图像上不同区域的超链接。例如在网页版中国地图中，单击某省的名称，便会打开新网页以显示该省的地图或介绍。 （1）点击要添加热区的图片，在属性面板中出现4个热点工具，如下图所示。,第五章 超链接,22,5.3 超链接的设置,5.3.7 图像热点链接 （2）选择一个热点绘制工

10、具，在图像上绘制热区域。 （3）点击热点区域，为热点区域制作超链接，如下图所示。,第五章 超链接,23,5.4 导航条,5.4.1 鼠标经过图像 鼠标经过图像是一种在浏览器中查时，使用鼠标指针移过它时发生变化的图像。使用的两个图像应大小相等；如果这两个图像大小不同，Dreamweaver将自动调整第二个图像的大小以与第一个图像的属性匹配。 在【插入】面板的【常用】中，单击【图像】展开式按钮 ，选择【鼠标经过图像】图标按钮 ，在对话框中设置如图所示。,第五章 超链接,24,5.4 导航条,5.4.2 导航条 （1）选择菜单【插入记录】/【图像对象】/【导航条】命令，或在【插入栏】/【常用】面板中

11、单击“导航条”按钮。 （2）在弹出【导航条】对话框中进行设置，如下图所示。,第五章 超链接,25,5.4 导航条,5.4.2 导航条,第五章 超链接,26,5.5 项目实训,5.5.1 项目一 1. 实训题目 “古今传奇”网页 2. 实训目的 通过制作该网页作，可以掌握根据页面的实际需要，在页面中合理地创建文本链接、图像链接、锚记链接、空链接和电子邮件链接等。,第五章 超链接,27,3. 实训案例效果,5.5 项目实训,第五章 超链接,28,5.5.2 项目二,1. 实训题目 “日常生活”网页 2. 实训目的 通过制作该网页作，可以掌握在同一幅图像的不同部分链接到不同的文档，即图像热点链接的创建方法和技巧。,5.5 项目实训,第五章 超链接,29,3. 实训案例效果,5.5 项目实训,谢谢！,