网页制作简明教程（一）
(www.Jojoo.net) 2001-12-14
　　 1．1 有关网页的基本知识

　　 在制作网页之前，首先需要了解一些与网页有关的知识。

　　 在Internet的飞速发展，WWW（英文全名为World Eide Web，中文称“万维网”）是一个不容忽视的角色，它是由Internet上的信息服务器连成的网络，可以显示文字、图片、声音等交互性超媒体对象，并可以让普通人方便地访问。

　　 URL（英文全名这Uniform Resource Locator，中文称“统一资源定位器”），URL好比Internet的门牌号码，它可以帮助用户在Internet的信息海洋中定位到所需要的资料。在网上的每一个文件都有一个用URL来标识的地址，它的结构也可以理解为DOS中的目录结构。例如：http://www.163.net/myweb/mfxx.htm（此网址为假设）。其中http是超文本传输协议，即盘符；www.163.net是站点名，即根目录；myweb是子目录；mfxx.html是文件名。

　　 协议（Protocol）是关于信息格式及信息交换规则的正式描述。在信息技术中，协议就是一些特殊的规则集合，它被通信的接收方和发送方认可，接收到的信息和发送的信息均以这种规则加以解释。在网络的各层中存在着许多协议，它是定义通过网络进行通信的规则，接收方的发送方同层的协议必须一致，否则一方将无法识别另一方发出的信息，以这种规则规定双方完成信息在计算机之间的传送过程。协议就好比每个国家都有自己特定的交流准则和交流方式，在Internet上，它统一了人们在网上的交流方式。HTTP协议（英文全名为Hypertext Transfer Protocol，中文称“超文本传输协议”）它是用来在Internet上传送超文本的传送协议。它是运行在TCP/IP协议族之上的HTTP应用协议，它可以使浏览器更加高效，使网络传输减少。任何服务器除了包括HTML文件以外，还有一个HTTP驻留程序，用于响应用用户请求。您的浏览器是HTTP客户，向服务器发送请求，当浏览器中输入了一个开始文件或点击了一个超级链接时，浏览器就向服务器发送了HTTP请求，此请求被送往由IP地址指定的URL。驻留程序接收到请求，在进行必要的操作后回送所要求的文件。其实您只要记住它是专门为World Wide Web设计的协议就行了。

　　 网页是WWW的基本文档，它是用HTML（Hypertext Markup Laguage即超文本标识语言）编写的。HTML语言严格来说并不是烦人的编程语言，其实它只是一些能让浏览器看懂的标记，当网页中包含正常文本和HTML语言标记时，浏览器会“翻译”由这些HTML语言标记提供的网页结构、外观和内容的信息，从而将网页按设计者的要求显示出来，而不是显示一堆奇怪的标记。您现在所看到的这个页面就是网页了。

　　 超文本（Hypertext）是把一些信息根据需要连接起来的信息管理技术，人们可以通过一个文本的链指针打开另一个相关的文本。只要用鼠标点一下文本中通常带下划线的条目，便可获得相关的信息。我们通常所说的网站或网页，就是由一个或多个超文本组成的，而我们进入网站首先看到的那一页称首页或主页（HomePage）。网页的出色之处在于能够把超链接（Hyperlink）嵌入网页中，这使用户能够从一个网页站点方便地转移到另一个相关的网页站点。它可以指向其他网页、文、多媒体文件、图像甚至程序。超链接是内嵌在文本或都图像中的，文本超链接在游览器中通常是带下划线，而图像超链接是看不到的，但如果用户的鼠标碰到它，鼠标的指标通常会变成手指状（文本超链接也是如此）。

　　 1．2 网页制作的基本设计思路

　　 要设计出一个精美的网站前期工作是必不可少的。一个网页的成功与否，很重要的一个因素在于它的构思，好的创意及丰富详实的内容才能够让您的网页充满勃勃生机。

　　 1．2．1 网页的选题

　　 在制作自己的网页之前，首先要确定自己网页的内容。个人网页的设计内容可以从自己的专业或兴趣爱好多做些考虑。例如自己在计算机、书法、绘画等方面有独到的工夫，可以此专题做为网页的内容。但网页涉及的内容切勿过广，这样虽然内容比较丰富，但往往涉及各个方面的内容会比较肤浅。

　　 1．2．2 网页的组织结构

　　 网页的选题确定好以后，接下来就要确立网站的总体结构了。总体结构的确立至关重要，它是网站设计能否成功的关键所在。如果我们对网站的总体结构了如指掌，设计起来就会得心应手，游刃有余，但是如果网站的总体结构比较混乱，在设计的过程中也就会颠三倒四，无法将自己的想法表达出来，这样的网站一般不会很成功。一般网页的组织结构是采用树形结构。

　　 1．2．3 资料的收集与整理

　　 在对自己未来的网页有了一个初步的构思后，还需要有丰富的内容去充实。网页的基本组成元素有三个：文字内容、图片和超级链接。而Internet的最迷人之处在于它信息的极大丰富，如果你的网而只有漂亮的外观而实质内容很少，那么就不会有多少人在你的网页中停留。要注意的一点是，网站的内容必需合法。

　　 1．2．4 选择网页的设计方法

　　 要建立一个网站，要选择用何种方法来实现它。现在，能够用来设计网站的方法有很多，可以使用HTML语言来编辑，也可以使用网页制作工具（如：ProntPage）来设计网站。对于一个初学者来说，建议您使用所见即所得的网页制作工具来设计出网站的框架，然后再用Java和javascriptT等编辑语言来对网站进行修饰。

　　 1．2．5 设计网页要注意的问题

　　 （1）、网页的标题要简洁，明确。


　　 （2）、在文本要使用水平线，以分割不同部分。


　　 （3）、对重点段落要强调显示。


　　 （4）、网页中插入的图片要尽量的小。


　　 （5）、图形要附加文字说明，以便关闭图象时查看。


　　 （6）、网页中引用的资料及商标（或图标），不能侵犯版权。

　　 1．3 HTML语言简介

　　 HTML语言是网页制作的基础，是初学者必学的内容。虽然现在有许多所见即所得的网页制作工具，但是说到底，还是有必要了解一些HTML的语法。这样，您可以更精确的控制页面的排版，可以实现更多的功能。HTML语言可直接使用普通的文本编辑器进行编辑（例如：DOS下的EDIT，WPS；WINDOWS中的记事本等）。

　　 在HTML中，标记是用来界定各种单元，如标题、段落、列表等。HTML单元由三部分组成：起始标记、单元内容、结束标记。起始标记由“< ”和“ >”来界定，结束标记由“< /”和“ >”来界定，单元名称和属性由起始标记给出。如：“< TITLE >免费新天地< /TITLE >”，“< TITLE >”和“< /TITLE >”是起始标记和结束标记，“免费新天地”是单元的基本内容。

　　 1．3．1 关于标记的有关约定

　　 （1）、超文本标记用带尖挎号“< ”和“ >”表示。


　　 （2）、超文本标记一般是成对出现，用带斜杠的元素表示结束，如：< html >和< /html >。但有些标记只有起始标记而没有结束标记，如：< BR >，它网页中表示引入一个换行动作；还有些标记可以省略，如：段落的结束标记< /P >就可以省略。


　　 （3）、超文本标记忽略大小写，如：< HTML >和< html >是等效的，但其中实体内容的名称是要区分大小写，如"&NAME"和"&name"是表示不同的实体。


　　 （4）、一个标记元素可写在多行，参数位置不受限制。

　　 1．3．2 主要标记的用法

　　 HTML文档的标记在该语言中占有重要的地位，可以说，整个HTML文档都是它的标记构成的，HTML文档的标记为编写该文档建立了固定的框架，我们只要在这个框架中填充内容就行了。但你可能会对下图的HTML，而感到一头雾水吧？


　　 其实您可以将HTML文档分成两部分：首部信息和正文主体。其具体的结构如下：

　　 < HTML >

　　 < HEAD >

　　 首部元素、元素属性及基本内容。

　　 < /HEAD >

　　 < BOBY >

　　 主体元素、元素属性及基本内容。

　　 < /BOBY >

　　 < /HTML >

　　 首部元素中的内容在浏览器中是不被显示出来，它主要是浏览器使用首部来收集有关页面的各种信息。我们在浏览器中看到的是< BOBY >和< /BOBY >之间的内容。因篇幅原因，在此就不再对各元素的应用进行详细说明，下面主要介绍一些元素的含义。

网页制作简明教程（三）
(www.Jojoo.net) 2001-12-14 (请双击自动滚屏观看，单击停止，再击..)


1．4 网页制作工具FrontPage 2000简介

　　 虽然HTML语言不像编程语言那么烦人，但它里面众多的为了让网页浏览器看懂的代码却令人望而却步。网页制作工具（如：FrontPage、Adobe pagemill、Netobjects Fusion、Homesite等）的诞生，使您不必对HTML了解太多，就能做出引人入胜的具有专业水准的网页来。对于入门级用户来说，建议选择一个所见即所得的网页制作工具，下面主要介绍FrontPage 2000中文版。

　　 FrontPage 2000是目前世界上较优秀的网页制作与开发工具之一。它是Office2000中的一个重要组件，它即继承了FrontPage以前版本的功能，又采用了与Office2000其他组件一致的界面和操作方式。只要您使用过Office软件，就可以轻松掌握FrontPage 2000的用法。


　　 安装完成后，依次点击[开始]→[程序]→[Microsoft FrontPage]即可进入FrontPage 2000主界面。


　　 可以看出FrontPage2000主界面是由标题栏、菜单栏、常用工具栏、视图栏、编辑区和状态栏构成。

　　 此章节主要介绍利用FrontPage 2000中文版的模板快速建站。FrontPage2000为用户提供了一些简易创建网站的功能，这就是向导与模板。使用向导与模板，用户能够方便地创建出一个新的网站，无须自己去设计整个网站的框架结构、组织链接等。这样会大大节省用户的时间和精力，提高网站设计的效率，特别适用网页设计入门级用户。

　　 下面就具体讲述向导和模板的使用方法。

　　 在“文件”主菜单中选择“新建”子菜单，点击其中的“站点”，这时就会弹出“新建”对话框，如下图所示。从中选择“个人站点”模板，这样就创建了一个新的个人网站。


　　 读者可以看到，这个网站共有五张网页，它们分别是index.htm、intrerest.htm、myfav3.htm、photo.htm、favorite.htm网页。这是一般的个人网站模式，如果您觉得它还不能满足自己的要求，还可以添加新的网页。进入FrontPage 2000提供的个人主页码模式，在此基础上用户再进行设计，其模式如下图。



　　 在FrontPage2000提供的个人主页的模式中，为用户设计了两个边框，分别在上面和左边，用户可以在这两个边框中进行设计。当然，用户也可以自定义主页格式。方法是打开“格式”主菜单，从中选择“共享边框”，这时将打开“共享边框”对话框，如下图。



　　 用户可以在上图的对话框中的“上、下、左、右”选项中选择需要用的共享边框，在“包含导航按钮”选项中选择是否使用导航按钮。

　　 接下来就是根据个人风格在这个主页中添加必要的内容，选择工具栏上的工具，插入图片、表格、链接等。此时的网页已经具备了一个雏形，不过它的页面还非常单调，用户还要在此基础上对网页进行修饰、排版。更具体的用法可参见FrontPage 2000中的帮助主题。网络学院中也有关于FrontPage 2000更详细的使用方法方面的文章。

网页制作简明教程（五）
(www.Jojoo.net) 2001-12-14 (请双击自动滚屏观看，单击停止，再击..)


1．5．4 CGI简介

　　 CGI（Common Gateway Interface）即公用网关接口， 它是程序和应用软件用来与网络服务器软件连接的通用标准，CGI提供网络浏览器和数据信息之间的传送业务。它就像是Web上为交流而设的一扇门，这个程序决定着这扇门是开还是关。 CGI是一段程序，它运行在Server上，提供同客户段 HTML页面的接口。根据客户端在进行请求时所采用的方法，服务器负责收集由客户端提供的信息，并根据客户端请求的CGI脚本程序文件名，执行该脚本程序。所谓脚本程序就是该程序在CGI控制下运行程序。CGI脚本程序启动后，服务器将客户端的信息传给此程序，该程序对客户的信息处理后，将运行结果交给服务器，由服务器负责再向客户端传递。CGI主要运用于处理搜索引擎和一般表单。

　　 1．5．4．1 CGI脚本的工作原理

　　 （1）、一个URL指向一个CGI脚本，一个CGI脚本的URL能如普通的URL一样在任何地方出现。

　　 （2）、服务器接收请求，按照那个URL指向的脚本文件（注意文件的位置和扩展名），执行脚本。

　　 （3）、脚本执行基于输入数据的操作，包括查询数据库、计算数值或调用系统中其他程序。脚本产生某种Web服务器能理解的输出结果。

　　 （4）、服务器接收来自脚本的输出并且把它传回浏览器，让用户了解结果。

　　 例如：一个指向CGI脚本的连接，它的HTML是这样的。

　　 < A HREF="http://www.cgi.com/cgi-bin/date.cgi" >Date< /A >（此网页为假设）

　　 在许多服务器中的cgi-bin目录是仅能够放置CGI脚本的目录。当你选择这个连接时， 你的浏览器将向：www.cgi.com服务器提出请求。服务器接收这个请求计算出URL处的脚本文件名然后执行这个脚本。

如果你想打下坚实的基础，我建议看看！！
如以前有人贴过！
我表示抱歉！

塔布里斯在上个帖子中说

引用:

---

别贴了 HTML是即将被淘汰的 XHTML才是W3C推崇的

---

没听过！
我只了解一点HTML
会用一下DW！
悲哀中.......
指教一二？

你不是去试了吗？

那个没实现啊？
郁闷！！！