Web前端开发任务式教程（HTML5+CSS3）（微课版）

本书共10个模块, 模块1-3介绍HTML知识, 包括文件结构、开发环境和常用元素, 如图像、音频、视频、超链接、表格、表单等元素的用法, 完成了网页内容的设计。模块4-6介绍CSS基础知识, 包括CSS语法、选择器和元素基本样式, 重点介绍了元素的框模型和背景样式, 基于图像背景和背景起点属性实现了图像精灵, 完成了网页样式的初步设计。模块7-9介绍CSS3知识, 包括定位、过渡、动画和布局的知识, 基于定位、过渡和动画技术设计了轮播图像、菜单和幽灵按钮等典型网页效果, 基于布局技术设计了常用网页布局, 包括自适应响应式布局, 完成了实用复杂网页和网页实用效果的设计。模块10为综合实训。

模块1 Web开发概述 1 任务1.1 书写一封家信 1 1.1.1 Web标准 2 1.1.2 HTML文件 3 1.1.3 HTML项目 5 1.1.4 文本格式化元素 6 1.1.5 任务实现 7 任务1.2 设计一个公告 8 1.2.1 HTML注释 8 1.2.2 HTML头部元素 8 1.2.3 HTML元素分类 10 1.2.4 简单HTML元素 10 1.2.5 字符实体 14 1.2.6 元素的通用属性 15 1.2.7 任务实现 15 模块小结1 16 随堂测试1 16 课后实践1 18 模块2 常用HTML元素 19 任务2.1 设计一个海报 19 2.1.1 img元素 20 2.1.2 video元素 23 2.1.3 audio元素 24 2.1.4 object元素 24 2.1.5 任务实现 26 任务2.2 设计海报导航 27 2.2.1 a元素 27 2.2.2 列表元素 32 2.2.3 任务实现 34 任务2.3 设计网页底部导航 36 2.3.1 map元素 36 2.3.2 area元素 36 2.3.3 图像映射 37 2.3.4 任务实现 38 模块小结2 39 随堂测试2 39 课后实践2 40 模块3 表格与表单元素 41 任务3.1 设计通讯录表格 41 3.1.1 基本表格元素 42 3.1.2 复杂表格元素 46 3.1.3 任务实现 47 任务3.2 设计收货地址表单 48 3.2.1 form元素 48 3.2.2 input元素 49 3.2.3 下拉列表元素 50 3.2.4 textarea元素 51 3.2.5 任务实现 52 模块小结3 55 随堂测试3 55 课后实践3 56 模块4 CSS语法基础 57 任务4.1 规范海报样式设计 57 4.1.1 CSS语法规则 58 4.1.2 样式声明方式 59 4.1.3 简单CSS属性 60 4.1.4 简单选择器 62 4.1.5 任务实现 67 任务4.2 设计通讯录表格样式 68 4.2.1 层级选择器 69 4.2.2 伪类选择器 71 4.2.3 任务实现 76 任务4.3 规范书信的格式 77 4.3.1 伪元素选择器 77 4.3.2 属性选择器 80 4.3.3 任务实现 83 任务4.4 掌握样式优先级规则 85 4.4.1 声明方式的优先级 85 4.4.2 样式的三大特性 87 4.4.3 样式优先级规则 91 模块小结4 92 随堂测试4 93 课后实践4 95 模块5 元素框模型 97 任务5.1 使用框模型布局海报 97 5.1.1 元素框模型定义 98 5.1.2 边距 99 5.1.3 display属性 104 5.1.4 overflow属性 107 5.1.5 任务实现 110 任务5.2 设计一个展板 113 5.2.1 边框 114 5.2.2 圆角边框 118 5.2.3 box-sizing属性 121 5.2.4 任务实现 123 任务5.3 展板再设计 125 5.3.1 阴影 125 5.3.2 轮廓 128 5.3.3 任务实现 129 模块小结5 131 随堂测试5 132 课后实践5 132 模块6 元素背景 134 任务6.1 设计展板的详情 134 6.1.1 图像背景 136 6.1.2 渐变背景 137 6.1.3 任务实现 140 任务6.2 优化展板设计 143 6.2.1 图像背景相关的属性 144 6.2.2 background属性 145 6.2.3 图像精灵 146 6.2.4 任务实现 150 模块小结6 151 随堂测试6 152 课后实践6 152 模块7 元素定位 153 任务7.1 掌握定位的语法 153 7.1.1 定位属性 154 7.1.2 基本定位 155 7.1.3 黏性定位 162 任务7.2 应用子绝父相定位 164 7.2.1 设计内容标识 164 7.2.2 设计轮播图布局 166 7.2.3 设计下拉式菜单 168 7.2.4 设计弹出式菜单 171 模块小结7 174 随堂测试7 174 课后实践7 176 模块8 元素过渡与动画 177 任务8.1 掌握转换与过渡的语法 177 8.1.1 浏览器前缀 177 8.1.2 转换属性 178 8.1.3 过渡属性 183 任务8.2 设计过渡效果 186 8.2.1 设计欢迎动画 186 8.2.2 设计幽灵按钮 188 任务8.3 设计轮播图的动画 194 8.3.1 动画关键帧 195 8.3.2 动画属性 196 8.3.3 任务实现 200 模块小结8 203 随堂测试8 203 课后实践8 204 模块9 网页布局技术 205 任务9.1 设计浮动布局 205 9.1.1 float属性 206 9.1.2 clear属性 213 9.1.3 任务实现 214 任务9.2 设计响应式布局 215 9.2.1 网页视口 216 9.2.2 媒体查询 219 9.2.3 网格视图 222 9.2.4 任务实现 224 任务9.3 设计弹性布局 228 9.3.1 弹性布局相关概念 228 9.3.2 容器属性 229 9.3.3 项目属性 231 9.3.4 任务实现 234 模块小结9 236 随堂测试9 237 课后实践9 237 模块10 网站设计综合实训 238 任务10.1 设计网页布局 238 10.1.1 布局分析 238 10.1.2 布局设计 239 任务10.2 设计网页菜单 239 10.2.1 设计顶部导航主菜单 239 10.2.2 设计侧边帮助菜单 244 任务10.3 设计网页内容 249 10.3.1 设计轮播图 249 10.3.2 设计推荐信息 249 10.3.3 设计中分广告 253 10.3.4 设计新闻与活动 253 10.3.5 设计搜索框、链接与页脚 253 任务10.4 总结网站设计 253 附录 框架 254 参考文献 258