当前位置:编程学习 > 网站相关 >>

网页制作之新手上路

答案:

■ 写在最前面的话

  1、本栏目的目的是带你由浅如深地认识网页制作的整个过程;
  2、“网页制作指南”主要讲述网页制作的技术为主,有关网站的策划、维护、及推广等内容请看“实用建站指南”;
  3、本栏目将根据“网页制作指南”的扩展而不断得到补充;
  4、如对本栏目的内容有任何不理解的地方,请到第六感社区相应的讨论区发问,那里将有专人解答你的问题。

■ 什么是网页

  现在在你眼前,出现在显示器上的这个“东西”,就是一个网页。网页实际是一个文件,他存放在世界谋个角落的的某一台计算机中,而这台计算机必须是与互联网相连的。网页经由网址(URL)来识别与存取,当我们在浏览器输入网址后,经过一段复杂而又快速的程序(详见“域名系统”),网页文件会被传送到你的计算机,然后再通过浏览器解释网页的内容,再展示到你的眼前。

■ 构成网页的元素

  文字与图片是构成一个网页的两个最基本的元素。你可以简单的理解为:文字,就是网页的内容,图片,就是网页的美观。

  除此之外,网页的元素还包括动画、音乐、程序等等。如果想了解更多的话,请参考“商业建站指南”的“网站的要素”。

■ 揭开网页的神秘面纱

  在网页上点击鼠标右键,选择菜单中的“查看源文件”,就可以通过记事本看到网页的实际内容:

 

  可以看到,网页实际上只是一个纯文本文件,它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述(例如字体、颜色、大小),而浏览器则对这些标记进行解释并生成页面,于是就得到你现在所看到的画面。

为什么在源文件看不到任何图片?

网页文件中存放的只是图片的链接位置,而图片文件与网页文件是互相独立存放的,甚至可以不在同一台计算机上。

网页的类型

  通常我们看到的网页,都是以 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程序通常用于查询、搜索、或其他的一些交互式的应用。


 

网易虚拟社区就是使用了CGI


  ASP

  ASP 全称为 Active Server Pages(动态服务器主页),它一种应用程序环境,可以利用 VBscript 或 Java Script 语言来设计,主要用于网络数据库的查询与管理。其工作原理是当浏览者发出浏览请求的时候,服务器会自动将 ASP 的程序码,解释为标准 HTML 格式的网页内容,再送到浏览者浏览器上显示出来。我们也可以将 ASP 理解为一种特殊的 CGI。

  利用 ASP 生成的网页,与HTML相比具有更大的灵活性。只要结构合理,一个 ASP 页面就可以取代成千上万个网页。尽管 ASP 在工作效率方面较之一些新技术要差,但胜在简单、直观、易学,是涉足网络编程的一条捷径。


   

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 Object Model,文件目标模块),Layers(层) 和 CSS 等。DHTML 的目的在于加强网页的交互性;对用户的操作在本地就可做实时处理,从而得到更快的用户响应;使网页的界面更丰富多变,使页面设计者可以随心所欲地表达自己的构思。

动态 HTML 与动态网页是两个不同的概念,你可以简单的理解为动态 HTML 能使网页上的元素动起来(如文字的变色,图片的移动);而动态网页,则是在服务器端动态地生成你看到的“静态”网页,而这个网页上的元素,并不一定会“动”。

■ 选择一个适合自己的网页编辑工具

  了解了网页的类型及相关技术之后,下一步,就是要选择一个适合自己的网页编辑工具。


  Frontpage

  Frontpage 是 Microsoft 出品的,可能是最单、最容易,却又功能强大的网页编辑工具。采用典型的 Word 界面设计,只要你懂得使用 Word,就差不多等于已经会使用 Frontpage。就算你不懂 Word 也没关系,“所见即所得”的操作方式会让你很快上手,而且你无须学习 HTML 语法。

  但 Frontpage 的也有其不足之处:首先是浏览器兼容性不好,做出来的网页,用 Netscape 往往不能正常显示;其次,生成的垃圾代码多,也会自动修改代码,导致在某些情况下极为不便;再次,对DHTML的支持不好。但不管怎么说,Frontpage 的确是最好的入门级网页编辑工具。

  常见的版本为 Frontpage98 和 Frontpage2000。

 

  Dreamweaver

  Dreamweaver 是 Macromedia 公司的产品的另一款“所见即所得”的网页编辑工具。与 Frontpage 不同,Deamweaver 采用的是 Mac 机浮动面版的设计风格,对于初学者来说可能会感到不适应。但当你习惯了其操作方式后,就会发现 Dreamweaver 的直观性与高效性是 Frontpage 所无法比拟的。

  Dreamweaver 对于 DHTML 的支持特别好,可以轻而易举地做出很多眩目的页面特效。插件式的程序设计使得其功能可以无限的扩展。Dreamweaver 与 Flash、Firework 并称为 Macromedia 的网页制作三剑客,由于是同一公司的产品,因而在功能上有着一个非常紧密的结合。而最新推出的 Dreamweaver UltraDev 更支持 Asp,Jsp。因此,说Dreamweaver 是高级网页制作的首选并不为过。

 

FrontpageDreamweaver 哪一个更好?

对于这个问题的争论,自 Dreamweaver 出现之后就一直没有停过。虽然,两者确实都有着各自的过人之处,Frontpage 易学,Macromedia 高效,但总体来说, Dreamweaver 的优点更为突出与明显。在专业网页制作的这个圈子之中,几乎已经看不到 Frontpage 的影子了。

  代码编辑类的网页制作工具

  除了以上这些所见即所得的网页制作工具外,还有一些专门编辑代码的网页制作工具,例如 Homesite、Hotdog等。通常使用这些工具的以程序员为主。

■ 掌握一种图像处理软件

  美工设计是网页制作的一个重要的组成部分。往往我们说某人能做一手好网页,实际上上指他有很好的美术设计功底。作为初学者,至少要掌握一个图像处理软件。


  Photoshop

  Photoshop 是 Adobe 出品的最老资格,而又最功能强大的图像处理软件。很多人都会被 Photoshop 的复杂功能所吓倒,其实里面还是有不少“傻瓜”级的功能的。而且,哪怕你不是要处理网页的图片,掌握一些基本的 Photoshop 技巧,对于日常的生活、工作也是大有裨益的。



  PhotoImpact

  PhotoImpact 是台湾友立(Ulead)公司推出的一款图像处理软件精品。PhotoShop 等专业级软件不同,PhotoImpact定位于广大普通用户,提供众多“即拖即有”的现成效果和创意工具。它不仅有丰富的网页图库,同时也拥有强大的图形编辑及修片等功能。虽然在特效及照片处理方面与 PhotoShop 仍有很大的差距,但胜在操作简便,是一款“傻瓜级”的图像处理软件。 

  适量绘图软件

  以上介绍的都是一些“位图”处理软件,如果你更喜欢自己创作的话,也不妨学习一些适量绘图软件,例如 CorelDRAW、Freehand、Illustrator等,在此就不多作介绍了。

■ 本站建议的学习方式

  前面一口气介绍了网页的类型、网页的技术、制作网页的工具及常用的图像处理工具,是不是前面所讲的所有东西都是必须掌握的呢?答案当然是“不是”的。网页制作的学习是一个循序渐进的过程,以下,是本站推荐给大部份初学者的学习方式:

  入门阶段:此时的你,什么都不懂

先从最简单的 HTML 网页入手;
选择 Dreamweaver 作为你的网页制作工具;
选择 Photoshop 作为你的网页制作工具;
粗略地阅读本站的 DreamweaverPhotoshop 教程,了解这两个软件到底能做些什么;
制作你的第一个实验性的网站,遇到任何困难,请对照本站的相关教程,如果问题仍然没有解决,请将问题贴于本站论坛,让更多高手为你解答;

  初级阶段:此时的你,已经掌握了 Dreamweaver 和 Photoshop 的基本操作:

策划和制作你的第一个网站;
不断为你的网站增加内容与功能(例如尝试将一些 Java Script 小程序添加到你的网页中);
粗略阅读本站 HTML 及 CSS 的语法书,并尝试运用到你做的网页中。

  进阶阶段:此时的你,已经具有一定的网页制作经验,并逐步形成了自己一套的对于网页制作的理解,制作一般的网页已经不在话下:

根据个人喜好及实际需要,网页制作的方向,你可以向美术设计的方向发展,学习一些美术方面的知识;也可以向网络编程的方向发展,学习ASP等编程语言;也可以向信息制作的方向发展,锻炼自己在网站策划及信息采辑的技能;
常识制作其他不同类型的网站,从模仿别人开始,都逐渐形成自己的设计风格;
熟练操作 Dreamweaver 及 Photoshop 两个软件,并至少能读懂 HTML 及 javascript。

  高手阶段:此时的你,至少在美术设计、程序编写、或信息制作方面有一定的造诣:

学习
学习
再学习

  希望本站能伴随着你成长,如有问题,请到论坛发表。

上一个:色彩系列教程-----色系和色调
下一个:网页制作妙招

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,