WEB前端开发任务驱动式教程(HTML5+CSS3+JAVASCRIPT)/汪婵婵 汪婵婵 著 大中专 文轩网

第一单元 Web基础知识 任务1 搭建开发环境 1 1.1 知识准备 1 1.1.1 Web与Internet 1 1.1.2 Web的工作原理 2 1.1.3 Web页的类型 3 1.1.4 HTML5概述 3 1.2 实战演练――搭建开发环境 3 1.2.1 网页编辑软件的安装 3 1.2.2 浏览器的安装 5 1.3 强化训练――创建第一个HTML5页面 5 1.3.1 创建和管理站点 5 1.3.2 创建和保存HTML5文档 7 1.4 课后实训 8 第二单元 HTML5语言基础 任务2 文字与段落排版 10 2.1 知识准备 10 2.1.1 HTML5文档格式 10 2.1.2 标签的属性 11 2.1.3 文本标签 12 2.1.4 分隔标签 14 2.1.5 序列标签 16 2.2 实战演练――制作“科技馆参观须知”网页 18 2.2.1 网页效果图 18 2.2.2 制作过程 19 2.2.3 代码分析 19 2.3 强化训练――制作“我家菜馆”点菜单网页 20 2.3.1 网页效果图 20 2.3.2 制作过程 20 2.3.3 代码分析 21 2.4 课后实训 21 任务3 图像和超链接 22 3.1 知识准备 22 3.1.1 图像标签 22 3.1.2 绝对路径和相对路径 23 3.1.3 超链接标签 24 3.1.4 锚点链接 25 3.2 实战演练――制作“网页技术介绍”网页 27 3.2.1 网页效果图 27 3.2.2 制作过程 27 3.2.3 代码分析 29 3.3 强化训练――制作“文章故事网”网页 29 3.3.1 网页效果图 29 3.3.2 制作过程 30 3.3.3 代码分析 31 3.4 课后实训 31 第三单元 HTML5新增标签及属性 任务4 结构标签和分组标签 32 4.1 知识准备 32 4.1.1 结构标签 32 4.1.2 分组标签 39 4.2 实战演练――制作“唐诗欣赏”网页 41 4.2.1 网页效果图 41 4.2.2 制作过程 41 4.2.3 代码分析 44 4.3 强化训练――制作“温州地标性建筑”网页 45 4.3.1 网页效果图 45 4.3.2 制作过程 45 4.3.3 代码分析 47 4.4 课后实训 48 任务5 页面交互标签、层次语义标签和全局属性 48 5.1 知识准备 48 5.1.1 页面交互标签 48 5.1.2 层次语义标签 51 5.1.3 全局属性 53 5.2 实战演练――制作“书评网”网页 56 5.2.1 网页效果图 56 5.2.2 制作过程 57 5.2.3 代码分析 60 5.3 强化训练――制作“面试应答技巧”网页 60 5.3.1 网页效果图 60 5.3.2 制作过程 61 5.3.3 代码分析 63 5.4 课后实训 63 第四单元 CSS3基础 任务6 标记选择器和类选择器 65 6.1 知识准备 65 6.1.1 CSS简介 65 6.1.2 CSS样式规则 65 6.1.3 CSS样式的引入 66 6.1.4 CSS样式的优先级 68 6.1.5 标记选择器 68 6.1.6 类选择器 69 6.2 实战演练――制作“美化文章”网页 70 6.2.1 网页效果图 70 6.2.2 制作过程 70 6.2.3 代码分析 72 6.3 强化训练――制作“图文混排”网页 72 6.3.1 网页效果图 72 6.3.2 制作过程 73 6.3.3 代码分析 74 6.4 课后实训 75 任务7 链接伪类和CSS样式面板 75 7.1 知识准备 75 7.1.1 链接伪类 75 7.1.2 CSS样式面板 77 7.2 实战演练――制作“散文欣赏”网页 77 7.2.1 网页效果图 77 7.2.2 制作过程 78 7.2.3 代码分析 85 7.3 强化训练――制作“热点新闻”列表 85 7.3.1 网页效果图 85 7.3.2 制作过程 86 7.3.3 代码分析 91 7.4 课后实训 91 任务8 id选择器、伪选择器和表格样式 92 8.1 知识准备 92 8.1.1 id选择器 92 8.1.2 伪选择器 93 8.1.3 表格 94 8.2 实战演练――制作“鞋子尺码对照单”网页 96 8.2.1 网页效果图 96 8.2.2 制作过程 96 8.2.3 代码分析 98 8.3 强化训练――制作“婴儿身高体重标准表”网页 99 8.3.1 网页效果图 99 8.3.2 制作过程 100 8.3.3 代码分析 102 8.4 课后实训 103 任务9 复合选择器、通配符选择器 103 9.1 知识准备 103 9.1.1 复合选择器 103 9.1.2 通配符选择器 106 9.1.3 同时应用多个样式 106 9.2 实战演练――制作“寓言故事”网页 107 9.2.1 网页效果图 107 9.2.2 制作过程 108 9.2.3 代码分析 110 9.3 强化训练――制作“诗词欣赏”网页 110 9.3.1 网页效果图 110 9.3.2 制作过程 111 9.3.3 代码分析 116 9.4 课后实训 116 第五单元 盒子模型 任务10 盒子模型及应用 119 10.1 知识准备 119 10.1.1 盒子模型的概念 119 10.1.2 边框的设置 120 10.1.3 内边距的设置 125 10.1.4 外边距的设置 126 10.2 实战演练――制作“古诗文欣赏”网页 128 10.2.1 网页效果图 128 10.2.2 制作过程 128 10.2.3 代码分析 129 10.3 强化训练――制作“散文赏析”网页 130 10.3.1 网页效果图 130 10.3.2 制作过程 130 10.3.3 代码分析 132 10.4 课后实训 133 任务11 元素的浮动 133 11.1 知识准备 133 11.1.1 元素的类型及转换 133 11.1.2 overflow属性 135 11.1.3 元素的浮动 136 11.1.4 清除浮动 139 11.2 实战演练――制作“网站导航条”网页 144 11.2.1 网页效果图 144 11.2.2 制作过程 145 11.2.3 代码分析 146 11.3 强化训练――制作“浪漫花语百科网”网页 146 11.3.1 网页效果图 146 11.3.2 制作过程 146 11.3.3 代码分析 150 11.4 课后实训 151 任务12 元素的定位 152 12.1 知识准备 152 12.1.1 元素的定位模式与边偏移 152 12.1.2 静态定位 152 12.1.3 相对定位 152 12.1.4 绝对定位 154 12.1.5 固定定位 156 12.1.6 z-index层叠等级属性 156 12.2 实战演练――制作“旅游景点推荐网”banner 157 12.2.1 网页效果图 157 12.2.2 制作过程 157 12.2.3 代码分析 159 12.3 强化训练――制作“个人博客首页”网页 160 12.3.1 网页效果图 160 12.3.2 制作过程 160 12.3.3 代码分析 163 12.4 课后实训 164 任务13 阴影与渐变属性 164 13.1 知识准备 164 13.1.1 box-shadow属性 164 13.1.2 box-sizing属性 165 13.1.3 线性渐变 167 13.1.4 径向渐变 168 13.1.5 重复渐变 168 13.1.6 Web字体图标 170 13.2 实战演练――制作“网站广告栏”网页 171 13.2.1 网页效果图 171 13.2.2 制作过程 171 13.2.3 代码分析 173 13.3 强化训练――制作“旅游攻略网”网页 174 13.3.1 网页效果图 174 13.3.2 制作过程 175 13.3.3 代码分析 179 13.4 课后实训 181 任务14 过渡与变形属性 181 14.1 知识准备 181 14.1.1 过渡属性 181 14.1.2 变形属性 183 14.2 实战演练――制作“产品展示”网页 184 14.2.1 网页效果图 184 14.2.2 制作过程 185 14.2.3 代码分析 186 14.3 强化训练――制作“商品评论”网页 187 14.3.1 网页效果图 187 14.3.2 制作过程 187 14.3.3 代码分析 191 14.4 课后实训 191 第六单元 HTML5表单的应用 任务15 表单与input元素 194 15.1 知识准备 194 15.1.1 认识表单 194 15.1.2 创建表单 194 15.1.3 input元素及属性 195 15.2 实战演练――制作“登录界面”网页 196 15.2.1 网页效果图 196 15.2.2 制作过程 196 15.2.3 代码分析 198 15.3 强化训练――制作“简历”表单 199 15.3.1 网页效果图 199 15.3.2 制作过程 200 15.3.3 代码分析 203 15.4 课后实训 204 任务16 其他表单元素与表单验证 204 16.1 知识准备 204 16.1.1 其他表单元素 204 16.1.2 表单验证方法 207 16.1.3 正则表达式 208 16.2 实战演练――制作“商品订购”表单 210 16.2.1 网页效果图 210 16.2.2 制作过程 210 16.2.3 代码分析 213 16.3 强化训练――制作“会员注册”表单 213 16.3.1 网页效果图 213 16.3.2 制作过程 214 16.3.3 代码分析 216 16.4 课后实训 217 第七单元 网页多媒体 任务17 视频与音频 218 17.1 知识准备 218 17.1.1 嵌入视频 218 17.1.2 嵌入音频 219 17.1.3 ＜source＞标签 219 17.1.4 视频与音频的DOM操作 220 17.2 实战演练――制作“音乐播放器”网页 221 17.2.1 网页效果图 221 17.2.2 制作过程 221 17.2.3 代码分析 223 17.3 强化训练――制作“视频播放”网页 223 17.3.1 网页效果图 223 17.3.2 制作过程 224 17.3.3 代码分析 225 17.4 课后实训 225 第八单元 JavaScript基础 任务18 JavaScript的应用 226 18.1 知识准备 226 18.1.1 JavaScript简介 226 18.1.2 JavaScript语言基础 228 18.1.3 JavaScript函数 230 18.1.4 事件及事件驱动 231 18.1.5 JavaScript对象 233 18.1.6 BOM对象 238 18.1.7 DOM对象 240 18.2 实战演练――制作“商品精选模块”网页 243 18.2.1 网页效果图 243 18.2.2 制作过程 243 18.2.3 代码分析 245 18.3 强化训练――制作“焦点图广告”网页 246 18.3.1 网页效果图 246 18.3.2 制作过程 246 18.3.3 代码分析 250 18.4 课后实训 251