《HTML+CSS网页设计与布局》教案.docx

《HTML+CSS网页设计与布局》教案
《HTML+CSS网页设计与布局》教案

编辑整理：

尊敬的读者朋友们：
这里是精品文档编辑中心，本文档内容是由我和我的同事精心编辑整理后发布的，发布之前我们对文中内容进行仔细校对，但是难免会有疏漏的地方，但是任然希望（《HTML+CSS网页设计与布局》教案）的内容能够给您的工作和学习带来便利。同时也真诚的希望收到您的建议和反馈，这将是我们进步的源泉，前进的动力。
本文可编辑可修改，如果觉得对您有帮助请收藏以便随时查阅，最后祝您生活愉快 业绩进步，以下为《HTML+CSS网页设计与布局》教案的全部内容。

《HTML+CSS网页设计与布局》课程教案
授课教师： 授课班级: 地点： 周课时： 5 课时
章节
内容
网页设计基础知识
Dreamweaver软件介绍及其基础操作
HTML基础知识及常用标记
教学
目标
1) 使学生了解网页设计的相关基础知识；
2) 使学生熟悉Dreamweaver软件界面的基本操作方法。
重点
难点
1) 了解网页设计相关概念和网页的类型；
2) 熟练掌握Dreamweaver软件创建和管理站点的方法。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
一、 引入
1、 相互认识，提出与本学科相关的知识，介绍本门课程情况、教学内容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种学习氛围，尊重同学，互帮互学,真正达到学以致用；
2、 提出问题：上过网吧？有谁自学过网页设计？听说过HTML或者CSS这两个概念吗？

二、 告知学生课堂任务
本次课所学习的主要内容是HTML相关基础知识和Dreamweaver软件基础操作;
三、 逐步演示讲解分析教学内容
1、 网站和网页的区别:
（1）网页是Internet基本元素;

（2）网站由网页组成；
2、 静态网页和动态网页:
静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静态网页的后缀名通常为.htm、.html、.shtml、.xml.
动态网页：许多人认为网页会动就是动态网页，这是个错误的观点，在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢了。真正的动态网页是指实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页.也就是说，它是返回到了客户端上的网页。例如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了。
静态网页的特点：
(1）内容相对稳定，容易被搜索引擎检索到；
(2）没有数据库支持,在网站制作和维护方面工作量大；
（3）交互性差，在功能方面有很大的限制。
动态网页的特点:
（1）以数据库技术为基础，可大大降低网站维护的工作量;
（2)可实现更多的功能，如用户注册、新闻发布、在线留言等；
（3）不利于使用搜索引擎进行网站推广。
3、 常见网页类型：形象页、主页、栏目页、内页、新闻详细页等;
4、 网页设计原则：
（1）了解客户需求
（2）遵循Web标准
(3）运用形式美法则
5、 网页设计流程：
（1）手绘效果图:确定网页主题内容和风格
（2）设计效果图：搜集、整合设计所需素材
（3）版面编辑：网页的制作与实现
（4）网页美化：动画设计，网页测试和发布
6、 网页设计的主要软件:
（1）Photoshop
（2)Dweamveawer
（3）Flash
(4)Firworks
7、 HTML基础知识:
（1）HTML概念：Hyper Text Markup Language 超文本标识语言；
（2）HTML文档的编写方法：用记事本手工直接编写、使用可视化HTML编辑器Dreamweaver、由Web 服务器动态生成；
（3）网页文件命名：首页文件名默认为：index.htm 或 index。html;
（4)HTML 文件结构：

e〉

HTML 文件的正文

〈/HTML〉
(5）用编辑器手工编写第一张网页；
8、 学生实训及辅导；
9、 Dreamweaver软件界面介绍：
（1）软件面板组成及基本操作方法
(2）软件首选参数设置
10、 Dreamweaver站点创建：
站点-〉新建站点->设置站点名称->设置站点默认图像文件夹.
11、 学生实训操作:Dreamweaver站点创建与设置；
12、 Dreamweaver创建第一个网页：
（1) 名称：index.html
（2) 设置标题、输入文本、输入特殊字符
（3）页面属性设置
（4）预览网页
13、 学生实训及辅导;
14、 HTML常用标记：
（1)标题标记:、粗体、〈i〉斜体〈/i〉
(5）删除线与下划线：〈s>删除线、〈u>下划线
15、 学生实训及辅导；
16、 字体标记：
(1）字体大小：〈font size=”1”>字体大小〈/font>
（2）字体颜色:字体颜色主题文字〈/h＃〉
（4）物理字体：
…，将字符设置成粗体.
…〈/I>,将字符设置成斜体.
〈U〉…，给字符增加下划线。
…，将字符设置成上标字体。
……〈/EM>强调文字。
〈STRONG>……〈/CODE>显示编程代码。
〈SAMP〉………缩小文字。
〈BIG〉…
约20分钟
约20分钟
约20分钟
约30分钟
约20分钟
约30分钟
约20分钟
约20分钟
约40分钟
学生理解
学生熟记
学生实践
学生实践
学生实践
学生实践
学生实践
总结
后记

《HTML+CSS网页设计与布局》课程教案
授课教师: 授课班级： 地点： 周课时： 5 课时
章节
内容
文字布局
插入图像
超级链接
教学
目标
3) 使学生熟练掌握HTML常用标记的基本使用方法；
4) 使学生掌握HTML常用标记各种属性的含义和设置方法.
重点
难点
3) 掌握各种HTML常用标记的基本使用方法；
4) 熟记各种HTML常用标记的含义。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
六、 引入
3、 回顾上周所学内容：上周主要介绍了网页设计和HTML相关基础知识及Dreamweaver软件基础操作，重点介绍了HTML基础知识及常用标记；
4、 提出问题：网页中文字如何布局？如何在网页中插入图像？如何运用超级链接？

七、 告知学生课堂任务
本次课所学习的主要内容是HTML文字布局和插入图像、超级链接的标记应用.
八、 逐步演示讲解分析教学内容
19、 换行控制:文字一居中〈/center〉
22、 设置段落:〈p>段落一p>文本
28、 计算机输出格式：
代码样式小型固定宽度字体显示的文本
〈kbd〉代码样式固定宽度字体渲染
代码样式斜体字渲染
31、 图像无法显示时的提示信息:
32、 控制图像的大小:

37、 文本与图像对齐：
44、 邮箱地址链接：

45、 相对路径：
相对路径是指这个文件在所在的位置与其他文件或文件夹的关系；
46、 绝对路径：
HTML绝对路径(absolute path）指带域名的文件的完整路径。
47、 学生实训及辅导；
九、 课外作业
第6章上机实践。

十、 课堂小结
本次课主要内容:
1、HTML文字布局；
2、HTML插入图像;
3、HTML超级链接。
约10分钟
约30分钟
约30分钟
约40分钟
约20分钟
约20分钟
约30分钟
约30分钟
约20分钟
约30分钟
约30分钟
约30分钟
学生理解
学生实践
学生实践
学生实践
学生实践
总结
后记

《HTML+CSS网页设计与布局》课程教案
授课教师： 授课班级： 地点： 周课时： 5 课时
章节
内容
表单的使用
插入表格
教学
目标
5) 使学生熟练掌握HTML常用标记的基本使用方法;
6) 使学生掌握HTML常用标记各种属性的含义和设置方法.
重点
难点
5) 掌握各种HTML常用标记的基本使用方法；
6) 熟记各种HTML常用标记的含义。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
十一、 引入
5、 回顾上周所学内容：上周主要介绍了HTML文字布局和插入图像的基本方法，重点介绍了超级链接的标记应用;
6、 提出问题:什么是表单？常见的表单有哪些?如何在网页中使用表格?

十二、 告知学生课堂任务
本次课所学习的主要内容是HTML表单和表格的标记应用。
十三、 逐步演示讲解分析教学内容
48、 表单基本语法:〈form>〈/form〉、属性action和method
49、 文本框：password”>
51、 单选框:〈input type=”radio”〉
52、 复选框:〈input type=”checkbox” 〉
53、 按钮设置：〈input type=”submit" value=”按钮提交”〉
54、 学生实训及辅导；
55、 上周课外作业点评；
56、 下拉表:
〈select〉
<！—设置下拉表选项--〉
〈option>选项一〈/option>
〈option>选项二选项三〈/option〉
绝对路径
57、 文本域：<!—</p><p style='padding:5px 0px;'>20、文本域内容—->〈/textarea〉
58、 表单应用实例讲解；
59、 学生实训及辅导；
60、 表格基本语法：
<table></table>
〈tr〉标签对表示表行
〈th>标签对表示表头
〈td>标签对表示表元
61、 跨多行表元：Rowspan
62、 跨多列表元:colspan
63、 表格内设置文字对齐:
对齐语法用align表示，后面接的值是left、center和right，分别代表向左、居中和向右对齐复选框
64、 表格在网页中对齐:<table align=#〉</table>；
65、 学生实训及辅导；
66、 表格应用实例讲解；
6</p><p style='padding:5px 0px;'>21、7、 学生实训及辅导;
十四、 课外作业
第8章上机实践.

十五、 课堂小结
本次课主要内容：
1、表单的使用;
2、插入表格；
3、表格应用实例；
约10分钟
约30分钟
约40分钟
约30分钟
约20分钟
约20分钟
约40分钟
约30分钟
约40分钟
约20分钟
约40分钟
学生理解
学生实践
学生实践
学生实践
学生实践
总结
后记

《HTML+CSS网页设计与布局》课程教案
授课教师： 授课班级： 地点： 周课时： 5 课时
章节
内容
网页框架</p><p style='padding:5px 0px;'>22、
对象移动属性
多媒体对象应用
教学
目标
7) 使学生熟练掌握HTML常用标记的基本使用方法；
8) 使学生掌握HTML常用标记各种属性的含义和设置方法。
重点
难点
7) 掌握各种HTML常用标记的基本使用方法；
8) 熟记各种HTML常用标记的含义。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
十六、 引入
7、 回顾上周所学内容:上周主要介绍了HTML表单和表格的标记应用方法，重点介绍了表单的应用实例;
8、 提出问题：框架网页如何创建？如何使网页中的对象移动？如何在网</p><p style='padding:5px 0px;'>23、页中插入Flash、影片、声音？

十七、 告知学生课堂任务
本次课所学习的主要内容是HTML网页框架和对象移动属性、多媒体对象的标记应用.
十八、 逐步演示讲解分析教学内容
68、 框架的基本语法:
<frameset>〈/frameset>
<frame〉〈/frame>
〈frameset cols=”25%,50％，25%”>

</frameset>
69、 框架垂直分栏：
垂直分栏是在〈frameset〉中用cols表示跨多列表元，colspan
70、 框架水平分栏：
水平分栏的语法用rows表示
71、 设置不可调节框架大小:noresi</p><p style='padding:5px 0px;'>24、ze
72、 学生实训及辅导；
73、 上周课外作业点评；
74、 浏览器不支持框架：〈noframes>〈/noframes〉
75、 设置框架边框：<frameset frameborder=＃〉
76、 设置滚动条：
设置滚动条在是<frame〉里面，用scrolling属性
77、 导航框架：
导航框架是在网页框架的〈frame>中加入name属性，表示该〈frame>的名称，然后通过用〈a〉标记的链接，并用target的属性值等于〈frame〉的名称；
78、 内联框架：
内联框架存在<body>〈/body〉的单个HTML文件中，可以链接其他网页并显示它,</p><p style='padding:5px 0px;'>25、即在一个页面中嵌入一个框架窗口来显示另一个页面的内容，叫做浮动框架也称内联框架；
79、 学生实训及辅导；
80、 框架应用实例讲解；
81、 学生实训及辅导；
82、 移动属性基本语法：<marquee〉要移动的对象</marquee〉
83、 文字的移动设置:〈marquee direction=#〉文字〈/marquee>
84、 图片移动的设置：<marquee〉<img src=”仙境。gif”〉〈/marquee〉
85、 文本移动的方向：〈marquee direction=up〉向上移动〈/marquee〉
86、 文本的滚动循环;
87、 文本的移动速度：</p><p style='height:0px;padding:0;overflow:hidden'>26、scrollamount设置移动的速度
88、 学生实训及辅导；
89、 网页多媒体的基本语法：<embed src=url loop="true|false”>
90、 隐藏面板的设置；
91、 对齐方式：
align=top、bottom、center、baseline、 left、right、texttop、middle、 absmiddle、absbottom
92、 学生实训及辅导;
93、 移动对象应用实例讲解；
94、 多媒体对象应用实例讲解；
95、 学生实训及辅导；
十九、 课外作业
第11章上机实践.

二十、 课堂小结
本次课主要内容：
</p><p style='height:0px;padding:0;overflow:hidden'>27、1、网页框架；
2、对象移动属性；
3、多媒体对象应用。
约10分钟
约20分钟
约30分钟
约30分钟
约10分钟
约20分钟
约20分钟
约40分钟
约20分钟
约20分钟
约10分钟
约20分钟
约30分钟
约40分钟
学生理解
学生实践
学生实践
学生实践
学生实践
学生实践
学生实践
总结
后记

《HTML+CSS网页设计与布局》课程教案
授课教师： 授课班级： 地点: 周课时： 5 课时
章节
内容
CSS基础知识
CSS字体设置
教学
目标</p><p style='height:0px;padding:0;overflow:hidden'>28、
9) 使学生熟练掌握CSS常用样式的创建方法；
10) 使学生掌握CSS常用样式各种属性的含义和设置方法。
重点
难点
9) 掌握各种CSS常用样式的基本使用方法；
10) 熟记各种CSS常用样式的含义。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
二十一、 引入
9、 回顾上周所学内容:上周主要介绍了HTML网页框架和多媒体对象标记，重点介绍了HTML对象移动属性设置方法;
10、 提出问题：什么是CSS？CSS有什么用？如何创建和使用CSS？

二十二、 告知学生课堂任务
</p><p style='height:0px;padding:0;overflow:hidden'>29、本次课所学习的主要内容是CSS基础知识和CSS字体样式设置方法和技巧。
二十三、 逐步演示讲解分析教学内容
96、 CSS相关基础知识；
97、 CSS文件链接方式：
（1)内联定义：内联定义即是在对象的标记内，使用对象的style属性定义适用其的样式表属性。
链入内部CSS： <style type="text/css"〉/*这里写CSS内容*/〈/style>
（2)链接外部CSS：
<link type="text/css” rel="stylesheet" src="style.css”>
98、 CSS在浏览器兼容性：
现在浏览器市场的主流浏览器主要是Intern</p><p style='height:0px;padding:0;overflow:hidden'>30、et Explorer（简称IE）和 Mozilla Firefox（简称FF）,网页中的CSS因两个浏览器支持不同，所以对同一代码会显示不同的效果，那么为了达到网页的风格，有时要注意哪个浏览器要写的CSS属性支持如何。如果某一属性只有一个浏览器支持，那么另一浏览器对这属性代码就不起作用。
99、 CSS选择符：
CSS选择符就是CSS样式的名字，选择符的命名规则可以使用英文字母的大写与小写、数字、连字号、下划线、冒号、句号,CSS选择符只能以字母开头，选择符在CSS中可分成多种，在本小节中只介绍常用的CSS选择符：HTML标签选择符、ID选择符和CLASS（类选择符)选择符。
10</p><p style='height:0px;padding:0;overflow:hidden'>31、0、 CSS伪类和伪元素：伪类:伪类选择符是基于一组预定义性质的选择符，HTML元素可以占有这些预定义性质。实际上这些性质与class属性的功能是相同的,因此在CSS术语中，它们被称作伪类.在对应这些伪类的标记中，不存在真正的class属性,相反，它们代表应用到这些元素的某些方面,或者是相对于该元素的浏览器用户界面的状态。
101、 CSS常用单位：
em：(em，元素的字体的高度)。
ex:（x—height，字母 ”x” 的高度）。
px：（像素，相对于屏幕的分辨率)。
绝对长度单位：
in:（英寸，1英寸=2。54厘米）.
cm：（厘米,1厘米=10毫米)。
mm:（毫米</p><p style='height:0px;padding:0;overflow:hidden'>32、1米=1000毫米）。
pt：（点,1点=1/72英寸）。
pc：(帕，1帕=12点）.
102、 上周课外作业点评；
103、 学生实训及辅导；
104、 字体和字体颜色：font : font-style ｜| font—variant ｜｜ font—weight ｜| font-size || line-height |｜ font-family
105、 字体大小：Font-size，后面可接的参数值有：
xx—small|x-small｜small｜medium|large｜x-large｜xx—large｜larger｜smaller|length
106、 字</p><p style='height:0px;padding:0;overflow:hidden'>33、体重量：
Font-weight:normal｜bold|bolder|lighter|100|200｜300|400｜500｜600｜700｜800|900
107、 行距：line-height:＃；
108、 字体类型：Font-family：fontname；
109、 行距：line—height：＃；
110、 间距与间隔：
word-spacing：normal|长度单位、letter—spacing:normal｜length
111、 字体应用实例讲解；
112、 学生实训及辅导;
二十四、 课外作业
第16章上机实践。

二十五、 课堂小结
本次课</p><p style='height:0px;padding:0;overflow:hidden'>34、主要内容：
1、CSS基础知识；
2、CSS文件链接方式;
3、CSS字体设置。
约10分钟
约40分钟
约40分钟
约60分钟
约50分钟
约40分钟
约80分钟
学生理解
学生实践
学生实践
总结
后记

《HTML+CSS网页设计与布局》课程教案
授课教师： 授课班级: 地点: 周课时： 5 课时
章节
内容
CSS文本设置
CSS背景设置
对象尺寸设置
教学
目标
11) 使学生熟练掌握CSS常用样式的创建方法；
12) 使学生掌握CSS常用样式各种属性的含义和</p><p style='height:0px;padding:0;overflow:hidden'>35、设置方法。
重点
难点
11) 掌握各种CSS常用样式的基本使用方法；
12) 熟记各种CSS常用样式的含义。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
二十六、 引入
11、 回顾上周所学内容:上周主要介绍了CSS基础知识和CSS文件链接方式,重点介绍了CSS字体样式设置方法；
12、 提出问题:如何用CSS进行文本和背景设置？如何控制网页中的对象尺寸?

二十七、 告知学生课堂任务
本次课所学习的主要内容是CSS文本设置和背景设置、对象尺寸设置的方法和技巧。
二十八、 逐步演</p><p style='height:0px;padding:0;overflow:hidden'>36、示讲解分析教学内容
113、 字母大小写转换：
text—transform：capitalize | uppercase | lowercase | none
capitalize:使每个词的首字母大写
uppercase：使每个字的所有字母大写
lowercase：使每个字的所有字母小写
none：字母以正常形式显示
114、 文字修饰:
text—decoration:underline ｜ overline | line-throungh ｜ blink ｜ none
underline：给文字加下划线
overline：给文字加上划线
line—through：</p><p style='height:0px;padding:0;overflow:hidden'>37、给文字加删除线
blink：文字在闪烁
none：缺省使用无
115、 文本空格处理方式：white—space ： normal ｜ pre ｜ nowrap
116、 文本水平和垂直对齐：
（1）垂直对齐:
baseline:使元素和上级元素的基线对齐
sub：使对象以下标的形式显示
Super：使对象以上标的形式显示
top：使元素和行中最高的元素向上对齐
text-top：使元素和上级元素的字体向上对齐
middle：纵向对齐元素基线加上上级元素的x—高度——字母”x”的高度的-—的一半的中点
bottom：使元素和行中最高的元素向下对齐
text-botto</p><p style='height:0px;padding:0;overflow:hidden'>38、m：使元素和上级元素的字体向下对齐
（2）水平对齐:
left：浏览器默认的对齐方式,左对齐
Right：右对齐
center:居中
justify:左右对齐
117、 文本缩进：text—indent：<长度〉 ｜ <百分比〉
118、 学生实训及辅导；
119、 上周课外作业点评;
120、 设置背景颜色：background—color ： transparent | color
121、 设置图像的滚动：background—attachment : scroll | fixed
122、 设置背景图像的位置：background—position ： lengt</p><p style='height:0px;padding:0;overflow:hidden'>39、h ｜ length
background—position ： position | position
123、 铺排背景图像：background—repeat ： repeat ｜ no-repeat ｜ repeat—x | repeat—y
124、 学生实训及辅导；
125、 设置对象宽度:width : auto | length
126、 设置对象高度：height ： auto | length
127、 宽度和高度实例：
（1）在网页中布局多个层，并在每个层中写上文字；
（2）设置层的宽度,使每个层按50像素增加；
（3）给每个层添加一个ID，然后在CSS</p><p style='height:0px;padding:0;overflow:hidden'>40、中对ID名称进行控制；
（4)设置层居中。
128、 学生实训及辅导;
二十九、 课外作业
第19章上机实践.

三十、 课堂小结
本次课主要内容：
1、CSS文本设置；
2、CSS背景设置；
3、对象尺寸设置。
约10分钟
约30分钟
约30分钟
约60分钟
约40分钟
约30分钟
约40分钟
约30分钟
约50分钟
学生理解
学生实践
学生实践
学生实践
总结
后记

《HTML+CSS网页设计与布局》课程教案
授课教师： 授课班级： 地点： 周课时: 5 课时
</p><p style='height:0px;padding:0;overflow:hidden'>41、
章节
内容
设置外补丁和内补丁
对象边框和定位设置
教学
目标
13) 使学生熟练掌握CSS常用样式的创建方法；
14) 使学生掌握CSS常用样式各种属性的含义和设置方法。
重点
难点
13) 掌握各种CSS常用样式的基本使用方法；
14) 熟记各种CSS常用样式的含义。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
三十一、 引入
13、 回顾上周所学内容：上周主要介绍了CSS文本设置和背景设置,重点介绍了对象尺寸设置的方法和技巧;
14、 提出问题：什么是外补丁和内补丁？</p><p style='height:0px;padding:0;overflow:hidden'>42、外补丁和内补丁如何创建？如何给网页中的对象进行定位？

三十二、 告知学生课堂任务
本次课所学习的主要内容是CSS外补丁和内补丁、对象边框和定位设置的方法和技巧。
三十三、 逐步演示讲解分析教学内容
129、 外补丁:表示具体的精确宽度。
margin ： auto | length
130、 外补丁的外延设置：
顶端外补丁用法：margin-top：auto|length
右端外补丁用法：margin—right:auto|length
底端外补丁用法：margin-bottom：auto｜length
左端外补丁用法:margin—left：auto｜length
</p><p style='height:0px;padding:0;overflow:hidden'>43、131、 外补丁实例;
132、 上周课外作业点评；
133、 学生实训及辅导;
134、 层与层的距离效果；
135、 对层布局；
136、 设置层的尺寸；
137、 设置层漂移；
138、 设置层与层之间的间隔;：:
139、 学生实训及辅导；
140、 内补丁：表示对象中的内部填充距离.
padding : length
141、 顶端内补丁用法:padding—top:length;
142、 右端内补丁用法：padding-right : length
143、 底端内补丁用法：padding—bottom ： length
144、 左端内补丁用法：pa</p><p style='height:0px;padding:0;overflow:hidden'>44、dding—left : length
145、 内补丁综合实例；
146、 学生实训及辅导；
147、 边框的基本语法：
border ： border—width | border—style | border-color
148、 边框颜色:border—color : color
149、 边框样式表示：
border—style ： none ｜ dotted | dashed ｜ solid | double ｜ groove ｜ ridge | inset | outset
参数none：表示无边框,默认值。
参数dotted：表示点线，由一点点组成的边框.
</p><p style='height:0px;padding:0;overflow:hidden'>45、参数dashed：表示虚线,边框由虚线表示.
参数solid：表示实线,边框由实线表示，常用的参数。
参数double：双线边框。
参数groove：立体形式的凹槽。
参数ridge：立体形式的凸槽。
参数insert：立体形式的凹边.
参数outset：立体形式的凸边。
150、 边框宽度表示:border-width ： medium ｜ thin | thick | length
参数medium:默认值，表示默认宽度。
参数thin：表示小于默认宽度。
参数thick：表示大于默认宽度。
参数length：直接表示边框宽度的值。
151、 学生实训及辅导;
1</p><p style='height:0px;padding:0;overflow:hidden'>46、52、 定位的基本语法：position ： static | absolute ｜ relative
153、 对象层叠顺序:z—index ： auto | number
154、 相对定位实例;
155、 学生实训及辅导;
三十四、 课外作业
第22章上机实践。

三十五、 课堂小结
本次课主要内容:
1、CSS设置外补丁和内补丁；
2、CSS对象边框设置；
3、CSS定位设置。
约10分钟
约20分钟
约10分钟
约30分钟
约30分钟
约30分钟
约30分钟
约30分钟
约15分钟
约30分钟
约10分钟
约40分钟
约15分钟
约3</p><p style='height:0px;padding:0;overflow:hidden'>47、0分钟
学生理解
学生实践
学生实践
学生实践
学生实践
学生实践
总结
后记

《HTML+CSS网页设计与布局》课程教案
授课教师： 授课班级: 地点: 周课时： 5 课时
章节
内容
CSS使用列表的方法
CSS表格控制方法
教学
目标
15) 使学生熟练掌握CSS常用样式的创建方法；
16) 使学生掌握CSS常用样式各种属性的含义和设置方法。
重点
难点
15) 掌握各种CSS常用样式的基本使用方法；
16) 熟记各种CSS常用样式的含义。
教学
方法
课堂讲授、</p><p style='height:0px;padding:0;overflow:hidden'>48、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
三十六、 引入
15、 回顾上周所学内容:上周主要介绍了CSS外补丁和内补丁,重点介绍了对象边框和定位设置的方法和技巧；
16、 提出问题：如何使用CSS创建CSS列表？如何使用CSS控制表格？

三十七、 告知学生课堂任务
本次课所学习的主要内容是CSS列表和表格设置的方法和技巧。
三十八、 逐步演示讲解分析教学内容
156、 列表的基本语法:
list—style ： list-style—image ｜｜ list-style-position ｜| list-s</p><p style='height:0px;padding:0;overflow:hidden'>49、tyle—type
参数list-style-image：用来设置列表的图像。
参数list-style—position:用来设置列表项标记如何根据文本排列。
参数list-style—type:用来设置列表项所使用的预设标记。
157、 设置列表中的图像：
list—style—image ： none ｜ url (url）
参数none：表示属性不设置列表图像，是默认值。
参数url:使用绝对或相对地址指定背景图像,这样就可以显示自定义的图像了，要注意图像大小,如太大会影响列表的美观（图像是按图像原始大小显示的)。图像链接地址要用括号括起来，然后用引号引起（也可以不用引号</p><p style='height:0px;padding:0;overflow:hidden'>50、注意括号前面有关键字url。
158、 学生实训及辅导;
159、 上周课外作业点评；
160、 列表中的文本排列：
list—style-position ： outside ｜ inside
参数outside：默认值。列表项目标记放置在文本以外，且环绕文本不根据标记对齐.
参数inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐.
161、 列表的预设标记：
list-style—type ： disc ｜ circle | square ｜ decimal ｜ lower—roman ｜ upper—roman | lower-alpha ｜ uppe</p>
</div>
</div>

<span id="LabelScript"></span>
<script src="https://m.zixin.com.cn/JS/bootstrap-collapse.js"></script>

<div class="siteInner_bg" style="margin-top: 40px; border: solid 0px red; margin-left: 0px; margin-right: 0px;">

<div>
<div style=" margin: auto; overflow:hidden;
text-align: center;">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6e2a21bc68316db308b5fdc9a0d11f2e";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
<div style=" height:80px; margin: auto; overflow:hidden;
text-align: center;">

<a target="_blank"
href='https://m.zixin.com.cn/ADMiddle.aspx?t=92ULKnFRa/o='>

<img src="https://www.zixin.com.cn/FileUpload/Images/81dd1a0b-02e3-435a-aa37-fbfccae9a83d.gif" width="100%" height='80'
alt="移动网页_全站_页脚广告1" />

</a>
</div> </div>
<div class="siteInner">
<p style="white-space: normal; text-align: center;"><a href="https://www.zixin.com.cn/h-33.html" target="_blank" title="关于我们" textvalue="关于我们"><span style="text-align: center;">关于我们</span></a> <span style="text-align: center;">     </span><a href="https://www.zixin.com.cn/h-37.html" target="_blank" title="便捷服务" textvalue="便捷服务">便捷服务</a>  <span style="text-align: center;">     </span><a href="https://ai.zixin.com.cn/" target="_blank" title="自信AI" textvalue="自信AI">自信AI</a> <span style="text-align: center;">      </span><a href="https://gpt.zixin.com.cn/" target="_blank" title="AI导航" textvalue="AI导航">AI导航</a>        <a href="https://www.zixin.com.cn/info/266.html" target="_blank" title="抽奖活动" textvalue="抽奖活动">抽奖活动</a></p><p style="white-space: normal; text-align: center;"><span style="color: rgb(153, 153, 153); font-family: 微软雅黑, 宋体, Arial; font-size: 12px; text-align: center; background-color: rgb(248, 248, 248);"></span><span style="text-align: center;">©2010-2026 宁波自信网络信息技术有限公司 </span><span style="text-align: center;"> </span><span style="text-align: center;">版权所有</span></p><p style="white-space: normal; text-align: center;"><span style="text-align: center;"><span style="text-align: center;"><span style="text-align: center;"><span style="text-align: center;">客服电话：<span style="text-wrap: wrap;">0574-28810668</span>  <span style="text-align: center;">投诉</span>电话：[phone]</span></span></span></span></p><p style="white-space: normal; text-align: center;"><span style="text-align: center;"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-6/9/6379033271755225397249870.png" title="gongan.png" alt="gongan.png"/></span><a href="http://www.beian.gov.cn/portal/index.do" target="_blank" textvalue="浙公网安备33021202000488号">浙公网安备33021202000488号</a>   </p><p style="white-space: normal; text-align: center;"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/4/6379256265460890686562879.png" title="icp.png" alt="icp.png"/><a href="http://beian.miit.gov.cn/" target="_blank" textvalue="浙ICP备2021020529号-1">浙ICP备2021020529号-1</a> <span style="text-align: center;"> | </span> <a href="https://dxzhgl.miit.gov.cn/dxxzsp/xkz/xkzgl/resource/qiyesearch.jsp?num=%E5%AE%81%E6%B3%A2%E8%87%AA%E4%BF%A1%E7%BD%91%E7%BB%9C%E4%BF%A1%E6%81%AF%E6%8A%80%E6%9C%AF%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8&type=xuke" target="_blank" title="浙B2-20240490" textvalue="浙B2-20240490">浙B2-20240490</a><span style="text-align: center;">  </span></p><p style="white-space: normal; text-align: left;"><span style="text-align: center; font-family: 楷体, 楷体_GB2312, SimKai; font-size: 20px;">关注我们</span><span style="text-align: center;"> ：<a href="https://www.zixin.com.cn/news/113.html" target="_blank"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/9/6379298231429297878483475.png" title="微信公众号" alt="微信公众号"/></a></span><span style="text-align: center;">    <a href="https://www.zixin.com.cn/news/113.html" target="_blank"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/5/6379257739400583672497521.png" title="抖音" alt="抖音"/></a>    <a href="https://weibo.com/zixinnetwork" target="_blank" style="color: rgb(217, 83, 79); text-align: center; white-space: normal;"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/5/6379257739400583672497523.png" title="微博" alt="微博"/></a>    <a href="https://zixinnetwork.lofter.com/" target="_blank"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/5/6379257740834991205479163.png" title="LOFTER" alt="LOFTER"/></a> </span></p>

</div>
</div>
<div style="position: fixed; bottom: 100px; right: 15px; z-index: 100000000000000000;">
<a href="https://work.weixin.qq.com/kfid/kfcb5dffb1386b26424"><img src="https://www.zixin.com.cn/FileUpload/Images/c1022425-c464-4203-b6dc-db237b2252d5.gif" style="width:36px" alt="客服"/></a>
</div>

<div class="trnav clearfix" id="navcontent" style="display: none; background-color:#3a71b1; ">
<div class="trlogoside" id="navlogo" style="display: none;">
<a href="https://m.zixin.com.cn/" title="咨信网"><img src="https://www.zixin.com.cn/FileUpload/Images/c4280cd2-fe62-449e-aeca-027ef73439f5.png" alt="咨信网"></a>
<div class="trnavclose" id="navclose">
<span></span>
</div>
</div>
<div class="navcontainer">
<div class="row">
<ul class="nav navbar-nav trnavul headercontent" id="navigation" style="margin:20px 0 0px;">

<li><a target="_parent"href="https://m.zixin.com.cn/login.aspx">登录</a></li>

<li><a target="_parent"href="https://m.zixin.com.cn/">首页 </a></li>

<li><a target="_parent"href="https://m.zixin.com.cn/booklist-0.html">分类 </a></li>

<li><a target="_parent"href="https://m.zixin.com.cn/infos.html">学堂 </a></li>

<li><a target="_parent"href="https://m.zixin.com.cn/newslist.html">公告 </a></li>

<li><a target="_parent"href="https://m.zixin.com.cn/h-0.html">帮助中心 </a></li>

</ul>
</div>
</div>
</div>
<script type="text/javascript">
function stopPropagation(e) {
var ev = e || window.event;
if (ev.stopPropagation) {
ev.stopPropagation();
}
else if (window.event) {
window.event.cancelBubble = true;//兼容IE
}
}
$("#navmore").click(function (e) {
$("#navcontent").show();
$("#navlogo").show();
stopPropagation(e);
var navcontentwidth = $("#navcontent").width();
$('#navcontent').css({ 'right': '-' + navcontentwidth + 'px' });
$("#navcontent").show().animate({ "right": 0 }, 300);
});
$(document).bind('click', function () {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
$("#navcontent").click(function (e) {
stopPropagation(e);
});
$("#navclose").click(function (e) {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
</script>

<script>
function BaseShare(title, desc, link, imgUrl) {}
</script>

<!--footer-->
<footer class="footer">

<a target="_parent" class="footer-item" href="https://m.zixin.com.cn/">
<img class="footer-item-img" src="/Master/img/tabbar/home.png" alt="首页" />
<div class="footer-item-txt ">首页</div>
</a>
<a target="_parent" class="footer-item" id="classify" href="https://m.zixin.com.cn/bookmap.html">
<img class="footer-item-img" src="/Master/img/tabbar/category.png" alt="分类" />
<div class="footer-item-txt ">分类</div>
</a>
<a target="_parent" class="footer-item" id="case" href="https://m.zixin.com.cn/zhuantilist-.html">
<img class="footer-item-img" src="/Master/img/tabbar/case.png" alt="专题" />
<div class="footer-item-txt ">专题</div>
</a>
<a target="_parent" class="footer-item" id="my" href="https://m.zixin.com.cn/UserDefault.aspx">
<img class="footer-item-img" src="/Master/img/tabbar/my.png" alt="我的" />
<div class="footer-item-txt ">我的</div>
</a>
</footer>

<script>
$(document).ready(function () {
var arr = $(".headercontent");
for (var i = 0; i < arr.length; i++) {
(function (index) {
var url = "https://m.zixin.com.cn/header.aspx";
$.get(url + "?tp=0&t=" + (new Date()).valueOf(), function (d) {
try {
arr.eq(index).empty().html(d);
} catch (e) { }
try {
arr.html(d);
} catch (e) { }
});
})(i);
}
});
</script>

<script src="https://m.zixin.com.cn/js/jquery.lazyload.js"></script>
<script charset="utf-8">
$("img.lazys").lazyload({
threshold: 200,
effect: "fadeIn"
});
</script>
</body>
</html>