网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript_莫小梅、毛卫英_9787302534532

内容简介
编辑推荐
序言
作者介绍
目录

本书分为理论篇和应用篇两个部分。其中，理论篇在内容上详细剖析了*Web标准的三大部分HTML5、CSS3、JavaScript，及其在网页设计与Web前端开发中的应用；应用篇则从实用的角度补充了综合实训指导及课业拓展知识等。本书知识结构体系较新，较全面地覆盖了目前企业前端工程师所需的相关理论和应用技能，同时案例形式丰富，既有针对单一知识点的小实例及贯穿特定案例网站的开发实录，也有针对Web前端技术重点和难点的案例实践，更有阶段性的综合案例实战。在案例设计方面，既突出新知识点的应用技巧，又以不同的方式巩固学过的技能，使读者能够一步一个脚印、循序渐进地扎实掌握网页设计与Web前端开发的各项技能。本书提供了配备的课程资源包，内容包括教学大纲、制作精良的教学课件（PPT）、电子教案、重点及难点综合案例的教学视频、本书所有的实例和综合案例的程序源码、课后题库的参考答案等。其中，程序源码全部经过精心测试，能够在Windows 系统及以Chrome为代表的主流浏览器下编译和运行。本书可作为普通高校计算机及相关专业教材、高职高专教材，适用于课堂教学、实验实训及综合课程设计等相关的教学活动，并可供从事网页设计与制作、Web前端开发、网页编程等行业人员参考。

零基础掌握网页前端开发核心技术，综合了传统教材和企业前端开发行业的应用需求，结合一线教师多年的教学经验，以系统的知识体系结合企业的实用案例来撰写。理论篇全程以知识点结合案例编写，通过大量实用案例辅助教学，并提供相关的案例教学视频。三个大型的企业项目案例实战提升综合应用能力，包括企业开发常用的布局基础、基于H5的移动网站布局、JS交互开发等，从基础到前沿系统逐步推进；应用篇包括软件的使用、实训指导、相关的前沿技术及工具等，实用性和拓展性强。本教材理论与实践并重，每章*后的习题部分同时提供了丰富的理论复习和实践练习题。配套资源包括全部案例素材和源码、电子课件、教学视频、课后习题答案等。

21世纪高等学校计算机类课程创新规划教材·微课版

网页设计与Web前端开发案例教程

HTML5、CSS3、JavaScript

主编：莫小梅

副主编：毛卫英

参编：隋慧芸张浩斌应可珍

视频录制：毛卫英王华琼

内容简介

本书分为理论篇和应用篇两个部分。其中，理论篇在内容上详细剖析了最新Web标准的三大部分HTML5、CSS3、JavaScript，及其在网页设计与Web前端开发中的应用；应用篇则从实用的角度补充了综合实训指导及课业拓展知识等。本书知识结构体系较新，较全面地覆盖了目前企业前端工程师所需的相关理论和应用技能，同时案例形式丰富，既有针对单一知识点的小实例及贯穿特定案例网站的开发实录，也有针对Web前端技术重点和难点的案例实践，更有阶段性的综合案例实战。在案例设计方面，既突出新知识点的应用技巧，又以不同的方式巩固学过的技能，使读者能够一步一个脚印、循序渐进地扎实掌握网页设计与Web前端开发的各项技能。
本书提供了配备的课程资源包，内容包括教学大纲、制作精良的教学课件（PPT）、电子教案、重点及难点综合案例的教学视频、
本书所有的实例和综合案例的程序源码、
课后题库的参考答案等。其中，程序源码全部经过精心测试，能够在Windows 系统及以Chrome为代表的主流浏览器下编译和运行。
本书可作为普通高校计算机及相关专业教材、高职高专教材，适用于课堂教学、实验实训及综合课程设计等相关的教学活动，并可供从事网页设计与制作、Web前端开发、网页编程等行业人员参考。

本书封面贴有清华大学出版社防伪标签，无标签者不得销售。

图书在版编目（CIP）数据
网页设计与Web前端开发案例教程： HTML5、CSS3、JavaScript/莫小梅主编.北京：清华大学出版社，2019
（21世纪高等学校计算机类课程创新规划教材·微课版）
ISBN 9787302534532
Ⅰ. ①网…Ⅱ. ①莫…Ⅲ. ①超文本标记语言-程序设计-高等学校-教材 ②网页制作工具-高等学校-教材 ③JAVA语言-程序设计-高等学校-教材Ⅳ. ①TP312.8 ②TP393.092

中国版本图书馆CIP数据核字（2019）第162825号

策划编辑：魏江江

责任编辑：王冰飞

封面设计：刘键

责任校对：梁毅

责任印制：宋林

出版发行：清华大学出版社

网址： http://www.tup.com.cn， http://www.wqbook.com

地址：北京清华大学学研大厦A座
邮编： 100084

社总机： 01062770175邮购： 01062786544

投稿与读者服务： 01062776969, cservice@tup.tsinghua.edu.cn

质量反馈： 01062772015, zhiliang@tup.tsinghua.edu.cn

课件下载： http://www.tup.com.cn,01062795954

印装者：清华大学印刷厂

经销：全国新华书店

开本： 185mm260mm印张： 30.5字数： 743千字

版次： 2019年9月第1版印次： 2019年9月第1次印刷

印数： 1~1500

定价： 79.80元

产品编号： 08163601

前言

本书是在编者的2012年版《网页编程基础XHTML、CSS、JavaScript》教材多年使用的基础上，参考了现有大量同类书刊、资料，吸收众家之长后结合多年网页编程基础教学的经验以及学习网页设计与Web前端开发的最新技术进展优化、增改而成的。
随着互联网技术和企业需求的发展日新月异，Web标准的定位和发展方向也发生了根本的变化，XHTML规范不再更新，而HTML5则成为了当今Web时代的前沿技术。在本书成稿之际，时间已是2019年的5月，距离上一版教材的完稿时间已过去了7年多。在这过去的7年里，我们见证了以HTML5、CSS3、JavaScript为三大基石的H5技术的快速发展和强大功能，H5技术增强了包括传统PC端Web页面制作在内的，兼容手机、iPad等各种设备和平台的响应式和自适应布局等Web前端技术，强化了包括新增的音频、视频标签等多媒体播放技术，以及Canvas图形绘制和动画制作等表现能力，追加了localStorage等本地存储数据功能，同时JavaScript的语法也从ES5升级到ES6这一更简洁、实用的语法。H5的应用不仅覆盖到网页的前端制作，还包括游戏开发、轻应用、Web APP、微站、小程序等方方面面，游戏化、场景化、跨屏互动等全新特性使得H5未来会在更多的领域展示其独特的魅力和应用前景。因此，本书的改版是顺应时代的潮流，为读者梳理和分享与HTML5、CSS3、JavaScript等H5前端开发相关的前沿技术和案例应用，为迎接时代的变革和分享技术的红利打好扎实的基础。
主要内容
本书主要围绕Web最新标准的三大关键技术（ HTML5、CSS3和JavaScript）来介绍网页设计与Web前端开发的必备知识及相关应用。其中，HTML5负责网页结构； CSS3负责网页样式及表现； JavaScript负责网页行为和功能。
全书共9章，分为理论篇和应用篇两大部分。其中，第1~7章为理论篇，从技术的角度重点介绍Web前端开发的基础概念及相关技术；第8~9章为应用篇，从实用的角度补充介绍了综合实践指导及课业拓展知识。
在第一部分理论篇的编写上，编者全面、系统地介绍了当前最新的Web前端知识体系，以一个综合案例网站的实际开发为主线，采用知识点结合典型实例、重难点结合案例实践、阶段性复习结合综合案例实战的多层次、全方位的配套实践案例体系，使读者既能够真正从网站建设的全局上把握Web标准各个部分的语法、联系和应用，又能结合不同阶段、不同层次的案例实践学以致用，扎实掌握相关的理论和实践应用技能。
第1、2章为基础知识和HTML入门，为后续知识的学习打下初步的基础。其中，第1章介绍了网页设计与Web前端基础中相关的概念、网站开发的工作流程和开发工具，在网站开发的工作流程部分列举了网站架构与内容、素材收集实用技能、案例网站的首页设计草图和实体模型等实用的案例和技能，使得读者对网站开发的流程有一个初步、清晰、具体的印象；第2章介绍了HTML的语言基础、常用标签和相关的典型实例。
第3、4章主要涉及PC端的主流前端布局技术。其中，第3章详细介绍了CSS3样式表的基本概念、使用方法和常用的CSS3属性，以及相关的实例；第4章重点介绍了HTML CSS的相关布局技术及各种应用。这一部分是全书的重点和Web前端技术的基础。
第5章重点介绍了HTML5 CSS3的移动网站布局技术，这一章体现了较多的HTML5和CSS3的新技术和新应用，同时也有一些难点。
第6章详细介绍了JavaScript包括ES5和ES6的两种主流语法和基于对象的编程技术，重点介绍了JavaScript在操作HTML页面、响应用户操作及验证数据等方面的应用。
第7章重点介绍了HTML5新增的Canvas元素及其在绘制Web页面中的图形、图像和动画方面的应用。由于Canvas元素需要通过JavaScript语句实现具体的绘制功能，所以安排在理论篇的最后。
第3~7章共同的特点是除了通过列举大量的典型实例来介绍基本的概念和语法以外，还结合了案例网站的首页及相关页面的实例，配以大量的案例实践，以及每章一个综合案例实战加以巩固。
理论部分的各章把Web标准三大部分的分工及合作一步一步地展现在读者面前，使读者在学习了这一部分内容以后，能够对Web标准及其内涵有更具体和深入的了解，并能在实际的网站开发中加以运用。
在第二部分应用篇的编写思路上，主要是考虑到从综合实践的角度为读者提供实用性的指导。其中，第8章结合两个商业网站案例项目书的目录结构及课程网站的开发全程，全面介绍了网站设计综合实训的完整流程，并提供了相关课程设计的要求及指导；第9章则从读者后续的自我提高角度出发，指出一些课业拓展的方向和参考，并为使用本书进行授课的教师提供一些建立学生实践环境的建议。

以上的编写方法不仅符合理论和实践相结合的学习规律，而且还为读者后续学习动态数据库网站的制作打下了坚实的基础。
本书特点
（1）时新性、系统性和实用性相结合：本书结合当前新兴的企业前端工程师的必备知识体系和技能要求，以企业前端开发工程师的能力需求为导向，系统、全面地覆盖时下网页设计与Web前端开发的知识体系和实践技巧。本书在原有的基础知识体系的基础上引入了HTML5、CSS3，以及JavaScript中ES6的新特性和应用案例，囊括了传统HTML CSS布局、新兴的HTML5 CSS3移动端布局、JavaScript基于对象的编程和交互应用，以及HTML5的Canvas图形图像和动画绘制技能。
（2）以项目带动全局：本书延续了上一版本教材中以项目带动全局的综合性案例教学特点，即从第1章开始就以一个案例网站首页的设计草图和实体模型为例，引导初学者在学习具体的技术之前先对网站开发的工作流程有一个简单而又明确的了解，并在后面的Web标准三大技术学习的过程中贯穿整个案例网站的建设和完善过程，以帮助读者理顺这三大技术的分工与合作，同时在课后的实践练习中也始终贯穿这种以项目带动全局的思路。
（3）基础实例与综合案例相结合，典型案例实践与综合案例实战相结合：本书在保留已有教材中基础实例与项目案例相结合的基础上，进一步对主要章节的重点和难点配备了典型的案例实践，以帮助读者加强理解和运用能力。此外，在第4~7章中通过规模性和复杂度更强的综合案例实战提供阶段性的综合实训案例和方法，使读者能够循序渐进地在不同的层面上扎实掌握相关理论和综合实践技能。
（4）与时俱进的实用知识和配套资源：本书在第二部分应用篇的第8章综合实训部分全面介绍了当前主流的网页布局方案，综合实训中的案例首页布局也升级为综合运用理论篇所介绍的HTML5结构标签、弹性布局、怪异盒模型等最新的实用布局技术；第9章课业拓展部分也删除了部分过时的内容，并引入了大量实用、前沿的拓展知识和技能。
教学资源

为了帮助读者和任课教师更好地使用本书，编者特意准备了一些辅助教学材料，具体如下：

（1）教学大纲。
（2）教学课件（PPT）。
（3）电子教案。
（4）习题解答手册。
注：扫描封底的书圈二维码，可以下载以上配套资源。
（5）各章实例（含基础实例、案例网站、案例实践和实战）程序源码。扫描目录上方的二维码，可以下载程序源码。

（6）主要综合案例的配套教学视频，共计1000分钟。扫描书中的二维码，可以在线观看、学习。本书的附录部分列出了书中视频对应的二维码的汇总表，方便读者查阅。
（7）应用篇中提到的本课程学习网站，课程网址为http://real.zjicm.edu.cn/mxm。
本书编者
本书的编者都是工作在教学和科研第一线的骨干教师，具有丰富的教学实践经验。全书由莫小梅负责规划。
本书编写的具体分工如下：第1章的个别节、第2~3章、第5~6章以及第8章的大部分（除8.8节外）由莫小梅编写，第1章的大部分、第4章由毛卫英和应可珍共同编写，第7章由隋慧芸编写，第8.8节以及第9章由张浩斌编写。

配套案例教学视频录制的分工如下：毛卫英负责第4章案例的视频录制，王华琼负责第3、5、6章案例的视频录制。
本书初稿由各位编者共同进行编排和审定，由莫小梅进行统稿。
由于编者水平有限，书中难免出现不足之处，请广大读者批评指正。

编者

2019年5月

莫小梅，计算机应用专业硕士学位，从2006年开始讲授网页设计、网页编程等多门web前端相关课程，深入钻研有关课程教学内容和探索课程建设改革十几年，积累了丰富的课程教学和实践经验。2012年6月，以第一作者的身份出版教材：《网页编程基础XHTML、CSS、JavaScript》，出版单位为清华大学出版社，改教材目前经过4次印刷，陆续为全国16个省市共67所兄弟院校所采用，并在当当、亚马逊等电商平台被评为100%好评的五星好书，得到了包括绝对好书、很满意、好，很愉快、很便宜、很喜欢、内容和纸张都很喜欢等多条读者有具体反馈的文字好评。

第一部分理论篇

第1章网页设计与Web前端基础

1.1Web概述

1.1.1Web的历史

1.1.2Web体系结构

1.1.3基本Web技术

1.1.4相关概念

1.2网页标准简介

1.2.1结构标准语言

1.2.2表现标准语言

1.2.3行为标准语言

1.3网站开发工作流程

1.3.1拟定网站主题

1.3.2规划网站架构与内容

1.3.3收集相关资料

1.3.4页面设计和布局规划

1.3.5网页制作、测试与上传

1.3.6网站的推广与更新维护

1.4Web开发工具

1.4.1Adobe Dreamweaver

1.4.2Sublime Text

1.4.3Notepad

1.4.4EditPlus

1.4.5WebStorm

1.4.6Visual Studio Code

1.5习题

第2章HTML常用标签

2.1HTML5网页结构

2.1.1HTML的发展历程

2.1.2初识HTML标签

2.1.3HTML5文档的基本结构

2.1.4HTML文档主体标签

2.2网页文本

2.2.1注释标签

2.2.2段落和换行标签

2.2.3标题标签

2.2.4特定文字样式标签

2.2.5网页特殊字符

2.3图片标签及属性

2.3.1常见图片格式

2.3.2网页图片的四要素

2.4超链接标签

2.4.1超链接的基本格式

2.4.2URL链接

2.4.3本地链接

2.4.4书签链接

2.4.5下载文件链接

2.4.6邮件链接

2.5插入多媒体

2.5.1在外部窗口中播放多媒体

2.5.2在当前文档中播放音频

2.5.3在当前文档中播放视频

2.6习题

第3章使用CSS3样式表

3.1初识CSS样式表

3.1.1第一个CSS案例

3.1.2CSS基本语法

3.1.3CSS的创建

3.1.4组合选择器

3.1.5后代选择器

3.1.6类选择器的创建和引用

3.1.7id选择器的创建和引用

3.2盒模型

3.2.1盒模型的概念

3.2.2样式初始化

3.2.3边框属性

3.2.4内边距属性

3.2.5外边距属性

3.2.6外边距合并

3.2.7盒模型案例实践

3.3列表标签及样式

3.3.1无序列表

3.3.2有序列表

3.3.3定义列表

3.3.4列表样式

3.3.5列表样式案例实践

3.4元素的分类及转换

3.4.1块元素

3.4.2行内元素

3.4.3行内块元素

3.4.4元素类型的转换

3.4.5元素类型转换案例实践

3.5CSS的常用属性

3.5.1背景属性

3.5.2字体属性

3.5.3文本属性

3.5.4鼠标属性

3.5.5CSS常用属性案例实践

3.6高级选择器

3.6.1子元素选择器

3.6.2相邻元素选择器

3.6.3关联元素选择器

3.6.4属性选择器

3.6.5伪类选择器

3.6.6伪元素选择器

3.6.7高级选择器案例实践

3.7CSS继承与优先

3.7.1CSS样式继承

3.7.2选择器的优先级

3.7.3样式优先级

3.7.4CSS书写顺序

3.8常用CSS3属性

3.8.1圆角属性

3.8.2方框阴影属性

3.8.3文本阴影属性

3.8.4溢出属性

3.8.5可见性属性

3.8.6常用CSS3属性案例实践

3.9习题

第4章使用HTML CSS布局网页

4.1CSS布局概述

4.1.1CSS布局相关概念

4.1.2CSS的3种定位机制

4.2元素的浮动

4.2.1浮动

4.2.2浮动的常规用法

4.2.3浮动的特殊情况

4.2.4与inlineblock的比较

4.2.5清除属性

4.2.6元素浮动案例实践

4.3元素的定位

4.3.1定位属性

4.3.2相对定位

4.3.3绝对定位

4.3.4固定定位

4.3.5zindex

4.3.6定位元素的居中

4.3.7元素定位案例实践

4.4图片及布局

4.4.1图片布局的几个概念

4.4.2水平对齐

4.4.3垂直对齐

4.4.4图片布局案例实践

4.5表单及布局

4.5.1表单的基本结构

4.5.2表单元素

4.5.3表单相关伪类

4.5.4表单布局案例实践

4.6表格及布局

4.6.1表格标签

4.6.2合并单元格

4.6.3表格的样式

4.6.4表格的特征

4.6.5表格布局及案例实践

4.7内联框架

4.7.1内联框架的基本用法

4.7.2内联框架布局案例实践

4.8CSS进阶应用

4.8.1网页logo应用

4.8.2阿里图标应用

4.8.3CSS代码复用

4.8.4CSS进阶应用案例实践

4.9PC端网页布局综合案例实战

4.10习题

第5章HTML5 CSS3移动网站布局

5.1HTML5新增标签

5.1.1HTML5概述

5.1.2HTML5结构性标签

5.1.3HTML5语义化标签

5.1.4HTML5网页案例实践

5.2CSS3新增伪类和伪元素

5.2.1以fisrt、last、only为前缀的伪类

5.2.2以nth为前缀的伪类

5.2.3其他伪类和伪元素

5.2.4CSS3新增伪类案例实践

5.3CSS3变形、过渡及动画

5.3.1变形

5.3.2过渡

5.3.3动画

5.3.4变形、过渡及动画案例实践

5.4CSS3新增属性

5.4.1新增背景属性

5.4.2新增颜色属性

5.4.3倒影

5.4.4遮罩

5.4.5CSS3新增属性案例实践

5.5CSS3弹性盒模型

5.5.1基本弹性盒模型设置

5.5.2弹性容器相关属性

5.5.3弹性项目相关属性

5.5.4怪异盒模型

5.5.5动态计算calc()

5.5.6弹性盒模型案例实践

5.6响应式布局和自适应布局

5.6.1媒体查询

5.6.2视口

5.6.3自适应布局

5.7移动端网页布局案例实战

5.8习题

第6章使用JavaScript脚本

6.1初识JavaScript

6.1.1JavaScript简介

6.1.2JavaScript的使用

6.1.3JavaScript代码规范

6.1.4弹窗与调试

6.1.5获取元素及操作内容

6.1.6简单认识DOM0级事件

6.1.7定义变量

6.1.8JS基本应用案例实践

6.2JavaScript的基本元素

6.2.1数据类型

6.2.2常量

6.2.3运算符和表达式

6.2.4数据类型转换

6.3操作浏览器对象属性及CSS样式

6.3.1操作对象属性

6.3.2操作对象属性案例实践

6.3.3操作CSS样式

6.3.4操作CSS样式案例实践

6.4JavaScript的条件语句

6.4.1if语句

6.4.2switch语句

6.4.3条件语句案例实践

6.5JavaScript的循环语句

6.5.1for循环语句

6.5.2while循环语句

6.5.3do…while循环语句

6.5.4break和continue语句

6.5.5循环语句案例实践

6.6使用JavaScript函数

6.6.1函数分类

6.6.2函数参数

6.6.3返回语句

6.6.4变量的作用域

6.6.5JS函数案例实践

6.7JavaScript对象的操作语句

6.7.1with语句

6.7.2for…in语句

6.7.3对象关键字及操作符

6.8JavaScript常用内置对象

6.8.1数组对象

6.8.2字符串对象

6.8.3数学对象

6.8.4日期对象

6.9DOM对象及操作

6.9.1HTML DOM简介

6.9.2HTML中的节点类型

6.9.3DOM节点的访问

6.9.4DOM节点的操作

6.9.5DOM对象案例实践

6.10BOM对象及操作

6.10.1BOM简介

6.10.2窗口对象

6.10.3文档对象

6.10.4位置对象

6.10.5历史对象

6.10.6浏览器信息对象

6.11localStorage对象及操作

6.11.1HTML5 Web存储简介

6.11.2localStorage对象的基本用法

6.11.3本地存储案例实践

6.12Web交互开发案例实战

6.13习题

第7章图形绘制

7.1初识Canvas

7.2Canvas的坐标系统

7.3添加Canvas元素

7.4Canvas绘制环境

7.5绘图API

7.5.1绘制路径

7.5.2渐变色的使用

7.5.3图形变换

7.5.4绘制环境的保存与恢复

7.5.5绘制图像

7.5.6绘制文本

7.6动画制作

7.7时钟案例实战

7.8习题

第二部分应用篇

第8章网站设计综合实训

8.1网站的规划

8.1.1网站设计项目书的书写

8.1.2网站的主要规划过程及创建

8.2网站的素材准备及管理

8.3网页外观设计及布局

8.3.1网页外观布局方法

8.3.2网页布局的方案

8.4向页面添加内容

8.5使用CSS设置页面

8.6添加网页特效及功能

8.6.1添加网页特效

8.6.2添加网页功能

8.7站点的本地测试

8.7.1运行站点报告

8.7.2检查站点范围的链接

8.8发布及维护Web站点

8.8.1上传文件

8.8.2获取网站地址

8.8.3实机测试

8.8.4日常维护

8.9课程设计及要求

8.9.1课程设计的基本目的

8.9.2课程设计的基本要求

8.9.3课程设计的考核方式与评分方法

第9章课业拓展

9.1浏览器开发者工具

9.1.1浏览器开发者工具简介

9.1.2激活工具栏

9.1.3选择元素与Element标签

9.1.4Console标签栏

9.1.5Network标签栏

9.1.6Source标签栏

9.2jQuery库

9.2.1jQuery简介

9.2.2jQuery基础用法

9.2.3文档参考

9.3Bootstrap框架

9.3.1Bootstrap简介

9.3.2Bootstrap快速上手

9.4架设互联网网站

9.4.1域名服务

9.4.2主机托管

9.4.3虚拟主机

9.5云服务

9.5.1阿里云虚拟主机

9.5.2阿里云ECS

附录书中视频对应二维码汇总表

参考文献

专题学习资源网址

你还可能感兴趣

前端HTML+CSS修炼之道视频同步+直播
基于新信息技术的HTML5和CSS3网页设计基础教程（高职）
响应式Web设计 HTML5和CSS3实战第2版
Web前端学习笔记：HTML5+CSS3+JavaScript
Angular项目实战/企业级卓越人才培养解决方案“十三五”规划教材

我要评论

您的姓名	验证码：
留言内容