劉松　藍(lán)鷹

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

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

中圖分類號(hào)： TP302.1

文獻(xiàn)標(biāo)志碼： A

文章編號(hào)： 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頁(yè)面導(dǎo)航布局方法概述

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

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

根據(jù)頁(yè)面導(dǎo)航在頁(yè)面中的布局形式不同，常見的導(dǎo)航欄可以分為縱向頁(yè)面導(dǎo)航、橫向頁(yè)面導(dǎo)航、二級(jí)彈出菜單導(dǎo)航、下拉導(dǎo)航等幾種形式，其中以縱向?qū)Ш健M向?qū)Ш胶投?jí)彈出菜單比較常用。高校橫向頁(yè)面導(dǎo)航和縱向頁(yè)面導(dǎo)航如圖1和圖2所示。

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

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

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

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

其次，在DIV容器里面，利用HTML的無序列表標(biāo)記UL創(chuàng)建縱向?qū)Ш綑诘牟藛雾?xiàng)?？v向?qū)Ш綑诨静季值捻?yè)面效果如圖3所示。這里，進(jìn)一步給出縱向?qū)Ш交静季值闹黧w代碼具體如下：

2）利用CSS樣式優(yōu)化縱向?qū)Ш綑凇４藭r(shí)已經(jīng)能夠看出縱向?qū)Ш綑诘脑土?，接下來研究中將使用CSS對(duì)這個(gè)導(dǎo)航欄進(jìn)行美化。過程分解步驟可描述如下：

① 清除無序列表前的默認(rèn)圓點(diǎn)；

② 加大各列表項(xiàng)之間的間隔；

③ 為每個(gè)列表項(xiàng)添加邊框樣式。

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

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

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

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

參考文獻(xiàn)

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

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

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

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

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