下载文档原格式
传智播客《HTML+CSS+JavaScript网页制作案例教程》教学设计课程名称：HTML+CSS+JavaScript网页制作案例教程授课年级：2015年级授课学期：2015学年第二学期教师姓名：某某老师1201 年月日课题名称第5章列表与超链接计划课时6课时内容分析通过第4章盒子模型的学习，已经很容易对网页做一个简单的结构划分。
但是一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间有一定的联系，就需要使用列表和超链接。
本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细讲解。
教学目标●掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块；●掌握超链接标记的使用，能够使用超链接定义网页元素；●掌握CSS伪类，会使用CSS伪类实现超链接特效；重点及措施教学重点：无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施教学难点：有序列表、定义列表、链接伪类。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。
教学过程第一课时（制作“精美电商悬浮框”，讲解无序列表、有序列表）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS盒子模型”的相关知识。
1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px，同时盒子有3px的边框，请问这个盒子的总宽度是多少？（）A、333pxB、366pxC、336pxD、363px答案：C●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和；●所以，盒子的总宽度= width（300px）+左内边距（30px）+左右边框宽度之和（3px*2） =336px；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
HTML5结合CSS的三种⽅法+结合JS的三种⽅法HTML5+CSS：HTML中应⽤CSS的三种⽅法⼀、内联内联样式通过style属性直接套进HTML中去。
⽰例代码1. <pstylepstyle="color:red">text</p>这将会是指定的段落变成红⾊。
我们的建议是，HTML应该是独⽴的、样式⾃由的⽂档，所以内联样式⽆论在什么情况下都应该尽量避免。
⼆、内部内部样式服务于整个当前页⾯。
在头标签head⾥⾯，样式标签style⾥包含当前页⾯的所有样式。
⽰例代码1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"2. "http://www.w/TR/xhtml1/DTD/xhtml1-strict.dtd">3. <html>4. <head>5. <title>CSSExample</title>6. <styletypestyletype="text/css">p{color:red;}a{color:blue;}</style>7. </head>8. <body>9. </body>10. </head>11. </html>这将使这个页⾯的所有段落都是红⾊的，所有的连接都是蓝⾊的。
与内联样式类似，同样不建议使⽤。
三、外部外部样式为整个⽹站的多个页⾯服务。
这是⼀个独⽴的CSS⽂档，简单的⼀个范例如下：⽰例代码1. p{color:red;}a{color:blue;}如果这个⽂档存为“web.css”的话，它可以这样跟HTML⽂档连接起来：⽰例代码1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"2. "http://www.w/TR/xhtml1/DTD/xhtml1-strict.dtd">3. <html>4. <head>5. <title>CSSExample</title>6. <linkrellinkrel="stylesheet"type="text/css"href="web.css"/>7. </head>8. <body>9. </body>10. </head>11. </html>12.保存HTML⽂档，现在已经把HTML和CSS连接起来了，在你的html中就可以运⽤你在css⽂件中定义的css标签了。
习题1. 在CSS语言中下列哪一项是"左边框"的语法？( A )A．border-left-width: <值>B．border-top-width: <值>C．border-left: <值>D．border-top-width: <值>2. 如何去掉文本超级链接的下划线？( B )A．a {text-decoration:no underline}B．a {underline:none}C．a {decoration:no underline}D．a {text-decoration:none}3. 下面（）是ID的样式规则定义。
( C )A. TR{clore:red;font-family:"隶书";font-size:24px;}B. .H2{color:red;font-family:"隶书";}C. #grass{color:green;font- family:"隶书"; font-size:24px;}D. P{background-color:#CCFF33;text-align:left;}4. 若要以加粗宋体、12号字显示“vbscript”以下用法中，正确的是( B )A.<b><font style='font-size:10px'2>vbscript</b></font>B.<b><font face=”宋体”style='font-size:10px'2>vbscript</font></b>C.<b><font size=“宋体”style='font-size:10px'2>vbscript</b></font>D.<b><font size=“宋体”fontstyle='font-size:10px'2>vbscript</b></font>5．以下有关样式表项的定义中，正确的是( A )A. H1{font-family:楷体_gb2312, text-aligh:center}B. H1{font-family=楷体_gb2312, text-aligh=center}C. H1{font-family:楷体_gb2312; text-aligh:center}D. H1{font-family=楷体_gb2312; text-aligh=center}6. 下列代码段是某页面的样式设置：<style TYPE="text/css">.blue { color:blue }.red { color:red }</style>现要求将页面中的第一个H1标题设置为红色，第一个段落设置为蓝色。
