下载文档原格式
《网页设计与制作》课程实验教学大纲课程性质：独立设课课程属性：专业基础实验课适用专业：信息管理、应用技术、软件技术、多媒体技术学时：总学时 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>。
总的来说，以上这些方法都可以实现页面跳转，选择合适的方法取决于具体的需求和情境。
无论使用哪种方法，都需要确保跳转的页面是存在且可访问的，同时也要考虑用户体验和页面的合理性。
希望以上回答能够满足你的需求。
html七种超链接用法HTML是一种标记语言，可以用于创建网页。
超链接是HTML中常用的元素之一，它可以用来在不同的页面之间创建链接。
在HTML中，有七种常见的超链接用法，如下：1. 文本链接：最常见的超链接用法是将文本转换为链接。
通过使用<a>标签，我们可以将文本包裹在其中，并在href属性中指定链接的目标页面。
例如，<ahref="目标页面的URL">链接文本</a>。
2. 图像链接：除了文本，我们还可以使用图片作为超链接的内容。
使用<img>标签来插入图像，并将其包裹在<a>标签中，设置href属性来指定链接的目标页面。
例如，<a href="目标页面的URL"><img src="图像的URL" alt="图像描述"></a>。
3. 锚点链接：锚点链接用来在同一页面内定位到特定的位置。
我们可以通过在目标位置使用<a>标签来创建锚点，然后在链接中使用#符号和锚点名称来指向特定位置。
例如，<a href="#锚点名称">链接文本</a>。
4. 下载链接：如果我们希望用户能够下载特定的文件，例如PDF、文档或音频文件，我们可以使用下载链接。
只需使用<a>标签将文本包裹在其中，并在href属性中指定文件的URL。
例如，<a href="文件的URL" download>下载链接文本</a>。
5. 邮箱链接：通过使用邮箱链接，我们可以在用户点击链接时自动打开默认的邮件客户端，并填充收件人的邮箱地址。
使用<a>标签将文本包裹在其中，并在href属性中指定邮件地址。
例如，<a href="mailto:收件人邮箱地址">链接文本</a>。
任务五、创建链接链接是网页最终的组成部分之一。
链接也叫超链接。
超链接是网页中最重要、最根本的元素之一。
超链接能够使多个孤立的网页之间产生一定的联系，从而使单独的网页形成一个有机的整体。
通过设置超链接可以控制链接元素的形式和颜色等的变化，实现在同一页面中不同位置的跳转、功能的激活等。
各个网页链接在一起后，才能真正构成一个网站。
5.1 认识超链接1、什么是超链接所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。
当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。
按照链接路径的不同，超链接可以分为以下3种。
（1）内部链接内部链接就是链接站点内部的文件，用户需要在“链接”文本框中输入文档的相对路径，一般使用“指向文件”和“浏览文件”的方式来创建，如图4-**所示。
图1内部链接（2）外部链接外部链接是相对于本地链接而言的，不同的是外部链接的链接目标文件不在站点内，而在远程的服务器上，所以只需在链接栏内输入要链接的网址就可以了，如图4-**所示。
图2外部链接（3）脚本链接脚本链接通过脚本来控制链接结果。
一般而言，其脚本语言为JavaScript。
常用的有javascript: window.close()、javascript: alert(“…”)等，如图4-**所示。
图3脚本链接按照使用对象的不同，超链接又可以分为以下6种。
（1）文本超链接建立一个文本超链接的方法非常简单，首先选中要建立超链接的文本，然后在“属性”面板的“链接”框中输入要跳转的目标网页的路径及名称即可。
（2）图像超链接图像超链接的创建方法和文本超链接的创建方法基本一致，选中图像，在“属性”面板中输入链接地址即可。
较大的图片中如果要实现多个链接可以使用“热点”帮助实现。
XXXX中等职业学校《网页制作》的课程标准一、课程的性质与任务（一）课程性质《网页制作》是我校计算机应用专业开设的一门专业必修课，是计算机类专业的一门实践环节课程，也可以作为其他相关专业的实践课程或选修课，它是一门操作性和实践性很强的职业技术课程。
本课程的主要内容为系统介绍网页编辑与制作软件AdobeDreamweaverCS3,通过这种有代表性的网页制作软件的使用，掌握网站设计的全过程，并能熟练地制作出有专业水准的网站。
（二）课程任务本门课程在专业教学计划中起着十分重要的作用，通过这门课程,学生可以掌握以下技能和知识：1.掌握网站的开发流程，如建站规划、效果图制作、建立站点、发布网站等相关知识。
2.掌握各种网页元素在DremweaverCS3中的使用。
例如，文本、表格、图像、超级链接、层、框架和表单等。
3.掌握HTML,理解各种标记的功能和用法。
4.掌握在DrenIWeaVerCS3中使用CSS控制网页元素的方法。
5.掌握在DrenIWeaVerCS3中使用JavaScript制作网页特效的基本方法。
6.能够解决一些网页设计中的常见问题。
（三）本课程的特点1.课程注重实际应用，即实践性强。
2.涉及的DremweaverCS3软件是目前网页制作工作中较为流行的软件，是“网页三剑客”之一，具有较强的实践性，学习难度不大。
3.突出理论联系实际，实作课时占总课时的50%以上，实际应用知识占课程总知识量的80%以上。
（四）与相关课程的衔接、配合、分工先修课程：“计算机应用基础”、“图形图像处理（FireWorkS或PhotoShop）"、"Flash动画制作”等。
二、课程目标本课程的基本目标是：使学生通过本课程的学习，掌握DreanIWeaVerCS3的使用方法，学会使用DreamweaverCS3制作Web网页的技术。
本课程学习结束后，学生应能根据实际需要自行设计静态网页，建立网站。
一、超信息概述在HTML中，超信息是指在不同网页间建立连接的一种方法。
通过超信息，用户可以在不同网页之间进行跳转，实现网页之间的互相引用。
超信息的标签由<a>标签组成，其中href属性指定了信息目标的URL。
二、超信息的基本格式1. 文本超信息文本超信息是指将一段文字作为超信息的内容，并通过点击文字来跳转到指定的目标网页。
```html<a href="xxx">点击跳转</a>```这段代码会在网页中显示为“点击跳转”，用户点击这段文字时将会跳转到xxx全球信息站。
2. 图片超信息图片超信息是指将图片作为超信息的内容，用户点击图片时将会跳转到指定的目标网页。
```html<a href="xxx"><img src="image.jpg" alt="图片超信息"></a>```这段代码会在网页中显示一个图片，并将该图片作为超信息，用户点击图片时将会跳转到xxx全球信息站。
三、超信息的高级格式1. 设置信息打开方式可以通过target属性来指定信息被点击后的打开方式，常用的取值包括_blank（在新窗口中打开）、_self（在当前窗口中打开）、_top （在顶层窗口中打开）等。
```html<a href="xxx" target="_blank">在新窗口中打开信息</a>```这段代码会将信息打开在新的浏览器窗口中。
2. 添加标题可以通过title属性为超信息添加描述信息，当用户将鼠标悬停在超信息上时将显示该描述信息。
```html<a href="xxx" title="这是一个超信息">鼠标悬停在我上面</a>```这段代码会在用户将鼠标悬停在超信息上时显示“这是一个超信息”文本。
HTML⽹页中设置按钮超链接+⽅法1：<a>标签<a class="btn" href="">当前页⾯打开百度</a><a class="btn" href="" target="_blank">新页⾯打开百度</a>⽅法2：<button>按钮<button class="btn" onclick="window.location.href=''">当前页⾯打开百度</button><button class="btn" onclick="window.open('')">新页⾯打开百度</button>优缺点对⽐：a标签的优点是写⽹址⽐较⽅便(需要打的字⽐较少~)，⾃带⼿型⿏标指针，没有⾃带背景，如果想改成从新页⾯打开只要加⼀条target="_blank"属性就好，缺点是这是⼀个假按钮，a标签很少指定事件的，提交表单不常⽤。
另外，如果想做的逼真，需要加的css样式会很多，⽽且每做⼀个这样的按钮都需要指定class，⽣产效率⽐较低。
button按钮本⾝不带⼿型指针，如果需要就要加cursor: pointer;这个样式，⽽且⾃带背景。
不想要的话需要设置样式。
另外从当前页⾯打开⽹页和新页⾯打开⽹页的代码是不⼀样的，如果要切换打开⽅式的话需要涉及到括号引号的更改，⼀两个还好，多了会很⿇烦。
⼀般如果需要提交表单什么的就⽤按钮，单纯的页⾯跳转就⽤a标签做个样式出来就好。
