首页 优化推广 引导页制作教程

引导页制作教程

来源: | 时间:2010/1/7 10:53:48 |

(一)什么是引导页?

引导
页又称过场页,当你在IE上输入你论坛地址确认后,并不是一进去就看到论坛的首页而是先进入一个过渡页面,这个过渡页面就是引导页(一个非常个性的页面),然后在引导页上再选择点击:A)进论坛、B)论坛音乐版、C)你的BLOG 、D)你其他网站、E)你的QQ空间、、、、、、让浏览者去选择
(二)引导页的形式及内容:

可以是文字、图片、FLASH等。就目前出现的引导页来看,有三种分类方法

    第一种按引导页表现的形式,可以分为静止的、动画的和动静结合的三类。静止的页面与动画的页面各有各的特点,静止的页需要在版式上,构图方面多加推敲,否则就会单调,乏味。动画的画面时比较多见的,有动画的引导页可以更让人产生兴趣,加深印象,动画的节奏、颜色、配音等都是重要的方面,稍有不慎,就会影响引导页的效果。动静结合的,这一类要求设计前要有充分的、清晰的思路,动中有静,静中有动,搭配合理,才能算的上好作品。

    第二种按引导页表现的内容来看,可以分为文字的、图片的和文字与图片混合的三类。文字的多是论坛的名称和论坛的宣传语,目的在于让浏览者带着论坛的理念进入论坛的首页。图片类的引导页,是比较直观地在浏览者头脑里树立论坛的主题。一般多为与论坛相关的图片、作品、论坛文化象征性标识。还有一类也是最常见的一类是文字与图片混合出现的,这类是通过抽象和形象双重刺激浏览者的大脑,强化论坛主题,传达论坛的文化,达到加深对论坛印象的目的。

        第三种按引导页的发挥的作用不同可以分为不同的类别。引导页可以提示浏览者通过更适合的方式浏览网页;可以让浏览者产生兴趣,增加浏览量;也可以作为论坛文化的形象宣传;发布引人注目的广告;还可以引导浏览者进入不同的功能区。


这里是采用的是在head里最前面加代码,让浏览者一进论坛就跳转到引导页面index.htm上去的方法来解决的。 ?可能有人会问了,你这样不是每当回论坛本身的首页就会读取css代码而跳转到引导页面index.htm上去???回答是肯定的,不会(如果是那样这个代码也就没什么实用价值了)。

因为这个代码是有条件的!即:只对每次新开的IE做1次跳转,以后只要还是这个IE窗口就不再做跳转了,实际上这一切都被代码写入记录在你电脑的cookies里的(用过后此代码你就会领略他的强悍和神秘了)完整的代码在下面。

核心条件跳转代码,里面的地址自已修改(此代码放到论坛的头部信息处)

  1. <script language='javascript'> function getcookie(cookiestr){var str=cookiestr + '='; var returnvalue=''; if(document.cookie.length>0) {offset=document.cookie.indexOf(str); if(offset !=-1){offset+=str.length; end=document.cookie.indexOf(';',offset); if(end==-1) end=document.cookie.length; returnvalue=unescape(document.cookie.substring(offset,end)); } }return returnvalue;} function alerter(){if(getcookie('netsh')=='') {window.open ('你的引导页地址,可以是附件地址',"_top"); document.cookie='netsh=yes';}} </script> <script>alerter()</script>
复制代码

(三)引导页的基本制作举例


现在告诉大家如何制作引导页:

1;用软件(Dreamweaver)编辑一个网页也就是你自己的引导页,可以加图片也可以加FLASH动画!
   注意这里编辑的图片或者动画地址须是网络绝对地址,因为我们没有空间!在这里大家可以先用PS
      把图片处理好后上传到自己的领地得到绝对地址!
2;制作好的引导页保存为.html结尾的网页文件上传到自己的领地,在后台帖子------附件管理----找到上传的网页
   得到绝对地址
3;然后配合发给大家的代码,把代码中的文字改成刚才得到的网页绝对地址
4;把修改好的代码放在其他头部里面,记得一定是其他头部里面,我看到很多教程都是写的备案里面,那样是没有效果的
Dreamweaver是现在最通用的网页编辑软件!大家不会用的话可以在论坛提出

以下是我整理的几个简单引导页代码,大家可一做个修改!修改中文字就可以了!
方法:新建记事本------把以下代码复制进去(不要改变代码的位置)------修改中文变成你自己的网址-------然后另存为网页(也就是后缀名是.HTML的文件)


1)自动引导型:

特点:每次在点击你论坛地址后进入引导页作短暂停留后随即自动转入你的论坛首页

  1. <html>
     
  2. <head>
     
  3. <meta http-equiv='Refresh' content='5;URL=http://www.aiyoai.cn/'>
     
  4. <TITLE>::自动引导页::</TITLE>
     
  5. <style type="text/css">
     
  6. <!--
     
  7. body {
     
  8. margin-left: 0px;
     
  9. margin-top: 0px;
     
  10. margin-right: 0px;
     
  11. margin-bottom: 0px;
     
  12. background-color: #000000;
     
  13. }
     
  14. body,td,th {
     
  15. font-family: Comic Sans MS;
     
  16. color: #FFFFFF;
     
  17. }
     
  18. .style1 {color: #FF0000}
     
  19. -->
     
  20. </style></head>
     
  21. <body>
     
  22. <div align="center">
     
  23. <p align="left"> 
     
  24. <p> </p>
     
  25. <p> </p>
     
  26. <p align="center"> <img src="http://tfcnc.151.tofor.com/xp.gif" tppabs="http://tfcnc.151.tofor.com/xp.gif" width="176" height="220" /></p>
     

  27.  
  28. </div>
     
  29. <div align="center" class="style6">
     

  30.  
  31. <p class="style9"><span class="style1">论坛载入中......</span></p>
     
  32. <p> </p>
     
  33. </div>
     
  34. </body>
     
  35. </html>
复制代码

2)手动引导型:
特点:每次在点击你论坛地址后进入引导页点击不同的链接可以进入不同的模式(如:音乐版-静音版模式、平板-分栏模式、、)

  1. <TITLE>:: 引导页::</TITLE>
     
  2. <body bgcolor="#000000">
     
  3. <p> </p>
     
  4. <p> </p>
     
  5. <p> </p>
     
  6. <p> </p>
     
  7. <p></p>
     
  8. <p></p>
     
  9. <p></p>
     
  10. <table width="200" border="0" align="center" cellpadding="0" cellspacing="0">
     
  11. <tr>
     
  12. <td><style>
     
  13. <

服务热线

153 8323 9821

功能和特性

价格和优惠

网站和维护

推广和优化

微信服务号