作者：范伊红,黄彩霞,等
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
基于HTML5的网页设计及应用试读：
前言
作为新一代互联网标准的开发语言，HTML 5的地位举足轻重。全面学习和掌握HTML 5、CSS3、JavaScript这三个核心的客户端应用技术，从而更好的进行网页设计和客户端代码开发非常重要。
全书共分为三部分，共14章。第一部分为HTML 5网页设计基础，包括5章内容。第1章介绍了网页的来源和本质、网页的组成元素、网页的尺寸、网页的布局、网页的色彩搭配、网站策划、网页设计的标准流程等；第2章介绍了HTML 5文档结构和HTML 5常用标记；第3章介绍了表单标记及其用法；第4章介绍了CSS3的基本语法及使用方法；第5章主要介绍了盒子模型、CSS页面布局和CSS页面排版的常用方法。第二部分为JavaScript程序设计，包括4章内容。第6章介绍了JavaScript语法基础和函数的定义及特点；第7章介绍了JavaScript对象的概念、核心对象、BOM对象及自定义对象；第8章介绍了DOM的概念及获取节点和操作节点的基本方法；第9章介绍了JavaScript事件模型、event对象和HTML 5事件属性。第三部分为HTML 5应用，包括4章内容。第10章介绍了使用HTML 5 Canvas API绘制图形的方法及其应用；第11章介绍了HTML 5的音频和视频标记以及使用音视频API控制音频和视频的方法；第12章介绍了HTML 5的离线资源缓存、Web Storage本地存储、Web SQL Database本地数据库存储技术及其应用；第13章介绍了HTML 5中与通信有关的XMLHttpRequest Level 2、跨文档通信和网络套接字（WebSockets）通信技术及其编程方法；第14章介绍了HTML 5 Geolocation API基础以及使用它获得用户的地理位置的方法；第15章介绍了如何应用HTML 5的Canvas、CSS3 Web标准、Audio以及相关的JavaScript API实现简单的网页游戏开发。
本书由长期从事一线教学的教师和具有网页设计与网站开发实际项目编程经验的工程技术人员编写，获得了河南科技大学教材出版基金项目的资助和河南科技大学校级精品课程的资助。全书由霍华教授负责主审，范伊红、黄彩霞、裴亚辉担任主编。裴亚辉编写了第1章、第4章；李昌清编写了第2章、第3章、第14章；刘欣亮编写了第5章、第15章；范伊红编写了第6章、第13章；黄彩霞编写了第7章、第8章；薛冰冰编写了第9章、第11章；李连民编写了第10章、第12章。
在本书的编写过程中，参阅并引用了诸多同行的著作，在此向他们致意。
由于作者学术水平有限，书中错误和不妥之处在所难免，敬请读者批评指正。
2014年3月
第1章 网页设计理论
如今，网络已经成为人们生活中不可或缺的重要元素，网页设计技术已经成为计算机相关技术的重要组成部分。HTML（HyperText Markup Language）是一种建立网页文件的语言，其最新版本是HTML 5。在学习HTML语言之前，需要先了解网页设计领域的基本知识，从而为后面的学习打下基础。
本章主要介绍网页的来源和本质、网页的组成元素、网页的尺寸、布局、色彩搭配、网站策划、网页设计标准流程等。
1.1 网页的来源和本质
1.1.1 互联网和网页的诞生
互联网始于1969年，美军在ARPA（美国国防部研究计划署）制定的协定下，将美国西南部的大学UCLA（加利福尼亚大学洛杉矶分校）、Stanford Research Institute（史坦福大学研究学院）、UCSB（加利福尼亚大学）和University of Utah（犹他州大学）中的四台主要的计算机连接起来，形成了最初的互联网络，也称之为阿帕网。随后，其他高校也陆续接入进来。由于当时建立的计算机网络只是为了方便美国军方进行数据运算，与人们的日常生活相距甚远，所以网络技术发展非常缓慢，直到1983年，美国国防部将阿帕网分为军网和民网后，民网部分渐渐扩大为今天的互联网。
相对于网络来说，网站的出现要晚得多。1989年，欧洲粒子物理实验室研究员蒂姆·伯纳斯-李（Tim Berners-Lee），发明了一种用于网上交换文本的格式，即基于标记的语言HTML，并创建了网上软件平台World Wide Web（万维网），因此蒂姆·伯纳斯-李也被称为万维网之父。HTML语言最吸引人的地方，在于其超文本链接技术，通过超链接，可以非常方便地跳转到其他任何一个网页上。万维网实现了媒体思想家特德·纳尔逊于1965年提出的超文本设想。
1990年11月，蒂姆·伯纳斯-李建立了第一个Web服务器：“nxoc01.cern.ch”，并在自己编写的图形化Web浏览器“World Wide Web”上看到了最早的Web页面。该页面被保留至今，如果在浏览器中输入链接：“http：//www.w3.org/History/19921103-hypertext/hypertext/www/theproject.html”就能看到历史上最早的网页（如图1-1所示）。尽管用今天的眼光来看，这一网页是再简陋不过了，但正是因为这一简陋的网页，开启了今天丰富多彩的网络生活。
1991年3月，蒂姆·伯纳斯-李把这个发明介绍给了他在CERN工作的朋友。从那时起，浏览器的发展就和网络的发展联系在了一起。蒂姆·伯纳斯-李建立的第一个网站http：//info.cern.ch/（也是世界上第一个网站）于1991年8月6日正式运行，该网站解释了万维网的含义，以及如何使用网页浏览器和如何建立一个网页服务器等。蒂姆·伯纳斯-李后来在这个网站里列举了其他网站，因此它也可以看作是世界上第一个万维网目录。
随后不久，NCSA Mosaic浏览器使互联网得以迅速发展。它最初是一个只在UNIX系统下运行的图像浏览器，但是很快便移植到了Apple Macintosh和Microsoft Windows系统中。1993年9月，该浏览器正式发布了1.0版本。随后，NCSA中Mosaic项目的负责人Marc Andreesen辞职并建立了网景通信公司，该公司在1994年10月发布了Netscape浏览器，而微软公司在购入Spyglass公司的技术后，迅速推出了Internet Explorer浏览器，掀起了微软公司和网景公司之间的浏览器大战，同时也加快了万维网的发展。图1-1 最早的网页
1.1.2 网页的本质
网页（Web Page），顾名思义就是网站中的页面，静态网页文件的扩展名是.html或.htm。网页的本质就是用HTML语言来表述的文档，与传统的记事本文本或Word文本相比，网页文本最大的区别在于加入了超链接的应用，同时阅读网页还需要浏览器支持。互联网上传输和通信需要相应的协议支持，网页文本传输和通信所遵守的协议是超文本传输协议，即HTTP协议。
1.2 网页的组成元素
从结构上看，Word文本一般由页眉、页脚和中间的内容构成，文本中的每一页都显示同样的页眉和页脚。网页的结构一般也分为页眉、页脚和中间的内容，只是习惯叫做头部通用部分、底部版权和中间内容部分。网站中的每一个网页使用同样的头部通用部分和底部版权部分，变化的是中间的内容部分，这样就能达到整个网站结构上的统一，同时也方便用户访问。
如果一个网站有很多个主网站，或者每一个链接都指向到不同的网页，不同网页的头部和底部也会不一样。图1-2所示是一张网页的浏览效果图，页面中，菜单部分为头部通用部分，最下面的灰色部分为底部版权部分，中间是网页的主体内容部分。
从内容中所承载的元素上看，网页除了文字、图片、表格等元素外，还可以有视频、声音、动画等多媒体元素，同时还有网页所特有的表单和框架等。一个网页就是一个网页文档，但是网页中用到的图片、视频、声音、动画等元素并不保存在网页文档中，网页文档只保存它们的位置信息。通常把网页中用到的图片、视频、声音、动画等文件保存在同一目录下，复制网页时，需要把网页及其用到的其他文件一起复制。图1-2 网页的组成元素
1.3 网页的尺寸
1.3.1 分辨率
分辨率（Resolution）是屏幕显示的精密度，是指显示器所能显示的像素。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，则画面就越精细，同样的屏幕区域内能显示的信息也越多，所以分辨率是显示器非常重要的性能指标之一。我们可以把图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。以分辨率为1024×768的屏幕为例，即每一条水平线上包含有1024个像素点，共有768条线，即扫描列数为1024列，行数为768行。分辨率不仅与显示尺寸有关，还与显像管点距、视频带宽等因素相关。另外，只有当显示器刷新频率设置为“无闪烁刷新频率”时，显示器能达到最高分辨率，才称这个显示器的最高分辨率为多少。
分辨率通常是以像素数来计量的，是一个面积单位，例如：640×480，其像素数为307200。像素数越多，其分辨率就越高。表1-1列出了常见显示器的分辨率。表1-1 常见显示器分辨率
1.3.2 像素
像素（Pixel，简写为px），是一种用来计算图形尺寸的单位。当图片的尺寸以像素为单位时，需要指定其固定的分辨率，才能将图片尺寸与现实中的实际尺寸相转换。大多数网页在制作时，图片分辨率常为72，即每英寸像素为72个。1英寸等于2.54厘米，1厘米等于28px，比如15cm×15cm的图片，相当于420×420px。像素也是网页设计中的标准长度单位。
1.3.3 网页的基本尺寸
从表1-1列出的常见显示器分辨率中可以看到：400×240px是手机常用的分辨率，普通电脑屏幕的分辨率一般都大于或等于1024×768px，移动设备如iPad则使用800×600px的分辨率。网页的尺寸要根据不同的浏览设备设定不同的尺寸。
● 对于IPAD移动设备，网页宽度一般设置为768px，页面高度视版面和内容决定。
● 对于手机，网页宽度一般设置为480px，页面高度视版面和内容决定。
● 对于电脑，网页宽度一般设置在 1002px 以内，这样就不会出现水平滚动条，高度同样视版面和内容决定。
用电脑浏览的网页尺寸之所以要保持在1002px以内，是因为还需要减去浏览器的边界和滚动条的宽度，根据业界规定，这两个宽度相加是22px。那么在电脑中浏览的网页的宽度是否都要设置成1002呢?当然不是，网页的宽度是根据网页的类型和内容的多少来决定的。在1024×768的分辨率下，一般把宽度设置成920px、940px、960px、980px或1002px，设置成1002px时，网页正好铺满整个浏览器，如果是其他宽度，那么浏览器的左右两边将留有一定的空白区域。
网页的高度是由网页的内容决定的，考虑到良好的用户体验，页面高度在设计上一般不超过3屏，所谓“屏”是指显示器屏幕默认显示的高度。除了网页的尺寸，下面介绍一些标准网页广告尺寸规格：
● 120×120px：适用于产品或新闻照片展示。
● 120×60px：主要用于网站LOGO。
● 120×90px：主要应用于产品演示或大型LOGO。
● 125×125px：适用于表现照片效果的图像广告。
● 234×60px：适用于框架或左右形式主页的广告链接。
● 392×72px：用于有较多图片展示的广告条，位于页面头部或底部。
● 468×60px：应用最为广泛的广告条尺寸，位于页面头部或底部。
● 88×31px：主要用于网页链接或网站小型LOGO。
注：网页中的图片需要根据实际情况进行设计，根据网页设计的技术规范，尽量让图片满足19：9、4：3、3：2三种长宽比例。
1.4 网页的布局
1.4.1 网页布局的方式
网页布局的方式有两种：一种是自适应布局又叫流动性布局，另外一种是固定布局。
流动性布局，是指页面主体部分的宽度随着浏览器宽度的大小而发生改变，例如百度网站的搜索结果页面。这种布局最大的优点是能够自适应屏幕宽度显示，不管显示器发展到什么水平，这种布局永远不会过时，网页的使用寿命也会延长；缺点是不适合加载浮动层，只适合文字化界面，在加载浮动层，例如对联广告或客服界面时，会挡住一定的区域，造成不良的用户体验。流动性布局相对于网页内部模块而言，也是要求自适应的，即网页内部的各个模块无论怎么摆放，都能自适应区域。
固定布局是指页面主体部分宽度固定，不会随着浏览器的大小或是显示器的分辨率变化而变化，固定排列在网页的指定区域。固定布局的优点是布局精细，使页面显得很精致，有条理。例如，可以制作一张精巧的背景图片，在固定宽度的地方让其显示。图1-3所示的是背景颜色渐变效果，这显然要比纯色实现的效果要好一些。图1-3 背景颜色渐变效果
从技术的实现上来讲，固定布局更容易实现。但不管是自适应布局还是固定布局，在具体的网页设计中的都不是绝对的，一般都会按照页面的实际要求来选择，有时两者都会使用。
1.4.2 网页布局的技术实现
网页布局的技术实现有两种常用的方法：表格布局和DIV+CSS布局。
表格布局方式是利用了HTML语言中的table（表格）元素所具有的零边框特性。表格布局的核心是设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及空格使用透明的GIF图片实现，最终的结构是一个复杂的表格（有时候会出现多层嵌套），其页面结构如图1-4所示。显然，这样不利于页面的设计和修改，表格布局的缺点是设计复杂，改版时工作量巨大；页面内容与表现样式混合，可读性差；不利于数据调用分析；网页文件大，浏览器解析速度慢。图1-4 表格布局结构
DIV是HTML语言中的一种特殊的元素标记，表示一个区域，利用它可以将页面进行划分，再利用CSS（Cascading Style Sheet，层叠样式表）对其进行布局。DIV+CSS布局能够实现网页页面内容与表现样式分离，是一种符合Web标准的布局方式，其布局结构如图1-5所示。
基于Web标准的网站设计，其核心目的是使网页的表现、内容和行为分离。这样做的优点如下。（1）高效率的开发与简单维护图1-5 DIV+CSS布局（2）信息跨平台的可用性（3）降低服务器成本；加快网页解析速度（4）更良好的用户体验
Div+CSS的布局也可以看成是结构、表现以及行为的一种结合。
结构：用来对网页中的信息进行整理与分类，主要技术是HTML。
表现：用于对已经被结构化的信息进行显示上的修饰，包括版式颜色大小等，主要技术是CSS。
行为：是指对整个文档内部的一个模型进行定义及交互行为的编写，主要技术有：DOM（文档对象模型）、ECMAScript（JavaScript脚本语言）。
事实上网页的大部分元素标记都可以用来做页面结构的划分，如
- ，
等，然后用CSS来控制布局。
试读结束[说明：试读内容隐藏了图片]