div+css教案

课程名称CSS+DIV网页样式与布局从入门到精通课程编号

英文课程名称CSS+DIV Webpage style and layout from entry to the master 先修课程编排设计、网页设计欣赏、网页三剑客

授课班级14电艺

课程类别职业技能课开课学期2015—2016第二期学分 3 考试类型考查

总学时48 讲授学时实验学时

授课教师孙燕职称教研室

教材

CSS+DIV网页样式与布

局从入门到精通出版

社

清华大学出版社

参考书

出版

社

课程说明CSS+DIV网页样式与布局从入门到精通为高职高专一门重要的技能课，是从初学者的角度出发，遵照“操作”“理论”“操作”的原则，通过设计案例的精心策划，建立科学而系统的学习和训练体系。

内容简介本书系统地讲解了CSS基础理论和实际运用技术，通过大量实例对CSS应用进行深入浅出的分析。全书主要内容包括CSS的基本语法和概念，设置文字、图片、背景、表格、表单和菜单等网页元素的方法，以及CSS滤镜的使用和CSS如何控制XML文档样式。着重讲解如何利用CSS+DIV进行网页布局，注重实际操作，使读者在学习CSS应用技术的同时掌握CSS+DIV 的精髓。本书还详细讲解了其他书中较少涉及的技术细节，包括扩展CSS 与JavaScript和XML等综合应用等内容，以帮助读者设计符合Web标准的网页，提升技术水平和竞争能力。

备注

周次讲课内容（附章节）

学

时

实验实习

（讨论大作业）内容

学

时

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

8 第8章使用CSS定义链接样式 4

9 第9章网页排版和DIV+CSS布局 4

10 第10章用CSS定位控制网页布局 4

11 第11章解决CSS设计中的常见问题 4

12 第12章旅游酒店网站 4 4

教学课题第1章 CSS样式设计基础

□标准班

□合班

教学目的认识选用符合语义的标签

重点难点熟悉并掌握CSS选择器概述

教学方法机房演示教学，上机实践操作

主要教学过程机房演示教学，上机实践操作教学手段

教学过程

设计（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

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

1.3.12 指定选择器 26

1.4 CSS基本特性 26

1.4.1 层叠和特殊性 26

1.4.2 继承 31

1.5 样式表规划、组织和维护 32

机

房

操

作

课堂小结

（3分钟）

通过本章学习什么是标签选择器思考题、作业

及其预习要求

（2分钟）

伪类和伪对象选择器有哪些？

教学课题第2章使用CSS设置字体和文本样式

□标准班

□合班教学目的了解定义字体类型、大小、颜色、粗细、字体

重点难点掌握定义文本对齐、定义垂直对齐、定义字间距和行间距、定义行间距、定义缩进

教学方法机房演示教学，上机实践操作

主要教学过程机房演示教学，上机实践操作教学手段

教学过程设计（4学时）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

机

房

操

作

课堂小结

（3分钟）

小结定义垂直对齐、定义字间距和行间距

思考题、作业

及其预习要求

（2分钟）

Dreamweaver中CSS设置字体和文本样式类型

教学课题第3章使用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分钟）

了解图片的横向对齐

教学课题图文混排

□标准班

□合班教学目的理解图片样式设置基础

重点难点掌握定义图片边框、定义图片大小、定义图片的横向对齐、定义图片的纵向对齐、设置文字环绕效果

教学方法机房演示教学，上机实践操作

主要教学过程机房演示教学，上机实践操作教学手段

教学过程

设计（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分钟）

了解图片的横向对齐

教学课题第4章使用CSS控制背景图像

□标准班

□合班

教学目的了解背景图形的几种定义方法

重点难点掌握背景样式的各种设置

教学方法机房演示教学，上机实践操作

主要教学过程机房演示教学，上机实践操作教学手段

教学过程

设计（2学时）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

机

房

操

作

课堂小结

（3分钟）

小结通过css样式设置不同类型的背景图像思考题、作业

及其预习要求

（2分钟）

设置带花纹边框

教学课题设置网页背景页面

□标准班

□合班

教学目的了解背景图形的几种定义方法

重点难点掌握背景样式的各种设置

教学方法上机实践操作

主要教学过程上机实践操作教学手段

教学过程

设计（2学时）上机实践

机

房

操

作

课堂小结

（3分钟）

小结通过css样式设置不同类型的背景图像思考题、作业

及其预习要求

（2分钟）

设置永远固定的背景

教学课题第5章使用CSS控制列表样式

□标准班

□合班

教学目的了解列表样式的设置了解定义项目的图片

重点难点掌握列表样式的运用

教学方法机房演示教学，上机实践操作

主要教学过程机房演示教学，上机实践操作教学手段

教学过程

设计（4学时）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

机

房

操

作

课堂小结

（3分钟）

小结通过CSS样式定义列表样式思考题、作业

及其预习要求

（2分钟）

设计多级菜单

教学课题第6章使用CSS设计表格样式

□标准班

□合班

教学目的认识表格样式

重点难点掌握表格样式的设置和运用

教学方法机房演示教学，上机实践操作

主要教学过程机房演示教学，上机实践操作教学手段

教学过程

设计（4学时）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

机

房

操

作

课堂小结

（3分钟）

小结表格在CSS中如何运用思考题、作业

及其预习要求

（2分钟）

设计高效的表格

教学课题第7章使用CSS设计表单样式

□标准班

□合班

教学目的认识表单样式

重点难点掌握定义字体样式、边框样式、背景样式

教学方法机房演示教学，上机实践操作

主要教学过程机房演示教学，上机实践操作教学手段

教学过程

设计（4学时）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

机

房

操

作

课堂小结

（3分钟）

小结表单的运用方式思考题、作业

及其预习要求

（2分钟）

设计注册表单

教学课题第8章使用CSS定义链接样式

□标准班

□合班

教学目的了解链接样式设置

重点难点掌握设置类型指示样式、定义已访问样式

教学方法机房演示教学，上机实践操作

主要教学过程机房演示教学，上机实践操作教学手段

教学过程

设计（4学时）

8.1 链接样式设置基础247

8.1.1 设置链接样式247

8.1.2 设计下划线样式248

8.1.3 设置类型指示样式249

8.1.4 定义按钮样式251

8.1.5 定义已访问样式254

8.1.6 链接提示样式254

8.2 案例实战256

8.2.1 鼠标样式256

8.2.2 设计菜单样式259

8.2.3 设计苹果导航菜单261

8.2.4 块状选项卡266

8.2.5 图片浏览271

机

房

操

作

课堂小结

（3分钟）

小结链接样式的设置方法以及定义按钮思考题、作业

及其预习要求

（2分钟）

如何设置类型指示样式

教学课题第9章网页排版和DIV+CSS布局

□标准班

□合班

教学目的了解CSS盒模型

重点难点掌握外边距、内边距、边框、宽和高的用法

教学方法机房演示教学，上机实践操作

主要教学过程机房演示教学，上机实践操作教学手段

教学过程

设计（4学时）9.1 CSS盒模型276

9.1.1 认识盒模型276

9.1.2 外边距278

9.1.3 内边距281

9.1.4 边框284

9.1.5 宽和高284

9.2 网页重构287

9.2.1 设置文档类型287

9.2.2 选择标签293

9.2.3 案例实战：尝试重构禅意花园296

9.3 网页排版299

9.3.1 网页排版基本原则299

9.3.2 标准网页版式基本形式300

9.3.3 网页排版基本方法300

9.4 DIV+CSS布局305

9.4.1 布局空间305

9.4.2 布局位置307

9.4.3 布局环绕309

9.4.4 清除浮动311

9.4.5 布局嵌套313

9.4.6 调整布局间距316

9.5 案例实战321

9.5.1 两列布局322

9.5.2 三列布局327

机

房

操

作

课堂小结

（3分钟）

小结学习网页排版基本方法思考题、作业

及其预习要求

（2分钟）

如何调整布局间距

教学课题第10章用CSS定位控制网页布局

□标准班

□合班

教学目的了解什么是CSS定位

重点难点掌握静态定位、绝对定位、相对定位、固定定位

教学方法机房演示教学，上机实践操作

主要教学过程机房演示教学，上机实践操作教学手段

教学过程

设计（4学时）10.1 CSS定位333

10.1.1 认识position 333

10.1.2 静态定位333

10.1.3 绝对定位334

10.1.4 相对定位335

10.1.5 固定定位338

10.2 定位参照339

10.2.1 参照对象339

10.2.2 坐标值343

10.2.3 定位的特殊性344

10.3 定位层叠347

10.3.1 层叠顺序347

10.3.2 嵌套层叠顺序349

10.3.3 CSS层叠框351

10.3.4 CSS层叠常见问题354

10.4 案例实战357

10.4.1 画册式网页布局357

10.4.2 展览式网页布局361

10.4.3 浪漫式网页布局366

机

房

操

作

课堂小结

（3分钟）

小结定位的特殊性思考题、作业

及其预习要求

（2分钟）

CSS层叠常见问题

教学课题第11章解决CSS设计中的常见问题

□标准班

□合班

教学目的认识IE条件语句

重点难点掌握IE条件语句基本用法

教学方法机房演示教学，上机实践操作

主要教学过程机房演示教学，上机实践操作教学手段

教学过程

设计（4学时）11.1 IE条件语句373

11.1.1 认识IE条件语句373

11.1.2 IE条件语句基本用法374

11.1.3 案例实战：设计兼容的多级菜单376

11.2 CSS渲染及问题380

11.2.1 开启和关闭IE布局特性381

11.2.2 设置Layout特性的方法381

11.2.3 问题1：不能自动展开包含框384

11.2.4 问题2：包含浮动布局的问题与处理387

11.2.5 问题3：相邻浮动布局的问题与处理389

11.2.6 问题4：列表布局的问题与处理390

11.2.7 问题5：定位布局的问题与处理392

11.3 常用浏览器解析问题和解决方法394

11.3.1 兼容IE6版本浏览器395

11.3.2 兼容IE5系列版本浏览器396

11.3.3 兼容IE7版本浏览器398

11.3.4 兼容FF等标准浏览器399

11.3.5 问题1：超链接的Bug 399

11.3.6 问题2：内容与背景分离的Bug 400

11.3.7 问题3：IE6躲躲猫Bug 402

11.3.8 问题4：IE6多余字符Bug 403

11.4 案例实战403

11.4.1 3列等高布局403

11.4.2 3列浮动布局408

机

房

操

作

课堂小结

（3分钟）

小结开启和关闭IE布局特性思考题、作业

及其预习要求

（2分钟）

列表布局的问题与处理

教学课题第12章旅游酒店网站

□标准班

□合班

教学目的了解网站页面效果分析

重点难点掌握首页策划设计、网页设计与重构

教学方法机房演示教学，上机实践操作

主要教学过程机房演示教学，上机实践操作教学手段

教学过程

设计（4学时）12.1 网站页面效果分析411

12.1.1 “旅游度假”页面效果分析411

12.1.2 “预定酒店”页面效果分析411

12.2 首页策划设计412

12.3 网页设计与重构414

12.3.1 画草图和设计图414

12.3.2 切图417

12.3.3 主体重构419

12.4 页面布局422

12.4.1 设计页面基本样式422

12.4.2 设计页头布局和样式422

12.4.3 设计搜索和幻灯区布局和样式425

12.4.4 设计左侧引导区布局和样式427

12.4.5 设计内容区样式428

12.4.6 设计右侧专题栏样式431

机

房

操

作

课堂小结

（3分钟）

小结设计页面基本样式

思考题、作业

及其预习要求

（2分钟）

了解设计搜索和幻灯区布局和样式