网页设计与制作(HTML+CSS+JavaScript)教学全套课件（第2版）刘万辉教学资源任务5 设置文本背景与列表样式.docVIP

《网页设计与制作》课程教学单元设计 淮安信息职业技术学院 第 PAGE 4 页 共 NUMPAGES 4 页 《网页设计与制作》课程教学单元设计 单元5 设置文本背景与列表样式 授课教师：网页设计与制作 授课班级: 学时：8 教学条件 实训室、HBulider或Dreamweaver、投影设备、广播软件、互联网络 教学素材 教材、课件、实训项目单、授课录像、案例库、教学网站等 教学目标设计 知识目标： （1）掌握CSS字体属性的编写； （2）掌握CSS文本属性的编写； （3）掌握CSS基本的背景的编写； （4）掌握CSS3中新增的背景属性的编写； （5）掌握CSS3中新增的渐变属性的编写； （6）掌握CSS中列表样式的设置。 能力目标： （1）能正确应用CSS规则，编写关于字体与文笔的CSS样式； （2）能根据网页页面效果，编写CSS各类背景样式效果； （3）能使用CSS列表进行页面布局。 任务描述 本任务就是编写CSS制作规范的文字、列表，恰当的处理图片与背景，并实现网站关于文本列表与背景的页面效果。 教学内容 （1）CSS字体属性； （2）CSS文本属性； （3）CSS背景属性； （4）CSS3新增的背景属性、新增的渐变属性； （5）CSS中列表样式。 重点： （1）CSS字体属性； （2）CSS文本属性； （3）CSS背景属性； （4）CSS中列表样式。 难点： （1） CSS3新增的背景属性的使用方法； （2） CSS3新增的渐变属性的使用方法。 任务分析与实现 （1）任务分析； （2）任务实现代码。 教学过程设计 5.1 CSS字体、文本、背景属性的设置（学时数：2） 主要步骤 教学内容 教学方法 教学手段 师生活动 任务描述 本任务就是编写CSS制作规范的文字、列表，恰当的处理图片与背景，并实现网站关于文本列表与背景的页面效果。 讲授法 多媒体 教师：分析任务 学生：信息交流 知识讲授 设置CSS的字体属性： 字体设置—font-family、字号大小—font-size、字体风格—font-style、字体加粗—font-weight、小型的大写字母—font-variant、复合属性等 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 创建一个新页面进行实践CSS的字体属性的使用方法 实验教学法 多媒体 教师：辅导交流 学生：实践练习 知识讲授 设置CSS的文本属性： 颜色属性—color、文本行高—line-height、文本行高—line-height、字符间隔—letter-spacing、文字修饰—text-decoration、文本转换—text-transform、文本缩进—text-indent、文本水平对齐—text-align、垂直对齐—vertical-align、处理空白—white-space、阴影效果—text-shadow、对象内溢出文本—text-overflow等 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 创建一个新页面进行实践文本属性的用法。 实验教学法 多媒体 教师：辅导交流 学生：实践练习 知识讲授 讲解背景属性设置 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 创建一个新页面进行实践背景属性的设置 实验教学法 多媒体 教师：辅导交流 学生：实践练习 课堂 总结 CSS字体属性； CSS文本属性； CSS背景属性； 教师讲解 多媒体 课件演示 整理笔记 引导创新 任务拓展 浏览腾讯网站页面，认识HMTL与CSS的结构与作用。 教师指导 学生自学 多媒体 布置作业 提出要求 教学过程设计 5.2 新增的背景属性渐变属性以及列表属性的设置（学时数：2） 主要步骤 教学内容 教学方法 教学手段 师生活动 知识讲授 讲解 CSS3中新增的背景属性： 背景图像大小background-size、背景图像的坐标background-orign、背景图像的裁剪区域background-clip、多背景图像的设置 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 创建一个新页面进行实践 CSS3中新增的背景属性。 实验教学法 多媒体 教师：辅导交流 学生：实践练习 知识讲授 讲解 CSS3中新增的渐变属性： 线性渐变、径向渐变、重复渐变。 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 学生创建一个新页面进行实践 CSS3中新增的渐变属性。 实验教学法 多媒体 教师：辅导交流 学生：实践练习 知识讲授 讲解 列表样式设置： 列表符号list-style-type、图像符号list-style-image、列表缩进list-st