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