16.定制站点导航条-开店乐

开店乐

开店乐电子商务研究 KaiDianLe.Com

网站地图 : 一二三四五六七八九十

主页

16.定制站点导航条

| 回首页 | 网站地图 | 网络技术 >> 网页特效

你一定发现很多网站都有“站点导航条”，通过它能使浏览网站的网友清楚明了的知道网站的结构，并能迅速找到自己感兴趣的内容。你是不是也想为自己的网站装上这样一个“站点导航条”呢？那么，我们一起来定制一个吧。

　　以Dreamwaver为例点击“Insert”菜单->“Form Object”，选择“List/Menu”并单击，这时在编辑的网页上便插入一个组件，你也可在“Object”对话框中找到这个组件。如图所示：【文章来源：开店乐电子商务研究KaiDianLe.Com】

“Object”对话框

　　下面我们对“List/Menu”组件的属性作如下设置：

　　<1>打开“Properties”对话框，选择“Type”值为“List(下拉列表)”，然后点击“List Values...”按钮进入添加条目的对话框；

“Properties”对话框

　　<2>在“List Values”对话框中输入站点导航的各个条目；其中左边是站点的名称，右面为站点对应的链接，我们根据自己的实际情况添入各条目的值，这里我们把第一项填为“我的站点导航”，并把“Value”值设为当前页，也就是本页，这一个条目是做默认显示用的，点击“OK”确定；

添加条目的对话框

　　<3>这时属性对话框中显示出了我们刚才添入的条目，我们点击选中第一项“我的站点导航”作为默认的显示项，然后在上图所示的属性框中设置“List/Menu”的名字为“select”(如果一个网页中有多个组件则命名应加以区分)；

默认的显示项

　　<4>在代码中找到刚才加入的“Select”所对应的语句，然后在图示位置添加一个“onChange”语句，这句话的作用是当我们在站点导航中选择某一站点时，即触发“onChange”事件时调用第5步中我们插入的“change”函数；

　　<5>最后一步是在网页中的<HEAD>中插入如下这样一段JavaScrip语句，其中第四行的“var url=""”，我们设为空值，而在你将网页上传到服务器时最好把空值改为服务器的地址，以免发生意外错误。

　　源码粘贴框：

1.在“select”标签中添加一个“onChange”语句 <select name="select" onChange="change(this.form)" size="1"> <option value="pm016.htm" selected>我的站点导航</option> <option value="pm015.htm">编程技巧</option> <option value="pm014.htm">闪电空间</option> <option value="pm013.htm">网上学习</option> <option value="pm016.htm#1">真情无限</option> <option value="pm016.htm#1">笑话乐园</option> </select> 2.在网页中的<HEAD>中插入如下这样一段JavaScrip语句: <script language="Javascript" src="/pub/js/head.js"></script> <script language="javascript">  </script>

　　到这里我们就定制好了自己的“站点导航条”，如果你使用Frontpage做网页，你可以在“插入”->“表单”->“下拉列表”中实现同样的效果。最后顺便提一下“站点导航条”的定位问题，从组件框中插入的组件经常出现放不到我们想要的位置的情况，而对这些组件的定位，我们一般采用表格来实现。如果你对表格定位的使用还不熟悉的话，请看下个技巧的内容---表格定位技巧。

【日期：2006-10-9】【作者：网上开店】【转载自：http://www.kaidianle.com】