活學(xué)活用如何快速美化網(wǎng)頁
2018-02-24 05:34:34于敏
中學(xué)課程輔導(dǎo)·教學(xué)研究 2018年36期
關(guān)鍵詞：信息技術(shù)
于敏
摘要：一個雜亂無序的網(wǎng)頁讓人枯燥乏味，而一個美觀大方的網(wǎng)頁則讓人流連忘返。擁有簡約的頁面及高訪問量的網(wǎng)站是每個網(wǎng)頁設(shè)計者的追求。對于中學(xué)生而言，要有這樣的網(wǎng)頁制作功底，就必須掌握真正的技術(shù)。它能對頁面的布局、字體、顏色、背景和其他圖文效果的實(shí)現(xiàn)提供更加精確的控制，這就是CSS。本文的主題就是要從學(xué)生的認(rèn)知水平出發(fā)，重組層疊樣式表的教學(xué)內(nèi)容，讓學(xué)生能通過自主探索學(xué)習(xí)的方法掌握這門技術(shù)。
關(guān)鍵詞：美化網(wǎng)頁;CSS;信息技術(shù)
中圖分類號：G632.0? ?文獻(xiàn)標(biāo)識碼：A? ?文章編號：1992-7711（2018）12-0103
一、教學(xué)目標(biāo)
1. 知識與技能
通過網(wǎng)頁的比較演示、讓學(xué)生會分析使用CSS樣式表的優(yōu)勢;并能敘述出CSS樣式表的概念。要求學(xué)生掌握運(yùn)用CSS進(jìn)行樣式設(shè)置的方法和格式，并能夠歸納出如何實(shí)現(xiàn)在HTML中加入CSS的三種方法。學(xué)生能舉例說明CSS樣式表的一小段代碼，并能嘗試編寫類似的新的CSS代碼。
2. 過程與方法
在活動中指導(dǎo)學(xué)生學(xué)會利用各種學(xué)習(xí)資源，自主探究出CSS樣式表的三種應(yīng)用方法。學(xué)生通過讀書指導(dǎo)法式的學(xué)習(xí)，逐步掌握CSS代碼，提高他們讀、寫、編代碼的能力。學(xué)生在問題情境下學(xué)會主動探索，提高問題解決的遷移能力，掌握CSS樣式表對網(wǎng)頁美化的一般過程與方法。
3. 情感、態(tài)度與價值觀
通過學(xué)生的自主探究、獨(dú)立思考、自主完成CSS樣式表的編輯任務(wù)，能將經(jīng)驗(yàn)活學(xué)活用到今后的主題網(wǎng)站設(shè)計中。通過學(xué)習(xí)運(yùn)用CSS樣式表優(yōu)化網(wǎng)頁制作，讓學(xué)生正確學(xué)習(xí)、合理運(yùn)用技術(shù)，了解技術(shù)服務(wù)于內(nèi)容的原則。
通過網(wǎng)頁的美化任務(wù)，在活動中潛移默化地培養(yǎng)學(xué)生發(fā)現(xiàn)美、創(chuàng)造美的能力，提高學(xué)生的綜合素質(zhì)。
二、教學(xué)重、難點(diǎn)
教學(xué)重點(diǎn)：CSS樣式表的基本語法結(jié)構(gòu)。知道CSS加入HTML中的三種方式，能說出三種方式的使用環(huán)境。
教學(xué)難點(diǎn)：讀懂CSS樣式表中的具體代碼的含義。CSS樣式表三種加入方式同時使用在一個網(wǎng)頁中的層疊關(guān)系即優(yōu)先級。
三、教學(xué)過程
1. 創(chuàng)設(shè)問題情境、主動探索
師：我們都是“金陵人”，我為自己是金陵人而自豪。自古至今，有很多文人都通過優(yōu)美的文筆抒發(fā)了自己對金陵的熱愛。你能說出哪些呢？
學(xué)生在教師的引導(dǎo)下多多少少都能背出一些名詩名句，教師將課前收集整理到的詩歌都放到網(wǎng)頁中。取名“詩詞話金陵”。學(xué)生欣賞優(yōu)美的詩句，都覺得很美。那網(wǎng)頁美不美？教師展示的是網(wǎng)頁的初始狀態(tài)：一些詩詞、圖片、景點(diǎn)介紹文字堆砌在頁面。這樣并不美觀，教師可以讓學(xué)生幾分鐘時間來修飾一下。然后，教師通過瞬間變魔術(shù)式的給出網(wǎng)頁的終極目標(biāo)：經(jīng)過CSS樣式表美化的網(wǎng)頁。
學(xué)生也完成“詩詞話金陵”網(wǎng)頁的編輯，但是時間略長，強(qiáng)烈的神秘感讓他們很想知道教師是如何瞬間完成的，也很愿意學(xué)會這套本領(lǐng)。學(xué)生的注意力被充分吸引過來，教師緊接著拋出幾個問題，讓學(xué)生積極思考并回答。（1）進(jìn)過對比，哪個網(wǎng)頁更精美？又是如何實(shí)現(xiàn)的？（2）網(wǎng)頁中的各個對象在進(jìn)行編輯時采用了什么方法？（3）教師的瞬間美化網(wǎng)頁，你看到并想到了什么？（4）你覺得用CSS樣式表美化網(wǎng)頁的優(yōu)勢是什么？在課堂上，不僅教師的提問層層深入，而且在活動中也一直努力創(chuàng)設(shè)民主氛圍，適時對話、從而實(shí)現(xiàn)指導(dǎo)并啟發(fā)學(xué)生。
2. 教師講授層疊樣式表的知識點(diǎn)，并采用范例教學(xué)法，讓學(xué)生思考
師：講解CSS樣式表的定義及功能、分析CSS樣式表的基本語法。以“設(shè)計百度LOGO”為例子，簡單示范如何在網(wǎng)頁中使用CSS并解讀它的基本語法。
下圖為范例中的CSS代碼：
這段在<head> </head>標(biāo)簽中的CSS代碼設(shè)計好后，還需要在<body> </body>區(qū)的需要設(shè)置樣式的文字前后加上<p> </p>，<span> </span>標(biāo)簽。例子如下：
通過教師的范例教學(xué)，學(xué)生看到了經(jīng)過CSS樣式表的修飾完成了百度LOGO的制作。
教師的知識點(diǎn)剖析加上優(yōu)秀例子的示范，強(qiáng)烈激發(fā)了學(xué)生的學(xué)習(xí)熱情，個個都很活躍地想要看看自己能否也完成一個優(yōu)秀的作品。同時，教師在演示完這個實(shí)例后，又拋出一個問題讓學(xué)生思考。在HTML中加入CSS的常用方法有哪些？本實(shí)例中是屬于哪種方式。學(xué)生帶著問題有目標(biāo)的進(jìn)入課堂的下一個環(huán)節(jié)。
3. 情境任務(wù)實(shí)現(xiàn)，學(xué)生根據(jù)學(xué)習(xí)任務(wù)和材料自主學(xué)習(xí)完成
下面是學(xué)生實(shí)踐過程，按要求依次完成下面的各個小任務(wù)。（1）為標(biāo)題是“詩歌話金陵”的網(wǎng)頁中的五首詩歌全部設(shè)置相同的文字效果、并為網(wǎng)頁添加背景。該任務(wù)的代碼在css1.txt記事本中。（2）深層任務(wù)，只需要將五首詩歌的標(biāo)題重新進(jìn)行設(shè)置，具體代碼在css2.txt記事本中。（3）將所有屬于金陵景點(diǎn)介紹的網(wǎng)頁都加上相同效果的修飾，采用css3.txt記事本中的代碼。第三個任務(wù)中，要求采用的方法是最便捷的，并且該方法能夠精簡網(wǎng)頁代碼，減少網(wǎng)頁在瀏覽器中加載代碼的時間。
學(xué)生獨(dú)立思考、自主學(xué)習(xí)完成這三個小任務(wù)。當(dāng)然，學(xué)生在實(shí)踐中也是需要參考教師提供的學(xué)習(xí)資料。其中每個任務(wù)的重難點(diǎn)都用微視頻進(jìn)行分析，能力強(qiáng)的學(xué)生直接看文字和操作提示就能完成，能力弱的學(xué)生可以看微視頻來自學(xué)完成。
學(xué)生在情境任務(wù)完成過程中不僅僅是完成具體操作，還需要思考每個任務(wù)的本質(zhì)目標(biāo)是什么。教師在任務(wù)中也準(zhǔn)備了一些問題，采用競賽制加獎品的方法激勵學(xué)生回答。（1）三個任務(wù)中分別采用的是什么方式將CSS加入HTML中。（2）每種樣式表的特點(diǎn)是什么？（3）CSS樣式表中如何體現(xiàn)“層疊”思想。
4. 任務(wù)展示、總結(jié)提升
課程進(jìn)入這個環(huán)節(jié)時間已經(jīng)過去一大半了，在任務(wù)展示中，筆者精選了3名學(xué)生的作品進(jìn)行比較。3名學(xué)生在展示自己的作品過程中，口述自己本節(jié)課學(xué)到的知識點(diǎn)。教師應(yīng)要求3名學(xué)生在講述過程中不能重復(fù)前面學(xué)生說到的知識，所以第3位學(xué)生在回答過程中有點(diǎn)困難。教師也給予一定提示，最后教師用思維導(dǎo)圖的形式梳理了本節(jié)課CSS的知識點(diǎn)，再次標(biāo)注了重難點(diǎn)。
也許這節(jié)課將要結(jié)束，但是對于CSS的學(xué)習(xí)其實(shí)才是剛剛開始。所以教師又講解了關(guān)于CSS的代碼知識，讓學(xué)生會修改CSS代碼，按照自己的喜好設(shè)計網(wǎng)頁。教師主要給出四個拓展任務(wù)，學(xué)生閱讀教學(xué)資料至少選擇一樣完成即可。（1）運(yùn)用CSS控制鼠標(biāo)樣式變換，需要使用的關(guān)鍵代碼段“style=cursor：值”。（2）網(wǎng)頁中大標(biāo)題字體設(shè)置。主要用到的CSS文字屬性如下：font-family字體、font-size字號、font-style字體風(fēng)格、font-weight加粗字體、color字體顏色。（3）網(wǎng)頁中邊框的設(shè)置。主要邊框?qū)傩裕篵order-style邊框樣式、border-color字體顏色、border-width邊框線寬。（4）CSS樣式表控制超鏈接的顏色。
A：link{text-decoration： none;color：blue}是說明了超鏈接還沒有被訪問，它沒有下劃線，顏色為藍(lán)色。
A：visited{color：red;text-decoration：line-through}說明了超鏈接被訪問后，它的顏色變成了紅色，有了一條刪除線。
A：active{color：white;text-decoration：underline}說明超鏈接處于活動狀態(tài)的時候，它的顏色變成了白色，有了下劃線。
A：hover{text-decoration：none;color：#FF0000;background-color：black}說明鼠標(biāo)移動到超鏈接后，它沒有下劃線，文字顏色變成了黃色，背景顏色是黑色。
根據(jù)這些解釋，學(xué)生可以把超鏈接在各種狀態(tài)下的顯示顏色修改成自己喜歡的那種，以便能更好地展示自己的個性。
5. 多樣評價與課堂反饋
學(xué)生的能力是參差不齊的，能力弱的只能做完基礎(chǔ)任務(wù)、能力強(qiáng)的已經(jīng)能完成總結(jié)后的2個拓展任務(wù)并且意猶未盡，還想課后繼續(xù)學(xué)習(xí)下去。教師給學(xué)生設(shè)計了評價表，分別從課堂任務(wù)的達(dá)成率以及本節(jié)課的教學(xué)目標(biāo)的三個維度來給他們自己打分，采用ABC等級制進(jìn)行選擇。最后通過這些等級看出自己哪些能力還需要課后進(jìn)一步加強(qiáng)。
在課堂反饋過程中，教師最后也對學(xué)生的完成情況及課堂搶答情況進(jìn)行了點(diǎn)評，并把CSS代碼的詳細(xì)知識放到本年級360云盤中，鼓勵學(xué)生課后能自由選擇進(jìn)行深入學(xué)習(xí)，教師也會在課后進(jìn)行持續(xù)關(guān)注。
四、教學(xué)反思
信息技術(shù)作為開放型課堂，應(yīng)該是注重活動體驗(yàn)與能力培養(yǎng)的課堂。培養(yǎng)學(xué)生的能力就是要求學(xué)生能根據(jù)問題要求，分析問題，提出解決問題的方案，根據(jù)方案內(nèi)容運(yùn)用技術(shù)手段解決問題，以讓學(xué)生在課堂上學(xué)會閱讀、并能通過搜索辨別出正確的方法。
本文在課堂教學(xué)中采用了多種教學(xué)方法相結(jié)合，為了就是提高課堂學(xué)生的達(dá)成率。教師在課堂中主要采用拋錨式教學(xué)策略，即“基于問題的教學(xué)”，這樣利于學(xué)生以技術(shù)學(xué)基礎(chǔ)的學(xué)習(xí)。首先，教師創(chuàng)設(shè)了“金陵之美”的情境、確定問題讓學(xué)生自由對話、指導(dǎo)啟發(fā)、然后再讓學(xué)生自主學(xué)習(xí)，最后進(jìn)行效果評價。在課堂問題引出之后，學(xué)生不能很快理解CSS理論知識和操作要領(lǐng)，教師就先采用了講授教學(xué)法。在講解過程中，用生動幽默的語言來敘述和描繪所講知識，從而保持學(xué)生的注意力。緊接著用范例教學(xué)法，選用學(xué)生感興趣的百度LOGO作為精選范例，進(jìn)一步激發(fā)學(xué)生的學(xué)習(xí)欲望與動機(jī)。
學(xué)生在獨(dú)立完成各個任務(wù)的過程中，課堂就完全由學(xué)生掌控，他們是學(xué)習(xí)的主體，教師只是在一旁啟發(fā)指導(dǎo)。當(dāng)然，學(xué)生在活動中首先確定學(xué)習(xí)任務(wù)，其次閱讀相關(guān)教材及教師提供的課堂資源，然后再進(jìn)行師生之間、生生之間的問題討論與交流。這種類似讀書指導(dǎo)法的教學(xué)，就是要培養(yǎng)學(xué)生的自學(xué)能力，在閱讀學(xué)習(xí)資料的過程中逐步學(xué)會抓住中心和思路。學(xué)生也能根據(jù)自己的實(shí)際能力選擇采用文字樣張?zhí)崾?、或具體操作提示、或微視頻提示來完成自己的學(xué)習(xí)目標(biāo)。
學(xué)生自主學(xué)習(xí)后的歸納也顯得尤其重要，教師在學(xué)生訓(xùn)練后，通過問題啟發(fā)學(xué)生思考、讓學(xué)生能將歸納的知識真正變成自己的經(jīng)驗(yàn)，從而提高他們的綜合運(yùn)用能力。
筆者在課堂提問環(huán)節(jié)和拓展任務(wù)活動中都采用了競賽式，優(yōu)先回答的學(xué)生和完成拓展任務(wù)的學(xué)生都有獎品發(fā)放。從物質(zhì)上刺激學(xué)生主動學(xué)習(xí)，并能全身心投入到學(xué)習(xí)中，盡自己最大的努力完成所有任務(wù)。他們雖然在課上并不能全部完成但是他們已經(jīng)有了這種意愿就能促使他更進(jìn)一步學(xué)習(xí)。學(xué)生在一次又一次的操練中，提高了自己快速美化網(wǎng)頁的能力。持續(xù)性的學(xué)習(xí)也讓他們對CSS樣式表進(jìn)行活學(xué)活用。
（作者單位：江蘇省南京市行知實(shí)驗(yàn)中學(xué) 210000）
猜你喜歡
新一代信息技術(shù)(2021年22期)2021-12-29 01:10:08
新一代信息技術(shù)(2021年21期)2021-12-10 15:19:41
新一代信息技術(shù)(2021年17期)2021-11-13 08:40:20
新一代信息技術(shù)(2021年16期)2021-11-13 08:10:18
新一代信息技術(shù)(2021年14期)2021-11-13 07:53:18
新一代信息技術(shù)(2021年13期)2021-11-13 07:33:00
新一代信息技術(shù)(2021年2期)2021-07-23 06:04:16
新一代信息技術(shù)(2021年24期)2021-03-08 09:30:14
新一代信息技術(shù)(2021年23期)2021-03-08 09:13:28
新一代信息技術(shù)(2021年15期)2021-03-08 02:10:10
