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属性即可。
- 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的样式。