作者：龙马工作室
出版社：信息技术第二出版分社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML 5网页设计与制作实战从入门到精通试读：
前言
随着社会信息化的不断普及，计算机已经成为人们工作、学习和日常生活中不可或缺的工具，而计算机的操作水平也成为衡量一个人综合素质的重要标准之一。为满足广大读者的实际应用需要，我们针对不同学习对象的接受能力，总结了多位计算机高手、国家重点学科教授及计算机教育专家的经验，精心编写了这套“实战从入门到精通”系列图书。
一、系列图书主要内容
本套图书涉及读者在日常工作和学习中各个常见的计算机应用领域，在介绍软硬件的基础知识及具体操作时，均以读者经常使用的版本为主，在必要的地方也兼顾了其他版本，以满足不同读者的需求。本套图书主要包括以下品种。
二、写作特色
从零开始，循序渐进
无论读者是否从事网页设计工作，是否接触过HTML 5，都能从本书中找到最佳的学习起点，循序渐进地完成学习过程。
紧贴实际，案例教学
全书内容均以实例为主线，在此基础上适当扩展知识点，真正实现学以致用。
紧凑排版，图文并茂
紧凑排版既美观大方又能够突出重点、难点。所有实例的每一步操作，均配有对应的插图和注释，以便读者在学习过程中能够直观、清晰地看到操作过程和效果，提高学习效率。
单双混排，超大容量
本书采用单、双栏混排的形式，大大扩充了信息容量，在约300页的篇幅中容纳了传统图书600多页的内容，从而在有限的篇幅中为读者奉送了更多的知识和实战案例。
独家秘技，扩展学习
本书在每章的最后，以“高手私房菜”的形式为读者提炼了各种高级操作技巧，而“举一反三”栏目更是为知识点的扩展应用提供了思路。
书盘结合，互动教学
本书配套的多媒体教学光盘内容与书中知识紧密结合并互相补充。在多媒体光盘中，我们仿真工作、生活中的真实场景，通过互动教学帮助读者体验实际应用环境，从而全面理解知识点的运用方法。
三、光盘特点
17小时全程同步教学录像
光盘涵盖本书所有知识点的同步教学录像，详细讲解每个实战案例的操作过程及关键步骤，帮助读者更轻松地掌握书中所有的知识内容和操作技巧。
超多、超值资源
除了与图书内容同步的教学录像外，光盘中还赠送了大量相关学习内容的教学录像、扩展学习电子书及本书所有实例的配套源文件等，以方便读者扩展学习。为了满足读者在手机和平板电脑上学习的需要，光盘中还赠送了本书教学录像的手机版视频学习文件。
手机版教学录像
将手机版教学录像复制到手机或平板电脑后，即可在手机或平板电脑上随时随地跟着教学录像进行学习。
四、配套光盘运行方法
Windows XP操作系统
(1)将光盘放入光驱中，几秒钟后光盘就会自动运行。
(2)若光盘没有自动运行，可以双击桌面上的【我的电脑】图标，打开【我的电脑】窗口，然后双击【光盘】图标，或者在【光盘】图标上单击鼠标右键，在弹出的快捷菜单中选择【自动播放】选项，光盘就会运行。
Windows 8操作系统
(1)将光盘放入光驱中，几秒钟后桌面右上角会弹出提示信息“点击选择要对 此光盘执行的操作”。
(2)在提示信息位置单击，然后在弹出的【选择要对此光盘执行的操作。】界面中单击【打开文件夹以查看文件】链接以打开光盘文件夹，用鼠标右键单击光盘文件夹中的MyBook.exe文件，并在弹出的快捷菜单中选择【以管理员身份运行】菜单项，打开【用户账户控制】对话框，如右下图所示。单击【是】按钮，光盘即可自动播放。
(3)再次使用本光盘时，将光盘放入光驱后，双击光驱盘符或单击系统弹出的【选择要对此光盘执行的操作。】界面中的【运行MyBook.exe】链接，即可运行光盘。
五、光盘使用说明
1.在电脑上学习光盘内容的方法
(1)光盘运行后会首先播放片头动画，之后进入光盘的主界面。其中包括【课堂再现】、【学习笔记】、【手机版】三个学习通道，和【源文件】、【赠送资源】、【帮助文件】、【退出光盘】四个功能按钮。
(2)单击【课堂再现】按钮，进入多媒体同步教学录像界面。在左侧的章号按钮（如此处为）上单击，在弹出的快捷菜单上单击要播放的节名，即可开始播放相应的教学录像。
(3)单击【学习笔记】按钮，可以查看本书的学习笔记。
(4)单击【手机版】按钮，可以查看手机版教学录像。
(5)单击【源文件】、【赠送资源】按钮，可以查看对应的文件和资源。
(6)单击【帮助文件】按钮，可以打开“光盘使用说明.pdf”文档，该说明文档详细介绍了光盘在电脑上的运行环境、运行方法，以及在手机上如何学习光盘内容等。
(7)单击【退出光盘】按钮，即可退出本光盘系统。
2.在手机上学习光盘内容的方法
(1)将安卓手机连接到电脑上，把光盘中赠送的手机版教学录像复制到手机上，即可利用已安装的视频播放软件学习本书的内容。
(2)将iPhone/iPad连接到电脑上，通过iTunes将随书光盘中的手机版教学录像导入设备中，即可在iPhone/iPad上学习本书的内容。
(3)如果读者使用的是其他类型的手机，可以直接将光盘中的手机版教学录像复制到手机上，然后使用手机自带的视频播放器观看视频。
六、创作团队
本书由龙马工作室策划编著，河南工业大学信息科学与工程学院梁义涛任主编，参与本书编写、资料整理、多媒体开发及程序调试的人员还有孔长征、孔万里、李震、乔娜、赵源源、王果、陈小杰、胡芬、刘增杰、王金林、彭超、李东颖、侯长宏、刘稳、左琨、邓艳丽、康曼、任芳、王杰鹏、崔姝怡、侯蕾、左花苹、刘锦源、普宁、王常吉、师鸣若、钟宏伟、陈川、刘子威、徐永俊、朱涛和张允等。
在本书的编写过程中，我们竭尽所能地将最好的内容呈现给读者，但也难免有疏漏和不妥之处，敬请广大读者不吝指正。读者在学习过程中有任何疑问或建议，可发送电子邮件至zhangyi@ptpress.com.cn。
编者第1章HTML 5概述
本章视频教学时间：38分钟
互联网应用已经成为人们娱乐、工作中不可缺少的一部分，其中网页设计也成为学习计算机知识的重要内容之一。制作网页需要掌握的最基础的语言就是HTML，任何高级网站开发语言都必须以HTML为基础实现。因此本章就来介绍HTML的基本概念、编写方法及浏览HTML文件的方法，使读者初步了解HTML，从而为后面的学习打下基础。【学习目标】
通过本章的学习，对HTML 5有初步了解。【本章涉及知识点】
了解HTML的发展
掌握HTML 5的基本概念
掌握HTML 5文件的编写方法1.1HTML 5概述
本节视频教学时间：15分钟
HTML（Hyper Text Markup Language，超文本标签语言）是一种编写网页文件的标记语言。HTML是一种描述语言，而不是一种编程语言，主要用于描述超文本中内容的显示方式。1.1.1 HTML的发展史
HTML作为一种标记语言，从诞生到今天经历了十几载，发展过程曲折，经历的版本及发布日期如下表所示。1.1.2 兼容性和存在即合理
HTML作为广泛应用的标记语言，新入市的HTML 5版本拥有极好的兼容性，其存在也有非常重大的意义。下面就其兼容性和存在意义进行说明。
首先来讨论一下HTML 5的兼容性问题。HTML 5虽然出现了很多新特性，但并不是颠覆性的。其兼容性主要体现为以下几点。
⑴ HTML 5的核心理念是新特性平滑过渡，一旦遇到浏览器不支持HTML 5的某些新功能，HTML 5就会自动以准备好的备选行为执行，以保障网页内容的正常显示。
⑵ HTML 5的语法结构依然符合传统的HTML语言的语法习惯。
⑶ HTML 5对浏览器的支持做了改善，可以使各版本浏览器都能很好地支持HTML 5新技术。
其次来讨论一下HTML 5的存在意义。现存的HTML 5以前的标记语言，已经有一二十年的历史。随着信息化的发展，总是要产生一些更好更有利的功能，所以HTML 5的出现是必然的。HTML 5标准的一些特性非常具有革命性，但是面对正在广泛使用的旧标准，这些新特性又都遵循了过渡进化的原则。1.1.3 效率和用户优先
HTML 5标准的制定是以用户优先为原则的，当遇到无法解决的冲突时，规范会把用户放到第一位，其次是网页的作者，再次是浏览器，接着是规范的制定者（W3C/WHATWG），最后才考虑理论的纯粹性。所以总体来看，HTML 5的绝大部分特性还是实用的，只是在有些情况下还不够完美。举个例子，以下有3个代码，虽然有所不同，但是在HTML 5中都能被正确识别。 id="HTML 5" id=HTML 5 ID="HTML 5"
在以上案例中，除了第一个外，另外两个语法都不是很严格，而这种不严格的语法被广泛使用受到了一些技术人员的反对。但是无论语法严格与否，对网页查看者来说都没有任何影响，他们只需看到想要的网页效果就可以了。为了提高HTML 5的使用体验，还加强了以下两方面的设计。
1．安全机制的设计
为确保HTML 5的安全，在设计HTML 5时做了很多针对安全的设计。HTML 5引入了一种新的基于来源的安全模型，该模型不仅易用，而且通用于各种不同的API。使用这个安全模型可以做一些以前做不到的事情，不需要借助于任何所谓聪明、有创意却不安全的hack就能跨域进行安全对话。
2．表现和内容分离
表现和内容分离是HTML 5设计中的另一个重要内容。HTML 5在所有可能的地方都努力进行了分离，也包括CSS。实际上表现和内容的分离早在HTML4中就有设计，但是分离得并不彻底。为了避免可访问性差、代码高复杂度、文件过大等问题，HTML 5规范中更细致、清晰地分离了表现和内容。但是考虑到HTML 5的兼容性问题，一些旧的表现和内容的代码还是可以兼容使用的。1.1.4 化繁为简
作为当下流行的通用标记语言，HTML 5越简单实用越好。所以在设计HTML 5时严格遵循了“简单至上”的原则，主要体现在以下几个方面。
⑴ 新的简化的字符集声明；
⑵ 新的简化的DOCTYPE；
⑶ 简单而强大的HTML 5 API；
⑷ 以浏览器原生能力替代复杂的JavaScript代码。
为了实现以上这些简化操作，HTML 5规范需要比以前更加细致，更加准确、精确，且比以往任何版本的HTML规范都要精确。任何歧义和含糊的内容都会阻碍HTML 5的正常推广实用。
在HTML 5规范细化的过程中，为了避免造成误解，几乎给了所有内容以彻底、完全的定义，特别是Web应用。这也使最终完成的HTML 5规范多达900页以上。
基于多种改进过的、强大的错误处理方案，HTML 5具备了良好的错误处理机制。非常有现实意义的一点是，HTML 5提倡重大错误的平缓恢复，再次把最终用户的利益放在了第一位。比如页面中有错误的话，在以前可能会影响整个页面的显示。而HTML 5不会出现这种情况，取而代之的是以标准方式显示"broken"标记。这要归功于HTML 5中精确定义的错误恢复机制。1.2HTML 5的基本概念
本节视频教学时间：10分钟
HTML 5取代了自1999年就诞生的HTML 4，将成为 HTML、XHTML以及HTML DOM的新标准。1.2.1 HTML 5的革命性变化
HTML语言从1.0至5.0经历了巨大的变化，从单一的文本显示功能到图文并茂的多媒体显示功能，许多特性经过多年的完善，已经成为一种非常好的标记语言。尤其是HTML 5对多媒体的支持功能更强，新增了以下功能。
⑴ 语义化标签，使文档结构明确；
⑵ 新的文档对象模型（DOM）；
⑶ 实现2D绘图的Canvas对象；
⑷ 可控媒体播放；
⑸ 离线存储；
⑹ 文档编辑；
⑺ 拖放；
⑻ 跨文档消息；
⑼ 浏览器历史管理；
⑽ MIME类型和协议注册。
对于这些新功能，支持HTML 5的浏览器在处理HTML代码错误的时候必须更灵活，而那些不支持HTML 5的浏览器将忽略HTML 5代码。1.2.2 HTML5文件的基本结构
HTML 5不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中的内容和结构。HTML最基本的语法是<标记符>。标记符通常都是成对使用，有一个开头标记和一个结束标记。结束标记只是在开头标记的前面加一个斜杠“/”。当浏览器收到HTML文件后，就会解释里面的标记符，然后把标记符相对应的功能表达出来。
如在HTML中用
标记符来定义一个段落，用来定义一个换行符。当浏览器遇到标记符时，会把该标记中的内容自动形成一个段落。当遇到标记符时，会自动换行，并且该标记符后的内容会从一个新行开始。这里的
标记符是单标记，没有结束标记，标记后的“/”可以省略，但为了规范代码一般建议加上。
完整的HTML文件包括标题、段落、列表、表格、绘制的图形以及各种嵌入对象，这些对象统称为HTML元素。一个HTML 5文件的基本结构如下。 文件开始的标记
文档头部开始的标记 …文件头的内容 文档头部开始的标记 文件主体开始的标记 …文档主体内容 文件主体结束的标记 文件结束的标记从上面的代码可以看出，在HTML文件中，所有的标记都是相对应的，开头标记为< >，结束标记为，在这两个标记中间添加内容。这些基本标记的使用方法及详细解释见第2章。1.2.3 HTML 5的标记
HTML标记通常被称为HTML标签(HTML tag)。HTML 5的标签通常具有以下4个特征。
⑴ HTML标签是由尖括号包围的关键词，比如；
⑵ HTML标签通常是成对出现的，比如和；
⑶ 标签对中的第一个标签是开始标签，第二个标签是结束标签；
⑷ 开始标签和结束标签也被称为开放标签和闭合标签。
整个HTML 5文件其实就是由各种各样的标记标签应用构成的。1.3HTML 5文件的编写方法
本节视频教学时间：13分钟
一般来说，用户可通过两种方式编写HTML文件。一种是自己写HTML文件，事实上这并不是非常困难，也不需要特别的技巧；另一种是使用HTML编辑器，它可以辅助用户来做编写的工作。1.3.1 使用记事本编写HTML 5
前面介绍到HTML 5是一种标记语言，而标记语言代码是以文本形式存在的。因此，所有的记事本工具都可以作为它的开发环境。HTML文件的扩展名为.html或.htm，将HTML源代码输入记事本并保存之后，可以在浏览器中打开文档以查看其效果。
使用记事本编写HTML文件的具体操作步骤如下。
1 选择【记事本】命令
单击Windows桌面上的【开始】按钮，选择【所有程序】【附件】【记事本】命令，打开一个记事本，在记事本中输入HTML代码，如图所示。
2 弹出【另存为】对话框
编辑完HTML文件后，选择【文件】【保存】命令或按【Ctrl+S】组合键，在弹出的【另存为】对话框中，选择【保存类型】为【所有文件】，然后将文件扩展名设为.html或.htm，单击【保存】按钮，保存文件。打开网页文档，在浏览器中预览效果，如图所示。1.3.2 使用Dreamweaver编写HTML文件“工欲善其事，必先利其器”，虽然使用记事本可以编写HTML文件，但是编写效率太低，且对于语法错误及格式都没有提示。因此，很多专门编写HTML网页的工具弥补了这种缺陷。Adobe公司的Dreamweaver CS6用户界面非常友好，是一个非常优秀的网页开发工具，深受广大用户的喜爱。Dreamweaver CS6的主界面如图所示。
1．文档窗口
文档窗口位于界面的中部，是用来编排网页的区域，与在浏览器中的结果相似。在文档窗口中，可以将文档分为三种视图显示模式。
⑴ 代码视图：使用代码视图，可以在“文档”窗口中显示当前文档的源代码，也可以在该窗口中直接输入HTML代码。
⑵ 设计视图：设计视图下，无须编辑任何代码，直接使用可视化的操作来编辑网页。
⑶ 拆分视图：拆分视图下，左半部分显示代码视图，右半部分显示设计视图。可以通过输入HTML代码，直接观看效果；还可以通过设计视图插入对象，直接查看源文件。
在各种视图间切换，只需在文档工具栏中单击相应的视图按钮即可，文档工具栏如图所示。
2．【插入】面板【插入】面板是在设计视图下，使用频度很高的面板之一。插入面板默认打开的是【常用】页，包括了最常用的一些对象。例如，在文档中的光标位置插入一段文本、图像或表格等。用户可以根据需要切换到其他页，如图所示。
3．【属性】面板【属性】面板中主要包含当前选择的对象相关属性设置。可以通过单击菜单栏中的【窗口】【属性】命令或按下【Ctrl+F3】组合键，打开或关闭【属性】面板。【属性】面板是常用的一个面板，因为无论编辑哪个对象的属性都要用到它。其内容也会随着选择对象的不同而改变。例如，当光标定位在文档体文字内容部分时，【属性】面板就显示文字相关属性，如图所示。
Dreamweaver CS6中还有很多面板，以后讲叙时再作详细讲解。打开的面板越多，编辑文档的区域就越小。为了编辑文档的方便，可以通过【F4】功能键快速隐藏和显示所有面板。1.3.3 编写第一个HTML 5网页文件
本小节使用Dreamweaver CS6编写HTML文件，具体操作步骤如下。
1 选择【新建】命令
启动Dreamweaver CS6，在欢迎屏幕中【新建】栏中选择【HTML】选项，如图所示。或者单击菜单中的【文件】【新建】菜单命令（组合键【Ctrl+N】）。
3 生成新的HTML文件
生成新的HTML文件，当前文件显示的是代码视图页面。小提示如果默认显示的不是代码视图，在文档工具栏中单击【代码】按钮，切换到代码视图。
2 弹出【新建文档】对话框
弹出【新建文档】对话框，在页面类型选项中选择【HTML】选项，单击【创建】按钮。
4 修改HTML文档
修改HTML文档标题，将代码中