适读人群 ：网站开发人员 网页设计人员 相关专业师生
　　本书是畅销套系“网站设计师”系列的一本新产品，针对目前就业市场上抢手的前端开发工程师编写，书中内容融入了作者十余年网络开发的实践经验与技巧，所有案例均来自真实的商业案例，还免费提供全部源代码和教学电子课件，既适合自学，也适合相关专业院校或培训机构的老师教学，是一本不可多得的前端开发宝典，可以帮助读者快速掌握主流的前端开发技能，轻松获得就业岗位，成为IT精英。

　　移动互联网时代，前端工程师经常面临如何在PC端和各种移动平台间跨平台开发的问题。针对这个问题，《HTML5+CSS+JavaScript网页布局从入门到精通》在研究分析当前应用开发解决方案和主流技术的基础上，提出一种跨平台的前端应用方案，即利用支持标准 HTML5、CSS和JavaScript 的跨平台前端框架开发。《HTML5+CSS+JavaScript网页布局从入门到精通》按从基础到开发大型平台前端的思路，介绍了如何使用HTML5+CSS+JavaScript布局网页的方法。以大型电商平台作为前端开发的案例，按从入门到高级商业产品应用的开发思路进行讲解，让读者通过书中的内容即可成为一名名副其实的前端开发工程师。
　　《HTML5+CSS+JavaScript网页布局从入门到精通》内容丰富、结构清晰，注重商业应用思维的训练与实践应用，向读者提供了Web前端开发的基础知识、开发技术、动画特效的制作方法，适合初、中级网页设计爱好者，Web前端工程师，以及希望对原有网站进行重构的网页设计者使用，也可以作为高等院校相关专业和相关培训机构的教学用书。

　　陈益材，现任中公教育教学研发研究院院长，兼任中国互联网信用中心技术总监，拥有十多年的互联网技术开发与营销经验，精通网站的前端布局设计、网站的策划运营。创办环博文化IT出版品牌，策划并辅助过近百家企业网站的建立与营销推广。王志晓，工学博士，IEEE会员、CCF会员，现为西安理工大学教师，具有计算机网络、Web技术、网络通信协议分析等课程的多年教学和实践经验；于2010年9月至2011年7月获欧盟伊拉斯谟计划资助，赴德国哥廷根大学学习交流，并进行合作研究。

前言
第1章 HTML5基础知识 1
1.1 HTML文档基本结构 2
1.1.1 HTML文档编辑器 2
1.1.2 HTML文档类型 2
1.1.3 HTML文档标准结构 5
1.2 HTML标签、元素和属性 6
1.2.1 HTML标签的概念 6
1.2.2 元素和元素形式 7
1.2.3 属性的定义 8
1.2.4 大小写规范 9
1.3 常用HTML5标签 9
1.3.1 基础标签 9
1.3.2 格式标签 11
1.3.3 表单标签 13
1.3.4 框架标签 24
1.3.5 图像标签 24
1.3.6 音/视频标签 27
1.3.7 链接标签 31
1.3.8 列表标签 32
1.3.9 表格标签 34
1.3.10 样式/节标签 35
1.3.11 元信息标签 38
1.3.12 编程标签 40
第2章 CSS基本语法和应用 42
2.1 CSS层叠样式表 43
2.1.1 CSS的作用、类型与冲突 43
2.1.2 编辑CSS层叠样式表 44
2.1.3 在HTML文档中应用CSS的方法 46
2.2 CSS的基本语法 49
2.2.1 CSS的3种选择器 50
2.2.2 选择器的声明 54
2.2.3 CSS样式继承 56
2.2.4 使用CSS注释 58
2.3 CSS盒模型控制 58
2.3.1 CSS盒模型概念 58
2.3.2 外边距margin的控制 60
2.3.3 边框border的样式设置 62
2.3.4 内边距padding的设置 64
第3章 DIV+CSS网页基础布局 66
3.1 div元素的基础知识 67
3.1.1 div标签控制方法 67
3.1.2 HTML中的元素 69
3.1.3 元素的样式设置 70
3.2 DIV+CSS基础布局 72
3.2.1 网页宽度的设置 72
3.2.2 水平居中的设置 73
3.2.3 div的嵌套设置 75
3.2.4 div的浮动方法 76
3.2.5 网页布局的实例 81
3.3 列表元素布局 84
3.3.1 列表元素布局导航 84
3.3.2 导航条的超链接 85
3.3.3 导航条的互动设计 87
3.4 元素的非常规定位方式 88
3.4.1 CSS绝对定位 88
3.4.2 CSS固定定位 90
3.4.3 CSS相对定位 92
3.4.4 CSS程序的简化 93
第4章 JavaScript编程应用基础 95
4.1 成功网站的特点和嵌入网页的动画技术 96
4.1.1 成功网站所具备的特点 96
4.1.2 嵌入网页的动画技术 97
4.2 JavaScript应用基础 100
4.2.1 JavaScript的特点 100
4.2.2 在网页中嵌入JavaScript 101
4.3 JavaScript的图片轮播应用 102
4.3.1 设计首页的版面 103
4.3.2 创建和编辑站点 105
4.3.3 使用DIV+CSS布局网页 105
4.3.4 使用动画技术 111
第5章 Photoshop网页设计与应用 117
5.1 网站的策划准备工作 118
5.1.1 网站建设前期的总体策划 118
5.1.2 定位网站的主题 118
5.1.3 拟定网站访问群体 119
5.2 网站策划的重点 119
5.2.1 网站栏目的设计 120
5.2.2 网站VI形象的定位 120
5.2.3 网站设计的宣传标语 122
5.2.4 网站框架的确定 123
5.2.5 网站资料的收集 124
5.2.6 网站制作的注意事项 124
5.3 网页设计全程实例 125
5.3.1 首页版式的设计分析 126
5.3.2 网站首页的大小设计 127
5.3.3 页面框架的搭建 128
5.3.4 设计Banner图片 129
5.3.5 小导航的制作 130
5.3.6 大导航的制作 130
5.3.7 版权的设计 131
5.3.8 内容的设计 133
5.3.9 友情链接 133
第6章 HTML5+CSS布局网页 135
6.1 网站首页的布局设计 136
6.1.1 首页图片的切片 136
6.1.2 调节网页图片 139
6.1.3 创建站点 142
6.2 使用HTML5+CSS布局网页 143
6.2.1 布局的整体规划 143
6.2.2 首页的HTML5布局 144
6.2.3 CSS的样式美化 146
6.2.4 HTML5兼容IE的设置 148
第7章 电子商城首页布局 150
7.1 电子商城系统规划 151
7.1.1 网站整体布局规划 151
7.1.2 建立网站的本地站点 151
7.1.3 商城首页布局分析 154
7.2 首页布局基础功能 156
7.2.1 重置样式表global.css 156
7.2.2 跨平台自适应网页宽度 159
7.2.3 链接样式表和JavaScript 160
7.2.4 布局小导航功能 160
7.2.5 搜索功能的布局设计 164
7.2.6 大导航和二级菜单 167
7.2.7 制作首页图片的轮播 172
7.3 功能模块的首页布局 176
7.3.1 市场精选频道设计 177
7.3.2 特价商品和品牌馆 178
7.3.3 版权内容排版布局 180
第8章 用户管理系统布局 181
8.1 用户管理系统的规划 182
8.1.1 系统结构设计 182
8.1.2 页面规划设计 182
8.2 用户注册功能的布局 183
8.2.1 用户注册页面DIV 183
8.2.2 CSS样式设计 187
8.2.3 表单的交互验证 189
8.3 用户登录模块的设计 201
8.3.1 登录页面的设计 201
8.3.2 登录成功个人页面 204
8.4 找回密码的布局 205
8.4.1 确认用户的页面 206
8.4.2 选择找回方式 208
8.4.3 修改和找回密码 212
第9章 购物车系统布局 215
9.1 购物车系统规划 216
9.1.1 购物车系统功能 216
9.1.2 购物车系统流程 217
9.1.3 系统结构设计 219
9.1.4 页面规划设计 220
9.2 产品前台展示功能 220
9.2.1 产品列表页.html 221
9.2.2 产品详情页.html 227
9.3 购物车下订单功能 235
9.3.1 购物车.html 236
9.3.2 确认订单.html 247
9.3.3 付款.html 250
9.3.4 完成.html 253

　　HTML5 可以说是近十年来 Web 标准最大的飞跃，HTML5 中创建了很多新元素，利用这些新元素能快速开发出更多的类和 id 标识。一旦用户熟悉了这些元素的功能和使用，就可以在较短的时间内建立简单的网页组织，它的使命是将 Web 带入一个成熟的应用平台。在 Web 开发中采用CSS 技术将会显著地美化应用程序，可以有效地控制页面的布局、字体、颜色、背景和其他效果，只需要进行一些简单的修改就可以改变网页的外观和格式。利用好 CSS 可以更快捷地得到以往用很多插件才能得到的效果。通过使用元素本身来取代大部分图片，网页的加载速度会得到提高，同时也能极大地提高程序的性能。
　　本书根据网页前端工程师需要掌握的核心工作技能，按从基础到商业应用实例开发的学习步骤，以练带学，让读者能够轻松、快速地掌握相关的技能。本书对HTML5和CSS样式布局进行了深入的介绍，对 JavaScript 主要进行了应用级的介绍。
　　本书共 9 章，内容包括：
　　第 1 章 HTML5 的基础知识。通过学习读者可以掌握 HTML 文档的基本结构，全面了解HTML 的标签、元素和属性的设置，并掌握布局时一些通用的 HTML5 标签，同时对表单标签的应用进行了详细的介绍。
　　第 2 章 CSS 基本语法和应用。介绍了 CSS 层叠样式表的概念，CSS的作用、类型与冲突，以及在HTML 中应用CSS样式表的方法；对CSS的基本语法进行了图文并茂的介绍，方便读者掌握CSS的基本语法；最后对CSS盒模型进行了详细的举例说明。
　　第 3 章 DIV+CSS 网页基础布局。详细说明了DIV各元素的属性设置和 DIV+CSS 基础布局的方法，对列表元素的布局进行了举例说明，并对元素的非常规定位的方式进行了总结，介绍了绝对定位、固定定位、相对定位以及程序的简化方法。
　　第 4 章 JavaScript编程应用基础。简单介绍了嵌入网页的相关动画技术，对 JavaScript的编程应用进行了详细的介绍。读者要掌握在HTML 页面中如何实现对JavaScript的调用，最后举例说明使用JavaScript实现图片轮播的应用。
　　第 5 章 Photoshop网页设计与应用。介绍了网站前期策划的准备工作，通过学习读者可以掌握从网站定位出发使用 Photoshop 实现网页设计的各个环节，如首页的版式设计、页面框架的搭建、大小导航的制作等内容。
　　第 6 章 HTML5+CSS 布局网页。本章将应用前面几章学习的知识，使用HTML5+CSS制作一个真正意义上的网页，通过学习读者可以掌握如何使用 Photoshop 对设计的网页图片进行切片，如何使用HTML5+CSS布局一个精美的首页效果，并掌握兼容IE的设置。
　　第 7 章电子商城首页布局。介绍了电子商城系统规划的方法，使用Dreamweaver进行网站站点的建立，重置样式表的高级应用，对搜索功能、导航、市场精选频道等功能模块进行不同的样式布局。
　　第 8 章用户管理系统布局。介绍了一个网站用户管理系统的规划，详细介绍了用户注册功能的布局操作，强调了表单的交互验证方法，并对用户登录模块进行了详细的布局设计，最后对找回密码的布局页面进行了详细的介绍。
　　第 9 章购物车系统布局。根据购物车系统从下订单到结算的流程，介绍了产品前台展示的两个页面“产品列表页.html”和“产品详情页.html”的制作方法。讲解了如何使用JavaScript 实现订单的统计和信息交互动态功能，最后对通过购物车下订单的 4 个步骤分别设计了4个页面。
　　本书内容广泛、新颖别致，是网页开发前端布局设计的最佳参考资料。本书中的每个实例都融合了适合其类别的动态功能，拥有各自的设计特点，非常适合读者在设计制作时参考和应用。本书也是网页制作的最佳素材宝典，在实际应用中能令您创意无限，使制作更加简化与方便。
　　本书由王志晓负责第1～5章的编写，陈益材负责第6～9 章程序的编写，牛海建负责本书案例的美工设计与创意。参与本书编写的还有于荷云、白爱娟、王玉州、杨成、杨倩倩、张洁、彭飞飞、李涵等。由于编者水平有限，本书疏漏之处在所难免，欢迎各位读者与专家批评指正。