【IT168 技术文章】
网站制作除了可以按制作的时期分为前期规划,中期制作、发布及后期维护外,还可以按工作性质分成:结构设计、资料收集、美工设计、宣传推广等。
基础知识
首先来了解一下我们平时所说的万维网。WWW(World Wide Web)是指Internet上的许多计算机连接在一起而形成的网络,这些计算机相互或是单向传递信息,包括文字、程序、图象、声音和其他众多多媒体文件。
我们怎么访问这些信息呢?
通过URL和相关的Protocol就可以做到了。
URL,全称Uniform Resource Locator统一资源地址,是通用资源标识URI(Universal Resource Identifier)命名体系规范中的一个分支。顾名思义,URL就是帮助我们在网络上找到所需资源的“路径”,举个例子:
http://www.company.com/welcome/index.html这个地址说明了通过http协议,能够在叫www.company.com的主机上的路径/welcome下找到一个名为index.html的文件。
HTTP(Hypertext Transfer Protocol,超文本传输协议)是用来在Internet上传送超文本的传送协议,它运行在TCP/IP协议之上。其他常用的协议还有文件传输协议FTP(File Transfer Protocol)、远程登录协议Telnet等。
TCP/IP全称Transmission Control Protocol/Internet Protocol(传输控制协议/网际互联协议),最初由DARPA(美国国防高级研究规划局)设计,用于国防相关的工程,现在被广泛的操作系统所支持(包括Windows、 WinNT、NetWare、 Macintosh等),成了通用的网络协议。
HTML(Hypertext Markup Laguage,超文本标识语言)是WWW上的发布语言、标记性语言或页面格式定义语言,可以用文本编辑器来制作,我们平时见到的网页就是HTML文件。HTML可以插入图形、音频、视频等对象,使其具有极为丰富的网页内容和很强的可观赏性,同时文件本身的体积很小(不包括插入的图像、声音之类额定文件),非常适合在网络上传输,目前版本是4.0。
前期准备篇
1.HTML语言
先要学习HTML超文本语言。也许有人认为有了Frontpage2000和Dreamweaver之类的图形化网页制作工具就不再需要学习HTML语言了,其实这是个很普遍的认识误区。因为即便有强大的软件,但它们都只能自动生成很简单的HTML代码,对于创作复杂的网页结构还不太实用。所以在很多时候,比如用Frontpage做好一个网页后,还经常需要直接在网页的HTML代码里作修改,加以完善,以求达到想要的效果。
另外,懂得HTML语言也可以帮助我们看懂别人做的网页里的结构和特效,从而提高自己的水平,这也是一个学习网页制作的大好机会。
2.工具的选择
除了学习一些基本的HTML语言知识外,一般说来还需要学习诸如网页制作工具、图形工具、网页动画工具、FTP上传工具等常用的软件。下面笔者简单地来介绍一下:
网页制作工具
Frontpage2000是Microsoft公司的产品,包括在Office2000专业版的套装里,支持所见即所得的编辑方式,在站点的管理方面做得很出色。不需要你掌握很深的网页制作技术知识,甚至不需要你了解HTML的基本语法,很适合新手。事实上,如果你会使用MS Word的话,你很快就会学会使用FrontPage,并发现这其实是一件再简单不过的事,因它的基本使用方法和Word十分相似。
Dreamweaver是Macromedia公司的产品,和Frontpage的功能类似,也是图形化的网页制作工具,还支持层的操作,并且可以避免生成冗余代码。现在,不少网站在招聘网站设计人员时,都要求应聘该职位的人员能熟练地操作Dreamweaver,所以立志于从事网站制作工作的朋友一定要学好Dreamweaver才行。
以上工具同时支持对HTML源代码进行直接编写。
Hotdog是纯代码工具,只支持手写HTML代码,但由于软件本身包含了很多制作网页时要用到的基本元素,所以笔者认为还是非常顺手的,特别是对于熟悉HTML语言的朋友来说。
图形工具
Photoshop5.5是Adobe公司的产品,是功能非常强大的专业图形软件,可以制作任何你想要的平面效果,其中包含的ImageReady是用于网页图片制作的。缺点是体积庞大,操作比较复杂,非专业人士很难熟练掌握。
Paintshop Pro则是一款小巧玲珑、使用简便的软件,功能也很多,基本上可以满足一般的图形制作,而且最大的优势是完全免费!
另外,还有矢量图形工具如CorelDraw等,可以做出体积很小的矢量图片,缺点是网页上无法直接插入显示。
网页动画工具
ImageReady已经介绍过了,可以制作GIF89a格式的图片。随着图片帧数的增加,动画形象会更丰满,当然体积也会更大。特点是与Photoshop交换作品方便,缺点是制作的位图体积较大。
Flash是Macromedia公司的产品,与Dreamweaver和Fireworks并称网页制作三剑客,可以非常方便地制作动画效果,并根据鼠标事件(Event)来引发一些特效,适合制作交互动画、小游戏。最吸引人的还是作品SWF体积出奇地小,并且可以以插件的形式加入到网页中。通常几分钟的复杂动画才几百k,比起AVI格式真有天壤之别,很多在网上传播的流行音乐的MTV,5分钟左右连图像带歌曲也只有2、3百k,而以压缩比高著称的MP3格式光5分钟的歌曲就要4M呢。Flash近两年来迅速发展,相信成为网络上广为接受的标准格式已经为期不远了。
FTP上传工具:制作好的网页要上传到提供给我们主页空间的服务器后,才能让网友去访问。上传工具将影响到我们对站点更新维护的效率。
CuteFTP是老牌的上传软件,功能强大,使用方便,其中包括支持拖放功能。
UploadNow!是一款中文软件,可以自动把本地站点上更新过的文件上传,避免上传没有更新过的文件,节省上网的时间和费用。
WS-FTP的速度特别快,支持拖放,对有多个站点要维护的朋友比较适用。
3.其它技术
此外,掌握少量的编程技巧和多方面的先进技术也是有益无害的。
首先是脚本语言Javascript和Vbscript,Javascript是Netscape公司的产品,它介于JAVA和HTML之间,是基于对象(Object)和事件驱动(Event Driven)并运行于客户端的编程语言。对于新版本的Netscape Navigator和Internet Explorer的兼容性都相当好。特别是Javascript,不允许访问本地硬盘的安全性及与操作环境无关的跨平台性也对它的推广起了很大作用,在一定程度上可以代替JAVA完成一些网页特效。学过C、C++的朋友会觉得Javascript是一种很容易学的脚本语言。建议先了解DHTML的对象模型再学Javascript。
其次是CGI(Common Gate Interface,通用网关接口),它不同于Javascript,运行于服务器端,动态响应用户的操作(包括用户搜索、提交表单、记数器等),可用任何编译型语言进行编写(如Delphi、C++等)。
ASP(Active Server Pages)是包括HTML标记、文本和脚本命令的文件,使用它可以创建动态、交互的 Web服务器应用程序,并可以组合HTML页、脚本命令和ActiveX组件以创建交互的Web页和基于Web的功能强大的应用程序。
IDC(Internet Database Connector,网络数据库接口)包含于Windows NT Server里的IIS(Internet Information Server),提供了一种网络数据库内容得以发布并可与用户交互的方法,它实际上是一个ISAPI应用程序。
ADO(ActiveX Data Object)可以与ASP结合,以建立提供数据资讯的网页内容,只需在网页页面中执行SQL指令(Structured Query Language,结构化查询语言),让用户在浏览器界面中输入、更新和删除WEB服务器上的数据资料。
PHP(Hypertext Preprocessor)与IIS上的ASP相似,是一种HTML内嵌式的语言。用PHP写出来的Web后端CGI程序,可以很轻易地移植到不同的平台上,而且是免费的。
XML(Extensible Markup Language,可扩展标记语言)是SGML(Standard Generic Markup Language,标准通用标记语言)的一个子集,可以很方便地对结构化数据进行描述,允许用户对自己的标记语言进行定义,实际上提供了一个直接处理Web数据的通用方法。
VRML是一种网上虚拟现实语言,可以实现实物虚拟化,由于能在电脑上虚拟真实的产品,所以对于商品展示和电子商务的发展起到很大的推动作用。
WML类似于HTML语言,是信息家电上网浏览所使用的,随着更多的人加入到网络中来和信息家电的普及,WML可能发展到像HTML一样成为一种标准。
总体规划篇
设计网站需要考虑的因素非常多,从前期网站开发时的设计、规划,到中期的资料收集、页面美工,再到最后的调试、发布、宣传是一个庞大的工程,要花费大量的时间和金钱。所以能找些志同道合的朋友一起来做比较现实,最好大家各自有各自的特色,每人负责自己拿手的方面,管理最熟悉的版面。也可以按别的标准来分工协作,比如一人收集整理资料,一人做美工,文笔出色的搞创作,外文过硬的做翻译,工作学习不怎么忙的人负责维护,站点的全局结构布局则一起讨论决定,总之各取所长,各司其职,各尽所能就是了。
1.站点的访客定位
只有确定了自己服务的对象是谁,才能有的放矢地投其所好,在内容选取、美工设计、划分栏目各方面尽力做到合理,并吸引住更多的眼球。就个人站点而言,其目的大多是为了展示自我的风采,为众多有共同兴趣爱好的朋友提供其所需的咨询和资源。所以把访问者定位于和自己年龄相仿的网友是比较合适的,按这部分网友的兴趣把内容收集起来,加以分类整理就可以大致上确定站点的发展方向了。当然,在站点正式运作后,也可以通过调查表单和E-mail来了解访问者对站点的看法和建议,从而及时作出调整和修改,让站点更适合来访者的口味。
2.站点的主题选择
可选择的范围很广,但建议选自己擅长的或者非常喜欢的,并且立志做到最好。因为网络上各种各样的咨询信息很多,别人可以轻易地在知名站点查找几乎所有自己想要的信息,但可能要花上不少时间或只能找到一部分信息,所以我们要关注的是怎样节省网友的时间,让他能更快更便捷地找到想要的内容,这就是我们和那些知名的大站点竞争的焦点了。
往往内容特别丰富多彩的站点都有一个致命的弱点,那就是查找信息困难。为什么会这样呢?其实原因很简单,正是因为注意面面俱到,使内容太多、太杂,网友查一个消息要点上很多次鼠标,而且还会像进了大观园一样找不到来时的“路”。最难的是这个弱点没法克服,只能使用导航栏和有条理的索引来缓和。所以笔者不建议大家做这种“面面俱到、什么都有”的站点。
如果有时间的话,还可以自己写些文件放上去。不管是散文、小说还是软件教程,甚至是游戏攻略也行,只要有你的特色,相信一定会被网友接受的。
3.站点整体风格的确定
知道了什么样的人会来以及要做什么样的内容,就可以确定需要什么样的风格了。如果有美工基础的话,只要再加上少许的创意,就可以做出非同一般的效果。让人看一眼就留下深刻印象的站点,无论对于吸引眼球还是增加回头率都是大有裨益的。
另外,风格是非常抽象的概念,往往要结合整个站点来看,而且不同的人其审美观也不同,对于风格的喜好也很不同。所以想使每一个人都满意是不可能的,重要的是让自己先满意,再照顾忠实的支持者。如果站点内容范围不太广,属于相同的主题,可以考虑整个站点设计为同一种风格;但如果各栏目的差异很大,比如站点里既有严肃的军事栏目,又有轻松活泼的动漫栏目,很显然将这两者设计成各有特色的风格会更使人感觉舒适。可是不管用什么风格,都要记住风格是为主题服务的,也就是要让它做好衬托气氛的任务,而不是单纯地照搬照抄别人的特色,因为也许那并不适合你的站点。
4.浏览器版本和分辨率
不同的浏览器对网页会做出不同的显示,在Internet Explorer里非常漂亮的页面,用Netscape Navigator显示可能是一团糟。所以即使在现在这种IE一统天下的时候,也要考虑少数的其它用户,也许他们正是你的潜在访客,你总不愿意因为自己的懒惰而失去他们吧。把每个网页都放在两种浏览器里看看,有什么问题马上解决。如果考虑到和旧版本的兼容性就更好了,因为有些新的网页技术老版本的浏览器并不支持。
1024×768、800×600、640×480是使用最多的3种分辨率,一个网页能在这3种分辨率里都很好地显示是最好的,但如果不行的话,请最先考虑800×600,因为现在大多数人都在使用它。具体做法:可以在网页里做个表格,并且把宽度设置为“100%”,而不是具体的像素值,这样一来,网页就会在不同的分辨率里自动调整。
5.尊重版权
互联网的精神是“共享”,但这并不意味着你可以随便抄袭别人的作品,因为网上的作品也是某个人或某些人辛勤劳动的成果,不管在什么情况下剽窃都是不道德的行为!甚至会引起法律问题:在外国版权问题受到重视是由来已久的。美国的MP3.COM网站因为向网友提供无版权的MP3音乐,而被唱片公司联名告上法庭;Napster公司因为发布了同名网络音乐搜索软件而被告得一败涂地,现在还在停业整顿中;中国在版权问题上的立法和执法上历来都比较薄弱,但著名的原创文学网站榕树下和未经授权就出版榕树下网站原创作品的某家出版社对簿公堂,而法院最终判决榕树下网站胜诉,就意味着中国在版权问题上有法可依,有法必依的时代来到了。所以在转载别人作品的时候要先征得对方同意,并在网站上注明作者和其他相关信息,“先斩后奏”、甚至“光斩不奏”的做法只会害了自己。