网页制作基础知识
■ 什么是网页
现在在你眼前,出现在显示器上的这个“东西”,就是一个网页。网页实际是一个文件,他存放在世界谋个角落的的某一台计算机中,而这台计算机必须是与互联网相连的。网页经由网址(URL)来识别与存取,当我们在浏览器输入网址后,经过一段复杂而又快速的程序(详见“域名系统”),网页文件会被传送到你的计算机,然后再通过浏览器解释网页的内容,再展示到你的眼前。
■ 构成网页的元素
文字与图片是构成一个网页的两个最基本的元素。你可以简单的理解为:文字,就是网页的内容,图片,就是网页的美观。
除此之外,网页的元素还包括动画、音乐、程序等等。如果想了解更多的话,请参考“商业建站指南”的“网站的要素”。
■ 揭开网页的神秘面纱
在网页上点击鼠标右键,选择菜单中的“查看源文件”,就可以通过记事本看到网页的实际内容:
screen.width-430)this.width=screen.width-430 align=center border=0>
可以看到,网页实际上只是一个纯文本文件,它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述(例如字体、颜色、大小),而浏览器则对这些标记进行解释并生成页面,于是就得到你现在所看到的画面。
为什么在源文件看不到任何图片?
网页文件中存放的只是图片的链接位置,而图片文件与网页文件是互相独立存放的,甚至可以不在同一台计算机上。
■ 网页的类型
通常我们看到的网页,都是以 htm 或 html 后缀结尾的文件,俗称 HTML
文件。不同的后缀,分别代表不同类型的网页文件,例如以CGI、ASP、PHP、JSP甚至其他更多。
HTML
全称 HyperText Markup
Language,正式名称是超文本标记语言,利用标记(tag)用来描述网页的字体、大小、颜色及页面布局的语言,使用任何的文本编辑器都可以对它进行编辑,与VB、C++等编程语言有着本质上的区别。
举一个简单的例子:
HTML 原代码: <b>goEway.com</b> 从不懂上网到网络高手
在浏览器的显示效果: goEway.com 从不懂上网到网络高手
其中 <b></b> 就是两个HTML标记。它以起始标记<b>及结束标记</b>标记文字
goEway.com,令它显示成粗体。要知道更多有关HTML的知识,请看“HTML彻底剖析”
对于网页制作的初学者来说,理解 HTML
的工作原理是必要的,但也无须仔细地了解到每一个标记的作用,因为现在已经有了很好的所见即所得的网页编辑软件为我们快速地生成 HTML
代码,例如 Dreamweaver 和 Frontpage ,再也无须象早期的网页制作人员一样,一行一行地编写代码了。
以下内容,可能会导致部分网友感到不安,敬请留意!
哈哈,开个玩笑而已。但是,对于以下的“网页类型”,及接着的“网页相关技术”,的确会让一些初学者产生恐惧心理,其实不用担心,在这里,我们只会作简单的介绍,而作为初学者,也只需作初步的了解就足够了。就算一时间无法理解,也可以先放在一边,先看“一些与网页密切相关的技术”,待日后回过头来再慢慢消化这部分的内容也不迟。
CGI
CGI 全称为 Common Gateway Interface
(公共网关接口CGI),它是一种编程标准,它规定了Web服务器调用其它可执行程序(CGI程序)的接口协议标准。CGI
程式通过读取使用者的输入请求从而产生 HTML 网页。CGI
程序可以用任何程序设计语言编写,如Shell、Perl、C、Java等,其中最为流行的是Prel。CGI程序通常用于查询、搜索、或其他的一些交互式的应用。
screen.width-430)this.width=screen.width-430 align=center border=0>
网易虚拟社区就是使用了CGI
ASP
ASP 全称为 Active Server Pages(动态服务器主页),它一种应用程序环境,可以利用 VBscript 或
Java Script 语言来设计,主要用于网络数据库的查询与管理。其工作原理是当浏览者发出浏览请求的时候,服务器会自动将 ASP
的程序码,解释为标准 HTML 格式的网页内容,再送到浏览者浏览器上显示出来。我们也可以将 ASP 理解为一种特殊的 CGI。
利用 ASP 生成的网页,与HTML相比具有更大的灵活性。只要结构合理,一个 ASP 页面就可以取代成千上万个网页。尽管 ASP
在工作效率方面较之一些新技术要差,但胜在简单、直观、易学,是涉足网络编程的一条捷径。
screen.width-430)this.width=screen.width-430 align=center border=0>
ASP是微软产物,微软的网站当然也就使用了ASP
PHP
PHP 是 Hypertext Preprocessor
的缩写,代表:超文本预处理器。其优势在于其运行效率比一般的CGI程序要高,而且,PHP是完全免费,不用花钱,你可以从PHP官方站点(http://www.php.net)自由下载。PHP
在大多数 Unix 平台,GUN/Linux 和微软 Windows 平台上均可以运行。
JSP
JSP 与 ASP 非常相似。不同之处在于 ASP 的编程语言是 VBScript 之类的脚本语言, 而 JSP 使用的是 Java
。此外, ASP 与 JSP 还有一个更为本质的区别:两种语言引擎用完全不同的方式处理页面中嵌入的程序代码。在 ASP 下,
VBScript 代码被 ASP 引擎解释执行;在 JSP 下,代码被编译成 Servlet 并由 Java 虚拟机执行。
VRML
VRML(Virtual Reality Modeling
Language)就是虚拟实境描述模型语言。是描述三维的物体及其连结的网页格式。用户可在三维虚拟现实场景中实时漫游,VRML2.0在漫游过程中还可能受到重力和碰撞的影响,并可和物体产生交互动作,选择不同视点等(就象玩Quake)。
浏览VRML的网页需要安装相应的插件,利用经典的三维动画制作软件3DMAX,可以简单而快速地制作出VRML。
一些与网页密切相关的技术
Java
Java 是由 Sun 公司开发而成的一种编程语言,利用 Jave 写成的小程序叫做 Java
Applet。使用它可在各式各样不同种机器、不同种操作平台的网络环境中开发软件。而且,不论你使用的是哪一种 WWW
浏览器,哪一种计算机,哪一种操作系统,只要WWW浏览器上面注明了“支持Java”,你就可以看到生动的主页。
当初Java面世的时候,曾经轰动一时,被认为将会成为 Internet 应用的主要开发语言。但时至今日,Java
的风头已大不如前,原因是 Java 也有着起致命的弱点,就是在客户端的编译运行的速度慢,资源消耗大。现在 Java
多用于服务器端、及一些复杂的客户端程序的编写。
javascript
javascript 具有脚本语言的“简单”这个特性,编写容易,不需要有很深的编程经验。javascript
语言是通过嵌入或整合在标准 HTML 语言中实现的,也就是说 javascript 的程序是直接加入在HTML文档里,当浏览器读取到
HTML 文件中 javascript 的程序,就立即解释并执行有关的操作,无须编译器,其运行速度比 Java Applet 要快得多。
现在, javascript 已经成为了制作******页必不可少的元素,大家经常在网页上看到的动态按钮、滚动字幕,就大多数都是使用
javascript 技术制作的。
CSS
CSS(Casading Style Sheets 层叠样式表),跟 HTML
一样也是一种标记语言,甚至很多属性都是来源于HTML。利用 CSS
技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
Flash
Flash 是 Macromedia 公司出品的一个适量动画制作软件,用他做出来的动画就叫Flash动画,其特点是:
1、动画具有很强的交互性,我们甚至可以完全使用 Flash 来制作一个网站;
2、采用“准”流(Stream)式的设计,就是说,我们可以一边下载动画文件一边欣赏动画;
3、由于它是基于矢量的图形系统,因而只要使用得当,就可以大大地减少文件的数据存储量,所占空间比位图少得多,非常适合在网络上使用。同时,矢量图像可以做到真正的无级放大,这样,无论用户的浏览器使用多大的窗口,图像始终可以完全显示,并且不会降低画面质量。
如果你看过使用了 Flash 技术的网站,你一定会被其神奇的魅力所倾倒。当然,Flash
也有其弊端,就是维护更新不方便,不适宜用于一些更新频繁、信息量大的网站。
DHTML
DHTML 的全称为 Dynamic HTML,即我们常说的动态 HTML。很多人都误会 DHTML 是一种语言,其实 DHTML
仅仅是一个概念——通过各种技术的综合发展而得以实现的概念,这些技术包括
javascript,VBScript,DOM(document.nbspObject Model,文件目标模块),Layers(层)
和 CSS 等。DHTML
的目的在于加强网页的交互性;对用户的操作在本地就可做实时处理,从而得到更快的用户响应;使网页的界面更丰富多变,使页面设计者可以随心所欲地表达自己的构思。
动态 HTML 与******页是两个不同的概念,你可以简单的理解为动态 HTML
能使网页上的元素动起来(如文字的变色,图片的移动);而******页,则是在服务器端动态地生成你看到的“静态”网页,而这个网页上的元素,并不一定会“动”。
■ 选择一个适合自己的网页编辑工具
了解了网页的类型及相关技术之后,下一步,就是要选择一个适合自己的网页编辑工具。
-------------------------------------------------------------------------------
Frontpage
Frontpage 是 Microsoft 出品的,可能是最简单、最容易,却又功能强大的网页编辑工具。采用典型的 Word
界面设计,只要你懂得使用 Word,就差不多等于已经会使用 Frontpage。就算你不懂 Word
也没关系,“所见即所得”的操作方式会让你很快上手,而且你无须学习 HTML 语法。
但 Frontpage 的也有其不足之处:首先是浏览器兼容性不好,做出来的网页,用 Netscape
往往不能正常显示;其次,生成的垃圾代码多,也会自动修改代码,导致在某些情况下极为不便;再次,对DHTML的支持不好。但不管怎么说,Frontpage
的确是最好的入门级网页编辑工具。
常见的版本为 Frontpage98 和 Frontpage2000。
screen.width-430)this.width=screen.width-430 align=center border=0>
Dreamweaver
Dreamweaver 是 Macromedia 公司的产品的另一款“所见即所得”的网页编辑工具。与 Frontpage
不同,Deamweaver 采用的是 Mac 机浮动面版的设计风格,对于初学者来说可能会感到不适应。但当你习惯了其操作方式后,就会发现
Dreamweaver 的直观性与高效性是 Frontpage 所无法比拟的。
Dreamweaver 对于 DHTML
的支持特别好,可以轻而易举地做出很多眩目的页面特效。插件式的程序设计使得其功能可以无限的扩展。Dreamweaver 与
Flash、Firework 并称为 Macromedia
的网页制作三剑客,由于是同一公司的产品,因而在功能上有着一个非常紧密的结合。而最新推出的 Dreamweaver UltraDev
更支持 Asp,Jsp。因此,说Dreamweaver 是高级网页制作的首选并不为过。
常见的版本为 Dreamweaver3.0 和 Dreamweaver UltraDev 1.0
screen.width-430)this.width=screen.width-430 align=center border=0>
Frontpage 与 Dreamweaver 哪一个更好?
对于这个问题的争论,自 Dreamweaver 出现之后就一直没有停过。虽然,两者确实都有着各自的过人之处,Frontpage
易学,Macromedia 高效,但总体来说, Dreamweaver
的优点更为突出与明显。在专业网页制作的这个圈子之中,几乎已经看不到 Frontpage 的影子了。
代码编辑类的网页制作工具
除了以上这些所见即所得的网页制作工具外,还有一些专门编辑代码的网页制作工具,例如
Homesite、Hotdog等。通常使用这些工具的以程序员为主。
■ 掌握一种图像处理软件
美工设计是网页制作的一个重要的组成部分。往往我们说某人能做一手好网页,实际上上指他有很好的美术设计功底。作为初学者,至少要掌握一个图像处理软件。
-------------------------------------------------------------------------------
Photoshop
Photoshop 是 Adobe 出品的最老资格,而又最功能强大的图像处理软件。很多人都会被 Photoshop
的复杂功能所吓倒,其实里面还是有不少“傻瓜”级的功能的。而且,哪怕你不是要处理网页的图片,掌握一些基本的 Photoshop
技巧,对于日常的生活、工作也是大有裨益的。
常见版本为 中文Photoshop5.0、Photoshop5.5,最新版本为6.0
screen.width-430)this.width=screen.width-430 align=center border=0>
--------------------------------------------------------------------------------
PhotoImpact
PhotoImpact 是台湾友立(Ulead)公司推出的一款图像处理软件精品。PhotoShop
等专业级软件不同,PhotoImpact定位于广大普通用户,提供众多“即拖即有”的现成效果和创意工具。它不仅有丰富的网页图库,同时也拥有强大的图形编辑及修片等功能。虽然在特效及照片处理方面与
PhotoShop 仍有很大的差距,但胜在操作简便,是一款“傻瓜级”的图像处理软件。
常见版本为 PhotoImpact5.0,最新版本为6.0
screen.width-430)this.width=screen.width-430 align=center border=0>
适量绘图软件
以上介绍的都是一些“位图”处理软件,如果你更喜欢自己创作的话,也不妨学习一些适量绘图软件,例如
CorelDRAW、Freehand、Illustrator等。
(以上内容来源,发发路检索中心:www.coffly.com)







