“主題網(wǎng)站設(shè)計(jì)”教學(xué)設(shè)計(jì)

1、主題網(wǎng)站設(shè)計(jì)教學(xué)設(shè)計(jì)一 教材分析本節(jié)內(nèi)容是網(wǎng)絡(luò)技術(shù)應(yīng)用教材第四章“建立主題網(wǎng)站”第二節(jié)的教學(xué)內(nèi)容，在前面已經(jīng)規(guī)劃好制作網(wǎng)站的需求分析、網(wǎng)站主題、網(wǎng)站名稱以及制作工具的基礎(chǔ)上，學(xué)習(xí)如何對主題網(wǎng)站進(jìn)一步進(jìn)行設(shè)計(jì)，是一項(xiàng)關(guān)于網(wǎng)站建設(shè)的關(guān)鍵步驟。通過這一小節(jié)，讓學(xué)生領(lǐng)悟到詳細(xì)規(guī)劃網(wǎng)站將使今后的網(wǎng)站建設(shè)有“軌”可循，既提高了效率，節(jié)約了時(shí)間，又有利于規(guī)范網(wǎng)站的總體布局，統(tǒng)一網(wǎng)頁的風(fēng)格，為創(chuàng)建一個(gè)風(fēng)格獨(dú)特的個(gè)人網(wǎng)站打下基礎(chǔ)。二 教學(xué)目標(biāo)1 知識目標(biāo)：（1）通過瀏覽網(wǎng)站，了解欄目的一般設(shè)置情況（2）了解版面的一般結(jié)構(gòu)，并能總結(jié)出版面設(shè)計(jì)常見的布局樣式（3）通過觀摩和模仿，分析和總結(jié)出樹立網(wǎng)站整體風(fēng)格的幾大要

2、素2 技能目標(biāo)：（1）依據(jù)主題，能夠設(shè)計(jì)網(wǎng)站的欄目和結(jié)構(gòu)（2）運(yùn)用網(wǎng)絡(luò)平臺，搜集網(wǎng)站所需要的素材，并能夠根據(jù)主題的實(shí)際需要，進(jìn)行合理的修改3 情感目標(biāo)（1）通過小組為單位的學(xué)習(xí)討論，培養(yǎng)學(xué)生小組合作意識（2）在使用網(wǎng)絡(luò)素材的過程中，引導(dǎo)和培養(yǎng)學(xué)生關(guān)注知識產(chǎn)權(quán)保護(hù)的意識（3）能過本節(jié)內(nèi)容的學(xué)習(xí)，讓學(xué)生意識到網(wǎng)站建設(shè)過程中規(guī)劃的重要性，節(jié)約時(shí)效，規(guī)范布局，為打造自己風(fēng)格獨(dú)特的網(wǎng)站亢實(shí)基礎(chǔ)。三 教學(xué)重點(diǎn)、難點(diǎn)重點(diǎn)：明確網(wǎng)站設(shè)計(jì)的一般步驟（欄目設(shè)置版面設(shè)計(jì)樹立網(wǎng)站整體風(fēng)格收集素材）難點(diǎn)：理解網(wǎng)站設(shè)計(jì)的一般步驟并進(jìn)行設(shè)計(jì)四 教學(xué)準(zhǔn)備1 選取一些有特色的網(wǎng)站，供學(xué)生瀏覽2 學(xué)生以小組為單位，確立自己小組網(wǎng)

3、站的主題3 配置好網(wǎng)絡(luò)教室五 教學(xué)過程教學(xué)環(huán)節(jié)具體內(nèi)容師生活動(dòng)導(dǎo)入教師任務(wù)：打開“麥當(dāng)勞”的官方網(wǎng)站，讓學(xué)生瀏覽并討論網(wǎng)站的結(jié)構(gòu)提問：這個(gè)網(wǎng)站給你的印象怎么樣？為什么？請你說說它的構(gòu)成。設(shè)計(jì)思路：學(xué)生應(yīng)該比較感興趣，畢竟麥當(dāng)勞學(xué)生非常熟悉的品牌和食物。網(wǎng)站的布局也很有特點(diǎn)，色彩明快，吸引力強(qiáng)。網(wǎng)站的構(gòu)成可以從顏色、導(dǎo)航欄的內(nèi)容、網(wǎng)站的結(jié)構(gòu)上來引導(dǎo)他們回答。教師打開導(dǎo)入網(wǎng)站并提問，學(xué)生回答教師總結(jié)學(xué)生的回答并引入今天主題上課過程一 欄目設(shè)置建設(shè)一個(gè)網(wǎng)站好比寫一篇文章，首先要擬好提綱，這樣文章才能主題明確、層次清晰。教師任務(wù)1：打開一些學(xué)生比較熟悉的網(wǎng)站首頁，給學(xué)生欣賞（例如：新浪、某企業(yè)的網(wǎng)站、

4、qq空間、學(xué)校的網(wǎng)站），分析一下從這些網(wǎng)站的導(dǎo)航欄中你能獲取哪些信息？提問1：分別講講以上瀏覽的這些網(wǎng)站的主題是什么？提問2：哪個(gè)網(wǎng)站的內(nèi)容最吸引你？為什么？教師總結(jié)：一般網(wǎng)站欄目安排要注意以下幾個(gè)方面1 要緊扣主題，盡可能刪除與主題無關(guān)的欄目。2 盡可能將網(wǎng)站最有吸引力的內(nèi)容列在欄目中。3 盡可能方便訪問者的瀏覽和查詢。設(shè)計(jì)思路：讓學(xué)生瀏覽不同的網(wǎng)站，進(jìn)行比較，通過提問引導(dǎo)學(xué)生關(guān)注網(wǎng)站的欄目設(shè)置。教師任務(wù)2：請同學(xué)以小組為單位，將你們小組的主題網(wǎng)站所要表達(dá)的內(nèi)容羅列出來，設(shè)計(jì)四到五個(gè)導(dǎo)航標(biāo)題，填入學(xué)案表練習(xí)1中。設(shè)計(jì)思路：培養(yǎng)學(xué)生小組協(xié)作能力，展開頭腦風(fēng)暴，為主題網(wǎng)站設(shè)置欄目。教師任務(wù)3：通

5、過隨機(jī)抽取的方式，選擇二個(gè)小組的作品展示一下，供其他小組討論，并再次完善自己小組的作品。設(shè)計(jì)思路：讓學(xué)生互相學(xué)習(xí)，汲取其他小組的優(yōu)點(diǎn)，完善自己的欄目。二 版面設(shè)計(jì)大家上網(wǎng)，會(huì)有大量的網(wǎng)頁掠過我們的眼簾，但是能夠吸引我們眼球的只有那些有特色的網(wǎng)頁。究其原因，站點(diǎn)內(nèi)容是否豐富是其中一個(gè)方面，而網(wǎng)頁的版面設(shè)計(jì)是否精美也是重要的因素之一。教師任務(wù)1：選取前面學(xué)生瀏覽的網(wǎng)站首頁再次打開（例如：新浪、某企業(yè)的網(wǎng)站、qq空間、學(xué)校的網(wǎng)站、“麥當(dāng)勞”官網(wǎng)），請同學(xué)們參考課本p83表4-11分析一下這些網(wǎng)頁的布局結(jié)構(gòu)。（有“廠”字型、“口”字型、自由式）設(shè)計(jì)思路：這一部分略講，因?yàn)椴季质菚现苯咏o出的，任務(wù)是讓

6、學(xué)生結(jié)合課本上的知識自已分析出以上網(wǎng)站的布局，把書本上的內(nèi)容轉(zhuǎn)化為自己學(xué)到的知識。教師任務(wù)2：常見的頁面布局樣式就是課本上總結(jié)的三種樣式，我們來分析一下，這些布局樣式比較適合哪些類型的網(wǎng)站？請同學(xué)們談?wù)勀愕恼J(rèn)識。設(shè)計(jì)思路：進(jìn)一步讓學(xué)生分析不同的網(wǎng)頁布局的特點(diǎn)，將知識點(diǎn)不斷咀嚼，深入學(xué)生的心中。教師總結(jié)：大家在進(jìn)行版面設(shè)計(jì)的時(shí)候，要根據(jù)自己設(shè)計(jì)的主題來看，如果將來設(shè)計(jì)一個(gè)大型綜合類的網(wǎng)站，信息量比較大的話，“廠”字型和“口”字型的結(jié)構(gòu)非常實(shí)用，例如新浪、網(wǎng)易等大型綜合性的網(wǎng)站。如果是比較私人的，內(nèi)容比較時(shí)尚的主題，可以采用自由式。當(dāng)然，如果為了吸引更多的用戶來瀏覽你的網(wǎng)站，你可以先制作一個(gè)新穎獨(dú)

7、特的自由式頁面來吸引用戶點(diǎn)擊進(jìn)入，在接下來的頁面中再進(jìn)行“廠”、“口”字型的頁面設(shè)計(jì)。教師任務(wù)3：根據(jù)小組的主題網(wǎng)站的內(nèi)容和欄目結(jié)構(gòu)，每人制作一個(gè)版面布局圖，再選出最佳方案。（完成練習(xí)2）設(shè)計(jì)思路：每個(gè)同學(xué)都有自己的創(chuàng)意，所以這一部分讓每一個(gè)人都動(dòng)手創(chuàng)作，再結(jié)合小組的意見加以投票，選舉出大家都滿意的方案。這其中肯定會(huì)有不同意見，此時(shí)就培養(yǎng)同學(xué)們的小組意識，組長的協(xié)調(diào)能力。三 樹立網(wǎng)站整體風(fēng)格在瀏覽網(wǎng)站的時(shí)候，我們會(huì)發(fā)現(xiàn)較好的網(wǎng)站往往都有其獨(dú)特的風(fēng)格，有粗獷豪放的，有清新秀麗的，有溫文爾雅的，還有執(zhí)著熱情的。那么這些風(fēng)格有哪些來決定呢？教師任務(wù)1：把上課導(dǎo)入時(shí)的“麥當(dāng)勞”官網(wǎng)打開，再打開光盤中學(xué)

8、生的作品（比較簡單，主要是要形成對比），請同學(xué)們談?wù)?，哪個(gè)網(wǎng)站最吸引你？為什么？設(shè)計(jì)思路：一個(gè)是大品牌“麥當(dāng)勞”，一個(gè)同學(xué)自己做的比較簡單的網(wǎng)頁，形成強(qiáng)烈的對比，讓學(xué)生意識到網(wǎng)站風(fēng)格的重要性。教師任務(wù)2：給同學(xué)做一個(gè)關(guān)于色彩的心理測試。（紅色代表熱情、黃色代表青春和活力、藍(lán)色代表沉穩(wěn)、紫色代表神秘、灰色代表憂郁）。教師總結(jié)：這個(gè)網(wǎng)站的背景色是紅色，給人以熱情的感覺，首先人看到之后，心理上就覺得非常喜歡；再者，頁面上有大家非常熟悉的“m”的符號，給人以親切；另外，黃色的導(dǎo)航欄文字圖標(biāo)也非常精致，大家也非常喜歡。我們把這三個(gè)要素總結(jié)出來：1 網(wǎng)站標(biāo)志“m”符號標(biāo)志可以是中文、英文字母，可以是符號、

9、圖案，可以是動(dòng)物或人物等。一般我們選擇與網(wǎng)站主題相關(guān)的，有代表性的人、物或圖標(biāo)。2 標(biāo)準(zhǔn)色彩紅色+黃色網(wǎng)站的標(biāo)志、標(biāo)題、主菜單和主色塊文字的鏈接色彩盡量使用標(biāo)準(zhǔn)色彩；圖片的主色彩、背景色、邊框等盡量使用標(biāo)準(zhǔn)色彩同色系的色彩，這樣給人以整體統(tǒng)一的感覺。一般來說，一個(gè)網(wǎng)站的標(biāo)準(zhǔn)色彩不超過3種。3 標(biāo)準(zhǔn)字體字體可愛與標(biāo)準(zhǔn)色彩一樣，標(biāo)準(zhǔn)字體是指用于標(biāo)志、標(biāo)題、主菜單的特有字體，一般網(wǎng)頁默認(rèn)的字體是宋體，當(dāng)然為了體現(xiàn)站點(diǎn)的“與眾不同”和特有風(fēng)格，我們可以根據(jù)需要選擇一些特別的字體。設(shè)計(jì)思路：通過心理測驗(yàn)，激發(fā)學(xué)生的興趣，并通過相對權(quán)威的總結(jié)讓學(xué)生意識到色彩等相關(guān)內(nèi)容在網(wǎng)站風(fēng)格建立過程中的重大意義。教師任

10、務(wù)3：對光盤中一些學(xué)生網(wǎng)站作品，請按照標(biāo)志、色彩和字體這三部分的設(shè)計(jì)評價(jià)指標(biāo)，對這些網(wǎng)站的整體風(fēng)格進(jìn)行評價(jià)。設(shè)計(jì)思路：讓學(xué)生參與到網(wǎng)站風(fēng)格建立的過程中來，先從評價(jià)他人網(wǎng)站開始，在評價(jià)的過程中吸取經(jīng)驗(yàn)，為自己創(chuàng)作奠定基礎(chǔ)。教學(xué)任務(wù)4：以小組為單位，對小組的主題網(wǎng)站標(biāo)志、主要色彩、字體進(jìn)行討論，完成學(xué)案練習(xí)3。設(shè)計(jì)思路：讓學(xué)生自己樹立主題網(wǎng)站的風(fēng)格，有一定的思路，為后面的實(shí)踐創(chuàng)作做好準(zhǔn)備。四 收集素材選定了主題和欄目，接下來就該準(zhǔn)備網(wǎng)頁素材了。建設(shè)一個(gè)主題網(wǎng)站，需要我們廣泛地收集素材。教師任務(wù)1：以小組為單位，對主題網(wǎng)站的素材收集進(jìn)行分工，完成學(xué)案練習(xí)4。具體的收集工作，作為家庭作業(yè)回家完成。設(shè)計(jì)

11、思路：收集素材是一個(gè)大工程，讓小組成員分工合作一是為了分擔(dān)大家的工作壓力，二是培養(yǎng)小組成員的協(xié)作意識，希望大家以小組為單位，把主題網(wǎng)站看成大家的任務(wù)，減少并消除自我意識。教師打開網(wǎng)站，供學(xué)生欣賞并提出相關(guān)問題，引導(dǎo)學(xué)生思考學(xué)生回答教師總結(jié)欄目設(shè)置的注意點(diǎn)教師布置實(shí)踐任務(wù)，并選取展示學(xué)生小組實(shí)踐教師要求學(xué)生根據(jù)課本的提示，分析所給網(wǎng)站的結(jié)構(gòu)和試用情況學(xué)生回答教師總結(jié)布置實(shí)踐任務(wù)學(xué)生小組實(shí)踐教師打開兩個(gè)網(wǎng)站，讓學(xué)生進(jìn)行對比教師通過一個(gè)心理測試，總結(jié)樹立網(wǎng)站整體形象的三大要素教師讓學(xué)生評價(jià)作品學(xué)生小組實(shí)踐學(xué)生小組分工作業(yè)收集網(wǎng)站素材布置作業(yè)六 教學(xué)反思本節(jié)課主要采用多媒體網(wǎng)絡(luò)的教學(xué)方式，一開始從學(xué)生非常熟悉和感興趣的“麥當(dāng)勞”的網(wǎng)站引入，讓學(xué)生通過分析切入今天的課堂主題，再依次從網(wǎng)站設(shè)計(jì)的四個(gè)步驟：欄目設(shè)置、版面設(shè)計(jì)、樹立網(wǎng)站整體風(fēng)格、收集素材一步步地分析和實(shí)踐，讓學(xué)生在瀏覽、學(xué)習(xí)、討論、實(shí)踐中收獲。教師不斷以提問的方式來引導(dǎo)學(xué)生思考，充分調(diào)動(dòng)學(xué)生的積極性和主動(dòng)性。附：主題網(wǎng)站設(shè)計(jì)學(xué)案一根據(jù)小組的網(wǎng)站主題和內(nèi)容，對網(wǎng)站的欄目進(jìn)行設(shè)計(jì)，并簡單描述每個(gè)欄目的主要內(nèi)容，填入下表本小組的