电子工业出版社-网上书店

本书面向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

前    言
Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
Web前端开发工程师是一个很新的职业，在国内乃至国际上真正受到重视的时间是近几年才开始的。对Web前端开发工程师最基本的要求是精通Web前端开发技术三要素：HTML（HTML5）、CSS（CSS3）、JavaScript，习惯于手写符合W3C标准、兼容多种浏览器的代码。
随着Web 2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人的速度增长。重构后的网站能带来更好的用户体验，用XHTML+CSS重新布局后的页面文件更小、下载速度更快。重构的本质是构建一个前端灵活的MVC框架，即HTML作为信息模型（Model），CSS控制样式（View），JavaScript负责调度数据和实现某种展现逻辑（Controller）。同时，代码需要具有很好的复用性和可维护性。这是高效率、高质量开发及协作开发的基础。
随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大，Web前端开发工程师这一职业终于从设计和制作页面中独立出来。前端开发的入门门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。因此，对于从事IT工作的人来说，前端开发是个不错的切入点。
一位好的Web前端开发工程师在知识体系上既要有广度，又要有深度，所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近两年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
为适应现代技术的飞速发展，培养出技术能力强、能快速适应网站开发行业需求的高级技能型人才，帮助众多喜爱网站开发的人员提高网站的设计及编码水平，作者结合自己多年从事教学工作和Web前端应用开发的实践经验，按照教学规律精心编写了本书。
本书采用“模块化设计、任务驱动学习”的编写模式。实现任务驱动学习的关键是“任务”的设计，它必须是社会实际生产、生活中的一个真实问题。为了解决这个真实的问题，需要把它分解成一系列的“子任务”；每一个子任务的解决过程就是一个模块的学习过程。每个模块学习一组概念、锻炼一组技能；全部模块加起来，即完成一种知识的学习，形成一种相应的能力。在任务驱动学习的具体实施中，以网站建设和网页设计为中心，以实例为引导，把介绍知识与实例设计、制作、分析融于一体，自始至终贯穿于本书之中。在实例的设计、制作过程中，把本章节的知识点融于实例之中，使读者能够快速掌握概念和操作方法。考虑Web前端开发较强的实践性，本书配备大量的页面例题和丰富的运行效果图，能够有效地帮助读者理解所学习的理论知识，系统、全面地掌握网页制作技术。
本书主要围绕Web标准的三大关键技术（HTML5、CSS3和JavaScript）来介绍Web前端开发的必备知识及相关应用。其中，HTML5 负责网页结构，CSS3 负责网页样式及表现，JavaScript负责网页行为和功能。本书采用全新流行的Web标准，通过简单的“记事本”工具，以HTML5技术为基础，由浅入深，系统、全面地介绍HTML5、CSS3、JavaScript的基本知识及常用技巧。
本书以珠宝商城项目网站的设计与制作为讲解主线，围绕网站栏目的设计，详细、全面、系统地介绍了Web前端开发的基本知识及完整流程。本书所有例题、习题及上机实训均采用案例驱动的讲述方式，通过大量实例深入浅出、循序渐进地引导读者学习。本书在每章之后附有大量的实践操作习题，并在教学课件中给出习题答案，供读者在课外巩固所学的内容。本书共分12章，主要内容包括：网站规划和网页设计基础、HTML概述、编辑网页文档、网页布局与交互、CSS基础、CSS盒模型、使用CSS修饰常见的网页元素、使用CSS设置链接与导航、Div+CSS布局页面、网页行为语言—JavaScript、珠宝商城前台页面和珠宝商城后台管理页面。
本书条理清晰、内容完整、实例丰富、图文并茂、系统性强，不仅可以作为高等学校计算机及相关专业课程的教材，也可以作为网站建设、相关软件开发人员和计算机爱好者的参考书。
本书由张兵义、张连堂、张红娟主编，参加编写的有张兵义（第1、2、3章）、张连堂（第4、5章）、张红娟（第6、7章）、雷鸣（第8、9章）、殷莺（第10章）、马海洲（第11章），第12章及资料的收集整理、课件的制作由刘大学、刘克纯、田金雨、骆秋容、王如雪、曹媚珠、陈文焕、刘有荣、李刚、孙明建、李索、徐维维、徐云林、沙世雁、缪丽丽、田金凤、陈文娟、李继臣、王如新、赵艳波、王茹霞、田同福完成。全书由刘瑞新教授主审、统稿。由于作者水平有限，书中疏漏和不足之处在所难免，敬请广大师生、读者指正。

编  者

Web前端开发;HTML5+CSS3+JavaScript

教授，现就职于北京信息职业技术学院（东校区）软件工程系。我社老作者，具有多年写作经验，在我社出版过30多本教材。

Web前端开发;HTML5+CSS3+JavaScript；采用模块分解、任务驱动、子任务实现和代码设计四层结构

本书配套资源下载

对不起，暂无音视频资源！

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