div+css教案Word格式文档下载.docx
《div+css教案Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《div+css教案Word格式文档下载.docx（17页珍藏版）》请在冰豆网上搜索。
授课教师
孙燕
职称
教研室
教材
出版社
清华大学出版社
参考书
课程说明
CSS+DIV网页样式与布局从入门到精通为高职高专一门重要的技能课，是从初学者的角度出发，遵照“操作”“理论”“操作”的原则，通过设计案例的精心策划，建立科学而系统的学习和训练体系。
内容简介
本书系统地讲解了CSS基础理论和实际运用技术，通过大量实例对CSS应用进行深入浅出的分析。
全书主要内容包括CSS的基本语法和概念，设置文字、图片、背景、表格、表单和菜单等网页元素的方法，以及CSS滤镜的使用和CSS如何控制XML文档样式。
着重讲解如何利用CSS+DIV进行网页布局，注重实际操作，使读者在学习CSS应用技术的同时掌握CSS+DIV的精髓。
本书还详细讲解了其他书中较少涉及的技术细节，包括扩展CSS与JavaScript和XML等综合应用等内容，以帮助读者设计符合Web标准的网页，提升技术水平和竞争能力。
备注
周
次
讲课内容（附章节）
学
时
实验实习
（讨论大作业）内容
学时
1
第1章CSS样式设计基础
4
2
第2章使用CSS设置字体和文本样式
第3章使用CSS设置图片样式
图文混排
第4章使用CSS控制背景图像
设置网页背景页面
5
第5章使用CSS控制列表样式
6
第6章使用CSS设计表格样式
7
第7章使用CSS设计表单样式
8
第8章使用CSS定义链接样式
9
第9章网页排版和DIV+CSS布局
10
第10章用CSS定位控制网页布局
11
第11章解决CSS设计中的常见问题
12
第12章旅游酒店网站
教学课题
第1章CSS样式设计基础
□标准班
□合班
教学目的
认识选用符合语义的标签
重点难点
熟悉并掌握CSS选择器概述
教学方法
机房演示教学，上机实践操作
主要教学过程
教学手段
教学过程
设计
（4学时）
1.1.1选用符合语义的标签2
1.1.2文档类型和浏览器模式7
1.2初识CSS8
1.2.1为什么学习CSS9
1.2.2CSS基本语法9
1.2.3设计第一个实例10
1.3CSS选择器12
1.3.1CSS选择器概述12
1.3.2标签选择器13
1.3.3ID选择器14
1.3.4类选择器16
1.3.5伪类和伪对象选择器17
1.3.6子选择器19
1.3.7相邻选择器20
1.3.8属性选择器21
1.3.9通用选择器23
1.3.10包含选择器23
1.3.11分组选择器25
1.3.12指定选择器26
1.4CSS基本特性26
1.4.1层叠和特殊性26
1.4.2继承31
1.5样式表规划、组织和维护32
机
房
操
作
课堂小结
（3分钟）
通过本章学习什么是标签选择器
思考题、作业及其预习要求（2分钟）
伪类和伪对象选择器有哪些？
第2章使用CSS设置字体和文本样式
了解定义字体类型、大小、颜色、粗细、字体
掌握定义文本对齐、定义垂直对齐、定义字间距和行间距、定义行间距、定义缩进
2.1.1定义字体类型49
2.1.2定义字体大小51
2.1.3定义字体颜色53
2.1.4定义字体粗细54
2.1.5定义斜体字体55
2.1.6定义下划线、删除线和顶划线56
2.1.7定义字体大小写57
2.1.8定义文本对齐58
2.1.9定义垂直对齐60
2.1.10定义字间距和行间距63
2.1.11定义行间距64
2.1.12定义缩进67
小结定义垂直对齐、定义字间距和行间距
Dreamweaver中CSS设置字体和文本样式类型
理解图片样式设置基础
掌握定义图片边框、定义图片大小、定义图片的横向对齐、定义图片的纵向对齐、设置文字环绕效果
（2学时）
3.1图片样式设置基础93
3.1.1定义图片边框93
3.1.2定义图片大小97
3.1.3定义图片的横向对齐98
3.1.4定义图片的纵向对齐99
3.1.5设置文字环绕效果101
小结图片样式设置
了解图片的横向对齐
理解图片样式设置基础
3.2案例实战103
3.2.1图文混排103
3.2.2图片布局107
3.2.3多图排列111
3.2.4阴影图片114
3.2.5圆角图片116
3.2.6设计圆角栏目118
小结图片样式设置
了解背景图形的几种定义方法
掌握背景样式的各种设置
4.1背景样式设置基础125
4.1.1设置页面背景颜色125
4.1.2设置背景颜色给页面分块126
4.1.3定义背景图片128
4.1.4背景图片的重复130
4.1.5定义背景图片的位置131
4.1.6固定背景图片133
4.2案例实战134
4.2.1设置网页背景颜色135
4.2.2设置带花纹边框136
4.2.3设置永远固定的背景143
4.2.4设置圆润的栏目模块144
4.2.5设计分栏版式149
4.2.6设计滑动门菜单151
4.2.7设计灯箱广告154
4.2.8设计博客首页效果157
小结通过css样式设置不同类型的背景图像
设置带花纹边框
上机实践操作
上机实践
设置永远固定的背景
第5章使用CSS控制列表样式
了解列表样式的设置
了解定义项目的图片
掌握列表样式的运用
5.1列表样式设置基础164
5.1.1设置列表项符号164
5.1.2定义项目的图片符号166
5.1.3列表的横竖转换167
5.2案例实战169
5.2.1设计新闻栏目169
5.2.2设计导航菜单173
5.2.3设计多级菜单177
5.2.4列表排版的应用182
5.2.5使用列表实现图文混排效果186
小结通过CSS样式定义列表样式
设计多级菜单
认识表格样式
掌握表格样式的设置和运用
6.1表格样式设置基础193
6.1.1设置表格颜色193
6.1.2设置表格边框194
6.2案例实战196
6.2.1美化表格197
6.2.2设计高效的表格200
6.2.3让表格更易用204
6.2.4表格布局207
小结表格在CSS中如何运用
设计高效的表格
第7章使用CSS设计表单样式
认识表单样式
掌握定义字体样式、边框样式、背景样式
7.1表单样式设置基础212
7.1.1表单基本结构212
7.1.2设置基本样式216
7.1.3定义字体样式221
7.1.4定义边框样式222
7.1.5定义背景样式224
7.2案例实战228
7.2.1设计多彩下拉菜单样式228
7.2.2设计注册表单230
7.2.3设计调查表235
7.2.4设计反馈表240
小结表单的运用方式
设计注册表单
第8章使用CSS定义链接样式
了解链接样式设置
掌握设置类型指示样式、定义已访问样式
教学方
升级会员 