网站制作葵花宝典之初级篇 郝尚永 2000年 第8期 细心的读者一定发现了,我一直用的是制作“网站”而不是“网页”,这二者是有这区别的。简单说,网站就是网页的有机集合。 网页的学名称作HTML文件,是一种可以在WWW网上传输,并被浏览器认识和翻译成页面显示出来的文件。WWW是“World Wide Web”的缩写;HTML的意思则是“Hypertext Markup Language”,中文翻译为“超文本标记语言”。“超文本”就是指页面内可以包含图片、链接、甚至音乐、程序等非文字的元素。网页就是由HTML语言编写出来的。 #1 一、确定网站的类型和主题 你看了这个题目是不是直撇嘴,这谁不知道!在这里可提醒你,千万别小看了这一点。有很多朋友就是忽略了这一点,而仓促上阵,做到一半感觉不好又从头再来。一定要称选好类型和主题,正所谓“磨刀不误砍柴功”,而且,好的网站类型和主题也是吸引人的关键。 1.建立网站的目的 就是为什么要做网站?希望哪些人来访问网站?希望把哪些信息提供给访问者?希望从访问者中得到哪些信息?计划花多少时间和钱来管理和维护站点?访问者要花多长时间才能下载本网站的网页?等等。 一般的个人网站,其目的不外乎是展示自我、交友、技术演练等等,栏目众多,应有尽有,可也常常让人无所适从。看过太多缺乏个性的主页,偶尔闪现的特色栏目才最具冲击力。特色是网站的灵魂。宁可集中精力办好一两个有个性的栏目,或者干脆以某一主题建设独立的网站,也不要追求空洞的大而全。 个人网站难道都已经到了没有特色题材可发掘的地步了吗?非也!只要稍微留意,就会发现未开垦的处女地实在太多。比如摄影、收藏(火花、 烟标)、风筝、剪纸、舞蹈就与众不同,其它像书法、篆刻也是很好的题材。例如,你最大的专长是对照相技术很了解,那么你的个人主页内容主要是讲述一些有关照相方面的知识,自己的经验和作品,再列一些相关的站点。这样一来,你可以将所有心思花在自己最熟悉的内容上,而且别人也觉得你是一个照相方面专家。 2.网站结构的总体设计 一般来说,Web网站上的文件分为两类。 第一类的顶层(top layer)文件,即用户进入你的网站后所看到的几个文件。这一层大多由小的HTML文件组成。 第二类文件是内容。这是一些活跃在网站“较深层”的文件,通常它们是一些更重要的文件,其中包括共享文件、工作手册、演示文件等,甚至还包括数据库。 你需要把整个网站内容分类列表,把各个项分为逻辑组。确定各页的主题、包含的内容,以及各页之间的层次结构和逻辑关系。一个深思熟虑的结构将在建立和管理网站时省时省力。 3.网页的整体规划 在你动手建立网站之前,对网页进行完整、详尽的整体规划是至关重要的。 在这期间,可以用彩色铅笔在纸上一页页地画出你将要制作的每一幅网页的布局,其中包括你的网站内容分为哪几个部分,每幅网页中图片和文字的排列、它们之间的相互关系、在页面中各部分的颜色如何选取,如果是框架页面,还要设计页面框架的分布,页面中在什么位置放置链接点,页面中包含哪些信息内容等等。这样做的好处是能让你要表达的所有信息都有条不紊,不会造成任何遗漏。 有了上面的网站规划后,你便可以着手统计和考虑下面的一些问题,即每幅网页需要事先制作多少个图像文件?总共需要制作多少图片?各网页都需要哪种HTML元素表现?是否根据每幅网页的不同内容,在相应的网页内添加一些与主题对应的JavaScript特效?网页中所有文字内容是否做成文本文件?…… 把这些问题和自己得出的结果记下来,统计出各种类型文件的数目,用便于识别的单词给各个文件命名,归纳放入自己能够识别的子目录中,这样便于管理。这些工作做好了,以后的工作就会有很高的效率。 #1 二、准备制作网站的素材 选择好所建网站的主题后,下面的工作就是要准备好网站所需的各种素材,做到有备而发。制作主页的素材包括网站要用的文字、图片、动画甚至声音、影像等多媒体文件,这是美化图文并茂的网页不可缺少的点缀。 1.图片文件 在主页上加入图片可以使你的主页更显活泼,所以,加入一些图片是必须的。现在,有很多包含丰富内容的素材库光盘,从中可以挑选到不少好的美术作品。另外,Internet更是一个大素材库,许多网页制作者也习惯用从网上下载图像作为自己网页的组成部分。这种做法目前虽不受法律限制,但我个人认为这样并不可取。因为这些图片、图标其实早已被其它许多网页大用特用了,也不能体现你自己网站的个性和特点。所以我建议你尽可能地自己制作图标。 需要提醒一下的是:加入的图片要注意其色彩和图形的选择,以取得较好的视觉效果。 2.文字 文字部分我建议最好用纯文本的格式保存,这样如果你在其它的网页中需要用到同一内容的时候,只需简单的拷贝和粘贴便可以完成。 3.其它文件 你还可以为主页上加上背景音乐、视频等东西。背景音乐最好使用MIDI文件,当然,音色不会太好。不过MIDI文件的优势在于其体积较小,便于传输。另外,最好选择音色柔和的曲子,至于数量,一首就足够了。Java动画的使用,会使你的主页浏览速度大受影响,但也能增色不少,这就要你自己权衡了。 到现在为止,已经做好了足够的准备工作。你很快就会发现制作一个网站其实是一件非常容易的事情。 #1 三、初识HTML 提起HTML(Hyper Text Markup Language)——超文本标识语言,它是一种计算机语言,同时它又是文本。所有的主页实际上都是一个HTML文件。鉴于HTML既是语言又是文本的特点,我们可以用文本编辑器或主页制作工具来设计主页。但是,还是建议你稍微了解一些HTML的语法。这样,你可以更精确地控制页面的排版,可以实现更多的功能。 1.HTML的规则——标签 HTML靠标签来标识主页中的文字、图片的位置。页面以标签开始,以结束。里面又好像一封信件分为两部分,前面的“头”以
开始,以结束;后面的“体”以开始,以结束。那么即使看到的是空白的主页,它的文件的HTML代码也应该是这样的: 2.一些常用标签属性用法举例 (1)注释标签! 用户使用“!”标签可以在HTML程序中加入注释。“!”后文本在浏览器中是看不到的。 用法举例:<!显示标题><上一次修改时间:1/1/98> (2)标注符标签!DOCTYPE !DOCTYPE 标签是SGML(标准通用标注语言)标注符,用来指明创建主页时使用的HTML DTD(文档类型定义),每个文档应当把放在文本的第一行。 用法举例: (3)背景标签 BGCOLOR 设定文档的背景颜色。 用法举例: BGPROPERTIES 该属性可为文档添加水印。所谓水印,即一个不与文档一起滚动的背景图像。用BACKGROUND属性设定的背景是与页面一起滚动的。该属性只使用一个值:FIXED。 用法举例: LEFTMARGIN 该属性使浏览器设定整页的左边距,取代缺省页边距。 用法举例: LINK 该属性为文档中尚未访问的链接设定颜色。 用法举例: (4)超文本链接标签A A用来定义超文本链接。超文本链接(或称超级链接)是网页设计的精髓,它可以是文本,也可以是图形,或者两者兼而有之。通过超文本链接,用户可以直接链接到同一HTML文档的另一位置,或者链接到另一个URL。使用时,表示所包含的超级链接的语句开始,用表示其结尾。A标签(至少)必须使用HREF或NAME属性。 HREF属性的值指向文档内部或外部的一个对象,如文本或图形。若链接到本地文档,令HREF的值为所链接的文档名。若两个文档不在同一目录下,只需在目标部分加上路径即可。 用法举例:指向doc.htm 指向doc.htm 若要链接到一个文档的指定位置,需用NAME属性为目标文档提供一个标志。使用如下格式定义一个链接:指向Mark1 对目标文档定义为:…… 这样当用户点击高亮度的“指向Mark1”时,就会链接到“doc2.htm”的……处。 若想链接到同一文档的指定位置,则可直接写成指向Mark1 。 (5)文字标签FONT FONT标签可以设定文本的字体类型、大小和颜色。注意,它与BASEFONT的区别在于BASEFONT可以设定整个文档的字体类型、大小和颜色,而FONT标签仅把格式用于FONT标签所包含的文本。适当的FONT设置可以通过字体、大小和颜色的变化来引起用户对文本的注意。 COLOR 该属性用于设定文本颜色。颜色值可以用颜色名称、RGB值和HEX(16进制)来表示。 用法举例:红色 FACE 该属性可使浏览器以特定的字体显示文本。用户可以列出几种字型名称,以逗号分隔,浏览器将自左向右尝试每种字体,直至发现一种可以使用的字体为止。如果设定字体都不能使用,浏览器将使用缺省字体。 用法举例: POINT-SIZE 该属性用于字体大小,所用的单位是磅。 用法举例:18磅 SIZE 该属性用于设定字体大小,允许设置的值为1~7。如果在数字前加上“+”或“-”则表示字体的相对大小。 用法举例:7号字 WEIGHT WEIGHT属性用于设定文本文字的粗细。 用法举例:最细字体显示 由于篇幅的限制,无法为大家详细解释所有的标签属性,请大家参考HTML相关资料。 这里建议,你可以制作一些HTML模板文件。比如说在制作同一专题中的不同网页时,你每次只要调出相应的模板文件,再将文字内容通过拷贝、粘贴、替换等方法加入,再在适当的位置插入图片即可。 在这些HTML模板文件中,你必须加入的元素包括:文件前景、背景颜色设定、文字字体、字号定义、表格制作、图像嵌入、链接锚点、框架结构、表单元素等。当你制作网页的时候,你只须不断调出各种HTML模板文件,根据实际需要变换文字内容及各种标识命令数值的大小,不断地替换、复制即可完成任务了。 #1 四、网页制作工具 古人曰:工欲善其事,必先利其器。制作网页第一件事就是选定一种网页制作软件。从原理上来讲,用Word或者Netscape自带的网页编辑器就可以制作。但选择一个好的编辑器会令你事半功倍! 下面为你介绍几种主流的工具。 MS FrontPage 98/2000 对那些不懂HTML的人来说,首推微软的MS FrontPage 98/2000,其标准化的工具栏布局,类似于OFFICE系列,而且所见即所得,很容易上手。使用MS Frontpage 98/2000创立主页,你能真正体会到“功能强大、简单易用”的含义。 页面制作由其中的Editor完成,工作窗口由3个标签页组成,分别是WYSIWYG编辑页、HTML代码编辑页、预览页。站点管理功能由Explorer完成。预置了50种主题(Themes),便于设计者建立页面风格一致的站点。 HotDog Professional 4.0 是较早基于代码的Web开发工具,主要针对那些希望在页面中加入CSS、Java、RealVideo等复杂技术的高级设计者。 HotDog最具特色的是提供了许多向导工具,帮助设计者制作页面中的复杂部分。在http://www.sausage.com 站点提供大量Java动画工具,按钮编辑工具,加强了HotDog的功能。 Dreamweaver 3.0 Dreamweave是一个所见即所得的网页编辑软件,它的强大的多媒体网页设计功能和与其它图像编辑软件、文字处理软件高度紧密的结合,让你在设计网页的时候不再会有力不从心的情况发生,它得到了众多网页设计者的青睐。Macromedia公司继成功地推出Dreamweaver2.0后,对2.0版进行了全面的扩充和增强,推出了功能更为强大,使用更方便的3.0版。 还有许多新开发的网页制作软件,这里就不再一一列举了,你可以自己去感受几个,我想必有一款会适合你。 #1 五、FrontPage 98/2000简介 FrontPage是较好的网页制作工具,基本上实现了所见即所得,即使你不懂HTML语言,也能制作出专业效果的网页。如果你是高手,也可以在HTML窗口里直接写入代码,再切换到Preview窗口看效果。它提供了许多先进技术,如主题、共享边界、层叠样式表、动态HTML、框架、频道定义、ActiveX、Java Applet等。编辑时有三种窗口:Normal默认窗;HTML窗,可以看到FrontPage自动生成的HTML代码;Preview窗,是用已经安装的Internet Explorer来显示网页,如果你没有安装IE就不能预览。整体而言,FrontPage可分成三大部分:编辑网页的FrontPage Editor、管理网站的FrontPage Explorer以及提供网站功能的FrontPage PWS(Personal Web Server)。 用FrontPage制作主页时,一定要学会应用表格。因为只有使用表格你才能方便有效地安排好图片、文字的布局。一张图片,一段文字都应尽量放入表格的一个单元格中。你可以使用拆分、合并、插入单元格等功能,自由设计页面的布局。 许多网页上都有一些风格各异的水平线,将网页分隔成几个部分。要在网页中插入水平线,首先要把插入点移到要插入水平线的地方,然后使用插入选单上的水平线选项。插入点如果在行尾,水平线就插入在下一行。如果网页中没有应用主题,FrontPage将按照当前默认的水平线样式或前一次设定的水平线样式插入一个新的水平线。如果网页应用了主题,新插入的水平线的样式由网页所应用的主题决定。 如果你是一位条理性很强的人,相信框架对你是很有用的。框架可以将浏览器窗口拆分成几个独立的部分,每一部分都可以显示一个独立的可以滚动的页面。这一组框架称为框架页,框架页定义了每一个框架的大小和位置。在框架页面中建立超级链接时,因为在同一个框架中有不同的部分,而且这些部分又彼此相对独立,这样我们可以利用这一条特性,在框架中建立超级链接,来达到特殊的效果。 FrontPage支持动态效果,如果网页中的文本和图像运用了动态效果,当你切换到预览方式或用Web浏览器观察网页时,文本和图像不是一下子显示在屏幕上,而是从各个不同的角度逐渐显露出来。实现动态效果,首先要选择运动的元素,然后使用格式Format选单上的动态效果Animation命令,FrontPage将列出14种动态效果让你选择。要取消动态效果,选择关闭(off)。网页上的不同元素可以分别选择不同的动态效果。但是,只有支持动态HTML的Web浏览器能够显示出动态效果。此外,动态效果只在显示时是有效的,对打印无效。 主题Theme是FrontPage中一个很重要的技巧,主题非常类似于Word中的样式,它预先定义了诸如背景图案、项目符号和编号、字体、水平线、段落等网页元素的格式。当网页应用某个主题时,就能从主题中自动获取这些格式。FrontPage提供了大量设计好的主题,恰当地选择和运用这些主题可以大大简化你的工作。 FrontPage不仅仅是一个网页编辑器,更主要的它还是创建和管理网站的工具。使用FrontPage Explorer,你可以轻松地创建一个新的网站,或者打开一个已有的网站,在网站中添加、删除或修改网页,改变网站的结构等。但是这些都必须要有服务器的支持。这样看来,似乎我们用不上,其实不然。我们制作网页的过程都是先在自己的微机上设计、制作好,然后再上传到服务器。在设置超级链接的时候,一不小心就会成为。如果你打开了FrontPage Explorer,在制作网页的链接时,它都能很好地进行管理,所有链接都是相对地址,这样一来,不管你把网页上传到什么目录,只要不改变它们之间的相对位置,就不会有无效的链接。 由于篇幅限制,只介绍了一些FrontPage的简单操作,下面的工作就只能靠你自己去慢慢揣摩和体会了。有什么疑问你可再查看一些FrontPage的参考书籍。 #1 六、让你的主页更动人 许多网友都拥有自己的主页,并想把主页做得更加动人,但仅凭几张图片和一些文字是不够的,因为这样看起来显得太死板。主页动态效果可由以下方式来表现:在Web 页中加入GIF 动画、访客计数器、留言板、JavaScript 、Java Applet、文字滚动条、计时器等。下面就对它们的做法分别讨论: 1.GIF 动画 得到GIF 动画的方法有下面两种:一是到一些网站下载现成的优秀GIF 动画文件,或者调用FrontPage自带的大量GIF 动画文件;二是用GIF制作工具自己制作GIF 动画,例如可以利用现在常用的GIF MOVIE GEAR软件来制作动画。它可以把几张普通画片合成一张GIF 动画。这个软件是共享软件,如果你需要的话,在这里下载:http://www.gamani.com。 2.JavaScript JavaScript是Netscape公司推出的一种简洁的、面向对象的、跨平台的描述语言,现在已成为主流浏览器都支持的标准Internet开发语言。透过JavaScript可以做到回应用户的需要事件而不用任何网络通路来回传输资料。所以当一位使用者输入一项资料时,它不用经过传给服务器处理再传回来的过程,而直接可以被客户端的应用程序所处理。因此,利用JavaScript可以开发出快速运行的动态HTML页。在实现上,你可以直接编写JavaScript语句,只要添加到你的主页的HTML语句中就可以了,另外,现在有好多流行的Java制作软件,支持很多种Java变化,你操作一下就会自动生成代码。 3.访客计数器及留言本 许多主页里都有访客计数器和留言本,这两项功能由服务器提供,如果你的主页所在的服务器不提供此项功能的话你也不用着急,Internet上有许多免费的计数器和免费留言本供你免费申请使用。 在主页上加上计数器可以直观地表明目前为止共有几名访客访问你的主页,帮助你统计来访的人数,同时也显示出你的网站受欢迎的程度。而加入计数器后,你可以通过点击主页上计数器的图标访问你自己的个人账号,从而了解到访客数、访客地区、时段分布、访客来源等等许多详细的报告。计数器的申请有很多选择,建议你去网易(http://www.nease.net/)、自贡热线(http://www.zg169.net)、“焦作信息港”的个人天地(http://202.102.230.15/personl/)去看看。统计器则特别向你推荐以下几个:酷站统计(http://166.111.72.30/)、SuperStats(http://www.superstats.com)。你只要将提供给你的原代码放入到首页的HTML里就可以了。 同样,留言本也是免费提供的。网易就可以申请,但在功能上远不如Guestbook 强大。怎样申请Guestbook的免费留言本呢?你先要进入Guestbook主页http://www.Lpage.com,然后选择申请留言本,按照提示一步一步操作就可以了。 随着网络的发展,又诞生了很多的新兴技术。如Flash动画、CSS样式、动态HTML等,我们《电脑报》“网页作坊”栏目以后会对这些新技术及使用技巧作详尽的介绍。 #1 七、网站的上传与发布 1.主页空间的申请 主页制作好了,自然就要把它放到WWW上,让全世界的人都能看到。如何申请到一个理想的免费主页存放空间,这一点比较关键,因为它不仅是将来主页的存放场所,而且主页上一些功能的实现还要依赖于这些服务器所提供的服务。选择的关键有以下四点:(1)连接速度;(2)服务器稳定性;(3)是否提供CGI(公共网关接口)权限,是否安装有Microsoft FrontPage Server Extension;(4)提供空间的大小(一般应选择10M以上)。在综合考虑各方面因素之后,向大家推荐以下几家: 自贡169:http://www.zg169.net 广州网易:http://www.nease.net 湛江热线:http://www.zhanjiang.gd.cn 下面以广州网易为例为你介绍一下申请步骤: (1)取一个你喜欢而又不与他人重复的账号,最好是容易记住的那种;例如:取名good,则在网易的网址为www.nease.net/~good。 (2)设定密码并填一些关于你和你主页的资料(姓名,身份证,E-mail,省份,爱好,单位等)。 (3)申请登记完成后,服务器会给你发一封确认信,你收到后不要修改,直接回复就行了。隔一段时间,就会收到账号开通的消息。有些站点可以立刻使用。 好了,恭喜你已经在网上有个家了! 假如申请的用户名是good你可以获得: (1)FTP地址:ftp://good.163.net (2)主页地址:http://good.163.net (3)维护管理:http://www.gznet.com(输入用户名和密码即可进入系统) (4)留言板地址:http://guestbook.good.163.net (5)访问统计:http://log.good.163.net 2.网站的上传 在网上有了自己的家,下面的问题是如何把网页传到网上去,一般我们使用FTP(远程文件传输)的方式上传到服务器中自己的目录下。常用的FTP软件有许多,这里向大家推荐的FTP工具是CuteFtp(其最新版3.0版的下载地址是:ftp://202.102.230.19/ftpgj/cute3032b.exe),CuteFtp支持断点续传、多个文件上传和直接窗口拖放。下面为你简单介绍一下CuteFtp的用法。 下载并安装成功后,运行CuteFTP,此时会出现一个窗口(Site Manager窗口):左边是排列成目录树状的FTP文件夹,右边是相应的FTP结点。此时我们要为正确运行CuteFTP作一些准备工作。点击“Add folder”→输入文件夹名 (如:MYFTP)→点击“MYFTP”文件夹→点击 “Add site”,在此窗口中,须要输入如下几个参数: Site label:你给这个FTP连接取的标签名,如“初学者园地” Host address:你要连接的FTP服务器主机名,如www.nease.net Login type:登录方式,一般选取NORMAL (正常) Transfer type:传输方式,一般选取AUTO DETECT(自动侦测) 在User id用户名处填入你的账号,Password处填入你的密码。 准备工作完毕,开始第一次FTP连接:(1)通过拨号网络,连接登录到Internet上。(2)运行CuteFTP,此时出现Site Manager窗口。(3)选取相应的FTP文件夹、连接主机名。点击“Connect”按钮即可。(4)稍候片刻,就会登录进入FTP服务器。(5)此时CuteFTP中会分为两个窗口,左边是你自己机器的文件目录,右边就是服务器上的文件目录。欲进入某个目录,只须用鼠标双击窗口中相应的目录图标即可。欲下载某个文件,只须在服务器窗口中点击此文件名,选择菜单“Commands”中的“Download”,或者直接用鼠标拖曳,CuteFTP就会准备将此文件下载到你本地机器的当前目录,并弹出一个对话框询问你是否确认?点击“OK”即可。 主页已经全部传到服务器上了,可能会出现不能浏览的情况。这时你要看一下默认的引导文件是否设正确,如网易服务器要求文件名为index.html,自贡的为default.htm。另外,每个链接最好在上传后都测试一下连接是否正确。 3.主页的推广 主页做得再好,如果没有访客或访客稀少,当然是一大遗憾,网络上的原则是“酒香也怕巷子深”。在网络上每天都有千万个新站点推出,你的主页再出色,也应该努力宣传自己,否则人迹罕至,会埋没了你的成果。因此,主页推广工作就显得尤为重要。 推广主页途径一般有下面四种方法: (1)在各大搜索引擎登录自己的站点,让别人可以搜索到到你的主页。如在搜狐(http://www.sohu.com)、悠游(http://www.goyoyo.com)上登记自己的网站。要登记自己的主页须准备好这些材料:你的姓名,你的E-mail地址,主页名称,主页网址,主页简介,主页关键字,主页类别。然后进入搜索引擎的主页,填完一份申请表后,就可以静候佳音了。一般国内的搜索引擎会在几天内将你的主页加入其数据库,并给你发一封确认信。 (2)在网站排行榜上登记。如果你的站点日访问人数很高,有幸进入排行榜的前100位,那么你的知名度会大大提高,访问的人数会更加多。目前,较有影响的两大排行榜是网易的中文站点排行榜和热讯排行榜。 (3)另一条途径是广告交换。所谓广告交换就是在你的主页上显示广告提供商提供的广告条幅,每显示一次,你自己的广告条幅就可以在别人的主页上显示0.5至1次不等。国内这样的广告商不少,著名的有名网盟(http://www.webunion.com)、酷站(http://166.111.72.30/)等。你可以访问广告商的主页,在填写了一张申请表后你就可以获得一段广告代码,你必须将这断代码加入你的主页中。要进行广告交换你还必须为自己的主页设计一个广告条幅,它就是你为自己主页所做的广告。一般为GIF图像,尺寸为400×40或468×60像素,文件大小应相应控制在10K或7K以下。如果你没有这方面的经验,建议你去Smart Click(http://www.smartclicks.com/bestban/current.html)看看那些优秀条幅都有哪些可以借鉴之处。将你做好的条幅按广告提供商的要求上传以后,访客就可以通过点击广告条幅访问你的主页了。 (4)友情链接。不妨同访问量大的站点作一下友情链接,通过这些网站来访问你的个人主页。虽然友情链接的有效链接率并不高,但是要记住,网络是人与人交流的新渠道,在网络上结识大量的网友,不也是一件令人兴奋的事吗! 编者按: 到这里为止,《网站制作葵花宝典》之初级篇全部刊完。希望能对你有所帮助!由于篇幅的限制,很多内容无法一一言尽。俗话说,师傅领进门,修行在个人。能否修炼成“绝世武功”,就要靠你自己的头脑和努力了。如果你愿意学习更多的东西,继续修炼升级自己的“武功”,使自己的主页更完美,请你继续关注《电脑报》的《网站制作葵花宝典》系列。