青岛网站建设公司,青岛网站制作公司-奈薇建站网
建站咨询热线:0532-8878113113165158935 
知识普及 » 建站全攻略之导航栏设计

建站全攻略之导航栏设计

佚名 2010-03-03 19:50发表
阅读次数 2662
    每次增加新的栏目或是对原有栏目的调整,都要对所有的页面更新。刚开始可能还算轻松,因为没几个页面,但当有几十、几百个网页后,这工作量实在太大了!如果偷懒只更新几个主要的网页,访问量就会剧减。
  
    笔者首先想到的是FLASH可以做出漂亮的导航按钮,所有的页都用一样的导航栏,以后只要更新这个FLASH动画就可以使整个网站的页面都得到更新。但实际使用后发现FLASH造成网页的体积过大,在加上网站LOGO,商业BANNER……使网页变的臃肿不堪。
    转自:奈薇建站网(www.nev.cn)
    这办法不太好,于是笔者又考虑做个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的前面加上该文件的路径。
    转自:奈薇建站网(www.nev.cn)
    导航栏真的是网站里非常重要的一环,如果少了导航栏,你的站点将会是一个漆黑的、让人摸不到东西南北的大迷宫(大家玩过仙剑吧,和那个迷宫是一样的:)。即使是经验丰富的老鸟,也会被弄得不知所措,说不定还会以为你的站点就这么一页呢。所以为了方便访问者,同时也是为了你的网站能有更多的回头客,首先就必须做出分类明确、位置醒目的导航栏,把你的站点的风采以及你自己的才华完全展现出来。其次还要保持导航栏的便于更新,因为随着时间的推移,你的站点内容会越来越丰富多彩,总得重新整理整理吧,让自己的网页随时保持在最方便访问的位置,而不是层层的链接之下。想想看,要是访问者为了找到自己感兴趣的内容必须点上5、6次鼠标的话,那你肯定就失去他了。

建站全攻略之导航栏设计相关标签:企业做网站制作网页网络公司网站优化
相关热点推荐
青岛网站制作支持旧IE
营销型网站优化需要注意
如何提高百度收录的概率
谷歌网站管理员支持论坛
谈网站设计的10个要点
搜索引擎概念
网站建设经验之制版篇—
网站突然被降权到底有什
每个企业都需要一套网络
谈谈什么是优秀的网站设
扁平化网站风格设计的特
搜索引擎为何找不到网上
政府网站建设要按照“一
青岛网站制作支持旧IE
移动互联网开发中的技术
十五项搜索引擎优化技巧
企业网站需要做哪些内容
如何协调用户体验与网站
对于这些不诚信的站长,
什么是自助建站系统
百度新算法分析:外链和
深底色页面设计指南设计
网站设计的方块元素该如
搜索引擎收录机制
新手创建优秀网站的6个
网站策划之中小学
网站建设中什么最重要
搜索引擎的算法
网站设计的风格把握
6个外贸网站优化技巧
十大搜索引擎优化错误
从精简导航谈小型网站的
怎么制定网站推广方案
什么是cache缓存
响应式网站布局分析与应
网站设计制作的流程有哪
如何提高网页关键词也是
留言板在电子商务中的地
网站策划到战略与执行的
站内搜索与用户体验
奈薇建站网青岛网站建设公司/青岛网站制作公司,专业提供"气质"型网站建设及精美网站制作服务,同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展

热点地区:青岛网站建设价格 青岛即墨网站制作公司 开发区信息港 山东在线门户
  • 备案号
  • 鲁ICP备13010283号
建站咨询热线0532-88781131 15166683288 13963906391
版权所有© BangJianZhan.Com & Nev.Cn 青岛网站建设/网站制作公司
青岛雨后网络科技有限公司 - 青岛市市北区福州北路90号,景泰尚都6层
已经为您服务了
158个月 29