您的位置:首页网页设计经验技巧 → 建站全攻略——从入门到精通(具体细节篇)

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

时间:2004/11/7 2:47:00来源:本站整理作者:蓝点我要评论(0)

五. 具体细节篇

  1.导航栏的设计

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

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

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

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

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

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

  具体做法:

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



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

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

  注意:

  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; //标记里的字体大小为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代码里的和之间加上:



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


 

6.使用表格定位

  想要一张整齐的网页需要做定位工作,有人使用

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

  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代码里加上

相关阅读 Windows错误代码大全 Windows错误代码查询激活windows有什么用Mac QQ和Windows QQ聊天记录怎么合并 Mac QQ和Windows QQ聊天记录Windows 10自动更新怎么关闭 如何关闭Windows 10自动更新windows 10 rs4快速预览版17017下载错误问题Win10秋季创意者更新16291更新了什么 win10 16291更新内容windows10秋季创意者更新时间 windows10秋季创意者更新内容kb3150513补丁更新了什么 Windows 10补丁kb3150513是什么

文章评论
发表评论

热门文章 Wordpress本地安装教程dx1.5如何设置二级域名

最新文章 hbuilder有哪些快捷键Wordpress本地安装教程 Wordpress本地安装教程expression web 4文档乱码解决方法dz 2.5“收藏本版”关闭小对话框无法关闭解在制作安装软件之前,您必须先将易语言存盘,

人气排行 如何使用multipart/form-data格式上传文件Photoshop PS图层混合模式详解(非常详细)ISAPI_Rewrite3使用教程网站里添加收藏和设为首页代码桌面快捷方式图标不见了C#获取执行程序所在的当前路径的方法详解(XMLHttpRequest)进行跨域请求方法如何用远程桌面连接进行传输文件