Web前端开发实例教程——HTML5+CSS3+JavaScript

本书面向Web前端开发的读者，采用全新流行的Web标准，以Web前端开发技术三要素（HTML5、CSS3、JavaScript）等前端技术，由浅入深、完整详细地讲解采用手写编码编写符合W3C标准、兼容多种浏览器的代码。本书共分12章，主要内容包括：网站规划和网页设计基础、HTML概述、编辑网页文档、网页布局与交互、CSS基础、CSS盒模型、使用CSS修饰常见的网页元素、使用CSS设置链接与导航、Div CSS布局页面、网页行为语言——JavaScript、珠宝商城前台页面和珠宝商城后台管理页面。本书内容紧扣国家对高等学校培养高级应用型、复合型人才的技能水平和知识结构的要求，以珠宝商城项目案例的开发思路为主线，采用模块分解、任务驱动、子任务实现和代码设计四层结构，通过对模块中每个任务相应知识点的讲解，引导读者学习网页制作、设计、规划的基本知识以及项目开发、测试的完整流程。
【目录】
目 录
第1章 网站规划和网页设计基础 1
1.1 万维网WWW 1
1.1.1 WWW和浏览器的基本概念 1
1.1.2 网址 2
1.1.3 超文本 3
1.1.4 超文本标记语言HTML 3
1.1.5 HTTP 3
1.1.6 搜索引擎 4
1.2 网站与网页的基本概念 4
1.2.1 网站、网页和主页 4
1.2.2 静态网页和动态网页 5
1.3 网站的规划与设计 5
1.4 定位网站的主题和名称 6
1.4.1 网站主题的确定 6
1.4.2 网站名称的确定 6
1.5 确定网站的CI形象 7
1.6 网站内容的设计 7
1.6.1 设计网站的栏目 8
1.6.2 确定网站的目录结构 8
1.6.3 设计网站的链接结构 9
1.7 网页的基本元素 10
1.8 网页布局结构 11
1.9 常见的网页编辑工具 12
1.10 Web标准 13
1.10.1 什么是Web标准 13
1.10.2 建立Web标准的优点 14
1.10.3 理解表现和结构相分离 14
习题1 15
第2章 HTML概述 16
2.1 HTML简介 16
2.1.1 Web技术发展历程 16
2.1.2 HTML5的特性 16
2.1.3 HTML5元素 17
2.2 HTML语法基础 17
2.2.1 HTML语法结构 18
2.2.2 HTML编写规范 18
2.2.3 HTML5文档结构 19
2.3 创建HTML文档 20
2.4 搭建支持HTML5的浏览器环境 21
2.5 网页头部标签 22
2.5.1 ＜title＞标签 22
2.5.2 ＜meta＞标签 22
2.5.3 ＜link＞标签 23
2.5.4 ＜script＞标签 23
2.5.5 案例—制作珠宝商城页面摘要信息 23
2.6 注释 24
2.7 特殊符号 24
习题2 25
第3章 编辑网页文档 26
3.1 文字与段落排版 26
3.1.1 段落标签＜p＞…＜/p＞ 26
3.1.2 强制换行标签＜br/＞ 26
3.1.3 标题标签＜h#＞…＜/h#＞ 27
3.1.4 水平线标签＜hr/＞ 28
3.1.5 缩排标签＜blockquote＞…＜/blockquote＞ 29
3.1.6 案例—制作珠宝商城关于我们页面 29
3.2 超链接 30
3.2.1 超链接简介 30
3.2.2 超链接的应用 30
3.2.3 案例—制作珠宝商城服务指南及下载页面 32
3.3 图像 33
3.3.1 Web图像的格式及使用要点 33
3.3.2 图像标签＜img＞ 34
3.3.3 图像超链接 35
3.3.4 设置网页背景图像 35
3.3.5 图文混排 36
3.4 列表 37
3.4.1 无序列表 37
3.4.2 有序列表 38
3.4.3 定义列表 39
3.4.4 嵌套列表 40
习题3 41
第4章 网页布局与交互 42
4.1 表格 42
4.1.1 表格的结构 42
4.1.2 表格的基本语法 42
4.1.3 表格的属性 43
4.1.4 不规范表格 45
4.1.5 表格数据的分组 46
4.1.6 使用表格实现页面局部布局 48
4.2 使用结构元素构建网页布局 49
4.3 ＜div＞标签 53
4.4 ＜span＞标签 53
4.4.1 基本语法 53
4.4.2 ＜span＞标签与＜div＞标签的区别 54
4.4.3 使用＜div＞标签和＜span＞标签布局网页内容 54
4.5 表单 55
4.5.1 表单的工作机制 55
4.5.2 表单标签＜form＞…＜/form＞ 55
4.5.3 表单元素 56
4.5.4 案例—制作珠宝商城会员注册表单 59
4.5.5 使用表格布局表单 61
习题4 62
第5章 CSS基础 64
5.1 CSS简介 64
5.1.1 什么是CSS 64
5.1.2 CSS的发展历史 64
5.1.3 CSS3的特点 65
5.1.4 CSS编写规则 65
5.1.5 CSS的工作环境 67
5.2 HTML与CSS 67
5.2.1 传统HTML的缺点 67
5.2.2 CSS的优势 68
5.2.3 CSS的局限性 68
5.3 CSS语法基础 68
5.3.1 CSS样式规则 69
5.3.2 基本选择符 69
5.3.3 复合选择符 71
5.3.4 通配符选择符 73
5.3.5 特殊选择符 74
5.4 CSS的属性单位 76
5.4.1 长度、百分比单位 76
5.4.2 色彩单位 77
5.5 网页中引用CSS的方法 78
5.5.1 行内样式 78
5.5.2 内部样式表 79
5.5.3 链入外部样式表 80
5.5.4 导入外部样式表 81
5.5.5 案例—制作珠宝商城客服中心页面 82
5.6 文档结构 84
5.6.1 文档结构的基本概念 84
5.6.2 继承 85
5.6.3 样式表的层叠、特殊性与重要性 86
5.6.4 元素类型 88
5.6.5 案例—制作珠宝商城特色礼品局部页面 89
习题5 92
第6章 CSS盒模型 93
6.1 盒模型的概念 93
6.2 边框、外边距与内边距 94
6.2.1 边框 94
6.2.2 外边距 97
6.2.3 内边距 99
6.2.4 案例—盒模型的演示 99
6.3 盒模型的尺寸 101
6.3.1 盒模型的宽度与高度 101
6.3.2 块级元素与行级元素宽度和高度的区别 101
6.4 盒子的margin叠加问题 102
6.4.1 行级元素之间的水平margin叠加 102
6.4.2 块级元素之间的垂直margin叠加 103
6.5 盒模型综合案例—珠宝商城顶部内容 105
6.6 盒子的定位 108
6.6.1 定位属性 108
6.6.2 定位方式 109
6.7 浮动与清除浮动 113
6.7.1 浮动 114
6.7.2 清除浮动 117
6.8 综合案例—珠宝商城市场团队简介页面 118
6.8.1 页面布局规划 118
6.8.2 页面的制作过程 119
习题6 122
第7章 使用CSS修饰常见的网页元素 124
7.1 设置字体样式 124
7.1.1 字体类型 124
7.1.2 字体大小 124
7.1.3 字体粗细 125
7.1.4 字体倾斜 125
7.1.5 设置字体样式综合案例 125
7.2 设置文本样式 126
7.2.1 文本水平对齐方式 126
7.2.2 行高 127
7.2.3 文本的修饰 127
7.2.4 段落首行缩进 127
7.2.5 首字下沉 127
7.2.6 文本的截断 128
7.2.7 文本换行 128
7.2.8 文本的颜色 128
7.2.9 文本的背景颜色 129
7.2.10 设置文本样式综合案例 129
7.3 设置图像样式 130
7.3.1 图像缩放 131
7.3.2 图像边框 132
7.3.3 背景图像 133
7.3.4 背景重复 133
7.3.5 背景图像定位 134
7.3.6 背景图像大小 136
7.4 设置表格样式 137
7.4.1 常用的CSS表格属性 137
7.4.2 案例—使用隔行换色表格制作畅销商品销量排行榜 140
7.5 设置表单样式 142
7.5.1 使用CSS修饰常用的表单元素 142
7.5.2 案例—制作珠宝商城会员注册页面 146
7.6 综合案例—制作珠宝商城网购空间页面 149
7.6.1 页面布局规划 149
7.6.2 页面的制作过程 150
习题7 152
第8章 使用CSS设置链接与导航 154
8.1 使用CSS设置链接 154
8.1.1 设置文字链接的外观 154
8.1.2 图文链接 157
8.1.3 按钮式链接 157
8.2 使用CSS设置列表 159
8.2.1 表格布局的缺点 159
8.2.2 列表布局的优势 160
8.2.3 CSS列表属性 160
8.2.4 图文信息列表 165
8.3 创建导航菜单 169
8.3.1 普通的超链接导航菜单 169
8.3.2 纵向列表模式的导航菜单 170
8.3.3 横向列表模式的导航菜单 174
8.4 综合案例—使用CSS修饰页面和制作导航菜单 177
8.4.1 制作珠宝商城网购学堂主页 177
8.4.2 制作珠宝商城网购学堂栏目页 186
习题8 190
第9章 Div CSS布局页面 191
9.1 Div CSS布局理念 191
9.1.1 认识Div CSS布局 191
9.1.2 正确理解Web标准 191
9.1.3 将页面用Div分块 192
9.2 典型的CSS布局样式 193
9.2.1 两列布局样式 193
9.2.2 三列布局样式 196
9.3 综合案例—制作珠宝商城博客页面 200
9.4 综合案例—制作珠宝商城网络服务中心页面 209
9.4.1 页面布局规划 209
9.4.2 页面的制作过程 210
习题9 216
第10章 网页行为语言—JavaScript 218
10.1 JavaScript概述 218
10.2 在网页中调用JavaScript 218
10.3 JavaScript基本交互方法 219
10.3.1 信息对话框 219
10.3.2 选择对话框 220
10.3.3 提示对话框 221
10.4 表单对象与交互性 222
10.5 制作网页特效 226
10.5.1 制作网页Tab选项卡切换效果 226
10.5.2 循环滚动的图文字幕 229
10.5.3 幻灯片广告 232
10.5.4 制作二级纵向列表模式的导航菜单 234
习题10 237
第11章 珠宝商城前台页面 239
11.1 网站的开发流程 239
11.1.1 规划站点 239
11.1.2 网站制作 241
11.1.3 测试网站 241
11.1.4 发布站点 241
11.2 设计首页布局 241
11.2.1 创建站点目录 241
11.2.2 页面布局规划 242
11.3 制作首页 242
11.4 制作产品列表页 253
11.5 制作产品明细页 256
11.6 制作查看购物车页 262
习题11 265
第12章 珠宝商城后台管理页面 267
12.1 制作后台管理登录页 267
12.2 制作查询商品页 271
12.3 制作添加商品页 280
12.4 制作会员管理页 283
12.5 栏目的整合 285
习题12 286
参考文献 287