杜春

摘要：目前，HTML5作為各大高校計(jì)算機(jī)專業(yè)的必修課，如何提升學(xué)生學(xué)習(xí)HTML5課程的學(xué)習(xí)積極性，提高該課程的教學(xué)質(zhì)量有著舉足輕重的作用。由于HTML5課程的先修課程為網(wǎng)頁設(shè)計(jì)課，學(xué)生在學(xué)習(xí)該課程時已經(jīng)具備一定的網(wǎng)頁基礎(chǔ)知識，所以如果以傳統(tǒng)的知識點(diǎn)灌輸?shù)男问絹碇v解這門課并不能激起學(xué)生的學(xué)習(xí)興趣。該文提出了一種基于案例驅(qū)動的方式來講解HTML5課程的方法，并設(shè)計(jì)了本門課程的案例。

關(guān)鍵詞：案例;教學(xué)法;HTML5;課程

中圖分類號：G642? ? ? ? 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2022）03-0137-03

開放科學(xué)（資源服務(wù)）標(biāo)識碼（OSID）：

1 HTML5教學(xué)現(xiàn)狀

隨著互聯(lián)網(wǎng)的普及，人們每天都從網(wǎng)頁中獲取信息，因此網(wǎng)頁的設(shè)計(jì)，尤其是界面美觀、人機(jī)交互界面人性化的網(wǎng)頁更能獲取用戶的喜歡。而HTML5課程主要是培養(yǎng)學(xué)生制作自適應(yīng)的、人機(jī)交互能力強(qiáng)的網(wǎng)頁的能力。而且HTML5課程對于學(xué)生學(xué)習(xí)后繼課程如J2EE動態(tài)網(wǎng)站起著基礎(chǔ)的作用。如果采用傳統(tǒng)的教學(xué)方式，理論課與實(shí)驗(yàn)課脫節(jié)，只注重理論知識講解而不注重實(shí)踐教學(xué)會讓該課程顯得格外枯燥，因此本文提出采用案例教學(xué)法來進(jìn)行HTML5課程的教學(xué)，目的是增加課程的趣味性，提高學(xué)生的學(xué)習(xí)主動性，進(jìn)而提升學(xué)生的實(shí)踐水平。

2 案例教學(xué)改革

基于案例的HTML5教學(xué)方法是把各章節(jié)知識點(diǎn)以案例的形式進(jìn)行講解，具體分為HTML5新增標(biāo)簽、CSS3特性、2D動畫、3D動畫、響應(yīng)式布局等5個模塊，如圖1所示。

2.1 HTML5新標(biāo)簽

HTML5標(biāo)簽這一章主要講解新增的一些標(biāo)簽的用法以及新增的屬性的用法。其中新增的標(biāo)簽有header和footer等網(wǎng)頁結(jié)構(gòu)標(biāo)簽、播放視頻的video媒體標(biāo)簽，表單控件的type屬性新增了email、url、tel等屬性值，分別用來驗(yàn)證郵箱、網(wǎng)址、電話號碼的格式，是一個“會員注冊”的界面，如圖2所示。

在“會員注冊”案例中，用戶名和密碼、確認(rèn)密碼是必填項(xiàng)，否則點(diǎn)擊注冊按鈕后會顯示不能為空。同時輸入的郵箱必須滿足郵箱的格式，出生日期的輸入框可以直接選擇一個日期值，主要代碼如下：

<form action="" method="post">

<table width="500px" height="300px">

<tr><td class="tname">用戶名：</td><td><input type="text" placeholder="請輸入用戶名" required></td></tr>

<tr><td class="tname">密碼：</td><td><input type="password" placeholder="請輸入密碼" required></td></tr>

<tr><td class="tname">確認(rèn)密碼：</td><td><input type="password" placeholder="請?jiān)俅屋斎朊艽a" spellcheck="true" required></td></tr>

<tr><td class="tname">Email：</td><td><input type="Email" placeholder="請輸入郵箱" ></td></tr>

<tr><td class="tname">性別：</td><td>

<input type="radio" name="sex" checked="checked"/>男

<input type="radio" name="sex" />女</td></tr>

<tr><td class="tname">出生日期：</td><td><input type="date"/></td></tr>

<tr><td colspan="2" style="text-align：center"><input type="submit" value="注冊" class="submit" /></td></tr>

</table>

<center><p style="font-size：10px"><a href="login.html">已經(jīng)有賬號？登錄</a></p></center>

</form>

2.2 CSS3特性

CSS主要用于設(shè)置網(wǎng)頁的樣式，而CSS3在CSS的基礎(chǔ)上升級而來，它新增了一些針對不同瀏覽器的前綴，用來使CSS樣式在非標(biāo)準(zhǔn)瀏覽器上也能正常執(zhí)行。同時CSS3還添加了一些特殊的選擇器，如屬性選擇器、結(jié)構(gòu)偽類選擇器、狀態(tài)偽類選擇器等。本章采用一個“ 魅族手機(jī)網(wǎng)頁”案例來進(jìn)行講解，用 HTML5+CSS3 技術(shù)實(shí)現(xiàn)格子布局效果，如圖3所示。

該網(wǎng)頁主要用來展示魅族手機(jī)的信息，當(dāng)鼠標(biāo)放到某一個手機(jī)圖片上會在該圖片的邊框顯示紅色的陰影圖像特效，同時該頁面的布局用到了偽類選擇器來設(shè)置兩個“魅友節(jié)”圓形圖標(biāo)效果，主要CSS樣式文件中的代碼如下：

.ptop-right {

/*省略樣式代碼*/

box-sizing： border-box; /*繪制元素的內(nèi)邊距和邊框*/

}

.ptop-left：before， .ptop-right：before {? /*偽類選擇器：before*/

content： "魁友節(jié)";

/*省略樣式代碼*/

border-radius： 50%;/*圓角*/

/*線性漸變*/

background-image： linear-gradient（120deg， #ff3149， #ff64a6）;

}

2.3 2D動畫

在網(wǎng)頁開發(fā)中，有時為了增加網(wǎng)頁的趣味性和人機(jī)交互性，會在網(wǎng)頁中添加一些動畫效果。動畫能使得原本枯燥的純文字網(wǎng)頁顯得更加生動和美觀。其中2D動畫是我們在網(wǎng)頁開發(fā)中常用的一種動畫形式。動畫主要采用@@keyframes來創(chuàng)建動畫的效果，而給某一個元素添加動畫是依靠animation屬性來實(shí)現(xiàn)的。本章通過一個會動的時鐘程序案例來進(jìn)行講解，如圖4所示。

本案例中首先是運(yùn)用html和css在網(wǎng)頁中畫出一個時鐘，該時鐘有時針、分針和秒針。秒針每走360度，分針就走360分之一度，而分針每走360度，則時針就轉(zhuǎn)動一小時即表盤中的一個刻度。然后采用@keyframes來定義了一個動畫，實(shí)現(xiàn)動畫的主要代碼如下：

/*時針的樣式*/

.hour {

/*省略樣式代碼*/

transform： rotate（90deg）; /*順時針旋轉(zhuǎn)90度*/

animation：move 216000s infinite linear;/*執(zhí)行時針的動畫*/

}

/*分針的樣式*/

.minute {

/*省略樣式代碼*/

transform： rotate（-180deg）;

animation：move 3600s? infinite linear;/*執(zhí)行分針的動畫*/

}

/*秒針的樣式*/

.second {

/*省略樣式代碼*/

transform： rotate（-180deg）; /*逆時針旋轉(zhuǎn)180度*/

animation：move 60s? infinite linear;/*執(zhí)行秒針的動畫*/

}

@keyframes move{? ?/*定義時針、分針、秒針走動的動畫效果*/

0%{transform：rotate（0deg）;} /*旋轉(zhuǎn)0度*/

100%{transform：rotate（360deg）;} /*旋轉(zhuǎn)360度*/

}

2.4 3D動畫

CSS3中新增了3D動畫功能，該功能通過transform3D、perspective等屬性來實(shí)現(xiàn)。本章將采用一個旋轉(zhuǎn)的3D立方體程序來進(jìn)行講解，界面如圖5所示。

本案例中首先使用div+css的形式在網(wǎng)頁中繪制出一個立方體，該立方體的6個面分別使用了不同的顏色，這樣有助于觀察動畫的效果。接著采用@keyframes關(guān)鍵字來定義3D動畫的效果，并且在立方體所在的div中采用animation關(guān)鍵字來執(zhí)行了move動畫，主要代碼如下：

.box{

/*省略樣式代碼*/

animation：move 6s infinite linear;

/*transform-origin：center center -50px;變（旋轉(zhuǎn)）化的參考點(diǎn)*/

transform-style：preserve-3d;/*生成3D立體空間*/

}

@keyframes move{<！--定義動畫效果，使立方體圍繞著X軸由里向外旋轉(zhuǎn)-->

0%{transform：rotateX（0deg）;transform-origin：center;}

100%{transform：rotateX（360deg）;transform-origin：center;}

}

2.5 響應(yīng)式布局

在面對著網(wǎng)絡(luò)上形形色色的海量信息時，有時需要在電腦PC端瀏覽網(wǎng)頁信息，而更多人會選擇在手機(jī)上瀏覽網(wǎng)絡(luò)信息，如何制作一個網(wǎng)頁而讓它能在PC和手機(jī)上都能正常地顯示網(wǎng)頁內(nèi)容成為影響用戶體驗(yàn)的關(guān)鍵。為了解決這個問題，HTML5中提出了網(wǎng)頁自適就的概念及響應(yīng)式布局。響應(yīng)式布局的含義是網(wǎng)頁內(nèi)容會根據(jù)網(wǎng)頁不同的設(shè)備或者網(wǎng)頁不同的寬度來自動調(diào)整頁面的布局。本章將以一個《奪冠》電影的宣傳網(wǎng)頁為例來進(jìn)行講解，如圖6所示。

使用@media 查詢，可以針對不同的媒體類型定義不同的樣式。該案例中分別使用3個@media關(guān)鍵字來進(jìn)行查詢，并設(shè)置網(wǎng)頁寬度小于1100px時的樣式，網(wǎng)頁寬度小于850px時的樣式以及網(wǎng)頁寬度小于700px時的樣式，主要代碼如下：

<！--定義媒體查詢-->

@media all and （max-width：1100px）{

.top{width：850px;}

.below{width：calc（100vw-100px）;flex-direction：column;align-items：center;}}

@media all and （max-width：850px）{.left{width：400px;}}

@media all and （max-width：700px）{

.top{flex-direction：column;

width： calc（100vw - 100px）;/*計(jì)算瀏覽器（視口viewpoint）的寬度*/}

.left{width：100%;}.right>img{width：50%;height：50%;}

.below{margin-top：10px;align-items：flex-start;}}

3 結(jié)論

HTML5課程在傳統(tǒng)教學(xué)的方式下太注重理論知識的教學(xué)而忽視了實(shí)踐能力的培養(yǎng)，同時傳統(tǒng)教學(xué)方式也不能很好地調(diào)動學(xué)生的學(xué)習(xí)積極性，而通過以上案例的方式來呈現(xiàn)知識點(diǎn)更能激起學(xué)生的學(xué)習(xí)興趣，增加課程的趣味性，實(shí)現(xiàn)寓學(xué)于樂。在以后的HTML5課程教學(xué)中，我們還可以設(shè)計(jì)出一些闖關(guān)游戲式[8]的教學(xué)考核方式，這樣更能激發(fā)學(xué)生的參與度與學(xué)習(xí)主動性。實(shí)踐表明，HTML5課程采用案例教學(xué)法后，教學(xué)效果和學(xué)生的成績實(shí)現(xiàn)了明顯的提高，表1是案例教學(xué)與普通教學(xué)的對比。

參考文獻(xiàn)：

[1] 蔣婧.基于HTML5+CSS3技術(shù)實(shí)現(xiàn)頁面的格子布局[J].信息技術(shù)與信息化，2021（5）：140-142.

[2] 李文.任務(wù)驅(qū)動教學(xué)法在《HTML5與CSS3編程》教學(xué)中的應(yīng)用[J].計(jì)算機(jī)產(chǎn)品與流通，2019（4）：182.

[3] 江玉珍，朱映輝，黃偉，等.HTML5網(wǎng)頁設(shè)計(jì)課程的CSS3教學(xué)拓展[J].現(xiàn)代計(jì)算機(jī)，2018（2）：71-74.

[4] 許曉峰.HTML5和CSS3.0在網(wǎng)頁設(shè)計(jì)中的優(yōu)勢特性與應(yīng)用[J].電腦知識與技術(shù)，2020，16（13）：275-276.

[5] 靳紅霞，呂龍輝.CSS3.0中動畫效果的實(shí)現(xiàn)[J].信息與電腦，2021（7）：192-194.

[6] 陳仕許.基于就業(yè)導(dǎo)向的HTML5前端開發(fā)課程教學(xué)改革實(shí)踐分析[J].計(jì)算機(jī)產(chǎn)品與流通，2020（10）：247.

[7] 李高峰.基于翻轉(zhuǎn)課堂的《HTML5移動應(yīng)用開發(fā)》課程教學(xué)探討與研究[J].信息記錄材料，2019，20（9）：164-165.

[8] 徐曉.基于HTML5的闖關(guān)游戲式課程教學(xué)考核的設(shè)計(jì)和實(shí)現(xiàn)[J].計(jì)算機(jī)時代，2019（3）：42-44.

【通聯(lián)編輯：代影】