版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
第5章超级链接的使用本章学习目标
掌握超级链接的作用及类型掌握文本和图片链接的创建方法掌握Email、锚点链接的创建方法掌握热区链接的创建方法
掌握链接效果的编辑方法5.1创建超级链接
5.1.1超级链接的作用及类型
超链接是文档与文档之间的链接,当单击它时,超链接可指向另外一个页面或文件。链接目标通常是另外一个网页,但也可以是一幅图片、一个电子邮件地址或其他文档。在浏览器中,超链接通常以带下划线的文本以及特定的颜色区别于网页内的其他内容,当鼠标指向它的时候,会变成手形,单击即可打开超链接。有三种类型的链接路径:
1、
绝对地址绝对路径由http://、ftp://等开始的,它不仅提供所链接文档的完整URL,而且包括所使用的协议(如对于Web服务为http://,FTP服务为ftp://)。注意:尽管对本地链接(即到同一站点内文档的链接)也可使用绝对路径链接,但不建议采用这种方式,因为一旦将此站点移动到其它服务器,则所有本地绝对路径链接都将断开。对本地链接使用相对路径还能在需要在站点内移动文件时,提供更大的灵活性。
2、相对地址相对地址是由文件名及其扩展名组成的,并且假设URL指向位于同一台WEB服务器上的文件。例如,假设一个站点的结构如图5-1-1所示:创建从booklist1.htm到其它文件的链接,如下所示(1)要从booklist1.htm链接到booklist2.htm(两个文件在同一文件夹中),文件名就是相对路径:booklist2.htm或./booklist2.htm。其中./表示在同一文件夹中。
(2)若要链接到book1.htm(在名为book1的子文件夹中),可使用相对路径book1/book1.htm。每个正斜杠(/)表示在文件夹层次结构中下移一级。
(3)若要链接到index.html(在父文件夹中,booklist1.htm向上一级),可使用相对路径../index.htm。每个../表示在文件夹层次结构中上移一级。
(4)若要链接到picture1.htm(在父文件夹的其它子文件夹中),可使用相对路径../mypictures/picture1.htm。其中../向上移至父文件夹;mypictures/向下移至mypictures子文件夹中。
3、站点根目录相对路径站点根目录相对路径以一个正斜杠(/)开始,该正斜杠表示站点根文件夹。例如,/mybooks/booklist1.htm是文件(booklist1.htm)的站点根目录相对路径,该文件位于站点根文件夹的mybooks子文件夹中。在某些Web站点中,需要经常在不同文件夹之间移动HTML文件,在这种情况下,站点根目录相对路径通常是指定链接的最佳方法。移动含有根目录相对链接的文档时,不需要更改这些链接。在一个文档中可以创建几种类型的链接:链接到其它文档或文件(如图形、影片、PDF或声音文件)的链接。命名锚记链接,此类链接跳转至文档内的特定位置。电子邮件链接,此类链接新建一个收件人地址已经填好的空白电子邮件。空链接和脚本链接,此类链接使您能够在对象上附加行为,或者创建执行JavaScript代码的链接。注意:创建链接之前,一定要清楚文档相对路径、站点根目录相对路径以及绝对路径的工作方式。
5.1.2实例:创建超级链接1、实例创意
下面以实例制作一个简单网页,实例中只用到简单的几个页面元素,主要有表格、文本和图片。各个文件的文件名及位置如图5-1-2如示。2.制作步骤(1)定义本书素材source目录下的文件夹5-1-2为本地站点目录。(2)创建链接创建超级链接有多种方法,本节将分别介绍几种不同方式来完成超级链接的创建。多数情况下,创建链接在【属性】面板中完成,也可以通过主菜单“【插入】→【超级链接】”来完成。打开根目录下的index.htm文件并选择“【窗口】→【属性】”菜单命令,打开【属性】面板,如图5-1-3所示。
方法一:选择页面上方文字“语言学习”,然后单击属性面板上“链接”文本框右侧的文件夹图标,弹出“选择文件”对话框,选择“learnlanguage.htm”文件,在对话框“相对于”中选择“文档”,单击“确定”按钮关闭对话框,如图5-1-4所示。
默认为“文挡”完成上述步骤,属性面板相应各项设置如图5-1-5所示。
链接目标文件
方法二:将鼠标光标定位于页面中的文字“关于本站”后,选择主菜单“【插入】→【超级链接】”,弹出“超级链接”对话框,输入相应内容,如图5-1-6所示。
在“超级链接”对话框中,设置以下选项:
文本:显示在页面中的文字。
链接:所要链接的目标文档。
目标:为打开的窗口类型(详见本例最后一段)。
标题:为鼠标置于链接文字上方时所出现的提示。效果如图5-1-7所示。方法三:打开属性面板,选择“链接(L)”右边的“指向文件”图标“”,拖动该图标至站点目录下的“learnlanguage.htm”文件,即可自动生成链接。如图5-1-8所示。
“指向文件”图标
如果同时打开两个或以上编辑窗口,则只需将“指向文件”图标直接拖动至目标窗口的任意位置即可自动生成链接。如图5-1-9所示。“指向文件”图标指向目标窗口任意位置方法四:打开属性面板,在“链接(L)”
直接输入链接地址,如要链接到站点内的其他文档,输入目标文件的具体路径与文件名;要链接到站点以外的文档,则输入完整URL,而且包括所使用的协议。例如,选中“index.htm”文档中的“logo.gif”图片,打开属性面板,在“链接(L)”直接输入/index.asp,即可自动生成目标指向网站下的index.asp文档的链接。如图5-1-10所示。直接输入/index.asp
在默认情况下,被链接的文件在当前窗口或框架内打开。要使被链接的文档显示在其他窗口或新的窗口或框架内,则需设置属性面板中的“目标(R)”选项,如图5-1-11所示。目标选项“目标(R)”的各选项设置如下:
_blank。将链接的文档在一个新的、未命名的浏览器窗口中打开。
_parent。将链接的文档在该链接所在框架的父框架或父窗口中打开。如果包含链接的框架不是嵌套框架,则所链接的文档在整个浏览器窗口中打开。
_self。将链接的文档在链接所在的同一框架或窗口中打开,此目标为默认值,即不指定目标,则在同一框架或窗口打开文档。
_top。将链接的文档在整个浏览器窗口中打开,从而取代当前窗口的所有框架。l
5.1.3实例:创建电子邮件链接1、
实例创意电子邮件链接在网页中也经常可见,在网页中添加电子邮件的目的在于可以使网页的浏览者方便发送邮件,点击电子邮件链接即可自动打开MicrosoftOutlookExpress,并自动创建新邮件,在“收件人”栏自动添加电子邮件地址等。2、制作步骤(1)定义本书素材source目录下的文件夹5-1-3为本地站点目录。打开根目录下的about.htm文件,选择“【窗口】→【属性】”菜单命令,打开属性面板,如图5-1-12所示。(2)创建电子邮件链接在大多数情况下,创建电子邮件链接在属性面板中完成,也可以通过主菜单“【插入】→【电子邮件链接(L)】”来完成。我们分别以几种不同方式来完成电子邮件链接的创建。方法一:选中所要创建电子邮件的文本“echo@”,属性面板的“链接(L)”输入mailto:echo@即可,如图5-1-13所示。
直接输入mailto:echo@方法二:将鼠标光标定位于页面中要显示电子邮件的地方,选择主菜单“【插入】→【电子邮件链接(L)】”,弹出“电子邮件链接”对话框,输入相应内容后单击“确定”按钮,如图5-1-14所示。“电子邮件链接”对话框中,设置以下选项:文本。显示在页面中的文字,可以为Email地址或其它文字。E-mail。邮件地址。5.1.4实例:创建锚点链接
1、实例创意锚点即为一个文档中的某一个特定的位置的标记,通过首先创建锚点,可使某个超级链接链接到文档的某个锚点,方便文档之间的跳转。锚点通常放在文档的特定主题处或顶部。然后可以创建到这些锚点的链接,这些链接可快速将访问者带到指定位置。创建到锚点的链接的过程分为两步。首先,创建锚点,然后创建到该锚点的链接。2、制作步骤
(1)定义本书素材source目录下的文件夹5-1-4为本地站点目录。打开根目录下的traandwri.htm文件,选择“【窗口】→【属性】”菜单命令,打开属性面板。如图5-1-15所示(2)创建锚点将鼠标光标定位于页面中标题“翻译与写作”文字之后,选择主菜单“【插入】→【命名锚记(N)】”,弹出“命名锚记”对话框,输入“命名锚记返回顶部”文字后单击“确定”按钮,如图5-1-16所示。
创建锚点后,在锚点的插入处出现一个锚点标记,如图5-1-17所示。锚点标记注意:命名锚记名称只能包含字母和数字并且不能以数字开头。(3)创建到锚点的链接1)选中所打开的文档中的“返回顶部”文字;
2)拖动属性面板中“链接(L)”右边的“指向文件”图标“”至所创建的锚点标记即完成创建到该锚点的链接。如图5-1-18所示。“指向文件”图标锚点标记时,在“链接”处会出现该锚的名称。注意:1.创建到锚点的链接,会在锚点名称前加一个“#”号,表示后面为一个锚点的名称。2.若要创建到其他文档的锚点,只要在文档名后加“#锚点名称”即可。如要链接到abount.htm文档中一个名为aboutme的锚点,只需在链接中输入“about.htm#aboutme”即可。如图5-1-19所示。3.选中打开的文档中文本或图像,并拖动到所要链接的锚点,也同样可以创建到锚点的链接。
直接输入:about.htm#aboutme5.1.5实例:创建热区链接
1、实例创意
一张图片内可以创建包含多个链接,图像内不同的区域或文字都可以指向具体链接目标。图像图内创建链接的区域称为“热区”,热区与链接目标逐一对应,单击热区后,即可对链接目标进行跟踪、访问。热区的形状有三种:矩形、圆形与多边形,在DreamweaverMX2004的“设计视图”模式下,这些热区是可见的,但在WEB浏览内这些边框却是不可见的,因此有必要在图像地图内添加一些文本标识,为浏览者了解热点的确切位置提供帮助。2、制作步骤
1)定义本书素材source目录下的文件夹5-1-5为本地站点目录。打开根目录下的map.htm文件,选择“【窗口】→【属性】”菜单命令,打开属性面板。如图5-1-20所示。
选中文档中的图片,属性面板出现相应的各项设置。如图5-1-21所示。
选择“属性”面板中“地图(M)”下图标中的某一形状,按住鼠标左键在图片中相应位置拖动即可建立一个矩形的“热区”,在默认情况下,刚创建的热区的“链接(L)”为“#”,需要手动设置链接的目标网址,同时也可设置“目标(R)”及“替代(T)”。如图5-1-22所示。在“属性”面板中,设置以下选项:链接:链接的目标地址。目标:链接打开的窗口设置:_blank、_parent、_self、_top。替代:当图片无法显示时,在图片的位置用文字代替显示。创建热区链接后,在浏览器中打开map.htm文档预览其效果,如图5-1-23所示。
5.2编辑链接效果
5.2.1实例:自定义链接颜色
链接颜色可分为三种状态:链接颜色(Link)、访问过的链接颜色(Visited)、活动链接颜色(Active),通过CSS设置,链接还有第四种状态,即指向链接时的动态颜色(Hover),默认的文字链接样式都是带下划线的效果。在DreamweaverMX2004中允许用户自定义链接的颜色(如果通过CSS的设置还可以编辑各种链接的样式)。
1、实例创意
自定义简单的链接颜色。2、制作步骤
(1)定义本书素材source目录下的文件夹5-2-1为本地站点目录。(2)创建链接自定义链接颜色可以通过主菜单“【修改(M)】→【页面属性(P)…】”来完成。
打开根目录下的linkcolor.htm文件并选择主菜单“【修改(M)】→【页面属性(P)…】”打开“页面属性”对话框。如图5-2-1所示。
在“页面属性”对话框中,通过颜色拾取器或直接输入各颜色代码。如图5-2-2所示。
创建热区链接后,在浏览器中打开linkcolor.htm文档预览其效果,如图5-2-3所示。
5.2.2实例:同一网页中设置二种不同的链接
默认的文字链接样式都是带下划线的效果,通过对CSS样式的重新编辑,可以设计出多彩的文字链接效果。对链接样式的设计通过DreamweaverMX2004的样式编辑器完成。
1、实例创意
完成在同一网页中设计二种不同的链接样式,如图5-2-4所示。
2、制作步骤
(1)定义本书素材source目录下的文件夹5-2-2为本地站点目录。(2)自定义链接颜色打开根目录下的2linkcolor.htm文件,选择主菜单“【窗口(W)】→【CSS样式(Y)…】”,出现“设计”面板。如图5-2-5所示
单击“设计”面板中“新建CSS样式”的图标,弹出“新建CSS样式”对话框,如图5-2-6所示。
选择“选择器类型”中的“高级(ID、上下文选择器等)(A)”,并在“选择器”中选择“a:link”,在“定义在”选择“仅对该文档”,单击“确定”按钮,弹出“a:link的CSS样式定义”对话框,在“分类”中选择“类型”后,在”颜色(C)”中输入“#FF0000”。单击“确定”按钮退出对话框。如图5-2-7所示。选择“类型”输入颜色:#FF0000
同样,单击“设计”面板中“新建CSS样式”的图标,弹出“新建CSS样式”对话框。选择“选择器类型”中的“高级(ID、上下文选择器等)(A)”,并在“选择器”选择“a:visited”,单击“确定”按钮,弹出“a:visited的CSS样式定义”对话框,在“分类”中选择“类型”,在”颜色(C)”中输入“#00FF00”。单击“确定”按钮退出对话框。单击“设计”面板中“新建CSS样式”的图标,弹出“新建CSS样式”对话框。选择“选择器类型”中的“高级(ID、上下文选择器等)(A)”,并在选择器中选择“a:hover”,单击“确定”按钮,弹出“a:hover的CSS样式定义”对话框,在“分类”中选择“类型”,在”颜色(C)”中输入“#0000FF”。单击“确定”按钮退出对话框。
单击“设计”面板中“新建CSS样式”的图标,弹出“新建CSS样式”对话框。选择“选择器类型”中的“高级(ID、上下文选择器等)(A)”,并在选择器中选择“a:active”,单击“确定”按钮,弹出“a:active的CSS样式定义”对话框,在“分类”中选择“类型”,在”颜色(C)”中输入“#FFFF00”。单击“确定”按钮退出对话框。此时,已自定义超级链接的所有状态颜色:超级链接显示为红色(#FF0000),访问过的超级链接显示为绿色(#00FF00),指向超级链接显示为蓝色(#0000FF),活动超级链接为黄色(#FFFF00)。
凡是页面中的所有超级链接均按以上自定义的几种颜色显示。如图5-2-8所示。
通过CSS的设置,在页面还可以再定义不同的超级链接颜色。单击“设计”面板中“新建CSS样式”的图标,弹出“新建CSS样式”对话框。选择“选择器类型”中的“高级(ID、上下文选择器等)(A)”,并在选择器中输入“a.dbline:link”,单击“确定”按钮,弹出“a.dbline:link的CSS样式定义”对话框,在“分类”中选择“类型”,在”颜色(C)”中输入“#FF00FF”,在“装饰”中选择“无(N)”。单击“确定”按钮退出对话框。如图5-2-9所示。
单击“设计”面板中“新建CSS样式”的图标,弹出“新建CSS样式”对话框。选择“选择器类型”中的“高级(ID、上下文选择器等)(A)”,并在选择器中输入“a.dbline:visited”,单击“确定”按钮,弹出“a.dbline:visited的CSS样式定义”对话框,在“分类”中选择“类型”,在“颜色(C)”中输入“#FFFF00”,在“装饰”中选择“无(N)”。单击“确定”按钮退出对话框。
单击“设计”面板中“新建CSS样式”的图标,弹出“新建CSS样式”对话框。选择“选择器类型”中的“高级(ID、上下文选择器等)(A)”,并在选择器中输入“a.dbline:active”,单击“确定”按钮,弹出“a.dbline:active的CSS样式定义”对话框,在“分类”中选择“类型”,在”颜色(C)”中输入“##FFFF00”,在“装饰”中选择“无(N)”。单击“确定”按钮退出对话框。
单击“设计”面板中“新建CSS样式”的图标,弹出“新建CSS样式”对话框。选择“选择器类型”中的“使高级(ID、上下文选择器等)(A)”,并在选择器中输入“a.dbline:hover”,单击“确定”按钮,弹出“a.dbline:hover的CSS样式定义”对话框,在“分类”中选择“类型”,在”颜色(C)”中输入“#FF6600”,在“装饰”中选择“下划线(U)”、“上划线(O)”。单击“确定”按钮退出对话框。如图5-2-10所示
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 《美容院成本利润》课件
- 2023年广东高三春季高考英语试卷试题及答案
- 《病例讨论模板》课件
- 入伙协议书案例分析
- 音乐厅声学装修专业施工合同范本
- 游乐园照明氛围营造
- 服装行业招投标与采购台账
- 体检科服务满意度提升与改进办法
- 影视编导教师聘用合同范本
- 证券公司员工出勤与假期制度
- 精神科风险评估
- 林下经济可行性方案
- 江苏省南京市鼓楼区2023-2024学年七年级上学期期末英语试卷
- 三年级上册《数字编码》
- 绿色殡葬百科知识讲座
- 江苏省南京师范大学附属中学、天一中学、海安中学、海门中学四校2022-2023学年高三上学期12月联考物理试题(解析版)
- 三维可视化虚拟仿真培训演练系统建设方案
- 新课程关键词
- 手术后切口愈合不良查房
- 智能制造行业岗位需求分析
- 2023青岛幼儿师范高等专科学校教师招聘考试真题汇总
评论
0/150
提交评论