資源簡介

中小學教育資源及組卷應用平臺
第二課 規劃網站及其制作工具
教學過程：
教學環節 教學內容 教師活動 學生活動 設計意圖
激情導入 新課引入 我們已經了解了網站的信息組織方式，有些同學可能心生創建一個網站的想法。實現這個想法并不困難，但是創建一個讓人看過之后印象深刻的網站并不容易。下面我們將從網站的主題和整體結構、版面布局兩個方面去規劃校園網站。 認真回憶網站信息的組織方式 引入新課題規劃網站
新課教學 二、規劃網站 1.規劃網站主題和整體結構（1）確定網站的主題 網站的主題是網站要表達的主要信息的縮影。在規劃網站的時候我們要考慮面對的是哪些人，建一個什么樣的網站，呈現什么樣的信息。例如張家界旅游網面向來張家界的游客，提供的是與張家界旅游相關的信息；湖南省教育廳網站面向全省的教師、家長和學生，提供的是全省教育新聞、政策、升學等相關信息。我們可以采用問卷調查的方式，對潛在的訪問者進行調查，從而確定網站的主題及呈現的主要信息。在設置網站欄目時要注意緊扣網站主題，突出重點內容。仔細考慮網站要呈現的信息，對其進行合理安排。網站的欄目--般分為幾個層次，處于下層的內容藏”得比較深，訪問者往往需要經過幾次操作才能見到。因此，網站中最重要的信息一-定要放在主頁或一-級欄目中，或者在主頁和其他網頁上安排超鏈接，以便訪問者容易找到相關信息。次要的信息可以放在二級或三級欄目中。（2）規劃網站的結構根據已確定的網站主題對網站的結構進行規劃，確定組成網站的各個網頁文件的名稱、標題。在設計網頁時，需要對每一個網頁的名稱及呈現的信息進行反復地篩選和歸類，這樣才能方便訪問者的閱讀。例如湖南教育網是湖南省教育廳主辦的全省教育門戶網站，如圖4-1-2所示，網站開設了首頁、資訊、社區、專題、頻道、資源六大欄目，每個大欄目又包含多個次級欄目。在設計校園網站時，也可以采用這種方式規劃網站的結構，將網站的欄目轉化為網站的子頁。例如“我愛我校”的網站組織結構圖，該網站由兩層結構組成：第-層是主頁，它提供了與-級子頁（子頁1至子頁4）的鏈接，子頁之間相互獨立。根據需要，復雜些的網站甚至有第三層、第四層，乃至更多層的子頁，鏈接關系也更復雜。繪制網站的組織結構圖，便于理清各層各個網頁之間的關系，也便于制作網站時進行對照檢查。網站與網頁一個網站可能只包含一個網頁，也可能包含幾十個甚至數以百計的網頁。網站與網頁的關系就像一本書與書中各頁的關系，是整體與局部的關系。“主頁”有時也稱為首頁，是網站的第一個頁面，相當于書的封面，“主頁”上的欄目相當于書的目錄。主頁的文件名通常是index.htm或default.htm。2.規劃各網頁的版面有了網站的組織結構圖，相當于搭出了網站的整體框架。我們還需要對這一框架進行“軟裝潢”，也就是確立網站的整體風格，安排各個頁面呈現的具體信息。這包括各個網頁中文字、圖片等元素的位置設計，頁面背景的設置，整體色彩的選取。（1）確定網站的布局圖）中街訊本的“亞中國文玉移時廣明來0時在網站設計中，頁面的布局也很重要。主頁上欄目、文字、以及圖片的位置都是需要仔細考慮的內容。一般情況下網站的結構有標題正文居中型、框架結構、內容半包圍型、主題突出型等布局。例如，采用“標題正文居中型”的布局結構，網站中的各個網頁采用上中下的形式，上部是網頁的標題，中部是網頁呈現的主要信息，下部是有關網站制作的相關信息。網頁布局沒有固定形式，也可以根據我們自己的想法進行自由設計。但是設計頁面布局時必須突出頁面傳達的重點信息，將頁面中的重要信息放在明顯的位置，然后再考慮次要信息的位置。（2）設計各個網頁在遵循網站頁面整體布局結構的基礎上，對每一-張網 頁進行精細的設計。這個階段主要是對每一張網頁的背景、文字、圖片、超鏈接等元素的布局、色彩等進行設計。設計各個網頁時，可以使用文字處理軟件、演示文稿軟件或者是手繪的方式畫出各個網頁的草圖，在圖中標注出每個部分的設計參數。例如“我愛我校”網站的主頁和其中一個子頁的設計草圖。設計網頁時，需要注意頁面的平衡、呼應、對比。A、平衡：指頁面的圖片、文字的視覺分量在左右、上下幾個方位基本相等，分布勻稱。色彩表現也要平衡，給人以協調的感覺。B、呼應：使同種元素同時出現在不同的地方，形成相互聯系。C、對比：利用不同的色彩線條等元素相互并置，造成頁面的多種變化，達到豐富視覺的效果。 ①規劃網站主題和整體結構。 教師組織學生以小組為單位，設計一個調查問卷，通過走訪學生、家長和教師，了解他們對校園網站的期望。在收集第一手資料的前提下，教師可以引導學 生分析需求，提煉網站主題；兼顧網站主要訪問群體的興趣和瀏覽習慣。 ②規劃各網頁的版面。 組織學生討論，校園網主題下各版塊的主要內容，并將結果填寫在書本的空白處。指導學生搜索、瀏覽不同風格的網站，在對網站風格有一個感性認識的基礎 上，要求學生以圖示的方式繪制每個網頁的布局，并分別標注出主題文字、內容文字區域、圖片的位置，標注出背景色等一些裝飾性或有特效的內容。教學時引 導學生確立自己網站的整體風格，注意要有自己的特色，而不是單純地對范例進 行模仿 教學設計分為兩個環節，分別是規 劃網站主體和整體結構以及規劃各網頁的版面。前者讓學生圍繞網站的主題和名 稱進行小組討論交流，確定網站的主題，并擬定網站的名稱。讓學生圍繞自己擬定的主題，確定網站需要分成的版塊，以及每個版塊中準備展示的內容。
三、認識網站制作工具 最早設計者使用HTML（超文本標記語言）制作網站，HTML雖然能標識文字、圖片、音頻、視頻等多種媒體信息，但是對于初學者來說，在短時間內記住所有的HTML標識符號并創建一個網站，難度非常大。現在有一些網頁制作工具，可以采用“所見即所得”的方法制作網頁，這些工具有FrontPage、Dreamweaver、iH5等。FrontPage是一個比較方便的網頁開發工具，它提供了多種網頁制作模板，大大降低了網站制作的難度，其操作簡單，容易上手，使初學者可以在極短的時間內創建-個完整的網站。FrontPage的界面，與Word類似，具有菜單欄、工具欄等欄目。主編輯區是創建網頁的主要區域，它有三種編輯模式，分別是“設計”“拆分”“代碼”，當前顯示的是“設計”模式。點擊“預覽"按鈕，可以查看當前網頁在瀏覽器中顯示的效果。 學習 FrontPage 軟件的操作時，教師可以引導學生將 FrontPage 與以前學習過的應用軟件界面進行比較，組織學生討論，分析軟件的特點。對 FrontPage 界面中獨特的內容，通過實例進行講解，對其界面特征進行總結 了解網站制作工具。教材將 FrontPage 與 Word 進行類比。將 Word 中的一些工具的使用方法遷移到網頁制作上，實現了知識的遷移。
活動解析 （2）P79“說說做做”。 ①教師帶領學生通過網站實例，了解其他的互聯網信息的組織方式。 ②略。 （3）P80“說說做做”。 略。 （4）P81“說說做做”。 ①“主題和欄目的考慮要點”欄目中的名稱可以有一定的規范。 4142 ②略 （5）P83“說說做做”。 教師指引學生訪問當地的博物館、健康委員會等網站，然后給予學生提示， 讓學生總結這些網站在網站上標題、內容、超鏈接等元素的位置和設計上的特點。 （6）P85“說說做做”。 教師引導學生根據學習到的布局結構，設計每張網頁的布局。 （7）P86“說說做做”。 略。 （8）P89“說說做做”。 略。 （9）P89“數字化學習”。 類似的網頁制作軟件還有：SharePoint Design、Dreamweaver。 讓學生自由開展討論“說說做做”、“數字化學習”自動學習。 讓學生展開自主探索和相互交流提供空間。
小結 規劃網站 ①規劃網站主題和整體結構。 設計一個調查問卷，通過走訪學生、 家長和教師，了解他們對校園網站的期望。在收集第一手資料的前提下，分析需求，概括網站主題；兼顧網站主要訪問群體的興趣和瀏覽習慣。 ②規劃各網頁的版面。 校園網主題下板塊的主要內容，并將結果填寫在書本的空白處。 搜索、瀏覽不同風格的網站，在對網站風格有一個感性認識的基礎上，以圖示的方式繪制每個網頁的布局，并分別標注出主題文字、內容文字區域、圖片的位置，標注出背景色等一些裝飾性或有特效的內容確立自己網站的整體風格。 認知網站制作工具 學習 FrontPage 軟件的操作時，將 FrontPage 與以前學習過的應用軟件界面進行比較，分析軟件的特點。對 FrontPage 界面中獨特的內容，通過實例進行講解，對其界面特征進行總結。 讓學生同教師一道回憶本堂課所學知識要點 回顧本活動要點
作業 1、網站與網頁的關系就像一本書與書中各頁的關系，是整體與局部的關系。2、“主頁”有時也稱為（首頁），是網站的第一個頁面，相當于書的封面，“主頁”上的欄目相當于書的目錄。主頁的文件名通常是（index.htm或default.htm）。3、最早設計者使用（HTML（超文本標記語言））制作網站。4、（FrontPage）是一個比較方便的網頁開發工具，
板書設計：
第二課時 規劃網站及其制作工具
二、規劃網站
1.規劃網站主題和整體結構
2.規劃各網頁的版面
三、認識網站制作工具
活動解析
小結
21世紀教育網 www.21cnjy.com 精品試卷·第 2 頁 （共 2 頁）
HYPERLINK "http://21世紀教育網(www.21cnjy.com)
" 21世紀教育網(www.21cnjy.com)

展開更多......

收起↑