下载文档原格式
《网页设计与制作》课程实验教学大纲课程性质：独立设课课程属性：专业基础实验课适用专业：信息管理、应用技术、软件技术、多媒体技术学时：总学时 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属性即可。
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;
}。
超链接标签的语法超链接标签的语法格式是：```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”来快速跳转到页面的不同部分。
一、单选题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. 将链接的目标文件载入该链接所在的同一框架或窗口中，链接的“目标”属性应设置成（）。
备课人王文辉上课时间章及内容第六单元网页设计与制作节及内容HTML语言之超链接教学目标1、了解如何确定链接对象2、掌握各类链接目标的设置3、掌握电子邮件链接的制作教学重点1、href属性的设置2、target属性的设置及理解3、电子邮件的制作教学难点1、target属性的分类及设置备课内容备注【导入】HTML文档之所以被称为是超文本，主要一点原因就是化能够设置文本间的跳转，也就是所谓的超链接，今天就来学习如何在网页中设置各类超链接。
【授新课】一、超链接标记格式：<a>……</a>作用：从当前位置的文本、图像或热点区域等指向一个其他目标，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
常用属性：属性作用Href href为超文本引用，它的值为一个URL，是目标资源的有效地址。
如果资源放在自己的服务器上，可以写相对路径。
否则，应写绝对路径。
title 当鼠标指向时，显示的信息。
target设定执行链接结果所要显示的窗口。
常用值为：_blank、_self。
例：<A href=地址target=打开窗口方式 title=提示信息>热点</A>根据链接对象的不同，可分为以下几种：1、热点标记：通过一个词、句或图片，可从此处转到另一个链接资源（目标资源）格式：<A href=地址 name=字符串 target=打开窗口方式>热点</A>说明：A、href为超文本引用，它的值为一个URL，是目标资源的有效地址。
如果资源放在自己的服务器上，可以写相对路径。
否则，应写绝对路。
B、target设定执行链接结果所要显示的窗口。
常用值为：_blank、_self。
2、创建指向其它页面的链接：格式：<A href="目标文件的路径/目标文件名">热点</A>说明：根据目标文件与当前文件的目录关系，有4种写法：A、链接到同一目录内的网页文件：格式：<A href="目标文件名">热点</A>B、链接到下一级目录中的网页文件：格式：<A href=“子目录名/目标文件名”>热点</A>C、链接到上一级目录中的网页文件：格式：<A href="../目标文件名">热点</A>D、链接到同级目录中的网页文件：格式：<A href="../子目录名/目标文件名">热点</A>3、创建指向本页中的链接：A、在当前页面内实现超链接的标记：格式：<A href="#记号名">热点</A>B、书签就是用<A>标记对该文本作一个记号，书签名在<A>的name属性中定义： <A name="记号名">目标文本附近的字符串</A>4、链接电子邮件和下载文件：电子邮件格式： <A href=“mailto:e_mail地址?subject=主题>热点</A> 下载文件格式： <A href=“压缩文件名”>热点</A>5、用图片作为超链接格式：<A href=地址><img src=图片文件名></A>二、实例制作【教学反思】【作业布置】1、完成习题集相关作业。
html跳转页面的几种方法HTML中有几种方法可以实现页面跳转。
其中最常见的包括使用超链接（<a>标签）、重定向（<meta>标签）、JavaScript跳转和表单提交跳转。
首先是超链接（<a>标签）方法，这是最常见的一种页面跳转方式。
通过设置<a>标签的href属性来指定跳转的目标页面的URL，用户点击链接后即可跳转至目标页面。
例如，<a href="目标页面的URL">点击跳转</a>。
其次是重定向（<meta>标签）方法，可以使用<meta>标签中的http-equiv属性来实现页面的自动跳转。
例如，<meta http-equiv="refresh" content="3;url=目标页面的URL">表示在3秒后自动跳转至目标页面。
另外一种方法是使用JavaScript来实现页面跳转，可以通过window.location.href属性来指定跳转的目标页面URL。
例如，window.location.href = "目标页面的URL";。
最后一种方法是通过表单提交来实现页面跳转，可以在表单中设置action属性为目标页面的URL，用户提交表单后即可跳转至目标页面。
例如，<form action="目标页面的URL"method="post">...</form>。
总的来说，以上这些方法都可以实现页面跳转，选择合适的方法取决于具体的需求和情境。
无论使用哪种方法，都需要确保跳转的页面是存在且可访问的，同时也要考虑用户体验和页面的合理性。
希望以上回答能够满足你的需求。
