杜春
摘要:目前,HTML5作為各大高校計算機專業(yè)的必修課,如何提升學生學習HTML5課程的學習積極性,提高該課程的教學質(zhì)量有著舉足輕重的作用。由于HTML5課程的先修課程為網(wǎng)頁設(shè)計課,學生在學習該課程時已經(jīng)具備一定的網(wǎng)頁基礎(chǔ)知識,所以如果以傳統(tǒng)的知識點灌輸?shù)男问絹碇v解這門課并不能激起學生的學習興趣。該文提出了一種基于案例驅(qū)動的方式來講解HTML5課程的方法,并設(shè)計了本門課程的案例。
關(guān)鍵詞:案例;教學法;HTML5;課程
中圖分類號:G642? ? ? ? 文獻標識碼:A
文章編號:1009-3044(2022)03-0137-03
開放科學(資源服務(wù))標識碼(OSID):
1 HTML5教學現(xiàn)狀
隨著互聯(lián)網(wǎng)的普及,人們每天都從網(wǎng)頁中獲取信息,因此網(wǎng)頁的設(shè)計,尤其是界面美觀、人機交互界面人性化的網(wǎng)頁更能獲取用戶的喜歡。而HTML5課程主要是培養(yǎng)學生制作自適應(yīng)的、人機交互能力強的網(wǎng)頁的能力。而且HTML5課程對于學生學習后繼課程如J2EE動態(tài)網(wǎng)站起著基礎(chǔ)的作用。如果采用傳統(tǒng)的教學方式,理論課與實驗課脫節(jié),只注重理論知識講解而不注重實踐教學會讓該課程顯得格外枯燥,因此本文提出采用案例教學法來進行HTML5課程的教學,目的是增加課程的趣味性,提高學生的學習主動性,進而提升學生的實踐水平。
2 案例教學改革
基于案例的HTML5教學方法是把各章節(jié)知識點以案例的形式進行講解,具體分為HTML5新增標簽、CSS3特性、2D動畫、3D動畫、響應(yīng)式布局等5個模塊,如圖1所示。
2.1 HTML5新標簽
HTML5標簽這一章主要講解新增的一些標簽的用法以及新增的屬性的用法。其中新增的標簽有header和footer等網(wǎng)頁結(jié)構(gòu)標簽、播放視頻的video媒體標簽,表單控件的type屬性新增了email、url、tel等屬性值,分別用來驗證郵箱、網(wǎng)址、電話號碼的格式,是一個“會員注冊”的界面,如圖2所示。
在“會員注冊”案例中,用戶名和密碼、確認密碼是必填項,否則點擊注冊按鈕后會顯示不能為空。同時輸入的郵箱必須滿足郵箱的格式,出生日期的輸入框可以直接選擇一個日期值,主要代碼如下:
<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">確認密碼:</td><td><input type="password" placeholder="請再次輸入密碼" 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樣式在非標準瀏覽器上也能正常執(zhí)行。同時CSS3還添加了一些特殊的選擇器,如屬性選擇器、結(jié)構(gòu)偽類選擇器、狀態(tài)偽類選擇器等。本章采用一個“ 魅族手機網(wǎng)頁”案例來進行講解,用 HTML5+CSS3 技術(shù)實現(xiàn)格子布局效果,如圖3所示。
該網(wǎng)頁主要用來展示魅族手機的信息,當鼠標放到某一個手機圖片上會在該圖片的邊框顯示紅色的陰影圖像特效,同時該頁面的布局用到了偽類選擇器來設(shè)置兩個“魅友節(jié)”圓形圖標效果,主要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)頁的趣味性和人機交互性,會在網(wǎng)頁中添加一些動畫效果。動畫能使得原本枯燥的純文字網(wǎng)頁顯得更加生動和美觀。其中2D動畫是我們在網(wǎng)頁開發(fā)中常用的一種動畫形式。動畫主要采用@@keyframes來創(chuàng)建動畫的效果,而給某一個元素添加動畫是依靠animation屬性來實現(xiàn)的。本章通過一個會動的時鐘程序案例來進行講解,如圖4所示。
本案例中首先是運用html和css在網(wǎng)頁中畫出一個時鐘,該時鐘有時針、分針和秒針。秒針每走360度,分針就走360分之一度,而分針每走360度,則時針就轉(zhuǎn)動一小時即表盤中的一個刻度。然后采用@keyframes來定義了一個動畫,實現(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等屬性來實現(xiàn)。本章將采用一個旋轉(zhuǎn)的3D立方體程序來進行講解,界面如圖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))化的參考點*/
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)頁信息,而更多人會選擇在手機上瀏覽網(wǎng)絡(luò)信息,如何制作一個網(wǎng)頁而讓它能在PC和手機上都能正常地顯示網(wǎng)頁內(nèi)容成為影響用戶體驗的關(guān)鍵。為了解決這個問題,HTML5中提出了網(wǎng)頁自適就的概念及響應(yīng)式布局。響應(yīng)式布局的含義是網(wǎng)頁內(nèi)容會根據(jù)網(wǎng)頁不同的設(shè)備或者網(wǎng)頁不同的寬度來自動調(diào)整頁面的布局。本章將以一個《奪冠》電影的宣傳網(wǎng)頁為例來進行講解,如圖6所示。
使用@media 查詢,可以針對不同的媒體類型定義不同的樣式。該案例中分別使用3個@media關(guā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);/*計算瀏覽器(視口viewpoint)的寬度*/}
.left{width:100%;}.right>img{width:50%;height:50%;}
.below{margin-top:10px;align-items:flex-start;}}
3 結(jié)論
HTML5課程在傳統(tǒng)教學的方式下太注重理論知識的教學而忽視了實踐能力的培養(yǎng),同時傳統(tǒng)教學方式也不能很好地調(diào)動學生的學習積極性,而通過以上案例的方式來呈現(xiàn)知識點更能激起學生的學習興趣,增加課程的趣味性,實現(xiàn)寓學于樂。在以后的HTML5課程教學中,我們還可以設(shè)計出一些闖關(guān)游戲式[8]的教學考核方式,這樣更能激發(fā)學生的參與度與學習主動性。實踐表明,HTML5課程采用案例教學法后,教學效果和學生的成績實現(xiàn)了明顯的提高,表1是案例教學與普通教學的對比。
參考文獻:
[1] 蔣婧.基于HTML5+CSS3技術(shù)實現(xiàn)頁面的格子布局[J].信息技術(shù)與信息化,2021(5):140-142.
[2] 李文.任務(wù)驅(qū)動教學法在《HTML5與CSS3編程》教學中的應(yīng)用[J].計算機產(chǎn)品與流通,2019(4):182.
[3] 江玉珍,朱映輝,黃偉,等.HTML5網(wǎng)頁設(shè)計課程的CSS3教學拓展[J].現(xiàn)代計算機,2018(2):71-74.
[4] 許曉峰.HTML5和CSS3.0在網(wǎng)頁設(shè)計中的優(yōu)勢特性與應(yīng)用[J].電腦知識與技術(shù),2020,16(13):275-276.
[5] 靳紅霞,呂龍輝.CSS3.0中動畫效果的實現(xiàn)[J].信息與電腦,2021(7):192-194.
[6] 陳仕許.基于就業(yè)導向的HTML5前端開發(fā)課程教學改革實踐分析[J].計算機產(chǎn)品與流通,2020(10):247.
[7] 李高峰.基于翻轉(zhuǎn)課堂的《HTML5移動應(yīng)用開發(fā)》課程教學探討與研究[J].信息記錄材料,2019,20(9):164-165.
[8] 徐曉.基于HTML5的闖關(guān)游戲式課程教學考核的設(shè)計和實現(xiàn)[J].計算機時代,2019(3):42-44.
【通聯(lián)編輯:代影】