关于我们
![]() ![]() |
Web客户端开发/HTML5+CSS+JavaScript实例教程
本书以项目任务为载体, 全面系统地介绍了web客户端开发的主要技术。全书以商务网站前端开发实例为主线, 基于网站前端开发的所需要的技术划分章节, 涵盖了HTML5、CSS样式、JavaScript共3大方面的内容。其中包括网站前端开发的知识准备、HTML5基础和应用、CSS基础、CSS布局、CSS样式属性、CSS3新增属性、JavaScript入门等内容。本书知识点与知名网站的精彩部分做案例相结合的方式, 是读者由浅入深地掌握Web前端开发的相关知识。
作者结合自己多年积累的相关课程教学经验和Web开发经验,编写了本书。本书是为计算机相关专业的学生以及对网站前端开发感兴趣的读者编写的,旨在培养读者的网站开发能力,以适应网络社会对这方面人才的需求,让读者通过学习,成为一名精通Web前端开发的能手。
本书以作者参与的院级科研项目“校园电子商务网站开发研究”为案例参考背景,将构建商务网站时需要的典型应用作为书中的案例,引入网站前端开发所需要的关键技术和开发语言。
本书合理安排了基础知识和实战训练的比例,基础知识以“够用”为度,用简明清晰的语言阐述,结合图表来表达,符合学生的学习特点和认知规律。
本书重点放在专业技能的训练上。几乎每个重要的知识点都有实例供读者参考练习,并且采用的是人们熟悉的电商网站的精彩部分作为案例。
本书包含三大核心技术,分别是HTML 5、CSS 3和JavaScript。在内容组织方面,共分为9个教学模块和1个综合应用案例模块。
从目前国内互联网的发展趋势来看,Web前端开发已经成为一门广泛应用的技术,各行各业对网站的要求越来越高,对网页设计开发人才的需求也大大增加。Web标准和CSS技术已经成为一种潮流和趋势。
作者结合自己多年积累的相关课程教学经验和Web开发经验,编写了本书。本书是为计算机相关专业的学生以及对网站前端开发感兴趣的读者编写的,旨在培养读者的网站开发能力,以适应网络社会对这方面人才的需求,让读者通过学习,成为一名精通Web前端开发的能手。
本书以作者参与的院级科研项目“校园电子商务网站开发研究”为案例参考背景,将构建商务网站时需要的典型应用作为书中的案例,引入网站前端开发所需要的关键技术和开发语言。
本书合理安排了基础知识和实战训练的比例,基础知识以“够用”为度,用简明清晰的语言阐述,结合图表来表达,符合学生的学习特点和认知规律。
本书重点放在专业技能的训练上。几乎每个重要的知识点都有实例供读者参考练习,并且采用的是人们熟悉的电商网站的精彩部分作为案例。
本书包含三大核心技术,分别是HTML5、CSS3和JavaScript。在内容组织方面,共分为9个教学模块和1个综合应用案例模块。
第1章介绍网站前端设计需要的知识,包括Web基础知识、网站开发的基本流程及关键技术、网站开发人才需求,以及网站开发工具。
第2章属于HTML5部分,介绍HTML5的新功能、新增标记和属性、废弃标记,以及HTML5文档中的常用标记、表单元素和HTML5新增的结构化元素。
第3~5章属于CSS部分,主要介绍CSS基础、布局方法和样式属性,对主流浏览器都支持的也比较成熟的CSS3的部分属性做了讲解。
第6~8章属于JavaScript部分,主要介绍JavaScript语法基础、函数及其应用、常用的内置对象、常用的文档对象、常用的窗口对象、事件处理等内容。
第9章利用JavaScript实现Canvas功能,包括使用Canvas绘制基本图形、变换图形及绘制文本等。
第10章综合应用案例,主要通过商品购物车功能设计,系统地介绍HTML5、CSS样式和JavaScript脚本编程三项技术的综合运用。
本书由王黎任主编,张希文、段炬霞、刘军玲、郭洪荣任副主编,其中王黎编写第2、3、4、7、8、9、10章,张希文编写第1章,刘军玲编写第5章,段炬霞编写第6章,邱冬副教授、吕殿基副教授审稿,编写过程中参考了很多相关技术资料及经典案例,吸取了许多同仁的宝贵经验,在此深表谢意!
由于作者水平有限,虽然对内容进行了反复斟酌和修改,但书中不足与疏漏之处在所难免,恳请各位专家和广大读者批评指正。
编者
第1章 网站前端设计知识准备 1
1.1 Web基础 2
1.1.1 Web的基本概念 2
1.1.2 了解“Web标准” 2
1.1.3 静态网页 4
1.1.4 动态网页 4
1.2 网站开发 4
1.2.1 网站开发的基本流程 4
1.2.2 网站开发的人才需求 5
1.2.3 网站开发的主要技术 6
1.3 Web前端工程师需要掌握的技能 6
1.3.1 Web前端工程师的工作内容 6
1.3.2 Web前端工程师需要掌握的
技术 6
1.4 网站开发工具介绍 8
1.4.1 原型设计工具 8
1.4.2 开发工具 9
1.4.3 调试工具 9
1.4.4 代码托管工具 10
本章小结 10
习题 11
第2章 HTML 5基础 13
2.1 HTML简介 14
2.1.1 了解HTML 14
2.1.2 HTML元素 15
2.2 初识HTML 5 16
2.2.1 了解HTML 5 16
2.2.2 HTML 5的新功能 17
2.2.3 HTML 5的废弃标记 18
2.2.4 HTML 5的新增标记 18
2.2.5 HTML 5的新增属性 19
2.3 HTML 5的结构 20
2.3.1 HTML 5的基本结构 20
2.3.2 编写第一个符合W3C标准的
HTML 5网页 21
2.4 HTML 5文档的常用标记 22
2.4.1 文本段落的相关标记 22
2.4.2 图像标记 23
2.4.3 超链接 24
2.4.4 列表 26
2.4.5 表格 27
2.4.6 HTML 5的音频和视频 29
2.5 HTML 5的表单元素 32
2.5.1 创建表单 32
2.5.2 input输入类型控件 32
2.5.3 列表框(select) 39
2.5.4 多行文本输入框(textarea) 39
2.5.5 表单控件综合示例 40
2.6 HTML 5语义化结构性元素 41
2.6.1 新增的主体结构元素 41
2.6.2 新增的非主体结构元素 46
2.7 小型案例实训:使用结构元素进行
网页布局 47
本章小结 49
习题 49
第3章 CSS基础 51
3.1 CSS概述 52
3.1.1 什么是CSS 52
3.1.2 CSS的发展史 52
3.1.3 CSS 3简介 53
3.2 CSS的组成 53
3.2.1 基本语法规则 53
3.2.2 选择符的分类 54
3.3 在HTML中使用CSS的方法 61
3.3.1 行内样式 61
3.3.2 内部样式 61
3.3.3 外部样式 62
3.3.4 CSS的优先级 63
3.3.5 常用的CSS 3属性前缀 63
本章小结 63
习题 64
第4章 CSS布局 65
4.1 CSS的盒模型 66
4.1.1 盒模型的结构 66
4.1.2 盒模型的元素类型 67
4.1.3 使用DIV 69
4.1.4 外边距、内边距与边框的
CSS设置 70
4.1.5 CSS 3对盒模型边框的完善 74
4.2 网页元素的定位 78
4.2.1 定位属性position 78
4.2.2 float浮动定位 81
4.2.3 其他CSS布局定位方式 83
4.3 DIV + CSS常用的布局方式 84
4.3.1 单列水平居中布局 85
4.3.2 浮动的布局 87
4.3.3 div嵌套布局 89
4.3.4 CSS 3多列布局 92
4.4 列表元素布局 94
4.5 小型案例实训——布局电商网站
首页(制作盒模型) 95
4.5.1 布局网页的总体结构 95
4.5.2 区域的
结构分析及布局 96
4.5.3
内容区域的设计 98
4.5.4 区域的
设计 100
本章小结 100
习题 101
第5章 CSS样式属性 103
5.1 CSS 3字体相关属性 104
5.1.1 设置字体属性 104
5.1.2 设置字体属性的综合示例 106
5.1.3 CSS 3新增字体属性 106
5.2 CSS控制文本的样式 107
5.2.1 文本属性 107
5.2.2 设置文本属性的综合示例 109
5.2.3 CSS 3新增的文本属性 110
5.3 使用CSS控制背景 114
5.3.1 背景属性 114
5.3.2 背景设置综合示例 116
5.3.3 CSS 3新增的与背景相关的
属性 116
5.4 使用CSS设置列表样式 121
5.4.1 CSS列表属性 121
5.4.2 列表属性的综合实例 122
5.5 小型案例实训 123
5.5.1 案例1:商品信息展示 123
5.5.2 案例2:CSS制作二级导航
下拉菜单 125
本章小结 128
习题 128
第6章 JavaScript入门 131
6.1 JavaScript概述 132
6.1.1 认识JavaScript 132
6.1.2 JavaScript的特点和作用 132
6.1.3 在网页中使用JavaScript 134
6.1.4 JavaScript代码规范 135
6.2 变量、数据类型 136
6.2.1 变量的声明和使用 136
6.2.2 JavaScript的基本数据类型 138
6.3 表达式与运算符 141
6.3.1 表达式 141
6.3.2 运算符 141
6.4 流程控制语句 148
6.4.1 分支结构 148
6.4.2 循环结构 151
6.5 JavaScript的函数 154
6.5.1 函数的定义 154
6.5.2 函数的调用 154
6.5.3 使用函数的返回值 157
6.5.4 函数的嵌套 158
6.5.5 内置函数 158
6.6 小型案例实训——制作简易
计算器 160
本章小结 162
习题 162
第7章 JavaScript中的对象 165
7.1 JavaScript的常用内置对象 166
7.1.1 数组对象 166
7.1.2 字符串(String)对象 170
7.1.3 日期(Date)对象 172
7.1.4 数学(Math)对象 174
7.2 常用文档对象 177
7.2.1 文档对象模型(DOM对象) 177
7.2.2 文档对象的节点树 178
7.2.3 文档对象(document) 185
7.2.4 表单及其控件对象 188
7.2.5 style对象 190
7.3 常用窗口对象 192
7.3.1 屏幕对象 192
7.3.2 window窗口对象 194
7.3.3 浏览器信息对象 196
7.3.4 网址对象 197
7.3.5 历史记录对象 198
7.4 小型案例实训 200
7.4.1 案例1:将英文单词首字母
改成大写 200
7.4.2 案例2:限制多行文本域
输入的字符个数 202
本章小结 204
习题 205
第8章 事件处理 209
8.1 了解JavaScript事件 210
8.1.1 JavaScript的常用事件 210
8.1.2 调用事件处理程序的方法 211
8.2 常用事件在网页中的应用 213
8.2.1 鼠标事件 213
8.2.2 表单事件 216
8.2.3 页面相关事件 221
8.2.4 键盘事件 222
8.3 小型案例实训:JavaScript实现
广告图像轮播 223
本章小结 227
习题 227
第9章 利用JavaScript实现Canvas
功能 229
9.1 创建Canvas元素 230
9.2 绘制基本图形 231
9.2.1 绘制直线 232
9.2.2 绘制圆形 232
9.2.3 绘制矩形 233
9.2.4 绘制多边形 234
9.3 图形的变换 235
9.3.1 保存与恢复Canvas状态 235
9.3.2 移动坐标位置 236
9.3.3 缩放图形 237
9.4 使用特效 237
9.5 绘制文本 239
9.6 小型案例实训:用Canvas绘制
时钟 240
9.6.1 绘制静态时钟 240
9.6.2 制作动态时钟 244
本章小结 244
习题 245
第10章 综合案例——购物车功能的
实现 247
10.1 案例介绍 248
10.2 设计思路 248
10.3 实施过程 249
10.3.1 购物车的HTML结构 249
10.3.2 购物车的样式设计 251
10.3.3 利用JavaScript实现购物车
功能 256
参考文献 262
第3章 CSS基础
本章要点
* CSS的组成。
* HTML文档如何调用CSS。
* CSS 3简介。
学习目标
* 理解CSS的语法规则。
* 掌握选择符的使用。
* 学会在HTML文档中使用CSS。
* 初步了解CSS 3。
3.1 CSS概述
3.1.1 什么是CSS
CSS(Cascading Style Sheet,层叠样式表或级联样式表,简称样式表)是一种用来表现HTML文件样式的计算机语言,是网页文件的重要组成部分。
网页的内容由HTML语言决定,利用CSS修饰HTML各个标记的风格,对网页中的元素进行精确的格式化控制。
CSS是一种非常灵活的工具,可以实现网页结构和表现完全分离,CSS样式类型除了通用的颜色、字体、背景外,还可以控制字符间距、填充距离、大小等大约50种样式。
CSS样式表的功能大致可以归纳为以下几点。
(1) 控制页面中文字的字体、颜色、大小、间距、风格及位置。
(2) 设置文本块的行高、缩进,及具有三维效果的边框。
(3) 可以方便地定位网页中的任意元素,设置不同的背景颜色和背景图片。
(4) 精确控制网页中各元素的位置。
(5) 与DIV元素结合布局网页。
3.1.2 CSS的发展史
CSS的发展历史分为4个阶段。
(1) CSS 1。1996年12月,CSS 1正式推出,在这个版本中,已经包含了font的相关属性、颜色与背景的相关属性、box的相关属性等。
(2) CSS 2。1998年5月,CSS 2正式推出,在这个版本中开始使用样式表结构。
(3) CSS 2.1。2004年2月,CSS 2.1正式推出,它在CSS 2的基础上略微有所改动,删除了许多诸如text-shadow等不被浏览器所支持的属性。现在使用的CSS基本上都是在1998年推出的CSS 2的基础上发展而来的。
(4) CSS 3。2010年开始,CSS 3逐步发布,2011年6月成为W3C推荐标准。
3.1.3 CSS 3简介
2001年,W3C就着手进行CSS 3标准的制定了。CSS 3的一个新特点是规范被分为若干个相互独立的模块,这有利于及时更新和发布、及时调整模块的内容。同时,由于受支持设备和浏览器厂商的限制,可以有选择地支持一部分模块,即支持CSS 3的一个子集。以前网页中很多效果只有通过图片和脚本才能实现,而利用CSS 3,只需短短几行代码就能完成,如圆角、图片边框、文字阴影和盒阴影等效果。
目前,主流浏览器如Chrome、Safari、Firefox、Opera,甚至360,都已经支持CSS 3的大部分功能了,IE10也开始全面支持CSS 3。除了HTML 5,CSS 3将是互联网发展的另一个趋势。
CSS 3规范并不是独立的,它重复了CSS的部分内容,在CSS 2的基础上增加了很多强大的新功能。CSS 3与先前的几个版本相比,其变化是革命性的,是一个不断演化和完善的标准,在目前已经完成的部分中,CSS 3新增了很多功能。
(1) 强大的CSS 3选择符。
通过CSS 3选择符可以直接指定需要的HTML元素,而不需要在HTML中添加不必要的类名、id等。使用CSS 3选择符,能够更完美地实现结构和表现分离,从而设计出简洁、轻量级的Web页面。
(2) 可以轻松实现比如圆角、图片边框、文字阴影、盒阴影、过渡、动画等效果。
(3) 盒模型变化。
盒模型在CSS中起着非常重要的作用,过去CSS中的盒模型只能实现一些基本的功能,但一些特殊的功能需要借助JavaScript来实现。而在CSS 3中,这一点得到了很大的改善,例如,CSS 3中的弹性盒子、实现多列布局等。
(4) CSS 3支持更多的颜色和更广泛的颜色,如HSL、CMYK、HSLA和RGBA。其中HSLA和RGBA还增加了透明通道,能轻松地改变任何一个元素的透明度。
……
你还可能感兴趣
我要评论
|