门户网站的导航设计总是对设计者提出更高的要求,由于门户网站内容复杂,如何科学合理的组织导航上众多的栏目内容,并提供一个易操作的导航区成为了设计的主要目标。而在本节中我们将介绍国内首先采用CSS布局进行重构的闪客帝国网站的导航设计方法。闪客帝国新版的设计中率先采用了符合Web标准的CSS布局技术来进行全站设计。基于前几版的经验,新版网站希望在内容上更进一步细化用户人群,希望每一个用户都能根据自己的喜好快速访问蕻相关频道,在内容上也有一定扩充。作为垂直门户,在频道上不可能做到大型门户那样齐全,但又不可避免的遇上内容过多而无法合理整合并很好的引导用户观看,因此新版网站的导航结构必须拥有更合理的划分。
最终确定的导航为二层复合式导航结构。展示在用户面前的是除去首页之外的约17个频道选择。然尔实质上作为网站内容本身,只有第一行包含首页在内的的9个频道是网站本身的频道内容。第二行的频道是通过编辑组经过调查与筛选,从网站的二级频道中提取出的准二级频道。例如Flash MV频道,其本身的内容基本上全由动画短片构成,而短片本身仍然全部归属于影院频道。但考虑到Flash MV有一定的用户群体,国内有不少专门的FlashMV网站诞生更是证明了Flash MV的生命力,天津网站优化,天津网络公司,天津网站建设,天津网站制作,因此Flash MV最终还归属于影院频道,但在导航上却采用较明显的方式来捕捉这,部分用户。
类似于这种需求,设计了第二层的辅助导航,将主频道中的部分内容提取出来引导用户使用,而在设计上又通过二层结构,使用不同的背景色进行区分,使得主频道与准频道严枉区分,产生了现有的导航结构。
我们注意到,两个导航的ul对象采用了相同的class名称,不同的id名称。这是因为在实际中,我们设计的导航从文字大小,外观间距等方面是完全相同的,惟一的不同是第二层导航的背景色变化,因此从基础样式上来说二者可以共享一个样,再进行局部变化所以navl与nav2共用了navGroup的样式,而navCyroup的样式。
另外在导航的XHTML中,部分导航文字采用了单独的span并使用了一个特殊的class名称如<span class="color yellow">金闪客</span>。门户网站的导航上有时候为了加强某些航的效果使其变得醒目,常常要改变变它的颜色,在这里也是同样的做法,colorYellow定义相当简单,就是将color设为黄色,因此当我们需要在导航中将某个导航项目变为黄色时,直接在上面增加一个class为colorYellow的span即可完成,同样,最终的导航中其他元素也有使用其他特别的色彩来加强效果。