《主題網站設計》教學設計

《主題網站設計》教學設計
常州劉國鈞高等職業技術學校（綜合高中） 沈茹
教材分析
 本節內容是《網絡技術應用》教材第四章“建立主題網站”第二節的教學內容，在前面已經規劃好制作網站的需求分析、網站主題、網站名稱以及制作工具的基礎上，學習如何對主題網站進一步進行設計，是一項關于網站建設的關鍵步驟。通過這一小節，讓學生領悟到詳細規劃網站將使今后的網站建設有“軌”可循，既提高了效率，節約了時間，又有利于規范網站的總體布局，統一網頁的風格，為創建一個風格獨特的個人網站打下基礎。
教學目標
 知識目標：
（1）通過瀏覽網站，了解欄目的一般設置情況
（2）了解版面的一般結構，并能總結出版面設計常見的布局樣式
（3）通過觀摩和模仿，分析和總結出樹立網站整體風格的幾大要素
 技能目標：
（1）依據主題，能夠設計網站的欄目和結構
（2）運用網絡平臺，搜集網站所需要的素材，并能夠根據主題的實際需要，進行合理的修改
 情感目標
（1）通過小組為單位的學習討論，培養學生小組合作意識
（2）在使用網絡素材的過程中，引導和培養學生關注知識產權保護的意識
（3）能過本節內容的學習，讓學生意識到網站建設過程中規劃的重要性，節約時效，規范布局，為打造自己風格獨特的網站亢實基礎。
教學重點、難點
重點：明確網站設計的一般步驟（欄目設置——版面設計——樹立網站整體風格——收集素材）
難點：理解網站設計的一般步驟并進行設計
教學準備
 選取一些有特色的網站，供學生瀏覽
 學生以小組為單位，確立自己小組網站的主題
 配置好網絡教室
教學過程
教學環節 具體內容 師生活動
導入 教師任務：打開“麥當勞”的官方網站，讓學生瀏覽并討論網站的結構
提問：這個網站給你的印象怎么樣？為什么？請你說說它的構成。
設計思路：學生應該比較感興趣，畢竟麥當勞學生非常熟悉的品牌和食物。網站的布局也很有特點，色彩明快，吸引力強。網站的構成可以從顏色、導航欄的內容、網站的結構上來引導他們回答。 教師打開導入網站并提問，學生回答

教師總結學生的回答并引入今天主題
上課過程  欄目設置
 建設一個網站好比寫一篇文章，首先要擬好提綱，這樣文章才能主題明確、層次清晰。
教師任務1：打開一些學生比較熟悉的網站首頁，給學生欣賞（例如：新浪、某企業的網站、QQ空間、學校的網站），分析一下從這些網站的導航欄中你能獲取哪些信息？
提問1：分別講講以上瀏覽的這些網站的主題是什么？
提問2：哪個網站的內容最吸引你？為什么？
教師總結：一般網站欄目安排要注意以下幾個方面
要緊扣主題，盡可能刪除與主題無關的欄目。
盡可能將網站最有吸引力的內容列在欄目中。
盡可能方便訪問者的瀏覽和查詢。
設計思路：讓學生瀏覽不同的網站，進行比較，通過提問引導學生關注網站的欄目設置。

教師任務2：請同學以小組為單位，將你們小組的主題網站所要表達的內容羅列出來，設計四到五個導航標題，填入學案表練習1中。
設計思路：培養學生小組協作能力，展開頭腦風暴，為主題網站設置欄目。

教師任務3：通過隨機抽取的方式，選擇二個小組的作品展示一下，供其他小組討論，并再次完善自己小組的作品。
設計思路：讓學生互相學習，汲取其他小組的優點，完善自己的欄目。

 版面設計
 大家上網，會有大量的網頁掠過我們的眼簾，但是能夠吸引我們眼球的只有那些有特色的網頁。究其原因，站點內容是否豐富是其中一個方面，而網頁的版面設計是否精美也是重要的因素之一。
教師任務1：選取前面學生瀏覽的網站首頁再次打開（例如：新浪、某企業的網站、QQ空間、學校的網站、“麥當勞”官網），請同學們參考課本P83表4-11分析一下這些網頁的布局結構。（有“廠”字型、“口”字型、自由式）
設計思路：這一部分略講，因為布局是書上直接給出的，任務是讓學生結合課本上的知識自已分析出以上網站的布局，把書本上的內容轉化為自己學到的知識。

教師任務2：常見的頁面布局樣式就是課本上總結的三種樣式，我們來分析一下，這些布局樣式比較適合哪些類型的網站？請同學們談談你的認識。
設計思路：進一步讓學生分析不同的網頁布局的特點，將知識點不斷咀嚼，深入學生的心中。
教師總結：大家在進行版面設計的時候，要根據自己設計的主題來看，如果將來設計一個大型綜合類的網站，信息量比較大的話，“廠”字型和“口”字型的結構非常實用，例如新浪、網易等大型綜合性的網站。如果是比較私人的，內容比較時尚的主題，可以采用自由式。當然，如果為了吸引更多的用戶來瀏覽你的網站，你可以先制作一個新穎獨特的自由式頁面來吸引用戶點擊進入，在接下來的頁面中再進行“廠”、“口”字型的頁面設計。

教師任務3：根據小組的主題網站的內容和欄目結構，每人制作一個版面布局圖，再選出最佳方案。（完成練習2）
設計思路：每個同學都有自己的創意，所以這一部分讓每一個人都動手創作，再結合小組的意見加以投票，選舉出大家都滿意的方案。這其中肯定會有不同意見，此時就培養同學們的小組意識，組長的協調能力。

 樹立網站整體風格
 在瀏覽網站的時候，我們會發現較好的網站往往都有其獨特的風格，有粗獷豪放的，有清新秀麗的，有溫文爾雅的，還有執著熱情的。那么這些風格有哪些來決定呢？
教師任務1：把上課導入時的“麥當勞”官網打開，再打開光盤中學生的作品（比較簡單，主要是要形成對比），請同學們談談，哪個網站最吸引你？為什么？
設計思路：一個是大品牌“麥當勞”，一個同學自己做的比較簡單的網頁，形成強烈的對比，讓學生意識到網站風格的重要性。

教師任務2：給同學做一個關于色彩的心理測試。（紅色代表熱情、黃色代表青春和活力、藍色代表沉穩、紫色代表神秘、灰色代表憂郁）。
教師總結：這個網站的背景色是紅色，給人以熱情的感覺，首先人看到之后，心理上就覺得非常喜歡；再者，頁面上有大家非常熟悉的“M”的符號，給人以親切；另外，黃色的導航欄文字圖標也非常精致，大家也非常喜歡。我們把這三個要素總結出來：
網站標志——“M”符號
標志可以是中文、英文字母，可以是符號、圖案，可以是動物或人物等。一般我們選擇與網站主題相關的，有代表性的人、物或圖標。
標準色彩——紅色+黃色
網站的標志、標題、主菜單和主色塊文字的鏈接色彩盡量使用標準色彩；圖片的主色彩、背景色、邊框等盡量使用標準色彩同色系的色彩，這樣給人以整體統一的感覺。一般來說，一個網站的標準色彩不超過3種。
標準字體——字體可愛
與標準色彩一樣，標準字體是指用于標志、標題、主菜單的特有字體，一般網頁默認的字體是宋體，當然為了體現站點的“與眾不同”和特有風格，我們可以根據需要選擇一些特別的字體。
設計思路：通過心理測驗，激發學生的興趣，并通過相對權威的總結讓學生意識到色彩等相關內容在網站風格建立過程中的重大意義。

教師任務3：對光盤中一些學生網站作品，請按照標志、色彩和字體這三部分的設計評價指標，對這些網站的整體風格進行評價。
設計思路：讓學生參與到網站風格建立的過程中來，先從評價他人網站開始，在評價的過程中吸取經驗，為自己創作奠定基礎。

教學任務4：以小組為單位，對小組的主題網站標志、主要色彩、字體進行討論，完成學案練習3。
設計思路：讓學生自己樹立主題網站的風格，有一定的思路，為后面的實踐創作做好準備。

 收集素材
選定了主題和欄目，接下來就該準備網頁素材了。建設一個主題網站，需要我們廣泛地收集素材。
教師任務1：以小組為單位，對主題網站的素材收集進行分工，完成學案練習4。具體的收集工作，作為家庭作業回家完成。
設計思路：收集素材是一個大工程，讓小組成員分工合作一是為了分擔大家的工作壓力，二是培養小組成員的協作意識，希望大家以小組為單位，把主題網站看成大家的任務，減少并消除自我意識。 本論文由論文格式網整理,轉載請注明來源www.donglienglish.cn,更多論文,請點論文格式范文查看

教師打開網站，供學生欣賞并提出相關問題，引導學生思考

學生回答
教師總結欄目設置的注意點

教師布置實踐任務，并選取展示

學生小組實踐

教師要求學生根據課本的提示，分析所給網站的結構和試用情況

學生回答

教師總結布置實踐任務
學生小組實踐

教師打開兩個網站，讓學生進行對比

教師通過一個心理測試，總結樹立網站整體形象的三大要素

學生小組分工
作業 收集網站素材 布置作業
教學反思
 本節課主要采用多媒體網絡的教學方式，一開始從學生非常熟悉和感興趣的“麥當勞”的網站引入，讓學生通過分析切入今天的課堂主題，再依次從網站設計的四個步驟：欄目設置、版面設計、樹立網站整體風格、收集素材一步步地分析和實踐，讓學生在瀏覽、學習、討論、實踐中收獲。教師不斷以提問的方式來引導學生思考，充分調動學生的積極性和主動性。

附：
《主題網站設計》學案
一．根據小組的網站主題和內容，對網站的欄目進行設計，并簡單描述每個欄目的主要內容，填入下表本小組的欄目劃分情況
欄目名稱 子欄目名稱 內容描述
  
二．根據小組主題網站的內容和欄目結構，每人繪制一個版面布局圖，經過小組討論，選出最佳方案

三．以小組為單位，對小組的主題網站標志、主要色彩、字體進行討論，設計。
網站標志 文字類 / 字母類 / 圖標類
主要色彩 填寫顏色
標準字體 字體設置
四．以小組為單位，對主題網站的素材收集進行分工
文字類 學生姓名
圖片類 學生姓名
多媒體動畫類 學生姓名
其它 學生姓名