分享
 
 
 

建站全攻略(5)

王朝网站推广·作者佚名  2011-12-03
窄屏简体版  字體: |||超大  

五. 具体细节篇

1.导航栏的设计

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

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

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

首先是便于更新,所以要做个外接的JavaScript脚本,至于用到的语句就只有document.write(“”),新建一个文本文件,打开,输入: document.write(" ");

document.write("<a href=http://richardddd.easthome.net/comics/index.htm>动漫专栏</a>"); /*在“ ”里的是HTML格式的<A>元素,该元素定义了一个锚(Anchor),也就是把“动漫专栏”作为一个超链接,“HREF”属性指定“动漫专栏”链接到的其他资源上,也就是“http://richardddd.easthome.net”。(以下相同)*/

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>之间,选择想要让导航栏显示的地方,定位,输入:

<Script language=“JavaScript” src=navigation.js></script>

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

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

注意:

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.色彩的搭配

暖色系:红、橙、橙黄、黄等色彩表现温馨、和煦、热情。

中性系:黄绿、绿等色彩表现舒适、和谐。

寒色系:青绿、蓝绿、蓝等色彩表现宁静、清凉、高雅。

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

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

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有