Web前端开发实战

本书紧密围绕Web前端工程师在制作网页过程中的实际需要和应该掌握的技术，全面介绍如何使用HTML5、CSS3、JavaScript进行网页设计和美化。本书着眼于实战，讲解的都是在开发时经常遇到的典型问题和案例，主要内容分为Web前端开发先备知识、构建HTML页面、使用CSS美化页面、使用JavaScript制作网页特效、综合实战5个单元。本书优选了20个任务，大部分任务从提出实际问题开始，通过【任务描述】和【知识预览】，详细讲述解决问题所需的知识点，并在【任务实现】过程中详细讲解实现步骤，同时展示代码实例和相关截图，最后通过【任务实训】强化读者对技能的掌握，使读者循序渐进地体验网页制作过程。本书既可以作为高等院校、高等职业院校相关专业的“网页设计与制作”课程的配套教材，也可以作为“1+X证书”中有关Web前端开发（初级）的技术参考用书。

单元1 Web前端开发先备知识 1
【任务1.1】揭秘Web前端开发 1
1.1.1 Web前端开发概述 1
1.1.2 Web标准 3
【任务1.2】使用前端工具开发第一个网页 4
1.2.1 前端开发工具介绍 5
1.2.2 使用Dreamweaver CS6 5
1.2.3 使用Sublime Text 8
1.2.4 使用Dreamweaver CC 11
1.2.5 浏览器简介 13
【任务1.3】建立正确的站点结构 15
1.3.1 前端页面相关知识 15
1.3.2 站点的建立 17
1.3.3 站点的管理和发布 20
单元测试1 22
单元2 构建HTML页面 23
【任务2.1】基本页面构建 23
2.1.1 HTML介绍 23
2.1.2 HTML5网页的基本结构和基本标签的作用 24
2.1.3 创建简单网页 25
2.1.4 HTML头部属性设置 28
【任务2.2】新闻页面构建 30
2.2.1 HTML基本标签 30
2.2.2 新闻页面制作 35
2.2.3 自闭合标签 36
2.2.4 相对路径和绝对路径 37
【任务2.3】读书页面构建 39
2.3.1 超链接 41
2.3.2 读书页面制作 42
2.3.3 HTML中的命名规则 43
2.3.4 超链接中的一些属性 44
【任务2.4】教育页面构建 45
2.4.1 列表 47
2.4.2 教育页面制作 49
【任务2.5】浪浪网首页构建 52
2.5.1 表格 54
2.5.2 表格语义化 57
2.5.3 浪浪网首页制作 59
【任务2.6】浪浪网注册页面构建 64
2.6.1 表单标签 65
2.6.2 表单元素 67
2.6.3 表单分组 73
2.6.4 注册页面制作 74
2.6.5 HTML5新增的表单标签 77
【任务2.7】浪浪网多媒体页面构建 79
2.7.1 多媒体的使用 80
2.7.2 多媒体页面制作 83
单元测试2 84
单元3 使用CSS美化页面 86
【任务3.1】初识浪浪网头部CSS 86
3.1.1 初识CSS 86
3.1.2 浪浪网头部CSS设置 91
3.1.3 Google推荐的HTML和CSS格式规范 92
【任务3.2】新闻页面的简单美化 96
3.2.1 文字样式 97
3.2.2 文本样式 100
3.2.3 超链接样式 103
3.2.4 边框样式 105
3.2.5 背景样式 108
3.2.6 新闻页面的美化 112
3.2.7 字体设置 113
3.2.8 CSS3中新增的背景属性和圆角边框属性 115
【任务3.3】浪浪网首页主体制作 119
3.3.1 CSS盒子模型和HTML元素 120
3.3.2 列表样式 126
3.3.3 浮动布局 128
3.3.4 首页主体制作 133
3.3.5 清除浮动的方法 143
【任务3.4】浪浪网导航栏制作 147
3.4.1 定位布局 147
3.4.2 z-index属性 152
3.4.3 display属性 154
3.4.4 导航栏制作 155
单元测试3 161
单元4 使用JavaScript制作网页特效 163
【任务4.1】浪浪网下拉菜单特效制作 163
4.1.1 JavaScript简介 164
4.1.2 在网页中引入JavaScript的方式 165
4.1.3 JavaScript的数据结构 166
4.1.4 JavaScript流程控制语句 168
4.1.5 函数 169
4.1.6 JavaScript常用事件 172
4.1.7 下拉菜单特效 173
【任务4.2】浪浪网图片轮换特效制作 176
4.2.1 DOM模型 177
4.2.2 数组 180
4.2.3 定时 181
4.2.4 计时 183
4.2.5 图片轮换特效 183
4.2.6 Date对象 185
【任务4.3】浪浪网表单验证特效制作 187
4.3.1 获取表单元素值 187
4.3.2 JavaScript内置函数 189
4.3.3 正则表达式 190
4.3.4 表单验证特效 192
4.3.5 HTML5的表单验证 195
4.3.6 自定义验证信息 196
【任务4.4】浪浪网其他特效制作 198
4.4.1 CSS样式特效 200
4.4.2 window对象 201
4.4.3 选项卡特效 204
4.4.4 弹出广告特效 206
4.4.5 页面返回、前进、刷新特效 206
单元测试4 208
单元5 综合实战 209
【任务5.1】水源安检企业网站首页制作 209
5.1.1 页面布局 210
5.1.2 代码实现 213
【任务5.2】万维电商网站首页制作 233
5.2.1 常见的网站类型 233
5.2.2 页面布局 236
5.2.3 代码实现 240
附录A Dreamweaver CC使用技巧 257
附录B 单元测试答案 260