HTML5+CSS3+JavaScript网页设计案例课堂（第2版）

前    言

　　“网站开发案例课堂”系列图书是专门为办公技能和网页设计初学者量身定制的一套学习用书。整套书涵盖高效办公、网站开发、数据库设计等方面。整套书具有以下几个特点。

前沿科技

　　无论是网站建设、数据库设计还是HTML 5、CSS 3，我们都精选较为前沿或者用户群的领域推进，帮助大家认识和了解动态。

权威的作者团队

　　组织国家重点实验室和资深应用专家联手编著该套图书，融合丰富的教学经验与优秀的管理理念。

学习型案例设计

　　以技术的实际应用过程为主线，全程采用图解和同步多媒体结合的教学方式，生动、直观、全面地剖析使用过程中的各种应用技能，降低难度以提升学习效率。

为什么要写这样一本书

　　目前，HTML 5、CSS 3和JavaScript是网页制作和设计的黄金搭档。特别是HTML 5的出现，大大减轻了前端开发者的工作量，降低了开发成本。目前学习和关注的人越来越多，而很多网页制作和设计的初学者都苦于找不到一本通俗易懂、容易入门和案例实用的参考书。通过本书的案例实训，读者可以很快地上手流行的工具，提高职业化能力，从而帮助解决公司与学生的双重需求问题。

本书特色

零基础、入门级的讲解

　　无论您是否从事计算机相关行业，是否接触过网页制作和设计，都能从本书中找到起点。

超多、实用、专业的范例和项目

　　本书在编排上紧密结合深入学习网页制作技术的先后过程，从HTML 5的基本概念开始，带领大家逐步深入地学习各种应用技巧，侧重实战技能，使用简单易懂的实际案例进行分析和操作指导，让读者读起来简明轻松，操作起来有章可循。

随时检测自己的学习成果

　　每章首页中，均提供了学习目标，以指导读者重点学习及学后检查。

　　大部分章后的“跟我学上机”板块，均根据本章内容精选而成，读者可以随时检测自己的学习成果和实战能力，做到融会贯通。

细致入微、贴心提示

　　本书在讲解过程中，在各章中使用了“注意”“提示”“技巧”等小贴士，使读者在学习过程中更清楚地了解相关操作、理解相关概念，并轻松掌握各种操作技巧。

专业创作团队和技术支持

　　本书由千谷高新教育中心编著和提供技术支持。

　　您在学习过程中遇到任何问题，可加入QQ群(案例课堂VIP)——451102631进行提问，专家人员会在线答疑。

超值资源大放送

全程同步教学录像

　　涵盖本书所有知识点，详细讲解每个实例及项目的过程及技术关键点。比看书更轻松地掌握书中所有的网页制作和设计知识，而且扩展的讲解部分使您得到比书中更多的收获。

超多容量王牌资源

　　赠送大量王牌资源，包括实例源代码、教学幻灯片、本书精品教学视频、88个实用类网页模板、12部网页开发参考手册、HTML 5标签速查手册、精选的JavaScript实例、CSS 3属性速查表、JavaScript函数速查手册、CSS DIV布局赏析案例、精彩网站配色方案赏析、网页样式与布局案例赏析、Web前端工程师常见面试题等。读者可以通过QQ群(案例课堂VIP)——451102631获取赠送资源，也可以扫描二维码，下载本书资源。

读者对象

没有任何网页设计基础的初学者。

有一定的HTML 5和CSS 3基础，想精通网页制作和设计的人员。

有一定的HTML 5和CSS 3基础，没有项目经验的人员。

正在进行毕业设计的学生。

大专院校及培训学校的老师和学生。

创作团队

　　本书由刘春茂编著，参加编写的人员还有刘玉萍、张金伟、蒲娟、周佳、付红、李园、郭广新、侯永岗、王攀登、刘海松、孙若淞、王月娇、包慧利、陈伟光、胡同夫、王伟、展娜娜、李琪、梁云梁和周浩浩。在编写过程中，我们竭尽所能地将好的讲解呈现给读者，但也难免有疏漏和不妥之处，敬请不吝指正。若您在学习中遇到困难或疑问，或有何建议，可写信至信箱357975357@qq.com。

　　                                                     编  者  

《HTML 5 CSS 3 JavaScript网页设计案例课堂(第2版)》以零基础讲解为宗旨，用实例引导读者深入学习，采取【HTML 5网页设计→CSS 3美化网页→JavaScript动态特效→综合案例实战】的讲解模式，深入浅出地讲解CSS DIV的各项技术及实战技能。

《HTML 5 CSS 3 JavaScript网页设计案例课堂(第2版)》第I篇主要内容包括初识HTML5、HTML 5网页的文档结构、HTML 5网页中的文本和图像、用HTML 5建立超链接、用HTML 5创建表格、用HTML 5创建表单、用HTML 5绘制图形、HTML 5中的音频和视频等；第II篇主要内容包括CSS 3概述与基本语法、用CSS 3美化网页字体与段落、用CSS 3美化网页图片、用CSS 3美化网页背景与边框、用CSS 3美化超级链接和鼠标、用CSS 3美化表格和表单的样式、用CSS 3美化网页菜单、用滤镜美化网页元素、CSS 3中的动画效果等；第III篇主要内容包括JavaScript编程基本知识、JavaScript的程序控制结构与语句、JavaScript中的函数、JavaScript对象编程、JavaScript的内置对象、HTML 5、CSS 3和JavaScript的综合应用等；第IV篇主要内容包括制作企业门户类网页、制作在线购物类网页、移动设备类型网站开发。

《HTML 5 CSS 3 JavaScript网页设计案例课堂(第2版)》适合任何想学习网页前台网页设计与布局的人员，无论您是否从事计算机相关行业，是否接触过HTML 5、CSS 3和JavaScript，通过学习均可快速掌握HTML 5 CSS 3 JavaScript的设计方法和技巧。

目    录

第I篇  HTML 5网页设计

第1章  初识HTML 5   3

1.1 
HTML 5的基本概念      4

1.1.1 
HTML的发展历程      4

1.1.2 
什么是HTML 5   4

1.1.3 
HTML 5文件的基本结构   5

1.2 
HTML 5的优势      5

1.2.1 
解决了跨浏览器问题         5

1.2.2 
新增了多个新特性    5

1.2.3 
用户优先的原则         6

1.2.4 
化繁为简的优势         7

1.3 
HTML 5文件的编写方法      7

1.3.1 
使用记事本手工编写HTML 5   7

1.3.2 
使用Dreamweaver CC编写

HTML文件      8

1.4  使用浏览器查看HTML 5文件     12

1.4.1 
查看页面效果    12

1.4.2 
查看源文件         13

1.5  疑难解惑        13

第2章  HTML 5网页的文档结构        15

2.1 
HTML 5文件的基本结构      16

2.1.1 
HTML 5页面的整体结构   16

2.1.2 
HTML 5新增的结构标记   16

2.2 
HTML 5基本标记详解  17

2.2.1 
文档类型说明    17

2.2.2 
HTML标记 17

2.2.3  头标记head        18

2.2.4 
网页的主体标记body        20

2.2.5 
页面注释标记<!-- --> 21

2.3 
HTML 5语法的变化      22

2.3.1 
标签不再区分大小写         22

2.3.2 
允许属性值不使用引号    22

2.3.3 
允许部分属性的属性值省略    23

2.4  综合案例——符合W3C标准的

HTML 5网页   23

2.5  跟我学上机——简单的HTML 5

网页         25

2.6  疑难解惑        26

第3章  HTML 5网页中的文本和图像        27

3.1  在网页中添加文本        28

3.1.1 
普通文本的添加         28

3.1.2 
特殊字符文本的添加         28

3.1.3 
使用HTML 5标记添加特殊

文本         30

3.2  文本排版        32

3.2.1 
换行标记<br>     32

3.2.2 
段落标记<p>       32

3.2.3 
标题标记<h1>~<h6>  33

3.3  文字列表        34

3.3.1 
建立无序列表<ul>      34

3.3.2 
建立有序列表<ol>      36

3.3.3 
建立不同类型的无序列表         37

3.3.4 
建立不同类型的有序列表         38

3.3.5 
建立嵌套列表    38

3.3.6 
自定义列表         39

3.4  网页中的图像<img>      40

3.4.1 
在网页中插入图像    40

3.4.2 
设置图像的宽度和高度    42

3.4.3 
设置图像的提示文字         43

3.4.4 
将图片设置为网页背景    44

3.4.5 
排列图像    45

3.5  综合案例——图文并茂的房屋装饰装修

网页         45

3.6  跟我学上机——在线购物网站的产品

展示效果         47

3.7  疑难解惑        48

第4章  用HTML 5建立超链接  49

4.1 
URL的概念    50

4.1.1 
URL的格式          50

4.1.2 
URL的类型          50

4.2  超链接标记<a>      51

4.2.1 
设置文本和图片的超链接         51

4.2.2 
创建指向不同目标类型的

超链接     52

4.2.3 
设置以新窗口显示超链接

页面         54

4.2.4 
链接到同一页面的不同位置    55

4.3  创建热点区域        56

4.4  创建浮动框架        58

4.5  综合案例——用Dreamweaver精确

定位热点区域         59

4.6  跟我学上机——创建热点区域   61

4.7  疑难解惑        62

第5章  用HTML 5创建表格       63

5.1  表格的基本结构   64

5.2  创建表格        65

5.2.1 
创建普通表格    65

5.2.2 
创建一个带有标题的表格         66

5.3  编辑表格        67

5.3.1 
定义表格的边框类型         67

5.3.2 
定义表格的表头         68

5.3.3 
设置表格背景    69

5.3.4 
设置单元格的背景    71

5.3.5 
合并单元格         72

5.3.6 
排列单元格中的内容         76

5.3.7 
设置单元格的行高与列宽         77

5.4  完整的表格标记   78

5.5  综合案例——制作计算机报价表        79

5.6  跟我学上机——制作学生成绩表        82

5.7  疑难解惑