陳穎 段敏娟
摘 要:文章對網頁設計的語言進行簡要介紹,以響應式Web設計理念為基礎,從校園網的模塊設計、網頁素材的選擇與處理以及網頁的結構設計、表現、行為、網頁測試進行詳細介紹,希望能為從事Web程序設計的工作者提供一定的借鑒作用。
關鍵詞:HTML5;Web設計;校園網
隨著互聯網技術的飛速發展與普及,人們利用個人電腦或移動設備在網頁上獲取信息越來越容易,設計出響應式、美觀大方、交互性好的電腦端或移動端網頁顯得尤為重要。HTML5標準的產生使互聯網端的格局發生了很大的變化,UI設計師把網站界面設計好,Web前端工程師需要利用前端開發語言將網站界面設計成網頁。本文以校園網為例,對基于HTML5的網頁設計與制作進行探討。
1 開發語言的介紹
1.1 HTML5
HTML是一種用來對網頁元素進行整理和分類,對網頁進行結構設計的標記語。是由一對“<>”和一個關鍵詞組成,主要分為雙標記和單標記,雙標記與單標記主要的區別是單標記直接用/閉合標記結束,如
,而雙標記是用/閉合標記加<>結束,如
。可通過在HTML標記中添加相關屬性對網頁元素進行設計,相同的屬性在HTML標記中不能重復出現。標記不區分大小寫,且可以相互嵌套。HTML5是HTML的最新修訂版本,其設計目的是為了在移動設備上支持多媒體,其為移動應用開發提供了另外一種技術方案。HTML5相比之前的HTML版本,提供了一些新的元素和屬性,這些新的元素和屬性有利于搜索引擎的索引整理,同時可以更好地幫助小屏幕裝置和視障人士使用。1.2 CSS
CSS是層疊樣式表,主要是對網頁進行布局,控制網頁的表現。在網頁中可通過多種方式來引用CSS樣式,但鏈入式是最常用的使用方式。CSS是通過CSS選擇器和屬性來定義的,CSS具有優先級,還具有層疊性和繼承性。CSS布局與XHTML相結合,可以實現表現與結構的分離,使網站的訪問及維護更加容易。
1.3 JavaScript
JavaScript是一種基于對象和事件驅動,并具有相對安全性的客戶端腳本語言,廣泛用于Web開發,常用來給HTML網頁添加動態功能,用來改進設計、驗證表單、檢測瀏覽器、創建Cookies,以及更多的Web應用。現在JavaScript框架有很多,而jQuery是應用最廣泛的JavaScript框架,jQuery大大地提高了JavaScript編程效率。
2 校園網的設計
2.1 各模塊的設計
本網站主要分為三大模塊:(1)頭部模塊(Header),頭部包含網站Logo和導航兩大部分。(2)主體模塊(Content),主體包括視頻點播、專題網入口、Banner圖片、部門導航以及一些欄目的詳細內容。其中欄目主要包括熱點專題、職教動態、信息公開、學校新聞4個欄目。(3)底部模塊(Footer),底部主要放置友情鏈接、學院地址、郵編、版權、備案號等信息。
2.2 網頁元素的選擇與處理
2.2.1 圖片素材
在網頁設計時,主頁圖片素材的選擇必須具有代表性,讓用戶在瀏覽主頁時通過圖片就能獲取學院一些直觀的信息。Banner圖片主要放置了學院的風景圖片、實訓圖片以及學生公寓、食堂、實訓大樓等圖片。
2.2.2 視頻素材
在視頻素材的選擇上,必須考慮視頻放在主頁中的效果,比如視頻的清晰度,視頻播放效果等。
2.2.3 文字素材
文字是信息傳遞的主要方式,文字的格式對網頁的布局、美觀非常重要,其設置的狀態直接影響到用戶對網頁信息的獲取。
3 校園網的實現
3.1 網頁的結構
校園網采用HTML5進行結構設計,頭部利用div標簽進行結構設計,定義其類名為.Header,通過img標記將Logo圖片放入頭部。利用無序列表ul標記設置導航菜單,在li列表項目項中設置菜單項。代碼如下:
主體利用div標簽進行結構設計,定義其類名為. Content,利用HTML5中的video標記設置視頻,利用video標記中的子標記source將視頻路徑放入網頁,在網頁載入時可以讀取視頻源文件。通過HTML5+CSS3+JavaScript設置Banner輪播圖片,利用定義列表dl標記設置其他欄目信息,在dt標記中放入欄目名稱,在dd標記放入相應欄目下的內容,一對dl標記中只允許一對dt標記出現,但允許一對或多對dd標記出現。底部也利用div標簽進行結構設計,定義其類名為. Footer,友情鏈接也可以通過ul標記來布局。
3.2 網頁的表現
校園網通過CSS來設置其各種表現。對頭部類.Header設置其寬度為1200像素,外邊距設置為自動auto,對Logo圖片設置float屬性為left。設置導航菜單的CSS樣式代碼如下: