高校門戶網(wǎng)站的頁面導航布局設(shè)計研究

劉松　藍鷹

摘要： 優(yōu)秀的頁面導航設(shè)計不僅可以方便高校門戶網(wǎng)站訪問者瀏覽網(wǎng)站內(nèi)容，還能在第一時間給用戶以準確的信息傳達，直觀地表現(xiàn)高校門戶網(wǎng)站的內(nèi)容，讓瀏覽者更方便地找到想要的、需要的內(nèi)容。利用HTML列表標記和CSS技術(shù)制作的高校門戶網(wǎng)站頁面導航，具有網(wǎng)頁代碼冗余少、頁面代碼結(jié)構(gòu)清晰、方便維護、頁面下載速度快等優(yōu)點。

關(guān)鍵詞：高校門戶網(wǎng)站； 頁面導航

中圖分類號： 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頁面導航布局方法概述

頁面導航欄是指位于網(wǎng)站頁面頂部或者側(cè)邊區(qū)域的，在頁眉橫幅圖片上邊或下邊的一排水平導航鏈接，在設(shè)計上則發(fā)揮著針對網(wǎng)站內(nèi)的各個子頁面的鏈接作用。高校網(wǎng)站使用頁面導航欄是為了讓高校門戶網(wǎng)站訪問者能夠更為便捷清晰地找到目標需求的資源區(qū)域，從而成功獲取網(wǎng)頁資源。

在高校網(wǎng)站設(shè)計中，頁面導航的設(shè)置尤為重要。美觀的導航菜單會給高校門戶網(wǎng)站提升視覺等級，從而有效引導高校門戶網(wǎng)站瀏覽者迅速找到感興趣的頁面信息[1]。優(yōu)秀的頁面導航設(shè)計不僅可以方便用戶瀏覽網(wǎng)站內(nèi)容，還能在第一時間為用戶傳達準確信息，同時直觀呈現(xiàn)高校門戶網(wǎng)站的主旨內(nèi)容，使瀏覽者能夠以優(yōu)勢速度找到想要的、需要的內(nèi)容。因此，頁面導航欄在網(wǎng)站設(shè)計中占據(jù)了主導關(guān)鍵性位置，在一定程度上甚至能夠決定高校門戶網(wǎng)站的風格。

根據(jù)頁面導航在頁面中的布局形式不同，常見的導航欄可以分為縱向頁面導航、橫向頁面導航、二級彈出菜單導航、下拉導航等幾種形式，其中以縱向?qū)Ш?、橫向?qū)Ш胶投墢棾霾藛伪容^常用。高校橫向頁面導航和縱向頁面導航如圖1和圖2所示。

縱向?qū)Ш绞歉咝ｉT戶網(wǎng)站主頁常規(guī)流行模式下采用的導航形式。絕大部分高校門戶網(wǎng)站主頁的導航條展示列出的條目一般都是并列的關(guān)系，因此研究可以采用CSS結(jié)合無序列表標記的方式來實現(xiàn)高校門戶網(wǎng)站的縱向?qū)Ш健?/p>

綜合運用HTML列表標記及CSS相關(guān)樣式屬性對導航項進行格式化，為此定制提出高校門戶網(wǎng)站縱向?qū)Ш綑诘募夹g(shù)設(shè)計步驟如下：

1）創(chuàng)建導航欄模塊頁面結(jié)構(gòu)，形成導航欄模塊內(nèi)容的基本布局。

首先，創(chuàng)建一個DIV容器標記，用來容納縱向?qū)Ш綑趦?nèi)容。

其次，在DIV容器里面，利用HTML的無序列表標記UL創(chuàng)建縱向?qū)Ш綑诘牟藛雾棥？v向?qū)Ш綑诨静季值捻撁嫘Ч鐖D3所示。這里，進一步給出縱向?qū)Ш交静季值闹黧w代碼具體如下：

2）利用CSS樣式優(yōu)化縱向?qū)Ш綑?。此時已經(jīng)能夠看出縱向?qū)Ш綑诘脑土耍酉聛硌芯恐袑⑹褂肅SS對這個導航欄進行美化。過程分解步驟可描述如下：

① 清除無序列表前的默認圓點；

② 加大各列表項之間的間隔；

③ 為每個列表項添加邊框樣式。

高校門戶網(wǎng)站的縱向?qū)Ш降淖罱K效果如圖2所示，與其對應(yīng)的完整代碼則可見如下：

3高校門戶網(wǎng)站頁面橫向?qū)Ш街谱鞣椒?/p>

高校門戶網(wǎng)站的頁面橫向?qū)Ш娇梢栽诳v向?qū)Ш降幕A(chǔ)之上，通過CSS樣式代碼的更改就可以研發(fā)得到。首先，在頁面的CSS內(nèi)部樣式代碼中，在#nav li規(guī)則里添加float：left的CSS浮動屬性[2]，使無序列表中的每個列表項內(nèi)容全部向左浮動顯示，這樣就做到了列表的橫向顯示，這也是將縱向?qū)Ш礁臑闄M向?qū)Ш降年P(guān)鍵實現(xiàn)步驟[3]；其次，調(diào)整每個橫向列表項width寬度值為150 px；最后，通過為每個無序列表項對應(yīng)的CSS規(guī)則增加CSS 屬性：margin-right：5 px[4]，以著重加大2個相鄰列表項之間的空白間距。高校門戶網(wǎng)站橫向?qū)Ш綑诘脑O(shè)計效果如圖1所示，而其執(zhí)行代碼段可展現(xiàn)如下：

實際應(yīng)用效果表明，利用HTML列表標記和CSS技術(shù)制作的高校門戶網(wǎng)站頁面導航欄，具有很多優(yōu)點，如網(wǎng)頁代碼冗余少，頁面代碼結(jié)構(gòu)清晰，方便頁面維護，頁面下載速度快等[5]。因此，采用CSS結(jié)合HTML列表標記技術(shù)的方法是一種制作高校門戶網(wǎng)站導航欄的有效方式，不僅利于開發(fā)者的操作掌握，而且能為高校門戶網(wǎng)站日后升級和維護帶來極大的方便。

參考文獻

鄭婭峰，張永強. 網(wǎng)頁設(shè)計與開發(fā)：HTML、CSS、JavaScript實例教程[M] . 北京：清華大學出版社，2016 .

[2] 郭巧麗，曹宏舉. 基于CSS+DIV的float技術(shù)在網(wǎng)頁制作中的應(yīng)用[J]. 軟件工程師，2015，18（5）：24-26.

[3] 喻浩. CSS+DIV網(wǎng)頁樣式與布局從入門到精通[M] . 北京：清華大學出版社，2013.

[4] 肖志華. CSS核心技術(shù)詳解[M]. 北京：電子工業(yè)出版社，2017.

[5] 喬巍. 基于 CSS 的商務(wù)網(wǎng)站導航條設(shè)計[J]. 商場現(xiàn)代化，2012，（3上）：39.endprint