移動互聯(lián)網(wǎng)時代高職網(wǎng)頁前端課程內(nèi)容重構(gòu)

柳珺

摘要：在互聯(lián)網(wǎng)已經(jīng)進入Web3.0時代的今天，HTML5和CSS3作為新一代的網(wǎng)頁前端技術(shù)已走上前臺，成為主流網(wǎng)頁前端技術(shù)。HTML5和CSS3為網(wǎng)頁帶來了更加豐富的表現(xiàn)能力，更加賞心悅目的互動效果，并且簡化了網(wǎng)頁前端的設(shè)計過程，使網(wǎng)頁結(jié)構(gòu)更加清晰明確、簡單易讀，使搜索引擎更容易抓取網(wǎng)頁中的有用信息。HTML5和CSS3已經(jīng)成為高職網(wǎng)頁前端課程的核心內(nèi)容。

關(guān)鍵詞：網(wǎng)頁前端技術(shù)；HTML5；CSS3

中圖分類號：TP393 文獻標(biāo)識碼：A 文章編號：1009-3044（2016）36-0198-03

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，尤其是進入了移動互聯(lián)網(wǎng)時代，網(wǎng)頁技術(shù)在變革，如今的互聯(lián)網(wǎng)已經(jīng)進入了web3.0的時代，網(wǎng)站的前端發(fā)生了翻天覆地的變化，網(wǎng)頁不再只是承載單一的文字和圖片，頁面上內(nèi)容生動的動畫、聲音、視頻以及軟件化的交互形式都是基于前端技術(shù)實現(xiàn)的。如今社會對網(wǎng)頁人才的需求，已經(jīng)從最初的制作網(wǎng)頁，發(fā)展到面向網(wǎng)頁的開發(fā)工作。[1]網(wǎng)頁前端技術(shù)在變，社會對網(wǎng)頁前端人才的需求在變，傳授網(wǎng)頁前端技術(shù)的網(wǎng)頁前端課程的內(nèi)容也必須隨之變化、更新。

1 移動互聯(lián)網(wǎng)時代網(wǎng)頁的特點

隨著移動互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展和移動終端設(shè)備的智能化，移動終端設(shè)備（手機、平板電腦）上網(wǎng)的便捷性優(yōu)勢逐漸顯現(xiàn)，越來越多的人更傾向于通過移動終端訪問互聯(lián)網(wǎng)，移動終端已經(jīng)成為人們接觸網(wǎng)絡(luò)的重要渠道之一。據(jù)統(tǒng)計當(dāng)前移動終端設(shè)備的用戶數(shù)量已超越PC端，移動終端的網(wǎng)頁瀏覽需求量上升，因此怎么讓網(wǎng)頁能夠兼容更多類型的終端設(shè)備已經(jīng)成為當(dāng)前網(wǎng)頁設(shè)計中的重要問題。為了解決這個問題，響應(yīng)式網(wǎng)頁應(yīng)運而生。

所謂響應(yīng)式網(wǎng)頁就是根據(jù)瀏覽網(wǎng)頁的設(shè)備不同，自動對網(wǎng)頁進行響應(yīng)和調(diào)整，包括分辨率、圖片的尺寸、頁面寬度、頁面布局和相關(guān)腳本功能的調(diào)整。即響應(yīng)式網(wǎng)頁就是一個網(wǎng)站能夠兼容多種終端，而不是為每種終端做一個特定的版本。

響應(yīng)式網(wǎng)頁的設(shè)計應(yīng)該成為當(dāng)前網(wǎng)頁前端技術(shù)課程中不可缺少的內(nèi)容。

2 網(wǎng)頁前端技術(shù)的核心內(nèi)容分析

目前，網(wǎng)站設(shè)計標(biāo)準(zhǔn)化的理念已經(jīng)形成，基于Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計已經(jīng)成為主流的網(wǎng)頁前端設(shè)計技術(shù)?；赪eb標(biāo)準(zhǔn)制作網(wǎng)頁，便于程序設(shè)計者設(shè)計出具有規(guī)范的文件，便于瀏覽器廠家研發(fā)出適應(yīng)Web標(biāo)準(zhǔn)的瀏覽器，進而使得網(wǎng)頁文件可以在不同的瀏覽器或終端設(shè)備展示信息。

Web標(biāo)準(zhǔn)即網(wǎng)站標(biāo)準(zhǔn)，其用來創(chuàng)建、規(guī)范網(wǎng)頁的基本內(nèi)容，其是一系列標(biāo)準(zhǔn)的集合。通常網(wǎng)頁由內(nèi)容結(jié)構(gòu)、表現(xiàn)和行為三方面構(gòu)成，那么Web標(biāo)準(zhǔn)主要由結(jié)構(gòu)化標(biāo)準(zhǔn)語言、表現(xiàn)標(biāo)準(zhǔn)語言和行為標(biāo)準(zhǔn)三方面的標(biāo)準(zhǔn)構(gòu)成。

結(jié)構(gòu)化標(biāo)準(zhǔn)語言包括：超文本標(biāo)記語言（HTML）、可擴展的超文本標(biāo)記語言（XHTML）和可擴展的標(biāo)記語言（XML）；表現(xiàn)標(biāo)準(zhǔn)語言包括：層疊樣式表（CSS）；行為標(biāo)準(zhǔn)包括：DOM（文檔對象模型）和JavaScript。網(wǎng)頁前端開發(fā)中，HTML、CSS和JavaScript是三種支柱型的語言，即在整個開發(fā)過程中扮演著十分重要的角色。[2]因此HTML、CSS和JavaScript三種語言是網(wǎng)頁前端課程的主要內(nèi)容。

從前端開發(fā)技術(shù)角度來看，互聯(lián)網(wǎng)的發(fā)展經(jīng)歷了以HTML和CSS為主的Web1.0時代，以Ajax應(yīng)用為主的Web2.0時代，正在邁進以HTML5為主的嶄新時代。[3]

HTML5是HTML（超文本標(biāo)記語言）的第五個版本，其作為新時代的web設(shè)計技術(shù)，為網(wǎng)頁帶來了更加豐富的表現(xiàn)能力，更加賞心悅目的互動效果。目前的網(wǎng)頁前端設(shè)計中，HTML5已經(jīng)逐漸的取代了HTML4.01和XHTML1.0成為主流的結(jié)構(gòu)化標(biāo)準(zhǔn)語言。CSS3也逐漸走到了前臺，成為主流的表現(xiàn)標(biāo)準(zhǔn)語言。在此發(fā)展趨勢下，HTML5和CSS3技術(shù)已經(jīng)成為Web前端技術(shù)的重要組成部分。

3 網(wǎng)頁前端設(shè)計相關(guān)的HTML5和CSS3的新特性

HTML是目前在網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主要語言。HTML5以HTML為基礎(chǔ)，對HTML進行了大量的修改，增加了許多新元素，擴展了許多新功能，使網(wǎng)頁結(jié)構(gòu)更加清晰明確、更加簡單易讀。HTML5的應(yīng)用給網(wǎng)頁的前端設(shè)計理念和技術(shù)帶來了沖擊。

3.1 HTML5增加了結(jié)構(gòu)類元素

在HTML5中，為了使文檔的結(jié)構(gòu)更加清晰明確，定義了一組新的語義化結(jié)構(gòu)元素：header元素、nav元素、section元素、article元素、footer元素和aside元素等。這些新的結(jié)構(gòu)類元素可以簡化頁面的設(shè)計，使HTML文檔更容易加載，使搜索引擎更容易抓取網(wǎng)頁中的有用信息。

3.2 HTML5擴展了表單元素的功能

表單的功能是進行數(shù)據(jù)采集實現(xiàn)人機交互，其是網(wǎng)頁不可缺少的組成部分。

HTML5中增加了表單方面的許多功能，包括增加了input元素的輸入類型以及input元素的屬性。使用這些新的表單特性，前端設(shè)計人員可以更加省力和高效地制作出標(biāo)準(zhǔn)的Web表單。另外HTML5的表單帶有驗證功能，這樣能夠減少表單驗證功能的代碼編寫。

3.3 HTML5新增了canvas技術(shù)

canvas是HTML5新增的專門用于繪制圖形的元素，在頁面上放置一個canvas元素，就相當(dāng)于在頁面上放置了一塊畫布，可以在其中進行圖形的描繪。既可以實現(xiàn)最簡單直接的繪圖，也可以通過編寫腳本實現(xiàn)極為復(fù)雜的應(yīng)用，繪制出各種美妙絕倫的圖形、精彩紛呈的游戲等。

3.4 HTML5改變了多媒體的應(yīng)用方式

HTML5之前，在網(wǎng)頁中展示的視頻和音頻等多媒體素材，一般使用第三方開發(fā)的播放器進行，但這種方法需要在瀏覽器中安裝各種插件才能完成。HTML5中實現(xiàn)了音頻和視頻播放和控制的革新，其新增加的audio和video兩個元素，可以不需要安裝任何插件或工具即能在網(wǎng)頁中直接播放音頻和視頻。

CSS層疊樣式表用于控制網(wǎng)頁頁面的外觀，通過使用CSS樣式控制頁面各元素的外觀顯示，可實現(xiàn)頁面的內(nèi)容結(jié)構(gòu)與表現(xiàn)分離。CSS3是CSS技術(shù)的最新升級版本，CSS3增加了許多新的功能，使得不僅能簡化網(wǎng)頁前端的設(shè)計過程，還能加快頁面的載入速度。

1）CSS3增加并完善了選擇器的功能

在CSS3中，提倡使用選擇器將樣式與元素直接綁定起來，這樣在樣式表中什么樣式與什么元素相匹配變得一目了然，修改起來很方便。通過選擇器還可以實現(xiàn)各種復(fù)雜的指定，同時能大量減少樣式表代碼書寫量，最終書寫出來的樣式表變得簡潔明了。

2）CSS3增加了文本屬性

在文本樣式控制方面，CSS3新增了幾個文本屬性：text-shadow屬性用于為文字添加陰影或模糊效果；text-overflow屬性用于設(shè)置超長文本省略顯示；word-wrap屬性用于設(shè)置文本超過指定容器的邊界時是否斷開轉(zhuǎn)行。

3）完善了顏色控制

在CSS3之前，只能使用RGB模式定義顏色值，只能通過opacity屬性設(shè)置元素的不透明度。而CSS3增加了3種顏色定義模式：RGBA顏色值、HSL顏色值和HSLA顏色值，并且可以通過對RGBA顏色值和HSLA顏色值設(shè)定Alpha通道的方法更容易地實現(xiàn)將半透明文字與圖像互相重疊的效果。

4）CSS3完善了盒模型功能

CSS3增強了元素邊框的控制能力，主要包括其支持圓角邊框、圖片邊框和多層邊框等。圓角邊框的繪制是美化頁面效果的常用手法之一，在CSS3之前，需要使用圖像文件才能達到圓角的效果，而CSS3則可以直接使用border-radius屬性創(chuàng)建圓角邊框。

為了方便靈活地設(shè)計網(wǎng)頁效果，CSS3增強了background屬性的功能，允許在同一個元素內(nèi)疊加多個背景圖像，還可以通過控制背景圖片的尺寸來實現(xiàn)完美的視覺效果。

5）CSS3增加了新的布局方式

CSS3增加了多列自動布局屬性column，利用該屬性可以自動將內(nèi)容按指定的列數(shù)進行排列。CSS3還增加了box屬性，通過該屬性可以實現(xiàn)彈性盒布局，利用該功能可以輕松地創(chuàng)建自適應(yīng)瀏覽器容器的流動布局或自適應(yīng)字體大小的彈性布局。CSS3還新增了Media Queries模塊，利用該功能可以根據(jù)不同的媒體類型選擇相應(yīng)的樣式，從而實現(xiàn)響應(yīng)式布局。

6）CSS3提供了動畫功能

CSS3所提供的動畫功能，主要包括變形、轉(zhuǎn)換和動畫技術(shù)。使用動畫功能，可以實現(xiàn)在屬性值的開始值與結(jié)束值之間進行平滑過渡，從而使頁面上的文字、圖像或背景具有動畫效果。

從可用性的角度方面考慮，HTML5和CSS3可以更好地促進用戶與網(wǎng)站間的互動，特別是能夠提供更多、更加優(yōu)秀的交互性用戶體驗。HTML5和CSS3已經(jīng)成為移動互聯(lián)網(wǎng)時代網(wǎng)頁前端的核心技術(shù)，因此也必將成為網(wǎng)頁前端技術(shù)課程的主要內(nèi)容。

4 移動互聯(lián)網(wǎng)時代網(wǎng)頁前端課程教學(xué)內(nèi)容設(shè)計

由以上分析可知，HTML、CSS和JavaScript三種語言在網(wǎng)頁前端技術(shù)中起著支撐作用，是網(wǎng)頁前端課程的主要內(nèi)容。隨著HTML5和CSS3的日趨成熟，HTML5+CSS3+JavaScript已經(jīng)成為移動互聯(lián)網(wǎng)時代網(wǎng)頁前端開發(fā)的主流技術(shù)。

為了跟隨網(wǎng)頁前端技術(shù)的發(fā)展，讓學(xué)生學(xué)到實用的網(wǎng)頁前端技術(shù)，我們對我院高職軟件專業(yè)的網(wǎng)頁前端課程進行的整合和教學(xué)內(nèi)容重構(gòu)，將該專業(yè)網(wǎng)頁前端相關(guān)課程《網(wǎng)頁設(shè)計與制作》和《JavaScript》整合為《網(wǎng)頁前端技術(shù)》，有效地將HTML、CSS和JavaScript三種語言融合在一起，達到三種語言的無縫銜接。在新的課程體系中，繼續(xù)將已經(jīng)成熟并普遍使用的DIV+CSS網(wǎng)頁制作模式貫穿課程始終，并將HTML、CSS的基礎(chǔ)知識和HTML5、CSS3的新特性融入Dreamweaver CS6網(wǎng)頁編輯軟件的講解中，注重HTML5、CSS3新特性的引用與思維模式的遷移。

《網(wǎng)頁前端技術(shù)》的教學(xué)內(nèi)容分為四個模塊：網(wǎng)頁前端基礎(chǔ)、網(wǎng)頁前端基本操作、網(wǎng)頁前端高級操作和JavaScript語言與jQuery。

1）網(wǎng)頁前端基礎(chǔ)模塊包括網(wǎng)頁入門知識、HTML基礎(chǔ)和CSS基礎(chǔ)三部分。

（1）網(wǎng)頁入門知識部分：主要學(xué)習(xí)網(wǎng)站網(wǎng)頁相關(guān)的概念、Web標(biāo)準(zhǔn)、內(nèi)容結(jié)構(gòu)與表現(xiàn)相分離的理念等。（2）HTML基礎(chǔ)部分：主要學(xué)習(xí)HTML概念、HTML5文檔結(jié)構(gòu)、HTML常見元素（包括HTML5新增加的多媒體類元素和結(jié)構(gòu)類元素）。（3）CSS基礎(chǔ)部分：主要學(xué)習(xí)CSS概念、CSS語法、盒模型（包括CSS3新增的控制盒模型外觀的屬性）、CSS選擇器（包括CSS3新增加的屬性選擇器）。

2）網(wǎng)頁前端基本操作模塊包括文本操作、圖像操作和網(wǎng)頁布局與定位三部分。

（1）文本操作部分：主要學(xué)習(xí)網(wǎng)頁中文字的插入、各類超鏈接的創(chuàng)建、控制文本外觀的CSS基本屬性、CSS3新增的文本控制特性（文本陰影設(shè)置，溢出文本的截斷，文本的換行）、列表的插入及列表的應(yīng)用。（2）圖像操作部分：主要學(xué)習(xí)網(wǎng)頁中圖像及圖像效果的插入、與圖像相關(guān)的CSS基礎(chǔ)屬性、CSS3新增的圖像控制特性（重新設(shè)定背景圖像的大小，多背景圖像設(shè)置）、圖文混排及圖文信息列表。（3）網(wǎng)頁的布局與定位部分：主要學(xué)習(xí)網(wǎng)頁元素浮動的實現(xiàn)、網(wǎng)頁元素各種定位的概念及實現(xiàn)、網(wǎng)頁CSS+DIV排版基礎(chǔ)、不同版式網(wǎng)頁的布局操作。

3）網(wǎng)頁的前端高級操作模塊包括表格與表單、模板與CSS3新增布局、HTML5與CSS3進階三部分。

（1）表格與表單部分：主要學(xué)習(xí)網(wǎng)頁中表格的創(chuàng)建與編輯方法、CSS在表格中的應(yīng)用、網(wǎng)頁中表單的概念、常見的表單對象、HTML5新增的表單自動驗證功能、使用CSS樣式美化表單元素。（2）模板與CSS3新增布局部分：主要學(xué)習(xí)模板的概念、使用模板創(chuàng)建網(wǎng)頁、CSS3新增布局方法。（3）HTML5與CSS3進階部分：主要學(xué)習(xí)實戰(zhàn)HTML5畫布、CSS3漸變的實現(xiàn)、CSS3的2D變形、CSS3過渡動畫制作。

4）JavaScript語言與jQuery模塊包括JavaScript語言、jQuery兩部分。

（1）JavaScript語言部分：主要學(xué)習(xí)JS基礎(chǔ)、事件處理、JS動畫。（2）jQuery部分：主要學(xué)習(xí)jQuery基礎(chǔ)、jQuery插件、Ajax基礎(chǔ)。

基于HTML5的《網(wǎng)頁前端技術(shù)》課程內(nèi)容體系，使學(xué)生能夠?qū)W到網(wǎng)頁前端的最新技術(shù)，掌握網(wǎng)頁前端的最實用的技能。為了切實讓學(xué)生學(xué)到實用的網(wǎng)頁前端技術(shù)，強化學(xué)生的動手能力，在《網(wǎng)頁前端技術(shù)》的教學(xué)過程中，我們采用的是“任務(wù)引領(lǐng)、教學(xué)做一體”教學(xué)模式，用任務(wù)作為載體，讓學(xué)生在學(xué)中做、做中學(xué)，逐步掌握所學(xué)知識，提高操作技能，取得了較好的教學(xué)效果。

參考文獻：

[1] 聶宇.從Web發(fā)展探索高職軟件專業(yè)的網(wǎng)頁課教改之路[J].福建電腦，2011（8）.

[2] 陳月 秦福建.Web前端開發(fā)技術(shù)以及優(yōu)化方向探究[J].信息與電腦，2016（4）.

[3] 網(wǎng)頁設(shè)計與制作（Dreamweaver CS6+HTML5+CSS3版）[M].北京：清華大學(xué)出版社，2015.