·2·
HTML网页设计参考手册
HTML的基本概念
HTML的发展历史
网页设计原则
Dreamweaver简介
在Dreamweaver中直接
编写HTML
网页制作技术日新月异，但都是以HTML为基础的。HTML是浏览器识别网页的标记语言，可以说，没有它就没有丰富多彩的网页。本章首先让读者对HTML有一个初步的认识，了解其概念、发展历史以及编写方法。
第1章HTML入门·3·
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文件进行解释和过滤的。
·4·
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  网页设计原则
在设计网页时，一般要遵循以下原则：
结构性：在设计网页时，须注意网页的标记结构、脚本语言结构、使用条列的方式、善用分段及空白字符，让整体结构看起来整齐美观，易于纠错及理解，在发生问题时，才能很快
到错误所在处。
第1章HTML入门·5·
通用性：考虑标记语言能否适用于各种浏览器，尽量以大多数浏览器都支持的标记语言为主，倘若有不得已的情况，一定要特别加以注明，并出替代性的方案。遇有可以注解或说明的
标记或组件属性，应该尽可能地注明其内容。
差异性：了解各种浏览器的差异，力求输出的结果尽可能一致。
习惯性：了解用户使用窗口与浏览时的习惯，如组件摆放的顺序，习惯用鼠标、Tab键、Esc 键及Enter键等操作习惯，或因网页下载时间太长，无法让用户耐心等候等因素，都是设计网
页时必须考虑的因素。
适用性：有些组件会因用户的窗口环境或安装的程序而异，可能在作者的计算机里可以完整地执行，而在其他用户的计算机上却只能下载文档，所以在设计完毕后，一定要多试几组不
同平台的计算机，以确保网页的可行性。
反复性：反复检查是否错误，是否有需要注意文字大小写之处，以及名称是否正确。
网页设计html代码翻译
1.4  Dreamweaver简介
使用Dreamweaver，设计师可以随心所欲地编写代码、设计网站网页以及进行高级开发。无论是喜欢手写HTML代码还是习惯于可视化环境，Dreamweaver都能提供方便快捷、功能强大的工具，使
用Dreamweaver将是一种全新的体验。在易用、创新、规范等优点的基础上，Dreamweaver
还拥有更
先进的网页布局和设计环境，以及更为强大的代码编辑功能等卓越特性。
Dreamweaver MX 2004的操作界面主要由以下几个部分组成：标题栏、菜单栏、插入栏、文档工具栏、文档窗口、属性面板以及多个浮动面板，如图1-1所示。
图1-1  Dreamweaver MX 2004的界面布局
1.4.1  标题栏
标题栏主要包括Dreamweaver标记、应用程序的名称、当前正在编辑文档的标题和名称等信息，还包括最小化按钮、最大化按钮以及关闭按钮。
单击Dreamweaver标记可以打开系统菜单。在Dreamweaver标记后面显示程序名称，之后的中
·6·
HTML网页设计参考手册
括号“[ ]”内是当前打开的文档的标题，小括号“（）”内是该文件的名称。每次新建一个文档，Dreamwe
aver都会自动将文档标题命名为“无标题文档”，文件名定义为Untitled-x。其中，文档的标题和文档的文件名称是不同的概念。文件的标题通常在文档中的<title>和</title>标记中，是在用浏览器打开文档时显示在浏览器窗口的标题栏上的名称，而文件的名称则是文档存储在磁盘上的文件名。1.4.2  菜单栏
菜单栏位于标题栏的下方，它包括文件、编辑、查看、插入、修改、文本、命令、站点、窗口和个菜单项，如图1-2所示。
帮助10
下面简单介绍一下Dreamweaver中的各个菜单项。
“文件”菜单：包含文件操作的标准菜单项，例如新建、打开、保存等。“文件”菜单还包含各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”。
“编辑”菜单：包含文件编辑的标准菜单项，例如剪切、复制和粘贴等。“编辑”菜单还包括选择和搜索命令，即“选择父标签”与“查和替换”，并且提供对键盘快捷键编辑器、标签库编辑器和参数选择编辑器的访问。
“查看”菜单：用于选择文档的不同视图（设计视图和代码视图），并且可以用于显示或隐藏不同类型的页面元素和Dreamweaver工具。
“插入”菜单：提供插入面板的各项，用于将各种对象插入文档。
“修改”菜单：用于更改选定页面元素或项的属性。使用此菜单，可以编辑标签属性、更改表格和表格元素，并且为库和模板执行不同的操作。
“文本”菜单：用于设置文本的各种格式。
“命令”菜单：提供对各种命令的访问，包括根据格式参数选择设置代码格式的命令、创建相册的命令，以及使用Macromedia Fireworks优化图像的命令。
“站点”菜单：包含站点操作菜单项，这些菜单项可用于创建、打开和编辑站点，以及管理当前站点中的文件。
“窗口”菜单：提供对Dreamweaver中所有面板、检查器和窗口的访问。
“帮助”菜单：提供对Dreamweaver帮助文档的访问，包括用于使用Dreamweaver以及创建对Dreamweaver 的扩展的帮助系统，并且包括各种语言的参考材料。
1.4.3  插入栏
对于一些经常使用的操作，从菜单项中选择不是很方便。插入栏是Dreamweaver提供的一些菜单命令的快捷方法，其按钮一般都和菜单中的命令相对应，运用插入栏可以更方便快捷。插入栏集成了多种网页元素，包括图像、文字等，如图1-3所示。
第1章
HTML 入门  ·7·
图1-3  插入栏
单击插入栏左边的向下箭头，可以选择不同的工具组，
包括布局、表单、文本等，
如图1-4所示。如果选择“显示为制表符”命令，则以传统的方式显示插入栏，如图1-5所示。
图1-4  工具组菜单                            图1-5  传统方式的插入栏 “收藏夹”是用户自定义的组，在这里用户可以创建自己常用的按钮。
1.4.4  文档工具栏
“文档”工具栏包含按钮和弹出式菜单，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）、各种查看选项和一些常用操作（如浏览器中预览），如图1-6所示。
图1-6  文档工具栏
要显示文档工具栏，可以选择“查看”|“工具栏”|“文档”命令。文档工具栏中各个图标按钮的功能分别如下：  （显示代码视图）：显示代码窗口。  （显示代码和设计视图）：显示代码和设计窗口。
（显示设计视图）：显示设计窗口。  （活动数据视图）：用来查看实时数据视图。  （标题）：用来设置或修改文档的标题。
（文件管理）：单击该按钮，通过这里来实现消除只读属性、获取、取出、上传、存回、
撤销取出、设计注意以及站点定位等功能。
（在浏览器中预览/调试）：单击该按钮在定义好的浏览器中预览或调试，或是编辑浏览
器列表。
（刷新）：单击该按钮，可以刷新设计显示中通过代码更改的部分。
（参考）：单击该按钮来启动代码属性设置面板。
（代码导航）：单击该按钮来移动文档里定义的JavaScript 函数，设置或删除代码里的
断点。
（视图选项）（代码视图模式）：单击代码视图模式下的选项菜单按钮，可以选择自动换
行、行数、高亮显示无效HTML 、语法颜、自动缩进等选项，以及在顶端查看设计视图。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。