第一篇：教案【設計網站與制作首頁】

教學目標

1.知識與技能：了解設計網站的一般流程以及網頁的基本構成元素；學會運用表格進行版面布局；能夠在網頁中添加網頁元素 2.過程與方法：

通過制作網站首頁，掌握版面布局、添加網頁元素和設置網頁背景的基本技術方法，達到舉一反三的效果。

通過學生跟隨老師動手設計網站的實踐活動，使學生掌握對象屬性的設置方法，為學生今后學習其他軟件奠定基礎。3.情感態度價值觀：

提高視覺美感素養，能夠根據網站主題確定恰當的網頁風格并具有初步的創意； 使學生善于交流，在分析探討中學會欣賞與評價。教學重難點

1.學會使用表格規劃版面布局的方法與技巧 2.恰當選取網頁元素并進行設置。難點：掌握設置網頁屬性的一般方法 教學過程

一、創設情境、引入課題——5min 師：同學們，你們上過網嗎？哪位同學說說自己都知道哪些網站？可以相互討論一下。生：百度、新浪、騰訊??

師：非常好，那么同學們還記得它們的樣子嗎？老師這里有一些我們常用網站的首頁，咱們一起來欣賞、探討一下。哪位同學說說，你最喜歡哪個網頁？為什么？ 生：仔細觀察幾類首頁的特點，并踴躍發言。

師：一個網站，最重要的是它的人氣。獨特的設計、新穎的構思都能夠為你的網站吸引大眾增光添彩。而首頁，作為網站的“臉面”，能不能吸引訪問者的注意，它更是重中之重。所以在設計制作首頁時需要特別地花心思，那么怎么樣設計一個好的首頁讓網站第一時間搶占瀏覽者的眼球呢？今天我們一起來學習《設計網站與制作首頁》。

二、新課講授

1.熟悉Dreamweaver開發環境——6min 師演示操作：運行Macromedia Dreamweaver MX 2004，在“起始頁”對話框中，選擇“創建新項目”中的“HTML”選項，進入操作界面。

師講解：菜單欄；插入欄；視圖模式按鈕：設計視圖、拆分視圖、代碼視圖；文檔工具欄；工作區、版面組、屬性面板。

師：制作網站的第一步要定義站點。站點是存放所有網頁以及相關圖片、動畫等媒體文件的文件夾。下面請大家跟隨我一起進行操作，定義本地站點。師生共同操作：課本P53定義本地站點。2.制作網站首頁——6min 師：設計網站首先要確定網站主題，主題是網站的靈魂，是確定網站風格與創意的前提和出發點。【板書：1.確定網站主題、名稱】 我想大家應該非常熟悉自己的QQ空間，所以我們今天就以個人網站為例，做一個個人主頁。現在我們一起創建網站首頁。師生共同操作：

1）在“文件”面板的站點根目錄“myweb”下，右鍵——新建文件——命名“index.htm”作為網站首頁；新建文件夾，命名“images”，保存首頁中用到的圖片文件。2）雙擊“index.htm”文件，進入網頁編輯狀態。3）在“文檔工具欄”上的“標題”輸入框中輸入頁面標題：***個人主頁，作為首頁標題。按鍵盤上F12鍵預覽網頁，師：“請同學們觀察哪里發生了變化？” 生：首頁標題變為***個人主頁。3.用表格布局首頁——8min 師：好，在確立網站主題后，要設計網站欄目，規劃出網站結構圖【板書：2.規劃網站欄目結構】。下面老師把QQ空間的主頁展示給大家，大家觀察并進行分析，咱們這個個人網站應該包含哪些欄目？請一位同學回答。

生：主頁日志相冊留言板說說個人檔音樂時光軸更多

師：非常好，接下來我們就要設計網頁版面布局了【板書：3.設計網頁版面布局】。請同學們快速閱讀課本P47網頁版面布局部分的內容。

師演示講解：我們可以借助表格實現網頁的精細排版。打開“index.htm”文件——插入——表格。在“表格”對話框中可以設置行數、列數、表格寬度、邊框粗細、單元格間距等參數。單擊表格邊框，選中整個表格，就會顯示出表格的“屬性”面板，在這里可以對單元格進行拆分。

師生共同操作：下面請同學們跟隨我進行操作，簡單布置我們的個人主頁結構。4.添加首頁內容——3min 師演示操作：為了節省時間，老師已將文本內容為大家準備好，咱們直接把一部分內容復制粘貼進來。

類似我們學習過的Word等文本編輯軟件，可以在屬性面板中設置字體、字號、顏色等。5.插入圖像——4min 師演示：我們現在按F12鍵瀏覽一下，這樣的網頁你們喜歡看嗎？為什么？ 生：不喜歡，都是字。師演示：那我們現在就來學習如何插入圖片，選擇“插入——圖像”，如果圖片大小不合適，可以選中圖片，在屬性面板中設置圖片的寬度和高度。6.設置網頁背景——3min 師：網頁背景可以是顏色，也可以鏈接調用圖像文件，下面請同學們認真看我的演示。

三、知識回顧——3min 師：請幾位同學說說本節課學到了哪些知識或者技能？ 生：積極思考并發言。

四、布置任務——2min 小組合作：下節課我們需要利用本課所學知識和技能為班級設計一個主題網站的首頁。課下請同學們4人為一組，分工合作，確定網站主題和名稱，并作出欄目規劃和版面設計，搜集整理相關資料，以小組為單位提交至老師郵箱，以備下節課使用。【多媒體展示】

五、課程收尾——5min 師：剩余5分鐘時間大家快速為個人主頁添加文本和圖片，將沒完成的部分補充完整，做得快的同學可以嘗試修改格式以及設置網頁背景。【教師巡視課堂，進行個別指導。】

第二篇：制作網站首頁教案設計

制作網站首頁教案設計

制作網站首頁教案設計

廣東省云浮市郁南縣平臺鎮初級中學

黃偉興

教學課題：制作網站首頁 教學背景：

網站首頁是網站的“臉面”，學生通過學習設計網站首頁，一方面培養他們為提高作品吸引力、展現自我而積極思考、探究、嘗試的意識和態度，另一方面通過學習各種基本網頁設計技術，親歷網頁制作的一般過程，更好地為接下去幾節課的學習和活動參與打下基本功。教學目標：

1、知識與技能：

（1）了解網頁一般由哪些元素組成。（2）學會運用表格進行版面布局。（3）能夠在網頁中添加網頁元素。（4）能在網頁中設置超鏈接。

2、過程與方法：

（1）通過制作網站首頁，掌握版面布局、添加網頁元素和設置超鏈接的基本技術方法，達到舉一反三的功效。

（2）通過學生動手設計網頁的實踐活動，使學生掌握對象屬性的設置方法，為學生今后學習其他軟件奠定基礎。

3、情感態度與價值觀：

制作網站首頁教案設計

（1）提高視覺素養，能根據網頁主題確定恰當的網頁風格并具有初步的創意。（2）通過運用表格布局網頁對象活動，進一步掌握各種不同對象屬性的設置方法和規律，提高學生學習信息技術的信心。

（3）在合作實踐過程中，培養學生的審美能力和創造能力，在小組協作學習中，培養學生合作幫助、團結協作的良好品質。

（4）培養學生大膽構思、自我創新的精神，培養學生的美感及創作后的成就感。

（5）善于和老師、同伴一起分析討論，在分析、探討中學會欣賞，學會評價。

4、學情分析：

學生已經具備了計算機軟件使用的基礎，但學生在學習過程中往往會把注意力停留在技術實現的層面上，讓學生認識和掌握制作網站首頁的方法，故操作性強。在前面幾節課學生初步確定了網站的主題，收集了部分資料。學生已經在word文檔的學習中掌握在文檔中插入圖片、藝術字等素材方法，為制作網頁中的添加素材這一環節打下基礎，同時表格教學比較枯燥，表格嵌套、根據圖片特點裁剪圖片、設計制作表格等知識點更加枯燥乏味。圖片處理操作水平的差異和教學內容的枯燥，可能會造成很多學生不愿動手、不會動手。在實際教學時，教師應該時刻給予學生恰當的引導，在調動學生學習興趣方面下足功夫。

5、素質目標：

制作網頁要應用到多方面的知識，培養學生的知識遷移能力，同時給學生提供了自由發揮的空間，學生可以充分發揮自身的創造力與想象力，培養學生綜合運用知識的能力。教學重點難點：

1、教學重點：

制作網站首頁教案設計

（1）能用表格規劃版面布局的方法與技巧。（2）恰當選取網頁元素與設置。

2、教學難點：

（1）掌握超鏈接技術設置網站導航功能的方法。（2）掌握設置網頁屬性的一般方法。教材分析：

1、本節的作用和地位：

本節課側重培養信息表達的能力，對于加強學生的信息意識，提高信息處理的能力有著重要的作用；網頁的設計也給學生提供了展示個性、自主創新的機會，促使他們主動地學、創造性地學；網頁的評價則能使學生了解內容編排的原則，頁面布局的種類，色彩搭配的風格等，提高他們的藝術修養和審美情趣。

2、本節主要內容介紹：

課改后信息技術課已不再是單純的計算機技能課，它強調以培養信息素養為目標，以任務驅動為模式，以應用軟件為載體。只有在實際教學中突破以往的教學模式，才能培養出適應信息社會發展的有用人才。這節課的主要任務是使學生掌握在FrontPage用表格規劃網頁及在網頁中插入圖片、聲音、水平線等相關知識與操作，并能合理、靈活地應用到網頁制作中，美化自己的網頁。教學方法：

1、先學后教，“兵”教“兵”

先學，就是讓學生自學，嘗試獨立操作；后教，是根據學生自學效果，教師進行精講、點評，并盡量讓學生去“教”；“兵”教“兵”，就是讓學生充當小教師的角色，自學得較好的學生操作給其他學生看，通過示范，在學生間起到相互

制作網站首頁教案設計

促進，相互影響的作用，達到共同進步。

2、任務驅動，小組競賽法

根據學生不同的學習能力、知識儲備、興趣愛好，依據自愿組成原則，將全班分成若干個小組。通過網頁教學課件的輔助，在教師的引導下，各小組按照自己規劃出的網頁設計方案，以任務驅動和分工合作形式制作網頁。并通過自我評價、小組評價、師生互評相結合的評價方式使學生自主完成作業，由學生自己擔任評委，評選出優秀網頁，通過展示學生的優秀作品來激發學生對網頁制作的興趣。

由操作能力強的學生充當組長，帶動其他成員完成網頁制作，一來培養他們合作互助的關系，二來培養學生之間、師生之間的感情。

整節課教師只扮演一個組織者和提示者的角色，一步步引導學生完成本課的目標，讓學生充分發揮自主性、協助性，培養他們合作、創新的能力。

3、提問引導法

根據學生已有的知識結構體系，采用提問的方式引出每個教學目標，中間穿插觀察、自主探究、合作交流的方式加深學生的印象，培養學生的觀察能力，動手能力和團結合作精神。讓學生自覺主動地去分析問題、解決問題，學生在操作過程中不斷發現問題、解決問題，使學生由學會知識變為會學知識。教學評價：

在教學過程中一方面要考查學生能否順利掌握制作網頁的基本技術方法，根據設計需求完成網站首頁的制作，另一方面又要考查學生在作品中是否做了科學的布局規劃、是否合理地運用了各種網頁元素，作品是否具備表現力和較強的可讀性。教學過程：

制作網站首頁教案設計

一、創設情景、引入課題、明確任務

師：上節課我們已經規劃了自己的網站，今天老師給大家帶來了一個禮物，它是一個漂亮的網站，它就是“老師個人學校網站”，里面有許多關于同學們的內容，如：你們漂亮的生活相等，請同學們欣賞。

生：學生認真觀看，自主互相討論，暢談想法及發表意見。

師：繼網站籌劃之后我們就要著手來進行網頁的設計了，第一個要進行的當然是首頁的制作。首頁是網站的“臉面”，能不能吸引訪問者的注意，它顯得尤為重要，所以在設計制作首頁時需要特別花心思。怎樣設計一個好看的網頁讓網站第一時間搶占瀏覽者的眼球呢？再度打開網站的首頁。生：仔細觀察該首頁的特點。并互相討論，各抒已見。

師：上節課已經搜集了素材，這節課咱們來動手制作網站的首頁。指導學生使用FrontPage打開范例“班級網站”的首頁，讓學生進行小組交流，回答以下幾個問題：

1、你知道有哪些軟件可以用來制作網頁嗎？

2、該網頁包含了很多元素，它們是如何整齊有序地分布在網頁中的？用什么可以分割網頁的版面布局呢？

3、該首頁包含了哪些元素？是否能很好地表達主題思想？結合小組收集到的素材，你認為在自己的網站首頁中可以添加哪些網頁元素？

4、導航欄是網站的“地圖”，沒有它，瀏覽者就會“迷路”。選定范例網站首頁導航欄中的欄目文字，單擊常用工具欄上的超鏈接按鈕，看看會出現什么？ 生：觀察思考、探究、小組合作交流，回答教師提出的幾個問題，并確立自己將要開展的工作。

制作網站首頁教案設計

師：其實很多文字處理軟件都可以設計網頁，如Word中，利用“另存為web頁”就可以將文檔保存為網頁，有些圖像處理軟件如PhotoShop也可以制作網頁，Windows“記事本”也可以制作網頁等，不過FrontPage和Dreamweaver卻是最方便的網頁制作軟件，因為它們不僅可以制作網頁，而且能方便地設計和管理網站，很適合入門學習。

二、先學后教、任務驅動、自主學習

1、用表格進行版面布局

師：（1）提問學生都為他們的主頁準備了哪些內容和素材（如文本、圖片、動畫、音頻、視頻）？

（2）引導學生閱讀教材，然后動手實踐。生：（1）學生回答老師的問題。（2）上網學習相關的技能技巧。

（3）小組合作自主探究，教師引導，并安排操作熟練的學生進行演示。師：（1）教師巡視課堂，做個別輔導。針對學生普遍存在的問題，教師做詳細講解。

（2）以前我們可以用表格來表示數據信息嗎？表格還可以用來對網頁版面實現分割嗎？

（3）你打算怎樣安排它們的具體位置才能使網頁更加合理美觀，方便訪問者訪問？

（4）讓打開學生常去的網站，騰訊QQ網站，讓學生觀察并提問他們發現了什么，再逐一把表格中的各元素刪除，使網頁上只留下一個空表格結構。（5）提醒學生要在編輯窗口和預窗口之間切換觀察，使表格結構調整得更加

制作網站首頁教案設計

合理。

（6）如何才能讓表格不顯示在我們的網頁中呢？

生：思考回答問題，小組合作探究、交流，完成老師布置的任務。

師：（1）對比展示兩張素材相同布局不同的網頁。一個使用表格布局，但表格邊框隱藏，其頁面工整，文本、圖片擺放對稱，具有一定的規律；另一個不用表格布局則頁面凌亂，圖文混雜，擺放雜亂。（2）教師簡單演示。

A：添加表格；B：表格屬性設置面板中的幾個常用設置選項說明。（3）指出學生易出錯或難于處理的問題及學生可能遇到的問題。

生：（1）認真觀看教師演示，歸納總結交流自己動手動實踐過程中存在的問題和不足、成功的心得體會及改進思路等。

（2）互相找出易出錯或難于處理的問題及學生可能遇到的問題，合作探究解決的辦法。

2、添加網頁元素

師：（1）要求學生把事先準備好的各種網頁元素（如文本、圖片、動畫、音頻、視頻）添加到主頁，也可使用教師機的共享資源庫的素材。（2）把學生用到的技能要點發到學習網站上。

生：（1）小組合作交流，對之前收集到的素材進行選用，添加到網頁中。（2）上網學習相關的技能技巧。（3）上網查找需補充的素材。

制作網站首頁教案設計

（4）學有余力的同學還可以嘗試怎樣讓網頁更加生動。如添加視頻、背景音樂等。

師：（1）恰當地為學生提供方法，講授經驗心得。（2）解決學生提出的疑難問題。

（3）鼓勵學生進行發現和嘗試提高他們的動手能力。

（4）教師巡視課堂，做個別輔導。針對學生普遍存在的問題，教師做詳細講解。

師：（1）教師簡單演示。

（2）指出學生易出錯或難于處理的問題及學生可能遇到的問題。

生：認真觀看教師演示，歸納總結交流自己動手動實踐過程中存在的問題和不足、成功的心得體會及改進思路等。

3、設置超鏈接

師：（1）如何通過超鏈接技術實現網站的導航功能？

（2）再次提出導航欄是網站的“地圖”，沒有它，瀏覽者就會“迷路”。選定范例網站首頁導航欄中的欄目文字，單擊常用工具欄上的超鏈接按鈕，看看會出現什么？

（3）你發現哪些地方需要設置超鏈接嗎？試對它們進行設置。（4）如何檢查各個鏈接目標是否設置正確？

生：動手嘗試，通過自主探究、小組合作交流，回答老師的問題。師：教師簡單演示。

制作網站首頁教案設計

三、課堂小結、作品展示、師生評價

（1）教師引導學生進行總結，針對本節課的重點知識進行提問，了解學生對相關知識的掌握。

（2）學生相互欣賞作品，推薦優秀作品在全班進行展示。我們來評一評，哪個作品做得好，好在哪里？那個作品還存在不足之處，都有那些方面？師生共同評價，教師對完成情況好的學生和幫助他人的學生給與表揚。

四、教學反思

本節課采用的教學理念和教學方式是在建構主義的教學理論指導下，采用“任務驅動教學法”,讓學生這種“帶著任務自主學習”的探究模式下實現知識的意義建構。以學生自己實踐、自主學習為主，老師巧妙引導，適時指點為輔，學生在這種學習過程中處于積極主動的主體地位，從而可以充分發揮學生的學習主動性和創造性，使學生自主地獲取知識。讓學生通過合作協調、構思創新的方式完成整節課學習的方法，極大調動了學生的學習積極性，培養了其信息表達的能力，加強了學生的信息意識，提高了信息處理的能力。在探索式學習中，重要的不只是僅對任務完成的學習，而是學習者對知識的探索過程，是學習者在探索知識過程中的思維飛躍，是個性化發展的極好過程。同時，自主學習可以使每一位學生根據自己的知識基礎與學習方法自定步調進行個別化學習，克服了傳統課堂教學中壓制個性化發展而采用“一刀切”的人為現象,但在引導過程中要注意掌握好“度”，既讓學生自己探索，掌握知識，又要合理補充，及時糾錯。

制作網站首頁教案設計

《網站制作——站點創建與首頁制作》教學設計

一、教材分析

本節課是江蘇科學技術出版社教材，初中信息技術（8年級）第3章第2節的第二課時的內容，是繼網站規劃、網站設計后進行網站實現的關鍵一節，在整個課程的學習過程中至關重要。這節課的主要任務是運用Dreamweaver軟件，讓學生掌握在網頁中插入圖片、聲音、水平線等相關知識與操作，并能合理、靈活地編輯和美化自己的網頁。

二、教學目標 1．知識與技能

（1）掌握簡單網頁的新建方法。

（2）能夠在網頁中插入、排版文字，掌握圖片、水平線的插入方法及屬性的設置方法，能夠靈活應用“網頁屬性”對話框，設置網頁屬性，如背景、背景音樂。

（3）掌握保存網頁的方法，了解網頁保存與普通文檔保存的不同點。2．過程與方法

（1）對比教學，使學生掌握學習應用軟件的基本方法和規律，達到舉一反三的功效。

（2）任務驅動、自助探究，動手設計網站的實踐活動，建立對象屬性設置的思維方法和操作方法，為學生今后學習其它軟件奠定基礎。

（3）小組合作，培養學生自助、協作學習的能力。3．情感態度與價值觀

制作網站首頁教案設計

（1）能夠在對比學習中，讓學生體驗軟件學習的一般方法及規律，提高其學習信息技術的信心。

（2）能夠在網站首頁的設計和創建的過程中，掌握對象屬性的設置方法，初步體驗成功的快樂。

（3）能夠通過小組交流學習，激發學生探究創新的學習精神。

三、教學重難點 1．教學重點（1）站點的建立。

（2）簡單網頁設計方法，如文字、圖片以及水平線的插入與編輯等。（3）設置網頁屬性的一般方法。2．教學難點

（1）站點的作用和存儲路徑。（2）網頁的保存。

四、教學方法

對比和任務驅動教學法，自助探究和合作學習法，五、教學準備

教學內容準備：整理、歸類相關素材，并分發到學生電腦指定盤。上課地點：多媒體教室

六、教學過程 1．情境導入

制作網站首頁教案設計

分發導學案，展示《旅游日記》網站，提問學生放假出門旅游的經歷，引導學生思考如何記錄旅行過程，講解網站展示的內容，激發學生創建網站的學習興趣。

設計意圖：由學生生活實際入手，自然過渡，激發興趣，活躍氣氛。2．新課教學（1）網站介紹

通過展示的網頁，分析其組成元素：網站標志、標題、水平線、文字介紹、背景圖片、背景音樂，強調網站內容的合理布局。

（2）建立站點

由于我們的網站需要制作多個網頁文件以及相關圖片、聲音文件等，所以網站建設初期就要做好管理準備，我們以站點的形式來管理網站內部文件。

任務1 在D盤下建立一個站點文件夾，站點名稱：0128（即班級序號+學號）。教師活動：指導學生對照書本進行學習（限時）； 學生操作期間教師巡視課堂，做個別輔導； 針對學生中普遍存在的問題，教師可做詳細講解。

學生活動：明確教師要求后，閱讀教材，開展對照著教材的自學活動； 舉手反饋完成與否。

設計意圖：對照教材操作步驟自學軟件的相關操作。（自學為主）提問思考：在文件夾列表中看到了什么？

分析多出的文件夾列表欄，多了一個文件夾，里面有兩個子文件夾和主頁，圖片存放在“images”文件夾中。

設計意圖：了解站點的作用，強調站點的管理。

制作網站首頁教案設計

（3）設計首頁

再次強調一般首頁組成情況，提出課堂制作要求（可跳出案例中各對象的具體擺放要求，但要求出現元素不得缺少）。

任務2 新建首頁，要求首頁中有如下對象： 網站的圖片標志和標題。網站的建立主旨（文字介紹）。水平線（起分隔作用）。

鏈接到下一頁的標記（可為文字，也可為圖片）。

教師活動：指導學生示范，講解如何插入圖片（來自文件）、插入水平線等。（注意各對象“插入點”的選擇）

學生活動：按要求小組合作完成任務。

設計意圖：類比Word中對象的插入方法，使學生學會知識遷移。并在完成基本任務的前提下，鼓勵學生創新。（類比學習法、知識遷移學習法）

（4）編輯與預覽主頁

提出具體編輯要求，引導學生設置相關對象的屬性。

任務

3編輯主頁

設置網站標題文字為隸書、7級、藍色、居中。設置水平線粗細為5像素。

設置文字介紹文字為楷體、小二號、藍色、加粗。選擇一張淡雅圖片，將其設置為首頁背景圖片。為首頁加上背景音樂。

制作網站首頁教案設計

教師活動：指導學生示范，講解如何設置文字、圖片、水平線以及網頁屬性等。

學生活動：按要求小組合作完成任務。

（強調：必須在“普通” 窗口下編輯，網頁背景圖片的像素符合要求）。設計意圖：通過小組交流學習，培養學生自助、協作學習的能力，激發學生探究創新的學習精神。

（5）保存網頁

教師活動：深入講解示范。

學生活動：認真聽講，按要求保存自己的網頁。

（強調：選擇一個其他文件的文件夾分類保存圖片等素材）３．總結與評價

（1）引導學生填寫任務完成測評表，相互檢查作業，推薦優秀作品，展示給全班同學，表揚完成情況好的同學與幫助他人的同學。

（2）對照本堂課的學習情況進行總結，提問本節課的重點知識，反饋學生相關知識的掌握情況。

設計意圖：加強總結反饋，鼓勵學生互幫互助

第三篇：制作網站首頁教案設計

制作網站首頁教案設計

制作網站首頁教案設計

教學課題：制作網站首頁 教學背景：

網站首頁是網站的“臉面”，學生通過學習設計網站首頁，一方面培養他們為提高作品吸引力、展現自我而積極思考、探究、嘗試的意識和態度，另一方面通過學習各種基本網頁設計技術，親歷網頁制作的一般過程，更好地為接下去幾節課的學習和活動參與打下基本功。教學目標：

1、知識與技能：

（1）了解網頁一般由哪些元素組成。（2）學會運用表格進行版面布局。（3）能夠在網頁中添加網頁元素。（4）能在網頁中設置超鏈接。

2、過程與方法：

（1）通過制作網站首頁，掌握版面布局、添加網頁元素和設置超鏈接的基本技術方法，達到舉一反三的功效。

（2）通過學生動手設計網頁的實踐活動，使學生掌握對象屬性的設置方法，為學生今后學習其他軟件奠定基礎。

3、情感態度與價值觀：

（1）提高視覺素養，能根據網頁主題確定恰當的網頁風格并具有初步的創意。

制作網站首頁教案設計

（2）通過運用表格布局網頁對象活動，進一步掌握各種不同對象屬性的設置方法和規律，提高學生學習信息技術的信心。

（3）在合作實踐過程中，培養學生的審美能力和創造能力，在小組協作學習中，培養學生合作幫助、團結協作的良好品質。

（4）培養學生大膽構思、自我創新的精神，培養學生的美感及創作后的成就感。

（5）善于和老師、同伴一起分析討論，在分析、探討中學會欣賞，學會評價。

4、學情分析：

學生已經具備了計算機軟件使用的基礎，但學生在學習過程中往往會把注意力停留在技術實現的層面上，讓學生認識和掌握制作網站首頁的方法，故操作性強。在前面幾節課學生初步確定了網站的主題，收集了部分資料。學生已經在word文檔的學習中掌握在文檔中插入圖片、藝術字等素材方法，為制作網頁中的添加素材這一環節打下基礎，同時表格教學比較枯燥，表格嵌套、根據圖片特點裁剪圖片、設計制作表格等知識點更加枯燥乏味。圖片處理操作水平的差異和教學內容的枯燥，可能會造成很多學生不愿動手、不會動手。在實際教學時，教師應該時刻給予學生恰當的引導，在調動學生學習興趣方面下足功夫。

5、素質目標：

制作網頁要應用到多方面的知識，培養學生的知識遷移能力，同時給學生提供了自由發揮的空間，學生可以充分發揮自身的創造力與想象力，培養學生綜合運用知識的能力。教學重點難點：

1、教學重點：

（1）能用表格規劃版面布局的方法與技巧。

制作網站首頁教案設計

（2）恰當選取網頁元素與設置。

2、教學難點：

（1）掌握超鏈接技術設置網站導航功能的方法。（2）掌握設置網頁屬性的一般方法。教材分析：

1、本節的作用和地位：

本節課側重培養信息表達的能力，對于加強學生的信息意識，提高信息處理的能力有著重要的作用；網頁的設計也給學生提供了展示個性、自主創新的機會，促使他們主動地學、創造性地學；網頁的評價則能使學生了解內容編排的原則，頁面布局的種類，色彩搭配的風格等，提高他們的藝術修養和審美情趣。

2、本節主要內容介紹：

課改后信息技術課已不再是單純的計算機技能課，它強調以培養信息素養為目標，以任務驅動為模式，以應用軟件為載體。只有在實際教學中突破以往的教學模式，才能培養出適應信息社會發展的有用人才。這節課的主要任務是使學生掌握在FrontPage用表格規劃網頁及在網頁中插入圖片、聲音、水平線等相關知識與操作，并能合理、靈活地應用到網頁制作中，美化自己的網頁。教學方法：

1、先學后教，“兵”教“兵”

先學，就是讓學生自學，嘗試獨立操作；后教，是根據學生自學效果，教師進行精講、點評，并盡量讓學生去“教”；“兵”教“兵”，就是讓學生充當小教師的角色，自學得較好的學生操作給其他學生看，通過示范，在學生間起到相互促進，相互影響的作用，達到共同進步。

制作網站首頁教案設計

2、任務驅動，小組競賽法

根據學生不同的學習能力、知識儲備、興趣愛好，依據自愿組成原則，將全班分成若干個小組。通過網頁教學課件的輔助，在教師的引導下，各小組按照自己規劃出的網頁設計方案，以任務驅動和分工合作形式制作網頁。并通過自我評價、小組評價、師生互評相結合的評價方式使學生自主完成作業，由學生自己擔任評委，評選出優秀網頁，通過展示學生的優秀作品來激發學生對網頁制作的興趣。

由操作能力強的學生充當組長，帶動其他成員完成網頁制作，一來培養他們合作互助的關系，二來培養學生之間、師生之間的感情。

整節課教師只扮演一個組織者和提示者的角色，一步步引導學生完成本課的目標，讓學生充分發揮自主性、協助性，培養他們合作、創新的能力。

3、提問引導法

根據學生已有的知識結構體系，采用提問的方式引出每個教學目標，中間穿插觀察、自主探究、合作交流的方式加深學生的印象，培養學生的觀察能力，動手能力和團結合作精神。讓學生自覺主動地去分析問題、解決問題，學生在操作過程中不斷發現問題、解決問題，使學生由學會知識變為會學知識。教學評價：

在教學過程中一方面要考查學生能否順利掌握制作網頁的基本技術方法，根據設計需求完成網站首頁的制作，另一方面又要考查學生在作品中是否做了科學的布局規劃、是否合理地運用了各種網頁元素，作品是否具備表現力和較強的可讀性。教學過程：

一、創設情景、引入課題、明確任務

制作網站首頁教案設計

師：上節課我們已經規劃了自己的網站，今天老師給大家帶來了一個禮物，它是一個漂亮的網站，它就是“老師個人學校網站”，里面有許多關于同學們的內容，如：你們漂亮的生活相等，請同學們欣賞。

生：學生認真觀看，自主互相討論，暢談想法及發表意見。

師：繼網站籌劃之后我們就要著手來進行網頁的設計了，第一個要進行的當然是首頁的制作。首頁是網站的“臉面”，能不能吸引訪問者的注意，它顯得尤為重要，所以在設計制作首頁時需要特別花心思。怎樣設計一個好看的網頁讓網站第一時間搶占瀏覽者的眼球呢？再度打開網站的首頁。生：仔細觀察該首頁的特點。并互相討論，各抒已見。

師：上節課已經搜集了素材，這節課咱們來動手制作網站的首頁。指導學生使用FrontPage打開范例“班級網站”的首頁，讓學生進行小組交流，回答以下幾個問題：

1、你知道有哪些軟件可以用來制作網頁嗎？

2、該網頁包含了很多元素，它們是如何整齊有序地分布在網頁中的？用什么可以分割網頁的版面布局呢？

3、該首頁包含了哪些元素？是否能很好地表達主題思想？結合小組收集到的素材，你認為在自己的網站首頁中可以添加哪些網頁元素？

4、導航欄是網站的“地圖”，沒有它，瀏覽者就會“迷路”。選定范例網站首頁導航欄中的欄目文字，單擊常用工具欄上的超鏈接按鈕，看看會出現什么？ 生：觀察思考、探究、小組合作交流，回答教師提出的幾個問題，并確立自己將要開展的工作。

師：其實很多文字處理軟件都可以設計網頁，如Word中，利用“另存為web頁”就可以將文檔保存為網頁，有些圖像處理軟件如PhotoShop也可以制作網頁，制作網站首頁教案設計

Windows“記事本”也可以制作網頁等，不過FrontPage和Dreamweaver卻是最方便的網頁制作軟件，因為它們不僅可以制作網頁，而且能方便地設計和管理網站，很適合入門學習。

二、先學后教、任務驅動、自主學習

1、用表格進行版面布局

師：（1）提問學生都為他們的主頁準備了哪些內容和素材（如文本、圖片、動畫、音頻、視頻）？

（2）引導學生閱讀教材，然后動手實踐。生：（1）學生回答老師的問題。（2）上網學習相關的技能技巧。

（3）小組合作自主探究，教師引導，并安排操作熟練的學生進行演示。師：（1）教師巡視課堂，做個別輔導。針對學生普遍存在的問題，教師做詳細講解。

（2）以前我們可以用表格來表示數據信息嗎？表格還可以用來對網頁版面實現分割嗎？

（3）你打算怎樣安排它們的具體位置才能使網頁更加合理美觀，方便訪問者訪問？

（4）讓打開學生常去的網站，騰訊QQ網站，讓學生觀察并提問他們發現了什么，再逐一把表格中的各元素刪除，使網頁上只留下一個空表格結構。（5）提醒學生要在編輯窗口和預窗口之間切換觀察，使表格結構調整得更加合理。

制作網站首頁教案設計

（6）如何才能讓表格不顯示在我們的網頁中呢？

生：思考回答問題，小組合作探究、交流，完成老師布置的任務。

師：（1）對比展示兩張素材相同布局不同的網頁。一個使用表格布局，但表格邊框隱藏，其頁面工整，文本、圖片擺放對稱，具有一定的規律；另一個不用表格布局則頁面凌亂，圖文混雜，擺放雜亂。（2）教師簡單演示。

A：添加表格；B：表格屬性設置面板中的幾個常用設置選項說明。（3）指出學生易出錯或難于處理的問題及學生可能遇到的問題。

生：（1）認真觀看教師演示，歸納總結交流自己動手動實踐過程中存在的問題和不足、成功的心得體會及改進思路等。

（2）互相找出易出錯或難于處理的問題及學生可能遇到的問題，合作探究解決的辦法。

2、添加網頁元素

師：（1）要求學生把事先準備好的各種網頁元素（如文本、圖片、動畫、音頻、視頻）添加到主頁，也可使用教師機的共享資源庫的素材。（2）把學生用到的技能要點發到學習網站上。

生：（1）小組合作交流，對之前收集到的素材進行選用，添加到網頁中。（2）上網學習相關的技能技巧。（3）上網查找需補充的素材。

（4）學有余力的同學還可以嘗試怎樣讓網頁更加生動。如添加視頻、背景音 7

制作網站首頁教案設計

樂等。

師：（1）恰當地為學生提供方法，講授經驗心得。（2）解決學生提出的疑難問題。

（3）鼓勵學生進行發現和嘗試提高他們的動手能力。

（4）教師巡視課堂，做個別輔導。針對學生普遍存在的問題，教師做詳細講解。

師：（1）教師簡單演示。

（2）指出學生易出錯或難于處理的問題及學生可能遇到的問題。

生：認真觀看教師演示，歸納總結交流自己動手動實踐過程中存在的問題和不足、成功的心得體會及改進思路等。

3、設置超鏈接

師：（1）如何通過超鏈接技術實現網站的導航功能？

（2）再次提出導航欄是網站的“地圖”，沒有它，瀏覽者就會“迷路”。選定范例網站首頁導航欄中的欄目文字，單擊常用工具欄上的超鏈接按鈕，看看會出現什么？

（3）你發現哪些地方需要設置超鏈接嗎？試對它們進行設置。（4）如何檢查各個鏈接目標是否設置正確？

生：動手嘗試，通過自主探究、小組合作交流，回答老師的問題。師：教師簡單演示。

三、課堂小結、作品展示、師生評價

制作網站首頁教案設計

（1）教師引導學生進行總結，針對本節課的重點知識進行提問，了解學生對相關知識的掌握。

（2）學生相互欣賞作品，推薦優秀作品在全班進行展示。我們來評一評，哪個作品做得好，好在哪里？那個作品還存在不足之處，都有那些方面？師生共同評價，教師對完成情況好的學生和幫助他人的學生給與表揚。

四、教學反思

本節課采用的教學理念和教學方式是在建構主義的教學理論指導下，采用“任務驅動教學法”,讓學生這種“帶著任務自主學習”的探究模式下實現知識的意義建構。以學生自己實踐、自主學習為主，老師巧妙引導，適時指點為輔，學生在這種學習過程中處于積極主動的主體地位，從而可以充分發揮學生的學習主動性和創造性，使學生自主地獲取知識。讓學生通過合作協調、構思創新的方式完成整節課學習的方法，極大調動了學生的學習積極性，培養了其信息表達的能力，加強了學生的信息意識，提高了信息處理的能力。在探索式學習中，重要的不只是僅對任務完成的學習，而是學習者對知識的探索過程，是學習者在探索知識過程中的思維飛躍，是個性化發展的極好過程。同時，自主學習可以使每一位學生根據自己的知識基礎與學習方法自定步調進行個別化學習，克服了傳統課堂教學中壓制個性化發展而采用“一刀切”的人為現象,但在引導過程中要注意掌握好“度”，既讓學生自己探索，掌握知識，又要合理補充，及時糾錯。

第四篇：博物館網站首頁制作教案

博物館網站首頁制作教案

第一部分：課前導入

簡單復習回顧上節所學內容 第二部分：學習新內容 【步驟一】 告知

簡單介紹本單元需要學習掌握的內容

【步驟二】 引入

由一組圖片導入 【步驟三】 操練

北京騰飛博物館網站首頁制作

一、行業應用 屬于網頁設計

二、設計理念

博物館本身存放的就是大量距今年代比較久遠的物品，因此設計師在設計過程中，從網頁的顏色、裝飾元素以及表面肌理等方面，都力求能夠表現出一種歷史久遠、古老典雅的氣氛，并給人以有內涵、有文化氣息的視覺感受。【步驟四】具體操作步驟

1、制作背景

1新建 ○2打開素材 ○3設置前景色…….○

2、制作輔助效果 【步驟五】 歸納

本網站在開始時采用了很多圖形繪制功能輔助進行布局，然后再結合各種肌理素材、混合模式、圖層蒙版以及調色功能，為網頁的各個部分疊加紋理；在制作內部的各個內容時，將使用的蒙版、圖層樣式、圖形繪制以及文字輸入等功能，為每個圖形對象邊框等精致的效果，以及相關的裝飾圖形及說明文字，最后還需要打開一些裝飾圖形，結合縮放功能將其擺放在網頁的各個邊角位置作為裝飾。【步驟六】 評價

對學生作品作具體評價，好的作品給予肯定，容易出現問題的方面，如部分疊加紋理方面、蒙版的使用等，具體講解。【步驟七】 小結

本案例：博物館本身存放的就是大量距今年代比較久遠的物品，因此設計師在設計過程中，從網頁的顏色、裝飾元素以及表面肌理等方面，都力求能夠表現出一種歷史久遠、古老典雅的氣氛，并給人以有內涵、有文化氣息的視覺感受。因此同學們要把這種厚重感表現出來，此作品才算成功。

【步驟八】 作業

1、北京騰飛博物館網站首頁制作

2、完成實訓報告冊 【步驟九】 課后反思

第五篇：首頁的設計與制作教學設計

教學目標

知識與技能:

1.設計自己的“模板”--設置幻燈片的母版;

2.插入圖片并設置為透明色;

3.插入藝術字并設置藝術字的格式;

4.插入背景音樂并編輯聲音對象。

過程與方法:由欣賞多媒體作品引入課題,然后在任務的驅動下,師生共同實踐,逐步完成首頁的設計與制作。

情感、態度與價值觀:

1.體驗多媒體作品的表現魅力,激發學生學習制作多媒體作品的興趣;

2.經歷多媒體作品的創作過程,形成積極主動參與作品創作的愿望,培養學生的協作能力與表達能力

教學重點和難點

重點:設置幻燈片的母版,設置藝術字的格式,插入并編輯聲音文件

難點:設置幻燈片的母版和設置圖片的透明色

教具和教學手段

教 具:多媒體網絡教室

教學手段:任務驅動法

教 學 過 程

一、課題導入:

首先我們來欣賞一部多媒體作品-蘇州園林,這部作品格調優雅,古色古香,突出反映了蘇州園林的秀美典雅。

多媒體作品的首頁如同圖書的封面,作品能否吸引人們的眼球,首頁的設計與制作相當重要,這節課我們就一起來學習如何制作多媒體作品“蘇州園林”的首頁。

二、分析任務:

師:大家來觀察下這個首頁由哪些元素組成的?

生:(背景,圖片,藝術字,聲音等)

師:這個首頁設計采用了富有古典氣息的背景底圖,頁面中包含由若干張蘇州園林照片合成的圖片以及藝術字構成的標題字,突出表現了蘇州園林的古典與秀美。整個頁面色調淡雅,圖文并茂,給人一種美的享受。(打開“素材文件夾”,邊講邊給學生看素材,讓他們對素材有個了解)

下面我們就一起分析下完成首頁的制作需要哪幾個任務:

任務一:設計自己的“模板”;

任務二:插入圖片并設置為透明色;

任務三:插入藝術字并設置藝術字的格式;

任務四:插入背景音樂并編輯聲音對象。

三、完成任務:

了解了完成首頁設計需要的任務,我們趕緊行動吧!

1.任務一:設計自己的“模板”---設置幻燈片的母版

首先在默認的“空演示文稿”下單擊確認,然后選擇“空白版式”

想一想,怎樣設置所有幻燈片的背景并在每一張幻燈片左上角都放置“世界遺產”的圖片?

如果我們在每一張幻燈片上都操作一遍,那么會很麻煩,其實軟件給我們提供了一個很方便的操作:設置幻燈片的母版,通過設置母版,我們可以方便的統一整個作品的風格,單擊“視圖”-“母版”-幻燈片母版后,這時可能有的同學會說直接利用插入菜單中的圖片命令來設置背景,但是這樣操作很不好:圖片容易被拖動,而且會覆蓋上面的字,其實,軟件給我們提供了專門的設置背景的方法:在幻燈片的空白處右擊-“背景”-在“下拉框”中選擇“填充效果”-“圖片”選項卡-選擇背景圖片-確定-應用;插入“世界遺產”的圖片,調整好它的大小和位置,但它的背景顏色和幻燈片的背景顏色不一樣,怎么將它們融為一體呢?右擊“世界遺產”圖片-打開“圖片工具欄”,單擊“設置透明色”按鈕后在“世界遺產”圖片的白色區域內單擊,即可將它的白色區域設置為透明色,這樣兩者就融為一體了!然后將“母版視圖”改為“普通視圖”。下面請大家動手操作,設置自己的“模板”。

學生操作:設置幻燈片的母版

思考題:嘗試插入圖片封面.jpg,并適當調整它的大小。通過什么樣的操作使得它和背景融為一體?(完成快的同學思考,嘗試操作)

學生演示:設置幻燈片的母版

2.任務二:插入圖片并設置為透明色

有了任務一的基礎,任務二應該很簡單了吧?誰給大家演示下呢?

學生演示:插入圖片并設置透明色。

就學生的演示情況進行總結,學生操作

先給出任務三,讓完成快的學生先嘗試操作

3.任務三:插入藝術字并設置藝術字的格式

教師分析:“蘇州園林”屬于藝術字庫中的哪一種樣式?第一行第一列,有什么不同?字體:華文行楷,字號:60,加粗,填充色:金色;“suzhou garden” 屬于藝術字庫中的哪一種樣式?第一行第一列,有什么不同?字體:arial black,字號:24,填充色:“填充效果”中的“雙色”:第一個是淡黃色,第2個灰色,底紋樣式為“水平”。

學生操作:插入藝術字并設置藝術字的格式

給出任務四,讓完成快的學生思考

學生演示:插入藝術字并設置藝術字的格式

教師總結

4.任務四:插入背景音樂并編輯聲音對象。

教師分析:放映幻燈片的時候,希望不要出現聲音的圖標,所以在插入聲音文件后還要進行一定的設置。

教師講解:插入聲音文件,并將其設置為“循環播放”和自定義動畫中的“不播放時隱藏”。

學生操作:插入背景音樂并編輯聲音對象。

學生演示:插入背景音樂并編輯聲音對象。

全部做好的同學做“課后作業”,沒完成的繼續操作

四、課后作業:上網查找蘇州園林的相關資料,了解蘇州有哪些著名的園林,找一找它們的圖片。