4.2網(wǎng)站設(shè)計(jì)教學(xué)設(shè)計(jì)20232024學(xué)年教科版高中信息技術(shù)選修3

4.2網(wǎng)站設(shè)計(jì)一、教材分析《網(wǎng)站設(shè)計(jì)》是教育科學(xué)出版社《網(wǎng)絡(luò)技術(shù)應(yīng)用》第四章第二節(jié)的內(nèi)容，本節(jié)主要是網(wǎng)站建設(shè)的關(guān)鍵步驟應(yīng)使在學(xué)生認(rèn)識到在網(wǎng)站建設(shè)中設(shè)計(jì)的重要性。本節(jié)課主要任務(wù)是讓學(xué)生了解網(wǎng)站設(shè)計(jì)的幾個(gè)環(huán)節(jié)，并設(shè)計(jì)自己的網(wǎng)站。為了讓學(xué)生能夠?qū)W以致用，本節(jié)課在知識點(diǎn)講解完后，設(shè)計(jì)了活動實(shí)踐環(huán)節(jié)，以小組為單位，各個(gè)小組成員共同探討確定各自小組的網(wǎng)站主題，網(wǎng)站名稱以及網(wǎng)站主要欄目。學(xué)以致用才能讓學(xué)生真正理解網(wǎng)站的設(shè)計(jì)過程。二、學(xué)情分析通過上節(jié)課的學(xué)習(xí)，學(xué)生已經(jīng)知道了網(wǎng)站的概念，通過上節(jié)課分小組進(jìn)行網(wǎng)站的規(guī)劃，已經(jīng)明確了一個(gè)網(wǎng)站的需求和主題，確定了網(wǎng)站制作工具，這節(jié)課則是在學(xué)生已經(jīng)準(zhǔn)備的基礎(chǔ)上，對自己小組的網(wǎng)站做進(jìn)一步的設(shè)計(jì)，包括欄目的設(shè)置以及版面設(shè)計(jì)，確定風(fēng)格，這些屬于線下的實(shí)踐活動，學(xué)生不需要太多專業(yè)的知識準(zhǔn)備，最后是收集素材，這屬于線上活動，需要學(xué)生具備一些快速篩選檢索結(jié)果，得到自己的需要的素材的能力。鑒于此，小組合作是最好的選擇，降低學(xué)生的操作難度。三、教學(xué)目標(biāo)1.知識與技能：讓學(xué)生了解網(wǎng)站建設(shè)中欄目設(shè)置與版面設(shè)計(jì)的重要性；讓學(xué)生體驗(yàn)網(wǎng)站建設(shè)的具體事務(wù)，使學(xué)生學(xué)會設(shè)計(jì)、構(gòu)思一個(gè)網(wǎng)站。2.過程與方法：通過自主、獨(dú)立、合作的學(xué)習(xí)過程，增加了學(xué)生間的溝通和交流，提高口頭交際能力。3.情感態(tài)度與價(jià)值觀：通過對一些問題的討論、探究、交流，提高學(xué)生分析問題、解決問題、個(gè)性化創(chuàng)造的能力，提升審美觀。四、教學(xué)重難點(diǎn)重點(diǎn)：讓學(xué)生了解了解欄目設(shè)置與版面設(shè)計(jì)的重要性難點(diǎn)：依據(jù)主題，設(shè)計(jì)網(wǎng)站的欄目和結(jié)構(gòu)五、教學(xué)法設(shè)計(jì)小組合作、實(shí)踐練習(xí)、反思總結(jié)。六、教學(xué)過程教學(xué)環(huán)節(jié)教師活動學(xué)生活動教學(xué)媒體資源設(shè)計(jì)意圖情景引入我們經(jīng)常會被一些內(nèi)容豐富、創(chuàng)意新穎、設(shè)計(jì)獨(dú)特的網(wǎng)站所吸引，下面我們一起欣賞幾張網(wǎng)頁，并思考：這些網(wǎng)頁做得怎么樣？思考問題：請同學(xué)們回憶出黑板報(bào)的一般過程。學(xué)生閱覽事先準(zhǔn)備好的優(yōu)秀的好的網(wǎng)頁。欣賞，交流回答。思考問題并回答。多媒體設(shè)備引起注意，激發(fā)學(xué)習(xí)興趣自主學(xué)習(xí)一、網(wǎng)站設(shè)計(jì)的一般過程總結(jié)：在制作網(wǎng)頁前，同樣需要對整個(gè)網(wǎng)站進(jìn)行設(shè)計(jì)。聽完學(xué)生的講解后，課件展示網(wǎng)站設(shè)計(jì)的一般過程介紹：

1、確定主題2、欄目設(shè)置3、版面設(shè)計(jì)4、樹立網(wǎng)站整體風(fēng)格5、素材的收集與整理自主閱讀可本，總結(jié)網(wǎng)站設(shè)計(jì)的一般過程，并在文中勾畫出來。抽幾位學(xué)生展示自己的學(xué)習(xí)成果。多媒體設(shè)備。理論上的知識，學(xué)生自己能看得懂，教師只需引導(dǎo)學(xué)生把課本知識學(xué)習(xí)即可。自主學(xué)習(xí)問題探究二、欄目設(shè)置（1）什么是欄目，它在網(wǎng)站設(shè)計(jì)中的作用是什么？（2）網(wǎng)站欄目安排要注意哪些問題？課件展示：欄目設(shè)置注意的問題：1）要緊扣主題，盡可能刪除與主題無關(guān)的欄目；2）盡可能將網(wǎng)站最有吸引力的內(nèi)容列到欄目中；3）盡可能方便訪問者的瀏覽和查詢。2、欣賞例1【課件展示】“為了綠色”網(wǎng)站的欄目設(shè)置例2【課件展示】“我們的家園——地球”網(wǎng)站的欄目設(shè)置學(xué)生閱讀教材P81并思考給出的問題。多媒體設(shè)備，ppt。通過復(fù)習(xí)加深學(xué)學(xué)生對網(wǎng)頁的印象，為網(wǎng)頁制作奠定基礎(chǔ)。實(shí)踐探究三、實(shí)踐探究主題：網(wǎng)站設(shè)計(jì)

（事先會給出任務(wù)單）以小組合作的形式進(jìn)行本項(xiàng)實(shí)踐體驗(yàn)活動。

小組中的每位同學(xué)經(jīng)過討論、交流，填寫以下內(nèi)容

1、網(wǎng)站主題：

2、網(wǎng)站名稱：

3、網(wǎng)站主要欄目：

欄目名稱本欄目主要內(nèi)容要求：

1、主題明確，內(nèi)容健康向上，能科學(xué)、完整地表達(dá)主題思想

2、欄目設(shè)置能緊扣主題，切合作者的學(xué)習(xí)和生活實(shí)際

3、主題表達(dá)形式新穎、直接

以小組合作的形式進(jìn)行本項(xiàng)實(shí)踐體驗(yàn)活動。根據(jù)以前所選擇的主題，小組中的每位同學(xué)經(jīng)過討論、交流，填寫表格內(nèi)容。

多媒體設(shè)備（提供練習(xí)學(xué)案）培養(yǎng)學(xué)生實(shí)踐探究、合作學(xué)習(xí)的能力。自主學(xué)習(xí)四、版面設(shè)計(jì)【過渡】我們網(wǎng)站的主題，欄目確定后，

內(nèi)容也就確定了，每部分的內(nèi)容應(yīng)該

放在網(wǎng)頁的什么位置呢？

這就涉及到網(wǎng)站的版面布局這個(gè)問

題了。提出問題：（1）版面設(shè)計(jì)需要考慮哪些因素？（2）版面布局可按哪三個(gè)步驟來進(jìn)行？（教師補(bǔ)充總結(jié)）網(wǎng)頁布局三步驟：創(chuàng)意草案、粗略布局、最后定案。2、（課件展示）給學(xué)生欣賞幾種常見的頁面布局樣式（1）“廠”字型（2）“口”字型（3）自由式，又稱POP布局3、學(xué)生完成“網(wǎng)站設(shè)計(jì)活動任務(wù)單”中的第四項(xiàng)。自主學(xué)習(xí)生閱讀教材P8384，并思考提出的問題。回答自己的學(xué)習(xí)成果。欣賞頁面，體會幾種常見的版面布局樣式各自的優(yōu)缺點(diǎn)。感受三中布局方式的美，選擇適合的布局方式。提升學(xué)生的成就感。提高學(xué)生學(xué)習(xí)積極性。自主學(xué)習(xí)五、樹立網(wǎng)站整體風(fēng)格1、自主學(xué)習(xí)：閱讀教材P8487并思考：（1）色彩總的原則是？（2）樹立一個(gè)網(wǎng)站整體形象的關(guān)鍵是？2、什么是風(fēng)格風(fēng)格是指網(wǎng)站的整體形象給瀏覽者的綜合感受?；驀?yán)肅莊重，或清爽溫馨，或深沉厚重，或生動活潑，或古樸典雅，或豪邁奔放。風(fēng)格的設(shè)計(jì)與主題是密不可分的，是為突出主題服務(wù)的。3、設(shè)計(jì)、制作一個(gè)網(wǎng)站標(biāo)志（logo）Logo欣賞4、設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)顏色欣賞不同顏色的作用5、設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體6、學(xué)生完成“網(wǎng)站設(shè)計(jì)活動任務(wù)單”中的第五項(xiàng)。閱讀思考閱讀回答問題多媒體設(shè)備（展示ppt）引導(dǎo)學(xué)生對本節(jié)課的內(nèi)容進(jìn)行小結(jié)并讓學(xué)生知道HTML語法重要性。任務(wù)驅(qū)動六、收集素材【課件展示】收集素材注意事項(xiàng)思考：在收集素材過程中，如何避免侵犯別人的版權(quán)？進(jìn)行法制教育。完成“網(wǎng)站設(shè)計(jì)”活動任務(wù)單五、設(shè)置網(wǎng)站整體風(fēng)格你選用的網(wǎng)站標(biāo)準(zhǔn)色彩是集體分工行動，收集不同的素材，歸納整理素材，為網(wǎng)站的實(shí)現(xiàn)做準(zhǔn)備。多媒體設(shè)備。設(shè)計(jì)收集素材的過程，為網(wǎng)站的實(shí)現(xiàn)做準(zhǔn)備。課堂總結(jié)引導(dǎo)學(xué)生復(fù)述頁面布局的一般過程；匯報(bào)每個(gè)小組的任務(wù)完成情況；讓學(xué)生談?wù)劚咎谜n的收獲。認(rèn)真回顧知識點(diǎn)；根據(jù)自己的學(xué)習(xí)情況和完成任務(wù)的情況坦言自己的想法。課件展示知識點(diǎn)。讓學(xué)生一步步形成自己的知識網(wǎng)絡(luò)，養(yǎng)成良好的復(fù)習(xí)習(xí)慣。七、教學(xué)反思 本節(jié)課主要是理論方面的知識，為了避免枯燥和乏味，在每個(gè)知識點(diǎn)的學(xué)習(xí)中我采用了以問題為導(dǎo)向的方法讓學(xué)生自主學(xué)習(xí)后，展示自己的學(xué)習(xí)成果，然后馬上展