高校門戶網站的頁面導航布局設計研究

劉松　藍鷹

摘要： 優秀的頁面導航設計不僅可以方便高校門戶網站訪問者瀏覽網站內容，還能在第一時間給用戶以準確的信息傳達，直觀地表現高校門戶網站的內容，讓瀏覽者更方便地找到想要的、需要的內容。利用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創建縱向導航欄的菜單項?？v向導航欄基本布局的頁面效果如圖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