书名：网页设计与制作（HTML5+CSS3+JavaScript）pdf/doc/txt格式电子书下载

推荐语：

作者：陈惠红,胡耀民,刘世明等编

出版社：电子工业出版社

出版时间：2018-08-01

书籍编号：30471554

ISBN：9787121344121

正文语种：中文

字数：174832

版次：1

所属分类：教材教辅-中职/高职

版权信息

书名：网页设计与制作（HTML5+CSS3+JavaScript）

作者：陈惠红　胡耀民　刘世明

ISBN：9787121344121

版权所有 · 侵权必究

前言

网页制作技术可以粗略划分为前台浏览器端技术和后台服务器端技术，本书主要介绍前台浏览器端技术，也就是前端技术，HTML5负责页面结构，CSS3负责样式表现，JavaScript负责动态行为。如今网页技术层出不穷，并且日新月异，但有一点是肯定的，不管是使用什么技术设计的网站，用户在客户端通过浏览器打开看到的网页都是静态网页，都是由HTML5+CSS3+JavaScript技术构建的网页。网页制作技术的应用范围也越来越广，如门户网站、BBS、博客、在线视频等，HTML5+CSS3+JavaScript技术成为Web 2.0众多技术中不可替代的弄潮儿。所以，如果想从事网页设计或网站管理的相关工作，就必须掌握HTML5+CSS3+JavaScript技术。

HTML5自从2010年正式推出以来，就以惊人的速度被迅速推广，世界各知名浏览器厂商也对HTML5有很好的支持，如今HTML5网页端的产品也越来越丰富。目前，很多高校的计算机专业和IT培训公司，都将基于HTML5+CSS3+JavaScript技术的开发课程作为必修课程之一。本书是作者项目实践加教学经验的总结，也是广州市高校第九批教育教学改革课题项目（编号：2017F06）的阶段性成果总结，结合企业需求，以学生课堂实践为基础，以案例教学方法为主轴。一方面，跟踪HTML5+CSS3+JavaScript技术的发展，适合市场需求，精心选择案例，突然重点、强调实用，使知识讲解全面、系统；另一方面，设计典型案例，将课堂教学与项目实践相结合，既有利于学生学习知识，又有利于指导学生实践，真正使课堂动起来。

本书共11章，具体结构划分如下。

第一部分：开发准备篇，包括第1章。这部分主要介绍网页和网站基础知识，HTML5简介、开发环境配置。

第二部分：HTML5基础知识篇，包括第2～4章。这部分主要讲解网页文档结构，HTML5语义和结构元素，图像标识和超链接，HTML5列表、表格和表单标记。

第三部分：CSS3知识篇，包括第5～7章。这部分主要讲解CSS3基础、CSS3选择器、CSS3盒子模型、CSS3基本样式、CSS3动画样式。

第四部分：技术提高篇，包括第8～9章。这部分主要讲解JavaScript基本语法和用法、JavaScript对象和函数、使用JavaScript控制网页文档和浏览器、JavaScript与HTML5新标记（canvas、视频和音频）结合使用等。

第五部分：案例实战篇，包括第10～11章。这部分主要通过4个小案例和一个集团网站开发综合案例具体演示如何使用HTML5+CSS3+JavaScript技术实现网页动态效果和完整的网站开发。

本书特点如下。

知识全面：本书本着“学生好学、教师好教、企业需要”的原则，知识讲解由浅入深，涵盖了大部分HTML5、CSS3、JavaScript技术知识点，便于读者循序渐进地掌握HTML5+CSS3+ JavaScript技术网站前端开发技术。

图文并茂：本书分篇幅讲解HTML5、CSS3、JavaScript技术的内容，为读者描绘一幅HTML5、CSS3、JavaScript角色图，说明了这3种技术在网页开发这个大生态中扮演着重要角色。本书注意可操作性、图文并茂，在介绍案例的过程中，每一个操作均有对应的插图，这种图文结合的方式使读者在学习过程中能够直观、清晰地看到操作过程及其效果，便于快速理解和掌握。

案例丰富：把知识点融汇于系统的案例实训当中，采用理论介绍、案例演示、运行效果和源代码解释相结合的教学步骤，结合经典案例进行讲解和拓展，进而达到“知其然，并知其所以然”的效果。

讲解详尽：本书思路清晰、语言平实、操作步骤详细，只要认真阅读本书，把书中的所有案例循序渐进地练习一遍，读者就可以达到企业前端开发所需的要求。

资源丰富：本书的教学资源可登录华信教育资源网免费下载，包括本书所需要的软件、所有案例源代码等，其中源代码经过严格测试，可以在Windows XP/Windows 7等平台、Google浏览器下编译和运行。

本书从初学者的角度出发，结合大量的案例使学习不再枯燥、教条，因此要求读者边学习边实践，避免所学的知识只限于理论。本书作为入门书籍，知识点比较庞杂，所以不可能面面俱到，技术学习的关键是方法，本书在很多案例中体现了方法的重要性，读者只要掌握了各种技术的应用方法，在学习更深入的知识时可大大提高自学的效率。

本书由广州番禺职业技术学院的陈惠红、胡耀民、刘世明担任主编，严梅、汤双霞、丘美玲担任副主编，参加本书编写的人员还有李玲玲、谢建华、刘柱栋、吴晓澜。

为了方便教师教学，本书提供了教学参考资料包，内容包括电子课件、案例源代码、课后上机实训、习题解答等，请有此需要的教师登录华信教育资源网（www.hxedu.com.cn）注册后免费下载，如有问题可在网站留言板留言或与电子工业出版社联系（E-mail：hxedu@phei.com.cn）。

由于编者水平有限，书中难免存在疏漏和不足之处，敬请广大读者批评指正，使本书得以改进和完善。

编 者

开发准备篇

随着互联网的日益成熟，越来越多的个人和企业制作了自己的网站，网站作为一种全新的形象展示方式，已经被广大用户所接受。想要制作出精美的网站，用户不仅要熟练地掌握网站建设相关软件，还要了解网页和网站开发的相关基础知识。只有对网页和网站的相关基础知识进行深入了解，才能够快速掌握网页的设计技巧和方法。本部分主要介绍网页设计制作的基础知识、开发工具和运行工具。

第1章 初识前端开发

随着新一代Web开发标准—HTML5的诞生，各大浏览器厂商和软件厂商都不遗余力地支持HTML5的发展，加入HTML5的阵营，互联网时代的新一轮革命即将展开，当前端开发碰上HTML5会产生什么样的激烈火花？真是让人期待。

1.1 网页和网站基础知识

1.1.1 了解网页

网页是互联网展示信息的一种形式。一般网页上都会有文本和图像信息，复杂一些的网页上还会有声音、视频、动画等多媒体。

进入网站，浏览者首先看到的是网页的主页，主页集成了二级页面及其他网站的链接，浏览者进入主页后可以浏览最新的信息，找到感兴趣的主题，通过单击超链接跳转到其他网页，如图1.1所示。

当浏览者输入一个网址或者单击了某个链接后，在浏览器中看到的文字、图像、动画、视频和音频等的内容，能够承载这些内容的页面称为网页。浏览网页是互联网应用最广泛的功能，网页是网站的基本组成部分。

网站则是各种内容网页的集合，按照其功能和大小来分，目前主要有门户网站和公司网站两种。门户网站内容庞大而又复杂，如新浪、搜狐、网易等门户网站，公司网站一般有几个页面，如小型公司的网站，但都是由最基本的网页元素组合到一起的。

在这些网站中，有一个特殊的页面，它是浏览者输入某个网站后首先看到的页面，因此这样的一个页面通常称为主页（HomePage），又称首页。首页中承载了一个网站中的主要内容，访问者可按照首页中的分类来精确、快速地找到自己想要的信息内容。

通常我们看到的网页，都是以.htm或.html为扩展名的文件，俗称HTML文件，网页上还会用到一些其他类型文件。网页类型简介如表1.1所示。

图1.1 网页在浏览器中的效果

表1.1 网页类型简介

网页可以分为静态网页和动态网页，静态网页与动态网页相对应，静态网页URL的后缀以.htm、.html、.shtml、.xml等常见形式出现，而动态网页URL的后缀则是以.asp、.jsp、.php、.perl、.cgi等形式出现的，并且在动态网页地址中有一个标志性的符号“?”，如图1.2所示。动态网页可以是纯文本内容的，也可以是包含各种动画内容的，这些只是网页具体内容的表现形式。无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。

图1.2 动态网页

从网站浏览者的角度看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但从网站开发、管理、维护的角度来看就有很大的差别。

静态网页的一般特点简要归纳如下。

（1）静态网页的每个网页都有一个固定的URL，且不含有“？”。

（2）网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都保存在网站服务器上，也就是说，静态网页是实实在在在服务器上的文件，每个网页都是一个独立的文件。

（3）静态网页的内容相对稳定，因此容易被搜索引擎检索。

（4）静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时，完全依靠静态网页制作方式比较困难。

（5）静态网页的交互性较差，在功能方面有较大的限制。

动态网页的一般特点简要归纳如下。

（1）动态网页以数据库技术为基础，可以大大降低网站维护的工作量。

（2）采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等。

（3）动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时，服务器才返回一个完整的网页。

（4）动态网页地址中的“？”对搜索引擎检索存在一定问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，或者处于技术方面的考虑，搜索引擎不会去抓取网站“？”后面的内容，因此采用动态网页的网站在进行搜索引擎推广的时候要做一定的技术处理。

1.1.2 设计网页

网页由网址（URL）来识别与存取，当访问者在浏览器的地址栏中输入网址后，通过一段复杂而又快速的程序，网页文件会被传送到访问者的计算机内，然后浏览器把这些HTML代码“翻译”成图文并茂的网页。虽然网页的形式与内容不相同，但是组成网页的基本元素是大体相同的，一般包含视频、音频、表单、动画、超链接、图像和文本等内容。

建立网页的目的是给浏览者提供所需的信息，这样浏览者才会愿意光顾，网站才有真正的意义。

1.网页设计的基本原则

1）明确主题

一个优秀的网站要有一个明确的主题，整个网站设计要围绕这个主题进行制作，也就是说，在网页设计之前要明确网站的目的，所有页面都是围绕着这个内容制作的。

2）首页很重要

首页设计是整个网站成功与否的关键。首页能反映整个网站给人的整体感觉。能否吸引访问者全在首页的设计效果。首页最好要有清楚、人性化的类别选项，让访问者可以快速找到自己想要浏览的内容。

3）分类

网站内容的分类也十分重要，它可以按主题分类、按性质分类、按组织者结构分类，或者按人们的思考方式分类等。不论是哪一种分类的方法，都要让访问者很容易找到目标。

4）互动性

互联网的另一个特色就是交互性了，好的网站首页必须与访问者有良好的互动关系，包括整个设计的呈现、使用界面引导等，都应掌握互动的原则，让访问者感觉自己操作的每一步都确实得到了恰当的回应。

5）图像应用技巧

图像是网站的特色之一，它具备醒目、吸引人及传达信息的功能，好的图像应用可给网页增色，同样，不恰当的图像应用则会适得其反。运用图像时一定要注意下载时间的问题，尽可能使用一般浏览器都支持的压缩格式。如果要放置大型图像文件，最好将图像文件与网页分隔开，在页面中先显示一个具备链接的缩略图像或者说明文字，然后加上该图像大小说明，这样不但可加快网页的传输速度，而且可以让浏览者判断是否继续打开放大后的图片。

6）避免滥用技术

技术是让人着迷的东西，网页设计者要喜欢使用各种各样的网页制作设计技术。好的技术运用到页面上会给访问者一种全新的感觉，但不恰当的使用技术反而让浏览者对网页失去兴趣。

7）及时更新和维护

访问者希望看到新鲜的东西，没有人会对过时的信息感兴趣，因此网站的信息一定注意及时性，时刻保持着新鲜感是非常重要的。

网页设计中主要的东西，并非在软件的应用上，而是在网页设计的理解及设计制作的水平上，在自身的美感及页面方向上的把握，包括网页整体布局、信息内容、下载速度、图像和版面设计、文字可读性、多媒体功能的应用和导航清晰性等。

2.设计网页的风格及色彩搭配

1）确定网站的整体风格

风格是抽象的，是指站点的整体形象给浏览者的综合感受，包括站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等诸多因素。

2）网页色彩搭配

无论是平面设计还是网页设计，色彩永远是最重要的一环。当距离显示屏较远的时候，看到的不是优美的版本，也不是美丽的图片，而是网页的色彩。

（1）用一种色彩：先选定一种色彩，然后调整透明度或者饱和度，这样的网页看起来色彩统一，有层次感。

（2）用两种色彩：先选定一种色彩，然后选择它的对比色。

（3）用一个色系：简单地说就是用同一个感觉的色彩，如淡蓝、淡黄、浅绿，或者土黄、土灰、土蓝。

1.1.3 制作网站流程

在开始建设网站之前，应该有一个整体的规划和目标，规划好网页的大概结构后，就可以着手设计了，下面介绍网站建设的基本流程。

1.前期策划

网站的前期策划对于网站的运作至关重要，规划一个网站时，可以用树状结构先把每个页面的内容大纲列出来，如图1.3所示。当要制作一个很大的网站时，不仅要规划好，还要考虑以后的扩展性，以免制作好后再更改整个网站的结构。

图1.3 网站设计步骤

1）明确建立网站的目标和用户需求

制作网站必须有明确的目标，要明确网页使用的语言与页面所要体现出来的站点主题，运用一切的手段充分表现出网站的特点和个性，这样才能给访问者留下深刻的印象。

2）收集素材

明确了网站的主题之后，就要围绕主题收集素材，如果想要网站能够吸引更多访问者，就要收集精美的素材，包括图片、文字、音频、视频及动画等。

3）规划站点

一个网站设计成功与否，很大程度上取决于设计者的规划水平，网站的规划包括的内容很多，如网站的结构、颜色的搭配、版面的布局、文字及图片等的运用，只有在制作网站之前把这些方面都考虑到了，制作出的网页才能够具有特点和吸引力。

4）网页设计总体方案主题鲜明

在目标明确的基础上，完成网站的构思创意，即总体方案设计，对网站的整体风格和特色做出定位，规划网站的组织结构。

5）导向清晰

网页设计中的导航使用草文本链接或图片链接，使浏览者能够在网站中自由前进或后退，而不用浏览器上的前进或后退按钮，在所有的图片上使用“ALT”标识符注明图片名称或解释，以便那些不愿意自动加载图片的观众能了解图片的含义。

6）短暂的下载时间

进入网站时等待时间过长，会使浏览者对网站失去兴趣，在互联网上，30s的等待时间与我们平常10min等待时间的感觉相同，因此，建议在网页设计中尽量避免使用过多及“体积”过大的图片，将主页的容量控制在50KB以内，平均30KB左右，确保普通浏览者页面的等待时间不超过10s。

7）网站测试和改进

网站测试实际上是模拟用户访问网站的过程，用以发现问题并改进网站设计。

8）内容更新

网站建立完成后，须要不断更新网页内容，站点信息的不断更新可以让浏览者有新鲜感，保持网站的更新速度。

2.页面细化及实施

网页设计和制作是一个复杂而细致的过程，一定要按照先大后小，先简单后复杂的顺序来进行。所谓的先大后小，就是说在制作网页时，先把大的结构设计好，然后再把小的部分逐渐完善设计出来。所谓先简单后复杂，就是说先设计出简单的内容，然后再将复杂的内容设计出来并完善，这样方便出现问题时进行修改。如果有一个好的网站策划与分工，后台程序可以和美工设计同时开始。

1）网页美工设计

美工设计人员应该在网站策划阶段就与客户充分接触，了解客户对网站设计的需求，以便在设计过程中有一个基调，从而提高设计稿的被认可度。美工首先要对网站有一个整体的定位，然后再根据此定位分别做出首页、二级栏目及内容页的设计稿。一般要设计1～3套不同风格的设计稿由客户讨论，再按需求设计出页面的设计图。

2）静态页面制作

美工在设计好各个页面的效果图后，就要制作出HTML页面，以供后台人员将程序整合，静态页面的制作分为以下几个步骤。

（1）观察。首先要对设计图的页面布局、配色有一个整体的认识，而在对设计图达成一个初步了解之后，就会对在HTML页面中的布局有一个规划，根据规划对设计图进行分割输出，以免匆匆切分后又发现在HTML里面无法实现或者效果不好而返工。

（2）拆分。当对设计图和HTML页面有了规划之后，就可以将图样拆分成需要的“素材”，以便在组装页面时使用。一般来说，要从设计图中拆分提取的注意点如下。

① 分离颜色：其中包括3部分配色，页面主辅颜色搭配和基本配色、普通超链接配色和导航栏超链接配色。

② 提取尺寸：按照设计图的尺寸来搭建网页。

③ 分离背景图片及特殊边框：背景图可能是大面积重复的图案，也可以是一张图片，一般和内容没有关系的装饰性图片都考虑制作成背景图，边框的使用方法和背景图片类似，不过根据情况往往需要单独输出。

④ 分离图片：与内容相关的图片进行分离。

（3）组装。组装就是把分割出来的元素按照一定的方法组合成与设计图效果类似的页面，使用CSS布局方式制作网页一般分为构建层结构、插入内容、美化样式表、处理细节和优化样式表。

3）程序开发

程序开发人员可以先行开发功能模块，然后再整合到HTML页面内，也可用制作好的页面进行程序开发，但是为了程序有很好的一致性和亲和力，还是推荐先开发功能模块，然后再整合到页面。

3.后期维护

每一个网站都应该由专业人员定期更新维护。互联网信息只有被快速地反映、准确地报道，才能吸引更多的浏览者。后期维护主要包括如下：服务器及相关软硬件的维护，对可能出现的问题进行评估，制定相应措施；数据库维护，如何有效地利用巨款保证数据的安全是网站维护的重要内容，因此数据库的维护要受到重视；内容的更新、调整等；制定相关网站维护的规定，将网站维护制度化和规范化。很多网站的人气很旺，这肯定与网站内容的定期更新分不开的，也有很多网站由于种种原因数月才更新一次，这样就违背了网站最基本的商业目的。网站不是只销售一件商品，随着时间的推移而编制陈旧，只有不断地融入新的内容，推陈出新，才会具有创造力，发挥网站的商业潜能。

1.2 HTML5简介

1.2.1 HTML5概述

自从HTML5新标准发布以来，就引起了互联网技术的新一轮风暴，作为新一代的Web技术领航者，它受到了各大厂商的追捧，几乎所有的IT大厂商都全力提供对HTML5规范的支持。相对于HTML4.X版本而言，HTML5提供了许多令人激动的新特性，这些新特性为HTML5开创新的Web时代提供了坚固的基石。

超文本标记语言（Hypertext Makeup Language，HTML）是专门在Internet上传输多媒体的一种语言，正是有了HTML语言的出现，现在的互联网世界才显得丰富多彩，从1993年第一个版本的HTML诞生以来，共经历了以下几个重要的发布版本。

（1）HTML（第1版），这是一个非正式的工作版本，于1993年6月作为IEIF（Internet Engineering Task Force）草案发布。

（2）HTML2.0，1995年11月作为RFC1866（Request For Comment）发布，RFC是由IETF发布的备忘录。

（3）HTML3.2，1997年1月14日发布，W3C（World Wide Web Consortium）推荐标准。

（4）HTML4.0，1997年12月18日发布，W3C推荐标准。

（5）HTML4.01，1999年12月24日发布，W3C推荐标准。

（6）Web Application1.0，2004年作为HTML5草案的前身由WHATWG（Web Hypertext Application Technology Working Group，以推动HTML5标准而建立的组织）提出，2007年成为W3C推荐标准。

（7）HTML5草案，2008年1月22日，作为第一份草案正式发布。

（8）HTML5.1，2012年12月17日，作为W3C的首份规范草案发布。

到现在为止，HTML5还处于发展和完善时期，但诸多HTML5中新增加的功能已经让各大软件厂商鼎力支持。从HTML5前身的名称（Web Application）可以看出HTML5的核心，HTML不再只是单纯的网站制作语言，而是作为Web应用程序的开发语言应运而生，为了能够承担Web应用程序所能够完成的功能，在无须安装任何插件的情况下，HTML5中提供了以下激动人心的功能。

（1）Canvas画布元素。Canvas元素的诞生为HTML5能够支持较高性能的动画和游戏提供了可能。Canvas可以直接使用硬件加速完成像素级别的图像渲染，不仅可以完成2D图形渲染，使用WebGL及Shader语言还可以完成较高性能的3D图形渲染。

（2）多媒体元素。HTML5中提供了专门的audio元素和video元素，用于播放网络音频文件和视频文件，有了这两个多媒体元素，将无须再单独安装插件就可以进行影音的播放，减少浏览器的运行程序。

（3）地理信息服务。通过HTML5的地理信息服务，API可以获取客户端所在的经度和纬度，利用这些信息可以向这个坐标附近的区域提供服务，可应用于地理交通信息查询、基于LBS（Location Based Services）的社交游戏等。

（4）本地存储服务。相对于传统的Cookie微量的本地存储技术，HTML5推出了新的本地存储规范，提供了容量更大、更安全和更易于使用的本地存储方案。

（5）WebSocket通信。弥补了传统的Web应用程序缺乏实时通信的功能，使用WebSocket技术可以在Web应用程序中实现类似于传统C/S结构应用程序的通信功能，使得在Web环境中构建实时的通信程序成为了可能。

（6）离线存储。HTML5的离线缓存应用的功能，使客户端即使没有连接到互联网络，也可以在客户端正常使用本地功能。有了这个强大的功能，用户可以更加灵活地控制缓存资源的加载，可以在没有网络信号的情况下使用本地应用。

（7）多线程。HTML5中提供了真正意义上的多线程解决方案，在HTML4的使用过程中，如果客户端采用在后台执行这种耗时方法，则会使页面处于“假死”状态，而在HTML5中可以使用多线程解决类似问题。

（8）设备。为了能够适应多种机型（PC、手机和平板计算机），HTML5提供了Device元素，可以让应用程序访问诸如摄像头、麦克风等硬件设备。

总之，这些新增的特性无疑都是冲着本地应用程序而来，尽管HTML5还处于发展阶段，但已经成为下一代Web开发的标准。

1.2.2 HTML5基本结构

完整的HTML5文件包括标题、段落、列表、表格、绘制的图形及各种嵌入对象，这些对象统称HTML5元素，一个HTML5文件的基本结构如下：

从上面的代码可以看出，在HTML5文件中，所有的标记都是相对应的，开头标记为< >，结束标记为</ >，在这两个标记中间添加内容，这些基本标记的使用方法及详细解释详见后面章节的内容。

1.2.3 HTML5优势

从HTML4.0、XHTML到HTML5，从某种意义上讲，这是HTML描述性标志语言的一种更加规范的过程，因此，HTML5并没有给开发者带来多大的冲击，但HTML5也增加了很多非常实用的新功能，本节介绍HTML5的一些优势。

1.解决了跨浏览器的问题

浏览器是网页的运行环境，因此能适应浏览器的不同类型也是在网页设计时遇到的一个问题。由于各个软件厂商对HTML5标准的支持有所不同，导致同样的网页在不同的浏览器下会有不同的表现，并且HTML5新增的功能在各个浏览器中的支持程度也不一致，浏览器的因素变得比以往传统的网页设计更加重要。为了保证设计出来的网页在不同浏览器上效果一致，HTML5会让问题简单化，具备很好的跨浏览器性能，针对不支持新标签的老式IE浏览器，用户只要简单地添加JavaScript代码，就可以让它们使用新的HTML5元素。

2.增加了多个新特性

HTML语言从1.0至5.0经历了巨大的变化，从单一的文本显示功能到图文并茂的多媒体显示功能，许多特性经过多年的改善，并成为一种非常重要的标记语言，尤其是HTML5，对多媒体的支持功能更强，它具备如下功能：

新增了语义化标签，使文档结构明确；

新的文档对象模型（DOM）；

实现了2D绘图的Canvas对象；

可控媒体播放；

离线存储；

文档标记；

拖放；

跨文档消息；

浏览器历史管理；

MIME类型和协议注册。

对于这些新功能，浏览器在处理HTML5代码错误的时候必须更加灵活，而那些

....