CSS+DIV网页样式与布局课程标准

1、序号课程单元第1章 CSS样式设计基础视频讲解：2小时38分钟1.1 设计良好的网页结构1.1.1 选用符合语义的标签1.1.2 文档类型和浏览器模式1.2 初识CSS1.2.1 为什么学习CSS1.2.2 CSS基本语法1.2.3 设计第一个实例1.3 CSS选择器1.3.1 CSS选择器概述1.3.2 标签选择器1.3.3 ID选择器1.3.4 类选择器1.3.5 伪类和伪对象选择器1.3.6 子选择器1.3.7 相邻选择器1.3.8 属性选择器1.3.9 通用选择器1.3.10 包含选择器1.3.11 分组选择器1.3.12 指定选择器1.4 CSS基本特性1.4.1 层叠和特殊性1.4

2、.2 继承1.5 样式表规划、组织和维护1.5.1 对文档应用样式1.5.2 对代码进行注释1.5.3 样式文档1.5.4 组织样式表以便简化维护1.6 CSS属性和属性值1.6.1 CSS属性1.6.2 CSS单位1.6.3 设置颜色第2章 使用CSS设置字体和文本样式视频讲解：2小时12分钟2.1 字体和文本样式基础2.1.1 定义字体类型2.1.2 定义字体大小2.1.3 定义字体颜色2.1.4 定义字体粗细2.1.5 定义斜体字体2.1.6 定义下划线、删除线和顶划线2.1.7 定义字体大小写2.1.8 定义文本对齐2.1.9 定义垂直对齐2.1.10 定义字间距和行间距2.1.11

3、定义行间距2.1.12 定义缩进2.2 案例实战2.2.1 设计百度Logo2.2.2 设置标题样式2.2.3 设置正文样式2.2.4 设置文本样式2.2.5 设置文本段样式2.2.6 设置段落版式样式2.2.7 设计单页图文混排版式第3章 使用CSS设置图片样式视频讲解：1小时32分钟3.1 图片样式设置基础3.1.1 定义图片边框3.1.2 定义图片大小3.1.3 定义图片的横向对齐3.1.4 定义图片的纵向对齐3.1.5 设置文字环绕效果3.2 案例实战3.2.1 图文混排3.2.2 图片布局3.2.3 多图排列3.2.4 阴影图片3.2.5 圆角图片3.2.6 设计圆角栏目第4章 使用

4、CSS控制背景图像视频讲解：1小时38分钟4.1 背景样式设置基础4.1.1 设置页面背景颜色4.1.2 设置背景颜色给页面分块4.1.3 定义背景图片4.1.4 背景图片的重复4.1.5 定义背景图片的位置4.1.6 固定背景图片4.2 案例实战4.2.1 设置网页背景颜色4.2.2 设置带花纹边框4.2.3 设置永远固定的背景4.2.4 设置圆润的栏目模块4.2.5 设计分栏版式4.2.6 设计滑动门菜单4.2.7 设计灯箱广告4.2.8 设计博客首页效果第5章 使用CSS控制列表样式视频讲解：55分钟5.1 列表样式设置基础5.1.1 设置列表项符号5.1.2 定义项目的图片符号5.1.

5、3 列表的横竖转换5.2 案例实战5.2.1 设计新闻栏目5.2.2 设计导航菜单5.2.3 设计多级菜单5.2.4 列表排版的应用5.2.5 使用列表实现图文混排效果第6章 使用CSS设计表格样式视频讲解：45分钟6.1 表格样式设置基础6.1.1 设置表格颜色6.1.2 设置表格边框6.2 案例实战6.2.1 美化表格6.2.2 设计高效的表格6.2.3 让表格更易用6.2.4 表格布局第7章 使用CSS设计表单样式视频讲解：1小时45分钟7.1 表单样式设置基础7.1.1 表单基本结构7.1.2 设置基本样式7.1.3 定义字体样式7.1.4 定义边框样式7.1.5 定义背景样式7.2

6、案例实战7.2.1 设计多彩下拉菜单样式7.2.2 设计注册表单7.2.3 设计调查表7.2.4 设计反馈表第8章 使用CSS定义链接样式视频讲解：1小时12分钟8.1 链接样式设置基础8.1.1 设置链接样式8.1.2 设计下划线样式8.1.3 设置类型指示样式8.1.4 定义按钮样式8.1.5 定义已访问样式8.1.6 链接提示样式8.2 案例实战8.2.1 鼠标样式8.2.2 设计菜单样式8.2.3 设计苹果导航菜单8.2.4 块状选项卡8.2.5 图片浏览第9章 网页排版和DIV+CSS布局视频讲解：2小时47分钟9.1 CSS盒模型9.1.1 认识盒模型9.1.2 外边距9.1.3

7、内边距9.1.4 边框9.1.5 宽和高9.2 网页重构9.2.1 设置文档类型9.2.2 选择标签9.2.3 案例实战：尝试重构禅意花园9.3 网页排版9.3.1 网页排版基本原则9.3.2 标准网页版式基本形式9.3.3 网页排版基本方法9.4 DIV+CSS布局9.4.1 布局空间9.4.2 布局位置9.4.3 布局环绕9.4.4 清除浮动9.4.5 布局嵌套9.4.6 调整布局间距9.5 案例实战9.5.1 两列布局9.5.2 三列布局第10章 用CSS定位控制网页布局视频讲解：1小时53分钟10.1 CSS定位10.1.1 认识position10.1.2 静态定位10.1.3 绝对

8、定位10.1.4 相对定位10.1.5 固定定位10.2 定位参照10.2.1 参照对象10.2.2 坐标值10.2.3 定位的特殊性10.3 定位层叠10.3.1 层叠顺序10.3.2 嵌套层叠顺序10.3.3 CSS层叠框10.3.4 CSS层叠常见问题10.4 案例实战10.4.1 画册式网页布局10.4.2 展览式网页布局10.4.3 浪漫式网页布局第11章 解决CSS设计中的常见问题视频讲解：2小时11.1 IE条件语句11.1.1 认识IE条件语句11.1.2 IE条件语句基本用法11.1.3 案例实战：设计兼容的多级菜单11.2 CSS渲染及问题11.2.1 开启和关闭IE布局特

9、性11.2.2 设置Layout特性的方法11.2.3 问题1：不能自动展开包含框11.2.4 问题2：包含浮动布局的问题与处理11.2.5 问题3：相邻浮动布局的问题与处理11.2.6 问题4：列表布局的问题与处理11.2.7 问题5：定位布局的问题与处理11.3 常用浏览器解析问题和解决方法11.3.1 兼容IE6版本浏览器11.3.2 兼容IE5系列版本浏览器11.3.3 兼容IE7版本浏览器11.3.4 兼容FF等标准浏览器11.3.5 问题1：超链接的Bug11.3.6 问题2：内容与背景分离的Bug11.3.7 问题3：IE6躲躲猫Bug11.3.8 问题4：IE6多余字符Bug1

10、1.4 案例实战11.4.1 3列等高布局11.4.2 3列浮动布局第12章 旅游酒店网站视频讲解：2小时18分钟12.1 网站页面效果分析12.1.1 旅游度假页面效果分析12.1.2 预定酒店页面效果分析12.2 首页策划设计12.3 网页设计与重构12.3.1 画草图和设计图12.3.2 切图12.3.3 主体重构12.4 页面布局12.4.1 设计页面基本样式12.4.2 设计页头布局和样式12.4.3 设计搜索和幻灯区布局和样式12.4.4 设计左侧引导区布局和样式12.4.5 设计内容区样式12.4.6 设计右侧专题栏样式第13章 新闻网站视频讲解：1小时20分钟13.1 网站页面

11、效果分析13.1.1 对话页面效果分析13.1.2 环球看点页面效果分析13.2 首页策划设计13.3 网页设计与重构13.3.1 画草图和设计图13.3.2 切图13.3.3 主体重构13.4 页面布局13.4.1 设计页面基本样式13.4.2 设计页头布局和样式13.4.3 设计主要新闻区布局和样式13.4.4 设计分类新闻区布局和样式第14章 使用JavaScript控制CSS样式视频讲解：2小时47分钟14.1 JavaScript基础14.1.1 在网页中嵌入JavaScript脚本14.1.2 JavaScript脚本在文档中的位置14.1.3 解决JavaScript脚本与CSS

12、样式冲突14.2 CSS脚本化传统控制方法14.2.1 认识Style对象14.2.2 读写行内样式14.2.3 读写样式表中样式14.2.4 访问网页实际样式14.3 控制CSS脚本的标准方法14.3.1 CSSStyleSheet接口14.3.2 CSSStyleRule接口14.3.3 CSSStyleDeclaration接口14.4 使用JavaScript控制元素大小14.4.1 读取元素的长宽样式值14.4.2 使用offsetWidth和offsetHeight属性读取元素的尺寸14.4.3 读取复杂结构中的元素尺寸14.4.4 读取浏览器窗口大小14.5 使用JavaScri

13、pt定位14.5.1 在窗口中的位置14.5.2 相对父元素的位置14.5.3 相对包含块的位置14.5.4 定义偏移位置14.5.5 定义相对位置14.5.6 确定光标位置14.5.7 确定光标的相对位置14.5.8 确定滚动条的位置14.5.9 定义滚动条的位置14.6 使用JavaScript设置显隐效果14.6.1 设置显隐效果14.6.2 设置透明度14.6.3 控制动画时长14.6.4 设计滑动效果第15章 使用CSS设计XML文档样式视频讲解：43分钟15.1 XML基础15.1.1 XML文档基本结构15.1.2 声明15.1.3 处理指令15.1.4 注释15.1.5 标签1

14、5.1.6 属性15.2 设置XML文档样式15.2.1 CSS样式表15.2.2 XSL样式表15.3 CSS与XML文档关联15.3.1 直接嵌入CSS样式15.3.2 导入外部CSS样式表文件15.3.3 import15.4 案例实战15.4.1 设计诗情画意图文效果15.4.2 设计新闻版面效果第16章 使用CSS滤镜视频讲解：43小时分钟16.1 CSS滤镜概述16.1.1 基本用法16.1.2 恰当选用滤镜16.2 常用CSS滤镜16.2.1 通道（Alpha）16.2.2 模糊（Blur）16.2.3 运动模糊（MotionBlur）16.2.4 透明色（Chroma）16.2

15、.5 翻转（Flip）16.2.6 光晕（Glow）16.2.7 灰度（Gray）16.2.8 反色（Invert）16.2.9 遮罩（Mask）16.2.10 阴影（Shadow）16.2.11 X射线（Xray）16.2.12 浮雕（Emboss）16.2.13 波浪（Wave）16.3 案例实战学习任务参考学时第1章 CSS样式设计基础视频讲解：2小时38分钟1.1 设计良好的网页结构1.1.1 选用符合语义的标签1.1.2 文档类型和浏览器模式1.2 初识CSS1.2.1 为什么学习CSS1.2.2 CSS基本语法1.2.3 设计第一个实例1.3 CSS选择器1.3.1 CSS选择器概

16、述1.3.2 标签选择器1.3.3 ID选择器1.3.4 类选择器1.3.5 伪类和伪对象选择器1.3.6 子选择器1.3.7 相邻选择器1.3.8 属性选择器1.3.9 通用选择器1.3.10 包含选择器1.3.11 分组选择器1.3.12 指定选择器1.4 CSS基本特性1.4.1 层叠和特殊性1.4.2 继承1.5 样式表规划、组织和维护1.5.1 对文档应用样式1.5.2 对代码进行注释1.5.3 样式文档1.5.4 组织样式表以便简化维护1.6 CSS属性和属性值1.6.1 CSS属性1.6.2 CSS单位1.6.3 设置颜色第2章 使用CSS设置字体和文本样式视频讲解：2小时12分

17、钟2.1 字体和文本样式基础2.1.1 定义字体类型2.1.2 定义字体大小2.1.3 定义字体颜色2.1.4 定义字体粗细2.1.5 定义斜体字体2.1.6 定义下划线、删除线和顶划线2.1.7 定义字体大小写2.1.8 定义文本对齐2.1.9 定义垂直对齐2.1.10 定义字间距和行间距2.1.11 定义行间距2.1.12 定义缩进2.2 案例实战2.2.1 设计百度Logo2.2.2 设置标题样式2.2.3 设置正文样式2.2.4 设置文本样式2.2.5 设置文本段样式2.2.6 设置段落版式样式2.2.7 设计单页图文混排版式第3章 使用CSS设置图片样式视频讲解：1小时32分钟3.1

18、 图片样式设置基础3.1.1 定义图片边框3.1.2 定义图片大小3.1.3 定义图片的横向对齐3.1.4 定义图片的纵向对齐3.1.5 设置文字环绕效果3.2 案例实战3.2.1 图文混排3.2.2 图片布局3.2.3 多图排列3.2.4 阴影图片3.2.5 圆角图片3.2.6 设计圆角栏目第4章 使用CSS控制背景图像视频讲解：1小时38分钟4.1 背景样式设置基础4.1.1 设置页面背景颜色4.1.2 设置背景颜色给页面分块4.1.3 定义背景图片4.1.4 背景图片的重复4.1.5 定义背景图片的位置4.1.6 固定背景图片4.2 案例实战4.2.1 设置网页背景颜色4.2.2 设置带

19、花纹边框4.2.3 设置永远固定的背景4.2.4 设置圆润的栏目模块4.2.5 设计分栏版式4.2.6 设计滑动门菜单4.2.7 设计灯箱广告4.2.8 设计博客首页效果第5章 使用CSS控制列表样式视频讲解：55分钟5.1 列表样式设置基础5.1.1 设置列表项符号5.1.2 定义项目的图片符号5.1.3 列表的横竖转换5.2 案例实战5.2.1 设计新闻栏目5.2.2 设计导航菜单5.2.3 设计多级菜单5.2.4 列表排版的应用5.2.5 使用列表实现图文混排效果第6章 使用CSS设计表格样式视频讲解：45分钟6.1 表格样式设置基础6.1.1 设置表格颜色6.1.2 设置表格边框6.2

20、 案例实战6.2.1 美化表格6.2.2 设计高效的表格6.2.3 让表格更易用6.2.4 表格布局第7章 使用CSS设计表单样式视频讲解：1小时45分钟7.1 表单样式设置基础7.1.1 表单基本结构7.1.2 设置基本样式7.1.3 定义字体样式7.1.4 定义边框样式7.1.5 定义背景样式7.2 案例实战7.2.1 设计多彩下拉菜单样式7.2.2 设计注册表单7.2.3 设计调查表7.2.4 设计反馈表第8章 使用CSS定义链接样式视频讲解：1小时12分钟8.1 链接样式设置基础8.1.1 设置链接样式8.1.2 设计下划线样式8.1.3 设置类型指示样式8.1.4 定义按钮样式8.1

21、.5 定义已访问样式8.1.6 链接提示样式8.2 案例实战8.2.1 鼠标样式8.2.2 设计菜单样式8.2.3 设计苹果导航菜单8.2.4 块状选项卡8.2.5 图片浏览第9章 网页排版和DIV+CSS布局视频讲解：2小时47分钟9.1 CSS盒模型9.1.1 认识盒模型9.1.2 外边距9.1.3 内边距9.1.4 边框9.1.5 宽和高9.2 网页重构9.2.1 设置文档类型9.2.2 选择标签9.2.3 案例实战：尝试重构禅意花园9.3 网页排版9.3.1 网页排版基本原则9.3.2 标准网页版式基本形式9.3.3 网页排版基本方法9.4 DIV+CSS布局9.4.1 布局空间9.4

22、.2 布局位置9.4.3 布局环绕9.4.4 清除浮动9.4.5 布局嵌套9.4.6 调整布局间距9.5 案例实战9.5.1 两列布局9.5.2 三列布局第10章 用CSS定位控制网页布局视频讲解：1小时53分钟10.1 CSS定位10.1.1 认识position10.1.2 静态定位10.1.3 绝对定位10.1.4 相对定位10.1.5 固定定位10.2 定位参照10.2.1 参照对象10.2.2 坐标值10.2.3 定位的特殊性10.3 定位层叠10.3.1 层叠顺序10.3.2 嵌套层叠顺序10.3.3 CSS层叠框10.3.4 CSS层叠常见问题10.4 案例实战10.4.1 画册

23、式网页布局10.4.2 展览式网页布局10.4.3 浪漫式网页布局第11章 解决CSS设计中的常见问题视频讲解：2小时11.1 IE条件语句11.1.1 认识IE条件语句11.1.2 IE条件语句基本用法11.1.3 案例实战：设计兼容的多级菜单11.2 CSS渲染及问题11.2.1 开启和关闭IE布局特性11.2.2 设置Layout特性的方法11.2.3 问题1：不能自动展开包含框11.2.4 问题2：包含浮动布局的问题与处理11.2.5 问题3：相邻浮动布局的问题与处理11.2.6 问题4：列表布局的问题与处理11.2.7 问题5：定位布局的问题与处理11.3 常用浏览器解析问题和解决方

24、法11.3.1 兼容IE6版本浏览器11.3.2 兼容IE5系列版本浏览器11.3.3 兼容IE7版本浏览器11.3.4 兼容FF等标准浏览器11.3.5 问题1：超链接的Bug11.3.6 问题2：内容与背景分离的Bug11.3.7 问题3：IE6躲躲猫Bug11.3.8 问题4：IE6多余字符Bug11.4 案例实战11.4.1 3列等高布局11.4.2 3列浮动布局第12章 旅游酒店网站视频讲解：2小时18分钟12.1 网站页面效果分析12.1.1 旅游度假页面效果分析12.1.2 预定酒店页面效果分析12.2 首页策划设计12.3 网页设计与重构12.3.1 画草图和设计图12.3.2

25、 切图12.3.3 主体重构12.4 页面布局12.4.1 设计页面基本样式12.4.2 设计页头布局和样式12.4.3 设计搜索和幻灯区布局和样式12.4.4 设计左侧引导区布局和样式12.4.5 设计内容区样式12.4.6 设计右侧专题栏样式第13章 新闻网站视频讲解：1小时20分钟13.1 网站页面效果分析13.1.1 对话页面效果分析13.1.2 环球看点页面效果分析13.2 首页策划设计13.3 网页设计与重构13.3.1 画草图和设计图13.3.2 切图13.3.3 主体重构13.4 页面布局13.4.1 设计页面基本样式13.4.2 设计页头布局和样式13.4.3 设计主要新闻区

26、布局和样式13.4.4 设计分类新闻区布局和样式第14章 使用JavaScript控制CSS样式视频讲解：2小时47分钟14.1 JavaScript基础14.1.1 在网页中嵌入JavaScript脚本14.1.2 JavaScript脚本在文档中的位置14.1.3 解决JavaScript脚本与CSS样式冲突14.2 CSS脚本化传统控制方法14.2.1 认识Style对象14.2.2 读写行内样式14.2.3 读写样式表中样式14.2.4 访问网页实际样式14.3 控制CSS脚本的标准方法14.3.1 CSSStyleSheet接口14.3.2 CSSStyleRule接口14.3.3 CSSStyleDeclaration接口14.4 使用JavaSc