網站的規(guī)劃與設計

1、南京市營防中學 錢峰一、情境導入一、情境導入討論討論1、我們一起來聊聊業(yè)余時間大家最愛做的事情？2、平時經常瀏覽的網站有哪些？3、欣賞學生作品: 音樂時空 （1）、網站是因特網上具有相似性質和共同內容的一組信息資源。（2）、一般靜態(tài)網站的主頁（英文表達：Home Page）名稱默認為 （index.htm或者default.htm）4、基本概念：網站建設的主要過程：網站建設的主要過程：本節(jié)課的主要學習內容：本節(jié)課的主要學習內容：一、情境導入一、情境導入課題引入課題引入（1）網站的規(guī)劃與設計（2）網站的制作（3）網站的編輯調試（4）網站的發(fā)布與評價網站的規(guī)劃與設計網站的規(guī)劃與設計 二、新課二、新

2、課確定主題及名稱確定主題及名稱 網站的規(guī)劃是指建立網站前對網站需求分析或市網站的規(guī)劃是指建立網站前對網站需求分析或市場分析，確定網站的目的和功能，并根據(jù)需要對網站場分析，確定網站的目的和功能，并根據(jù)需要對網站建設中的技術、內容、費用、測試、維護等工作做好建設中的技術、內容、費用、測試、維護等工作做好充分的考慮，網站的規(guī)劃對網站建設起到計劃和指導充分的考慮，網站的規(guī)劃對網站建設起到計劃和指導作用，對網站的內容和維護起到定位作用。作用，對網站的內容和維護起到定位作用。 網站的規(guī)劃從哪里開始？網站的規(guī)劃從哪里開始？給10秒鐘時間，大家看以下九個網站的名字，看誰記得最多:游戲游戲一個別具一格、朗朗上口

3、的網站名稱能令人印象深刻，不但能一個別具一格、朗朗上口的網站名稱能令人印象深刻，不但能讓用戶了解網站的主題內容，而且還能吸引更多瀏覽者讓用戶了解網站的主題內容，而且還能吸引更多瀏覽者 。網站網站的規(guī)劃從選擇網站的主題開始。網站的選題，就是要根據(jù)網站的規(guī)劃從選擇網站的主題開始。網站的選題，就是要根據(jù)網站的開發(fā)目標和訪問網站的用戶群，確定網站的主題，并給網站的開發(fā)目標和訪問網站的用戶群，確定網站的主題，并給網站起一個簡練響亮的名字。起一個簡練響亮的名字。淘寶網 碧海銀沙 蕃薯藤 紅袖添香 榕樹下 硅谷動力 問天網 網行天下音樂極限二、新課二、新課確定主題及名稱確定主題及名稱總結總結網站名稱百度MP

4、3主題設置最新音樂資訊歌曲下載等二、新課二、新課確定主題及名稱確定主題及名稱網站名稱主題設置肯德基官方網站網上訂餐、打印優(yōu)惠券等、二、新課二、新課確定主題及名稱確定主題及名稱 任務一：任務一： 請同桌一名同學負責完成網站的規(guī)劃與設計任務單中的任務一，另一名同學負責完成老師發(fā)給你的導學案 （可以瀏覽并參考推薦網站）網站名稱網站名稱網站主題網站主題選擇理由選擇理由注意事項：注意事項：（1）主題內容積極向上。）主題內容積極向上。（2）名稱要緊扣主題。）名稱要緊扣主題。（3）可以參考老師提供的網站欣賞）可以參考老師提供的網站欣賞 二、新課二、新課確定主題及名稱確定主題及名稱 我們要把一個優(yōu)秀的網站由藍

5、圖變?yōu)楝F(xiàn)實的第一個步驟就是網站設計，那到底如何進行設計呢？這就好比寫一篇文章，首先要擬好提綱文章才能主題明確，層次清晰，所以，主題選好后，第一步要設置欄目。過過 渡渡欄目地理資訊地理資訊|-考古|-探奇|-圖片地理論壇地理論壇行游天下行游天下|-路書|-攻略|-地圖個人門戶個人門戶手機媒體手機媒體會員活動會員活動電子雜志電子雜志地理基金地理基金二、新課二、新課欄目設置欄目設置欄目欄目網站首頁網站首頁學校概況學校概況校園動態(tài)校園動態(tài)德育建設德育建設黨團建設黨團建設教育教學教育教學國防教育國防教育二、新課二、新課欄目設置欄目設置子欄目子欄目計劃總結計劃總結機構制度機構制度軍校聯(lián)系軍校聯(lián)系教育活動教

6、育活動任務二：任務二：各小組交流討論，確定本小組主題網站的欄目，完成網站的規(guī)劃與設計任務單中的任務二網站名稱網站名稱欄目欄目內容描述內容描述注意事項：注意事項：（1）要緊扣主題，盡可能刪除與主題無關的欄目）要緊扣主題，盡可能刪除與主題無關的欄目（2）盡可能將網站最有吸引力的內容列在欄目上）盡可能將網站最有吸引力的內容列在欄目上（3）盡可能方便訪問者的瀏覽和查詢。）盡可能方便訪問者的瀏覽和查詢。二、新課二、新課欄目設置欄目設置 網海茫茫，能夠吸引我們眼球的只有那些有特色的網頁，大量的網頁引不起網民的興趣，究其原因，站點內容是否豐富是其中一個方面，而網頁的版面設計是否精美也是重要因素之一。過過 渡

7、渡常見樣式常見樣式“廠廠”字型字型頁面頂部為主菜單以及橫條網站標志+廣告條，下方左面為主菜單，右面顯示內容的布局特點特點優(yōu)點優(yōu)點：頁面結構清晰， 主次分明；缺點缺點：呆板，如果細節(jié)色彩上不注意，容易“看之無味”網站標志網站標志 廣告條廣告條 主菜單主菜單 橫條等橫條等欄目欄目菜單菜單主要內容主要內容二、新課二、新課版面規(guī)劃布局版面規(guī)劃布局常見樣式常見樣式“口”字型頁面一般上下各有一個廣告條，左面是主菜單，右面放友情鏈接等，中間是主要內容特點特點優(yōu)點優(yōu)點：充分利用版面，信息量大，與其他頁面的鏈接多，切換方便；缺點缺點：頁面擁擠，不過靈活網站標志網站標志 廣告條廣告條 主菜單主菜單 橫條等橫條等廣

8、告條廣告條欄目欄目菜單菜單友情友情鏈接鏈接主要內容主要內容二、新課二、新課版面規(guī)劃布局版面規(guī)劃布局常見樣式常見樣式自由式：又稱POP布局頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心，菜單欄目自由擺放特點特點優(yōu)點優(yōu)點：漂亮、吸引人，適宜于藝術類網站缺點缺點：顯示速度慢，文字信息量少頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心，菜單欄目自由擺放。二、新課二、新課版面規(guī)劃布局版面規(guī)劃布局任務三：任務三：請參考常見的版面布局樣式，為自己的某一張網頁進行版面布局，有時間的同學可以選擇多個樣式設計多張網頁。完成網站的規(guī)劃與設計任務單中的任務二（請標注好每個版面的用途）示例示例主要內容主要內容標題圖片標題圖片欄目欄目其他其他二、新課二、新課版面規(guī)劃布局版面規(guī)劃布局三、課堂及課外拓展三、課堂及課外拓展1、網站標志、網站標志2、網站的風格及色調、網站的風格及色調3、圍繞主題搜集和處理素材、圍繞主題搜集和處理素材四、課堂總結四、課堂總結1、本節(jié)課我們了解了網站建設的幾個主要過程：、本節(jié)課我們了解了網站建設的幾個主要過程：2、我們主要學習了網站規(guī)劃