详情
本书面向移动Web开发的零基础读者，介绍基础入门知识和实际操作技巧。全书紧贴软件开发的实际需求，首先向读者展示语言的背景知识和应用范围，之后通过实例和自测，系统讲解相关知识点，同时兼顾实际开发项目经验。为了增强实用性，光盘中还特别赠送了精选的考试认证、求职面试等题库，供读者研究学习。最后，为帮助初入职场的从业者顺利进入角色，还在光盘中赠送了职业规划建议及相关开发文档。
移动Web开发从入门到精通
人民邮电出版社
北京
图书在版编目（CIP）数据
移动Web开发从入门到精通/巅峰卓越编著.--北京：人民邮电出版社，2017.1
ISBN 978-7-115-41469-4
Ⅰ.①移… Ⅱ.①巅… Ⅲ.①移动终端—应用程序—程序设计 Ⅳ.①TN929.53
中国版本图书馆CIP数据核字（2016）第006940号
◆编著 巅峰卓越
责任编辑 张翼
责任印制 杨林杰
◆人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
大厂聚鑫印刷有限责任公司印刷
◆开本：787×1092 1/16
印张：33.25
字数：968千字 2017年1月第1版
印数：1-2500册 2017年1月河北第1次印刷
定价：79.80元（附光盘）
读者服务热线：(010)81055410 印装质量热线：(010)81055316
反盗版热线：(010)81055315
广告经营许可证：京东工商广字第8052号
本书以零基础讲解为宗旨，用实例引导读者学习，深入浅出地介绍了移动Web开发的相关知识和实战技能。
本书第1篇【基础知识】主要讲解网页和网站制作基础、搭建移动Web开发环境、打造移动Web应用程序等；第2篇【核心技术】主要讲解与移动Web开发相关的核心技术和工具，包括HTML、HTML5、CSS、JavaScript、jQuery Mobile、PhoneGap等，还通过实例介绍了移动设备网页的开发方法；第3篇【知识进阶】主要讲解WebSockets实时数据处理、Web Workers通信处理、页面数据离线处理、绘制三维图形图像、使用Geolocation API等；第4篇【典型应用】主要介绍了jQTouch框架和Sencha Touch框架；第5篇【综合实战】通过实战案例，介绍了完整的移动Web程序开发流程。
本书所附DVD光盘中包含了与图书内容同步的教学录像。此外，还赠送了大量相关学习资料，以便读者扩展学习。
本书适合任何想学习移动Web开发的读者，无论读者是否从事计算机相关行业，是否接触过移动Web开发，均可通过学习快速掌握移动Web开发的方法和技巧。
国家863软件专业孵化器建设是“十五”初期由国家科技部推动、地方政府实施的一项重要的产业环境建设工作，在国家高技术发展研究计划（863计划）和地方政府支持下建立了服务软件产业发展的公共技术支撑平台体系，围绕“推广应用863技术成果，孵化人、项目和企业”为主题以“孵小扶强’为目标，在全国不同区域开展了形式多样的软件孵化工作，取得了较大的影响力和服务成效。特别是在软件人才培养方面，国家863软件孵化器各基地都做了许多有益探索。其中设在郑州的国家863中部软件孵化器连续举办了四届青年软件设计大赛，引起了当地社会各界的广泛关注；开展校企合作，以软件工程技术推广、软件国际化为背景，培养了一大批实用软件人才。
目前，我国大专院校每年都招收数以万计的计算机或者软件专业学生，这其中除了一部
分毕业生继续深造攻读研究生学位之外，大多数都要直接走上工作岗位。许多学生在毕业后
求职时，都面临着缺乏实际软件开发技能和经验的问题，解决这一问题，需要大专院校与企业界的密切合作，学校教学在注重基础的同时，应适当加强产业界当前主流技术的传授；产业界也可将人才培养、人才发现工作前置到学校教学活动中。国家863软件专业孵化器与大学、企业都有广泛合作，在开展校企合作、培养软件人才方面具有得天独厚的条件。当然，
做好这项工作还有许多问题需要研究和探索，比如校企合作万式、培养模式、课程设计与教
材体系等。
欣闻由国家863中邵软件孵化器组织编写的“从入门到精通”丛书即将面市，内容除涵
盖目前主流技术知识和开发工具之外，更融汇了其多年从事大学生软件职业技术教育的经验，
可喜可贺。作为计算机软件研究和教学工作者，我衷心希望这套丛书的出版能够为广大年轻
学子提供切实有效的帮助，能够为我国软件人才培养做出新的贡献。
北京大学信息科学技术学院院长 梅宏
2010年3月12日
本书是专门为初学者量身打造的一本编程学习用书，由知名计算机图书策划机构“巅峰卓越”精心策划而成。
本书主要面向移动Web开发的初学者和爱好者，旨在帮助读者掌握移动Web开发的基础知识，了解开发技巧并积累一定的项目实战经验。
为什么要写这样一本书
荀子曰:不闻不若闻之,闻之不若见之,见之不若知之,知之不若行之。
实践对于学习的重要性由此可见一斑。纵观当前编程图书市场，理论知识与实践经验的脱节，是很多移动Web开发图书的写照。为了杜绝这一现象，本书立足于实践，从项目开发的实际需求入手，将理论知识与实际应用相结合。目标就是让初学者能够快速成长为初级程序员，并获得一定的项目开发经验，从而在职场中拥有一个高起点。
移动Web开发的最佳学习路线
本书总结了作者多年的教学实践经验，为读者设计了最佳的学习路线。
本书特色
零基础、入门级的讲解
无论读者是否从事计算机相关行业，是否接触过移动Web开发，是否开发过移动Web项目，都能从本书中找到最佳起点。
超多、实用、专业的范例和项目
本书彻底摒弃枯燥的理论和简单的说教，注重实用性和可操作性，结合实际工作中的范例，逐一讲解移动Web开发所需的各种知识和技术。最后，还以实际开发项目来总结本书所学内容，帮助读者在实战中掌握知识，轻松拥有项目经验。
随时检测自己的学习成果
每章首页罗列了“本章要点”，以便读者明确学习方向。每章最后的“实战练习”则根据所在章的知识点精心设计而成，读者可以随时自我检测，巩固所学知识。
细致入微、贴心提示
本书在讲解过程中使用了“提示”“注意”“技巧”等小栏目，帮助读者在学习过程中更清楚地理解基本概念，掌握相关操作，并轻松获取实战技能。
超值光盘
11小时全程同步教学录像
涵盖本书所有知识点，详细讲解每个范例及项目的开发过程及关键点，帮助读者更轻松地掌握书中所有的移动Web开发知识。
超多王牌资源大放送
赠 送 大 量 超 值 资 源，包 括7小 时HTML5 + CSS + JavaScript实 战 教 学 录 像、157个HTML+CSS+JavaScript前端开发实例、571个典型实战模块、184个Android开发常见问题/实用技巧及注意事项、Android Studio实战电子书、CSS3从入门到精通电子书及案例代码、HTML5从入门到精通电子书及案例代码，以及配套的教学用PPT课件等。
读者对象
没有任何移动开发基础的初学者和编程爱好者
有一定的移动Web开发基础，想精通移动Web开发的人员
有一定的移动Web开发基础，缺乏移动Web开发项目经验的从业者
大专院校及培训学校相关专业的老师和学生
光盘使用说明
01.光盘运行后会首先播放带有背景音乐的光盘主界面，其中包括【配套源码】、【配套视频】、【配套PPT】、【赠送资源】和【退出光盘】5个功能按钮。
02.单击【配套源码】按钮，可以进入本书源码文件夹，里面包含了“配套源码”和“课后练习”两个子文件夹，如下左图所示。
03.单击【配套视频】按钮，可在打开的文件夹中看到本书的配套视频教学录像子文件夹，如下右图所示。
04.单击【配套PPT】按钮，可以查看本书的配套教学用PPT课件，如下左图所示。
05.单击【赠送资源】按钮，可以查看本书赠送的超值学习资源，如下右图所示。
06.单击【退出光盘】按钮，即可退出本光盘系统。
本书由巅峰卓越编著，参加资料整理的人员有周秀、付松柏、邓才兵、钟世礼、谭贞军、张加春、王教明、万春潮、郭慧玲、侯恩静、程娟、王文忠、陈强、何子夜、李天祥、周锐、朱桂英、张元亮、张韶青、秦丹枫等。
由于编者水平有限，纰漏和不尽如人意之处在所难免，诚请读者提出意见或建议，以便修订并使之更臻完善。若读者在学习过程中遇到困难或疑问，或有任何建议，可发送电子邮件至 zhangyi@ptpress. com.cn。
编者
2016年10月
本章教学录像： 23分钟
移动Web程序是指能够在智能手机、平板电脑、电子书阅读器等可移动设备中完整运行的Web程序。和传统桌面式Web程序相比，移动Web要求程序更加简单并且高效，而且具备传统桌面Web程序所没有的硬件优势，例如GPS定位、传感器应用等。本章简要介绍开发移动Web应用程序的基础知识，为读者步入本书后面知识的学习打下基础。
本章要点（已掌握的在方框中打钩）
□ Web标准开发技术
□ 移动Web 开发概览
□ 移动Web 开发必备技术
□ 移动Web 开发学习路线图
本节教学录像：5分钟
自从互联网推出以来，因其强大的功能和娱乐性而深受广大浏览用户的青睐。随着硬件技术的发展和进步，各网络站点也纷纷采用不同的软件技术来实现不同的功能。这样，在互联网这个宽阔的舞台上，站点页面技术将变得更加成熟并稳定，将会推出更加绚丽的效果展现在广大用户面前。为了保证Web程序能够在不同设备中的不同浏览器中运行，国际标准化组织制定出了Web标准。顾名思义， Web标准是所有站点在建设时必须遵循的一系列硬性规范。因为从页面构成来看，网页主要由结构（Structure）、表现（Presentation）和行为（Behavior）这三部分构成，所以对应的Web标准由这3个方面构成：
当前使用的结构化标准语言是HTML和XHTML，下面将对这两种语言进行简要介绍。
HTML
HTML是HyperText Markup Language（超文本标记语言）的缩写，是构成Web页面的主要元素，是用来表示网上信息的符号标记语言。通过HTML，可以将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML翻译成可以识别的信息，这就是所见到的网页。HTML语言是网页制作的基础，是网页设计初学者必须掌握的内容。
XHTML
XHTML是Extensible HyperText Markup Language的缩写，是根据XML标准建立起来的标识语言，是由HTML向XML的过渡性语言。
目前的表现性语言是我们本书讲的CSS。CSS 是Cascading Style Sheets（层叠样式表）的缩写，当前最新的CSS规范是W3C于2001年5月23日推出的CSS3。通过CSS技术可以对网页进行布局，控制网页的表现形式。CSS可以与XHTML语言相结合，实现页面表现和结构的完整分离，提高站点的使用性和维护效率。
当前的行为标准是DOM和ECMAScript。DOM是Document Object Mode （l 文档对象模型）的缩写，根据W3C DOM规范，DOM是一种与浏览器、平台和语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscape的JavaScript和Microsoft的JScript之间的冲突，给予Web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对象。从本质上讲， DOM是一种文档对象模型，是建立在网页和Script及程序语言之间的桥梁。
ECMAScript是ECMA（European Computer Manufacturers Association）制定的标准脚本语言（JavaScript）。
上述Web标准间的相互关系如图0-1所示。
上述标准大部分由W3C组织起草和发布，也有一些是其他标准组织制定的标准，如ECMA的ECMAScript标准。
Web标准并不是某一技术的规范，而是构成页面三大要素的规范的集合体。
注意
本节教学录像：12分钟
说起移动Web，就不得不说传统桌面Web。传统桌面Web是指在台式机和笔记本电脑中运行的Web程序，随着互联网技术的兴起和发展，我们所说的Web通常就是指桌面Web。而随着近年来智能手机和平板电脑等可移动设备的发展和兴起，人们纷纷在可移动设备中浏览网页，这就推动了移动Web技术的发展。
在当今市面中有很多智能手机系统，形成了百家争鸣的局面。但是最受大家的欢迎的当属Android、iOS、Windows Phone、Blackberry OS等。在接下来的内容中，将对主流移动平台进行简要介绍。
1.Android
Android一词最早出现于法国作家利尔·亚当在1886年发表的科幻小说《未来的夏娃》中，书中将外表像人的机器起名为Android。Android机型数量庞大，简单易用，相当自由的系统能让厂商和客户轻松地定制各样的ROM、各种桌面部件和主题风格。简单而华丽的界面得到广大客户的认可，对手机进行刷机也是不少Android用户所津津乐道的事情。
目前Android版本数量较多，市面上同时存在着1.6、2.0、2.1、2.2、2.3等各种版本的Android系统手机，应用软件对各版本系统的兼容性对程序开发人员是一种不小的挑战。同时由于开发门槛低，导致应用数量虽然很多，但是应用质量参差不齐，甚至出现不少恶意软件，让一些用户受到损失。同时Android没有对各厂商在硬件上进行限制，导致一些用户在低端机型上体验不佳。另一方面，因为Android的应用主要使用Java语言开发，其运行效率和硬件消耗一直是其他手机用户所诟病的地方。
2.iOS
iOS作为苹果移动设备iPhone和iPad的操作系统，在App Store的推动之下，成为了世界上引领潮流的操作系统之一。原本这个系统名为“iPhone OS”，直到2010年6月7日WWDC大会上宣布改名为“iOS”。iOS的用户界面的概念基础是能够使用多点触控直接操作。控制方法包括滑动、轻触开关及按键。与系统交互包括滑动（Swiping）、轻按（Tapping）、挤压（Pinching,通常用于缩小）及反向挤压（Reverse Pinching or unpinching，通常用于放大）。此外通过其自带的加速器，可以令其旋转设备改变其y轴以令屏幕改变方向，这样的设计令iPhone更便于使用。
优秀的系统设计以及严格的App Store审核标准，iOS作为应用数量最多的移动设备操作系统，加上强大的硬件支持以及内置的Siri语音助手，无疑使得用户体验得到更大的提升，感受科技带来的好处。
3.Windows Phone
早在2004年时，微软就开始以“Photon”的计划代号开始研发Windows Mobile的一个重要版本更新，但进度缓慢，最后整个计划都被取消了。直到2008年，在iOS和Android的冲击之下，微软才重新组织了Windows Mobile的小组，并继续开发一个新的行动操作系统。Windows Phone作为Windows Mobile的继承者，把网络、个人电脑和手机的优势集于一身，让人们可以随时随地享受到想要的体验。内置的Office办公套件和Outlook使得办公更加有效和方便。
4.Blackberry OS（黑莓）
Blackberry系统，即黑莓系统，是加拿大Research In Motion（RIM）公司推出的一种无线手持邮件解决终端设备的操作系统，由RIM自主开发。它和其他手机终端使用的Symbian、Windows Mobile、iOS等操作系统有所不同，Blackberry系统的加密性能更强、更安全。安装有Blackberry系统的黑莓机，指的不单单是一台手机，而是由RIM公司所推出，包含服务器（邮件设定）、软件（操作接口）以及终端（手机）大类别的Push Mail实时电子邮件服务。
黑莓系统的稳定性非常出色，其独特定位也深得商务人士的青睐。可是也因此在大众市场上得不到优势，国内用户和应用资源也较少。
其实移动Web和传统的Web并没有本质的区别，都需要Web标准制定的开发规范，都需要利用静态网页技术、脚本框架、样式修饰技术和程序联合打造出的应用程序。无论是开发传统桌面Web程序，还是移动Web应用程序，都需要利用HTML、CSS、JavaScript技术和动态Web开发技术（例如PHP、JSP、ASP.NET等）。
移动Web是在传统的桌面Web的基础上，根据手持移动终端资源有限的特点，经过有针对性的优化，解决了移动终端资源少和Web浏览器性能差的问题。和传统Web相比，移动Web的主要特点如下。
1.随时随地
因为智能手机和平板电脑等设备都是可移动设备，所以用户可以利用这些设备随时随地浏览或运行移动Web程序。
2.位置感应
因为智能手机和平板电脑等可移动设备具备GPS定位功能，所以可以在这些设备中开发出具有定位功能的Web程序。
3.传感器
因为智能手机和平板电脑等可移动设备中内置了很多传感器，例如温度传感器、加速度传感器、湿度传感器、气压传感器和方向传感器等，所以可以开发出气压计、湿度仪器等Web程序。
4.量身定制的屏幕分辨率
因为市面中的智能手机和平板电脑等可移动设备的产品种类繁多，屏幕的大小和分辨率也不尽相同，所以在开发移动Web程序时，需要考虑不同屏幕分辨率的兼容性问题。
5.高质的照相和录音设备
因为智能手机和平板电脑等可移动设备具有摄像头和麦克风等硬件设备，所以可以开发出和硬件相结合的Web程序。
对于网页设计师们来说，不要为移动网站设计所迷茫，尽管移动设备的种类与日俱增，包括手机、平板电脑、网络电视设备，甚至一些图像播放设备。在为这些不同设备创建移动网站时，首先需要确保设计的网站能够适用于所有浏览器及操作系统，也就是说可以在尽量多的浏览器及操作系统中运行。除此之外，在为移动设备创建网站时，还需要考虑如下所示的问题。
移动设备的屏幕尺寸和分辨率。
移动用户需要的内容。
使用的HTML、CSS及JavaScript是否有效且简洁。
网站是否需要为移动用户使用独立域名。
网站需要通过怎样的测试。
在当前的市面中，智能手机的屏幕尺寸主要包括如下所示的几种标准。
128×160像素
176×220像素
240×320像素
320×480像素
400×800像素
480×800像素
800×960像素
1920×1080像素
就手机的尺寸而言，Android给出了市场占有率的具体统计，详情请参阅http://developer.android. com/resources/dashboard/screens.html，如图0-2所示。
由此可见，在目前市面中主要是以分辨率为480×800和720×1280的手机用户居多。另外，作为另一种主流移动设备的平板电脑来说，它不仅拥有更大的屏幕尺寸，而且在浏览方式上也有所不同。例如，大部分平板电脑（以及一些智能手机）都能够以横向或纵向模式进行浏览。这样即使在同一款设备中，屏幕的宽度有时为1024像素，有时则为800像素或更少。但是一般来说，平板电脑为用户提供了更大的屏幕空间，我们可以认为在大部分平板电脑设备的屏幕尺寸为最主流的（1024～1280）× （600～800）像素。事实证明，在平板电脑中可以很轻松地以标准格式浏览大部分网站，这是因为其浏览器使用起来就像在计算机显示器上使用一样简单，并且通过Android系统中的缩放功能可以放大难以阅读的微小区域。
在开发移动网站时，只有使用正确的、标准格式的HTML、CSS和JavaScript技术，才能让页面在大部分移动设备中适用。另外，设计师可以通过HTML的有效验证来确认它是否正确，具体验证方法是登录http://validator.w3.org/，使用W3C验证器检查HTML、XHTML以及其他标记语言，除此之外，它还可以验证CSS、RSS，甚至是页面上的无效链接。
在为移动设备编写网页时，需要注意如下所示的5个“慎用”。
（1）慎用HTML表格。由于移动设备的屏幕尺寸很小，使用水平滚动相对困难，从而导致表格难以阅读，请尽量避免在移动布局中使用表格。
（2）慎用HTML表格布局。在Web页面布局中，建议不使用HTML表格，而且在移动设备中，这些表格会让页面加载速度变慢，并且影响美观，尤其是在它与浏览器窗口不匹配时。另外，在页面布局中通常使用的是嵌套表格，这类表格会让页面加载速度更慢，并且让渲染过程变得更困难。
（3）慎用弹出窗口。通常来讲，弹出窗口很讨厌，而在移动设备上，它们甚至能让网站变得不可用。有些移动浏览器并不支持弹出窗口，还有一些浏览器则总是以意料之外的方式打开它们（通常会关闭原窗口，然后打开新窗口）。
（4）慎用图片布局。与在页面布局中使用表格类似，加入隐藏图像以增加空间及影响布局的方法经常会让一些老的移动设备死机或无法正确显示页面。另外，它们还会增加下载时间。
（5）慎用框架及图像地图（image maps）。在目前的许多移动设备中，都无法支持框架及图像地图特性。其实从适用性上来看，HTML5的规范中已经摈弃了框架（iframe除外）。
因为移动用户通常需要为浏览网站而耗费流量并需要付费的，所以在设计移动页面时应尽可能地确保少使用HTML标签、CSS属性和服务器请求。
本节教学录像：4分钟
除了前面介绍的HTML、XHTML、CSS、JavaScript、DOM和ECMAScript技术之外，开发移动Web还需要掌握如下技术。
（1）HTML5
HTML5是当今HTML语言的最新版本，将会取代1999年制定的HTML 4.01、XHTML 1.0标准，以期望能在互联网应用迅速发展的时候，使网络标准符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。
（2）jQuery Mobile
jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。
（3）PhoneGap
PhoneGap是一个用基于HTML、CSS和JavaScript的，创建跨平台移动应用程序的快速开发平台。PhoneGap使开发者能够利用iPhone、Android、Palm、Symbian、WP7、WP8、Bada和Blackberry智能手机的核心功能，包括地理定位、加速器，联系人、声音和振动等，此外PhoneGap拥有丰富的插件供开发者调用。
（4）Node.js
Node.js 是一个基于Chrome JavaScript运行时建立的一个平台，用来方便地搭建快速的易于扩展的网络应用。Node.js 借助事件驱动， 非阻塞I/O 模型变得轻量和高效， 非常适合运行在分布式设备的数据密集型的实时应用中。
（5）JQTouch
JQTouch 是一个 jQuery 插件，主要为手机Webkit浏览器实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的 JavaScript 库。支持iPhone、Android 等手机，是提供一系列功能为手机浏览器WebKit服务的jQuery插件。
（6）Sencha Touch
Sencha Touch和JQTouch密切相关，是基于JavaScript编写的Ajax框架ExtJS，将现有的ExtJS整合JQTouch、Raphaël库，推出适用于最前沿Touch Web的Sencha Touch框架，该框架是世界上第一个基于HTML5的Mobile App框架。同时，ExtJS更名为Sencha，JQTouch的创始人David Kaneda，以及Raphaël的创始人也已加盟Sencha团队。
当然，除了上述主流移动Web开发技术之外，还有其他营利性商业组织推出的第三方框架，这些框架都方便了开发者的开发工作。读者可以参阅相关资料，了解并学习这些框架的知识。
本节教学录像：2分钟
学习移动Web开发是一个漫长的过程，需要读者总体规划合理的学习路线，这样才能够达到事半功倍的效果。学习移动Web开发的基本路线图如图0-3所示。
1.第一阶段——打好基础
这一阶段主要做好基础方面的工作，HTML、CSS和JavaScript是网页设计的最基础技术，无论是学习传统桌面Web开发还是移动Web开发，都必须掌握这3项技术。而Dreamweaver是非常流行的网页设计和开发工具，使用它可以达到事半功倍的效果。
这几种技术是相互贯通的，并且可以同时学习并使用。这一阶段比较耗时，要达到基本掌握需要耗时3个月左右的时间。
2.第二阶段——学习最前沿技术
HTML5是当今HTML技术的最新版本，和以前的版本相比，HTML5的功能更加强大，并且支持移动Web应用。因为HTML5和第一阶段中的HTML技术有很多共同之处，所以这一阶段的学习比较容易，需要一个月左右的时间即可掌握。
3.第三阶段——学习开源框架
本阶段的主要任务是学习第三方开源框架，例如jQuery Mobile、PhoneGap、JQTouch和Sencha Touch等框架。这部分的内容多而复杂，但是因为在第一阶段和第二阶段已经打下了基础，所以本阶段的学习会比较轻松，图中的３个框架需要一个月左右的时间即可掌握。
本书后面的内容就是按照上述学习路线图进行内容安排的。
第1章 网页和网站制作基础
第2章 搭建移动Web开发环境
第3章 打造移动Web应用程序
本章教学录像：24 分钟
Web站点是专业人员对各种站点的统称，普通浏览用户通常将这些站点称为网站。互联网中存在形形色色的站点，为浏览用户提供了海量的信息。一个独立的站点是由一个或多个网页构成的，网页和网站是构成Web站点的最核心元素。本章对网页和网站的基础知识进行概述，为读者步入本书后面知识的学习打下基础。
本章要点（已掌握的在方框中打钩）
□ 认识网页和网站
□ 网页的基本构成元素
□ 制作网页的基本流程
□ 制作网站的基本流程
本节教学录像：4分钟
本节将简要介绍网页和网站方面的内容，为读者学习本书后面知识打下基础。
网页是指我们在互联网上看到的丰富多彩的站点页面。从具体定义上讲，网页是Web站点中使用HTML等语言编写而成的单位文档，它是Web中的信息载体。网页是由多个元素构成的，图1-1所示的就是ESPN的主页。
网站是由网页构成的，一个网站可能由一个页面构成，也可能由多个页面构成，并且这些构成的页面相互间存在着某种联系。一个典型网站的具体结构如图1-2所示。
上述网站的基本结构在服务器中的具体存在方式如图1-3所示。
本节教学录像：6分钟
由本章1.1节的内容了解到，网页是构成站点的基本元素，是一个网络站点的基础。本节将对网页的各基本构成元素进行简要介绍。
下面将通过分析ESPN的主页来介绍网页基本的构成元素，具体说明如图1-4所示。
1.文本
文本是网页中最重要的信息，在网页中可以通过字体、大小、颜色、底纹、边框等来设置文本的属性。在网页概念中的文本是指文字，而并非图片中的文字。在网页制作中，文本都可以方便地设置成各种字体、大小和颜色。
2.图像
图像是页面中最为重要的构成部分。在网页中只有加入图像后才会使页面达到完美的显示效果，可见图像在网页中的重要性。在网页设计中用到的图片一般为JPG和GIF格式。
注意
虽然图像在网页中不可或缺，但也不能太多和太大。如果网页上插入了过多和过大的图像，则可能会很长时间打不开，并且如果布局不合理，还会造成页面的混乱。
3.超链接
超链接是指从一个网页指向另一个目的端的链接，是从文本、图片、图形或图像映射到全球广域网上的网页或文件的指针。在全球广域网上，超链接是网页之间和Web站点之间主要的导航方法。
超链接是网站的灵魂，能够指向另一个网页或相同网页上的不同位置，这个目的端通常是另一个网页，但也可以是一幅图片、一个电子邮件地址、一个文件甚至一个程序。超链接广泛地存在于网页的图片和文字中，提供与图片和文字相关内容的链接，在超链接上单击鼠标左键，即可链接到相应地址（URL）的网页。有链接的地方，鼠标经过时会变成小手形状。
4.表格
表格是传统网页排版的灵魂，即使CSS标准推出后，它也能够继续发挥不可限量的作用。通过表格可以精确地控制各网页元素在网页中的位置。表格是页面语言中的一种元素，主要用于网页内容的排列，组织整个网页的外观，通过在表格中放置相应的图片或其他内容，即可有效地组合成符合设计效果的页面。有了表格的存在，网页中的元素得以方便地固定在设计的位置上。
5.表单
表单是用来收集站点访问者信息的域集，是网页中站点服务器处理的一组数据输入域。当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。表单是在网页与服务器之间传递信息的重要途径，表单网页可以用来获取浏览者的意见和建议，以实现浏览者与站点之间的互动。站点访问者可以通过表单的方式输入文本信息，单击单选按钮与复选框，以及从下拉菜单中选择选项进行具体的信息输入。在填写好表单之后，可以将填写的数据发送出去。所以说，表单是动态交互页面的基础。
6.Flash动画
Flash一经推出后便迅速成为最首要的Web动画形式之一。Flash利用其自身所具有的关键帧补间、运动路径、动画蒙版、形状变形和洋葱皮等动画特性，不仅可以建立Flash电影，而且可以把动画输出为不同文件格式的播放文件。
7.框架
框架是网页中的一种重要组织形式之一，它能够将相互关联的多个网页的内容组织在一个浏览器窗口中显示。框架是一个由框架网页所定义的浏览器视窗区域，它通过框架网页实现。框架网页是一种特别的HTML网页，它可将浏览器视窗分为不同的框架，而每一个框架可显示一个不同的网页。例如，我们可以在一个框架内放置导航栏，另一个框架中的内容可以随着单击导航栏中的链接而改变，这样我们只要制作一个导航栏的网页即可，而不必将导航栏的内容复制到各栏目的网页中去。例如，现实中常用的网站后台管理系统大多都采用框架方式设计。
本节教学录像：4分钟
典型网页的基本制作流程如下。
第1步：选题。
选题要明确，确定此页面的真正目的和展示给浏览者的内容。例如，如果是主页就要考虑页面导航和广告位的位置。
第2步：准备素材资料。
根据页面的选择的主题准备好你的素材，例如介绍的内容和需要展示的图片。
第3步：规划布局。
根据前两步确定的选题和准备的资料进行页面规划，确定页面的总体布局。上述工作可以通过画草图的方法实现，也可以直接在编辑器工具里直接规划，例如Dreammweaver。
第4步：插入素材资料。
将处理过的素材和资料插入到布局后页面的指定位置。
第5步：添加链接。
根据整体站点的需求在页面上添加超链接，实现站点页面的跨度访问。
第6步：美化。
将上面完成的页面进行整体美化处理。例如，利用CSS将表格线细化，设置文字和颜色，对图片进行滤镜和搭配处理等操作。
上述步骤的具体运行流程如图1-5所示。
注意
特殊页面可以脱离上述流程进行单独设计。例如动态站点中的数据库连接文件，就不必按照上述步骤进行，只需编写出连接代码即可。另外，在总体布局过程中不但要注重页面元素的协调性，还要注意颜色的搭配尺度，不要一味追求花俏。因为网页的目的是向用户展示主题信息，也就是以最容易得到信息为主要的目标。怎样让用户方便、快捷地得到信息是设计者的目标，所以重点的栏目要在首页显眼位置显示出来，让人一进网站就能看到。
本节教学录像：10分钟
在前面的内容中，向读者详细介绍了网页的基本制作流程，并对制作过程中的注意事项和技巧做了简要说明。在本节的内容中，将对网站的发展趋势进行简要介绍，并对其基本制作流程向读者进行详细阐述。
在当前网站发展应用中，网站的整体发展趋势如下所示。
纵深化
制约网络发展的瓶颈随着各种新技术的涌现和硬件的升级，使网站的发展深度得到了扩展。
个性化
互联网的出现和发展对传统秩序造成了巨大冲击，为人们个性张扬和创造力的发挥提供了一个广阔的平台。
专业化
专业化趋势主要表现为两个方面。①面向个人消费者的专业化趋势。为满足消费者个性化的需求，提供专业化的服务至关重要，这也为网站设计者提出了更高的要求。②面向个人企业客户的专业化趋势。随着B2B电子商务模式的蓬勃发展，以大的行业为依托的网站平台前景十分看好。
国际化
由于互联网本身的特点决定了网站的跨地域特性，同时也将面临更多的发展机遇和更加强有力的挑战。
了解了网站的发展趋势后，设计者在设计过程中应充分考虑发展趋势造成的影响。另外，由前面的内容中了解到，网站是由网页构成的。所以，网页设计始终贯穿于网站设计流程。为此，网站设计实质上是网页设计升级的制作规划，它实现了对整个站点各方面的一系列操作。
完整网站的制作流程分为站点设计流程和站点发布流程。其中站点设计流程的操作步骤如下所示。
第1步：初始商讨。
确定站点的整体定位和主题，明确建立此网站的真正目的，并确定网站的发布时机。
第2步：需求分析。
充分考虑确定用户的需求和站点拥有者的需求，确定当前的业务流程。重点分析浏览用户的思维方式，并对竞争对手的信息进行分析。
第3步：综合内容。
确定各个页面所要展示的信息，进行页面划分。
第4步：页面布局，设计页面。
根据页面内容进行对应的页面设计，在规划的页面上使内容合理地展现出来。
第5步：测试。
对每个设计的分页进行浏览测试，最后要对整个网站的页面进行测试。
站点发布流程的操作步骤如下所示。
第1步：域名申请。
选择合理、有效的域名。
第2步：选择主机。
根据站点的状况确定主机的方式和配置。
第3步：选择硬件。
如果需要自己的站点体现出更为强大的功能，可以配置自己特定的设备产品。
第4步：软件选择。
选择与自己购买的硬件相配套的软件，例如服务器的操作系统和安全软件等。
第5步：网站推广。
充分利用搜索引擎和发布广告的方式对网站进行宣传。
上述步骤的具体运行流程如图1-6所示。
注意
在上面发布流程的操作步骤中，第1～4步操作可以在站点设计流程步骤前进行，也可以同时进行，此处要视自己的具体状况而定。
在设计网站时，需要充分遵循以下基本原则。
网页内容要便于阅读。
站点内容要精、专和及时更新。
注重整体的色彩搭配。
考虑带宽因素。
适当考虑不同浏览器、不同分辨率的情况。
另外还需要遵循网站设计的通用原则，其具体内容如下所示。
网站的设计目的决定设计方案。
浏览者的需求第一位。
页面的有效性。
保持页面布局的统一性。
使用表格和适当的结构来设计网页。
谨慎使用图片。
平面设计意识。
减少Java Applet和其他多媒体的使用。
1.网页设计师要抓住设计的灵魂
优秀的网页设计必然服务于网站的主题，什么样的网站应该有什么样的设计。而网页的视听元素尤为重要，它主要包括文本、背景、按钮、图标、图像、表格、颜色、导航工具、背景、动态影像等。无论是文字、图形、动画，还是音频、视频，网页设计者所要考虑的是如何以感人的形式把它们放进页面这个“大画布”里。网页艺术设计与网站主题的关系应该是这样的：首先，设计是为主题服务的；其次，设计是艺术和技术结合的产物，既要“美”，又要实现“功能”；最后，“美”和“功能”都是为了更好地表达主题。当然，在有些情况下，“功能”即“主题”，还有些情况下，“美”即“主题”。
任何设计都有一定的内容和形式。内容是构成设计的一切内在要素的总和，是设计存在的基础，被称为“设计的灵魂”；形式是构成内容诸要素的内部结构或内容的外部表现方式。设计的内容就是指它的主题、形象、题材等要素的总和，形式就是它的结构、风格或设计语言等表现方式。
希望大家多欣赏一些国内外经典网站，这样才能透视整个网页设计的内涵和衍生概念。
2.明确建立网站的目标和用户需求
Web站点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径，因此我们必须明确设计站点的目的和用户需求，从而做出切实可行的设计计划。我们会根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，以“消费者”为中心，而不是以“美术”为中心进行设计规划。
在设计规划时我们需要考虑下面的因素。
建设网站的目的是什么？
为谁提供服务和产品？
企业能提供什么样的产品和服务？
网站的目标消费者和受众的特点是什么？
企业产品和服务适合什么样的表现方式（风格）？
1.网站界面的设计原则是什么？
2.如何推广一个网站？
本章教学录像：21 分钟
“工欲善其事，必先利其器”出自《论语》，意思是要想高效地完成一件事，需要有合适的工具。对于移动Web开发人员来说，开发工具同样至关重要。作为一项新兴技术，在进行开发前首先要搭建一个对应的开发环境。本章详细讲解搭建移动Web开发环境的基础知识，为读者步入本书后面知识的学习打下基础。
本章要点（已掌握的在方框中打钩）
□ 安装Dreamweaver CS6
□ 安装jQuery Mobile
□ 搭建PhoneGap 开发环境
□ 搭建测试环境
本节教学录像：3分钟
在当今市面中，Dreamweaver 是最常用的网页设计工具之一。Adobe Dreamweaver CS6版本是当前最常用的一个版本，对移动Web开发提供了良好的支持。在本节的内容中，将以安装Dreamweaver CS6的过程为例，向读者介绍安装Dreamweaver的方法。Dreamweaver CS6的安装步骤如下所示。
（1）下载完安装文件后双击打开安装图标
，弹出解压缩界面，在此选择一个保存解压缩安装文件的路径，如图2-1所示。
（2）单击“下一步”按钮后弹出“准备文件进度框”界面，如图2-2所示。
（3）进度完成后弹出“欢迎”界面，在此选择“安装”选项，如图2-3所示。
（4）弹出“Adobe软件许可协议”界面，在此单击“接受”按钮，如图2-4所示。
（5）弹出“序列号”界面，在此输入合法的序列号，并单击“下一步”按钮，如图2-5所示。
（6）在弹出的“选项”界面中选择安装目录，然后单击“安装”按钮，如图2-6所示。
（7）在弹出的“安装”界面中显示安装进度条，如图2-7所示。
（8）进度条完成弹出“安装完成”界面，如图2-8所示。
（9）当第一次打开Dreamweaver CS6的时候，会弹出“默认编辑器”对话框，在此可以选择我们常用的文件类型，如图2-9所示。
（10）单击图2-9中的“确定”按钮后来到“启动”界面，如图2-10所示。
（11）启动Dreamweaver CS6后的界面效果如图2-11所示，在此可以选择新建页面的类型。
在安装Dreamweaver CS6之前，一定要确保在本地机器上没有安装过Dreamweaver。如果已经安装过其他版本，请确保卸载干净，否则安装Dreamweaver CS6会失败。
注意
本节教学录像：11分钟
在移动Web开发应用中，jQuery Mobile框架的作用十分重要，能够实现JavaScript特效效果。在本节的内容中，将详细讲解安装jQuery Mobile的基本知识。
要想正确运行jQuery Mobile移动应用页面，需要至少包含如下所示的两个文件。
jQuery.Mobile-1.4.5.min.js：jQuery Mobile框架插件，目前的最新版本为1.4.5。
jQuery.Mobile-1.4.5.min.css：与jQuery Mobile框架相配套的CSS样式文件，目前的最新版本为1.4.5。
下载jQuery.Mobile插件的基本流程如下所示。
（1）登录jQuery Mobile官方网站（http://jquerymobile.com），如图2-12所示。
（2）单击右侧导航条中的“Custom download”链接进入文件下载页面，如图2-13所示。
（3）单击“Select branch”中的下拉框，可以选择一个版本，此时最新版本是1.4.5。勾选图2-13右下角的“Select all”复选框开始下载，建议读者使用第三方下载工具进行下载，例如使用迅雷工具进行下载，其界面如图2-14所示。
（4）下载后成功后会获得一个名为“jquery.mobile-1.4.5.zip”的压缩包，解压后会获得CSS、JS和图片格式的文件，如图2-15所示。
除了可以在官方下载页下载对应的jQuery Mobile文件外，还可以使用URL方式从jQuery CDN下载插件文件。CDN的全称是Content Delivery Network，用于快速下载跨 Internet 常用的文件，只要在页面的<head>元素中加入下列代码，同样可以执行jQuery Mobile 移动应用页面。加入的代码如下所示：
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css” />
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
通过URL加载jQuery Mobile插件的方式，可以使版本的更新更加及时，但由于是通过jQuery CDN服务器请求的方式进行加载，在执行页面时必须时时保证网络的畅通，否则不能实现jQuery Mobile移动页面的效果。
本节教学录像：5分钟
在移动Web开发应用中，PhoneGap框架的作用也十分重要。在使用PhoneGap进行移动Web开发之前，需要先搭建PhoneGap开发环境。在本节的内容中，将详细讲解搭建PhoneGap开发环境的基本知识。
在安装PhoneGap开发环境之前，需要先安装如下所示的框架。
Java SDK
Eclipse
iOS SDK
ADT Plugin
在写本书的时候，PhoneGap的最新版本是3.6.3。，读者可以登录PhoneGap的官方网站http://www.phonegap.com在线下载PhoneGap 2.9.0及其以前的版本。
下面以获得PhoneGap 2.9.0为例，讲解获得PhoneGap 2.9.0及其以前的版本开发包的基本流程。
（1）登录PhoneGap的官方网站http://phonegap.com/download/，如图2-16所示。
（2）单击最新版本下方的
按钮下载PhoneGap开发包，下载成功后的压缩包名为“phonegap-2.9.0.zip”。
（3）解压缩文件phonegap-2.9.0.zip，假设解压到本地硬盘的“D:\”目录下，解压后的根目录名是“phonegap-2.9.0”，双击打开后的效果如图2-17所示。
对图2-17中各个子目录的具体说明如下所示。
“doc”：其中包含了PhoneGap的源代码文档，如图2-18所示。
“lib”：其中包含了PhoneGap支持的各种平台，如图2-19所示。
“changelog”：一个日志文件，保存了更改历史记录信息和作者信息等。
“LICENSE”：Apache软件许可证（v2版本）。
“README.md”：帮助文档。
“VERSION”：版本信息。
从2.9.0以后的版本开始，PhoneGap使用Node.js进行管理，获得PhoneGap 2.9.0以后版本开发包的基本流程如下。
（1）登录http://nodejs.org下载Node.js，如图2-20所示。
（2）http://nodejs.org页面会自动识别当前计算机的操作系统版本和位数（32位或64位），单击“INSTALL”按钮后将自动下载适用当前计算机的版本。下载界面如图2-21所示。
（3）双击下载的文件node-v0.12.0-x64.msi，在弹出的欢迎界面中单击“Next”按钮，如图2-22所示。
（4）在弹出的协议接受界面中勾选“I accept…”选项，然后单击“Next”按钮，如图2-23所示。
（5）在弹出的安装路径界面中设置安装路径，然后单击“Next”按钮，如图2-24所示。
（6）在弹出的典型设置界面中单击“Next”按钮，如图2-25所示。
（7）在弹出的准备安装界面中单击“Install”按钮开始安装，如图2-26所示。
（8）在弹出的安装界面中显示安装进度条，如图2-27所示。
（9）在弹出的完成界面中单击“Finish”按钮完成安装操作，如图2-28所示。
（10）接下来开始使用Node.js获得PhoneGap，单击“开始”菜单中的“Node.js command prompt”选项，启动Node.js，如图2-29所示。
（11）在弹出的命令行界面中输入命令“npm install -g phonegap”进行安装，此时系统会自动检测并安装当前最新版本的PhoneGap，如图2-30所示。
（12）通过安装命令行界面可知，获取后的文件保存在“C:\Users\用户名\AppData\Roaming\npm\node_modules”目录下，如图2-31所示。
注意
当用Node.js安装PhoneGap时，解决提示“not found git”的问题。
先登录http://nodejs.org/下载安装Node.js，然后执行命令：
npm install -g phonegap
有时会报错，提示“没有安装git”。解决方法是下载msysgit并安装，然后设置系统环境变量，把git安装目录的*\bin目录添加到PATH中。若提示缺少libiconv-2.dll，则需要单独下载libiconv-2.dll，并放到bin目录中（git做些简单的配置）。
本节视学录像：2分钟
移动Web的开发过程是网页开发的过程，和传统网页开发相比，唯一的差别是这些网页需要在移动设备中运行。有时开发者不具备iOS、Android等软硬件测试平台，此时可以尝试借助于第三方工具进行简单的测试，例如Opera Mobile Emulator。在开发过程中，搭建Opera Mobile Emulator移动Web测试环境的基本流程如下所示。
（1）登录Opera官方网站，如图2-32所示。
（2）下载Opera Mobile Emulator，下载完成后会获得一个可运行文件，作者获得的是Opera_Mobile_Emulator_12.1_Windows.exe，如图2-33所示。
（3）双击上述可运行文件进行安装，安装成功后双击“Opera Mobile Emulator”图标运行，初始运行界面如图2-34所示。此处选择语言“简体中文”。
（4）单击“确定”按钮，在新界面中可以进行相关设置，在此我们只需使用默认设置即可，如图2-35所示。
（5）单击“启动”按钮后成功运行测试工具Opera Mobile Emulator，如图2-36所示。
1.网页设计总体方案的主题要鲜明
在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色做出定位，规划网站的组织结构。Web站点应针对所服务对象（机构或人）的不同而具有不同的形式。有些站点只提供简洁的文本信息；有些则采用多媒体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。好的Web站点把图形表现手法和有效的组织与通信结合起来。
为了做到主题鲜明突出，要点明确，我们将按照客户的要求，以简单明确的语言和画面体现站点的主题；调动一切手段充分表现网站的个性和情趣，做出网站的特点。
Web站点主页应具备的基本成分包括：①页头，准确无误地标识你的站点和企业标志；②E-mail地址，用来接收用户垂询；③联系信息，如普通邮件地址或电话；④版权信息，声明版权所有者等。
我们要充分利用已有信息，如客户手册、公共关系文档、技术手册和数据库等。
2.实现网页设计形式与内容相统一
为了将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。灵活运用对比与调和、对称与平衡、节奏与韵律及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容，往往会达到比较好的效果。点、线、面作为视觉语言中的基本元素，巧妙地互相穿插、互相衬托、互相补充构成最佳的页面效果，充分表达完美的设计意境。
1.下载并安装网页设计三剑客。
2.下载并安装FrontPage。
