網(wǎng)頁(yè)特效JavaScript教案

1、教 案授課專業(yè)：計(jì)算機(jī)應(yīng)用技術(shù)授課班級(jí)：課程名稱：網(wǎng)頁(yè)特效JaVaSCrim授課教師：授課時(shí)間4課時(shí)授課題H（章節(jié)）第1章網(wǎng)頁(yè)設(shè)計(jì)的準(zhǔn)備授課類型一體化教學(xué)目標(biāo) 與教學(xué)要求知識(shí)目標(biāo)：掌握網(wǎng)頁(yè)的基礎(chǔ)槪念、Web標(biāo)準(zhǔn)、文檔類型的含義與選擇、XHTML與HTML 的重要區(qū)別、CSS標(biāo)準(zhǔn)、傳統(tǒng)HTML的缺點(diǎn)、如何編借CSS、瀏覽器與CSS。技能目標(biāo)：編寫簡(jiǎn)單網(wǎng)頁(yè)的HTML標(biāo)簽和樣式主要 內(nèi) 容1. 網(wǎng)頁(yè)設(shè)計(jì)技術(shù)介紹2. 搭建網(wǎng)頁(yè)基礎(chǔ)標(biāo)簽3添加網(wǎng)頁(yè)樣式的方法4. 實(shí)例1我的第一張網(wǎng)頁(yè)5. XHTML小結(jié)（文檔結(jié)構(gòu)、基本語(yǔ)法、常用標(biāo)簽的含義）6. CSS小結(jié)（定義、作用、與XHTML的關(guān)系、使用方法、基本語(yǔ)

2、法、id選 擇符、常用屬性）7. 課后作業(yè)重點(diǎn)與 難點(diǎn)重點(diǎn)：常用XHTML標(biāo)簽的用法；選擇符的用法；常用屬性 難點(diǎn)：文檔標(biāo)簽結(jié)構(gòu)；id選擇符教學(xué)方法 或教學(xué)手段 （教具）問(wèn)題引導(dǎo)、小組討論、課堂答疑、微課程輔助、練習(xí)鞏固與拓展參考資料菜鳥(niǎo)教程教學(xué)后記本章是入門的開(kāi)始，只選擇了一個(gè)最簡(jiǎn)單的案例作為入門案例，雖然案例 內(nèi)容簡(jiǎn)單，但也都包含了制作網(wǎng)頁(yè)所需要的完整步驟,對(duì)于學(xué)生來(lái)說(shuō)并不容易。 很多學(xué)生一開(kāi)始學(xué)會(huì)了，但是并沒(méi)有消化，下一次課就會(huì)忘記，所以要多實(shí)踐 才能更好的消化吸收知識(shí)。教學(xué)過(guò)程備注教學(xué)過(guò)程備注一、課程介紹1. 課程主要內(nèi)容2. 課程目標(biāo)3. 考核方式4. 學(xué)習(xí)建議二、網(wǎng)頁(yè)設(shè)計(jì)技術(shù)介紹1

3、. 講授思路a）網(wǎng)頁(yè)設(shè)計(jì)技術(shù)的發(fā)展b）網(wǎng)頁(yè)的組成C）網(wǎng)頁(yè)制作的步驟d）常用技術(shù)2. 重點(diǎn)a）組成網(wǎng)頁(yè)的3個(gè)部分b）HTML的作用C） CSS的作用d） JaVaSCriPt 的作用三、搭建網(wǎng)頁(yè)基礎(chǔ)標(biāo)簽1. 講授思路a）問(wèn)題引入：請(qǐng)說(shuō)岀網(wǎng)頁(yè)的必備標(biāo)簽有哪些？b）問(wèn)題：什么是HTML?什么是XHTML?為什么要使用XHTML?C）網(wǎng)頁(yè)的必備標(biāo)簽2. 重點(diǎn)a）網(wǎng)頁(yè)的必備標(biāo)簽及其含義四、添加網(wǎng)頁(yè)樣式的方法1. 講授思路a）問(wèn)題引入：什么是CSS?為什么使用CSS?b）CSS基礎(chǔ)語(yǔ)法C）添加CSS方法：外部樣式表、內(nèi)部樣式表、內(nèi)聯(lián)樣式2. 重點(diǎn)a）掌握3種添加CSS樣式的方法，以及各自的優(yōu)缺點(diǎn)五、實(shí)例1

4、我的第一張網(wǎng)頁(yè)根據(jù)就業(yè)形勢(shì)分析課程 的重要性，舉例畢業(yè)生 的求職經(jīng)驗(yàn)激發(fā)學(xué)習(xí)熱 情介紹性的講解以問(wèn)題引導(dǎo)為主通過(guò)對(duì)比法講淸楚3種 方法的優(yōu)缺點(diǎn)10教學(xué)過(guò)程備注我的第一張網(wǎng)頁(yè)Heao SVCndlWCbttt齊。H«3 *0ddl戲題主到燒如Ucb世齊。BCJio WDCtdltl2f 到釜湎U eb世齊 O BeCo WoCtd'12=S到=湎 Web世？;. JWto恥&僦:©五到姜如Web世?. HeSuMdI戲題來(lái)到列的U&世? Heto WorfdU迎來(lái)到羌如Web世齊.HdIOWGdd< 來(lái)到S 的WebtHrf- HJoW*1U卍來(lái)

5、到"的Webt. HeSUgd滋歸到S餉Web世齊.He3 USU%眇別彬的Web世打.Helo WOfWRiP來(lái)到關(guān)妙餉VVCb世? HClO WaWr來(lái)到關(guān)旳的we世? HtIOwEJF凹來(lái)到關(guān)妙的Wety HCIOugv款趙皋到關(guān)幼BFVe 世？放慢'奏，帶領(lǐng)學(xué)生從 標(biāo)簽結(jié)構(gòu)設(shè)計(jì)開(kāi)始，一 步步完成網(wǎng)頁(yè)的制作斤僅銜佝仗?hào)|元砂龍林旅 割CMHoom9年住僅"用圧儀上為典君3. 講授思路a）頁(yè)而結(jié)構(gòu)分析b）網(wǎng)頁(yè)文檔整體結(jié)構(gòu)設(shè)計(jì)C） div、P標(biāo)簽的使用d）添加樣式4. 重點(diǎn)a）使用記事本編輯網(wǎng)頁(yè)的方法b）頁(yè)首、主體、頁(yè)腳的標(biāo)簽設(shè)計(jì)C）樣式添加的位置d） id選擇符授

6、課時(shí)間8課時(shí)授課題LJ（章節(jié)）第2章網(wǎng)頁(yè)中的文字設(shè)計(jì)與排版授課類型一體化教學(xué)目標(biāo) 與教學(xué)要求知識(shí)目標(biāo)：網(wǎng)頁(yè)中文本的基本設(shè)計(jì)原則；常用文本樣式的功能技能目標(biāo)：能夠針對(duì)網(wǎng)頁(yè)中的文本設(shè)計(jì)合理樣式主要 內(nèi) 容1. 文字排版原則2. 實(shí)例1尋找最美鄉(xiāng)村醫(yī)生3. 實(shí)例2互聯(lián)網(wǎng)的起源與發(fā)展4. 實(shí)例3奧林匹克運(yùn)動(dòng)會(huì)（翻轉(zhuǎn)課堂）5. 課堂拓展奧斯卡金像獎(jiǎng)6. 小結(jié)重點(diǎn)與 難點(diǎn)重點(diǎn)：網(wǎng)頁(yè)中文本的排版原則難點(diǎn)：網(wǎng)頁(yè)對(duì)象居中對(duì)齊；背景的靈活運(yùn)用教學(xué)方法 或教學(xué)手段 （教具）問(wèn)題引導(dǎo)、小組討論、課堂答疑、微課程輔助、練習(xí)鞏固與拓展參考資料菜鳥(niǎo)教程教學(xué)后記本章教授了網(wǎng)頁(yè)中的文字如何設(shè)計(jì)排版，也是整門課程的基礎(chǔ)部分，案例

7、的設(shè) 計(jì)釆用山易到難的思路，學(xué)生對(duì)于基礎(chǔ)知識(shí)的理解也遵循這個(gè)規(guī)律?？傮w講授 下來(lái)，學(xué)生的反饋認(rèn)為難度適宜，大部分學(xué)生能夠理解和接受，少數(shù)學(xué)生學(xué)習(xí) 能力較強(qiáng)，通過(guò)案例的拓展功能來(lái)提升；另一小部分較吃力的學(xué)生通過(guò)微視頻 彌補(bǔ)。其中，padding, margin以及背景的定位、重復(fù)、路徑設(shè)置是難點(diǎn)，需 要反復(fù)多次講解和實(shí)踐才能較好的理解。10一.引入：指出以下網(wǎng)頁(yè)中存在的問(wèn)題從字體、字號(hào)、對(duì) 齊方式、顏色等方 而進(jìn)行分析二. 網(wǎng)頁(yè)文字排版的基本原則1. 字體a）分清文字用途b）中文標(biāo)題可用宋體加粗、黑體C）中文正文可用宋體d）特殊文字用圖片替代2. 字體大小a）分析網(wǎng)頁(yè)內(nèi)容的多少b）文字多用小號(hào)，

8、文字少用大號(hào)C） 12PX-14px 之間d） 9pt-12pt 之間3. 對(duì)齊方式a）用左對(duì)齊b）避免中間對(duì)齊或左右兩端對(duì)齊4. 行間距a）小的字號(hào)需要大一點(diǎn)的行間距來(lái)便于閱讀b）Iine-height在網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)該是字體大小的12倍到2倍5. 顏色a）前景色與背景色對(duì)比度要大b）設(shè)置柔和的字體顏色，盡量少用大片純色字體C）標(biāo)題以及字?jǐn)?shù)較少的提示信息可以采用耀眼顏色三、實(shí)例1尋找最美鄉(xiāng)村醫(yī)生教學(xué)過(guò)程備注-Dx< I KM.EW畑£鼻區(qū)Qr妙纖FgEC RBrfiH-檢城2×> + ÷ fle <WS2US> AlW:C Q 亦“仃“ 卍

9、代幻C3c 祕(mì)尋找最美鄉(xiāng)村醫(yī)生"尋HAltE± i；-Hga由犬刪膨.SK½RBftS-t5l分越憶歷時(shí)一彳月。實(shí)丸揚(yáng)影；嗣庁20】舞】月2日七月:i日開(kāi)氏 由石冊(cè)黑佩戀體記有紙S®樓B".從北9分六組看L可北.同爾、稱北、廚臥廣西、云Mt皆區(qū).ituZS療衛(wèi)生a%S5ft況，畫右耳訪纟村t生風(fēng)Wf侏，WtSREHi村臣生羅村砌址忠1“如十字天盼劃”期.丘荼來(lái)齦化.I 2010年最美鄉(xiāng)村醫(yī)生I&云商協(xié)福有縣赤笳酹拶村醫(yī)生學(xué)隹生孝云命怒江瀘水盹本卓鄉(xiāng)戀鄧襯鄉(xiāng)杠氏主和光才*云雨瀘龍縣榮華村醫(yī)生何件峯&云ffifl#縣三首林醫(yī)生怫林9

10、云甬大理BB卅彌渡壬偉崗村鄉(xiāng)村醫(yī)生孕玉萍9 云js?aj5ewsjKtt£±«+<i$河兩省林州市百龍頂嶺后柳惟萬(wàn)古成&江HiS古安吊安?？h洋門鄉(xiāng)上街村刃小采匡主©包扎Wi牧區(qū)藝生居馬務(wù)9廣廿六景債大紈村衛(wèi)生室李前存1. 講授思路a）讓學(xué)生分析該網(wǎng)頁(yè)中的文字有哪幾種功能？b）分析標(biāo)簽結(jié)構(gòu)C）帶領(lǐng)學(xué)生設(shè)計(jì)網(wǎng)頁(yè)標(biāo)簽d）學(xué)生跟隨老師完成樣式設(shè)計(jì)2. 重點(diǎn)：a）背景圖的運(yùn)用b）列表的標(biāo)簽結(jié)構(gòu)四、實(shí)例2互聯(lián)網(wǎng)的起源與發(fā)展C fieyy界面設(shè)計(jì)技朮網(wǎng)fflfWS!25%202互聯(lián)網(wǎng)的起需與發(fā)總/互黴網(wǎng)的趾務(wù)與發(fā)麻 :護(hù)互聯(lián)網(wǎng)的起源與發(fā)展勞耳聯(lián)網(wǎng)的起源L

11、煞年"弟JBSJiS級(jí)Jf究計(jì)創(chuàng)吐瑾日（AJJ, AdY ©0Qd ElaSWuroh Frojects A$«cv:y ）開(kāi)÷為遜心由何焙把姐的用電肘主機(jī)聯(lián)總起宏。 庶Sr只&牟治主悅從坯騎上魁于艾國(guó)鈿昭級(jí)機(jī)宅的I?護(hù)之下，從枝朮上它注不 向處摧廣的周壯 M8拜，血綁5嗨防jts目BmSa?用干異t響絡(luò)的Em 儀19克耒牙按把該悔階為貝昭d IDn繃一鋤，ftf5½¾5J.r±?!會(huì)上說(shuō) 行起來(lái)，川而謹(jǐn)生7JS正的1朮燈“2渺互聯(lián)網(wǎng)的發(fā)展3年代，關(guān)型涎算餐統(tǒng)工址相經(jīng)衰曾而他入低谷.關(guān)國(guó)戲砌現(xiàn)怠識(shí)殳岡絡(luò)挽術(shù)發(fā)喪的 巨

12、尢昔力惡其蟲(chóng)機(jī)互聯(lián)網(wǎng)陽(yáng)taIt和商11澈朗推廣和直用刖fti啲也稅購(gòu)與其中八妙 爭(zhēng)X03J47a主主利用譏加協(xié)細(xì)Si 了一佈聘嘩Hrag科酒主會(huì)豳 MSBNiTO】沏年，AEFA砒，冃時(shí)，MEJii<.俸2年，宙干上岡用戶SWaSWftb 互底冋齡】SM綏運(yùn)而生互嗣商業(yè)ftW515o MSS年，MSPSBT正式去屆停止運(yùn)行 由5）ffiS7它的工作至此，"Tm的商11化進(jìn)理徹關(guān)成，互&網(wǎng)莎怡大執(zhí)便應(yīng) 審干SH肉誡。COPyroJri9B i qz 20141. 講授思路e）讓學(xué)生分析該網(wǎng)頁(yè)中哪些效果沒(méi)有學(xué)過(guò)？有什么難點(diǎn)?D 分析標(biāo)簽結(jié)構(gòu)g）帶領(lǐng)學(xué)生設(shè)計(jì)網(wǎng)頁(yè)標(biāo)簽h）學(xué)生跟

13、隨老師完成樣式設(shè)計(jì)2. 重點(diǎn)：C）背景圖的定位d） Padding 和 margin 的運(yùn)用五. 實(shí)例3奧運(yùn)會(huì)O-Co奧休匹克運(yùn)動(dòng)會(huì)”ea. <<r<-. I, * q -；- 1；&*«!匕秤牙n £22*.KKr-VMl>t%葉.El.*wx< r0*. 9(JT tf FlP嗎 f 貝匚3?WX7預(yù)習(xí)任務(wù)a）觀看微課程b）完成對(duì)應(yīng)的章節(jié)測(cè)驗(yàn) 章節(jié)測(cè)驗(yàn)批改，問(wèn)題匯總 課堂環(huán)節(jié) 1）問(wèn)題統(tǒng)一講解，難點(diǎn)：a）網(wǎng)頁(yè)對(duì)象居中b）背景圖的左位C）包含選擇符 2）拓展任務(wù)：大數(shù)據(jù)時(shí)代t*f.Mt. 5WT*X YU*" -"

14、mW; XaCri* roMHM9m÷ BB ft. a>t 3wmWWM<not O>H*Ctf*.!r*>Bmri. at. Usi«K9iaro«vh<s. 9<nw fteteO77*7 阿÷m i:OAr9tezc. Vmm,rsMLs*n Ma. r.w. IXriIVtO*71>t*=lJUyCI z*<. fU<tr>tKJ4<>! . B r. ,mi59Hu . Glr, fcir>>9>, VLtX-Riyarrsa HatUt*rvc. nr

15、H>xin<w.rarax> "av10大數(shù)據(jù)時(shí)代：生活、工作與思維的大變革內(nèi)容簡(jiǎn)介«乂口比FK:生Q ZMS!tfl*S*>-®7 4«.6««« % XRtlIJr- UWSCer. 4-tf*. U*"：UlIfflJi才裕棗 燈“XllWB庇U： m.ft-i<c4Xff<Ka*A>X *ATZ14CmXSBWKnFR:.*K KSCHtKAtt皚口代:生w Lir5eM>o*nt.人r*r3taa* swi4. Xe-j. ArB-C7-*g>忙t&l

16、t;0.ufrF sRBVjiir. mut r?訓(xùn)代大川“紋孕 Baw*<<fflT. rm mni. CLtttttnM-Q*2 WBa->0-. *坊人賽 naxj<5t*irAatri!：-t7fiir5«vi 1tffi 介«« t-i （VJH.r 、f如TE巧 WWS ÷rww<wm.豈星負(fù)人咅孰?yún)C岌 人Z- - e¼<n¼*mjnKmittTGIat<if. ae*<*c4xtwB* 人 iu2*atJjiIWRvift一!5JI文亡樺&茂0<lt>

17、; <RJ>EX*IHL*>ywg夕* n*）i:SFKAXlTfiiMrGtr7Kl tf m<rKPRiirti thnAS*irsts 化殳 *ii5M巧/*|511；1川龍!5*S5 eltRH<r<. aC.ttt*ft<lW<Zi <1* ½Ah!aWK4尿« 7<KfVM- fl0HRAHV.事彫4*初侈門.K<*W>-÷. RWMBM¾ll*tfca K W>X- M Wta*±ftC ¾<7畳丸戶&：T ffl5<ftt

18、>1±a. f>jertx>a力屢Hrj-*H! rko- 4 XMgWE索 <4*> <p' r*tf5ttWiUZ- RWce>X.豐蘇寧RFf>*nf2人苓，彳三駅R*Ktf初辟*Jt*ffMAm±i8tl朋<器彳W MEHf%>*>Ttt*Vir>VJVM*ll. KK<（M3CV &今W-*<wr<-負(fù)« n可上、i!. t “；St:疋“"VIrAWtW¼nfXynItt3*011a）統(tǒng)一分析頁(yè)而中的文字設(shè)計(jì)特點(diǎn)，尤苴是標(biāo)題、行

19、距、背景等的細(xì)節(jié)設(shè)計(jì)b）學(xué)生自行嘗試設(shè)計(jì)網(wǎng)頁(yè)標(biāo)簽C）挑選幾個(gè)有代表性的學(xué)生設(shè)計(jì)的標(biāo)簽與全班同學(xué)分享，不足的指出并提供建議， 做得好的給予表?yè)P(yáng)，最后要給岀正確標(biāo)簽結(jié)構(gòu)（注意表格部分的標(biāo)簽）d）接下來(lái)，讓學(xué)生嘗試添加樣式，個(gè)別有疑問(wèn)的單獨(dú)指導(dǎo)e）針對(duì)問(wèn)題較為集中的“背景”樣式，統(tǒng)一講解：如何定位背景圖？如何合理設(shè)計(jì) 背景圖案？D 學(xué)生自行完善后續(xù)樣式g）作品點(diǎn)評(píng)環(huán)節(jié)（不足與鼓勵(lì)）五、小結(jié)1. 網(wǎng)頁(yè)中的文字有自己的特點(diǎn)，使用時(shí)應(yīng)根據(jù)文字的作用來(lái)設(shè)計(jì)樣式，注意字體、字號(hào)、 行距、顏色、前后左右間距的設(shè)計(jì)，都會(huì)影響到文字的整體排版效果2. 網(wǎng)頁(yè)中某個(gè)對(duì)象實(shí)現(xiàn)居中的方法3. id選擇符、標(biāo)簽選擇符、類選擇

20、符的作用與使用方法授課時(shí)間8課時(shí)授課題LJ（章節(jié)）第3章網(wǎng)頁(yè)中的圖文混排授課類型一體化教學(xué)目標(biāo) 與教學(xué)要求知識(shí)目標(biāo)：圖片與文本排版要注意的基本原則：流動(dòng)布局模型與浮動(dòng)布局模型的特征技能目標(biāo)：利用列表實(shí)現(xiàn)圖片與文本的組織和排版；利用浮動(dòng)實(shí)現(xiàn)靈活的圖文混排主要 內(nèi) 容1. 各種圖文混排方式的網(wǎng)頁(yè)欣賞2. 圖文混排的基本原則3. 實(shí)例1圖左文右混排4. 實(shí)例2圖上文下混排（翻轉(zhuǎn)課堂）5. 實(shí)例3雙層浮動(dòng)的復(fù)雜混排6. 小結(jié)重點(diǎn)與 難點(diǎn)重點(diǎn)：圖文混排的標(biāo)簽設(shè)計(jì)；浮動(dòng)的原理 難點(diǎn)：浮動(dòng)對(duì)布局的影響教學(xué)方法 或教學(xué)手段 （教具）問(wèn)題引導(dǎo)、課堂答疑、微課程輔助、練習(xí)鞏固與拓展參考資料菜鳥(niǎo)教程教學(xué)后記本章的難

21、點(diǎn)是浮動(dòng)布局模型，學(xué)生對(duì)于浮動(dòng)的原理較難理解，對(duì)于浮動(dòng)后 布局的錯(cuò)位較難找到解決的方法，另外，學(xué)生對(duì)于浮動(dòng)應(yīng)該添加在哪個(gè)對(duì)象上 也拿不準(zhǔn)，這兩個(gè)難點(diǎn)需要重點(diǎn)深入地講解練習(xí)。一、引入：不同的網(wǎng)頁(yè)在圖文混排上的特點(diǎn)圖文比重相當(dāng)，采 用圖左文右結(jié)構(gòu)*Smz*wr mcm *m GXdM3tm *m mM*S >«««Q m MgaMnINfiQlCIit>CMW IMa A 5rCmnca U 11It >rwor ivgw v«r rc4Q SSMTMeMr l>M W<to< LiEE/ tf lm *3 一z. T*f

22、* bu%n* bulnd VTOr ur4ctcr*n WbMIR “ .r" flKWQ F0-S «m 一行Kn FMt fM4 wt*YMrrMX "tM" ” 29 XttMnwg ” MMCXHnM<uMi trwc rur>t) CfneKtt CrrWlktelt AfkIaI AI MmMOlafr K R *>dcw Ct crt>d>n .切慮<1 0 O¼w> glr x> “ IWUr4 rt & Mlal 5 & JMItt rtwwt 25 Kr U

23、IwpHtv*. SPZjJBg c>>cnrrvQ, cInme%4ums.<V" J felU3MU BScec*ftw.0i<*>e(<pr<*re >*rc><be UnCe«1en> *e*tHvff WOet«» ,.¾fy,g VJWIC t> r<tarArtMk cjI * lcct Kr XmyHXcnrce r>UM-art>. tn Cm*>* tt£fl X Wn »>*» Mf food

24、t ” rtlb «< *mv*«* <« »nr e>祝峠 <<w*, *< IeWMt*ru> «，w>*uy*d<*Hd 0BrSw>Tu*1 n(*m.<9 Aga VCr5 WrTk圖大文小，采用圖 上文下結(jié)構(gòu)圖小文多，采用文 字包囤圖片的結(jié) 構(gòu)二. 網(wǎng)頁(yè)中圖文混排的問(wèn)題1. 比例問(wèn)題a）娛樂(lè)性網(wǎng)站圖片的顯示比重會(huì)大于文本信息的顯示大小b）新聞性或?qū)I(yè)技術(shù)性網(wǎng)站，文本信息的重要性要超過(guò)圖片的分量教學(xué)過(guò)程備注C）與網(wǎng)站的設(shè)計(jì)風(fēng)格有關(guān)2. 間距問(wèn)題a）間距的作用b）圖片和文

25、本之間不能沒(méi)有間距a）圖片與文本往往構(gòu)成獨(dú)立的小單元，這些小單元之間的間距應(yīng)該比內(nèi)部間距稍大3 實(shí)現(xiàn)方法a 使用無(wú)序列表中的Ii封裝一個(gè)圖文單元b）使用浮動(dòng)float改變Ii的布局三、實(shí)例1圖左文右混排<*H.fe*一也±?Tei有水鄉(xiāng)、BEZ± 俺曲竊歷史越兀早在元代中天曰幡好Z Q元一袋志妙紋：1U 鋁、Hr、鋼5、檢棄環(huán)X 杏而申財(cái)YMia瞅場(chǎng)記衣乍無(wú)中佢Ow令天硼 （R年硼于珈1T和一京q見(jiàn)豈附術(shù)洵鈿主；E怕曲 規(guī)叫手粥KmW:*想詢吠淪樹(shù)W優(yōu)噸W大和禺 5FWgWft 一力單悻F(xiàn)lgif÷個(gè)別曲泌 斤，為H在天中的JfE曲!&10石加執(zhí)I的

26、主竇圧外并不星莢芽，幣&S*。相砂*羽 舟WS芽獅拓甘也足8吻它星一彳卸左角癡左，5 亠斤去右沁#許。wmi1行上sQid阪上 苗稈。這更的婁前ffittitft呈S且夠atiTOfiB 聖如。5!總?cè)ヅc毅60.升因於空慶»1 0他的R 0又可存砒鬲 W、溯WEL 股門臼舛疲出務(wù)中SIEfC力板目« 倚在刪時(shí)期劇JB抄設(shè)加傅W氏多心人SfrRg f昭伙羯多，玄伍時(shí)E甲不歸鄉(xiāng)，rrxiw> m 總幻話蘭采鴨、S*豐為R魂良壬松tiItiwc 駿與甬安*府枝巧，ag*-zB0W：的Iife十 分W加拭炒先&椚吠、爭(zhēng)氓翎MR-樸早上陽(yáng)御 沁冷益朗時(shí)話三天戲后

27、戲MiR干。冊(cè)取審!皮 付白、肉P0舌、Wtt>電金丸:出如九眾滋刪林*:&如fl足二右刪能 MW- JW以啟用斤測(cè)粉儀軸斗 說(shuō)是先勺史丸. 法處九以期畑傾是*納依魚(yú)r且色見(jiàn)中車筋和尊 以忖枷血rWE妨帀且型臨丸在條莢的舄fw*中 可.<4SB.R更濟(jì)缺立 flftn6tMi上，*蟲(chóng)肉中的統(tǒng)&也血甜佑出和筈 胡刻理丸因娥込÷m丸曲Htts-祈花堆上可通過(guò)浮動(dòng)前與浮 動(dòng)后的對(duì)比，讓學(xué) 生深刻體會(huì)浮動(dòng) 布局的特點(diǎn)1. 講授思路a）指岀網(wǎng)頁(yè)中哪些部分是今天學(xué)習(xí)的重點(diǎn)，分析圖文混排的特點(diǎn)，指出比例和間距 在網(wǎng)頁(yè)中的運(yùn)用b）分析標(biāo)簽結(jié)構(gòu)C）學(xué)生嘗試設(shè)計(jì)網(wǎng)頁(yè)標(biāo)簽d）重

28、點(diǎn)示范浮動(dòng)float如何實(shí)現(xiàn)混排C）學(xué)生自行完善后續(xù)樣式2. 重點(diǎn)：a）浮動(dòng)布局（左浮動(dòng)、右浮動(dòng)）b）浮動(dòng)應(yīng)該添加在哪個(gè)對(duì)象上C）浮動(dòng)帶來(lái)的父元素塌陷如何解決四、實(shí)例2圖上文下混排4> GOLOViP卞堆躋電孑工圧弁ERPffTfXWJS撾E左帥Wwtech礎(chǔ)創(chuàng)生產(chǎn)技術(shù)工采用翻轉(zhuǎn)課堂紅KBG/.PCPartner主產(chǎn)組卡市場(chǎng)池i<fiIB著員©CCaSoNlCIfiM安叔木員O互蠹科技 ©樽顆Sl童8構(gòu)工忌師¥®iS計(jì)員1. 預(yù)習(xí)任務(wù)a）觀看微課程b）完成對(duì)應(yīng)的章節(jié)測(cè)驗(yàn)2. 章節(jié)測(cè)驗(yàn)批改，問(wèn)題匯總3. 課堂環(huán)節(jié)1）問(wèn)題統(tǒng)一講解，難點(diǎn)：a）圖文

29、單元內(nèi)的標(biāo)簽結(jié)構(gòu)設(shè)計(jì)b）浮動(dòng)的原理2）拓展任務(wù)：作品展示CSSImPOrtXURg葉<FW r< C2<MI4elFF VMfYuW1!ttTViWiftH Shn÷*f>HX<. RWrM 力 mwr¼了x.g R*frx*c-<*W««CCFXfeUeti»*4網(wǎng)頁(yè)中間的圖文 混排是難點(diǎn)，應(yīng)該 先抽選代表性的 學(xué)生作業(yè)一起分 享，指出問(wèn)題所 在，通過(guò)對(duì)比找到 解決方案a）統(tǒng)一分析頁(yè)而中的圖文混排特點(diǎn)，尤苴是布局、間距的細(xì)Yj設(shè)訃b）學(xué)生自行嘗試設(shè)計(jì)網(wǎng)頁(yè)標(biāo)簽C）挑選幾個(gè)有代表性的學(xué)生設(shè)計(jì)的標(biāo)簽與全班同學(xué)分享

30、，不足的地方指岀并提供建 議，做得好的給予表?yè)P(yáng)，最后要給出正確標(biāo)簽結(jié)構(gòu)（注意圖文混排部分的標(biāo)簽）d）接下來(lái)，讓學(xué)生嘗試添加樣式，個(gè)別有疑問(wèn)的單獨(dú)指導(dǎo) C）統(tǒng)一講解難點(diǎn)：i. 頁(yè)腳為什么會(huì)錯(cuò)位？ii. 圖文混排部分如何實(shí)現(xiàn)絕對(duì)居中？0 學(xué)生自行完善后續(xù)樣式g）作品點(diǎn)評(píng)環(huán)節(jié)（不足與鼓勵(lì)）五、實(shí)例3雙層浮動(dòng)的復(fù)雜混排X +feyy «界面說(shuō)計(jì)技汰> ra¾aW*3產(chǎn)品修/雙® Q U冑 心 <>A護(hù)膚品Skin Care說(shuō)爭(zhēng)財(cái)蕪好與環(huán).-9rZ.二艮云丞 號(hào)三豐色眉込亦士旳氏言并不岌呼尿 WKtW3苒蘇出現(xiàn)子盤無(wú) 儀.訊冷圭野沉.殺慈耳.歸又侖毛 A3

31、3X 由蕓祚!歸的仗：兜，香品 FragranCe夠1升金繪龐忖各冋K今 詫叨朗關(guān)包?2男士左彌他廈用答 正襪還啟冊(cè)耳施讓強(qiáng)融茅不 ¾rffw¾ 咱反.蔭矽&s. s¾w彩妝品Make-UP護(hù)發(fā)品Hair Care*洗護(hù)空血曲琢N.三個(gè).總啟自 m約55茨.個(gè)人護(hù)理品PerSOnal CareeO 毎無(wú)好彩ak至的 盟砂.不口斑2位.郵i分開(kāi)舸 忻對(duì)時(shí)號(hào)產(chǎn)見(jiàn)®®Sa WelIneSS鴉芳左如F壬舒!爭(zhēng)矢性詐如全 力蚩5大Qe莖弟.÷ict53t.忘方天E. 4f.方垃科.ta御代勞人媲舷越1. 講授思路a）已自行練習(xí)為主，針對(duì)

32、不同問(wèn)題個(gè)別輔導(dǎo)b）統(tǒng)一講解網(wǎng)頁(yè)中間的圖文混排效果C）挑選不同學(xué)生作品展示2. 重點(diǎn)：a）如何用列表設(shè)計(jì)圖文混排單元b）雙層浮動(dòng)：第一層添加在Ii上，第二層添加在大圖上C）如何處理浮動(dòng)之后出現(xiàn)的對(duì)齊錯(cuò)位六、小結(jié)1. 網(wǎng)頁(yè)中的圖文混排通常會(huì)使用浮動(dòng)布局2. 浮動(dòng)布局具有靈活排版的特點(diǎn)，能夠根拯頁(yè)面的內(nèi)容自動(dòng)伸縮調(diào)整，缺點(diǎn)就是布局有 時(shí)會(huì)出現(xiàn)無(wú)法預(yù)測(cè)的混亂，需要考慮各方而因素3. 浮動(dòng)會(huì)引起父元素塌陷，通過(guò)清除浮動(dòng)可以還原七、課后作業(yè)運(yùn)用浮動(dòng)給實(shí)現(xiàn)“課程列表”圖文混排網(wǎng)頁(yè)效果。左側(cè)為專業(yè)列表.右側(cè)為課程列表。*hh財(cái)J Was *SOB arO3.移動(dòng)應(yīng)用開(kāi)易支術(shù)WeM網(wǎng)頁(yè)交互技術(shù)計(jì)強(qiáng)機(jī)B陰荼礎(chǔ)網(wǎng)

33、絡(luò)如與策劃界面芙工釵據(jù)庫(kù)技術(shù)與應(yīng)用界面設(shè)計(jì)技術(shù)綜合實(shí)訓(xùn)頃目提示：1. 左側(cè)專業(yè)列表向左浮動(dòng)，右側(cè)課程列表向右浮動(dòng)2右側(cè)課程列表內(nèi)部使用圖上文下結(jié)構(gòu)設(shè)計(jì)授課時(shí)間4課時(shí)授課題LJ（章節(jié)）第4章導(dǎo)航條的設(shè)計(jì)與制作授課類型一體化教學(xué)目標(biāo) 與教學(xué)要求知識(shí)目標(biāo)：導(dǎo)航條的作用與特點(diǎn)；一級(jí)導(dǎo)航條的標(biāo)簽結(jié)構(gòu)：導(dǎo)航條常用的樣式技能目標(biāo)：水平一級(jí)導(dǎo)航條的設(shè)訃與制作；縱向一級(jí)導(dǎo)航條的設(shè)汁與制作；滑動(dòng)門技 術(shù)主要 內(nèi) 容1. 成功導(dǎo)航的特征2. 實(shí)例1水平導(dǎo)航條3實(shí)例2垂直導(dǎo)航條（翻轉(zhuǎn)課堂）4. 實(shí)例3滑動(dòng)門技術(shù)5. 小結(jié)重點(diǎn)與 難點(diǎn)重點(diǎn)：一級(jí)導(dǎo)航條的標(biāo)簽結(jié)構(gòu)設(shè)計(jì)；鼠標(biāo)經(jīng)過(guò)菜單的樣式設(shè)計(jì) 難點(diǎn)：滑動(dòng)門技術(shù)教學(xué)方法 或教

34、學(xué)手段 （教具）問(wèn)題引導(dǎo)、小組討論、課堂答疑、微課程輔助、練習(xí)鞏固與拓展參考資料菜鳥(niǎo)教程教學(xué)后記本章的新知識(shí)難度不大，但是學(xué)生自己做出來(lái)的導(dǎo)航條很多細(xì)節(jié)不到位，主要 還是前面的基礎(chǔ)知識(shí)運(yùn)用不夠靈活，例如Padding和margin、背景、邊框等如 何與超鏈接組合起來(lái)設(shè)計(jì)，對(duì)于學(xué)生來(lái)說(shuō)還需要總結(jié)和鍛煉。10教學(xué)過(guò)程備注一.引入：成功導(dǎo)航的特征1. 與網(wǎng)站主題相稱2. 良好的反饋3. 平衡4. 易于學(xué)習(xí)5. 明確的標(biāo)簽6. 一致性與不一致性的統(tǒng)一1. 首先，挑選統(tǒng) 一主題的幾張學(xué) 生作品網(wǎng)頁(yè)展示， 讓同學(xué)們?cè)u(píng)價(jià)那 個(gè)作品的導(dǎo)航條 設(shè)訃的最好，哪個(gè) 最差？為什么？2. 然后，引出主 題：什么樣的導(dǎo)航

35、 條才算是成功 的？二、實(shí)例1水平導(dǎo)航條產(chǎn)品櫥窗最新關(guān)注走逬雉芳事業(yè)機(jī)會(huì)購(gòu)買與砌分享女人心1. 制作過(guò)程a）分析導(dǎo)航條的設(shè)計(jì)特點(diǎn)（顏色、狀態(tài)變化、字體等）b）標(biāo)簽結(jié)構(gòu)設(shè)計(jì)C）樣式設(shè)計(jì)如何擴(kuò)展超鏈接的作用范圍，使得鼠標(biāo)的響應(yīng)空間變寬 m 超鏈接的正常狀態(tài)、鼠標(biāo)經(jīng)過(guò)狀態(tài)、激活狀態(tài)、被訪問(wèn)狀態(tài)三、實(shí)例2垂直導(dǎo)航條住苜頁(yè)z 產(chǎn)電會(huì)員秋區(qū)J產(chǎn)品服務(wù)J軟件下戟z關(guān)于我們1. 預(yù)習(xí)任務(wù)a）觀看微課程b）完成對(duì)應(yīng)的章節(jié)測(cè)驗(yàn)2. 章節(jié)測(cè)驗(yàn)批改，問(wèn)題匯總3. 課堂環(huán)節(jié)1）問(wèn)題統(tǒng)一講解，難點(diǎn)：a）左側(cè)圖標(biāo)的添加與左位b）首頁(yè)圖標(biāo)的單獨(dú)實(shí)現(xiàn)2）拓展任務(wù)：作品展示返回頂部運(yùn)動(dòng)戶夕卜a）統(tǒng)一分析頁(yè)而中的導(dǎo)航條特點(diǎn)，要求與

36、背景圖同寬，文字居中b）學(xué)生自行嘗試設(shè)計(jì)網(wǎng)頁(yè)標(biāo)簽C）挑選幾個(gè)有代表性的學(xué)生設(shè)計(jì)的標(biāo)簽與全班同學(xué)分享，不足的指出并提供建議, 做得好的給予表?yè)P(yáng)，最后要給出正確標(biāo)簽結(jié)構(gòu)d）接下來(lái)，讓學(xué)生嘗試添加樣式，個(gè)別有疑問(wèn)的單獨(dú)指導(dǎo)e）難點(diǎn)：i. 如何讓菜單與背景圖正好吻合？ii. 如何刪除底部的虛線？D 學(xué)生自行完善后續(xù)樣式g）作品點(diǎn)評(píng)環(huán)節(jié)（不足與鼓勵(lì)）四、實(shí)例滑動(dòng)門技術(shù)正常狀態(tài)10底部邊框顏色為E276A7滑動(dòng)門技術(shù)用于 實(shí)現(xiàn)外觀特殊的 導(dǎo)航條1.講授思路教學(xué)過(guò)程備注a）分析：特點(diǎn)1菜單外形有圓角效果，外形比較復(fù)雜：特點(diǎn)2菜單的文字長(zhǎng)度不一 致，背景圖需要具備可伸縮性。b）提問(wèn)：用之前的方法如何實(shí)現(xiàn)具有圓

37、角效果的導(dǎo)航條？C）引出新方法： 背景圖設(shè)計(jì)分為左右兩張圖片，左側(cè)圖包括左上角的完整效果，并且足夠長(zhǎng), 右側(cè)圖包括右上角的完整效果，并且足夠長(zhǎng)。m 在每一個(gè)a里而多加一層SPan或StrOng （行內(nèi)標(biāo)簽不破壞布局），用于分別控 制兩側(cè)的背景圖m 在a上添加左側(cè)圖作為背景，在span±添加右側(cè)圖作為背景只能在SPan或StrOng標(biāo)簽上擴(kuò)展超鏈接的范圍，這樣兩層背景才能完美重疊 2.重點(diǎn)：a）圓角按鈕外觀的制作b）滑動(dòng)門技術(shù)實(shí)現(xiàn)的導(dǎo)航條有特殊的標(biāo)簽結(jié)構(gòu)C）超鏈接HOVCr狀態(tài)的背景變換六、小結(jié)1. 網(wǎng)頁(yè)中的導(dǎo)航條作用與設(shè)計(jì)原則2. 一級(jí)導(dǎo)航條的標(biāo)簽結(jié)構(gòu)、超鏈接的狀態(tài)變化樣式3. 特殊

38、外觀的導(dǎo)航條使用滑動(dòng)門技術(shù)實(shí)現(xiàn)4. 滑動(dòng)問(wèn)技術(shù)的核心思想授課時(shí)間4課時(shí)授課題LJ（章節(jié)）第5章表格的樣式設(shè)計(jì)授課類型一體化教學(xué)目標(biāo) 與教學(xué)要求知識(shí)目標(biāo)：表格的作用和組成部分：表格的標(biāo)簽結(jié)構(gòu)；表格的常用樣式技能目標(biāo)：運(yùn)用表格格式化顯示數(shù)據(jù)：運(yùn)用表格屬性修飾表格外觀主要 內(nèi) 容1 表格標(biāo)簽結(jié)構(gòu)2. 實(shí)例1規(guī)則表格3. 實(shí)例2不規(guī)則表格（翻轉(zhuǎn)課堂）4. 小結(jié)重點(diǎn)與 難點(diǎn)重點(diǎn)：表格的完整標(biāo)簽結(jié)構(gòu)、表格基本樣式運(yùn)用 難點(diǎn)：如何設(shè)置不同單元格的樣式教學(xué)方法 或教學(xué)手段 （教具）問(wèn)題引導(dǎo)、小組討論、課堂答疑、練習(xí)鞏固與拓展參考資料教學(xué)后記本章的內(nèi)容主要圉繞表格來(lái)進(jìn)行，表格的標(biāo)簽比較繁瑣，學(xué)生需要一點(diǎn)時(shí)間才

39、能記得住，但是沒(méi)有太多理解上的難點(diǎn)，主要還是運(yùn)用基礎(chǔ)樣式對(duì)表格進(jìn)行美 化，以及不規(guī)則表格的設(shè)計(jì)有一點(diǎn)難度。10教學(xué)過(guò)程備注101. 提問(wèn)：構(gòu)成表格的標(biāo)簽有哪些？它們各自扮演的角色是什么？2. 給出完整的表格標(biāo)簽結(jié)構(gòu)示范二-實(shí)例1規(guī)則表格期中考試成績(jī)單奸名化學(xué)數(shù)學(xué)總分牛小頓321?1463伽小略2S1615的薜小諾262212&)海小型162216M25111248秋小克158g32期中考試成績(jī)單學(xué)生對(duì)表格都比 較熟悉，但是沒(méi)有 表頭、表尾的概念1. 講解思路a）提問(wèn)：實(shí)例中表格的各個(gè)組成部分（標(biāo)題、表頭、主體）？b）學(xué)生嘗試設(shè)計(jì)表格標(biāo)簽C）抽選學(xué)生的標(biāo)簽分享，首先讓其他同學(xué)一起來(lái)找出問(wèn)

40、題，教師對(duì)大家提岀的問(wèn)題 給予分析解答，最后示范正確標(biāo)簽結(jié)構(gòu)d）表格的樣式設(shè)計(jì)如何把第一行和第一列統(tǒng)一設(shè)計(jì)為粗體效果邊框的合并與分開(kāi)2. 重點(diǎn)a）根據(jù)表格效果對(duì)應(yīng)表格的標(biāo)簽結(jié)構(gòu)b）對(duì)相同樣式的單元格可歸為一類ClaSS三、實(shí)例2不規(guī)則表格個(gè)人簡(jiǎn)歷出生年月身IS吸系方戎個(gè)人歷1. 預(yù)習(xí)任務(wù)C）觀看微課程d）完成對(duì)應(yīng)的章節(jié)測(cè)驗(yàn)2. 章節(jié)測(cè)驗(yàn)批改，問(wèn)題匯總3. 課堂環(huán)節(jié)1）問(wèn)題統(tǒng)一講解，難點(diǎn)：C） rowspan 和 COlSPan 的使用d）不同單元格的選取2）拓展任務(wù)：作品展示a）統(tǒng)一分析頁(yè)而中的導(dǎo)航條特點(diǎn)，要求與背景圖同寬，文字居中b）學(xué)生自行嘗試設(shè)計(jì)網(wǎng)頁(yè)標(biāo)簽C）挑選幾個(gè)有代表性的學(xué)生設(shè)計(jì)的標(biāo)

41、簽與全班同學(xué)分享，不足的指岀并提供建議, 做得好的給予表?yè)P(yáng)，最后要給出正確標(biāo)簽結(jié)構(gòu)d）接下來(lái)，讓學(xué)生嘗試添加樣式，個(gè)別有疑問(wèn)的單獨(dú)指導(dǎo)C）難點(diǎn)：i. 圖片下方的小間隙如何淸除？ii. body的背景色和網(wǎng)頁(yè)的背景色如何分別實(shí)現(xiàn)？0 學(xué)生自行完善后續(xù)樣式g）作品點(diǎn)評(píng)環(huán)節(jié)（不足與鼓勵(lì)）六-小結(jié)1. 表格的功能不再是以前大量用于頁(yè)而布局的手段，而是回歸其最初的本質(zhì)：數(shù)據(jù)信息 的規(guī)范顯示2. 表格有簡(jiǎn)單的標(biāo)簽和完整的標(biāo)簽兩種結(jié)構(gòu)，完整的標(biāo)簽更利于我們?cè)O(shè)汁復(fù)雜的表格樣 式3. 每一個(gè)單元格其實(shí)是一個(gè)容器，里而可以放置各種標(biāo)簽，而不僅僅是文字4. 單元格可以通過(guò)分類來(lái)設(shè)訃不同的樣式教學(xué)過(guò)程備注授課時(shí)間8課

42、時(shí)授課題LJ（章節(jié)）第6章網(wǎng)頁(yè)布局設(shè)計(jì)授課類型一體化教學(xué)目標(biāo) 與教學(xué)要求知識(shí)目標(biāo)：網(wǎng)頁(yè)布局設(shè)計(jì)的基本步驟；網(wǎng)頁(yè)布局設(shè)計(jì)原則；網(wǎng)頁(yè)中常用的布 局形式技能目標(biāo)：固定寬度布局；單列變寬度布局：雙側(cè)列寬固泄的變寬布局主要 內(nèi) 容1. 網(wǎng)頁(yè)布局設(shè)計(jì)的基本步驟2. 版面設(shè)計(jì)的原則3. 實(shí)例固定寬度布局4. 實(shí)例 單列變寬度布局（翻轉(zhuǎn)課堂）5. 實(shí)例雙側(cè)列寬固定的變寬布局6. 綜合練習(xí)Baby HOUSing網(wǎng)頁(yè)制作7. 小結(jié)重點(diǎn)與 難點(diǎn)重點(diǎn)：版面設(shè)計(jì)的基本原則；網(wǎng)頁(yè)布局設(shè)計(jì)的標(biāo)簽結(jié)構(gòu)和關(guān)鍵樣式 難點(diǎn)：?jiǎn)瘟凶儗挾炔季?；雙側(cè)列寬固定的變寬布局教學(xué)方法 或教學(xué)手段 （教具）問(wèn)題引導(dǎo)、小組討論、課堂答疑、練習(xí)鞏固

43、與拓展參考資料菜鳥(niǎo)教程教學(xué)后記這一章可以說(shuō)是對(duì)前面所學(xué)的匯總，難度比較較大，所以案例的選取盡可能包 含所講過(guò)的基礎(chǔ)知識(shí)，布局上是常見(jiàn)的結(jié)構(gòu)，沒(méi)有加入太多增加難度的內(nèi)容。 學(xué)生學(xué)習(xí)這章還是顯得比較吃力，如果前面沒(méi)消化好，那么很多難點(diǎn)會(huì)堆積到 一起，需要放慢速度，重點(diǎn)講解整體設(shè)計(jì)思路.把握好布局的全局結(jié)構(gòu)，細(xì)節(jié) 的實(shí)現(xiàn)可以讓學(xué)生自己去實(shí)踐體會(huì)。一、網(wǎng)頁(yè)布局設(shè)計(jì)的基本步驟1. 提問(wèn)1：請(qǐng)問(wèn)網(wǎng)頁(yè)布局指的是什么？你們是如何理解的呢？2. 提問(wèn)2：請(qǐng)同學(xué)們說(shuō)說(shuō)自己如何決上網(wǎng)頁(yè)的布局設(shè)汁？3. 步驟a）根據(jù)畫而上整體內(nèi)容的位置決泄外層布局（列舉具體的網(wǎng)頁(yè)實(shí)例）b）依據(jù)空間分割方向進(jìn)一步確左內(nèi)層布局（列舉具體

44、的網(wǎng)頁(yè)實(shí)例）二、版面設(shè)計(jì)的原則1. 比例與尺度a）提問(wèn)1：大家平常設(shè)計(jì)的網(wǎng)頁(yè)是多大尺寸？b）提問(wèn)2：網(wǎng)頁(yè)內(nèi)容有的很多，有的很少，怎么辦？C）引出主題m以主流的顯示器分辨率來(lái)設(shè)計(jì)網(wǎng)頁(yè)的最大寬度o網(wǎng)頁(yè)的寬度要注意不應(yīng)該產(chǎn)生水平滾動(dòng)條o 首頁(yè)的高度一般控制在一屏的范用，對(duì)于資訊類網(wǎng)站的首頁(yè)，髙度也不應(yīng)該 超過(guò)三屏2. 節(jié)奏和韻律學(xué)生很少注意版 面設(shè)計(jì)問(wèn)題，在此 提出一些基本原 則，希望可以引導(dǎo) 學(xué)生往這方而多 思考。10a）提問(wèn)：說(shuō)說(shuō)示例網(wǎng)頁(yè)的設(shè)訃有何特點(diǎn)？b）引出主題O頁(yè)而中大量使用曲線 曲線形狀大小的區(qū)分、空間虛實(shí)的交替、疏密有致的排列、曲柔剛直的穿插 等變化實(shí)現(xiàn)了網(wǎng)頁(yè)中特有的節(jié)奏和韻律。3.

45、平衡與對(duì)稱*MVCM n*fM u o* u tcRrr*'w先讓學(xué)生按照自 己的理解分析網(wǎng) 頁(yè)布局，老師再最 后給出適當(dāng)?shù)闹?點(diǎn)能。a）提問(wèn)：說(shuō)說(shuō)示例網(wǎng)頁(yè)的布局有何特點(diǎn)？b）引岀主題網(wǎng)頁(yè)的左右兩側(cè)采用對(duì)稱設(shè)計(jì) 網(wǎng)頁(yè)中間三等分的平均分割4. 對(duì)比與調(diào)和（RJYOUr BeSt Partnera）提問(wèn)：說(shuō)說(shuō)示例網(wǎng)頁(yè)的布局有何特點(diǎn)？b）引出主題O 頂部和底部使用了相反的傾斜設(shè)計(jì)，相互對(duì)應(yīng)，視覺(jué)上平衡底部前景傾斜大圖和虛化處理的背景圖形成對(duì)比，突岀視覺(jué)效果5. 空白與虛實(shí)a）提問(wèn)：說(shuō)說(shuō)示例網(wǎng)頁(yè)的布局有何特點(diǎn)？b）引出主題O頁(yè)而內(nèi)容較少，很多空白空間O大量使用了漸變背景和投影，營(yíng)造虛幻立體的空

46、間效果 空白是一種形狀，是版而不可缺少的組成部分，只要空白安排得當(dāng)，總體設(shè) 計(jì)的淸晰度和效用可成倍提高三、實(shí)例固定寬度布局1-2-11-3-11. 講授思路a）首先帶領(lǐng)學(xué)生一起完成1-2-1固左寬度布局b）讓學(xué)生自己完成1-3-1固宦寬度布局2. 重點(diǎn)：a）div結(jié)構(gòu)b）浮動(dòng)布局C）淸除浮動(dòng)四、實(shí)例單列變寬度布局1.2.3.預(yù)習(xí)任務(wù)C）觀看微課程0 完成對(duì)應(yīng)的章節(jié)測(cè)驗(yàn) 章節(jié)測(cè)驗(yàn)批改,問(wèn)題匯總 課堂環(huán)節(jié)1）問(wèn)題統(tǒng)一講解，難點(diǎn)：e）多層div的嵌套結(jié)構(gòu)O 多層浮動(dòng)的嵌套2）拓展任務(wù)：a）統(tǒng)一分析頁(yè)而的布局結(jié)構(gòu)特點(diǎn)，分析大致的頁(yè)面劃分b）學(xué)生自行嘗試設(shè)計(jì)網(wǎng)頁(yè)標(biāo)簽C）挑選幾個(gè)有代表性的學(xué)生設(shè)計(jì)的標(biāo)簽與

47、全班同學(xué)分享，不足的指出并提供建議, 做得好的給予表?yè)P(yáng)，最后要給岀正確標(biāo)簽結(jié)構(gòu)d）接下來(lái)，讓學(xué)生嘗試添加樣式，個(gè)別有疑問(wèn)的單獨(dú)指導(dǎo)e）難點(diǎn)：i. 可變寬度布局的實(shí)現(xiàn)？ii. 浮動(dòng)后對(duì)布局的影響如何解決D 學(xué)生自行完善后續(xù)樣式g）作品點(diǎn)評(píng)環(huán)節(jié)（不足與鼓勵(lì)）五、實(shí)例雙側(cè)列寬固定的變寬布局*M IklUer Fm* Peaterct- exfl r*c.七.小結(jié)1. 網(wǎng)頁(yè)布局要根據(jù)網(wǎng)頁(yè)的主題內(nèi)容來(lái)設(shè)訃2. 網(wǎng)頁(yè)布局應(yīng)該做到：a）具有淸晰的視覺(jué)層次b）針對(duì)用戶的閱讀模式來(lái)設(shè)計(jì)布局C）合理利用頁(yè)而空間d）不要讓布局本身成為突出的Ul元素，保持視覺(jué)簡(jiǎn)潔3. 浮動(dòng)布局常常會(huì)帶來(lái)意想不到的結(jié)果.需要積累經(jīng)驗(yàn)，

48、細(xì)心分析標(biāo)簽授課時(shí)間16課時(shí)授課題LJ（章節(jié)）第7章javascript編程基礎(chǔ)授課類型一體化教學(xué)目標(biāo) 與教學(xué)要求知識(shí)目標(biāo)：掌握javascript的編程基礎(chǔ)技能目標(biāo)：能夠編寫簡(jiǎn)單的javascript代碼主要 內(nèi) 容1. javascript 介紹2. 第一個(gè)案例 “HelloWorld!”3. 3種方法使用javascript4. 基本語(yǔ)法5. 常用的數(shù)據(jù)類型6. 變量的使用7. 數(shù)組的使用8. 條件語(yǔ)句（if語(yǔ)句和Switeh語(yǔ)句）（翻轉(zhuǎn)課堂）9. 循環(huán)語(yǔ)句（While循環(huán)、for循環(huán)、for.in循環(huán)）（翻轉(zhuǎn)課堂）重點(diǎn)與 難點(diǎn)重點(diǎn)：javascript在網(wǎng)頁(yè)中如何使用；變量與數(shù)組的使用

49、；條件語(yǔ)句、循環(huán)語(yǔ)句 難點(diǎn)：外部腳本的調(diào)用方法；變量的作用域；數(shù)組的添加和刪除；if語(yǔ)句、 for循環(huán)教學(xué)方法 或教學(xué)手段 （教具）問(wèn)題引導(dǎo)、小組討論、課堂答疑、微課程輔助、練習(xí)鞏固與拓展參考資料菜鳥(niǎo)教程教學(xué)后記本章是基礎(chǔ)部分，程序?qū)τ趯W(xué)生來(lái)說(shuō)難度比較大，選取的案例要有階梯難度的 銜接，適當(dāng)減少邏輯復(fù)雜度。學(xué)生基本能夠理解JaVaSCriPt的編程思想，常規(guī) 的流程控制也可以實(shí)現(xiàn)，但僅能實(shí)現(xiàn)簡(jiǎn)單的程序功能。10教學(xué)過(guò)程備注一、JaVaSCriPt 介紹1 .JavaScript 的用途1）展示網(wǎng)頁(yè)中的典型JaVaSCriPt應(yīng)用a）導(dǎo)航條方而的應(yīng)用b）圖片展示方而的應(yīng)用C）表單檢查方而的應(yīng)用d

50、）大型應(yīng)用：google地圖、手機(jī)游戲等2）對(duì)比FlaSh與JaVaSCriPt實(shí)現(xiàn)網(wǎng)頁(yè)特效的優(yōu)缺點(diǎn)a）實(shí)現(xiàn)難度b）網(wǎng)頁(yè)的兼容性C）網(wǎng)頁(yè)上的執(zhí)行效率2、JaVaSCriPt 概念1）JaVaSCriPt是一種基于對(duì)象和事件驅(qū)動(dòng)的程序設(shè)計(jì)語(yǔ)言2）JaVaSCriPt運(yùn)行在客戶端，不能操作后臺(tái)數(shù)據(jù)庫(kù)，具有相對(duì)安全性3）JaVaSCriPt與服務(wù)器程序語(yǔ)言（JaVa、C#、VB等）的區(qū)別3、JaVaSCriPt 的歷史1）JaVaSCriPt初期的發(fā)展?fàn)顩r，當(dāng)初未能得到快速發(fā)展的原因2）JaVaSCriPt B前的發(fā)展現(xiàn)狀，通過(guò)谷歌、雅虎等大型互聯(lián)網(wǎng)公司對(duì)JaVaSCriPt的 實(shí)際應(yīng)用，以及jQu

51、ery、AjaX等成熟開(kāi)發(fā)包的應(yīng)用，明確JaVaSCriPt的光明未 來(lái)。4、JaVaSCriPt 與 HTML、CSS 的關(guān)系1）HTML在網(wǎng)頁(yè)中扮演的角色2）CSS在網(wǎng)頁(yè)中扮演的角色3）JaVaSCriPt在網(wǎng)頁(yè)中扮演的角色5、JaVaSCriPt開(kāi)發(fā)工具1）記事本：方便獲取、不需要安裝：對(duì)程序員要求髙2）ViSUal S（UdiO 28:有語(yǔ)法提示、程序調(diào)試功能：需要安裝軟件問(wèn)題1：請(qǐng)問(wèn)同學(xué)們?cè)跒g 覽網(wǎng)頁(yè)的時(shí)候是否有注意 到網(wǎng)頁(yè)上有很多的特效？ 能說(shuō)出哪些？問(wèn)題2：網(wǎng)頁(yè)上的特效有 的是用FIaSh實(shí)現(xiàn)的，有的 是用JaVaSCriPt實(shí)現(xiàn)的，你 能區(qū)分嗎？教學(xué)過(guò)程備注D xSS5

52、5;EHeIo world!P testhtm 遠(yuǎn)事本1TeJ問(wèn)題：說(shuō)說(shuō)你完成一張網(wǎng) 頁(yè)從設(shè)計(jì)到制作的主要步 驟都包括哪些？觀看微課程，然后自己動(dòng) 手嘗試完成實(shí)例“Hello World!”觀看微課程，自行完成調(diào) 用外部腳本討論：調(diào)用外部腳本與直 接嵌套腳本的對(duì)比6、入門案例uHelloWorldJv （微課程）文件IF)編碌E) Ig式(O)希Sl辛助(H)KiroCTYPE hwl PUBLIC ,-W3C/T)TD XHTNL 1.0 Transitional/W - <htl Xnll ns= z*h 11 p: /wmaj. w3. Or g/1999 xht IrII z,&

53、gt;<head><ti"C無(wú)標(biāo)題頁(yè) <tile><hcal><body><script type="tcxt/javasCriPtdocumentwrite("HelIo world!");<scrt><body><btml>1）變化一：整體移動(dòng)SCriPt標(biāo)簽到head標(biāo)簽內(nèi)，測(cè)試網(wǎng)頁(yè)預(yù)覽效果2）變化二：在body與head標(biāo)簽中都放 SCriPt標(biāo)簽，測(cè)試網(wǎng)頁(yè)預(yù)覽效果3）變化三：僅留head內(nèi)的代碼，并將輸岀語(yǔ)句用函數(shù)包裝，測(cè)試網(wǎng)頁(yè)預(yù)覽效果4）變化四：在body內(nèi)添加函數(shù)的調(diào)用語(yǔ)句，測(cè)試網(wǎng)頁(yè)預(yù)覽效果5）小結(jié)a）JaVaSCriPt代碼可以嵌套在網(wǎng)頁(yè)的HTML標(biāo)簽中運(yùn)行,但是必須使用SCriPl 標(biāo)簽包裝b）JaVaSCriPt代碼可以在網(wǎng)頁(yè)的不同位置出現(xiàn)C） JaVaSCriPt代碼可以在網(wǎng)頁(yè)中出現(xiàn)多次d）函數(shù)是不能夠直接被