1.1 HTML的基本概念1.1.1 HTML简介HTML的英文全称是Hyper Text Markup Language，直译为超文本标记语言。
它是全球广域网上描述网页内容和外观的标准。
HTML包含了一对打开和关闭的标记，在当中包含有属性和值。
标记描述了每个在网页上的组件，例如文本段落、表格或图像等。
事实上，HTML是一种因特网上较常见的网页制作标注性语言，而并不能算做一种程序设计语言，因为它缺少程序设计语言所应有的特征。
HTML通过IE等浏览器的翻译，将网页中所要呈现的内容、排版展现在用户眼前。
1.1.2 HTML的结构概念一个完整的HTML文件包括标题、段落、列表、表格以及各种嵌入对象，这些对象统称为HTML元素。
在HTML中使用标签来分割并描述这些元素。
实际上可以说，HTML文件就是由各种HTML元素和标签组成的。
一个HTML文件的基本结构如下：<html> 文件开始标记<head> 文件头开始的标记…文件头的内容</head> 文件头结束的标记<body> 文件主体开始的标记…文件主体的内容</body> 文件主体结束的标记</html> 文件结束标记从上面的代码结构可以看出，在HTML文件中，所有的标记都是相对应的，开头标记为< >，结束标记为</ >，在这两个标记中间添加内容。
有了标记作为文件的主干后，HTML文件中便可添加属性、数值、嵌套结构等各种类型的内容了。
1.1.3 HTML的标记既然HTML是超文本标记语言，那么可以想象其构成主要是通过各种标记来标示和排列各对象，通常由尖括号“<”、“>”以及其中所包容的标记元素组成。
例如，<head>与</head>就是一对标记，称为文件的头部标记，用来记录文档的相关信息。
在HTML中，所有的标记都是成对出现的，而结束标记总是在开始标记前增加一个“/”。
标记与标记之间还可以嵌套，也可以放置各种属性。
此外在源文件中，标记是不区分大小写的，因此在HTML源程序中，<Head>与<HEAD>的写法都是正确的，而且其含义是相同的。
HTML定义了3种标记用于描述页面的整体结构。
页面结构标记不影响页面的显示效果，它们是帮助HTML工具对HTML文件进行解释和过滤的。
<html>标记：HTML文档的第 1 个标记，它通知客户端该文档是HTML文档，类似地，结束标记</html>出现在HTML文档的尾部。
<head>标记：出现在文档的起始部分，标明文档的头部信息，一般包括标题和主题信息，其结束标记</head>指明文档标题部分的结束。
<body>标记：用来指明文档的主体区域，该部分通常包容其他字符串，例如标题、段落、列表等。
读者可以把HTML文档的主体区域简单地理解成标题以外的所有部分，其结束标记</body>指明主体区域的结尾。
1.2 HTML的发展历史1969年前后，托德·尼尔逊提出超文本的概念，IBM公司的Charkes Goklfard等设计出了通用标记语言——GML。
到1978年，美国国家标准局一工作组对GML进行了规范，推出了命名为SGML的通用标记语言。
1980年，ISO正式确定SGML为描述各种电子文件结构及内容的国际通用标准。
1990年，Tim Berners-Lee将他设计的初级浏览和编辑系统在网上合二为一，创建了一种快速小型超文本语言来为他的想法服务。
他设计了数十种乃至数百种未来使用的超文本格式，并想象智能客户代理通过服务器在网上进行轻松谈判并翻译文件。
它同Macintosh的Claris XTND系统极为相似，不同的是它可以在任何平台和浏览器上运行。
最初的HTML语言以文本格式为基础，可以用任何编辑器和文字处理器来为网络创建或转换文本，仅有不多的几个标签。
网络从此迅猛发展，人们开始在网上发布信息。
很快人们就开始琢磨在网上放置图像和图标。
1993年，NCSA推出了Mosaic，也就是第一个图文浏览器，从此Web开始迅速地发展起来。
HTML语言也不断产生新型、功能强大且生动有趣的标签形式，例如<background>、<frame>、<font>和<blink>等。
但是此时，出现了许多不同的HTML版本，而只有设计者和用户共有的HTML部分才可以正确显示。
因此在这段时间，W3C都在激烈争论名叫HTML 3的新技术，该文件概括了所有全新的特性，但没有任何技术支持。
出于这种混乱局面的考虑，在1996年，W3C的HTML Working Group组织编写了新的规范，从此HTML 3.2开始发展，它更接近于现实的目标，即提供给内容商和浏览器发展商在研究工作中一个公允的参考标准。
到现在为止，HTML已经发展到了比较成熟的HTML 4版本，在这个版本下的语言中，规范更加统一，浏览器之间的兼容性也更加完善。
1.3 网页设计原则在设计网页时，一般要遵循以下原则：结构性：在设计网页时，须注意网页的标记结构、脚本语言结构、使用条列的方式、善用分段及空白字符，让整体结构看起来整齐美观，易于纠错及理解，在发生问题时，才能很快找到错误所在处。
通用性：考虑标记语言能否适用于各种浏览器，尽量以大多数浏览器都支持的标记语言为主，倘若有不得已的情况，一定要特别加以注明，并找出替代性的方案。
遇有可以注解或说明的标记或组件属性，应该尽可能地注明其内容。
差异性：了解各种浏览器的差异，力求输出的结果尽可能一致。
习惯性：了解用户使用窗口与浏览时的习惯，如组件摆放的顺序，习惯用鼠标、Tab键、Esc键及Enter键等操作习惯，或因网页下载时间太长，无法让用户耐心等候等因素，都是设计网页时必须考虑的因素。
适用性：有些组件会因用户的窗口环境或安装的程序而异，可能在作者的计算机里可以完整地执行，而在其他用户的计算机上却只能下载文档，所以在设计完毕后，一定要多试几组不同平台的计算机，以确保网页的可行性。
反复性：反复检查是否错误，是否有需要注意文字大小写之处，以及名称是否正确。
1.4 Dreamweaver简介使用Dreamweaver，设计师可以随心所欲地编写代码、设计网站网页以及进行高级开发。
无论是喜欢手写HTML代码还是习惯于可视化环境，Dreamweaver都能提供方便快捷、功能强大的工具，使用Dreamweaver将是一种全新的体验。
在易用、创新、规范等优点的基础上，Dreamweaver还拥有更先进的网页布局和设计环境，以及更为强大的代码编辑功能等卓越特性。
Dreamweaver MX 2004的操作界面主要由以下几个部分组成：标题栏、菜单栏、插入栏、文档工具栏、文档窗口、属性面板以及多个浮动面板，如图1-1所示。
图1-1 Dreamweaver MX 2004的界面布局1.4.1 标题栏标题栏主要包括Dreamweaver标记、应用程序的名称、当前正在编辑文档的标题和名称等信息，还包括最小化按钮、最大化按钮以及关闭按钮。
单击Dreamweaver标记可以打开系统菜单。
在Dreamweaver标记后面显示程序名称，之后的中括号“[ ]”内是当前打开的文档的标题，小括号“（）”内是该文件的名称。
每次新建一个文档，Dreamweaver都会自动将文档标题命名为“无标题文档”，文件名定义为Untitled-x。
其中，文档的标题和文档的文件名称是不同的概念。
文件的标题通常在文档中的<title>和</title>标记中，是在用浏览器打开文档时显示在浏览器窗口的标题栏上的名称，而文件的名称则是文档存储在磁盘上的文件名。
1.4.2 菜单栏菜单栏位于标题栏的下方，它包括文件、编辑、查看、插入、修改、文本、命令、站点、窗口和帮助10个菜单项，如图1-2所示。
图1-2 菜单栏下面简单介绍一下Dreamweaver中的各个菜单项。
“文件”菜单：包含文件操作的标准菜单项，例如新建、打开、保存等。
“文件”菜单还包含各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”。
“编辑”菜单：包含文件编辑的标准菜单项，例如剪切、复制和粘贴等。
“编辑”菜单还包括选择和搜索命令，即“选择父标签”与“查找和替换”，并且提供对键盘快捷键编辑器、标签库编辑器和参数选择编辑器的访问。
“查看”菜单：用于选择文档的不同视图（设计视图和代码视图），并且可以用于显示或隐藏不同类型的页面元素和Dreamweaver工具。
“插入”菜单：提供插入面板的各项，用于将各种对象插入文档。
“修改”菜单：用于更改选定页面元素或项的属性。
使用此菜单，可以编辑标签属性、更改表格和表格元素，并且为库和模板执行不同的操作。
“文本”菜单：用于设置文本的各种格式。
“命令”菜单：提供对各种命令的访问，包括根据格式参数选择设置代码格式的命令、创建相册的命令，以及使用Macromedia Fireworks优化图像的命令。
“站点”菜单：包含站点操作菜单项，这些菜单项可用于创建、打开和编辑站点，以及管理当前站点中的文件。
“窗口”菜单：提供对Dreamweaver中所有面板、检查器和窗口的访问。
“帮助”菜单：提供对Dreamweaver帮助文档的访问，包括用于使用Dreamweaver以及创建对Dreamweaver 的扩展的帮助系统，并且包括各种语言的参考材料。
1.4.3 插入栏对于一些经常使用的操作，从菜单项中选择不是很方便。
插入栏是Dreamweaver提供的一些菜单命令的快捷方法，其按钮一般都和菜单中的命令相对应，运用插入栏可以更方便快捷。
插入栏集成了多种网页元素，包括图像、文字等，如图1-3所示。
图1-3 插入栏单击插入栏左边的向下箭头，可以选择不同的工具组，包括布局、表单、文本等，如图1-4所示。
如果选择“显示为制表符”命令，则以传统的方式显示插入栏，如图1-5所示。
图1-4 工具组菜单图1-5 传统方式的插入栏“收藏夹”是用户自定义的组，在这里用户可以创建自己常用的按钮。
1.4.4 文档工具栏“文档”工具栏包含按钮和弹出式菜单，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）、各种查看选项和一些常用操作（如浏览器中预览），如图1-6所示。
图1-6 文档工具栏要显示文档工具栏，可以选择“查看”|“工具栏”|“文档”命令。
文档工具栏中各个图标按钮的功能分别如下：（显示代码视图）：显示代码窗口。
（显示代码和设计视图）：显示代码和设计窗口。
（显示设计视图）：显示设计窗口。