高校门户网站的页面导航布局设计研究

刘松　蓝鹰

摘要： 优秀的页面导航设计不仅可以方便高校门户网站访问者浏览网站内容，还能在第一时间给用户以准确的信息传达，直观地表现高校门户网站的内容，让浏览者更方便地找到想要的、需要的内容。利用HTML列表标记和CSS技术制作的高校门户网站页面导航，具有网页代码冗余少、页面代码结构清晰、方便维护、页面下载速度快等优点。

关键词：高校门户网站； 页面导航

中图分类号： TP302.1

文献标志码： A

文章编号： 2095-2163（2017）05-0117-03

Abstract： Page navigation can not only be convenient for visitors to browse web content， but also to obtain the accurate information， by which visitors could more easily find the required content. Page navigation of university portal based on HTML list mark and CSS technology has many advantages ，such as less code redundancy， clear page structure， convenient maintenance and fast page downloading speed.

Keywords： university website； page navigation

1页面导航布局方法概述

页面导航栏是指位于网站页面顶部或者侧边区域的，在页眉横幅图片上边或下边的一排水平导航链接，在设计上则发挥着针对网站内的各个子页面的链接作用。高校网站使用页面导航栏是为了让高校门户网站访问者能够更为便捷清晰地找到目标需求的资源区域，从而成功获取网页资源。

在高校网站设计中，页面导航的设置尤为重要。美观的导航菜单会给高校门户网站提升视觉等级，从而有效引导高校门户网站浏览者迅速找到感兴趣的页面信息[1]。优秀的页面导航设计不仅可以方便用户浏览网站内容，还能在第一时间为用户传达准确信息，同时直观呈现高校门户网站的主旨内容，使浏览者能够以优势速度找到想要的、需要的内容。因此，页面导航栏在网站设计中占据了主导关键性位置，在一定程度上甚至能够决定高校门户网站的风格。

根据页面导航在页面中的布局形式不同，常见的导航栏可以分为纵向页面导航、横向页面导航、二级弹出菜单导航、下拉导航等几种形式，其中以纵向导航、横向导航和二级弹出菜单比较常用。高校横向页面导航和纵向页面导航如图1和图2所示。

纵向导航是高校门户网站主页常规流行模式下采用的导航形式。绝大部分高校门户网站主页的导航条展示列出的条目一般都是并列的关系，因此研究可以采用CSS结合无序列表标记的方式来实现高校门户网站的纵向导航。

综合运用HTML列表标记及CSS相关样式属性对导航项进行格式化，为此定制提出高校门户网站纵向导航栏的技术设计步骤如下：

1）创建导航栏模块页面结构，形成导航栏模块内容的基本布局。

首先，创建一个DIV容器标记，用来容纳纵向导航栏内容。

其次，在DIV容器里面，利用HTML的无序列表标记UL创建纵向导航栏的菜单项。纵向导航栏基本布局的页面效果如图3所示。这里，进一步给出纵向导航基本布局的主体代码具体如下：

2）利用CSS样式优化纵向导航栏。此时已经能够看出纵向导航栏的原型了，接下来研究中将使用CSS对这个导航栏进行美化。过程分解步骤可描述如下：

① 清除无序列表前的默认圆点；

② 加大各列表项之间的间隔；

③ 为每个列表项添加边框样式。

高校门户网站的纵向导航的最终效果如图2所示，与其对应的完整代码则可见如下：

3高校门户网站页面横向导航制作方法

高校门户网站的页面横向导航可以在纵向导航的基础之上，通过CSS样式代码的更改就可以研发得到。首先，在页面的CSS内部样式代码中，在#nav li规则里添加float：left的CSS浮动属性[2]，使无序列表中的每个列表项内容全部向左浮动显示，这样就做到了列表的横向显示，这也是将纵向导航改为横向导航的关键实现步骤[3]；其次，调整每个横向列表项width宽度值为150 px；最后，通过为每个无序列表项对应的CSS规则增加CSS 属性：margin-right：5 px[4]，以着重加大2个相邻列表项之间的空白间距。高校门户网站横向导航栏的设计效果如图1所示，而其执行代码段可展现如下：

实际应用效果表明，利用HTML列表标记和CSS技术制作的高校门户网站页面导航栏，具有很多优点，如网页代码冗余少，页面代码结构清晰，方便页面维护，页面下载速度快等[5]。因此，采用CSS结合HTML列表标记技术的方法是一种制作高校门户网站导航栏的有效方式，不仅利于开发者的操作掌握，而且能为高校门户网站日后升级和维护带来极大的方便。

参考文献

郑娅峰，张永强. 网页设计与开发：HTML、CSS、JavaScript实例教程[M] . 北京：清华大学出版社，2016 .

[2] 郭巧丽，曹宏举. 基于CSS+DIV的float技术在网页制作中的应用[J]. 软件工程师，2015，18（5）：24-26.

[3] 喻浩. CSS+DIV网页样式与布局从入门到精通[M] . 北京：清华大学出版社，2013.

[4] 肖志华. CSS核心技术详解[M]. 北京：电子工业出版社，2017.

[5] 乔巍. 基于 CSS 的商務网站导航条设计[J]. 商场现代化，2012，（3上）：39.endprint