发布时间 : 星期六 文章(完整word版)HTML CSS JavaScript教学教案更新完毕开始阅读95d53190a2116c175f0e7cd184254b35eefd1a7d
第12讲
课时内容 使用CSS样式表 授课时间 80分钟 课时 2 通过CSS样式定义，可以将网页制作得更加绚丽多彩。采用CSS技术，可以有效地对教学内容 页面的布局、字体、颜色、背景和其他效果实现更加精确地控制。用CSS不仅可以做出令浏览者赏心悦目的网页，还能给网页添加许多特效 了解CSS简介 掌握CSS的使用 CSS的字体属性 颜色及背景属性 教学重点 文本属性 边距与填充属性 边框属性 定位属性 列表属性 光标属性 滤镜属性 内容大纲 12.1 认识CSS 12.2 使用CSS 12.2.1 CSS的基本语法 12.2.2 添加CSS的方法 12.3 字体属性 12.3.1 字体font-family 12.3.2 字号font-size 12.3.3 字体风格font-style 12.3.4 加粗字体font-weight 12.3.5 小写字母转为大写font-variant 12.3.6 字体复合属性 12.4 颜色和背景属性 12.4.1 颜色属性color 12.4.2 背景颜色background-color 12.4.3 背景图像background-image 12.4.4 重复背景图像background-repeat 12.4.5 背景附件background-attachment 12.4.6 背景位置background-position 12.4.7 背景复合属性background 12.5 段落属性 12.5.1 单词间隔word-spacing 12.5.2 字符间隔letter-spacing 12.5.3 文字修饰text-decoration 12.5.4 垂直对齐方式vertical-align 12.5.5 文本转换text-transform 12.5.6 水平对齐方式text-align 12.5.7 文本缩进text-indent 12.5.8 文本行高line-height 12.5.9 处理空白white-space 12.5.10 文本反排unicode-bidi、direction 12.6 外边距与内边距属性 12.6.1 上边距margin-top 12.6.2 其他边距margin-bottom、margin-left、margin-right 12.6.3 外边距复合属性margin 12.6.4 顶端内边距padding-top 12.6.5 其他内边距padding-bottom、padding-left、padding-right 12.6.6 内边距复合属性padding 12.7 边框属性 12.7.1 边框样式border-stye 12.7.2 边框宽度border-width 12.7.3 边框颜色border-color 12.7.4 边框属性border 12.8 定位属性 12.8.1 定位方式position 12.8.2 元素定位top、right、bottom、left 12.8.3 层叠顺序z-index 12.8.4 浮动属性float 12.8.5 清除属性clear 12.8.6 可视区域clip 12.8.7 层的宽度和高度width、height 12.8.8 超出范围overflow 12.8.9 可见属性visibility 12.9 列表属性 12.9.1 列表符号list-style-type 12.9.2 图像符号list-style-image 12.9.3 列表缩进list-style-position 12.9.4 列表复合属性list-style 12.10 光标属性cursor 12.11 滤镜属性 12.11.1 不透明度alpha 12.11.2 动感模糊blur 12.11.3 对颜色进行透明处理chroma 12.11.4 阴影效果dropShadow 12.11.5 对象翻转flipH、flipV 12.11.6 发光效果glow 12.11.7 处理灰度gray 12.11.8 反相invert 12.11.9 X光片效果xray 12.11.10 遮罩效果mask 12.11.11 波形滤镜wave 12.12练习题 第13讲
Web标准与CSS网2 授课时间 80分钟 课时 页布局实例 第12章讲述了CSS的基本语法，CSS可以控制字体大小、设置字体样式，目前更多地应用在网页布局上。本章将通过实例讲述CSS布局网页中的元素的方法。本章以CSS教学内容 布局为重点，探讨CSS布局的入门知识和布局网页元素的实例技巧。 课时内容 表单标记 插入表单对象 教学重点 菜单和列表 文本域标记 id标记 内容大纲 13.1 Web标准与CSS布局 13.1.1 什么是Web标准 13.1.2 CSS布局的优势 13.2 DIV+CSS布局网页基础 13.2.1 认识DIV 13.2.2 一列固定宽度 13.2.3 一列自适应 13.2.4 两列固定宽度 13.2.5 两列宽度自适应 13.2.6 两列右列宽度自适应 13.3 使用CSS设计网站导航栏 13.3.1 实现背景变换的导航菜单 13.3.2 利用CSS制作横向导航 13.4 使用CSS设计表单样式 13.4.1 改变按钮的背景颜色和文字颜色 13.4.2 设置文本框的样式 13.4.3 设计文本框中的文字样式 13.5 字体及段落样式设计 13.5.1 利用CSS控制字体大小和行距 13.5.2 制作光晕文字效果 13.6 使用CSS设计图片样式 13.6.1 鼠标指针移上时图片渐变的效果 13.6.2 设计不重复出现的背景 13.7 使用CSS控制链接样式 13.7.1 使用CSS实现鼠标指针形状改变 13.7.2 鼠标指针移到链接文字上时改变文字大小或颜色 13.8练习题 第14讲
移动网页设计基础2 授课时间 80分钟 课时 CSS3 CSS3是CSS规范的最新版本，在CSS2.1的基础上增加了很多强大的新功能，以帮助开发人员解决一些问题，例如圆角功能、多背景、透明度、阴影等功能等。CSS2.1是教学内容 单一的规范，而CSS3被划分成几个模块组，每个模块组都有自己的规范。这样的好处是整个CSS3的规范发布不会因为部分难缠的部分而影响其他模块的推进。 课时内容 边框 背景 文本 多列 教学重点 转换 过渡 动画 用户界面 内容大纲 14.1 边框 14.1.1 圆角边框border-radius 14.1.2 边框图像border-image 14.1.3 边框阴影box-shadow 14.2 背景 14.2.1 背景图片尺寸background-size 14.2.2 背景图片定位区域background-origin 14.2.3 背景绘制区域background-clip 14.3 文本 14.3.1 文本阴影text-shadow 14.3.2 强制换行word-wrap 14.3.3 文本溢出text-overflow 14.3.4 文字描边text-stroke 14.3.5 文本填充颜色text-fill-color 14.4 多列 14.4.1 创建多列column-count 14.4.2 列的宽度column-width 14.4.3 列的间隔column-gap 14.4.4 列的规则column-rule 14.5 转换 14.5.1 移动translate 14.5.2 旋转rotate 14.5.3 缩放scale 14.5.4 扭曲skew 14.5.5 矩阵matrix()