移动互联网时代,前端工程师经常面临如何在PC端和各种移动平台间跨平台开发的问题。针对这个问题,《HTML5+CSS+JavaScript网页布局从入门到精通》在研究分析当前应用开发解决方案和主流技术的基础上,提出一种跨平台的前端应用方案,即利用支持标准 HTML5、CSS和JavaScript 的跨平台前端框架开发。《HTML5+CSS+JavaScript网页布局从入门到精通》按从基础到开发大型平台前端的思路,介绍了如何使用HTML5+CSS+JavaScript布局网页的方法。以大型电商平台作为前端开发的案例,按从入门到高级商业产品应用的开发思路进行讲解,让读者通过书中的内容即可成为一名名副其实的前端开发工程师。
《HTML5+CSS+JavaScript网页布局从入门到精通》内容丰富、结构清晰,注重商业应用思维的训练与实践应用,向读者提供了Web前端开发的基础知识、开发技术、动画特效的制作方法,适合初、中级网页设计爱好者,Web前端工程师,以及希望对原有网站进行重构的网页设计者使用,也可以作为高等院校相关专业和相关培训机构的教学用书。
前言
第1章HTML5基础知识\t1
1.1HTML文档基本结构\t2
1.1.1HTML文档编辑器\t2
1.1.2HTML文档类型\t2
1.1.3HTML文档标准结构\t5
1.2HTML标签、元素和属性\t6
1.2.1HTML标签的概念\t6
1.2.2元素和元素形式\t7
1.2.3属性的定义\t8
1.2.4大小写规范\t9
1.3常用HTML5标签\t9
1.3.1基础标签\t9
1.3.2格式标签\t11
1.3.3表单标签\t13
1.3.4框架标签\t24
1.3.5图像标签\t24
1.3.6音/视频标签\t27
1.3.7链接标签\t31
1.3.8列表标签\t32
1.3.9表格标签\t34
1.3.10样式/节标签\t35
1.3.11元信息标签\t38
1.3.12编程标签\t40
第2章CSS基本语法和应用\t42
2.1CSS层叠样式表\t43
2.1.1CSS的作用、类型与冲突\t43
2.1.2编辑CSS层叠样式表\t44
2.1.3在HTML文档中应用CSS的方法\t46
2.2CSS的基本语法\t49
2.2.1CSS的3种选择器\t50
2.2.2选择器的声明\t54
2.2.3CSS样式继承\t56
2.2.4使用CSS注释\t58
2.3CSS盒模型控制\t58
2.3.1CSS盒模型概念\t58
2.3.2外边距margin的控制\t60
2.3.3边框border的样式设置\t62
2.3.4内边距padding的设置\t64
第3章DIV+CSS网页基础布局\t66
3.1div元素的基础知识\t67
3.1.1div标签控制方法\t67
3.1.2HTML中的元素\t69
3.1.3元素的样式设置\t70
3.2DIV+CSS基础布局\t72
3.2.1网页宽度的设置\t72
3.2.2水平居中的设置\t73
3.2.3div的嵌套设置\t75
3.2.4div的浮动方法\t76
3.2.5网页布局的实例\t81
3.3列表元素布局\t84
3.3.1列表元素布局导航\t84
3.3.2导航条的超链接\t85
3.3.3导航条的互动设计\t87
3.4元素的非常规定位方式\t88
3.4.1CSS绝对定位\t88
3.4.2CSS固定定位\t90
3.4.3CSS相对定位\t92
3.4.4CSS程序的简化\t93
第4章JavaScript编程应用基础\t95
4.1成功网站的特点和嵌入网页的动画技术\t96
4.1.1成功网站所具备的特点\t96
4.1.2嵌入网页的动画技术\t97
4.2JavaScript应用基础\t100
4.2.1JavaScript的特点\t100
4.2.2在网页中嵌入JavaScript\t101
4.3JavaScript的图片轮播应用\t102
4.3.1设计首页的版面\t103
4.3.2创建和编辑站点\t105
4.3.3使用DIV+CSS布局网页\t105
4.3.4使用动画技术\t111
第5章Photoshop网页设计与应用\t117
5.1网站的策划准备工作\t118
5.1.1网站建设前期的总体策划\t118
5.1.2定位网站的主题\t118
5.1.3拟定网站访问群体\t119
5.2网站策划的重点\t119
5.2.1网站栏目的设计\t120
5.2.2网站VI形象的定位\t120
5.2.3网站设计的宣传标语\t122
5.2.4网站框架的确定\t123
5.2.5网站资料的收集\t124
5.2.6网站制作的注意事项\t124
5.3网页设计全程实例\t125
5.3.1首页版式的设计分析\t126
5.3.2网站首页的大小设计\t127
5.3.3页面框架的搭建\t128
5.3.4设计Banner图片\t129
5.3.5小导航的制作\t130
5.3.6大导航的制作\t130
5.3.7版权的设计\t131
5.3.8内容的设计\t133
5.3.9友情链接\t133
第6章HTML5+CSS布局网页\t135
6.1网站首页的布局设计\t136
6.1.1首页图片的切片\t136
6.1.2调节网页图片\t139
6.1.3创建站点\t142
6.2使用HTML5+CSS布局网页\t143
6.2.1布局的整体规划\t143
6.2.2首页的HTML5布局\t144
6.2.3CSS的样式美化\t146
6.2.4HTML5兼容IE的设置\t148
第7章电子商城首页布局\t150
7.1电子商城系统规划\t151
7.1.1网站整体布局规划\t151
7.1.2建立网站的本地站点\t151
7.1.3商城首页布局分析\t154
7.2首页布局基础功能\t156
7.2.1重置样式表global.css\t156
7.2.2跨平台自适应网页宽度\t159
7.2.3链接样式表和JavaScript\t160
7.2.4布局小导航功能\t160
7.2.5搜索功能的布局设计\t164
7.2.6大导航和二级菜单\t167
7.2.7制作首页图片的轮播\t172
7.3功能模块的首页布局\t176
7.3.1市场精选频道设计\t177
7.3.2特价商品和品牌馆\t178
7.3.3版权内容排版布局\t180
第8章用户管理系统布局\t181
8.1用户管理系统的规划\t182
8.1.1系统结构设计\t182
8.1.2页面规划设计\t182
8.2用户注册功能的布局\t183
8.2.1用户注册页面DIV\t183
8.2.2CSS样式设计\t187
8.2.3表单的交互验证\t189
8.3用户登录模块的设计\t201
8.3.1登录页面的设计\t201
8.3.2登录成功个人页面\t204
8.4找回密码的布局\t205
8.4.1确认用户的页面\t206
8.4.2选择找回方式\t208
8.4.3修改和找回密码\t212
第9章购物车系统布局\t215
9.1购物车系统规划\t216
9.1.1购物车系统功能\t216
9.1.2购物车系统流程\t217
9.1.3系统结构设计\t219
9.1.4页面规划设计\t220
9.2产品前台展示功能\t220
9.2.1产品列表页.html\t221
9.2.2产品详情页.html\t227
9.3购物车下订单功能\t235
9.3.1购物车.html\t236
9.3.2确认订单.html\t247
9.3.3付款.html\t250
9.3.4完成.html\t253
陈益材,现任中公教育教学研发研究院院长,兼任中国互联网信用中心技术总监,拥有十多年的互联网技术开发与营销经验,精通网站的前端布局设计、网站的策划运营。创办环博文化IT出版品牌,策划并辅助过近百家企业网站的建立与营销推广。王志晓,工学博士,IEEE会员、CCF会员,现为西安理工大学教师,具有计算机网络、Web技术、网络通信协议分析等课程的多年教学和实践经验;于2010年9月至2011年7月获欧盟伊拉斯谟计划资助,赴德国哥廷根大学学习交流,并进行合作研究。