作者：张振 王修洪
出版社：清华大学出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML+CSS+JavaScript网页设计与布局 从新手到高手试读：
前言
HTML5是自2010年以来最热门的技术之一。学习HTML5成为Web开发者的一项重要任务。当你学会了HTML5，就掌握了迈向未来Web平台的一把钥匙。因此我们希望借助此书，帮助国内的Web开发者更好地学习HTML5，以及与之相伴随的CSS3与JavaSricpt技术。
本书是一种典型的HTML5、CSS3和JavaSricp实例教程，由多位经验丰富的网页设计人员和程序员编著而成。本书立足于网络行业，详细介绍HTML5、CSS3和JavaSricp网页的设计和制作流程。1. 本书内容
全书系统全面地介绍了HTML5+CSS3+JavaSricp网页设计与布局的应用知识，每章都提供了丰富的实用案例，用来帮助读者巩固所学知识。本书共分为21章，内容如下所述。
第1章：全面介绍了网页基础，包括初始网页、W3C概述、网站设计概述、网页的艺术表现与风格设计等内容。
第2章：HTML5概述，包括HTML5基本概念、HTML5的优势、HTML5的主体结构、HTML5文件的编写方法等内容。
第3章：全面介绍了创建文本和图像，包括添加网页文本、设置文本格式、设置文字列表、使用图像等内容。
第4章：全面介绍了创建表格，包括使用表格、编辑单元格、设置表格、处理表格数据等内容。
第5章：全面介绍了创建超链接，包括链接与路径、使用超链接、应用IFrame框架等内容。
第6章：全面介绍了应用多媒体，包括插入Flash、使用音频文件、使用视频文件等内容。
第7章：全面介绍了绘制图形，包括认识HTML5 Canvas元素、绘制基本形状、绘制渐变图形、绘制变形图形、编辑图形、使用图像、绘制文字等内容。
第8章：全面介绍了创建表单，包括添加表单、添加文本和网页元素、添加选择和按钮元素、添加表单高级元素等内容。
第9章：全面介绍了Web应用技术，包括本地存储、离线Web应用、通信应用、线程应用等内容。
第10章：揭秘CSS3，包括CSS3简介、应用CSS3、使用CSS选择器等内容。
第11章：全面介绍了美化字体与段落，包括设置字体格式、设置段落格式、设置高级样式等内容。
第12章：全面介绍了美化菜单与图片，包括插入图像文件、设置图片格式、图文混排、设置项目列表等内容。
第13章：全面介绍了美化背景与边框，包括设置背景格式、设置边框格式、设置圆角效果等内容。
第14章：全面介绍了美化表格、美化表单、美化超链接等内容。
第15章：全面介绍了CSS3变形与动画，包括2D变形、设计动画、渐变效果等内容。
第16章：全面介绍了盒样式与用户界面，包括使用盒相关样式、用户界面模块、设置分栏效果等内容。
第17章：全面介绍了JavaScript概述，包括JavaScript简介、JavaScript语法基础、JavaScript数据结构和类型、JavaScript运算符等内容。
第18章：全面介绍了JavaScript核心语法，包括条件判断语句、循环和跳转语句、函数、事件驱动和事件处理等内容。
第19章：全面介绍了JavaScript的内置对象，包括面向对象概述、字符串对象、数值对象、日期对象、数组对象等内容。
第20章：全面介绍了JavaScript的核心对象，包括窗口对象、文档对象、表单和图像对象等内容。
第21章：全面介绍了网站后台管理系统，以综合案例的方式搭配使用HTML5、CSS3和JavaScript技术。2. 本书主要特色
□ 系统全面，超值实用。全书提供了39个练习案例，通过示例分析和设计过程，讲解HTML5、CSS3和JavaScript网页设计与布局的应用知识。每章穿插提示、分析、注意和技巧等栏目，构筑了面向实际的知识体系。本书采用了紧凑的体例和版式，在相同的内容下，篇幅缩减了30%以上，实例数量增加了50%。
□ 串珠逻辑，收放自如。统一采用三级标题灵活安排全书内容，摆脱了普通培训教程按部就班讲解的窠臼。每章都配有扩展知识点，便于用户查阅相应的基础知识。内容安排收放自如，方便读者学习图书内容。
□ 全程图解，快速上手。各章内容分为基础知识和实例演示两部分，全部采用图解方式，图像均做了大量的裁切、拼合、加工，信息丰富，效果精美，令读者阅读体验轻松，上手容易。读者在书店中一翻开图书，就会获得强烈的视觉冲击，感到本书与同类书在品质上拉开距离。
□ 新手进阶，加深印象。全书提供了82个基础实用案例，通过示例分析、设计应用，全面加深HTML5+CSS3+JavaScript网页设计与布局的基础知识应用方法的讲解。在新手进阶部分，每个案例都提供了操作简图与操作说明，并在光盘中配以相应的基础文件，以帮助用户完全掌握案例的操作方法与技巧。3. 本书使用对象
本书从网页设计与布局的基础知识入手，全面介绍了HTML5、CSS3和JavaScript网页设计与布局面向应用的知识体系。本书适合高职高专院校学生学习使用，也可作为计算机办公用户深入学习网页设计与布局的培训和参考资料。
参与本书编写的人员除了封面署名的人员之外，还有于伟伟、王翠敏、冉洪艳、刘红娟、谢华、夏丽华、卢旭、吕咏、扈亚臣、程博文、方芳、房红、孙佳星、张彬、马海霞等人。
由于水平有限，疏漏之处在所难免，欢迎读者朋友登录清华大学出版社的网站www.tup.com.cn与我们联系，帮助我们改进提高。
本书的配套素材文件请扫描封底的二维码进行下载，如果在下载过程中碰到问题，请联系陈老师，联系邮箱：chenlch@tup.tsinghua.edu.cn。作 者2019年1月第1章 网页基础
随着互联网的逐渐发展，网站建设已成为企业发展战略中的重要内容之一。而随着市场上的激烈竞争，越来越多的网站开始注重网页的界面设计，以期通过优化和美化界面，取得竞争的主动权，达到吸引更多用户的目的。网页是浏览器与网站开发人员沟通交流的窗口，一个美观且易于与用户交互的图形化网页，除了方便用户浏览网页内容和使用各种网页功能之外，还可以为用户提供美的视觉享受。本章主要介绍网页设计之前的网页构成、网页配色、网站布局等一些基础知识，以及设计网页所需要进行的各种准备工作。1.1 初识网页
网页（Web Page）是网站中的一个页面，是构成网站的基本元素，通常是HTML格式（文件扩展名为.html、.htm、.asp、.aspx、.php或者.jsp等）。文字和图片是构成网页的两个最基本的元素，并通过网页浏览器来阅读。1.1.1 网页的构成
Internet中的网页内容各异，然而多数网页都是由一些基本的版块组成的，包括Logo、导航条、Banner、内容版块、版尾和版权等。1. Logo图标
Logo是企业或网站的标志，是徽标或者商标的英文说法，起到对徽标拥有公司的识别和推广的作用。通过形象的Logo，可以让浏览者记住公司主体和品牌文化。网络中的Logo徽标主要是各个网站用来与其他网站链接的图形标志，代表一个网站或网站的一个版块。例如，微软的Logo，如下图所示。2. 导航条
导航条是网站的重要组成标签。合理安排的导航条可以帮助浏览者迅速查找需要的信息。例如，新浪网的导航条，如下图所示。3. Banner
Banner的中文直译为旗帜、网幅或横幅，意译则为网页中的广告。多数Banner都以JavaScript技术或Flash技术制作，通过一些动画效果，展示更多的内容，并吸引用户观看，如下图所示。4. 内容版块
网页的内容版块通常是网页的主体部分。这一版块可以包含各种文本、图像、动画、超链接等。例如，蔡司光学网站的内容版块，如下图所示。5. 版尾版块
版尾是网页页面的最底端版块，通常放置网站的联系方式、友情链接和版权信息等内容，如下图所示。1.1.2 静态网页
网页可以从技术上分为静态网页或者动态网页。静态网页是指网站的网页内容“固定不变”，当用户浏览器通过互联网的HTTP（Hypertext Transport Protocol）协议向Web服务器请求提供网页内容时，服务器仅仅是将原已设计好的静态HTML文档传送给用户浏览器，如下图所示。
随着技术的发展，在HTML页面中添加样式表、客户端脚本、Flash动画、Java Applet小程序和ActiveX控件等，会使页面的显示效果更加美观和生动。但是，这只不过是视觉动态效果而已，它仍然不具备与客户端进行交互的功能。常见的静态页面以.html或者.htm为扩展名，如下图所示。1.1.3 动态网页
这里说的动态网页，与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系，动态网页可以是纯文字内容，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为“动态网页”。
动态网页在于可以根据先前制定好的程序页面，以及用户的不同请求返回其相应的数据。动态页面常见的扩展名有：.asp、.php、.jsp、.cgi等。
动态网页的优点是效率高、更新快、移植性强，从而快速地达到所见即所得的目的，但是它的优点同样也是它的缺点，其工作流程如下图所示。
动态页面通常可以通过网站后台管理系统对网站的内容进行更新管理，而前端显示的内容可以随着后台数据的更改而改变，如发布新闻、发布公司产品、交流互动、博客、学校网等，如下图所示。
下面就常见的几种动态网技术来做简单的介绍。1. ASP技术
ASP（Active Server Pages，动态服务网页）是微软公司开发的一种由VBScript脚本语言或JavaScript脚本语言调用FSO（File System Object，文件系统对象）组件实现的动态网页技术。
ASP技术必须通过Windows的ODBC与后台数据库通信，因此只能应用于Windows服务器中。ASP技术的解释器包括两种，即Windows 9X系统的PWS和Windows NT系统的IIS，如下图所示。2. ASP.NET技术
ASP.NET是由微软公司开发的ASP后续技术，其可由C#、VB.net、Perl及Python等编程语言编写，通过调用System.Web命名空间实现各种网页信息处理工作。
ASP.NET技术主要应用于Windows NT系统中，需要IIS及.NET Framework的支持。通过Mono平台，ASP.NET也可以运行于其他非Windows系统中，如下图所示。提示虽然ASP.NET程序可以由多种语言开发，但是最适合编写ASP.NET程序的语言仍然是C#语言。3. JSP技术
JSP（JavaServer Pages，Java服务网页）是由太阳计算机系统公司开发的，以Java编写，动态生成HTML、XML或其他格式文档的技术。
JSP技术可应用于多种平台，包括Windows、Linux、UNIX及Solaris。JSP技术的特点在于，如果客户端第一次访问JSP页面，服务器将先解释源程序的Java代码，然后执行页面的内容，因此速度较慢。而如果客户端是第二次访问，则服务器将直接调用Servlet，无需再对代码进行解析，因此速度较快，如下图所示。4. PHP技术
PHP（Personal Home Page，个人主页）也是一种跨平台的网页后台技术，最早由丹麦人Rasmus Lerdorf开发，并由PHP Group和开放源代码社群维护，是一种免费的网页脚本语言。
PHP是一种应用广泛的语言，其多在服务器端执行，通过PHP代码产生网页，并提供对数据库的读取。1.1.4 数据库
数据库是“按照数据结构来组织、存储和管理数据的仓库”。在日常工作中，常常需要把某些相关的数据放进“仓库”，并根据管理的需要进行相应的处理。
大家知道数据库是用于存储数据内容的，而对生活中一个事件或者一类问题，如何将它们存储到数据库中呢？在学习数据库之前，先来了解一下数据库的概念。1. 数据与信息
为了了解世界、交流信息，人们需要描述事物。在日常生活中，可以直接用自然语言（如汉语）来描述。如果需要将这些事物记录下来，也可以将事物变成信息进行存储。而信息是对客观事物属性的反映，也是经过加工处理，并对人类客观行为产生影响的数据表现形式。
例如，在计算机中，为了存储和处理这些事物，需要抽象地描述这些事物的特征，而这些特征，正是在数据库中所存储的数据。数据是描述事物的符号记录，描述事物的符号可以是数字，也可以是文字、图形、图像、声音、语言等多种表现形式。
下面以“学生信息表”为例，通过学号、姓名、性别、年龄、系别、专业和年级等内容，来描述学生在校的特征。
在这里的学生记录就是信息。在数据库中，记录与事物的属性是对应的关系，其表现如下图所示。
可以把数据库理解为存储在一起的相互有联系的数据集合，数据被分门别类、有条不紊地保存。而应用于网站时，则需要注意一些细节问题，即这些特征需要用字母（英文或者拼音）来表示，避免不兼容性问题的发生。例如，对于描述用户注册信息，如下图所示。
其中，每个特征中字母所代表的含义见下表。2. 数据库
综上所述，数据库（Database，DB）是存储在一起的相关数据的集合，这些数据是结构化的，无有害的或不必要的冗余，并为多种应用服务；数据的存储独立于使用它的程序；对数据库插入新数据，修改和检索原有数据均能按一种公用的和可控制的方式进行。当某个系统中存在结构上完全分开的若干个数据库时，则该系统包含一个“数据库集合”。这是J.Martin给数据库下的一个比较完整的定义。
因此，以Access数据库为例，可以将这个“数据仓库”以表的形式表现出来。其中，每条记录中存储的内容即所指的信息。例如，在“学生信息表”中，显示了每位学生的数据存储情况，如下图所示。3. 数据库管理系统
数据库管理系统（Database Management System，DBMS）是一种操纵和管理数据库的大型软件，是用于建立、使用和维护数据库的。它对数据库进行统一的管理和控制，以保证数据库的安全性和完整性。
用户通过DBMS访问数据库中的数据，数据库管理员也通过DBMS进行数据库的维护工作。DBMS提供多种功能，可使多个应用程序和用户用不同的方法在同时或不同时刻去建立、修改和询问数据库。主要包括以下几方面的功能。
□ 数据定义功能
DBMS提供数据定义语言（Data Definition Language，简称DDL），用户通过它可以方便地对数据库中的数据对象进行定义。例如，在Access数据表中，可以定义数据的类型、数据的属性（如字段大小、格式）等，如下图所示。
□ 数据操纵功能
DBMS还提供数据操纵语言（Data Manipulation Language，简称DML），用户可以使用DML操纵数据，实现对数据库的基本操作，如查询、插入、删除和修改等。例如，在“学生信息表”中，用鼠标右击任意记录，执行【删除记录】命令，即可删除数据内容，如下图所示。
□ 数据库的运行管理
数据库在建立、运用和维护时，由数据库管理系统统一管理、控制，以保证数据的安全性、完整性。
□ 数据库的建立和维护功能
它包括数据库初始数据的输入、转换功能；数据库的转储、恢复功能；数据库的管理重组功能和性能监视、分析功能等。这些功能通常是由一些实用程序完成的。提示在网站中，一般完成数据库系统的操作，都需要通过网站编程语句进行。4. 数据库的作用
在动态网站建设中，数据库发挥着不可替代的作用。它用于存储网站中的信息，可以包含静止的和经常需要更换的内容。通过对数据库中相应部分内容的调整，可以使网站的内容更加灵活，并且对这些信息进行更新和维护也更加方便、快捷。
□ 新闻系统
如果要在网站中放置新闻，其更新的频率往往比较大，而通过数据库功能可以快速地发布信息，且很容易存储以前的新闻，便于网站浏览者和管理者查阅，同时也避免了直接修改主要页面，以保持网站的稳定性，如下图所示。
□ 产品管理
产品管理是网站数据库的重要应用，如果网站中有大量的产品需要展示和销售，那么使用数据库可以方便地进行分类，把产品更有条理、更清晰地展示给客户。并且方便日后的维护、检索与储存，如下图所示。
□ 收集信息
普通的静态页面是无法收集浏览者的信息的，而管理者为了加强网站的营销效果，往往需要搜集大量潜在客户的信息，或者要求来访者成为会员，从而提供更多的服务，如下图所示。
□ 搜索功能
如果站内提供大量的信息而没有搜索功能，浏览者只能依靠清晰的导航系统，而对于一个新手往往要花些时间搜索网页，有时候甚至无法达到目的。此时，提供方便的站内搜索不仅可以使网站结构清晰，而且有利于需求信息的查找，节省浏览者的时间，如下图所示。
□ BBS论坛
BBS对于企业而言，不仅可以增加与访问者的互动，更重要的是可以加强售前、售后服务和增加新产品开发的途径。利用BBS可以收集客户反馈信息，对新产品以及企业发展的看法、投诉等，增强企业与消费者的互动，提高客户服务质量和效率，如下图所示。1.2 W3C概述
网页标准化体系简称W3C，它是由万维网联盟（World Wide Web Consortium）建立的一种规范网页设计的标准集。
基于网页标准化体系，网页的设计者可以通过简单的代码，在多种不同的浏览器平台中显示一个统一的页面。该体系的建立，大大提高了设计人员开发网页的效率，减轻了网页设计工作的复杂性，免去了人们编写兼容性代码的麻烦。1.2.1 了解W3C
网页标准化（W3C）是针对网页代码开发提出的一种具体的标准规范。自从世界上第一个网页浏览器WorldWideWeb在1990年诞生以来，网页代码的编写长期没有一个统一的规范，而是依靠一种只包含少量标签的HTML（HyperText Markup Language，超文本标记语言）作为基本的编写语言。
试读结束[说明：试读内容隐藏了图片]