8 网页制作基础知识 赵国庆 博士 guoqingzh@163.com 北京师范大学教育技术学院 http://ksei.bnu.edu.cn
内容提要 网页制作基本概念 网站设计基本步骤 网页制作常用软件 HTML基础 Dreamweaver网页制作 FrontPage网页制作
一、网页制作基本概念
因特网、万维网和网格 第一代互联网：因特网（Internet） 第二代互联网：万维网（World Wide Web） 第三代互联网：网格（Grid）
Internet（因特网） Internet是一个通过网络设备把世界各国的计算机相互连接在一起的计算机网络。 在这个网络上，使用普通的语言就可以进行相互通信，协同研究，从事商业活动，共享信息资源。 Internet是世界上规模最大、用户最多的计算机网络，是20世纪全球发展最快，影响最深远和冲击最大的信息存取和处理工具。 人们称因特网为第一代互联网。
WWW（万维网） WWW是internet上运行的全球性分布式信息系统。 是World Wide Web (环球信息网)的缩写，也可以简称为Web，中文名字为“万维网”。 由于Web支持文本，图像，声音、影视等数据类型，而且使用超文本、超链接技术把全球范围里的信息链接在一起，也称为超媒体环球信息系统。 WWW是Internet的多媒体信息查询工具，是Internet上近年才发展起来的服务，也是发展最快和目前用的最广泛的服务。正是因为有了WWW工具，才使得近年来Internet迅速发展，且用户数量飞速增长。 人们称万维网为第二代互联网。
Internet和WWW Internet和WWW的关系犹如计算机的硬件平台和软件环境之间的关系。
第三代互联网——Grid（网格） 简单地讲，网格是把整个互联网整合成一台巨大的超级计算机，实现计算资源、存储资源、数据资源、信息资源、知识资源、专家资源的全面共享。 网格类似于电力网，用户用电时无需了解电是由哪个电站发出的。
万维网与网页 网络已逐渐成为与广播、电视、报纸同等重要的媒体形式，成为人们获取信息的重要渠道。 WWW上的大量信息都是通过网站的形式发布的。 网站是由一组相关的网页组成的。
网站的分类 门户网站（Sohu, Sina, 网易、新华网、Tom.com） 专业网站（教育类、财经类） 电子商务网站（dangdang, Chinapub） 电子政务网站（政府上网工程） 单位网站（各高校、各部门等） 公司网站 个人网站（blog, 个人站点等） ……
网页、网站和主页的关系 网页 网站 主页 书中的每一页 一本书 书的封皮
Web网页的三种工作模式
C/S模式与B/S模式 C/S模式：Client/Server模式，客户/服务器模式 QQ、Popo、MSN B/S模式：Browser/Server模式，浏览器/服务器模式 网页
二、网页制作基本步骤
网页制作基本步骤 网站的选题 网站内容规划 网站素材准备 网页设计与制作 域名申请 服务器配置(或申请主页空间) 网站测试及发布
三、网页制作常用软件
网页制作工具 网页编辑类 图像处理类 FTP类 如微软的FRONTPAGE Macromedia公司的Dreamweaver 和 Flash等。 图像处理类 Photoshop Fireworks Gif Animator Cool3D FTP类 FTP软件是用来发布你的网页的，通过 FTP 软件，能方便地将你的网页上传到网站服务器上，常见的 FTP 软件有 CuteFTP 和 LeafFTP。
四、HTML基础
HTML 为了在世界范围内发布信息，需要一种能够被普遍理解的语言，一种能为所有的计算机作为信息发布用的母语，这就是万维网使用的超文本标记语言（Hypertext Markup Language，HTML)。
HTML句法结构
HTML句法结构 Google首页的部分源代码 另外还有HTML文档主体部分的声明。 <html> <head> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=GB2312"> <title>Google</title> ... </head> 另外还有HTML文档主体部分的声明。 <body bgcolor=#ffffff text=#000000 link=#0000cc vlink=551a8b alink=#ff0000 onLoad=sf()> <center>
HTML句法结构 一个HTML文档是普通的ASCII文本文件，它包含两类内容：普通的文本、代码或标记。 标记(Tag)是用一对尖括号“<>”括起来的文本串，例如第一行的<html>。标记通常具有如下结构： <tagneme attribute1=value1 attribute2=value2…> 在标记定义中，“tagname”是标记名，定义标记的类型；而“attributes”为属性，一般标记即可以不定义属性，也可以定义若干个属性，属性给出了这个元素的附加信息。
HTML句法结构 所谓元素（Element），是HTML中的主要构件，一般元素都是由成对的标记组成，例如 ： <title>Google</title> 单个出现的标记成为“空元素”，例如：<br> 可以容纳其他元素的元素也称为“容器元素”，例如：<head> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=GB2312"> <title>Google</title> ... </head>
HTML句法结构 在元素的起始标记中可以填入相关的元素属性 在Google主页文档第二行的<head>标记中，head是标记名，没有相关属性。 在文档主体<body>定义中，定义了若干属性，属性值为“bgcolor=#ffffff text=#000000 link=#0000cc vlink=551a8b alink=#ff0000 onLoad=sf()”。
HTML句法结构 需要注意，虽然标记和属性名称与字母大小写无关，但是属性值却往往对大小写敏感。 例如，可以在超链中定义相关的文件名，尽管在Windows系统中，href=a1和href=A1可以指向同一文件，但在UNIX系统中，却是指向不同的文件。 重要提示：在网页设计须统一命名方案
HTML句法结构 标记和文本结合起来形成元素(Element)。每个元素代表文档中的一个对象，比如文件头、段落或图片。一个元素可具有一个或一对标记，通常具有一些相关的属性。 元素有两种类型：容器（container）元素和单个元素（空元素）。
HTML句法结构 容器元素包含文本内容，代表一个文本段、它由文本主体（或其他元素）组成，文本主体在开头和结尾处用一对标记来确定边界（结尾的标记用标记名前加“/”来表示，并不带任何属性）。 例如，<title>和</title >标记把这两个标记之间的文本定义成一个文档标题。 而空元素是由不影响任何文本的单个标记组成的，它会在文档中插入一些对象。例如<img src=…>标记就是一个可以在文档中插入图像的单个元素。
HTML文档结构和常用元素 这三个元素一起构成完整的HTML文档结构模板，所有的HTML文档都应该遵循这个模板： <HTML> <HEAD> Header element </HEAD> <BODY> body of Document </BODY> </HTML>
HTML文档结构和常用元素 <HEAD>容器元素中包含的最为常用的元素有： <TITLE>text</TITLE>：这个元素是文档的抬头，类似书籍的页眉。在浏览器中，标题通常与文本页分开显示（例如，在窗口的标题栏中）。 抬头（TITLE）在用户保存网页时一般都作为文件名，所以命名应该注意。
HTML文档结构和常用元素 <BODY>容器元素中包含以下几个常用元素： <H#>text</H#>：标题把括起来的文本作为标题。从标记<H1>、<H2>直到<H6>，可以有六个层次的标题（较小的数字标记较重要的标题）。标题通常用较大的字型编排，并且在该标题的上下各有一个空行。 <P>：段落标识文本主体中两个段落之间的间隔。 <IMG SRC=“URL”>：图像标记把图像插入到文档中，图像可以在SRC属性中给出的URL处找到。
HTML文档结构和常用元素 <IMG src="URL" alt="text" align=TOP/MIDDLE/BOTTOM> 把图像插入到文档中，图像可以在src属性指定的URL处找到。最常见的图像格式是GIF。 如果浏览器不支持插入图像（例如，Lynx浏览器），将显示在可选的alt属性中给出的文本。如果没有给出alt属性值，在图形所在的位置上可能会出现[IMAGE]的字样。 可选的align属性指出文本的当前行与图像在垂直方向上怎样对齐（通常是BOTTOM，但这随浏览器的不同而不同）。
HTML文档结构和常用元素 <UL><LI>text<LI>text</UL>：该结构提供了一个无序的条目列表；每个条目以<LI>标记开始。通常在显示出的各条目项前置一个圆点。 <A HREF=URL>text</A>：超文本标记，也称为超链接。文本用某种特殊方式来显示（用颜色、下划线或其它类似方法）； <HR>：放置一个横穿浏览器窗口的水平线，通常水平线的上下各有一个空行。 <BR>：在文本中强制换行，以便后继文本都放在下一行。
HTML颜色单位 颜色单位有三种表达的方式： 十六进制的颜色代码 <font color=#FF0000>Red Characters</font> 十进制颜色码 <font color=rgb(0,0,255) > Blue </font> 颜色名码 <font color="green">Green Characters </font>
URL 统一资源定位器(URL)路径是一种因特网资源地址的表示法。该数据里中可以包括链接所需协议、链接主机的域名或IP地址、链接主机的通讯端口（port）号、主机文件的发布路径和文件名称等。
URL路径 在HTML中，URL路径又分为两种形式：绝对路径和相对路径。 绝对路径是将主机地址和主机上资源发布目录的路径和资源名称进行完整的描述。如: <a href="HTTP://ctec.xjtu.edu.cn/bbs/index.htm"> <a href="file:///c:/xitami/webpages/default.htm">
HTML标准单位 相对路径则是相对于当前的网页所在目录或站点根目录的路径。如: <IMG SRC="Snowwhite.jpg"> <!--图像文件"Snowwhite.jpg"与当前显示的网页在同一目录下；--> <IMG SRC="../image/Leaves.jpg"> <!--图像文件"Leaves.jpg "在与当前显示网页所在目录同层次的另一子目录image下；--> URL的绝对路径必须以http://形式开始，例如： <IMG SRC=“http://202.117.35.70/image/Snowwhite.jpg">
HTML基本元素的使用 HEAD容器 HTML文档的<HEAD>标记是一个容器元素，在<HEAD>容器中允许出现以下元素： TITLE元素 <TITLE>"text"</TITLE> TITLE元素所包含的内容通常会出现在浏览器的标题栏或成为保存网页到本地磁盘时的默认文件名。
HEAD容器(续) LINK元素 <LINK name="text" rel="text" href="URL"> 在当前文档和另一文档之间建立链接关系。name属性给链接起一个名字，比如“Mail to Author”（发给作者），rel属性描述了链接的类型，比如“made”（表示作者），“parent”（表示文档是大文档的一部分），“next”（表示是多文件文档的后续部分），及“pre”（表示前序部分）。href属性指向相关的文档。
HEAD容器(续) META元素 <META NAME="text" CONTENT="text"> META元素提供网页作者以各种方式来描述与文档本身而不是文档内容有关的信息。如META元素通常用来为搜索引擎定义页面描述以及搜索关键字；或者是定义用户浏览器上的Cookie，还可以设置页面使其可以根据定义的时间间隔刷新页面。值得注意的是META标记是一个单个元素。
HEAD容器(续) <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"> <meta name="description" content="基于开放平台的动态网页程序设计"> 以上语句为搜索引擎列出了关键字列表，这些关键字可以将页面正确地放置在Excite，Alta vista，Lycos和InfoSeek等著名搜索引擎的列表上，以便进行快速搜索。
HEAD容器(续) <META http-equiv="Expires" content="Tue, 20 Aug 2001 14:25:27 GMT"> 以上语句会产生一个“Expires: Tue, 20 Aug 2001 14:25:27 GMT”的HTTP的头部（header），使得缓存链（Caches）决定何时取回相关文件的新版本。大部分浏览器为了节约下载时间，会在本地硬盘上保存已访网页的临时版本。在用户下次打开同一页面时，浏览器将直接调用硬盘上的文件，而不是网上的。
HEAD容器(续) <META HTTP-EQUIV="content-type" CONTENT="text/html; charset="GB2312"> 用户可以通过META元素为浏览器指定显示当前网页须用的语言编码，而无需读者自选。上面语句的黑体部分指定了当前的网页语言编码是简体中文。如果需要将网页的编码方式指定为繁体中文，可以使用下面语句： <META HTTP-EQUIV="content-type" CONTENT="text/html; charset="BIG5">
HTML基本元素的使用 <BODY>容器 包含在<BODY>标记对中的内容将显示在浏览器的主窗口中。 在开始设计网页之前，需要对页面进行一个整体的规划和设置，如背景颜色、背景图案、页面留白以及大部分文字的颜色等等。 在HTML中，使用<BODY>元素来定义页面的这些基本属性。如在本章开始时提到的搜索引擎“Google”主页的例子，其<BODY>的定义如下： <BODY bgcolor=#ffffff text=#000000 link=#0000cc vlink=551a8balink=#ff0000 onLoad=sf()>
<BODY>容器(续) BODY元素本身的属性可以分为三类： BGCOLOR 背景色 BACKGROUND 背景图案 文字属性： TEXT 正文文字颜色 LINK 链接文字颜色 ALINK 活动链接文字颜色 VLINK 已访问链接文字颜色 留白属性，其中分为LEFTMARGIN和TOPMARGIN。 LEFTMARGIN 页面左侧的留白距离 TOPMARGIN 页面顶部的留白距离
HTML基本元素的使用 字符容器（Character Container）允许在段落内部格式化或描述字和词组,使其呈现出不同的风格 超文本链接 超文本链接是HTML文档具有链接和检索功能的基本原因，也是HTML中最重要的概念之一。超文本锚点是指文档中的某处位置，在该位置下隐含了对其它文档的链接。 <A href="URL" name="text">text</A>
字符容器(续) 文本修饰逻辑风格 文本修饰逻辑风格允用户赋于文本的各个片段以真正的含义。 <b>text</b> <!--黑体--> <I>text</I> <!--斜体--> <tt>text</tt> <!--打字机文本-->
HTML基本元素的使用 块容器 在HTML中，块容器（Block Container）被定义成一个具有标记的文本片段，本身在HTML文档中占有一定垂直空间，如一个段落或一个标题(header)。某些元素可以互相衔接，但不能嵌套（如，<h1>内部不能有<p>，因为它们代表不同类型的块）。
块容器(续) 标题元素 <H#>text</H#> 用<H#>标注的标题和用<title>标注的标题是截然不同的，前者是修饰浏览器窗体内文本的元素，而后者标识的内容将显示在浏览器的标题栏中。 ＃值可以从1到6，用以充当文档该节的标题。#位置的数字值越小表示的标题就越重要，相应的字号要大些。
块容器(续) 段落 Text<P>text <p>text</p> 在一般网页中，该标记以第一种形式使用，作为段落的分隔符。因此，它标识正常文本主体的两个段落之间的界限。 注意不要不要使用 ….<p><h1>的形式，因为<h1>隐含着换行，有些浏览器在元素之间会插入太多的空行。 第二种形式（每个段落都有一个容器）表示了一个更标准的SGML结构。
块容器(续) 预先格式化文本 <PRE>text</PRE> 由于HTML忽略多余的空格、制表符（tab）和换行符（enter），某些具有特殊格式的文本，如诗歌、表格及计算机程序清单等都很难标记。 <PRE>元素用于这样的文本，它按照文本原稿出现的样式格式化所包含的文本，包括原稿中出现的空格、制表和换行符等。
Table元素 表格元素是HTML中最为复杂，同时又是应用最为广泛的元素之一。 表格元素在网页中以表格形式组织和显示数据 大量使用在网页布局设计上。在 “Google” 貌似简单的网页上，居然也用了三个表格来布局。
Table元素（续）
Table元素（续） <TABLE>标记的一般形式是： <TABLE WIDTH="?" BGCOLOR="?" BACKGROUND="?" BORDER="?" CELLSPACING="?" CELLPADDING="?"> <TR> … <TD> …</TD> </TR> </TABLE>
Table元素（续） 在<TABLE>标记的属性中： Width表格的宽度，在默认状态下为自动适应表格内容的宽度，即根据表格中的内容来自动调节表格的宽度。取值可以是HTML的绝对或者相对长度标准单位。 Bgcolor表格的背景颜色，在默认状态下表格无背景色，网页作者亦可使用HTML的各种颜色单位进行指定。 Background 表格的背景图案，须用URL来指定作表格背景图片的文件路径。
Table元素（续） Border 表格边框的风格（在作为布局使用时往往取其默认值"0",即不显示表格的边框），在“Border=1”时，表格的边框成3D的状态。 CellSpacing 表格中单元格的边距大小，即单元格间距，长度单位。 CellPadding 表格中单元格之间的间距大小，表中单元格的内容与单元格边框之间的留白距离，即单元格边距，长度单位。
Table元素（续） TR元素 TR元素表示表格中的行标记，表格中的每一行都必须包含在一对<TR></TR>标记中。行标记的一般形式是： <TR ALIGN="?" BGCOLOR="?">… …</TR>
TR元素（续） 在<TR>标记的属性中： Align 指定该行中单元格的对齐方式，可选值如下： Left 左对齐（默认值） Center 居中对齐 Right 右对齐 Bgcolor 指定该行的背景颜色。
Table元素（续） TD元素 单元格是表格的基本组成元素，一个TD元素表示表格中的一个单元格，由<TR>标记对中所圈入的所有TD元素构成了表格的一行。单元格标记的一般形式是： <TD WIDTH="?" HEIGHT="?" ALIGN="?" VALIGN="?" BGCOLOR="?" BACKGROUND="?" ROWSPAN="?" COLSPAN="?"> … …</TD>
TD元素（续） 在<TD>标记的属性中： Width 单元格宽度 Height 单元格高度 Align 单元格水平对齐方式 Valign 单元格垂直对齐方式 RowSpan 单元格的行跨度 ColSpan 单元格的列跨度
五、应用Dreamweaver制作网页
应用Dreamweaver制作网页
六、应用FrontPage制作网页
FrontPage2003
8 网页制作基础知识 赵国庆 博士 guoqingzh@163.com 北京师范大学教育技术学院 http://ksei.bnu.edu.cn