Dreamweaver8系列DIV+CSS教程超链接伪类
Dreamweaver 8中文版网页制作第5章 创建超级链接
5.2.2
图像和图像热点超级链接
一、图像超级链接 用图像作为链接载体，这就是图像超级链接。 创建图像超级链接的方法是：首先选中图像，然后在 【属性】面板中设置链接地址和目标窗口。
5.2.2
图像和图像热点超级链接
二、图像热点 图像热点（或称图像热区、图像地图）实际上就是为 图像绘制一个或几个特殊区域，并为这些区域添加链接。 创建图像热点超级链接的方法是： （1）使用图像热点工具绘制热点区域。 （2）在【属性】面板中设置链接地址、目标窗口等。
5.1.2
超级链接的分类
根据源端点的不同，超级链接也可分为3种 类型。
文本超级链接：以文本作为超级链接载体。 图像超级链接：以图像作为超级链接载体。 表单超级链接：选择某个选项后会自动跳 转到目标端点，或需要单击相应按钮会自 动跳转到目标端点。
5.2 普通超级链接
本节主要内容： 文本超级链接及其状态 图像和图像热点超级链接 图像地图 电子邮件超级链接 锚记超级链接
5.3.3 脚本链接
创建JavaScript链接的方法是，首先选定文本或 图像，然后在【属性】面板的【链接】文本框中输入 “JavaScript:”，后面跟一些JavaScript代码或函数调 用即可。
5.3.3 脚本链接
经常用到的脚本链接JavaScript代码。
JavaScript:alert('字符串') JavaScript:history.go(1)：前进 JavaScript:history.go(-1)：后退 JavaScript:history.forward(1)：前进 JavaScript:history.back(1)：后退 JavaScript:history.print()：打印 JavaScript:window.external.AddFavorite(‘htt p://’,‘老虎工作室’)：收藏指 定的网页 JavaScript:window.close()：关闭窗口
Dreamweaver 8 超级链接和站点导航
• 锚记的命名规则 （1）锚记名称的第1个字符最好是英文字母，一般不要 以数字作为开头（如果服务器支持的话，锚记名称也可 以使用中文）。
（2）锚记名称区别英文字母的大小写。
（3）锚记名称中不能含有空格，也不能含有特殊字符。
网页设计与制作——《 Dreamweaver 8 教程》讲义
一、超级链接的创建：
（1）若要链接到当前文档中某个锚记，应输入“#锚记名”， 其中#为半角数字符号，且在#和锚记名之间不存在空格。 （2）若要链接到同一文件夹内其他文档中的某个锚记，应 输入“文档名#锚记名”。 （3）若要链接到父目录中文件的某个锚记，使用相对路径 就可以实现，即输入“../文件名#锚记名”。
（4）若要链接到某根目录下的文件中的某个锚记，需要使 用绝对路径，即输入“驱动器/文件名#锚记名”。
网页设计与制作——《 Dreamweaver 8 训教程》讲义
一、超级链接的创建：
1. 创建文本超级链接
• 在Dreamweaver中为文字添加超链接的方法有以下3种： （1）直接在【链接】文本框中输入链接目标。 （2）单击【链接】文本框右侧的文件夹图标 ，从弹出 的对话框中选择链接目标。 （3）将【链接】文本框右侧的【指向文件】图标 拖动 至【文件】面板中要链接的对象上，然后松开鼠标键。
一、超级链接的创建：
4. 使用锚记
• 创建锚记 单击【插入】工具栏【常用】类别中的【命名锚记】按 钮 ，或者选择【插入】|【命名锚记】命令，弹出【命 名锚记】对话框。在【锚记名称】文本框中输入锚记的 名称。
【命名锚记】对话框
网页设计与制作——《 Dreamweaver 8 教程》讲义
一、超级链接的创建：
网页设计与制作——《 Dreamweaver 8 教程》讲义
dreamweaver网页设计-超级连接
使用导航条
导航条是具有站点导航作用的一系列链接。
1、效果 2、设计 选择“插入”>“图像对象”>“导航条”命令。 单击“常用”子工具栏上的“图像”按钮右端的下拉按钮，从下拉列 表中选择“导航条”按钮。 打开“插入导航条”对话框 ，通过该对话框即可设置导航条。
Dreamweaver网页设计
之二
制作内部链接 制作外部链接 电子邮件的链接、空链接 锚点链接、图像映射、使用导航条
制作内部链接
内部链接是链接 ，在属性面板的“链接” 文本框中输入相对路径，或使用“指向文件”和“选择”文件的方法 均可以制作内部链接。
站点内部的文件
1、效果 内部链接位置：车型总汇 2、建立超链接的对象 文本、图象 3、建立超链接的目标 网页、图片、视频、音频、word、exel、ppt、程序等 4、设计
1、效果 电子邮件的链接位置：fly8008@ 2、建立超链接的对象 文本 3、建立超链接的目标
电子邮件
4、设计 选择“插入”>“电子邮件链接”命令。
空链接
空链接是
有超链接行为而无新页面产生的链接。
1、效果 空链接位置：首页 2、设计 创建空链接的操作方法如下： 在属性面板的“链接”文本框中输入“#”。
制作外部链接
外部链接是链接站点外部的链接。 1、效果 外部链接位置：搜狐 2、建立超链接的对象 文本、图象 3、建立超链接的目标 网页、图片、视频、音频、word、exel、ppt、程序等 4、设计 在属性面板上输入：/
电子邮件的链接
Dreamweaver8网页超链接教学设计
ｐａｔｒ ｎｄ ｐｐｉａｉｎ ｓ ｆｗａ ｅ ａ ｈ ａｒｅ．Ｗ ｉｈ ｔ ｅ ” ｂ ｌｎ ｓ ａ ｘ ｍｐ ｅ ｏ ｔ ｓｇ ｔｅ ｃ ｕ ｓ ａ ｅ ｏ ｓｕ ｎ ｓ ｔ ｎ ａ ａ ｌ ｔ ｏ ｔ ｒ ｓ ｔｅ ｃ ｒｉｒ ｅ ｃ ｏ ｔ ｈ ｗｅ ｉ ｋ ” ｓ ｅ ａ ｌ ．ｈ ｗ ｏ ｄｅｉｎ ｈ ｏ ｒｅ ｂ ｓ ｄ ｎ ｔｄｅ ｔ
３ 教 学策 略
本 课 内 容 的 学 习是 一 种 自我 需 求 下 的 获 取 ，所 以 关 键 在 于 学 习 方 法 、学 习 习 惯 的 培 养 。平 时 授 课 巾就
要 注 重 倡 导 学 生 自主 学 习 ，碰 到 困 难 要 想 办 法 ，通 过
Ｔｅ ｃ ｉ ｓｇ ｏ ｈｅ Ｄ ｒ ａ ｗｅ ｖ ｒ Ｗ ｅ ｎ ａ ｈ ｎｇ Ｄｅ ｉ ｎ ｆ ｔ ｅ ｍ ａｅ ８ ｂ Ｌｉ ｋｓ
ＧＵＡＮ Ｌｌ ｉ ｉ
（ ｉ ｎｊ ｎ ｉ ｌＨ ｓａ ｄｙ ＆ Ｖｅｅ ｎ ｒ ｏ ａｉｎ ｌＣ ｌ ｇ，Ｈｅｌｎ ｊ ｎ １０ １ Ｈｅｌ ｇｉ ｇ Ａｎｍａ ｕ ｂ ｎ ｒ ｏ ａ ｔｒ ａ Ｖ ｃｔ ａ ｏｌ ｅ ｉ ｙ ｏ ｅ ｉ ｇｉ ｇ ５ １ ） ｏ ａ １
完 成 对 知 识 点 的学 习 与 掌 握 ．增 强 主动 学 习 、探 究 的
意识 。
信 息 链 接 实 现 的 方 法 ， 让 基 础 一 般 的 学 生 能 对
Ｄ ｅ ｍｗ ａ ｅ８ 中创 建 超 链 接 的 几 种 方 法 有 个 全 面 了 ｒａ ｅ ｖ ｒ
解 ，能掌 握 其 巾的 部 分 内容 ，学 会 学 习 方 法 ，为 以 后
２１ ０ １年 第 ２期
Ｄｒａ ｍｗｅ ｖ ｒ ｅ ａ ｅ８网 页 超 链 接 教 学 设 计
Dreamweaver网页设计之建立超链接
<head> <title>链接颜色的变化</title>
</head> <body text=blue alink=red vlink=yellow link=green>
注意<a href=1.html>颜色</a>的变化 </body> </html>
烟台南山学院-----计算机应用技术学院
第四章
建立超链接
2019/12/25
第4章 建立超链接
4.1 从HTML的角度理解超链接
4.2 使用Dreamweaver 8设置超链接 4.3 实践与练习：为文字添加超链接
4.4 实践与练习：鼠标经过图像
4.5
实践与练习：导航条
小结
2019/12/25
2
第4章 建立超链接
与超链接相关的一个概念是定位点（也称锚 点），它指明了网页中一个确定的位置，以便超 链接跳转时定位。
2019/12/25
5
4.1从HTML的角度理解超链接
4.1.1 理解路径的概念 1、超级链接及路径的概念
超级链接是指站点内不同网页之间、站点与Web之间的链接 关系，它可以使站点内的网页成为有机的整体，还能够使不 同站点之间建立联系。例如，当浏览者单击已经链接的文字 或图像时，链接目标将显示在浏览器上，并且根据目标的类 型来打开或运行。
/index.asp
绝对路径指的是精确位置，如果目标文件被移到其 他位置，则超级链接无效。如果用户要创建的是外 部链接，即创建不同网站文档之间的链接，则必须 使用绝对路径。
2019/12/25
Dreamweaver 8中文版网页制作-教学大纲第9章 使用CSS和Div标签-电子教案
教研室：
课程名称：Dreamweaver 8中文版网页制作
任课教师：
XXXX学校教务处制
中等职业学校教案
第9次课讲授4学时实践4学时
章节
第9章使用CSS和Div标签
讲授主
要内容
1.CSS样式的类型和属性。
2.创建和应用CSS样式的方法。
3.插入Div标签的方法。
4.使用CSS样式与Div标签进行网页布局的方法。
重点
难点
创建和应用CSS样式的方法
使用CSS样式与Div标签进行网页布局的方法
要求掌握
的知识点
【CSS样式】面板、CSS样式的类型、定义CSS样式的方法、CSS的【类型】等属性对话框、创建超级链接的高级CSS样式、修改CSS样式、删除CSS样式、应用CSS样式、附加样式表、重命名样式、插入Div标签、使用CSS样式与Div标签进行网页布局
1、教学思路
2、教学手段
1、教师演示教学案例。
2、通过PPT课件讲授基本知识。
作业：一～三
主要
参考资料
备注
Dreamweaver8系列DIV+CSS教程网页标准布局实例教程(二)
div+css网页标准布局实例教程（二）五、布局页面——头部和导航有了上边的基础，下面的任务就是要利用html和css制作完成一个完整的网页了。
先从头部开始，第三小节时我们已经把整体框架给搭建好了，就像盖房子一样，整体结构已经出来了，下面就需要填砖分割空间了。
先分析下头部：分为两部分，一个是logo靠左侧显示，一个是搜索靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。
另外还有很多种实现方法，比如logo用h1标签，搜索用span，或者把log o做为背景图片也是可以的，不管采用哪种方法，要根据页面的需求选用一种最合理的方法。
如果要在logo加上链接的话，那么就不能用背景图片的方法了。
<div id="header"><div id="logo">此处显示id "logo" 的内容</div><div id="search">此处显示id "search" 的内容</div></div>先在header里插入以上两块元素。
然后分别插入相应的内容，在logo里插入我们事先切割好的logo图片，在search里插入一个表单，一个文本框和一个按钮，插入后如下：<div id="header"><div id="logo"><img src="images/logo.gif" width="181" height="45" /></div><div id="search"><form id="form1" name="form1" method="post" action="">搜索产品<input type="text" name="textfield" id="textfield" /><input type="submit" name="button" id="button" value="查询" /></form></div></div>接下来定义css吧，在ps里测量，头部的高度是71px，logo距顶部18px，搜索产品距顶部30px，下面在css里把这些参数都给定义上，看显示的效果和效果图中的效果是不是一样呢？#logo { float:left; margin-top:18px;}#search { float:right; margin-top:30px;}这两项的位置已经差不多了。
DIV+CSS教程——第五天 超链接伪类
第五天超链接伪类文章出处：标准之路(/div_css/906.shtml)编辑：杨雨晨思今天我们开始学习《十天学会web标准(div+css)》超链接伪类，包含以下内容和知识点：▪链接的四种样式▪将链接转换为块状▪用css制作按钮▪首字下沉一、超链接的四种样式本来计划这节课放到第九章中讲解，但下边的章节都涉及到了，所以提前来学习一下，上节课讲解的内容比较多，这节课就少讲些，只要理解了伪类，就轻松多了。
超链接可以说是网页发展史上一个伟大的发明，它使得许多页面相互链接从而构成一个网站。
说到超链接，它涉及到一个新的概念：伪类，我们先看下超链接的四种样式：a:link {color: #FF0000} /* 未访问的链接*/a:visited {color: #00FF00} /* 已访问的链接*/a:hover {color: #FF00FF} /* 鼠标移动到链接上*/a:active {color: #0000FF} /* 选定的链接*/以上分别定义了超链接未访问时的链接样式，已访问的链接样式，鼠标移上时链接样式和选定的链接样式。
之所以称之为伪类，也就是说它不是一个真实的类，正常的类是以点开始，后边跟一个名称，而它是以a开始后边跟个冒号，再跟个状态限定字符；比如第三个a:hover的样式，只有当鼠标移动到该链接上时它才生效，而a:visited只对已访问过的链接生效。
伪类使得用户体验大大提高，比如我们可以设置鼠标移上时改变颜色或下划线等属性来告知用户这个是可以点击的，设置已访问过的链接的颜色变灰暗或加删除线告知用户这个链接的内容已访问过了。
下面来做一个默认状态下是蓝色，鼠标放上是红色加下划线，选定（按下）时为紫色，已访问过为灰色加删除线的实例来讲解一下。
首先插入两个带超链接的内容：<p><a href="#">这里是链接</a></p><p><a href="10.html">这里也是链接</a></p>从上图中可以看出，插入的超链接默认是蓝色来下划线的，这是标签的默认样式所致，下来我们在css样式中定义设置完a:link的样式后，下面分别设置a:visited ，a:hover ，a:active的样式链接在默认状态下是内联元素，转换为块级元素后可以获得更大的点击区域，可以设置宽度和高度，将链接转换为块状，只需增加一个display:block的css属性即可。
AdobeDreamweaver教程第4章超级链接精品PPT课件
（3）站点根目录相对路径：所有路径都开始于当前站点的根目录。
站点的根目录相对路径都以“/”开始，如/images/loge.gif
javascript:window.close()
设为首页
<a onclick="this.style.behavior='url(#default#hom epage)';this.setHomePage('');" href="#">设为 首页</a>
创建远程登陆链接
在链接地址输入：telnet://站点地址，如 telnet://
javascript:history.back(-1)
javascript:history.go(-1)
2.3创建打印链接：
javascript:window.print()
2.4创建收藏链接：
javascript:window.
external.AddFavorite(‘网址’,’名称’)
2.5关闭窗口：
下载、邮件链接和锚点
1 下载文件 2 下载软件 3 邮件链接 mailto:?subject=咨询问题&cc= &bcc=
下载、邮件链接和锚点
4. 创建命名锚记链接
1．创建命名锚记
2．创建到该命名锚记的链接
空链接和脚本链接
1 空链接 #(或javascript:) 2 脚本链接
2.1创建简单的脚本链接：javascript:alert(‘弹出的内容’) 2.2创建前进和后退链接：javascript:history.go(1)
dreamweaver8网页设计 第六章 使用超链接和行为
1．“弹出信息”行为 弹出信息”
有时候，我们在打开某个网页或单击网页中的某 个元素时可以看到弹出信息框。应用“弹出信息” 行为可以轻松实现该功能，本节我们就来看看 “弹出信息”行为的应用。
2．“设置状态栏文本”行为 设置状态栏文本”
所谓“状态栏文本”，就是在网页运行时浏览器 下方的状态栏中显示的文本。好多个人网站都设 置了状态栏文本，以表达网站主人的心声。本节 我们来看看如何为网页设置状态栏文本。
6.1.3 设置图片链接和下载链接
所谓图片链接，就是在单击网页中的某个小图片 时在新窗口中打开一幅大图片；下载链接是指单 击某个超链接时会打开一个“文件下载”对话框 （或自动启动下载工具），通过在该对话框中单 击“打开”或“保存”按钮，可以打开或下载文 件。
6.1.4 设置电子邮件链接
很多网站上留有电子邮件地址，单击该地址可 打开“Outlook Express”的“新邮件”窗口，这 是一种特殊类型的链接，又叫电子邮件链接。
综合实例2 综合实例2—为“SM”网站主页添加伴随窗 SM” 口
本例将在综合实例1中制作好的“index.html”网页 文档的基础上，为网站主页添加伴随窗口。
“行为”面板是应用行为所不可缺少的工具，本 节来认识一下“行为”面板。选择“窗口”>“行 为”菜单，或按【Shift+F4】组合键，即可打开 “行为”面板。
6.2.3 应用行为
如果要对某个对象应用行为，需要先选中该对象， 然后单击“行为”面板上方的“添加行为”按钮 ， 在打开的行为列表中选择动作，并在打开的窗口 中设置效果，最后指定设定的动作在什么情况下 发生，也就是指定事件。
3．“打开浏览器窗口”行为 打开浏览器窗口”
应用“打开浏览器窗口”行为，可实现单击目标 文字或图片打开固定大小窗口的效果。许多站点 都使用这种方式来弹出重要的通知、广告信息等 页面。
Div+CSS网站布局应用教程第9章 使用CSS样式设置超链接效果
9.5.1
列宽度column-width属性
column-width属性可以定义多列布局中每一列的宽度，可以单独使用， 也可以和其他多列布局属性组合使用。 column-width属性的语法格式如下。 column-width: [<length> | auto];
9.5.2
列数column-count属性
9.2.4
:visited伪类
这种超链接伪类用于设置超链接对象在其链接地址已被访问过后的样式 属性。页面中每一个链接被访问过之后在浏览器内部都会做一个特定的标记， 这个标记能够被CSS所识别，:visited伪类就是能够针对浏览器检测已经被访 问过的链接进行样式设置。通过:visited伪类样式设置，能够设置访问过的链 接呈现为另外一种颜色，或删除线的效果。定义网页过期时间或用户清空历 史记录将影响该伪类的作用，对于无href属性的<a>标签，该伪类不发生作 用。
9.2.1
:link伪类
这种超链接伪类用于设置<a>对象在没有被访问时的样式。在很多的超 链接应用中，可能会直接定义<a>标签的CSS样式。
9.2.2
:hover伪类
这种超链接伪类用来设置对象在其鼠标悬停时的样式表属性。该状态是非 常实用的状态之一，当鼠标移动到链接对象上时，改变其颜色或是改变下划线 状态，这些都可以通过:hover状态控制实现。对于没有href属性的<a>标签，此 伪类不发生作用。
9.2.3
:active伪类
这种超链接伪类用于设置链接对象在被用户激活（在被单击与释放之 间发生的事件）时的样式。实际应用中，本状态很少使用，对于没有href属 性的<a>标签，此伪类不发生作用。在CSS样式中该伪类可以应用于任何 对象，并且:active状态可以和:link以及:visited状态同时发生。
Dreamweaver制作超链接方法步骤
Dreamweaver制作超链接方法步骤Dreamweaver制作超链接方法步骤超链接大家都知道吧，就是你点到的话会直接弹出另一个链接的页面。
这是很有用的推广手段之一。
今天教大家如何制作超链接的方法。
本教程主要讲的有：页面之间的超连接，邮件地址的超连接，制作图片上的超链接。
有需要的过来学习下。
【页面之间的超级连接】在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。
1、在网页中选中要做超级链接的文字或者图片。
2、在属性面板中单击黄色文件夹图标，在弹出的'对话框里选中相应的网页文件就完成了。
做好超级链接属性面板出现链接文件显示。
(如下图)3、按F12预览网页。
在浏览器里光标移到超级链接的地方就会变成手型。
〖提示〗你也可以手工在链接输入框中输入地址。
给图片加上超级链接的方法和文字完全相同。
如果超级链接指向的不是一个网页文件。
而是其他文件例如zip、exe文件等等，单击链接的时候就会下载文件。
超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。
例如，在链接框里写上/那么，单击链接就可以跳转到老小孩网站。
【邮件地址的超级连接】在网页制作中，还经常看到这样的一些超级链接。
单击了以后，会弹出邮件发送程序，联系人的地址也已经填写好了。
这也是一种超级链接。
制作方法是：在编辑状态下，先选定要链接的图片或文字(比如：欢迎您来信赐教!)，在插入栏点或点插入菜单选“电子邮件链接”弹出如下对话框，填入E-Mail地址即可。
提示：还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件地址”。
(如下图)创建完成后，保存页面，按F12预览网页效果。
【制作图片上的超级链接】注意，我们这里所说的图片上的超级链接是指在一张图片上实现多个局部区域指向不同的网页链接。
比如一张中国地图的图片，单击了不同的省跳转到不同的网页。
可点的区域就是热区。
为了演示制作效果下面的中国地图我加了一些链接，你可以用鼠标测试。
Dreamweaver8系列DIV+CSS教程CSS表单设计
CSS表单设计css表单设计，包含以下内容和知识点：▪改变文本框和文本域样式▪用图片美化按钮▪改变下拉列表样式▪用label标签提升用户体验一、改变文本框和文本域样式如果前边几章学习的比较扎实的话，本节教程就相当容易了。
下边先说一下文本框，文本框和文本域都是可以用css进行美化的。
比如改变边框精细，颜色，添加背景色、背景图像等。
请看下边的实例：.text1 { border:1px solid #f60; color:#03C;}.text2 { border:2px solid #390; width:200px; height:24px; font-size:16px; font-weight: bold; line-height:1.6;}.text3 { border:2px solid #C3C; height:20px; background:url(icon9.gif) right 3px no-re peat;}.text4 { border:2px solid #F60; width:150px; height:29px;font-size:16px; line-height:1. 6; background:url(bg_9.gif) 0 0 no-repeat;}这四个样式表分别对应第2、3、4、5行表单，第一行是文本框的默认样式；第二行为设置边框和字体颜色的样式；第三行为设置边框、宽度、高度、字体大小、行高的样式；第四行设置边框和增加背景色和背景图片；第五行为增加一个gif动画的背景图片，看起来是不是生动许多，具体步骤不再赘述。
下面我们看一下文本域的样式设置：.area { border:1px solid #F90; overflow:auto; background:#fff url(bg_9_1.gif) right bot tom no-repeat; width:99%; height:100px;}上图中第一个为默认的文本域样式，第二个为设置边框、宽度为百分比、高度和景图片。
通过Dreamweaver CS3学习HTML+DIV+CSS 第6章 网页超链接
超链接包含页面间和页面内的链接.页面间的链接使网 站中各个独立的页面链接成为一个整体,方便浏览者在 网站中查找信息;页面内部的链接使页面内部的信息组 织更为合理,方便浏览者快捷定位所需信息.
6.1.1 设置页面间链接
如果网页是独立存在的,那么访问将会变得异常困难. 通过设置超链接,就可以解决这个问题.设置超链接的 具体步骤如下:
无链接效果
【超级链接】对话框
6.1.1 设置页面间链接
按F12键预览网页,效果如图
设置链接效果
链接结果效果
6.1.2 设置页面内链接
如果一个页面中有很多内容,那么查找需要的内容就会 很费力.用户可以通过使用超链接来解决这个问题.利 用超链接可以制作页面内的目录.具体步骤如下:
输入文字效果
【命名锚记】对话框
6.2 使用邮件链接
对比使用简单设置与高级设置弹出的邮件软件效果图, 可看出只有【收件人】文本框中设置相同,其他的设置 都不同.
高级设置效果
邮件软件界面
6.3 使用水平线
本节内容与超链接没有联系,但也是网页设计中一个常用的元素. 为了使网页结构更为清晰,使用水平线把两个内容隔开.具体的步 骤如下:
6.3 使用水平线
按F12键进行预览,效果如图
水平线效果
修改效果
设置颜色效果
6.4 专家总结
本章介绍了超链接,邮件链接和水平线的设置方式.超 链接是网页中非常重要的元素.要是没有超链接,万维 网便如同一盘散沙.邮件的链接方便浏览者反馈意见. 水平线使网页的结构更清晰.学习完本章后,读者须多 加练习,以便熟练掌握本章内容.
第6章 网页超链接
超链接是包含在网页中,用于链接到其他网页的元素. 它把两个或两个以上的网页关联起来.WWW(万维网) 就是通过大量网页的超链接而形成的.如果没有超链接, 也就没有万维网.此外,超链接除了可以把页面链接起 来,还可以把页面中的内容也链接起来.本章将详细介 绍网页超链接的设置面内链接
网页中使用超链接
第五章网页中使用超超是的魅力所在。
为了把Internet上众多分散的的网页联系起来,构成一个有机的整体,就是在网页上加入。
通过点击网页上的,才能真正实现网络无国界,我们才可以在信息海洋中尽情遨游。
Macromedia Dreamweaver 8提供多种创建超文本的方法,可创建到文档、图像、多媒体文件或下载软件的,可以建立到文档内任意位置的任何文本或图像〔包括标题列表、表、层或框中的文本或图像〕的。
本章主要介绍利用Dresmweaver 创建的编辑各种超的方法。
通过本章的学习,读者应该掌握以下内容；●认识超●掌握利用Dreamweaver创建各种超的方法●掌握利用Dreamweaver编辑各种超的方法●管理超下的方法5.1超基础5．1．1超的种类超为畅游网络提供了方便,它是网页制作中使用比较多的一种技术。
超是用预先准备的好文本、按钮、图像等对象与其他对象建立的一种,也就是源端和目标端点之间的建立一种。
源端点是超的超始端点,也称为源锚；目标端点是的像,也签名为目标锚。
超按源端点的划分,可分为超文本和非超文本两类。
超文本的源锚文本下方有下划线,而非超文本是用除文本之外的其他对象构建的,其源锚可以是图像、表格、列表、表单、多媒体等对象。
超按目标端点的划分,可分为外部、内部、电子、局部、脚本等。
5．1．2文档路径类型掌握从作为起点的文档到作为目标文档之间的文件路径,对于创建至关重要。
文档路径类型有绝对路径和相对路径两种。
1.绝对路径绝对路径是包括服务器协议〔本例中为〕的完全路径,比发如"洪恩在线——电脑乐园",完全路径为; honggen /pe/index..htm.如果要当前站点之外的文档,就必须使用绝对路径。
每个网页都有一个惟一的地址,称为统一资源定位器<URL>。
绝对路径提供文档的完整URL,包括使用的协议<对于网页通常是>。
例如, macromedia /support/dreamweaver/contents.html 就是一个绝对路径。
网页设计使用Dreamweaver创建超级链接
网页设计使用Dreamweaver创建超级链接超级链接是在网站中最常用的元素之一，它可以将不同的网页链接在一起，为用户提供更好的网站浏览体验。
在Dreamweaver中创建超级链接非常容易，这里将向你介绍如何在Dreamweaver中创建超级链接。
在Dreamweaver中打开或新建一个页面首先，我们需要在Dreamweaver中打开或新建一个页面。
如果你已经有了一个页面，只需要在Dreamweaver中打开它。
如果你需要新建一个页面，选择“文件”-> “新建” -> “HTML”或“XHTML”文档。
选择一个要链接的文本在打开或新建页面后，我们需要选择一个要链接的文本。
这可以是一个单词、一句话、一段文字或图片。
创建一个超级链接要创建一个超级链接，选择要链接的文本，然后单击工具栏中的“超级链接”图标。
这将打开“超级链接”对话框。
在这个对话框中，你可以设置链接的URL、目标、标题和样式。
在链接URL中，输入你想要链接到的网页地址，这可以是一个外部链接，也可以是你当前网站中的一个页面。
在目标中，你可以选择链接在哪个窗口或帧中打开，默认是在当前窗口中打开。
在标题中，你可以输入链接的文字。
在样式中，你可以选择链接的样式，例如，链接的颜色、字体等。
测试超级链接完成后，单击“确定”按钮，Dreamweaver将在你选定的文本上自动创建超级链接。
现在，你可以测试链接是否可以正常工作。
在Dreamweaver中，你可以选择“文件”-> “预览在浏览器中”来预览你的网页。
在浏览器中，单击链接，确保它可以正常打开。
创建内部链接如果你需要创建内部链接，这意味着你需要在你的网站中链接到另一个网页，这个网页可能是你自己站点中的一个页面。
在Dreamweaver中，这非常容易。
首先，选择你要链接的文本，然后在“超级链接”对话框中选择你要链接的页面。
插入电子邮件链接在Dreamweaver中，你还可以创建一个电子邮件链接。
Dreamweaver如何添加超链接
Dreamweaver如何添加超链接Dreamweaver如何添加超链接超链接是每个网站不看缺少的。
很多新手在使Dreamweaver的时候不知道怎么添加超级链接!以下是店铺为大家搜索整理的Dreamweaver如何添加超链接，希望能给大家带来帮助!1、需要添加超链接的文字，选择“插入”菜单中的“超级链接”选项。
2、“超级链接”对话框中，点击链接后的“文件夹”图标。
3、择想要链接的网页文件后点击“确定”按钮。
4、点击“确定”按钮后就可以成功添加超链接了。
拓展：Dreamweaver的使用优点不生成冗余代码。
可视化的网页编辑器，都要把使用者的操作转换成html代码。
一般的编辑器都会生成大量的冗余代码，给网页以后的修改带来了极大的不方便，同时还增加了网页文件的大小。
Dreamweaver则在使用时完全不生成冗余代码，避免了诸多麻烦。
而且，通过设置，还可用Dreamweaver清除掉网页文件原有的冗余代码。
方便的代码编辑。
可视化编辑和源代码编辑都有其长处和短处。
有时候，直接用源代码编辑会很有效。
Dreamweaver提供了html快速编辑器和自建的html编辑器，能方便自如的在可视化编辑状态和源代码编辑状态间切换。
强大的动态页面支持。
Dreamweaver的Behavior能在使用者不懂java script的情况下，往网页中加入丰富的动态效果。
Dreamweaver还可精确的'对层进行定位，再加上timeline功能，可生成动感十足的动态层效果。
操作简便。
首先，Dreamweaver提供的历史面板、html样式、模版、库等功能避免了重复劳动，使用者不必重复输入相同的内容、格式。
其次，Dreamweaver能直接往页面中插入Flash、Shockwave等插件，经过设置后还可直接调用相应的软件对这些插件进行编辑。
最后，Dreamweaver与Fireworks集成紧密，可直接调用Fireworks 对页面的图像进行修改、优化。
Web标准：五、超链接伪类
Web标准：五、超链接伪类
Web标准：五、超链接伪类
知识点：
1.链接的四种样式
2.将链接转换为块状
3.⽤css制作按钮
4.⾸字下沉
1）链接的四种样式
超链接有四个伪类，分别是：
a:link 未访问的链接
a:visited 已访问的链接
a:hover ⿏标移动到链接上
a:active 选定的链接
之所以称之为伪类，也就是说他不是⼀个真实的类，正常的类是以点开始，后⾯跟⼀个名称，⽽它是a开始后⾯跟⼀个冒号，再跟个状态限定字符。
text-decoration在HTML语⾔中对⽂本进⾏修饰，例如加下划线等。
取值：
none：默认值，⽆装饰
link：闪烁
underline：下划线
line-through：贯穿线
overline：上划线
说明：四个伪类必须按照固定顺序写，否则有些不会⽣效，顺序按照L(link)OV(visited)E H(hover)A(active)TE原则。
2）将链接转换为块级元素
链接在默认状态下是内联元素，转换为块级元素后可以获得更⼤的点击区域，可以设置⾼度和宽度，将链接转换为块级元素，只需增加⼀个display:block的css的属性即可。
3）⽤css制作按钮
这⾥的⽤css制作按钮，即在将链接转换为块级元素的基础上，给块级元素增加⼀个背景图⽚，这⾥我是⽤的本地的两个图⽚。
4）⾸字下沉
⾸字下沉需要应⽤伪元素:first-letter
注意：IE6如果想兼容first-letter，需要在选择符与样式花括号之间留有空格，否则IE6不能实现。
即first-letter和{}中间留有空格。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
超链接伪类
web标准(div+css)》超链接伪类，包含以下内容和知识点：
▪链接的四种样式
▪将链接转换为块状
▪用css制作按钮
▪首字下沉
一、超链接的四种样式
本来计划这节课放到第九章中讲解，但下边的章节都涉及到了，所以提前来学习一下，上节课讲解的内容比较多，这节课就少讲些，只要理解了伪类，就轻松多了。
超链接可以说是网页发展史上一个伟大的发明，它使得许多页面相互链接从而构成一个网站。
说到超链接，它涉及到一个新的概念：伪类，我们先看下超链接的四种样式：
a:link {color: #FF0000} /* 未访问的链接*/
a:visited {color: #00FF00} /* 已访问的链接*/
a:hover {color: #FF00FF} /* 鼠标移动到链接上*/
a:active {color: #0000FF} /* 选定的链接*/
以上分别定义了超链接未访问时的链接样式，已访问的链接样式，鼠标移上时链接样式和选定的链接样式。
之所以称之为伪类，也就是说它不是一个真实的类，正常的类是以点开始，后边跟一个名称，而它是以a开始后边跟个冒号，再跟个状态限定字符；比如第三个a:hover的样式，只有当鼠标移动到该链接上时它才生效，而a:visited只对已访问过的链接生效。
伪类使得用户体验大大提高，比如我们可以设置鼠标移上时改变颜色或下划线等属性来告知用户这个是可以点击的，设置已访问过的链接的颜色变灰暗或加删除线告知用户这个链接的内容已访问过了。
下面来做一个默认状态下是蓝色，鼠标放上是红色加下划线，选定（按下）时为紫色，已访问过为灰色加删除线的实例来讲解一下。
首先插入两个带超链接的内容：
<p><a href="#">这里是链接</a></p>
<p><a href="10.html">这里也是链接</a></p>
从上图中可以看出，插入的超链接默认是蓝色来下划线的，这是标签的默认样式所致，下来我们在css样式中定义
设置完a:link的样式后，下面分别设置a:visited ，a:hover ，a:active的样式
链接在默认状态下是内联元素，转换为块级元素后可以获得更大的点击区域，可以设置宽度和高度，将链接转换为块状，只需增加一个display:block的css属性即可。
a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center;
b ackground: #CCC; }
这样设置的结果是全局a都执行这个样式显示，下面设置一下鼠标划过时的状态，其它几种状态设置方法相同
三、用css制作按钮
学会了把超链接转换为块级元素，想制作个css按钮简直太简单了，只需在上一步的基础上增加一个按钮的背景图片即可实现。
下面以制作淘宝网首页的免费注册按钮来讲解，设置最常用的默认样式和鼠标移上时的样式，如下图
首先需要准备默认状态和鼠标划过状态的图片如下：
修改之前的html如下，然后重新定义css样式：
<p><a href="#">免费注册</a></p>
<!DOCTYPE html PUBLIC "-//W3C//
<html xmlns="/
<head>
<meta http-equiv="Content-Type"
<style type="text/css">
a { display: block; height: 34p
提示：可以先修改部分代码后再运行
本例中运用到了背景图片，有关背景图片的详细运用将在下一节中讲解，你也可以查看css样式表手册，首先了解下或者学习如下视频教程/div_css/895.shtml
四、首字下沉
首字下沉是css伪类上的又一个运用，它可以直接通过css样式表向某个选择器中的文本首字母添加特殊的样式，而不需要把首字添加一个标签或通过程序来实现，今天以制作word里的首字下沉为例来讲解，应用如下伪元素：
:first-letter
在页面中添加如下一段内容，只用设置样式就可以实现首字下沉了：
<p>标准之路[]提供DIV+CSS教程,DIV+CSS视频教程,web2.0标准,DIV+CSS布局入门教程,网页布局实例,css布局实例,div+css模板,div+css实例解析,网站重构，网页代码,水晶图标,幻灯广告图片.教程适合初学者循序渐进学习!</p> 为了便于观察效果，我们设置p的样式如下：
p { width: 400px; line-height: 1.5; font-size: 14px; }
然后设置p:first-letter的样式。