陳穎 段敏娟

摘 要：文章對(duì)網(wǎng)頁(yè)設(shè)計(jì)的語(yǔ)言進(jìn)行簡(jiǎn)要介紹，以響應(yīng)式Web設(shè)計(jì)理念為基礎(chǔ)，從校園網(wǎng)的模塊設(shè)計(jì)、網(wǎng)頁(yè)素材的選擇與處理以及網(wǎng)頁(yè)的結(jié)構(gòu)設(shè)計(jì)、表現(xiàn)、行為、網(wǎng)頁(yè)測(cè)試進(jìn)行詳細(xì)介紹，希望能為從事Web程序設(shè)計(jì)的工作者提供一定的借鑒作用。

關(guān)鍵詞：HTML5；Web設(shè)計(jì)；校園網(wǎng)

隨著互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展與普及，人們利用個(gè)人電腦或移動(dòng)設(shè)備在網(wǎng)頁(yè)上獲取信息越來(lái)越容易，設(shè)計(jì)出響應(yīng)式、美觀大方、交互性好的電腦端或移動(dòng)端網(wǎng)頁(yè)顯得尤為重要。HTML5標(biāo)準(zhǔn)的產(chǎn)生使互聯(lián)網(wǎng)端的格局發(fā)生了很大的變化，UI設(shè)計(jì)師把網(wǎng)站界面設(shè)計(jì)好，Web前端工程師需要利用前端開(kāi)發(fā)語(yǔ)言將網(wǎng)站界面設(shè)計(jì)成網(wǎng)頁(yè)。本文以校園網(wǎng)為例，對(duì)基于HTML5的網(wǎng)頁(yè)設(shè)計(jì)與制作進(jìn)行探討。

1 開(kāi)發(fā)語(yǔ)言的介紹

1.1 HTML5

HTML是一種用來(lái)對(duì)網(wǎng)頁(yè)元素進(jìn)行整理和分類，對(duì)網(wǎng)頁(yè)進(jìn)行結(jié)構(gòu)設(shè)計(jì)的標(biāo)記語(yǔ)。是由一對(duì)“<>”和一個(gè)關(guān)鍵詞組成，主要分為雙標(biāo)記和單標(biāo)記，雙標(biāo)記與單標(biāo)記主要的區(qū)別是單標(biāo)記直接用/閉合標(biāo)記結(jié)束，如

，而雙標(biāo)記是用/閉合標(biāo)記加<>結(jié)束，如

?？赏ㄟ^(guò)在HTML標(biāo)記中添加相關(guān)屬性對(duì)網(wǎng)頁(yè)元素進(jìn)行設(shè)計(jì)，相同的屬性在HTML標(biāo)記中不能重復(fù)出現(xiàn)。標(biāo)記不區(qū)分大小寫(xiě)，且可以相互嵌套。HTML5是HTML的最新修訂版本，其設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體，其為移動(dòng)應(yīng)用開(kāi)發(fā)提供了另外一種技術(shù)方案。HTML5相比之前的HTML版本，提供了一些新的元素和屬性，這些新的元素和屬性有利于搜索引擎的索引整理，同時(shí)可以更好地幫助小屏幕裝置和視障人士使用。

1.2 CSS

CSS是層疊樣式表，主要是對(duì)網(wǎng)頁(yè)進(jìn)行布局，控制網(wǎng)頁(yè)的表現(xiàn)。在網(wǎng)頁(yè)中可通過(guò)多種方式來(lái)引用CSS樣式，但鏈入式是最常用的使用方式。CSS是通過(guò)CSS選擇器和屬性來(lái)定義的，CSS具有優(yōu)先級(jí)，還具有層疊性和繼承性。CSS布局與XHTML相結(jié)合，可以實(shí)現(xiàn)表現(xiàn)與結(jié)構(gòu)的分離，使網(wǎng)站的訪問(wèn)及維護(hù)更加容易。

1.3 JavaScript

JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)，并具有相對(duì)安全性的客戶端腳本語(yǔ)言，廣泛用于Web開(kāi)發(fā)，常用來(lái)給HTML網(wǎng)頁(yè)添加動(dòng)態(tài)功能，用來(lái)改進(jìn)設(shè)計(jì)、驗(yàn)證表單、檢測(cè)瀏覽器、創(chuàng)建Cookies，以及更多的Web應(yīng)用。現(xiàn)在JavaScript框架有很多，而jQuery是應(yīng)用最廣泛的JavaScript框架，jQuery大大地提高了JavaScript編程效率。

2 校園網(wǎng)的設(shè)計(jì)

2.1 各模塊的設(shè)計(jì)

本網(wǎng)站主要分為三大模塊：（1）頭部模塊（Header），頭部包含網(wǎng)站Logo和導(dǎo)航兩大部分。（2）主體模塊（Content），主體包括視頻點(diǎn)播、專題網(wǎng)入口、Banner圖片、部門(mén)導(dǎo)航以及一些欄目的詳細(xì)內(nèi)容。其中欄目主要包括熱點(diǎn)專題、職教動(dòng)態(tài)、信息公開(kāi)、學(xué)校新聞4個(gè)欄目。（3）底部模塊（Footer），底部主要放置友情鏈接、學(xué)院地址、郵編、版權(quán)、備案號(hào)等信息。

2.2 網(wǎng)頁(yè)元素的選擇與處理

2.2.1 圖片素材

在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，主頁(yè)圖片素材的選擇必須具有代表性，讓用戶在瀏覽主頁(yè)時(shí)通過(guò)圖片就能獲取學(xué)院一些直觀的信息。Banner圖片主要放置了學(xué)院的風(fēng)景圖片、實(shí)訓(xùn)圖片以及學(xué)生公寓、食堂、實(shí)訓(xùn)大樓等圖片。

2.2.2 視頻素材

在視頻素材的選擇上，必須考慮視頻放在主頁(yè)中的效果，比如視頻的清晰度，視頻播放效果等。

2.2.3 文字素材

文字是信息傳遞的主要方式，文字的格式對(duì)網(wǎng)頁(yè)的布局、美觀非常重要，其設(shè)置的狀態(tài)直接影響到用戶對(duì)網(wǎng)頁(yè)信息的獲取。

3 校園網(wǎng)的實(shí)現(xiàn)

3.1 網(wǎng)頁(yè)的結(jié)構(gòu)

校園網(wǎng)采用HTML5進(jìn)行結(jié)構(gòu)設(shè)計(jì)，頭部利用div標(biāo)簽進(jìn)行結(jié)構(gòu)設(shè)計(jì)，定義其類名為.Header，通過(guò)img標(biāo)記將Logo圖片放入頭部。利用無(wú)序列表ul標(biāo)記設(shè)置導(dǎo)航菜單，在li列表項(xiàng)目項(xiàng)中設(shè)置菜單項(xiàng)。代碼如下：

• 網(wǎng)站首頁(yè)
• 校園概況
• 組織機(jī)構(gòu)
• 院系導(dǎo)航
• 教育科研
• 校園文化
• 校園風(fēng)光

主體利用div標(biāo)簽進(jìn)行結(jié)構(gòu)設(shè)計(jì)，定義其類名為. Content，利用HTML5中的video標(biāo)記設(shè)置視頻，利用video標(biāo)記中的子標(biāo)記source將視頻路徑放入網(wǎng)頁(yè)，在網(wǎng)頁(yè)載入時(shí)可以讀取視頻源文件。通過(guò)HTML5+CSS3+JavaScript設(shè)置Banner輪播圖片，利用定義列表dl標(biāo)記設(shè)置其他欄目信息，在dt標(biāo)記中放入欄目名稱，在dd標(biāo)記放入相應(yīng)欄目下的內(nèi)容，一對(duì)dl標(biāo)記中只允許一對(duì)dt標(biāo)記出現(xiàn)，但允許一對(duì)或多對(duì)dd標(biāo)記出現(xiàn)。底部也利用div標(biāo)簽進(jìn)行結(jié)構(gòu)設(shè)計(jì)，定義其類名為. Footer，友情鏈接也可以通過(guò)ul標(biāo)記來(lái)布局。

3.2 網(wǎng)頁(yè)的表現(xiàn)

校園網(wǎng)通過(guò)CSS來(lái)設(shè)置其各種表現(xiàn)。對(duì)頭部類.Header設(shè)置其寬度為1200像素，外邊距設(shè)置為自動(dòng)auto，對(duì)Logo圖片設(shè)置float屬性為left。設(shè)置導(dǎo)航菜單的CSS樣式代碼如下：