張漣漪

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

基于XHTML+CSS的校園信息網(wǎng)站前端設(shè)計(jì)

張漣漪

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

重構(gòu)校園網(wǎng)已經(jīng)成為符合互聯(lián)網(wǎng)和移動(dòng)終端發(fā)展的主流趨勢(shì)，采用XHTML+CSS的方式進(jìn)行校園信息網(wǎng)站前端設(shè)計(jì)成為必然。XHTML嚴(yán)謹(jǐn)?shù)拇a編排方式和CSS高效的頁面屬性控制手段在前端設(shè)計(jì)中發(fā)揮了巨大的作用，實(shí)現(xiàn)的校園信息網(wǎng)站相較于舊版不僅提升了外宣頁面的規(guī)整程度、瀏覽器適應(yīng)性，使得其內(nèi)容增減靈活、改變風(fēng)格迅捷，更在信息管理系統(tǒng)的設(shè)計(jì)中大大優(yōu)化了數(shù)據(jù)展示，讓對(duì)象的重用變得更加便捷。

校園信息網(wǎng)；前端設(shè)計(jì)；XHTML+CSS；校園網(wǎng)

隨著互聯(lián)網(wǎng)相關(guān)技術(shù)的不斷發(fā)展和顯示終端的改變，對(duì)網(wǎng)站的要求不僅僅停留在美觀實(shí)用上，在其跨平臺(tái)性、高可訪性、高解析速度等方面提出了更多的要求。XHTML+CSS布局、DHTML和Ajax等各類新行業(yè)規(guī)范和編程標(biāo)準(zhǔn)大量涌現(xiàn)。包括淘寶、騰訊、新浪、網(wǎng)易等在內(nèi)的各種規(guī)模的IT企業(yè)都對(duì)自己的網(wǎng)站進(jìn)行了重構(gòu)[1]，符合新web標(biāo)準(zhǔn)的網(wǎng)站對(duì)于用戶和搜索引擎更加友好。

高校網(wǎng)站著力于宣傳校園文化，展現(xiàn)當(dāng)代大學(xué)生精神風(fēng)貌。武漢工程職業(yè)技術(shù)學(xué)院校園信息網(wǎng)起步于2004年，經(jīng)過十來年的建設(shè)，面對(duì)全新的互聯(lián)網(wǎng)以及終端環(huán)境，舊有網(wǎng)站已不適用，以全新的架構(gòu)方式和設(shè)計(jì)標(biāo)準(zhǔn)實(shí)現(xiàn)新信息網(wǎng)站成為必然。

1 什么是XHTML+CSS

通常所說的“web標(biāo)準(zhǔn)”一般是指網(wǎng)站采用基于XHTML語言的設(shè)計(jì)方式，它是一系列標(biāo)準(zhǔn)的集合，其優(yōu)點(diǎn)是網(wǎng)站設(shè)計(jì)代碼規(guī)范，減少了大量冗余代碼，使得代碼結(jié)構(gòu)清晰、可重用性強(qiáng)，修改和擴(kuò)展變得更容易；網(wǎng)站上線后能減少網(wǎng)絡(luò)帶寬資源浪費(fèi)，加快網(wǎng)站訪問速度。其典型的應(yīng)用模式即是“XHTML +CSS”。

XHTML即可擴(kuò)展標(biāo)記語言[2]，是通用HTML的升級(jí)。HTML語法要求較松散，雖然對(duì)網(wǎng)頁編寫者很方便，但對(duì)于機(jī)器來說，松散的語法處理起來相對(duì)困難。傳統(tǒng)的計(jì)算機(jī)尚具備兼容松散語法的能力，但隨著移動(dòng)終端的大規(guī)模普及，兼容難度變大。要求元素正確嵌套、正確關(guān)閉、統(tǒng)一小寫，規(guī)范嚴(yán)謹(jǐn)?shù)腦HTML使得生成網(wǎng)頁的適應(yīng)能力變強(qiáng)，在不同的瀏覽器上幾乎能起到同樣的渲染效果，不出現(xiàn)錯(cuò)誤變形；并且比起HTML，它清晰的條理和精準(zhǔn)的結(jié)構(gòu)定位使網(wǎng)頁向最新的HTML5標(biāo)準(zhǔn)升級(jí)也更輕松。

CSS即層疊樣式表[2]，是一種用來表現(xiàn)網(wǎng)頁文件樣式的計(jì)算機(jī)語言。它提供了豐富的文檔樣式外觀，以及設(shè)置文本和背景屬性的能力；擁有像素級(jí)的控制力可以隨意設(shè)置網(wǎng)頁元素邊框距離、內(nèi)容距離；可隨意改換大小寫方式，以及各種其他的頁面效果。它所設(shè)置的樣式聲明統(tǒng)一存放、統(tǒng)一管理，可分類可指定，可控制多個(gè)頁面，對(duì)網(wǎng)站風(fēng)格的一致性和完整性起到強(qiáng)有力的作用。CSS協(xié)助XHTML拋棄了舊式大量且重復(fù)的表格定位、拋棄了每一段都必須獨(dú)立編輯的font元素文字樣式、減掉了冗余HTML標(biāo)簽，從而使頁面文件體積變小，加載頁面的時(shí)間大大縮短。

2 校園信息網(wǎng)站利用XHTML+CSS設(shè)計(jì)的優(yōu)勢(shì)

校園信息網(wǎng)站是學(xué)校進(jìn)行教學(xué)、科研和教育管理，以及對(duì)外宣傳、資源共享、信息交流和協(xié)同工作的計(jì)算機(jī)網(wǎng)絡(luò)web系統(tǒng)。對(duì)內(nèi)是在校師生工作學(xué)習(xí)的助手，對(duì)外代表學(xué)校的社會(huì)形象，校園信息網(wǎng)應(yīng)具備顯示效率高、整站風(fēng)格統(tǒng)一、內(nèi)容易擴(kuò)充、導(dǎo)航準(zhǔn)確瀏覽便捷、信息翔實(shí)更新及時(shí)、信息發(fā)布方法簡(jiǎn)單便捷等特點(diǎn)。

XHTML+CSS應(yīng)用模式的功能機(jī)制恰好全面滿足前端設(shè)計(jì)技術(shù)上的要求：

(1)根據(jù)內(nèi)容規(guī)劃、集中管理的樣式表CSS能控制全部頁面風(fēng)格、提高顯示效率；根據(jù)需求定制顯示風(fēng)格，可快速替換特定樣式，不用每個(gè)頁面逐行修改代碼。

(2)摒棄了HTML4時(shí)代的表格定位，XHTML采用DIV塊定位可使網(wǎng)站界面定位更加精確且高效，并能在原有頁面結(jié)構(gòu)不受影響的情況下隨時(shí)增刪改；在進(jìn)一步升級(jí)時(shí)能結(jié)合CSS，針對(duì)不同的應(yīng)用終端改變外宣頁面布局方式。

(3)多頁面同一導(dǎo)航保證了瀏覽時(shí)方向明確，無迷路之憂讓瀏覽體驗(yàn)更佳；樹形結(jié)構(gòu)訪問層深度控制在2-4之間，盡量將網(wǎng)站內(nèi)容扁平化，使訪問者更容易獲取所需信息，便于各搜索引擎蜘蛛收錄網(wǎng)站內(nèi)容、以利宣傳[3]。

(4)嚴(yán)整的代碼表達(dá)使得后臺(tái)嵌入數(shù)據(jù)庫(kù)內(nèi)容更容易，完全避免了過去數(shù)據(jù)引用和網(wǎng)頁樣式混雜、程序易讀性極差的情況，這一點(diǎn)在信息網(wǎng)后臺(tái)的發(fā)布系統(tǒng)前端設(shè)計(jì)上表現(xiàn)的尤為明顯。

3 XHTML+CSS在校園信息網(wǎng)前端設(shè)計(jì)上的應(yīng)用

校園信息網(wǎng)主要分為兩個(gè)部分：校園外宣主頁和信息發(fā)布系統(tǒng)。

3.1 校園外宣主頁

圖1 校園網(wǎng)首頁

圖2 首頁結(jié)構(gòu)框圖

外宣主頁的日常風(fēng)格延承了一貫的藍(lán)白主色調(diào)(見圖1)，符合美學(xué)的主體藍(lán)白灰，使用Photoshop設(shè)計(jì)基本型，加少數(shù)彩色提亮、 “三”型結(jié)構(gòu)。如圖2所示：四個(gè)主DIV：header、menu、content和footer，header區(qū)固定主圖標(biāo)志的位置；content區(qū)域由幾個(gè)并列的區(qū)塊組合而成，這些區(qū)塊分別展示校園風(fēng)貌以及最新消息，能根據(jù)信息內(nèi)容需求單獨(dú)調(diào)整；另增添日常辦公教學(xué)應(yīng)用塊c_menu：郵箱系統(tǒng)、OA系統(tǒng)、圖文信息、在線培訓(xùn)等功能；導(dǎo)航(menu區(qū)域)的下拉菜單涵蓋主菜單的分類內(nèi)容。如圖3展示導(dǎo)航“學(xué)校概況”中的下拉菜單，采用ul和li列表實(shí)現(xiàn)。

圖3 學(xué)校概況主欄目及子菜單

站點(diǎn)中的每個(gè)頁面中都有共同的代碼段，即在網(wǎng)頁的區(qū)域內(nèi)，鏈接了相同的樣式表：

rel="stylesheet" type="text/css" />

rel="stylesheet" type="text/css" />

這兩個(gè)主要樣式保證了整個(gè)網(wǎng)站的主色調(diào)、頁頭頁腳樣式、導(dǎo)航欄和內(nèi)容呈現(xiàn)風(fēng)格的統(tǒng)一。圖4～圖6即可代表網(wǎng)站中幾類頁面：信息列表頁、內(nèi)容展示頁和二級(jí)欄目頁。

圖4 新聞中心信息列表頁

圖5 學(xué)校概況內(nèi)容展示頁

圖6 二級(jí)欄目：招生就業(yè)網(wǎng)

樣式表關(guān)聯(lián)的路徑，會(huì)因?yàn)橄鄬?duì)文件夾的位置不同而有所不同，本設(shè)計(jì)中，style_index.css是所有頁面的頁頭和頁腳規(guī)定樣式；index_menu.css是所有頁面的主導(dǎo)航顯示樣式。在某些特定的時(shí)刻需要改變首頁顯示風(fēng)格時(shí)，只需要修改這兩個(gè)樣式表中的某些屬性，例如背景色、logo圖片等。

如圖7所示，body屬性中background-image的值改變的是整個(gè)網(wǎng)頁背景圖，background-color的值改變的是網(wǎng)頁背景色；header_line屬性改變的是網(wǎng)頁頭的線條色；header_banner屬性改變的是題頭圖。修改主菜單的風(fēng)格與此類似，找到對(duì)應(yīng)內(nèi)容區(qū)域的屬性，改值即可。

圖7 改變顯示風(fēng)格的樣式屬性

樣式表中屬性值的修改讓整個(gè)網(wǎng)頁外觀發(fā)生變化，可以在替換代碼內(nèi)容時(shí)自行選擇“針對(duì)全站”或“針對(duì)首頁”，這樣的變更準(zhǔn)確高效。脫離頁面代碼的樣式表修改，使得編輯方式不需要對(duì)著頁面一行行的“捉蟲”，也不會(huì)由于某個(gè)誤操作破壞頁面內(nèi)容的完整性。

本設(shè)計(jì)中的樹形結(jié)構(gòu)，從首頁開始，至多通過四次節(jié)點(diǎn)就能看到具體的內(nèi)容。路徑短的例如首頁新聞，直接點(diǎn)擊相應(yīng)內(nèi)容即可；多一層的例如招生就業(yè)，存在幾個(gè)分類子頁；各部門及二級(jí)學(xué)院的內(nèi)容則置于3-4層。這樣的結(jié)構(gòu)充分滿足了信息優(yōu)先級(jí)劃分以及網(wǎng)頁內(nèi)容盡可能扁平化的需求。

3.2 信息發(fā)布系統(tǒng)

信息發(fā)布系統(tǒng)采用了和主頁一樣的色調(diào)(見圖8，圖9)，大量的數(shù)據(jù)連接和訪問出入等后端操作在本設(shè)計(jì)中采用的是.net 方式[4]，它和前端顯示是分開的，修改數(shù)據(jù)連接、增刪改編程不會(huì)影響前端設(shè)計(jì)。

圖8 信息發(fā)布系統(tǒng)登錄畫面

圖9 發(fā)布系統(tǒng)管理畫面

如圖4和圖9所示，大量數(shù)據(jù)產(chǎn)生的列表，最終以能相同的樣式羅列，也歸功于CSS。它不僅可以控制普通靜態(tài)的網(wǎng)頁元素，還可以控制動(dòng)態(tài)元素，這使得代碼條理清晰、易讀，便于在進(jìn)行動(dòng)態(tài)數(shù)據(jù)編程時(shí)查找和糾錯(cuò)。需要指明的是，在網(wǎng)頁不同區(qū)塊調(diào)用樣式表的方式不同：在靜態(tài)元素中，使用方法是"id="樣式表名""或者"class="樣式表名""；而在很多動(dòng)態(tài)元素中，經(jīng)常出現(xiàn)"CssClass="樣式表名""或者"ItemStyle-CssClass="樣式表名""。如果樣式表未能控制其針對(duì)的對(duì)象，應(yīng)該查一下是不是引用方式錯(cuò)誤。

在信息管理系統(tǒng)中， GridView對(duì)象使用非常頻繁，一個(gè)頁面中可能出現(xiàn)三四次甚至更多，并且類似的頁面在一個(gè)系統(tǒng)中亦會(huì)有數(shù)個(gè)。如圖10所示，GridView對(duì)象的描述中出現(xiàn)了多個(gè)樣式屬性：BorderColor、BorderWidth、width、BackColor、ForeColor…每一個(gè)屬性出現(xiàn)多次，分配的值各不相同，管控的對(duì)象也不同，就算是編程熟手也不容易在短時(shí)間內(nèi)迅速判斷這些代碼執(zhí)行后的效果。一旦需要調(diào)用或更換顯示樣式，必須逐行調(diào)整細(xì)節(jié)，編程工作將變得極其復(fù)雜，與數(shù)據(jù)庫(kù)對(duì)接時(shí)還容易因?yàn)榇a堆積導(dǎo)致移行、錯(cuò)位，并產(chǎn)生大量的冗余代碼，拖累頁面載入速度。

圖11中使用CSS則不然，標(biāo)頭樣式加一個(gè)單行顯示樣式itemstyle-cssclass=”xx_ys”很容易就讓GridView整齊顯示，變更時(shí)改變對(duì)應(yīng)樣式表中的屬性值，無論整個(gè)系統(tǒng)中有多少個(gè)這樣的表，外觀均會(huì)自動(dòng)變化，此舉大大增強(qiáng)了程序的可讀性，并且讓對(duì)象復(fù)用變得更為快速便捷。

圖10 所有樣式均寫在單一屬性中的數(shù)據(jù)窗口對(duì)象

圖11 經(jīng)過樣式表整理規(guī)劃的數(shù)據(jù)窗口對(duì)象

4 結(jié)語

網(wǎng)站前端設(shè)計(jì)采用XHTML+CSS方式，具有強(qiáng)大的優(yōu)勢(shì)，使用中亦有一些需要注意的細(xì)節(jié)：在建議CSS使用全獨(dú)立寫法的現(xiàn)在，某些特定樣式的頁依然可使用內(nèi)嵌CSS，例如本設(shè)計(jì)中的信息系統(tǒng)登錄頁，因?yàn)樗臉邮經(jīng)]有可復(fù)用性；DIV塊的布局方式中務(wù)必盡量減少嵌套，采用自上而下、從左到右的平鋪模式，這樣可以在網(wǎng)頁載入時(shí)幾個(gè)塊同時(shí)進(jìn)行，而不必從外到內(nèi)一層層加載等待。

筆者設(shè)計(jì)實(shí)現(xiàn)的校園信息網(wǎng)經(jīng)過數(shù)月上線檢驗(yàn)，運(yùn)行良好。XHTML+CSS設(shè)計(jì)方式使得網(wǎng)站代碼不需要額外增加特別的容錯(cuò)機(jī)制也能在不同的瀏覽器上渲染出大致相同的效果。這對(duì)網(wǎng)站自適應(yīng)移動(dòng)終端、以后向更新的HTML5+CSS3結(jié)構(gòu)升級(jí)打下了良好的基礎(chǔ)和提供了強(qiáng)有力的支撐。

[1] Web前端開發(fā)是做什么的[EB/OL].http://blog.sina.com.cn/s/blog_c37119430102x8cb.html.

[2] 吳豐，丁欣.Dreamweaver網(wǎng)頁設(shè)計(jì)與制作[M].北京：清華大學(xué)出版社，2013.

[3] 吳澤欣 SEO教程：搜索引擎優(yōu)化入門與進(jìn)階[M].第2版.北京：人民郵電出版社，2009.

[4] 童愛紅，劉凱，劉雪梅.VB.NET程序設(shè)計(jì)實(shí)用教程[M].北京：清華大學(xué)出版社，2009.

CampusInformationWebsiteFront-endDesignBasedonXHTML+CSS

Zhang Lianyi

(Wuhan Engineering Institute,Wuhan 430080,Hubei)

Reconstruction of campus information website has become a mainstream tendency which conforms to the development of the Internet and mobile terminal. So it is necessary to adopt XHTML+CSS in front-end design. The stringent encoding mode of XHTML and efficient page attribute of CSS is of great importance in front-end design. The new campus information website is well-organized on the FrontPage, more adaptive to browsers so it is convenient to add or delete contents, change styles, and optimize data in information regulation system.

campus information website; front-end design; XHTML+CSS; campus website

李文英)

2017-11-05

2017-11-17

本文為2017年武漢工程職業(yè)技術(shù)學(xué)院課題“基于.net結(jié)構(gòu)的校園網(wǎng)站及信息發(fā)布系統(tǒng)建設(shè)”(項(xiàng)目編號(hào)：201717)的研究成果

張漣漪(1980～)，女，碩士，講師.E-mail：zlyv@163.com.

TP393.18

A

1671-3524(2017)04-0031-05