html超链接样式(四种不同状态)设置示例
网页设计与制作_实验大纲
《网页设计与制作》课程实验教学大纲课程性质：独立设课课程属性：专业基础实验课适用专业：信息管理、应用技术、软件技术、多媒体技术学时：总学时 96 实验学时 32开出时间：一年级二学期综合性、设计性实验项目数：4 学时先修课程：计算机基础一、课程简介《网页设计与制作》课程是计算机专业的一门必修专业课程。
它涵盖Dreamweaver网页设计、Flash动画制作、Photoshop图像处理、动态网站等多项相关知识，通过开发一个网站，全面介绍WEB站点设计的基本操作技术和使用技巧，为后续《XML语言》、《动态网页制作》等课程打下一个坚实的基础。
通过本课程的学习，使学生掌握运用Dreamweaver进行网站的导入、规划、管理、发布的相关技术及网页制作的操作技能；能够熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体、等设计出多窗口网页、动态网页；能够利用Photoshop设计网页界面，处理图像；能够运用flash制作与网页相关的小动画。
从而能够承担网站制作的规划、设计以及制作；能够有清晰思路和动手能力解决各种各样的实际问题；并具有与客户沟通、与团队成员协作的能力。
从而培养学生的开发网站的能力和职业素质。
二、实验教学目的及要求通过上机实践，让学生掌握网页设计与制作的基本知识和基本技能，能较熟练地在Dreamweaver平台下合理设计网页并对站点进行规划、管理、发布，从而为下一阶段学习动态网页技术和高级Web程序设计打下良好的理论和实践基础。
三、实验项目设置表（注：“实验类型”：指演示性、验证性、设计性、综合性、研究性等）四、考核方法与评分标准上机部分考核采取上机表现成绩结合实验报告成绩的方式进行，分数组成为：上机成绩 =上机表现成绩（50%）+实验报告成绩（50% ）。
上机部分的成绩在本课程总成绩中占有的分值为20。
上机表现成绩基于上机实验出勤情况及上机过程的表现，每次上机对应1分。
实验报告成绩基于每个项目对应的实验报告完成情况，一个项目对应1分。
第五讲 超链接伪类
第五讲超链接伪类今天我们开始学习超链接伪类，包含以下内容和知识点：链接的四种样式将链接转换为块状用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 的样式生成的源代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">a:link { color: #06F; text-decoration: none; }a:visited { color: #999; text-decoration: line-through; }a:hover { color: #F00; text-decoration: underline; }a:active { color: #F0F; }</style></head><body><p><a href="#">这里是链接</a></p><p><a href="10.html">这里也是链接</a></p></body></html>注意：四种状态的顺序一定不能颠倒，否则有些不生效二、将链接转换为块级元素链接在默认状态下是内联元素，转换为块级元素后可以获得更大的点击区域，可以设置宽度和高度，将链接转换为块状，只需增加一个display:block的css属性即可。
单元5 CSS3基本样式设计
border-right-style border-right-width border-right-color
border-left-style border-left-width border-left-color
示例： h1{ border-bottom-style: solid; border-bottom-color: #000; border-bottom-width: 1px;
常用的样式有 dotted（点线）
solid（实线）
border-style属性
border-style属性取值可以有一到四个
border-style: dotted solid double dashed；
上
右
下
左
border-style: dotted solid double；
上
右和左 下
</head> <body>
<h1>勤学好问</h1> </body> </html>
文本样式属性
文字的颜色以及文本格式的样式效果
color text-align text-decoration text-indent line-height
文本样式属性
color属性用于设置文字的颜色
常用颜色值 1. CSS颜色规范预定义的颜色名称，例如red，blue，green等。 2. 十六进制颜色代码：#RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色），
字体样式属性
font-style属性用于规定斜体文本 <!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>字体样式</title> <style type="text/css"> p{font-style: italic;} </style>
Html语言——超级链接
编码 %3B %2F %3F %3A %40 %3D %26 %3C
7
School of Applied Technology Soochow University
URL的保留字符和不安全字符 的保留字符和不安全字符
字符 > “ ＃ : % { } |
2011-3-21
描述 大于号 双引号 井号 冒号 百分号 左大括号 又大括号 竖线
注意：一般除了字母、数字和“ 注意：一般除了字母、数字和“$,-,_,.,+,!,*,’,()外，其他 外 所有字符都应该使用编码” 所有字符都应该使用编码”
2011-3-21 School of Applied Technology Soochow University 9
2 建立指向其他页面的链接 其格式为： 其格式为： <a href=”目标文件的路径／目 目标文件的路径／ 目标文件的路径 标 文 件 名 .html”> 热点文本 </a>
热点文本
5） 创建指向本页中的链接 要在当前页面内实现超链接，需要定义两个标记： 要在当前页面内实现超链接，需要定义两个标记：一个为超链接标 另一个为书签标记。超链接标记的格式为： 记，另一个为书签标记。超链接标记的格式为： <a href=”#记号名”> 热点文本<／a> 记号名” 热点文本 ／ 记号名 即单击热点文本，将跳转到“记号名”开始的文本。 即单击热点文本，将跳转到“记号名”开始的文本。 书签就是用<a>标记对该文本做一个记号。若有多个链接的书签名， <a>标记对该文本做一个记号 书签就是用 <a> 标记对该文本做一个记号 。 若有多个链接的书签名 ， 书签名在<a> name属性中定义 <a>的 属性中定义。 书签名在<a>的name属性中定义。 格式为： 格式为： <a name=”记号名”> 目标文本附近的字符串 <／a> 记号名” 记号名 ／
html---伪类选择器
html---伪类选择器
1.:first-child: 伪类选择器，选取其⽗元素的第⼀个⼦元素的元素
2.:last-child：伪类选择器，选取其作为⽗元素的最后⼀个⼦元素
3.:nth-child(n）：伪类选择器，选其作为⽗元素的第n个⼦元素的元素。
4.：::before:伪元素选择器，所有⼦元素的最前⾯添加⼀个伪元素。
5，::after:伪类选择器，所有⼦类的最后添加⼀个伪元素
6. ：hover
伪类选择器：通常是指超链接的伪类。
超链接是有默认样式的。
：未访问前蓝⾊带下划线。
⿏标滑过，⿏标样式变成⼿状。
⿏标按下（激活时）红⾊，⿏标松开（访问后）紫⾊。
超链接有：未访问，滑过，激活，访问后四种状态。
伪类指的就是某⼀个标记的不同状态的标记。
爱恨准则： LoVe HAte
a：link --> 访问前
a：visited --> 访问后
a：hover --> ⿏标滑过
a：active --> 激活
使⽤单冒号来表⽰伪类。
hover这个伪类也适⽤于其他标记。
伪类样式的定义，必须按照爱恨准则的顺序，如果有需要定义的话
：hover使⽤的频率最⾼。
案例：经常⽤于清楚浮动：
clear::after{
content:"",(编写内容)；
clear:both;
display:black;
width:0;
}。
html5-超链接
Html基础 超链接
创建超链接 在HTML中创建超链接非常简单，只需用<a></a>标记 环绕需要被链接的对象即可，其基本语法格式如下：
<a href="跳转目标" target="目标窗口的弹出方式">文本 或图像</a>
在上面的语法中，<a>标记是一个行内标记，用于定 义超链接，href和target为其常用属性，下面对它们进 行具体地解释。
关于下列代码片段的说法中，正确的是（）。
<HR size= "5" color="#0000FF" width="50%"> A.size是指水平线的长度
B.size 是指水平线的宽度
C.width 是指水平线的宽度 D.width是指水平线的高度
在HTML中，下面（
7
✎
练习
春夏秋冬四季轮换案例小练习
考查知识点： 图像标记 超链接
Html基础 锚点链接
锚点链接
通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：
使用“<a href=”#id名“>链接文本</a>”创建链接文 本。 使用相应的id名标注跳转目标的位置。
2019/3/3
9
A. B.
C.
D.
）不属于HTML文档的基本组成部分。 <STYLE></STYTLE> <BODY></BODY> <HTML></HTML> <HEAD></HEAD>
超链接标签的语法
超链接标签的语法超链接标签的语法格式是：```html<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>```其中，`href` 属性用于指定连接目标的URL 地址，这是超链接的必须属性，当为标签应用 `href` 属性时，它就具有了超链接的功能。
`target` 属性用于指定链接页面的打开方式，其中 `_self` 为默认值，`_blank` 为在新窗口中打开方式。
超链接可以分为以下几种类型：1. 外部链接：例如 `<a href="2. 内部链接：网站页面之间的相互链接，直接链接内部页面名称即可，例如`<a href="">首页</a>`。
3. 空链接：如果当时没有确定链接目标时，可以使用空链接，例如 `<ahref="">首页</a>`。
4. 下载链接：如果 `href` 里面地址是一个文件或者压缩包，会下载这个文件，例如 `<a href="">下载文件</a>`。
此外，还可以使用锚点链接来在同一页面内进行定位，例如：```html<a href="锚点1">目录1</a><a href="锚点2">目录2</a><h2 id="锚点1">内容1</h2><h2 id="锚点2">内容2</h2>```这样就可以通过点击“目录1”和“目录2”来快速跳转到页面的不同部分。
Dreamweaver网页设计复习题
一、单选题1.下面关于设计网站结构的说法错误的是（）。
A. 按照模块功能的不同分别创建网页，将相关的网页放在一个文件夹中。
B. 必要时应建立子文件夹。
C. 尽量将图像和动画文件放在一个文件夹中。
D. “本地文件”和“远端站点”最好不要使用相同的结构。
2. 下面制作其它子页面的说法不正确的是（）。
A. 各页面的风格保持一致很重要。
B. 我们可以使用模板来保持网页的风格一致。
C. 在Dreamweaver 8.0中，没有模板的功能，需要安装插件。
D. 使用模板可以制作不同内容却风格一致的网页。
3. 以下关于网页文件命名的说法错误的是（）。
A.使用字母和数字，不要使用特殊字符。
B.建议使用长文件名或中文文件名以便更清楚易懂。
C.用字母作为文件名的开头，不要使用数字。
D.使用下划线或破折号来模拟分隔单词的空格。
4. 如果要使图像在缩放时不失真，在图像显示原始大小时，按下（）键，拖动图像右下方的控制点，可以按比例调整图像大小。
A. CtrlB. ShiftC. AltD. Shift+Alt5. 在网页中连续输入空格的方法是（）。
A．连续按空格B．按下Ctrl键中再连续按空格C．转换到中文的全角状态下连续按空格键D．按下Shift键再连续按空格键6. 网页可以支持的图像格式有（）。
A．.gif B. .bmp C. .psp D. .jieg7. 在Dreamweaver 8.0中，下面关于定义超级链接的说法中错误的是（）。
A．可以给文字定义超级链接B．也可以给图形定义超级链接C．只能使用默认的超级链接颜色，不可更改D．链接、已访问过的链接、当前访问的链接可设为不同的颜色8. 链接到同一网页的超链接，又称为（）。
A．绝对超链接B．相对超链接C．邮件超链接D．锚点超链接9. 下面关于绝对地址与相对地址的说法错误的是（）。
A. 在HTML文档中插入图像其实只是写入一个图像链接的地址，而不是真的把图像插入到文档中B. 使用相对地址时，图像的链接起点是此HTML文档所在的文件夹C. 使用相对地址时，图像的位置是相对于Web的根目录D. 如果要经常进行改动，推荐使用绝对地址10. 将链接的目标文件载入该链接所在的同一框架或窗口中，链接的“目标”属性应设置成（）。