HTML+CSS+JavaScript网页设计与布局实用教程 (第2版)

前    言

1. 选题背景

　　近年来随着网络信息技术的广泛应用，越来越多的个人、企业等纷纷建立自己的网站，利用网站来宣传推广自己。如果你想从事网页制作或正在从事网页制作的相关工作，就必须要学习HTML、CSS、JavaScript，哪怕只是简单地了解。因为HTML、CSS、JavaScript是网页制作技术的核心与基础。本书的第1版在2011年出版后，其销售在同类书籍中一直名列前茅，重印十多次。由于此书是在2011年6月出版的，写此书的时间是2010年，已经7年了，HTML 5、CSS 3已经诞生。这次改版重点即增加了HTML 5、CSS 3方面的内容。

2. 主要内容

　　HTML是Internet的基石。本书介绍了HTML的基础知识，包括超文本标记语言HTML入门基础、HTML网页文档结构、网页文本与段落排版、网页图像和多媒体信息组织、用HTML创建超链接和表单、用表格排列网页数据、HTML 5入门基础、HTML 5的结构。接着介绍了CSS入门基础、用CSS设置文本样式、用CSS设计图像和背景、用CSS设置表格和表单样式、用CSS设置链接与导航菜单、CSS DIV布局入门基础、CSS DIV布局方法、CSS 3移动网页开发。还介绍了JavaScript语法基础、JavaScript中的事件、JavaScript中的函数和对象。后采用流行的CSS DIV布局的方法，综合讲述了个人网站、企业网站等制作布局方法。

3. 本书特色

　　与目前市场上的相关书籍比较，本书具有以下几点特色。

* 知识全面、系统。本书内容完全从网页创建的实际角度出发，将HTML、CSS和JavaScript的元素进行归类，每个标记的语法、属性和参数都有完整详细的说明，信息量大，知识结构完善。

* 突出实例操作，体现了以应用为核心，以培养学生的实际动手能力为重点，力求做到学与教并重，科学性与实用性相统一。把知识点融汇于系统的案例实训中，并且结合经典案例进行讲解和拓展。

* 配合Dreamweaver进行讲解。本书以浅显的语言和详细的步骤介绍了在可视化网页软件Dreamweaver中，如何运用HTML、CSS和JavaScript代码来创建网页，使网页制作更加得心应手。

* 增加HTML 5和CSS 3的知识，用案例介绍了HTML5和CSS 3基础知识以及实际运用技术。

* 配图丰富，效果直观。对于每个实例代码，本书都配有相应的效果图，读者无须自己进行编码，也可以看到相应的运行结果或者显示效果。

* 习题强化。每章后提供专门的测试习题，供读者检验所学知识是否牢固掌握。

4. 本书读者对象

* 网页设计与制作人员。

* 网站建设与开发人员。

* 大中专院校相关专业师生。

* 网页制作培训班学员。

* 个人网站爱好者与自学读者。

　　本书是集体的结晶，参加本书编写的人员均为从事网页教学工作的资深教师和具有大型商业网站建设经验的资深网页设计师，他们有着丰富的教学经验和网页设计经验。参加编写的人员包括胡秀娥、徐洪峰、何琛、邓静静、李银修、徐曦、孙鲁杰、何海霞、何秀明、孙素华、吕志彬等。由于时间所限，书中疏漏和不妥之处在所难免，恳请广大读者朋友批评指正。

编  者  

胡秀娥，资深Web技术专家，有10余年网站开发授课经验，是国内较早专业从事Web开发的一线技术人员和培训讲师。一直致力于对HTML、JavaScript、CSS、jQuery、jQUery Mobile等Web开发技术的研究和实践。

《HTML CSS JavaScript网页设计与布局实用教程(第2版)》共21章，引导读者从零开始，一步步掌握网页设计与布局的全过程。《HTML CSS JavaScript网页设计与布局实用教程(第2版)》紧密围绕网页设计师在制作网页过程中实际需要掌握的技术，全面介绍了使用HTML、CSS、JavaScript进行网页设计和制作的各方面内容和技巧。《HTML CSS JavaScript网页设计与布局实用教程(第2版)》不是单纯讲解语法，而是通过一个个鲜活、典型的实战案例来达到学以致用的目的。每个语法都有相应的实例。每章后面又配有综合小实例，同时配有习题，力求达到理论知识与实践操作完美结合的效果。

《HTML CSS JavaScript网页设计与布局实用教程(第2版)》可作为普通高校计算机及相关专业的教材，并可供从事网页设计与制作、网站开发及网页编程等行业的人员参考。

目    录

第1章  网页标记语言HTML入门基础      1

1.1  HTML概述     1

1.2  HTML文件的构成          2

1.2.1  HTML文件结构 2

1.2.2  编写HTML文件的注意事项     3

1.3  怎样编写HTML文件    4

1.3.1  使用记事本文件编写页面         4

1.3.2  使用Dreamweaver编写HTML页面         5

1.4　网页设计与开发的过程        6

1.4.1　明确网站定位    6

1.4.2　收集信息和素材         7

1.4.3　规划栏目结构    7

1.4.4　设计页面方案    8

1.4.5　制作页面    9

1.4.6　实现后台功能    10

1.4.7　网站的测试与发布    11

1.5  本章小结        11

1.6  练习题   12

第2章  HTML网页文档的结构  13

2.1  HTML文档主体标记     13

2.1.1  bgcolor属性        13

2.1.2  background属性         14

2.1.3  text属性     15

2.1.4  设置链接文字属性    16

2.1.5  设置页面边距    19

2.2  head部分的标记  20

2.2.1  title标记     20

2.2.2  定义页面关键字         20

2.2.3  定义页面描述    21

2.2.4  定义编辑工具    22

2.2.5  定义作者信息    22

2.2.6  定义网页文字及语言         23

2.2.7  定义网页的定时跳转         24

2.3  综合实例——创建基本的HTML文件         24

2.4  本章小结        27

2.5  练习题   28

第3章　网页文本与段落排版     29

3.1  插入其他标记        29

3.1.1  空格符号&nbsp 29

3.1.2  特殊符号    30

3.2  设置文字的格式   31

3.2.1  face属性     31

3.2.2  size属性     32

3.2.3  color属性   33

3.2.4  b、strong、em、u标记    34

3.2.5  sup与sub标记  35

3.3  设置段落的格式   36

3.3.1  p标记 36

3.3.2  段落对齐属性align    37

3.3.3  nobr标记    38

3.3.4  br标记         39

3.4  水平线标记   40

3.4.1  hr标记         40

3.4.2  水平线宽度与高度属性：width、size     41

3.4.3  水平线颜色属性color        42

3.4.4  水平线的对齐方式属性align    43

3.4.5  水平线去掉阴影属性noshade 44

3.5  使用marquee设置滚动效果        45

3.5.1  marquee标记及其属性     45

3.5.2  使用marquee插入滚动公告    46

3.6  综合实例——设置页面文本及段落   48

3.7  本章小结        50

3.8  练习题   50

第4章　网页图像和多媒体          51

4.1  网页中常见的图像格式        51

4.2  图像标记及其属性        52

4.2.1  img标记      52

4.2.2  height属性 53

4.2.3  width属性  54

4.2.4  border属性         55

4.2.5  hspace属性         56

4.2.6  vspace属性         57

4.2.7  align属性    57

4.3  添加背景音乐        59

4.3.1  bgsound标记      59

4.3.2  loop属性     60

4.4  综合实例        60

综合实例1——多媒体网页 61

综合实例2——创建图文混合排版网页      63

4.5  本章小结        65

4.6  练习题   66

第5章　用HTML创建超链接和表单 67

5.1  超链接的基本概念        67

5.2  创建超链接   67

5.2.1  超链接标记         68

5.2.2  设置的目标窗口         69

5.3  创建图像的超链接        70

5.3.1  设置图像超链接         70

5.3.2  设置图像热区链接    71

5.4  创建锚点链接        73

5.4.1  创建锚点    73

5.4.2  链接到页面不同位置的锚点链接    74

5.5  表单form       76

5.5.1  action  76

5.5.2  表单名称name  76

5.5.3  传送方法method       77

5.5.4  编码方式enctype       78

5.5.5  目标显示方式target 78

5.6  综合实例        79

综合案例1——插入表单对象      79

综合案例2——给网页添加链接 85

5.7  本章小结        86

5.8  练习题   87

第6章　用表格排列网页数据     88

6.1  表格属性        88

6.1.1  表格的基本标记table、tr、td          88

6.1.2  表格宽度和高度width、height         89

6.1.3  表格标题caption        90

6.1.4  表格的表头th    91

6.1.5  表格对齐方式align    93

6.1.6  边框宽度border         95

6.1.7  表格边框颜色bordercolor         96

6.1.8  单元格间距cellspacing      97

6.1.9  单元格边距cellpadding     98

6.1.10  表格的背景色bgcolor      99

6.1.11  表格的背景图像 background 100

6.2  表格的结构标记   101

6.2.1  设计表头样式thead  101

6.2.2  设计表主体样式tbody       103

6.2.3  设计表尾样式tfoot   104

6.3  综合实例——使用表格排版网页        105

6.4  本章小结        111

6.5  练习题   111

第7章  HTML 5入门基础   113

7.1  HTML 5简介  113

7.2  HTML 5与HTML 4的区别    114