网站建设全攻略——从入门到精通(具体细节篇)

原创 2005年06月01日 11:09:00
1.导航栏的设计

  每次增加新的栏目或是对原有栏目的调整,都要对所有的页面更新。刚开始可能还算轻松,因为没几个页面,但当有几十、几百个网页后,这工作量实在太大了!如果偷懒只更新几个主要的网页,访问量就会剧减。

  笔者首先想到的是FLASH可以做出漂亮的导航按钮,所有的页都用一样的导航栏,以后只要更新这个FLASH动画就可以使整个网站的页面都得到更新。但实际使用后发现FLASH造成网页的体积过大,在加上网站LOGO,商业BANNER……使网页变的臃肿不堪。

  这办法不太好,于是笔者又考虑做个Javas cript的导航栏,体积又很小。假设我们要做一个包含“动漫专栏”、“游戏天地”、“音乐同人”、“交友直通车”四个栏目的导航栏:

  首先是便于更新,所以要做个外接的Javas cript脚本,至于用到的语句就只有document.write(“”),新建一个文本文件,打开,输入: document.write(" "); 
document.write("<a href=http://richardddd.easthome.net/comics/index.htm>动漫专栏</a>"); /*在“ ”里的是HTML格式的<A>元素,该元素定义了一个锚(Anchor),也就是把“动漫专栏”作为一个超链接,“HREF”属性指定“动漫专栏”链接到的其他资源上,也就是<a target=_blank href=http://richardddd.easthome.net><a target=_blank href=http://richardddd.easthome.net<>http://richardddd.easthome.net;</a>;/a>”。(以下相同)*/
document.write(" ");/*该行是让链接之间保持一个空格,使链接的下划线不至于连在一起。也可以把空格该成“|”等来制造各种效果*/
document.write("<a href=http://richardddd.easthome.net/game/index.htm>游戏天地</a>");
document.write(" ");
document.write("<a href=http://richardddd.easthome.net/music/index.htm>音乐同人</a>");
document.write(" ");
document.write("<a href=http://richardddd.easthome.net/friend/tuili/index.htm>交友直通车</a>");

  完成后,选择“文件”菜单的“另存为”,在对话框的“文件名”中输入“navigation.js”,“文件格式”里选“*.*”,于是,外接的JS脚本就写好了。

  接下来就是把JS链接到我们主页的HTML源代码里了。

  具体做法:

  在<body>和</body>之间,选择想要让导航栏显示的地方,定位,输入:

<s cript language=“Javas cript” src=navigation.js></s cript>

  保存退出。随后就是测试的工作了。双击主页,看看效果,导航栏是否出现在我们想要的位置上。效果如下:

  动漫专栏 游戏天地 音乐同人 交友直通车

  注意: 

  1.在navigation.js里,除了HTML格式本来就必须有的空格外,最好不要有别的空格(包括全角的空格)或是回车,不然的话,装载网页时可能会提示出错。如果觉得语句太长,想让脚本看得清楚些而使用回车时,可以在每行末用“/”来结束,再打回车。

  2.这个navigation.js要和网页放在同一目录下,如果要放在不同的目录,就要在网页里的那段代码里navigation.js的前面加上该文件的路径。 

  导航栏真的是网站里非常重要的一环,如果少了导航栏,你的站点将会是一个漆黑的、让人摸不到东西南北的大迷宫(大家玩过仙剑吧,和那个迷宫是一样的:)。即使是经验丰富的老鸟,也会被弄得不知所措,说不定还会以为你的站点就这么一页呢。所以为了方便访问者,同时也是为了你的网站能有更多的回头客,首先就必须做出分类明确、位置醒目的导航栏,把你的站点的风采以及你自己的才华完全展现出来。其次还要保持导航栏的便于更新,因为随着时间的推移,你的站点内容会越来越丰富多彩,总得重新整理整理吧,让自己的网页随时保持在最方便访问的位置,而不是层层的链接之下。想想看,要是访问者为了找到自己感兴趣的内容必须点上5、6次鼠标的话,那你肯定就失去他了

2.留下联系方法 

  留下E-mail或其它联系方法(比如电话号码、联系地址等),给了访客一个发泄对你站点的不满的机会,同时也可以方便访客通过这些渠道把网站的BUG反馈给你,之后让你能及时修改调整。

  但建议不要留下ISP给你的E-mail信箱,因为这个信箱在邮件超出限定的容量时,要收取相当高的费用。如果你的访客中有人因为对你站点的不满,而给你发邮件炸弹的话,你就有得受了!所以最好只留免费的信箱,比如新浪网就提供容量达50M的免费信箱,即便有人攻击也没什么大不了的——用WEB方式登陆新浪后,再删除就行了,就算真的被炸了,还可以重新申请(反正不收钱)。反观攻击者,要塞满50M的邮箱也够他累的了^_^

  如果你平时使用ICQ或是OICQ的话,不妨也把号码留在网页上,因为这种点对点的传输方式比E-mail更迅速、更直接,会使向你反馈意见的朋友觉得很亲切。

  3.使用统一的风格

  CI(corporate identity)意思是通过视觉来统一整体的形象,包括LOGO、色彩、广告语等可以作为标志性的东西。这原是广告学里的一个专用名词,但用在网站设计上也很恰当。背景颜色、字体颜色大小、导航栏、版权信息、标题、注脚、版面布局,甚至文字说明使用的语气这些方面都要注意前后一致,或者说前后协调。

  4.色彩的搭配 

  暖色系:红、橙、橙黄、黄等色彩表现温馨、和煦、热情。 
  中性系:黄绿、绿等色彩表现舒适、和谐。 
  寒色系:青绿、蓝绿、蓝等色彩表现宁静、清凉、高雅。 

  一般来说,学过美术的人对于色彩的选择和搭配方面比较具有优势,但这也不是绝对的,只要平时注重自己审美观的培养,即使不是专业人员一样可以有好的创作。再退一步,你不是专业人士,也没有这方面的天赋,其实也没关系,你可以使用大家一致公认的经典组合(如黑底白字),即使缺少新意,也不会让人觉得不舒服。

  但必须注意的是,在整个站点的色彩选择上,应该尽量使用同一种色系的,色彩种类以不超过三、四种为界限。 

  适当的对比色可以增加文字的可阅读性,但如果对比太强的话,就不适于长篇文本的阅读,并会对浏览者的视力造成很大的伤害!

5.使用CSS控制整体格式

  CSS(Cascading Style sheets,层叠样式表)是为网站制作者带来福音的好东东!它最大的特点是可以使网页的内容和结构版面控制相脱离,大量的减少网页中重复使用的HTML代码,从而减小网页的体积,这对于在网上传输是非常有利的。同时CSS可以使用外接*.CSS文件的方法使一次性修改大批量的网页成为可能,这就意味着你可以经常地改变网站的界面(包括文字、色彩、背景图片等),而每次只需要上传一个体积很小的CSS文件就行了!

  所以,笔者在这里极力向大家推荐使用!接着就简单扼要地介绍常用功能。

  具体方法:

新建一个文本文件,打开,输入:

body {

font-size: 10pt; //<body>标记里的字体大小为10pt;

background-color: rgb(255,255,255); //网页背景颜色为白色;

background-image: url('back.gif') //背景图片为与网页同一目录下的“back.gif”;

}

table {

border: 0; //表格的边框隐藏;

width: 100%; //表格宽度为100%;

text-align: left; //表格文本对齐方式为靠左;

}

th {

font-size: 11pt; //表头字体为11pt,较普通字体稍大;

color: FFFFFF; //表头背景色为RGB:FFFFFF;

text-align: center; //表头文本队旗方式为居中;

}

a {text-decoration: none} //链接无下划线;

a.visited {color: rgb(153,52,43);} //点击过的链接的颜色;

a.active {color: rgb(153,0,255);} //点击着的链接的颜色;

A.hover {

COLOR: #ffba75; //鼠标经过时链接的颜色;

TEXT-DECORATION: underline //鼠标经过时链接加下划线;

}

完成后,选择“文件”菜单的“另存为”,在对话框的“文件名”中输入“base.css”,“文件格式”里选“*.*”,于是,外接的CSS层叠样式表就写好了。

接着,在网页的HTML代码里的<head>和</head>之间加上:

<link href="base.css" rel="stylesheet" type="text/css">

保存退出。以后只要在CSS文件里做修改就可以使所有加了以上代码的网页自动更新了

6.使用表格定位

  想要一张整齐的网页需要做定位工作,有人使用<DIV>和<SPAN>标记,但实际上套用表格更简单一些,虽然精确度不及前者。很多大的站点都使用表格来定位文字和图片,制作时很直观,效果不错。但值得注意的是,当你的页面很大的时候,千万别在整个网页上用一个大的表格套很多小表格!因为如果浏览器在接受数据时发现表格,就必须知道表格的结构,也就是说要把整张表格的内容都接受完毕才显示其内容,之前会给浏览者一张“白板”看,很多人因为没耐心等待而转去看其他站点了。所以分用几个小表格,让他们可以分别显示,收到多少显示多少,浏览者可以在等待的时候看先收到的部分,这样一来就增加了浏览者继续等待的信心。但是你觉得分别显示页面会破坏整体的美感,那就用大表格吧!^_^ 

  7.站点地图

  即使导航栏条理分明,结构合理,但对于内容较多的站点来说,还是做一份站点的导航地图,才对得起访客。在站点地图里,你可以详细的介绍素有的栏目,以及每个栏目里分别包括些什么小栏目或是含有什么样的具体内容,应该尽力写得详实明了,让人有一目了然的感觉才达到我们的目的,不要担心版面不够,因为整个地图版面存在的理由就在于此(如果没有起到它应起的作用,还不如不要呢)。 

  8.使用模版 

  很多刚开始做网站的朋友往往在收集了大量的素材后,立即投入制作,生成了绝大部分成品网页,但由于经验不足或其他什么原因,做完了才发现问题,只好一个个网页的修改,结果浪费了巨大的精力。所以笔者建议:在完成了所有的构思以后,先要做一个模版网页,在这个网页里包括了所有网页的公共元素(比如LOO、导航栏、更新时间、推荐栏目、外接的CSS样式表的链接、加入收藏夹、返回首页、站点地图、E-mail地址、滚动的状态栏、广告条、版权信息等等),之后只要复制多份,填入不同的内容就相对轻松多了。 

  建议:如果页面太多而没有给每个网页写TITLE的话,FrontPage2000就会自动给每个网页加上按“new page 1”、“new page 2”的顺序排列的TITLE,很不美观和规范,或是使人产生“站长是个懒鬼”的想法。所以,在制作模版的时候,就可以在TITLE里加上一句无论放在哪个页面里都合适的欢迎词(比如“欢迎您的光临!”之类)。这样一来,网页才不会让人当成“半成品”来看待。^_^ 

  9.少用JAVA 

  虽然使用JAVA可以做出许多精彩的网页特效,但由于现在JAVA程序的处理速度实在让人不敢恭维,往往是等上老半天还看不到网页的内容,更有甚者,在漫长的等待后,浏览器提示APPLET不能启动。过分追求技巧和特效,结果却适得其反,把最重要的内容给拉下了,这种做法显然是不可取的

10.控制图片的大小 

  除了文字说明,图片就是我们网页上最重要的内容了。许多漂亮的字体,浏览器可能并不支持,所以要用图片的方式来显示;单纯的文字网页信息量巨大,浏览者很难快速地了解网页想要表达的内容,但通过图片就能比较形象地把意思传达给浏览者了。此外统一风格(每个网页使用相同的LOGO)、美化网页(用色彩鲜艳的花边修饰网页边框、分隔大段的文本)、烘托气氛等作用也是文字说明无法做到的,特别是GIF089a格式保存的图片,不但可以制造动画效果、活泼网页的气氛,还能够在显示较大的图片时逐渐的显示,先显示分辨率比较低的图片,让浏览者有个初步了解,知道自己等待的是什么?究竟有没有必要再等待?这对于速度相对较慢的中国互联网来说是一件天大的好事。

  一般来说,一张网页上的图片总体积不应该超过50KB,这样光图片的下载将花去浏览者近10秒的时间(按使用56K的MODEM计算,不过56K的MODEM在中国已经是标准配置了),而即使加上文字也多不了多少时间,对于习惯了慢如蚂蚁的网络的用户是可以接受的。因此,可以说图片是造成网页下载速度过慢的“罪魁祸首”。所以,必须在美观和速度之间做出选择,两者都要兼顾,大家自己平衡吧^_^ 

  11.选择使用框架 

  框架(FRAME)也叫帧页,是现在制作网页是较为常用的一种技术。该技术可以把浏览器窗口划分为几个小窗口,每一个窗口都显示一个网页的内容,并分别设置大小、有无滚动条等信息。这样就方便了设计网站的结构,可以在上方的框架里放置网站的LOGO,在左面的框架里显示导航栏,而在下方的框架里安置版权信息。当然这只是一个比较公式化的设计,每个人可以根据自己的实际需要和创意来做安排。而且浏览时,可以指定链接的网页在哪个框架里显示,从而避免了网页上相同内容的重复下载,而这些内容往往是LOGO、BANNER等体积较大,需要很长下载时间的图片。这对于提高网页显示速度和网络传输效率方面都有着积极的意义。

  尽管这是种方便网站设计者的技术,但对于浏览者来说就不一定了。因为框架技术是一种新兴技术,很多浏览器还不支持它,也就是是说,有一部分的浏览者并不能正常的看到你那美仑美奂的网页。所以,笔者建议:为了这些网友,尽量不要使用框架。如果实在要用,就一定要记得在框架网页的HTML代码里加上<NOFRAMES>元素,在<NOFRAMES>里可以设定当浏览器不支持框架的时候在浏览器里显示的替代内容,让没有使用最新版本的用户也可以看到网页的内容。 

  12.发布更新消息 

  更新消息可以通过多种方式传达给浏览者,最常用的就是在主页上逐条列出最新的内容,或是专门做一个“最近更新”的网页,在网页上详细地介绍最几一次、几次更新的内容,并提供通往新内容的链接。

  还有一种方法用的也比较普遍,但一般需要存放站点的服务器方面支持提交表单才行。就是浏览者通过提交表单的方式,将自己具体的联系方法送到站长指定的E-MAIL、CGI、文本文件等目的地,然后再由站长定期或在更新后,向这些地址发送网站最近更新的消息,让浏览者知道是否真的有自己感兴趣的内容,是否值得花费时间和金钱去浏览你的网站。既方便了浏览者,又显得站长很专业、很尽责

13.坚持经常更新 

  更新包括两方面的内容: 

  首先是内容,即使是内容丰富多彩的站点,也需要经常更新。因为浏览者不可能喜欢你网站所有的内容,大多数网友只喜欢其中的一小部分,而且也只浏览这一小部分,所以你要经常把新的内容加进去,来满足网友的需求。当然有会有例外,一些专门提供下载服务的站点相对而言就不是特别需要经常的更新了,因为供网友下载的大多是流行音乐的MP3、游戏DEMO、商业软件的BETA等体积很大的文件,网友光是下载这些文件就要花上很长很长的时间。记得有一次,笔者找到一个很大的MP3下载站点,一下子往网络蚂蚁里加入了近80首MP3,之后的一个月笔者就再也没去过那个站点,直到所有的MP3下载完毕为止。但如果你做的不是这样的下载站点的话(一般的个人主页也不太可能提供大量的下载,毕竟上传也要花很多人民币~~),就必须要经常更新了。 

  其次是维护,也可以说是对网站结构、美工方面的更新。没人会喜欢老是看到相同的页面,而且还可能是不怎么漂亮的页面。时间久了,内容多了,也会需要对站点的结构、导航做些调整的。

  建议:如果真的是很忙,没时间天天更新,希望能在主页上留一个“站长自述”的版块,没天抽出一小会儿,为浏览者写几句话,甚至可以写自己的生活日记。浏览者就会觉得站长和自己距离很近,是个很亲切友好的人。

  14.注意文件名的长度 

  一般来说,我们使用的Windows98、ME、2000、NT和Linux等操作系统均支持长文件名、大写的和中文文件名,但大多数提供免费主页的服务器都不支持长文件名大写的和中文文件名。也就是说,如果使用了服务器不支持的文件名格式,会造成你辛苦做成的网页成为“死页”,别人将无法访问这些网页,即使是你自己也不能浏览,当然你还是可以对之行使服务开放给你的FTP权利(包括改名、删除等)。 

  另外需要注意的是,很多服务器对于主页的命名都有特别的要求,最常见的是index.htm,其他还可能有index.html、default.htm、default.html、welcome.htm、welcome.html等。如果服务器向用户开放CGI、ASP和PHP的权限的话,还会有以asp和php3等结尾的网页名出现。

  所以在不太清楚服务器情况的时候,为了避免出现无法访问的网页,最好还是使用在DOS下通用的8。3命名规则较为保险。

  15.广告代码

  面对中国目前不匪的上网费用,大多数的网友不是缩衣节食,就是尽力克制自己上网的冲动。但随着上网时间的增加,接触到的新事物也在不断增加,忽然有朋友发现上网也能挣些美元(不管最后是不是真的到手,但这确实是个能缓解上网费用过高的办法)。就是在自己的主页上加一段广告代码,只要访客能适时地点击广告,一个月下来,就能为站长带来那么几个美元补贴上网费,不过可能要过好几个月才能收到支票。

  但需要注意的是,有些朋友为了多赚些美元,就自己拼命点击广告条,但他们不知道在极短的时间里有太大的点击率、这些点击全出自同一个IP地址,又或是你的广告条放的位置不符合广告商的要求的话,你就将收不到支票,并且会被广告公司加入黑名单。结果自然是“赔了夫人又折兵”,既赚不到美元,又花了自己的时间和精力(点击广告时花费的)。

  即使靠广告条能增加收入,但也要考虑到由于大家都和你有相同的想法,所以在Internet上早就是广告满天飞了,现在的网友可是一看到广告就反感,接着是连看也不看你的网站里有些什么内容就键入别的地址了。因此很可能发生的是,放了广告代码后,非但没收到美元,反而连自己的访客也给吓走了,有句老话就是形容这种情况的:“偷鸡不成蚀把米”^_^ 

  可是,就算不放置为自己谋福利的广告条,但提供主页空间给你的那个网站的那个广告你还是得放在主页上的,不然的话,很可能会不经通知就删除你的主页空间哦! 了解了以上几个方面后,再来将一些实用技巧

Linux网站建设和维护全攻略(PDF)

  • 2009年08月14日 16:10
  • 7.59MB
  • 下载

初级网站建设--入门篇

本文适合初次想要尝试自己做一个网站而不知从何入手的朋友们。如果是有一定经验和基础的朋友建议去查阅更高级的教程。 就像当时我做第一个网站完全是因为自己的兴趣,觉得做一个网站放到互联网上能被其他人访问是一...

Linux网站建设和维护全攻略6

  • 2008年11月13日 12:01
  • 486KB
  • 下载

Linux网站建设和维护全攻略

  • 2017年07月12日 09:07
  • 6.29MB
  • 下载

网站建设过程要注意的SEO细节

一个网站后期要考虑做SEO优化的,前期网站建设应要注意一些细节问题,才能让SEO优化起来不那么的繁琐、困难。建站初期要考虑网站布局、三要素的写法、代码编写、alt属性、内链结构、服务器、网站安全、文章...

Linux网站建设和维护全攻略

  • 2008年09月28日 21:06
  • 7.59MB
  • 下载

Linux网站建设和维护全攻略

  • 2008年10月16日 20:46
  • 7.59MB
  • 下载

网站建设的6个细节

一个杰出的实体公司,都需要拥有一个卓越的网站,因为客户往往通过企业的网站留下第一印象。这个第一印象是决定客户是否与你合作的重要因素。那么,如何通过对网站的整体的形象包装和设计才能够制作出卓越的网站呢?...
  • comeonJ
  • comeonJ
  • 2011年12月29日 13:36
  • 762

Linux网站建设和维护全攻略

  • 2008年02月19日 10:18
  • 7.59MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网站建设全攻略——从入门到精通(具体细节篇)
举报原因:
原因补充:

(最多只允许输入30个字)