列表標(biāo)簽在導(dǎo)航條設(shè)計中的新應(yīng)用

梁靜琳 彭 莉 張漣漪

(武漢工程職業(yè)技術(shù)學(xué)院 湖北 武漢:430080)

列表標(biāo)簽有項目列表、編號列表和定義列表三種,而常用的是前面兩種。在以前的網(wǎng)頁設(shè)計中,列表標(biāo)簽主要用于新聞信息、標(biāo)題列表等。

在基于Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計中,列表又被賦予新的應(yīng)用,特別是在導(dǎo)航條的設(shè)計中,發(fā)揮著它獨特的功能。

1 Web標(biāo)準(zhǔn)

Web標(biāo)準(zhǔn)不是某一個標(biāo)準(zhǔn),而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由3部分組成:結(jié)構(gòu)、表現(xiàn)和行為。對應(yīng)的Web標(biāo)準(zhǔn)也就分為的3個標(biāo)準(zhǔn)集:結(jié)構(gòu)標(biāo)準(zhǔn)主要是XHTML和XML,表現(xiàn)標(biāo)準(zhǔn)主要是CSS,行為標(biāo)準(zhǔn)主要是對象模型。結(jié)構(gòu)用于對網(wǎng)頁中的信息進(jìn)行整理和分類。表現(xiàn)技術(shù)用于對已經(jīng)被結(jié)構(gòu)化的信息進(jìn)行顯示上的控制,包括版式、顏色、大小等形式控制。行為是指對整個文檔內(nèi)部的一個模型定義及交互行為的編寫,用于編寫用戶可進(jìn)行交互式操作的文檔。

符合Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計是指能夠靈活使用Web標(biāo)準(zhǔn)對網(wǎng)頁內(nèi)容進(jìn)行結(jié)構(gòu)、表現(xiàn)與行為的分離——即表現(xiàn)與內(nèi)容的分離。

正是這樣的標(biāo)準(zhǔn)使得CSS在網(wǎng)頁設(shè)計中得以靈活使用,從而使得列表標(biāo)簽在網(wǎng)頁設(shè)計中的應(yīng)用中“活”起來。

2 列表標(biāo)簽的新應(yīng)用——導(dǎo)航條設(shè)計

在新的標(biāo)準(zhǔn)下的網(wǎng)頁設(shè)計中,列表標(biāo)簽本身沒有變化,是CSS的應(yīng)用使其有了新的應(yīng)用。列表標(biāo)簽的新應(yīng)用主要體現(xiàn)在頁面的導(dǎo)航設(shè)計中。

頁面的導(dǎo)航主要分為橫向?qū)Ш胶涂v向?qū)Ш?在以前設(shè)計導(dǎo)航時,主要是利用表格布局,在Web標(biāo)準(zhǔn)中就不再用表格設(shè)計導(dǎo)航,而主要采用列表標(biāo)簽。從另一個角度來看導(dǎo)航,其實導(dǎo)航就是一些列表項的排列。

常用于導(dǎo)航設(shè)計的列表標(biāo)簽主要是項目列表ul/li,項目列表的主要特點是列表項之間沒有序列,也就是說各列表項前面沒有序列號,正好符合導(dǎo)航設(shè)計需要。在一些特殊情況下,還可以用定義列表標(biāo)簽ol/li設(shè)計導(dǎo)航。

2.1 橫向?qū)Ш皆O(shè)計

在導(dǎo)航條通過列表標(biāo)簽ul/li定義,此時導(dǎo)航效果是豎排列表樣式。下面代碼是利用ul/li標(biāo)簽定義的導(dǎo)航條,并對導(dǎo)航條各項做了超鏈接。

實現(xiàn)的效果如圖1所示:

圖1 導(dǎo)航條的初始狀態(tài)

加入CSS樣式表,如下所示:

通過對#menus li樣式表中的屬性設(shè)置實現(xiàn)列表項橫向顯示,變成橫向?qū)Ш健Τ溄拥臉邮皆O(shè)置是對導(dǎo)航各項做進(jìn)一步修飾。實現(xiàn)效果如圖2所示:

圖2 橫向?qū)Ш叫Ч?/p>

Web標(biāo)準(zhǔn)的頁面設(shè)計中制作導(dǎo)航條采用的一般方法。這個方法中,有一個缺點,即導(dǎo)航各項中間的豎線是設(shè)計者自己輸入的,這個豎線的顏色和寬度只能是固定的。有時候,根據(jù)頁面需要,我們需要調(diào)整豎線的顏色和寬度,在外觀上達(dá)到統(tǒng)一。因此需要將上面的導(dǎo)航做一些改:

由于在CSS樣式表中,已經(jīng)把列表各項顯示為塊狀元元素,在 HTML文檔中,直接用