div+css教案
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
内容简介
本书系统地讲解了CSS基础理论和实际运用技术，通过大量实例对CSS应用进行深入浅出的分析。全书主要内容包括CSS的基本语法和概念，设置文字、图片、背景、表格、表单和菜单等网页元素的方法，以及CSS滤镜的使用和CSS如何控制XML文档样式。着重讲解如何利用CSS+DIV进行网页布局，注重实际操作，使读者在学习CSS应用技术的同时掌握CSS+DIV的精髓。本书还详细讲解了其他书中较少涉及的技术细节，包括扩展CSS与JavaScript和XML等综合应用等内容，以帮助读者设计符合Web标准的网页，提升技术水平和竞争能力。
教学过程
设计
（2学时）
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
机
房
操
作
课堂小结
（3分钟）
小结图片样式设置
思考题、作业及其预习要求（2分钟）
了解图片的横向对齐
1.3.1 CSS选择器概述 12
1.3.2 标签选择器 13
1.3.3 ID选择器 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
教学方法
机房演示教学，上机实践操作
主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（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分钟）
课程名称
CSS+DIV网页样式与布局从入门到精通
课程编号
英文课程名称
CSS+DIV Webpage style and layout from entry to the master
先修课程
编排设计、网页设计欣赏、网页三剑客
授课班级
14电艺
课程类别
职业技能课
开课学期
2015—2016第二期
学分
3
考试类型
□标准班
□合班
教学目的
了解定义字体类型、大小、颜色、粗细、字体
重点难点
掌握定义文本对齐、定义垂直对齐、定义字间距和行间距、定义行间距、定义缩进
教学方法
机房演示教学，上机实践操作
主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（4学时）
2.1.1 定义字体类型 49
2.1.2 定义字体大小 51
备注
周
次
讲课内容（附章节）
学
时
实验实习
（讨论大作业）内容
学时
1
第1章 CSS样式设计基础
4
2
第2章 使用CSS设置字体和文本样式
4
3
第3章 使用CSS设置图片样式
4
图文混排
2
4
第4章 使用CSS控制背景图像
4
设置网页背景页面
2
5
第5章 使用CSS控制列表样式
4
6
第6章 使用CSS设计表格样式
4
7
第7章 使用CSS设计表单样式
4.1.3定义背景图片128
4.1.4背景图片的重复130
4.1.5定义背景图片的位置131
4.1.6固定背景图片133
1.3.12 指定选择器 26
1.4 CSS基本特性 26
1.4.1 层叠和特殊性 26
1.4.2 继承 31
1.5 样式表规划、组织和维护32
机
房
操
作
课堂小结
（3分钟）
通过本章学习什么是标签选择器
思考题、作业及其预习要求（2分钟）
伪类和伪对象选择器有哪些？
教学课题
第2章 使用CSS设置字体和文本样式
小结图片样式设置
思考题、作业及其预习要求（2分钟）
了解图片的横向对齐
教学课题
图文混排
□标准班
□合班
教学目的
理解图片样式设置基础
重点难点
掌握定义图片边框、定义图片大小、定义图片的横向对齐、定义图片的纵向对齐、设置文字环绕效果
教学方法
机房演示教学，上机实践操作
主要教学过程
机房演示教学，上机实践操作
教学手段
机
房
操
作
课堂小结
（3分钟）
小结定义垂直对齐、定义字间距和行间距
思考题、作业及其预习要求（2分钟）
Dreamweaver中CSS设置字体和文本样式类型
教学课题
第3章 使用CSS设置图片样式
□标准班
□合班
教学目的
理解图片样式设置基础
重点难点
掌握定义图片边框、定义图片大小、定义图片的横向对齐、定义图片的纵向对齐、设置文字环绕效果
考查
总学时
48
讲授学时
实验学时
授课教师
孙燕
职称
教研室
教材
CSS+DIV网页样式与布局从入门到精通
出版社
清华大学出版社
参考书
出版社
课程说明
CSS+DIV网页样式与布局从入门到精通为高职高专一门重要的技能课，是从初学者的角度出发，遵照“操作”“理论”“操作”的原则，通过设计案例的精心策划，建立科学而系统的学习和训练体系。
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
教学课题
第4章使用CSS控制背景图像
□标准班
□合班
教学目的
了解背景图形的几种定义方法
重点难点
掌握背景样式的各种设置
教学方法
机房演示教学，上机实践操作
主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（2学时）
4.1背景样式设置基础125
4.1.1设置页面背景颜色125
4.1.2设置背景颜色给页面分块126
教学方法
机房演示教学，上机实践操作
主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（4学时）
1.1.1 选用符合语义的标签 2
1.1.2 文档类型和浏览器模式 7
1.2 初识CSS 8
1.2.1 为什么学习CSS 9
1.2.2 CSS基本语法 9
1.2.3 设计第一个实例 10
1.3 CSS选择器 12
4
8
第8章 使用CSS定义链接样式
4Байду номын сангаас
9
第9章 网页排版和DIV+CSS布局
4
10
第10章 用CSS定位控制网页布局
4
11
第11章 解决CSS设计中的常见问题
4
12
第12章 旅游酒店网站
4
4
教学课题
第1章 CSS样式设计基础
□标准班
□合班
教学目的
认识选用符合语义的标签
重点难点
熟悉并掌握CSS选择器概述
本书系统地讲解了CSS基础理论和实际运用技术，通过大量实例对CSS应用进行深入浅出的分析。全书主要内容包括CSS的基本语法和概念，设置文字、图片、背景、表格、表单和菜单等网页元素的方法，以及CSS滤镜的使用和CSS如何控制XML文档样式。着重讲解如何利用CSS+DIV进行网页布局，注重实际操作，使读者在学习CSS应用技术的同时掌握CSS+DIV的精髓。本书还详细讲解了其他书中较少涉及的技术细节，包括扩展CSS与JavaScript和XML等综合应用等内容，以帮助读者设计符合Web标准的网页，提升技术水平和竞争能力。
教学过程
设计
（2学时）
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
机
房
操
作
课堂小结
（3分钟）
小结图片样式设置
思考题、作业及其预习要求（2分钟）
了解图片的横向对齐
1.3.1 CSS选择器概述 12
1.3.2 标签选择器 13
1.3.3 ID选择器 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
教学方法
机房演示教学，上机实践操作
主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（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分钟）
课程名称
CSS+DIV网页样式与布局从入门到精通
课程编号
英文课程名称
CSS+DIV Webpage style and layout from entry to the master
先修课程
编排设计、网页设计欣赏、网页三剑客
授课班级
14电艺
课程类别
职业技能课
开课学期
2015—2016第二期
学分
3
考试类型
□标准班
□合班
教学目的
了解定义字体类型、大小、颜色、粗细、字体
重点难点
掌握定义文本对齐、定义垂直对齐、定义字间距和行间距、定义行间距、定义缩进
教学方法
机房演示教学，上机实践操作
主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（4学时）
2.1.1 定义字体类型 49
2.1.2 定义字体大小 51
备注
周
次
讲课内容（附章节）
学
时
实验实习
（讨论大作业）内容
学时
1
第1章 CSS样式设计基础
4
2
第2章 使用CSS设置字体和文本样式
4
3
第3章 使用CSS设置图片样式
4
图文混排
2
4
第4章 使用CSS控制背景图像
4
设置网页背景页面
2
5
第5章 使用CSS控制列表样式
4
6
第6章 使用CSS设计表格样式
4
7
第7章 使用CSS设计表单样式
4.1.3定义背景图片128
4.1.4背景图片的重复130
4.1.5定义背景图片的位置131
4.1.6固定背景图片133
1.3.12 指定选择器 26
1.4 CSS基本特性 26
1.4.1 层叠和特殊性 26
1.4.2 继承 31
1.5 样式表规划、组织和维护32
机
房
操
作
课堂小结
（3分钟）
通过本章学习什么是标签选择器
思考题、作业及其预习要求（2分钟）
伪类和伪对象选择器有哪些？
教学课题
第2章 使用CSS设置字体和文本样式
小结图片样式设置
思考题、作业及其预习要求（2分钟）
了解图片的横向对齐
教学课题
图文混排
□标准班
□合班
教学目的
理解图片样式设置基础
重点难点
掌握定义图片边框、定义图片大小、定义图片的横向对齐、定义图片的纵向对齐、设置文字环绕效果
教学方法
机房演示教学，上机实践操作
主要教学过程
机房演示教学，上机实践操作
教学手段
机
房
操
作
课堂小结
（3分钟）
小结定义垂直对齐、定义字间距和行间距
思考题、作业及其预习要求（2分钟）
Dreamweaver中CSS设置字体和文本样式类型
教学课题
第3章 使用CSS设置图片样式
□标准班
□合班
教学目的
理解图片样式设置基础
重点难点
掌握定义图片边框、定义图片大小、定义图片的横向对齐、定义图片的纵向对齐、设置文字环绕效果
考查
总学时
48
讲授学时
实验学时
授课教师
孙燕
职称
教研室
教材
CSS+DIV网页样式与布局从入门到精通
出版社
清华大学出版社
参考书
出版社
课程说明
CSS+DIV网页样式与布局从入门到精通为高职高专一门重要的技能课，是从初学者的角度出发，遵照“操作”“理论”“操作”的原则，通过设计案例的精心策划，建立科学而系统的学习和训练体系。
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
教学课题
第4章使用CSS控制背景图像
□标准班
□合班
教学目的
了解背景图形的几种定义方法
重点难点
掌握背景样式的各种设置
教学方法
机房演示教学，上机实践操作
主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（2学时）
4.1背景样式设置基础125
4.1.1设置页面背景颜色125
4.1.2设置背景颜色给页面分块126
教学方法
机房演示教学，上机实践操作
主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（4学时）
1.1.1 选用符合语义的标签 2
1.1.2 文档类型和浏览器模式 7
1.2 初识CSS 8
1.2.1 为什么学习CSS 9
1.2.2 CSS基本语法 9
1.2.3 设计第一个实例 10
1.3 CSS选择器 12
4
8
第8章 使用CSS定义链接样式
4Байду номын сангаас
9
第9章 网页排版和DIV+CSS布局
4
10
第10章 用CSS定位控制网页布局
4
11
第11章 解决CSS设计中的常见问题
4
12
第12章 旅游酒店网站
4
4
教学课题
第1章 CSS样式设计基础
□标准班
□合班
教学目的
认识选用符合语义的标签
重点难点
熟悉并掌握CSS选择器概述