div+css教案.docx

1、div+css教案课程名称CSS+DIV网页样式与布局从入门到精通课程编号英文课程名称CSS+DIV Webpage style and layout from entry to the master先修课程编排设计、网页设计欣赏、网页三剑客授课班级14电艺课程类别职业技能课开课学期20152016第二期学 分3考试类型考查总 学 时48讲授学时实验学时授课教师孙燕职 称教研室教 材CSS+DIV网页样式与布局从入门到精通出 版 社清华大学出版社参 考 书出 版 社课程说明CSS+DIV网页样式与布局从入门到精通为高职高专一门重要的技能课，是从初学者的角度出发，遵照“操作”“理论”“操作”的原

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

3、课内容（附章节）学时实验实习（讨论大作业）内容学时1第1章 CSS样式设计基础42第2章 使用CSS设置字体和文本样式43第3章 使用CSS设置图片样式4图文混排24第4章 使用CSS控制背景图像4设置网页背景页面25第5章 使用CSS控制列表样式46第6章 使用CSS设计表格样式47第7章 使用CSS设计表单样式48第8章 使用CSS定义链接样式49第9章 网页排版和DIV+CSS布局410第10章 用CSS定位控制网页布局411第11章 解决CSS设计中的常见问题412第12章 旅游酒店网站44教学课题第1章 CSS样式设计基础标准班合班教学目的认识选用符合语义的标签重点难点熟悉并掌握CS

4、S选择器概述教学方法机房演示教学，上机实践操作主要教学过程机房演示教学，上机实践操作教学手段教学过程设 计（4学时）1.1.1 选用符合语义的标签 21.1.2 文档类型和浏览器模式 71.2 初识CSS 81.2.1 为什么学习CSS 91.2.2 CSS基本语法 91.2.3 设计第一个实例 101.3 CSS选择器 121.3.1 CSS选择器概述 121.3.2 标签选择器 131.3.3 ID选择器 141.3.4 类选择器 161.3.5 伪类和伪对象选择器 171.3.6 子选择器 191.3.7 相邻选择器 201.3.8 属性选择器 211.3.9 通用选择器 231.3.1

5、0 包含选择器 231.3.11 分组选择器 251.3.12 指定选择器 261.4 CSS基本特性 261.4.1 层叠和特殊性 261.4.2 继承 311.5 样式表规划、组织和维护 32机房操作课堂小结（3分钟）通过本章学习什么是标签选择器 思考题、作业及其预习要求（2分钟）伪类和伪对象选择器有哪些？教学课题第2章 使用CSS设置字体和文本样式标准班合班教学目的了解定义字体类型、大小、颜色、粗细、字体重点难点掌握定义文本对齐、定义垂直对齐、定义字间距和行间距 、定义行间距 、定义缩进 教学方法机房演示教学，上机实践操作主要教学过程机房演示教学，上机实践操作教学手段教学过程设 计（4学

6、时）2.1.1 定义字体类型 492.1.2 定义字体大小 512.1.3 定义字体颜色 532.1.4 定义字体粗细 542.1.5 定义斜体字体 552.1.6 定义下划线、删除线和顶划线 562.1.7 定义字体大小写 572.1.8 定义文本对齐 582.1.9 定义垂直对齐 602.1.10 定义字间距和行间距 632.1.11 定义行间距 642.1.12 定义缩进 67机房操作课堂小结（3分钟）小结定义垂直对齐、定义字间距和行间距思考题、作业及其预习要求（2分钟）Dreamweaver中CSS设置字体和文本样式类型教学课题第3章 使用CSS设置图片样式标准班合班教学目的理解图片样

7、式设置基础 重点难点掌握定义图片边框 、定义图片大小、定义图片的横向对齐、定义图片的纵向对齐 、设置文字环绕效果教学方法机房演示教学，上机实践操作主要教学过程机房演示教学，上机实践操作教学手段教学过程设 计（2学时）3.1 图片样式设置基础 933.1.1 定义图片边框 933.1.2 定义图片大小 973.1.3 定义图片的横向对齐 983.1.4 定义图片的纵向对齐 993.1.5 设置文字环绕效果 101机房操作课堂小结（3分钟）小结图片样式设置思考题、作业及其预习要求（2分钟）了解图片的横向对齐教学课题图文混排标准班合班教学目的理解图片样式设置基础重点难点掌握定义图片边框 、定义图片大

8、小、定义图片的横向对齐、定义图片的纵向对齐 、设置文字环绕效果教学方法机房演示教学，上机实践操作主要教学过程机房演示教学，上机实践操作教学手段教学过程设 计（2学时）3.2 案例实战 1033.2.1 图文混排 1033.2.2 图片布局 1073.2.3 多图排列 1113.2.4 阴影图片 1143.2.5 圆角图片 1163.2.6 设计圆角栏目 118机房操作课堂小结（3分钟）小结图片样式设置思考题、作业及其预习要求（2分钟）了解图片的横向对齐教学课题第4章 使用CSS控制背景图像标准班合班教学目的了解背景图形的几种定义方法重点难点掌握背景样式的各种设置教学方法机房演示教学，上机实践操

9、作主要教学过程机房演示教学，上机实践操作教学手段教学过程设 计（2学时）4.1 背景样式设置基础 1254.1.1 设置页面背景颜色 1254.1.2 设置背景颜色给页面分块 1264.1.3 定义背景图片 1284.1.4 背景图片的重复 1304.1.5 定义背景图片的位置 1314.1.6 固定背景图片 1334.2 案例实战 1344.2.1 设置网页背景颜色 1354.2.2 设置带花纹边框 1364.2.3 设置永远固定的背景 1434.2.4 设置圆润的栏目模块 1444.2.5 设计分栏版式 1494.2.6 设计滑动门菜单 1514.2.7 设计灯箱广告 1544.2.8 设

10、计博客首页效果 157机房操作课堂小结（3分钟）小结通过css样式设置不同类型的背景图像思考题、作业及其预习要求（2分钟）设置带花纹边框教学课题设置网页背景页面标准班合班教学目的了解背景图形的几种定义方法重点难点掌握背景样式的各种设置教学方法上机实践操作主要教学过程上机实践操作教学手段教学过程设 计（2学时）上机实践机房操作课堂小结（3分钟）小结通过css样式设置不同类型的背景图像思考题、作业及其预习要求（2分钟）设置永远固定的背景教学课题第5章 使用CSS控制列表样式标准班合班教学目的了解列表样式的设置了解定义项目的图片重点难点掌握列表样式的运用教学方法机房演示教学，上机实践操作主要教学过程

11、机房演示教学，上机实践操作教学手段教学过程设 计（4学时）5.1 列表样式设置基础 1645.1.1 设置列表项符号 1645.1.2 定义项目的图片符号 1665.1.3 列表的横竖转换 1675.2 案例实战 1695.2.1 设计新闻栏目 1695.2.2 设计导航菜单 1735.2.3 设计多级菜单 1775.2.4 列表排版的应用 1825.2.5 使用列表实现图文混排效果 186机房操作课堂小结（3分钟）小结通过CSS样式定义列表样式思考题、作业及其预习要求（2分钟）设计多级菜单教学课题第6章 使用CSS设计表格样式标准班合班教学目的认识表格样式重点难点掌握表格样式的设置和运用教学

12、方法机房演示教学，上机实践操作主要教学过程机房演示教学，上机实践操作教学手段教学过程设 计（4学时）6.1 表格样式设置基础 1936.1.1 设置表格颜色 1936.1.2 设置表格边框 1946.2 案例实战 1966.2.1 美化表格 1976.2.2 设计高效的表格 2006.2.3 让表格更易用 2046.2.4 表格布局 207机房操作课堂小结（3分钟）小结表格在CSS中如何运用思考题、作业及其预习要求（2分钟）设计高效的表格教学课题第7章 使用CSS设计表单样式标准班合班教学目的认识表单样式重点难点掌握定义字体样式、边框样式、背景样式教学方法机房演示教学，上机实践操作主要教学过程

13、机房演示教学，上机实践操作教学手段教学过程设 计（4学时）7.1 表单样式设置基础 2127.1.1 表单基本结构 2127.1.2 设置基本样式 2167.1.3 定义字体样式 2217.1.4 定义边框样式 2227.1.5 定义背景样式 2247.2 案例实战 2287.2.1 设计多彩下拉菜单样式 2287.2.2 设计注册表单 2307.2.3 设计调查表 2357.2.4 设计反馈表 240机房操作课堂小结（3分钟）小结表单的运用方式思考题、作业及其预习要求（2分钟）设计注册表单教学课题第8章 使用CSS定义链接样式标准班合班教学目的了解链接样式设置重点难点掌握设置类型指示样式、定

14、义已访问样式教学方法机房演示教学，上机实践操作主要教学过程机房演示教学，上机实践操作教学手段教学过程设 计（4学时） 8.1 链接样式设置基础 2478.1.1 设置链接样式 2478.1.2 设计下划线样式 2488.1.3 设置类型指示样式 2498.1.4 定义按钮样式 2518.1.5 定义已访问样式 2548.1.6 链接提示样式 2548.2 案例实战 2568.2.1 鼠标样式 2568.2.2 设计菜单样式 2598.2.3 设计苹果导航菜单 2618.2.4 块状选项卡 2668.2.5 图片浏览 271机房操作课堂小结（3分钟）小结链接样式的设置方法以及定义按钮思考题、作业

15、及其预习要求（2分钟）如何设置类型指示样式教学课题第9章 网页排版和DIV+CSS布局标准班合班教学目的了解CSS盒模型重点难点掌握外边距、内边距、边框、宽和高的用法教学方法机房演示教学，上机实践操作主要教学过程机房演示教学，上机实践操作教学手段教学过程设 计（4学时）9.1 CSS盒模型 2769.1.1 认识盒模型 2769.1.2 外边距 2789.1.3 内边距 2819.1.4 边框 2849.1.5 宽和高 2849.2 网页重构 2879.2.1 设置文档类型 2879.2.2 选择标签 2939.2.3 案例实战：尝试重构禅意花园 2969.3 网页排版 2999.3.1 网页

16、排版基本原则 2999.3.2 标准网页版式基本形式 3009.3.3 网页排版基本方法 3009.4 DIV+CSS布局 3059.4.1 布局空间 3059.4.2 布局位置 3079.4.3 布局环绕 3099.4.4 清除浮动 3119.4.5 布局嵌套 3139.4.6 调整布局间距 3169.5 案例实战 3219.5.1 两列布局 3229.5.2 三列布局 327 机房操作课堂小结（3分钟）小结学习网页排版基本方法思考题、作业及其预习要求（2分钟）如何调整布局间距教学课题第10章 用CSS定位控制网页布局标准班合班教学目的了解什么是CSS定位重点难点掌握静态定位、绝对定位、相对

17、定位、固定定位教学方法机房演示教学，上机实践操作主要教学过程机房演示教学，上机实践操作教学手段教学过程设 计（4学时）10.1 CSS定位 33310.1.1 认识position 33310.1.2 静态定位 33310.1.3 绝对定位 33410.1.4 相对定位 33510.1.5 固定定位 33810.2 定位参照 33910.2.1 参照对象 33910.2.2 坐标值 34310.2.3 定位的特殊性 34410.3 定位层叠 34710.3.1 层叠顺序 34710.3.2 嵌套层叠顺序 34910.3.3 CSS层叠框 35110.3.4 CSS层叠常见问题 35410.4

18、案例实战 35710.4.1 画册式网页布局 35710.4.2 展览式网页布局 36110.4.3 浪漫式网页布局 366机房操作课堂小结（3分钟）小结定位的特殊性思考题、作业及其预习要求（2分钟）CSS层叠常见问题教学课题第11章 解决CSS设计中的常见问题标准班合班教学目的认识IE条件语句重点难点掌握IE条件语句基本用法教学方法机房演示教学，上机实践操作主要教学过程机房演示教学，上机实践操作教学手段教学过程设 计（4学时）11.1 IE条件语句 37311.1.1 认识IE条件语句 37311.1.2 IE条件语句基本用法 37411.1.3 案例实战：设计兼容的多级菜单 37611.2

19、 CSS渲染及问题 38011.2.1 开启和关闭IE布局特性 38111.2.2 设置Layout特性的方法 38111.2.3 问题1：不能自动展开包含框 38411.2.4 问题2：包含浮动布局的问题与处理 38711.2.5 问题3：相邻浮动布局的问题与处理 38911.2.6 问题4：列表布局的问题与处理 39011.2.7 问题5：定位布局的问题与处理 39211.3 常用浏览器解析问题和解决方法 39411.3.1 兼容IE6版本浏览器 39511.3.2 兼容IE5系列版本浏览器 39611.3.3 兼容IE7版本浏览器 39811.3.4 兼容FF等标准浏览器 39911.3

20、.5 问题1：超链接的Bug 39911.3.6 问题2：内容与背景分离的Bug 40011.3.7 问题3：IE6躲躲猫Bug 40211.3.8 问题4：IE6多余字符Bug 40311.4 案例实战 40311.4.1 3列等高布局 40311.4.2 3列浮动布局 408机房操作课堂小结（3分钟）小结开启和关闭IE布局特性思考题、作业及其预习要求（2分钟）列表布局的问题与处理教学课题第12章 旅游酒店网站标准班合班教学目的了解网站页面效果分析重点难点掌握首页策划设计、网页设计与重构教学方法机房演示教学，上机实践操作主要教学过程机房演示教学，上机实践操作教学手段教学过程设 计（4学时）1

21、2.1 网站页面效果分析 41112.1.1 “旅游度假”页面效果分析 41112.1.2 “预定酒店”页面效果分析 41112.2 首页策划设计 41212.3 网页设计与重构 41412.3.1 画草图和设计图 41412.3.2 切图 41712.3.3 主体重构 41912.4 页面布局 42212.4.1 设计页面基本样式 42212.4.2 设计页头布局和样式 42212.4.3 设计搜索和幻灯区布局和样式 42512.4.4 设计左侧引导区布局和样式 42712.4.5 设计内容区样式 42812.4.6 设计右侧专题栏样式 431机房操作课堂小结（3分钟）小结设计页面基本样式思考题、作业及其预习要求（2分钟）了解设计搜索和幻灯区布局和样式