1、第一單元網站設計與制作學案第1課創建站點本課學習目標：1、知識目標：了解網站規劃方法；認識Frontpage2000的工作界面；理解站點、網頁、主頁的概念。2、技能目標：學會規劃和設計網站；能夠搜集網站相關素材；學會新建和打開站點。3、情感、態度與價值觀目標：感受網站規劃的重要性，養成做事有計劃、勤思考的習慣。教學方法：自學法、演示法、觀察法、實踐法、小組合作。教學重點：網站規劃的一般步驟；Frongpage2000的站點管理。教學難點：網站規劃的一般步驟。學習時間：1課時。學習過程：引入課題：許多同學都有上網的經歷，那么什么是網站呢？網站：網站是在因特網上一個相對獨立的信息的集合，這些信息以

2、網頁的形式向全世界發布。因此，網站就是相關網頁的集合。學習與探究：一、他山之石，可以攻玉通過對“中國少年雛鷹網”與“聯想公司網站”首頁的比較，談談自己的感受，并說出它們之間有什么差異？二、網站規劃的一般步驟小組合作：閱讀本部分內容，總結網站規劃的一般步驟？常見的網頁版面布局形式有哪些？步驟：1、確定網站的主題和風格；2、設計規劃網站的結構和內容；3、設計網站的版面布局；（“T”型、“口”型、時尚型、“三”型布局）4、搜集整理網站素材；5、選擇網站制作工具(frontpage2000)。三、Frontpage2000的站點管理1、初識Frontpage根據打開程序的一般方法，自己試著打開Fron

3、tpage。并思考有沒有其它的打開方法。2、新建站點教師演示：“文件”-“新建”-“站點”，打開“新建”對話框。學生操作：（1）指定新站點的位置為“D：情感小屋”，并選擇站點類型為“只有一個網頁的站點”。（2）觀察界面發生了什么變化？在“文件夾列表”中自動生成了哪幾個文件或文件夾？它們有什么作用？3、打開站點“文件”-“打開站點”。四、實踐與創新的：1、訪問以下網站，描述它們各自的主題和風格，并畫出網站的結構圖和主頁的布局圖。 ./01/indes.html2、搜集整理關于贊美父母的詩句、文章、圖片或歌曲，分組合作設計“我的父母”網頁。（包括頁面結構、內容、版面布局、網頁的風格和內容

4、，通過表格的形式記錄下來）五、小結：網站規劃的一般步驟、Frontpage的站點管理六、教學反思：   第2課設計網站首頁本課學習目標：1、知識目標：認識網頁的工作原理；了解網頁編輯的一般過程。2、技能目標：學會在網頁中輸入文字、插入圖片和水平線；學會新建、預覽和保存網頁。3、情感、態度與價值觀目標：善于從身邊的廣告、書刊中學習版面設計知識，并學以致用。教學方法：自學法、演示法、觀察法、實踐法、小組合作。教學重點：在網頁中插入文字、圖片、水平線及網頁的保存、預覽。教學難點：在網頁中插入文字、圖片和水平線。學習時間：1課時。學習過程：引入課題：展示一個包含有文字、圖

5、片和水平線的網頁，并通過對這三部分的介紹激發學生的學習欲望。學習與探究：一、在網頁中輸入文字小組合作并操作：根據前面所學知識，即在WORD中輸入文字的操作，在“D：情感小屋”站點中，雙擊打開主頁文件“index.htm”，對照小宇在上節課中設計的首頁效果圖，在編輯窗口輸入相應文字，并按照圖例對這些文字進行修改字體、字號、顏色、對齊方式等操作。二、在網頁中插入圖片教師演示：“插入”-“圖片”-“來自文件”學生操作：在“Banner位置”處插入存放在“D：素材”中的Banner圖片，并對所插入的圖片進行大小調整。注：為便于上傳，網頁中圖片一般采用容量較小的格式，如JPEG、GIF、PNG等。三、在

6、網頁中插入水平線學生閱讀相關內容，試著自己在網頁中的標題與正文之間插入一條水平線，并設置“水平線屬性”。（教師巡回指導）四、保存網頁同WORD操作相似，并嘗試用不同的方法保存index.htm，考慮哪種方式更方便？試一試：將剛剛插入到網頁中的圖片指定保存位置為：本站點的“images”文件夾。五、預覽網頁方法一：利用FrontPage自帶的預覽功能;方法二：通過瀏覽器預覽。練一練：按照上面介紹的兩種方法預覽自己的網頁，分析它們各有什么優缺點？六、添加新網頁“文件”-“新建”-“網頁”七、實踐與創新：1、根據第1課的規劃，參照小宇設計的“我的父母”所示的界面，設計制作網頁“我的父母”，其文件名為

7、：Parents.htm，標題為“我的父母”。2、對新建的網頁進行預覽，并改變預覽窗口的大小，你會發現什么現象？有什么辦法可以解決這個問題？八、小結：在網頁中插入文字、圖片、水平線及網頁的保存、預覽，添加新網頁。九、課后反思：    第3課網頁中的表格本課學習目標：1、知識目標：理解表格在網頁設計中的重要作用。2、技能目標：學會使用表格布局網頁；靈活掌握表格調整的方法。3、情感、態度與價值觀目標：了解學校概貌，發現校園之美；養成良好的生活和學習習慣。教學方法：自學法、演示法、觀察法、實踐法、小組合作。教學重點：在網頁中插入表格及表格的調整。教學難點：在網

8、頁中插入表格及表格的調整。學習時間：1課時。學習過程：引入課題：通過對“某校園鳥瞰圖”與下載的“中學生作文網”的首頁作比較，引導學生發現網頁中表格的運用。學習與探究：一、表格的作用閱讀本部分內容，思考：在網頁中使用表格有何作用？表格可使網頁中的文字、圖片、動畫等素材排列整齊有序，并且不會因瀏覽窗口大小的改變而改變排列方式。二、在網頁中插入表格試一試：閱讀相關內容，試著在站點“情感小屋”中打開首頁文件Index.htm，分別插入四個表格，依次為：2*3、2*2、1*4和2*1，寬度都為780像素，水平居中。（教師巡回指導）三、表格的調整1、行高和列寬的調整方法一：手動操作 方法二：通過

9、單元格屬性或表格屬性調整2、單元格的合并和拆分教師演示：（1）選中想要合并或拆分的單元格；（2）單擊鼠標右鍵，在快捷菜單中選擇“合并單元格”或“拆分單元格”。3、插入或刪除表格中的行或列（1）選擇相應的行或列；（2）單擊鼠標右鍵，在快捷菜單中進行相應選擇。4、平均分布行和列（1）選擇需要平均分布的行或列；（2）單擊鼠標右鍵，在快捷菜單中進行相應選擇。練一練：參照“情感小屋”網站首頁布局的內容，調整前面插入的表格，并將在第1課中輸入的內容移到表格內。預覽網頁，測試調整效果。四、設計網頁模板教師操作：“文件”-“另存為”-選擇“Frontpage模板（*.tem）”，并命名模板文件名（如：“情感小

10、屋”）練一練：將網站首頁文件Index.htm存儲為網頁模板，命名為“我的模板”，然后以利用模板的方式新建一個網頁。五、實踐與創新：運用表格重新設計Parents.htm的網頁布局，預覽時改變瀏覽器窗口的大小，觀察網頁的布局是否會發生變化？這說明表格對于網頁內容還能起到什么作用？六、小結：在網頁中插入表格、表格的調整和網頁模板的設計。七、課后反思：    第4課網頁的美化本課學習目標：1、知識目標：了解美化網頁的常用方法，理解美化網頁對提高網站質量的作用。2、技能目標：學會在網頁中設置背景、音樂、FLASH動畫和滾動字幕。3、情感、態度與價值觀目標：提高

11、審美意識，善于發現美，美化生活從自身做起。教學方法：自學法、演示法、觀察法、實踐法、小組合作。教學重點：在網頁中設置背景、音樂、FLASH動畫和滾動字幕。教學難點：在網頁中設置背景、音樂、FLASH動畫和滾動字幕。學習時間：1課時。學習過程：引入課題：前面我們學習了網頁制作中最基本的文字、圖片、水平線的插入，并且還知道了怎樣使用表格使網頁中的內容排列的更整齊，層次更分明。這里同學們再考慮你更喜歡什么樣的網頁？學習與探究：一、設置網頁的背景學生活動：閱讀課文第一部分，并利用前面所學內容，給自己的網頁加上一個背景，使頁面更加美觀，更能襯托網頁的主題。（教師巡回指導）練一練：打開“情感小屋”站點，并

12、打開主頁文件Index.htm，在“網頁屬性”對話框“顏色”欄中設置文本和背景的顏色，并進行預覽。二、設置表格的背景比較：觀察兩幅電視背景墻效果圖，比較多色彩背景墻和單色背景墻哪種讓客廳更加充滿活力？通過比較，同學們知道了多色彩背景墻可以讓房間顯得更加生動活潑，在網頁中我們也可以通過設置表格或單元格的背景來達到局部色彩的變化，使網頁變得生動有活力。方法：將光標定位在某一單元格內，單擊鼠標右鍵，在快捷菜單中選擇“表格屬性”或“單元格屬性”分別進行設置。練一練：在你的網頁表格中，先后設置不同的背景顏色和背景圖片，體驗背景對網頁的美化作用。三、插入背景音樂學生活動：通過閱讀課文，小組合作，在“情感小

13、屋”站點中插入一個背景音樂。教師總結：在網頁中單擊右鍵，選擇“網頁屬性”命令，在對話框中進行設置。四、插入Flash動畫步驟：“插入”-“高級”-“插件”，在“插件屬性”對話框中進行設置。練一練：將光標定位在網頁的適當位置，選擇插入一個Flash動畫文件。反復修改對話框中各參數的值，體會不同參數值的不同效果。五、插入滾動字幕小組合作思考操作：怎樣可以讓你網頁中的文字或圖片動起來，使它們更加醒目呢？教師總結：“插入”-“組件”-“字幕”，在“字幕屬性”對話框中進行設置。練一練：將光標定位在輸入標題的單元格內，按照上述步驟進行插入字幕的操作。六、實踐與創新：運用本課所學知識，分別對以下三個網頁進行

14、美化。文件名要求參考樣圖School.htm設置網頁和表格背景第1課“網頁版面布局示意圖c ”Domain.htm添加滾動字幕“海內存知己，天涯若比鄰”；插入一個Flash動畫；設置純文字單元格的背景色。第1課“網頁版面布局示意圖d ”Neighbor.htm設置單元格背景；設置背景音樂第1課“網頁版面布局示意圖e ”一、本課小結：設置網頁背景、表格背景、插入背景音樂、Flash動畫及滾動字幕。課后反思：  第5課建立超鏈接本課學習目標：1、知識目標：理解超鏈接的概念，理解導航欄在網頁設計中的重要性。2、技能目標：學會在網頁中插入超鏈接和導航欄

15、；掌握將鏈接指向站點內、站點外和電子郵箱的方法。3、情感、態度與價值觀目標：體會萬物皆有聯系，互相影響，或此消彼長，或相互促進。教學方法：自學法、演示法、觀察法、實踐法、小組合作。教學重點：設置超鏈接和網站導航欄。教學難點：設置超鏈接和網站導航欄。學習時間：1課時。學習過程：引入課題：任何事物都不是獨立存在的，考慮你的周圍有哪些事物存在著一定的聯系？如：我與同桌是同學，我有老師，有父母學習與探究：一、設置超鏈接學生活動：閱讀課文第一部分，小組討論，完成以下問題：1、設置超鏈接的目的是什么？2、什么是超鏈接？3、超鏈接有哪幾種類型？教師總結：目的：使網頁之間形成一個緊密的整體，能夠很容易地從一個

16、網頁到達另一個網頁。定義：超鏈接是指從一個網頁指向一個目標的連接關系。類型：站點內的鏈接、到其他網站的鏈接、到郵箱的鏈接、書簽鏈接。步驟：“插入”-“超鏈接”。大顯身手：根據所閱讀內容，在“情感小屋”站點中，建立不同類型的鏈接。二、設置網站導航欄學生活動：閱讀課文第二部分，考慮1、為什么要設置網站導航欄？2、什么是導航欄？3、建立導航欄的方法有哪些？三、實踐與創新：1、在你的成長過程中，有多少人為你付出了艱辛的努力？回憶對你幫助較大的1-3人，然后通過書信、電子郵件、電話、QQ等通訊工具表達你的感激之情。2、網頁中的文字建立超鏈接后，會有什么變化？你能改變超鏈接文字的默認顏色嗎？四、展示學生作

17、品，查看鏈接是否正確。五、小結設置超鏈接、設置網站導航欄六、課后反思：     第6課網站的發布與維護本課學習目標：1、知識目標：理解網站空間的概念；了解網站上傳的原理。2、技能目標：掌握網站檢查和宣傳的方法；學會申請免費的主頁空間；熟練使用網站上偉的工具。3、情感、態度與價值觀目標：正確認識自己，誠實地與他人交流，學會展示自己真實的一面。教學方法：自學法、演示法、觀察法、實踐法、小組合作交流法。教學重點：申請網站空間與上傳網站。教學難點：申請網站空間與上傳網站。學習時間：1課時。學習過程：引入課題：如何讓更多的人走進自己的“情感小屋”了解自己

18、呢？怎樣才能使自己的網站發布出去？學習與探究：一、網站發布前的檢查學生活動：閱讀課文第一部分，考慮：網站發布前要做哪幾項檢查？教師總結：1、檢查語法；2.檢查網站的整體情況；3. 檢查超鏈接；4. 檢查網頁中嵌入式文件的存放路徑。練一練：打開自己的“情感小屋”網站，按照上述項目檢查自己的網站是否完善。二、申請網站空間學生活動：閱讀課文第二部分，小組討論，完成以下問題：1、為什么要申請網站空間？2、怎樣申請一個免費的網站空間？3、你知道的可以提供免費空間的網站有哪些？教師總結：原因：要想把自己制作的網站發布到Internet上，就必須申請一個特定的地點和空間，用來存放整個網站

19、的信息，這個空間我們通常稱為網站空間或主頁空間。申請方法：登錄網站-單擊申請免費空間的鏈接-閱讀協議并接受協議內容-按要求填寫表格后提交網站發送注冊信息到你的郵箱內。常用免費提供空間的網站：中聯網、中華網個人主頁、方舟網、中通互聯、天禧網等。大顯身手：登錄一個可以提供免費空間的網站，申請自己的主頁空間。三、上傳網站學生活動：閱讀課文第三部分，小組合作交流：1、要想將制作好的網站上傳到已經申請的免費空間，常用的方式有哪幾種？2、開動腦筋：根據你所學到的知識，把你的的網站上傳至你申請的免費空間吧！3、在瀏覽器中輸入自己網站的網址，訪問自己的主頁。四、網站的宣傳學生活動：思考：怎樣才能讓更多人來訪問我們的網站？自己嘗試對我們的網站進行宣傳？1、網站登錄2、交換鏈接 3、論壇發帖五、課堂小結：網站發布前的檢查申請網站空間上傳網站宣傳網站六、課后反思：     第7課制作