第1篇 HTML基础

第1章 网页基础

本章首先介绍关于网页的基本知识，包括了解什么是网页、网站，网页的版块结构，网页包含哪些基本的要素等一系列关于网页的知识。下面将进行详细介绍。

1.1 了解网站、网页

1.1.1 网站

平时常见的网站有新浪、搜狐、网易等，还有一些个人网站，这些网站是存放网络服务器上的完整信息的集合体。网站中包含一个或多个网页，这些网页通过一定的链接方式链接在一起，成为一个整体，这个整体就是用来描述或达到某种宣传的效果，如图1-1所示。

1.1.2 网页

网页可以看成是一个文件，文件里有文字、图像、音乐、视频等。网页是网站的一个组成部分，如新浪、搜狐、网易等。当访问它们时，最直接的就是网页，通过多个网页组成了一整个的站点，就是所说的网站。

网页的主要表现形式为：动态网页和静态网页。

• 动态网页的客户端与服务器端发生交互，因为浏览器可以和服务器数据库之间进行实时的数据交流，并不是添加了动画效果。动态网页可以实现很多功能，如用户注册、登录、用户管理，搜索，查询等。
• 静态网页的客户端和服务器端是不发生交互的，因为浏览器和服务器数据库之间并不能进行数据的交流。访问者只能被动地浏览网站建设者设置的网页内容。

1.1.3 网页的版块结构

大家平时看到设计或制作的网页会有千千万万的差别，但是“万变不离其宗”，制作的网页通常是由几大版块组成的。

1.网站logo

网站logo其实就是一个图标或注册商标。它能体现一个网站的特色与内涵，通常把网站logo放在网站的左上角或其他醒目的位置。企业网站的网站logo常常使用企业的标志或注册商标。一个优秀的网站logo可以给浏览者留下很深的印象，并能为企业起到宣传的作用。

2.导航条

导航条是网页中的重要组成部分，通过导航条可以很清楚地了解该网页的内容。导航条的形式有多种，如文本导航条、图像导航条、动画导航条等。有的导航条使用特殊的技术设置为下拉菜单的特色。

3.网站banner

网站banner通常是网页中的广告，在网页中，大部分网页将banner放置在与导航条相邻处，或者其他醒目的地方引起浏览者的注意，如图1-2所示。

4.内容版块

网页中的内容版块是整个页面的组成部分。网页设计者通过页面的要求来设计不同的版块，每个版块有一个标题，且每个内容版块主要显示不同的文本信息。

5.版尾或版权版块

版尾就是页面最底端的版块，这里可以放置网页的版权信息，以及网页设计者及其他参与者的联系方式等。

还有的网站将网站的友情链接或其他导航条的信息也放在版尾处，如图1-3所示。

1.2 网页的基本构成元素

以上介绍了整体的网站及网页的相关知识点，具体到细节部分，网页包括哪些元素呢？这些元素是不是有一个规范去设计它……带着一系列的问题开始下面的旅程。

1.文本

网页中的信息大部分是以文本为主，但是和图片相比，文字虽然看上去很枯燥，也不能很快地引起读者的兴趣，但文字却能更准确地表达出信息的含义和内容。

2.图片

在网页中添加的图片经常用到的格式有BMP、GIF、JPEG、PNG等，其中，使用最广泛的是GIF和JPEG（JPEG文件的扩展名为.jpg）格式。

3.超链接

超链接是指从一个网页链接到另一个或多个网页，或者链接到图片、电子邮件地址、文件，甚至是一个应用程序。超链接在本质上属于一个网页的一部分，允许用户同其他网页或站点之间进行连接。

4.动画

在网页中为了更吸引读者的注意，很多的网站广告都做成了动画的效果。网页中的动画主要有两种形式：GIF动画和Flash动画。其中，GIF动画最多有256种颜色，主要用于简单的动画和图标。而Flash是一种交互式的动画设计，Flash把音乐、声音、动画等结合在一起，设计出高效的网页动态效果。

5.声音和视频

在网页中附加背景音乐，或添加多媒体视频，将会更加引起读者的兴趣。其中，声音文件的格式有多种，如MIDI、WAV、MP3、AIF、WMA。但是很多的浏览器不需要安装插件也能播放MIDI、WAV、AIF格式的文件，像MP3、MP4、RM等格式的声音文件就需要专门的浏览器来播放。

6.表格

在网页的设计中，常常会用布局来设计网页，让网页更有层次感。而表格就是用来控制网页的布局方式之一。

用表格来控制网页中信息的布局方式主要有两种：使用行和列的形式来布局网页；使用表格来精确地控制各种网页元素在网页中出现的位置。

7.表单

网页中的表单常常用来接收用户在浏览器端的输入，然后把这些信息发到网页设计者设计的目标端，这个目标可以是文本文件、Web页、电子邮件等。表单主要用来收集客户端提供的相关信息，如用户注册、登录、验证等，使网页具有交互的功能。

1.3 设计网页常用的软件

设计网页常用的软件有文本编辑器、Dreamweaver网页设计软件、Flash网页设计软件、Fireworks网页图像处理软件等，只要掌握其中的一种软件就可以设计网页了。别小看这些软件，其实像文本编辑器就可以制作出一个网页来，不信？！请看下面的讲解。

1.文本编辑器

编写HTML代码在记事本中就可以进行，其实不是只有在记事本中能写HTML代码，在写字板、Word中也可以编写HTML代码，但保存时扩展名必须是.html（或.htm），如图1-4所示。

2.Dreamweaver网页设计软件

Dreamweaver网页设计软件是使用最广泛的网页设计工具之一，它是一个所见即所得的网页编辑器，支持最新的动态HTML和CSS标准。采用了多种新技术，能够高效地创建富有动态的网页效果，使网页的设计更加简单、方便，如图1-5所示。本书就是以Dreamweaver为主来介绍设计网页的相关知识点，下面将会详细介绍该软件的使用。

3.Flash动画设计软件

Flash动画设计软件是Macromedia公司开发的一款优秀的网页动画软件，它从简单的动画设计到复杂的交互式Web应用程序，可以让用户创建更多的作品，使Flash应用程序更加丰富多彩，如图1-6所示。

4.Fireworks网页图像处理软件

Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，使用它可以轻松地制作出尺寸较小的图像、动画。在Web应用方面，Fireworks是最早提供切片功能的图像处理软件，如图1-7所示。

1.4 网页设计原则

在设计网页时，一般要遵循以下原则。

• 结构性：在设计网页时，须注意网页的标记结构，脚本语言结构，使用条列的方式，善用分段及空白字符，让整体结构看起来整齐美观，易于纠错及理解，在发生问题时，才能很快找到错误所在处。
• 通用性：考虑标记语言能否适用于各种浏览器，尽量以大多数浏览器都支持的标记语言为主，倘若有不得已的情况，一定要特别加以注明，并找出替代性的方案。遇到有可以注解或说明的标记或组件属性，应该尽可能地注明其内容。
• 差异性：多了解各种浏览器的差异之处，力求输出的结果尽可能一致。
• 习惯性：了解用户使用窗口与浏览时的习惯，如组件摆放的顺序，习惯用鼠标、Tab键、Esc键及Enter键等，或因网页下载时间太长，无法让用户耐心等候等因素，都是设计网页必须考虑的因素。
• 适用性：有些组件会因用户的窗口环境或安装的程序而异，可能在笔者的计算机里可以完整地执行，而在其他用户的计算机上却只能下载文档。所以在设计完毕后，一定要多试几组不同平台的计算机，以确保网页的可行性。
• 反复性：反复检查是否错误，是否有需注意文字大小写之处，以及名称是否正确。

1.5 Dreamweaver简介

使用Dreamweaver，设计师可以随心所欲地编写代码、设计网站网页及进行高级开发。无论是喜欢手写HTML代码还是习惯于可视化环境，Dreamweaver都能提供方便快捷、功能强大的工具，使用Dreamweaver将是一种全新的体验。在易用、创新、规范等优点的基础上，Dreamweaver还拥有更先进的网页布局和设计环境及更为强大的代码编辑功能等卓越特性。

Dreamweaver MX 2004的操作界面主要由以下几部分组成：标题栏、菜单栏、插入栏、文档工具栏、属性面板及其他面板，如图1-8所示。

1.5.1 标题栏

标题栏主要包括Dreamweaver标记、应用程序的名称、当前正在编辑文档的标题和名称等信息，还包括最小化按钮、最大化按钮及关闭按钮。

单击Dreamweaver标记打开系统菜单。在Dreamweaver标记后面显示程序名称，之后的中括号“[]”内是当前打开的文档的标题，小括号“（）”内是该文件的名称。每次新建一个文档，Dreamweaver都会自动将文档标题命名为“无标题文档”，文件名定义为Untitled-x。其中，文档的标题和文档的文件名称是不同的概念。文件的标题通常在文档的<title>和</title>标签中，是在用浏览器打开文档时显示在浏览器窗口的标题栏上的名称，而文件的名称则是文档存储在磁盘上的文件名。

1.5.2 菜单栏

菜单栏位于标题栏的下方，包括“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“命令”、“站点”、“窗口”、“帮助”10个菜单项，如图1-9所示。

下面简单介绍Dreamweaver中的各个菜单项。

• “文件”菜单：包含文件操作的标准菜单项，如“新建”、“打开”、“保存”等。“文件”菜单还包含各种其他命令，用于查看当前文档或对当前文档执行操作，如“在浏览器中预览”和“打印代码”。
• “编辑”菜单：包含文件编辑的标准菜单项，如“剪切”、“拷贝”和“粘贴”等。“编辑”菜单还包括选择和搜索命令“选择父标签”及“查找和替换”，并且提供对键盘快捷键编辑器、标签库编辑器和参数选择编辑器的访问。
• “查看”菜单：用于选择文档的不同视图（设计视图和代码视图），并且可以用于显示或隐藏不同类型的页面元素和Dreamweaver工具。
• “插入”菜单：提供插入面板的各项，用于将各种对象插入文档。
• “修改”菜单：用于更改选定页面元素或项的属性。使用该菜单，可以编辑标签属性，更改表格和表格元素，并且为库和模板执行不同的操作。
• “文本”菜单：用于设置文本的各种格式。
• “命令”菜单：提供对各种命令的访问，包括根据格式参数选择设置代码格式的命令、创建相册的命令，以及使用Macromedia Fireworks优化图像的命令。
• “站点”菜单：包含站点操作菜单项，这些菜单项可用于创建、打开和编辑站点，以及管理当前站点中的文件。
• “窗口”菜单：提供对Dreamweaver中的所有面板、检查器和窗口的访问。
• “帮助”菜单：提供对Dreamweaver帮助文档的访问，包括用于使用Dreamweaver及创建对Dreamweaver的扩展的帮助系统，并且包括各种语言的参考材料。

1.5.3 插入栏

对于一些经常使用的操作，如从菜单项中选择还是很不方便的。插入栏是Dreamweaver提供的一些菜单命令的快捷方法，其按钮一般都和菜单中的命令相对应，运用插入栏可以更方便快捷。插入栏集成了多种网页元素，包括图像、文字等，如图1-10所示。

单击插入栏左边的向下箭头，选择不同的工具组，包括布局、表单、文本等，如图1-11所示。如果选中“显示为制表符”选项，则以传统的方式显示插入栏，如图1-12所示。

“收藏夹”是用户自定义的组，在这里用户可以创建自己常用的按钮。

1.5.4 文档工具栏

文档工具栏包含按钮和弹出式菜单，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）、各种查看选项和一些常用操作（如浏览器中预览），如图1-13所示。

要显示文档工具栏，选择“查看”|“工具栏”|“文档”菜单命令。文档工具栏中各个图标按钮的功能分别如下所示。

• “显示代码视图”：显示代码窗口。
• “显示代码和设计视图”：显示代码和设计窗口。
• “显示设计视图”：显示设计窗口。
• “活动数据视图”：用来查看实时数据视图。
• “标题”：用来设置或修改文档的标题。
• “文件管理”：单击该按钮来实现消除只读属性、获取、取出、上传、存回、撤销取出、设计注意及站点定位等功能。
• “在浏览器中预览/调试”：单击该按钮，在定义好的浏览器中预览或调试，或是编辑浏览器列表。
• “刷新”：单击该按钮，可以刷新设计显示中通过代码更改的部分。
• “参考”：单击该按钮来启动代码属性设置面板。
• “代码导航”：单击该按钮来移动文档里定义的JavaScript函数，设置或删除代码里的断点。
• “视图选项”（代码视图模式）：单击代码视图模式下的选项菜单按钮，可以选择自动换行、行数、高亮显示无效HTML、语法颜色、自动缩进等选项及在顶端查看设计视图。
• “视图选项”（设计视图模式）：单击设计视图模式下的选项菜单按钮，可以选择隐藏所有的可视化帮助或锁定可视化帮助，如表格边框、层边框、框架边框、图像地图、不可见元素、表头、标尺、网格及轮廓图像。

1.5.5 属性面板

属性面板主要用于显示在文档窗口中所选中元素的属性，允许用户在属性面板中对元素属性直接进行修改。根据选中元素的不同，属性面板上的内容也不同，如图1-14、图1-15所示分别为文本和图像的属性面板。

在属性面板的右下角，通常都有一个指向上方的三角形图标。单击该三角形图标折叠属性面板。当属性面板被折叠时，单击向下方的三角形图标重新展开属性面板，显示更多的属性设置内容。

单击属性面板右上角的图标，则打开属性面板菜单，在菜单中选择属性面板的显示模式。

1.5.6 其他面板

Dreamweaver提供了一系列面板，在窗口的右侧以面板组的形式显示，如图1-16所示。它是一个工具集合的控制框架，将各种窗口、面板放置在其中，组合成为选项卡的形式，以节省屏幕空间。在必要时还可以将这些浮动窗口、面板拖离，成为独立的可停靠浮动面板，如图1-17所示。

如果希望将某个面板与其他面板组合成多个选项卡的形式，单击面板右上角的图标，从打开的菜单中选择“将XX组合在”子菜单中一个面板进行组合，如图1-18所示。

1.6 在Dreamweaver中直接编写HTML

在Dreamweaver中可以直接编写HTML的代码，下面通过一个HTML小实例进行说明。

1.6.1 编写HTML代码

（1）启动Dreamweaver MX 2004程序，如果是第一次启动该程序，系统会弹出“工作区设置”对话框，让用户选择工作界面的风格，如图1-19所示。如果以后改变了主意，可以在“首选参数”对话框中设置成不同的工作区风格。

（2）选中右侧的“代码编写者”单选项，单击“确定”按钮以代码视图的形式打开一个新的HTML文件，如图1-20所示。

（3）在代码中<title>与</title>标签之间的内容就是新建HTML文件的标题，也就是将要在浏览器的标题栏中显示的页面标题更改为“网页文件的标题”。

（4）在<body>与</body>标签之间添加主体内容的代码，如下：

<p>欢迎学习HTML语言！</p>
<p>我们愿做您最忠实的良师益友！</p>
<p>让我们伴您一起走入HTML的世界吧！！</p>

一个最基本的HTML文件就编写完成了。

1.6.2 保存并查看HTML文件

（1）选择“文件”|“保存”菜单命令，弹出“另存为”对话框，如图1-21所示。

（2）在“保存在”下拉列表中选择存盘的位置，在“文件名”文本框中输入文件的名称“实例1”，设置文件的保存类型为“HTML文档”，单击“保存”按钮完成文件的保存。

（3）双击保存的文件，可以在浏览器中看到文件的效果，如图1-22所示。

1.7 小结

本章主要介绍了制作网页的相关内容，区分了网站和网页的不同，以及网页的元素组成和设计网页的软件。本章的重点内容是Dreamweaver软件的使用，难点是如何在Dreamweaver中编写HTML代码。如果感觉编写HTML代码有点困难，不着急，第2章就开始介绍关于HTML的相关内容，以及如何设计网页。

1.8 习题

【习题1】网站、网页的概念是什么，两者之间的区别是什么？

【习题2】网页的基本构成元素是什么；常用的网页设计软件都有哪些？

【习题3】在Dreamweaver中编写HTML代码，要求输出一行文字：HTML很容易理解，学习它可以没有任何的语言基础。