五章 超链接.pptVIP

教学任务 教学重点与难点 第五章 超链接 第五章 超链接 韦妍 网页设计与制作 掌握各种超链接的制作 了解站点超链接路径的分类 掌握超链接的相对路径 掌握导航条的设置方法 1 2 3 4 网页各种超链接的制作 1 站点相对路径 2 * 5.1 超链接的概述 超链接 超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。 超链接的分类 根据源端点的不同，超级链接可分为文本超级链接、图像超级链接和表单超级链接。 根据目标端点的不同，可分为内部超级链接、外部超级链接、电子邮件超级链接和锚记超级链接。 * 5.2 超链接路径 绝对路径 绝对路径是指某个文件在网络上的完整路径，包括协议、主机名、路径、文件名等。例如： 。链接到其它站点的页面文档时，必须使用绝对路径。 站点根目录相对路径 提供了站点根文件夹到所链接页面文档的路径，与当前页面文档位置无关。站点根目录相对路径以“/”开始，该符号表示站点根文件夹，例如：/index/index.html。 * 5.2 超链接路径 相对路径 指某个文件（文件夹）相对于别外一个文件（文件夹）的相对位置。 若要链接同一个文件夹下的文件，则直接输入其名称，如：index.htm。 若要链接到当前文档所在文件夹的子文件夹中的文件，则输入文件夹名称+“/”+文件名称，如：(htm/index.htm) 若要链接到当前文档所在文件夹的父文件夹中的文件，则在所链接文件名前加../（此处的“..”表示在文件夹层次结构中上移一级）。 * 5.3 超链接的设置 5.3.1 文本链接 使用【属性】面板中的“链接”，先在网页中选择要进行链接设置的文本，再通过链接文本框右侧的【指向文件】按钮 或【浏览文件】按钮 或直接在文本框中输入被链接的网页文档的路径，来进行文本链接的设置，如图所示。 * 5.1 超链接的概述 5.3.1 文本链接 链接目标 【_blank】:在新的窗口（或新的标签栏）打开链接。 【_parent】:在上一个窗口（或上一个标签栏）打开链接。 【_self】:在本窗口（或本标签栏）打开链接。 【_top】:在本窗口（或本标签栏）打开链接并且占用整个窗口 对于（框架结构而言） 。 * 5.3 超链接的设置 5.3.2 用CSS定义链接文本状态 （1）在【CSS样式】面板中单击【新建CSS规则】按钮 ，在弹出的如图所示的对话框中进行设置。。 5.3 超链接的设置 5.3.2 用CSS定义链接文本状态 其中： a:link 定义正常链接的样式； a:visited定义已访问过链接的样式； a:hover定义鼠标悬浮在链接上时的样式； a:active定义鼠标单击链接时的样式: * 5.3 超链接的设置 5.3.2 用CSS定义链接文本状态 （2）单击【确定】按钮，弹出a:link的【CSS规则定义】对话框，进行如图所示的设置，在Text-decoration（文本修饰）中选择“none”,即“无下划线”。 * 5.3 超链接的设置 5.3.2 用CSS定义链接文本状态 （3）单击【确定】按钮，网页中的链接文本即变为无下划线，如图所示。 （4）其它三种链接文本状态也可同样设置，不过要注意的是：要预览后在浏览器窗口中才可看到效果。 * 5.3 超链接的设置 5.3.3 电子邮件链接 所谓的“电子邮件链接”即是当我们点击它时，浏览器会自动调用默认使用的邮件客户端程序（outlook）发送电子邮件。 （1）在【插入】面板的【常用】模式中，单击【电子邮件链接】 按钮 。 （2）弹出如图所示的【电子邮件链接】对话框中，输入“文本”和“E-mail” 地址，然后单击【确定】按钮。 * 5.3 超链接的设置 5.3.3 电子邮件链接 或选中文本“写信给我”，在【属性】面板的“链接”文本框中，键入“mailto:abc@163.com”，即“mailto:”加上电子邮件地址，如图所示。 * 5.3 超链接的设置 5.3.4 锚点链接 所谓锚点链接，是指同一页面中的不同位置链接，锚记链接主要应用于文本内容较多的网页。 （1）将光标定位在要设置标记的位置，在【插入】面板的【常用】模式中，选择【命名锚记】按钮，如下图所示。 * 5.3 超链接的设置 5.3.4 锚点链接