Web前端开发实例教程

本书面向Web前端开发的读者，采用全新流行的Web标准，以Web前端开发技术三要素（HTML5、CSS3、JavaScript）等前端技术，由浅入深、完整详细地讲解采用手写编码编写符合W3C标准、兼容多种浏览器的代码。本书共分12章，主要内容包括：网站规划和网页设计基础、HTML概述、编辑网页文档、网页布局与交互、CSS基础、CSS盒模型、使用CSS修饰常见的网页元素、使用CSS设置链接与导航、Div+CSS布局页面、网页行为语言——JavaScript、珠宝商城前台页面和珠宝商城后台管理页面。本书内容紧扣国家对高等学校培养不错应用型、复合型人才的技能水平和知识结构的要求，以珠宝商城项目案例的开发思路为主线，采用模块分解、任务驱动、子任务实现和代码设计四层结构，通过对模块中每个任务相应知识点的讲解，引导读者学习网页制作、设计、规划的基本知识以及项目开发、测试的完整流程。

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

第1章网站规划和网页设计基础1
1.1万维网WWW1
1.1.1WWW和浏览器的基本概念1
1.1.2网址2
1.1.3超文本3
1.1.4超文本标记语言HTML3
1.1.5HTTP3
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.10Web标准13
1.10.1什么是Web标准13
1.10.2建立Web标准的优点14
1.10.3理解表现和结构相分离14
习题115
第2章HTML概述16
2.1HTML简介16
2.1.1Web技术发展历程16
2.1.2HTML5的特性16
2.1.3HTML5元素17
2.2HTML语法基础17
2.2.1HTML语法结构18
2.2.2HTML编写规范18
2.2.3HTML5文档结构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
习题225
第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.1Web图像的格式及使用要点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
习题341
第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
习题462
第5章CSS基础64
5.1CSS简介64
5.1.1什么是CSS64
5.1.2CSS的发展历史64
5.1.3CSS3的特点65
5.1.4CSS编写规则65
5.1.5CSS的工作环境67
5.2HTML与CSS67
5.2.1传统HTML的缺点67
5.2.2CSS的优势68
5.2.3CSS的局限性68
5.3CSS语法基础68
5.3.1CSS样式规则69
5.3.2基本选择符69
5.3.3复合选择符71
5.3.4通配符选择符73
5.3.5特殊选择符74
5.4CSS的属性单位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
习题592
第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
习题6122
第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
习题7152
第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.3CSS列表属性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
习题8190
第9章Div+CSS布局页面191
9.1Div+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
习题9216
第10章网页行为语言—JavaScript218
10.1JavaScript概述218
10.2在网页中调用JavaScript218
10.3JavaScript基本交互方法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
习题10237
第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
习题11265
第12章珠宝商城后台管理页面267
12.1制作后台管理登录页267
12.2制作查询商品页271
12.3制作添加商品页280
12.4制作会员管理页283
12.5栏目的整合285
习题12286
参考文献287