第一篇：網頁制作電子教案項目備課

項目二 網頁制作基礎

【項目描述】

中文版Dreamweaver8是目前比較流行的網頁制作工具。本項目主要介紹中文版Dreamweaver8的工作窗口及使用方法，以及HTML的基本結構。【教學目標】

1.安裝Dreamweaver8，介紹其工作窗口及使用方法。

2.學會定義本地站點，并講解規劃站點結構的原則，在站點中搭建模擬結構。3.Html代碼的基本結構?！卷椖糠峙洹?/p>

任務一 認識Dreamweaver8。（1課時）

任務二創建本地站點，搭建模擬結構。（2課時）

任務三html代碼的基本結構。（2課時）

任務一：認識Dreamweaver8（1課時）

一、教材分析：

中文版dreamweaver8是目前比較流行的網頁制作工具。主要介紹中文版dreamweaver8的工作窗口以及其使用方法

二、學情分析：

本班學生都是剛接觸到dreamweaver8，對于本節課知識興趣濃厚，學習積極性高。

三、教學目標：

知識目標：初步了解中文版dreamweaver8的工作窗口、工具欄、文檔窗口、浮動面板、菜單和輔助設計工具。

情感目標：通過本節課的學習使學生掌握知識的同時，提高他們的自學能力。

能力目標：通過本節課的學習培養學生動手操作能力。

四、教學重點

掌握中文版dreamweaver8的8的工作窗口、工具欄、文檔窗口、浮動面板、菜單和輔助設計工具、屬性面板和浮動面板顯示及使用。

五、教學難點

快捷工具欄的顯示及組成、使用，浮動面板的顯示與隱藏菜單和輔助設計工具的作用 教學方法與過程：

（一）導入新課：提問學生對網站的了解，internet網與我們生活的聯系 及重要性。引發學生思考，帶著穎問進入教學課題。

（二）揭示課題：網站大部分都是由Dreamweaver8 制作出來的這節課我們就來“認識Dreamweaver8”

（三）教師演示：

1.啟動Dreamweaver8從開始菜單啟動，出現工作區設置對話框，選擇設計器工作區。設計 器是標準的工作區。

2.Dreamweaver8工作界面認識Dreamweaver8工作界面，對掌握和提高制作效率是關鍵的一步。（1）標題欄：左側有網頁標題，所在位置及文件名稱，右側有最小化，最大化

和關閉。（2）菜單欄：有“文件”、“編輯”、“查看”、“插入”、“修改”、“文本”、“命令”、“站點”、“窗口”、“幫助”。（3）快捷工具欄：選擇“查看”中的“工具欄”，勾選“插入”、“文檔”、“標準”三項，完整的快捷工具欄就顯示出來。

3.網頁編輯窗口快捷工具欄下面的區域就是“網頁編輯區域”。在啟動Dreamweaver8時將顯示一個“起始頁”，包括“打開最近項目”、“創建新項目”、“從范例創建”三個方便實用的項目?？梢怨催x“不再顯示此對話框”使它隱藏。用戶可以在文檔區域中進行輸入文字，插入表格和編輯圖片等操作。

4.屬性面板網頁設計中的對象都有各自的屬性，屬性面板的設置項目會根據對象不同而變化。

5.浮動面板根據面板的特性命名，浮動于編輯窗口之外。在窗口菜單中單擊不同的命令可以打開不同的面板。在“窗口”中選擇“排列面板”能夠整齊地擺放在屏幕上，按F4可以隱藏和顯示面板。

任務二創建本地站點，搭建模擬結構

（2課時）

一、教材分析：

掌握站點的創建方法，使用向導和高級模式設置本站點。學會建 立站點文件和文件 夾結構及管理本地站點

二、學情分析：

本班學生都是剛接觸到dreamweaver8，在學習站點的建立所以能夠提高學生學習興 趣，充分發揮學生學習的積極性。

三、教學目標：

知識目標：掌握站點的創建方法，使用向導和高級模式設置本站點。學會建立站點文件和文件夾結構及管理本地站點

情感目標：通過本節課的學習使學生掌握知識的同時，提高他們的學習興趣。

能力目標：通過本節課的學習培養學生動手操作能力。

四、教學重點：站點的創建方法、建立站點文件和文件夾結構

五、教學難點：站點的創建方法、管理本地站點

六、教學方法與過程

多媒體演示，教師講解：

（一）創建站點

要制作一個能夠被公眾瀏覽的網站，首先需要在本地磁盤上制作這個網站，然后把這個網站上傳到Internet的Web服務器上，放置在本地磁盤上的網站被稱為本地站點，處于Internet上的Web服務器里的網站被稱為遠程站點。Dreamweaver8提供了對本地站點和遠程站點強大的管理功能。

Dreamweaver8可以有效地建立并管理多個站點，搭建站點有兩種方法：一是使用向導完成；二是利用高級設定完成。

（二）向導搭建站點

1.在“窗口”菜單中的“文件”面板中選擇“管理站點”，2.選擇“新建”/“站點”打開對話框，有“基本”和“高級”兩個標簽，選擇“基本”。

3.在站點定義對話框中根據向導一步步操作，“輸入網站名稱”“是否使作服務器技術”、“選擇編輯方式（編輯網頁的本地副本，完成后上傳?；蚴褂帽镜鼐W絡直接在服務器上進行編輯。）”、選“存儲位置”、“配置遠程站點（選無，網站建設完成后再FTP上傳。）”

完成設置，在“文件”面板中顯示出剛建立的站點。

（四）管理本地站點

通常，dreamweaver8站點管理器都要對多個網站進行管理，這就需要專門的工具來完成站點的切換，添加、刪除等操作，打開“文件”面板，在下拉菜單中選“管理站點”，可打開多站點管理面板。

用dreamweaver8編輯網頁或進行網站管理時，每次只能操作一個站點，可選其它站點切換操作編輯。

在管理站點中，可復制站點，刪除站點（文件保存在硬盤上不會被刪），可導入，導出（導出為一個XML文件。）

任務三html代碼的基本結構

（2課時）

一、【教學目標】

知識目標：介紹html網頁的編寫方法，介紹網頁命名規則和html代碼的基本結構。技能目標：掌握html代碼的基本結構后，能在Dreamweaver8的“代碼”面板，建立第一個網頁頁面。

情感目標：通過本次學習后，能培養學生對網頁制作軟件的進一步了解，增強學生學習網頁設計的興趣和欲望，熟知網頁制作軟件給我們設計網頁帶來的便捷。

二、【教學重點】

1．Html的基本概念。2．html網頁的編寫方法。3.建立第一個網頁頁面。

三、【教學難點】

html網頁的編寫方法。

四、【教學過程】

（一）明確項目任務（包括了導入項目任務和布置項目任務）

上節課，我們學習了創建本地站點、搭建模擬結構，我們先一起在Dreamweaver中搭建起我們的站點結構。結構搭建好了，我們今天就一起來做網頁吧！

（二）制定項目實施計劃（項目實施）

1．教師講解示范：在桌面上展示一張簡單網頁，查看其源代碼，和學生一起來分析，看看能發現什么問題。引出我們html代碼的寫法。詳細介紹網頁命名規則和html代碼編寫規則。

2．學生活動：學生小組討論，分析源代碼的特點。教師做好對學生的輔導檢查，對做的好的學生給予鼓勵。

3．教師講解示范：制作一張簡單網頁。在Dreamweaver中創建一張網頁：“文件”---“新建”--“html”，在“代碼”面板逐個講解作用功能，完成第一張網頁。

4．學生活動：請一個小組上臺演示，完成第一張網頁,保存網頁，在瀏覽器預覽網頁。教師做好對學生的輔導檢查，對做的好的學生給予鼓勵。

5．教師講解示范：為網頁添加標題。觀察瀏覽器中顯示出標題，引出中的