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

作者: 张兵义主编

出版社: 电子工业出版社

出版时间: 2017-09

版次: 1

ISBN: 9787121325311

定价: 39.80

装帧: 其他

开本: 16开

纸张: 胶版纸

分类: 计算机与互联网

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

第1章  网站规划和网页设计基础1

1.1  万维网WWW1

1.1.1  WWW和浏览器的基本概念1

1.1.2  网址2

1.1.3  超文本3

1.1.4  超文本标记语言HTML3

1.1.5  HTTP3

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

习题115

第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

习题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.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

习题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.1  CSS简介64

5.1.1  什么是CSS64

5.1.2  CSS的发展历史64

5.1.3  CSS3的特点65

5.1.4  CSS编写规则65

5.1.5  CSS的工作环境67

5.2  HTML与CSS67

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

习题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.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

习题8190

第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

习题9216

第10章  网页行为语言—JavaScript218

10.1  JavaScript概述218

10.2  在网页中调用JavaScript218

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

习题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
内容简介:
本书面向Web前端开发的读者，采用全新流行的Web标准，以Web前端开发技术三要素（HTML5、CSS3、JavaScript）等前端技术，由浅入深、完整详细地讲解采用手写编码编写符合W3C标准、兼容多种浏览器的代码。本书共分12章，主要内容包括：网站规划和网页设计基础、HTML概述、编辑网页文档、网页布局与交互、CSS基础、CSS盒模型、使用CSS修饰常见的网页元素、使用CSS设置链接与导航、Div CSS布局页面、网页行为语言——JavaScript、珠宝商城前台页面和珠宝商城后台管理页面。本书内容紧扣国家对高等学校培养高级应用型、复合型人才的技能水平和知识结构的要求，以珠宝商城项目案例的开发思路为主线，采用模块分解、任务驱动、子任务实现和代码设计四层结构，通过对模块中每个任务相应知识点的讲解，引导读者学习网页制作、设计、规划的基本知识以及项目开发、测试的完整流程。
作者简介:
教授，现就职于北京信息职业技术学院（东校区）软件工程系。我社老作者，具有多年写作经验，在我社出版过30多本教材。
目录:
目    录

第1章  网站规划和网页设计基础1

1.1  万维网WWW1

1.1.1  WWW和浏览器的基本概念1

1.1.2  网址2

1.1.3  超文本3

1.1.4  超文本标记语言HTML3

1.1.5  HTTP3

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

习题115

第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

习题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.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

习题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.1  CSS简介64

5.1.1  什么是CSS64

5.1.2  CSS的发展历史64

5.1.3  CSS3的特点65

5.1.4  CSS编写规则65

5.1.5  CSS的工作环境67

5.2  HTML与CSS67

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

习题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.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

习题8190

第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

习题9216

第10章  网页行为语言—JavaScript218

10.1  JavaScript概述218

10.2  在网页中调用JavaScript218

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

习题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

查看详情

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

内容简介:

作者简介:

目录: