1、网页制作基础教程(Dreamweaver CS3),第三章建立网页链接,本章重点:内部链接、外部链接、锚点链接、E-mail链接的创建方法。,第三章建立网页链接,3.1 编织网站链接足球新闻3.2超链接概述3.3 管理超链接,3.1 编织网站链接足球新闻,3.1.1 案例综述 本例以编织网站中的各种超链接为主要目的,介绍创建超链接种种方法和技巧,3.1 编织网站链接足球新闻,3.1.2 案例分析为实现网页的跳转,将创建:到网站内页面的超链接内部链接;到网站外页面的超链接外部链接;电子邮件形式的超链接E-mail链接;到网页某一特定位置的超链接锚点链接;以及其他一些链接。,3.1 编织网站链接足
2、球新闻,3.1.3 实现步骤一、准备网页内容 步骤1选中站点; 步骤2将素材文件夹中的相关文档复制到站点文件夹下。二、创建超链接,1、创建内部链接网站内部页面之间创建相互链接关系步骤1选中页面中的文字或图像,在属性面板中单击“链接”文本框右侧的文件夹图标,以通过浏览选择一个文件步骤2从“目标”下拉菜单中,选择文档的打开位置。_blank :新打开的空窗口_parent:如果是嵌套的框架,则在父框架中打开。_self:会在当前网页所在的窗口或框架中打开。_top:会在完整的浏览器窗口中打开。,3.1 编织网站链接足球新闻,2、创建外部链接创建链接到绝对地址的外部链接选中文字或图像之后,直接在属性
3、面板的“链接”文本框中输入外部的链接地址,如http:/然后在“目标”下拉菜单中设置这个链接的目标窗口。,3.1 编织网站链接足球新闻,3、创建Email链接当浏览者单击电子邮件链接时,可即时打开浏览器默认的电子邮件程序处理程序。方法:选中文本和图像插入栏常用电子邮件链接输入邮件地址或在属性面板的链接栏中直接输入,3.1 编织网站链接足球新闻,mailto:邮件地址,4、锚点链接是指同一个页面中的不同位置链接。分为两步:创建命名锚记,就是在文档中设置位置标记,并给该位置一个名称,以便引用。创建到命名锚记的链接,3.1 编织网站链接足球新闻,创建命名锚记将光标定位在要设置标记的位置,插入栏命名锚
4、记输入锚记名称(注意:区分大小写)创建到命名锚记的链接选择要创建链接的文本或图像在属性面板的链接文本框中,键入号和锚记名称或在浏览对话框中,选中要链接的文件后加和锚记名称。,3.1 编织网站链接足球新闻,5、创建其他类型的链接(1)创建下载链接当被链接的文件是exe文件或zip文件等浏览器不支持的类型时,这些文件会被下载,这就是网上下载的方法。链接到下载文件的方法,和链接到网页的方法完全一样。,3.1 编织网站链接足球新闻,5、创建其他类型的链接(2)、创建空链接空链接用来激活页面中的对象或文本。当文本或对象被激活后,可以为之添加行为。方法:选中要制作空链接的对象,在链接文本框中直接输入。在一
5、般站点首页的导航栏中的首页链接,就可以是一个空链接,3.1 编织网站链接足球新闻,6、创建跳转菜单跳转菜单是文档中的弹出式菜单,可以创建到可在浏览器中打开的任何文件类型的链接。方法:插入栏表单跳转菜单在“插入跳转菜单”对话框中,单击号添加菜单项在“选择时。转到URL”文本框中,输入该文件的路径。,3.1 编织网站链接足球新闻,7、创建图像地图图像地图指已被分为多个区域(热点)的图像。当用户单击某个热点时,会发生某种操作。方法:选中图像在图像属性面板中,使用热区工具(矩形、椭圆、多边形),在图像上划分热区。为绘制的每一个热区设置不同的链接地址和替代文字。,3.1 编织网站链接足球新闻,3.2 超
6、链接概述,3.2.1 超链接的类型 内部链接这种链接的目标端点是本站中的其他文档。利用这种链接,可以跳转到本站点其他的页面上。外部链接这种链接的目标端点是本站点之外的站点或文档。利用这种链接,可以跳转到其他的网站上。,3.2 超链接概述,3.2.1 超链接的类型 Email链接单击这种链接,可以启动电子邮件程序书写邮件,并发送到指定的地址。锚点链接这种链接的目标端点是文档中的命名锚记,利用这种链接,可以跳转到当前文档中的某一指定位置上,也可以跳转到其他文档中的某一指定位置上。,3.2 超链接概述,3.2.2 链接路径(1)绝对路径:如果在链接中使用完整的URL地址,这种链接路径就称作绝对路径。
7、路径同链接的源端点无关。 (2)相对路径:相对路径可以表述源端点同目标端点之间的相互位置,它同源端点的位置密切相关。 (3)基于目录的路径:所有的路径都是从站点的根目录开始的,它同源端点的位置无关。通常用一个斜线“/”表示根目录。,3.2 超链接概述,3.2.3创建超链接 在文档窗口中选中想作为链接的文本或图片在属性面板链接一项的空白处填入链接的路径,或者单击浏览按钮,在弹出的【选择文件】对话框中,选定要链接的文档及采用哪种方式表达路径。链接的对象可以是多样的,如图片文件,电子表格,或者某个网站。,3.2.4 插入导航条导航条中按钮图像的状态根据浏览者的鼠标动作而改变。 方法: 1、将光标放到
8、要插入导航条的位置; 2、选择插入|图像对象|导航条命令 ; 3、或选择插入|常用|图像|导航条命令。,3.2 超链接概述,3.3.1 自动更新链接 在首选参数对话框中设置自动更新 选择“编辑”|“首选参数”命令,打开“首选参数”对话框,在“移动文件时更新链接”选项的下拉列表中进行选择。总是每当移动或重命名选定文档时,Dreamweaver将自动更新该文档的所有链接。提示将显示一个提示对话框,列出更改影响到的所有文件,以进行进一步选择,系统默认的选项是“提示”。,3.3 管理超链接,3.3.1 自动更新链接 在“站点定义”对话框中设置缓存 Dreamweaver创建缓存文件,主要用以存储有关本
9、地文件夹中所有链接的信息,可以加快更新过程。选择“站点”|“管理站点”命令,出现“编辑站点”对话框。选择一个站点,然后单击“编辑”按钮,出现“站点定义”对话框。“高级”|“本地信息”。在“本地信息”选项组中,选择“启用缓存”复选框。 注意:启动Dreamweaver之后,第一次更改或删除指向本地文件夹中文件的链接时,Dreamweaver会提示载入缓存。,3.3 管理超链接,3.3.2 在站点地图中管理更改链接 在“站点地图”窗口中,选择要更改的链接。在“文件”面板的主菜单栏选择“站点”|“改变链接”命令,或单击鼠标右键,从快捷菜单中选择“改变链接”命令。 在出现的“选择HTML文件”窗口中,
10、通过找到希望链接指向的文件,或者输入URL。,3.3 管理超链接,3.3.2 在站点地图中管理删除链接 在“站点地图”窗口中,选择“站点”|“删除链接”命令,或从右键快捷菜单中选择“删除链接”命令。 删除链接不会删除该文件,但会从指向该链接的页面上的HTML源代码中删除该链接。,3.3 管理超链接,3.3.2 在站点地图中管理打开链接源 在站点地图中选择一个文件。 选择“站点”|“打开链接源”命令,或从右键快捷菜单中选择“打开链接源”命令。 在“文档”窗口中打开属性面板和含有此链接的源文件,同时该链接以高亮显示。,3.3 管理超链接,3.3.3 在整个站点范围内更改链接 在“文件”面板中选择一个文件,如果更改电子邮件链接、FTP链接、空链接则不需要选择文件。 选择“站点”|“改变站点范围内链接”命令,出现“更改整个站点链接”对话框,在“更改所有的链接”文本框旁,单击文件夹图标,选择要更改其链接的文件;在“变成新链接”文本框旁,单击文件夹图标,选择要链接到的新文件。 单击“确定”按钮,会出现“更新文件”对话框,其中列出了需要更新的链接文件,单击“更新”按钮。,3.3 管理超链接,