第一篇：網(wǎng)頁(yè)制作電子教案項(xiàng)目備課

項(xiàng)目二 網(wǎng)頁(yè)制作基礎(chǔ)

【項(xiàng)目描述】

中文版Dreamweaver8是目前比較流行的網(wǎng)頁(yè)制作工具。本項(xiàng)目主要介紹中文版Dreamweaver8的工作窗口及使用方法，以及HTML的基本結(jié)構(gòu)?！窘虒W(xué)目標(biāo)】

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

2.學(xué)會(huì)定義本地站點(diǎn)，并講解規(guī)劃站點(diǎn)結(jié)構(gòu)的原則，在站點(diǎn)中搭建模擬結(jié)構(gòu)。3.Html代碼的基本結(jié)構(gòu)。【項(xiàng)目分配】

任務(wù)一 認(rèn)識(shí)Dreamweaver8。（1課時(shí)）

任務(wù)二創(chuàng)建本地站點(diǎn)，搭建模擬結(jié)構(gòu)。（2課時(shí)）

任務(wù)三html代碼的基本結(jié)構(gòu)。（2課時(shí)）

任務(wù)一：認(rèn)識(shí)Dreamweaver8（1課時(shí)）

一、教材分析：

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

二、學(xué)情分析：

本班學(xué)生都是剛接觸到dreamweaver8，對(duì)于本節(jié)課知識(shí)興趣濃厚，學(xué)習(xí)積極性高。

三、教學(xué)目標(biāo)：

知識(shí)目標(biāo)：初步了解中文版dreamweaver8的工作窗口、工具欄、文檔窗口、浮動(dòng)面板、菜單和輔助設(shè)計(jì)工具。

情感目標(biāo)：通過(guò)本節(jié)課的學(xué)習(xí)使學(xué)生掌握知識(shí)的同時(shí)，提高他們的自學(xué)能力。

能力目標(biāo)：通過(guò)本節(jié)課的學(xué)習(xí)培養(yǎng)學(xué)生動(dòng)手操作能力。

四、教學(xué)重點(diǎn)

掌握中文版dreamweaver8的8的工作窗口、工具欄、文檔窗口、浮動(dòng)面板、菜單和輔助設(shè)計(jì)工具、屬性面板和浮動(dòng)面板顯示及使用。

五、教學(xué)難點(diǎn)

快捷工具欄的顯示及組成、使用，浮動(dòng)面板的顯示與隱藏菜單和輔助設(shè)計(jì)工具的作用 教學(xué)方法與過(guò)程：

（一）導(dǎo)入新課：提問(wèn)學(xué)生對(duì)網(wǎng)站的了解，internet網(wǎng)與我們生活的聯(lián)系 及重要性。引發(fā)學(xué)生思考，帶著穎問(wèn)進(jìn)入教學(xué)課題。

（二）揭示課題：網(wǎng)站大部分都是由Dreamweaver8 制作出來(lái)的這節(jié)課我們就來(lái)“認(rèn)識(shí)Dreamweaver8”

（三）教師演示：

1.啟動(dòng)Dreamweaver8從開始菜單啟動(dòng)，出現(xiàn)工作區(qū)設(shè)置對(duì)話框，選擇設(shè)計(jì)器工作區(qū)。設(shè)計(jì) 器是標(biāo)準(zhǔn)的工作區(qū)。

2.Dreamweaver8工作界面認(rèn)識(shí)Dreamweaver8工作界面，對(duì)掌握和提高制作效率是關(guān)鍵的一步。（1）標(biāo)題欄：左側(cè)有網(wǎng)頁(yè)標(biāo)題，所在位置及文件名稱，右側(cè)有最小化，最大化

和關(guān)閉。（2）菜單欄：有“文件”、“編輯”、“查看”、“插入”、“修改”、“文本”、“命令”、“站點(diǎn)”、“窗口”、“幫助”。（3）快捷工具欄：選擇“查看”中的“工具欄”，勾選“插入”、“文檔”、“標(biāo)準(zhǔn)”三項(xiàng)，完整的快捷工具欄就顯示出來(lái)。

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

4.屬性面板網(wǎng)頁(yè)設(shè)計(jì)中的對(duì)象都有各自的屬性，屬性面板的設(shè)置項(xiàng)目會(huì)根據(jù)對(duì)象不同而變化。

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

任務(wù)二創(chuàng)建本地站點(diǎn)，搭建模擬結(jié)構(gòu)

（2課時(shí)）

一、教材分析：

掌握站點(diǎn)的創(chuàng)建方法，使用向?qū)Ш透呒?jí)模式設(shè)置本站點(diǎn)。學(xué)會(huì)建 立站點(diǎn)文件和文件 夾結(jié)構(gòu)及管理本地站點(diǎn)

二、學(xué)情分析：

本班學(xué)生都是剛接觸到dreamweaver8，在學(xué)習(xí)站點(diǎn)的建立所以能夠提高學(xué)生學(xué)習(xí)興 趣，充分發(fā)揮學(xué)生學(xué)習(xí)的積極性。

三、教學(xué)目標(biāo)：

知識(shí)目標(biāo)：掌握站點(diǎn)的創(chuàng)建方法，使用向?qū)Ш透呒?jí)模式設(shè)置本站點(diǎn)。學(xué)會(huì)建立站點(diǎn)文件和文件夾結(jié)構(gòu)及管理本地站點(diǎn)

情感目標(biāo)：通過(guò)本節(jié)課的學(xué)習(xí)使學(xué)生掌握知識(shí)的同時(shí)，提高他們的學(xué)習(xí)興趣。

能力目標(biāo)：通過(guò)本節(jié)課的學(xué)習(xí)培養(yǎng)學(xué)生動(dòng)手操作能力。

四、教學(xué)重點(diǎn)：站點(diǎn)的創(chuàng)建方法、建立站點(diǎn)文件和文件夾結(jié)構(gòu)

五、教學(xué)難點(diǎn)：站點(diǎn)的創(chuàng)建方法、管理本地站點(diǎn)

六、教學(xué)方法與過(guò)程

多媒體演示，教師講解：

（一）創(chuàng)建站點(diǎn)

要制作一個(gè)能夠被公眾瀏覽的網(wǎng)站，首先需要在本地磁盤上制作這個(gè)網(wǎng)站，然后把這個(gè)網(wǎng)站上傳到Internet的Web服務(wù)器上，放置在本地磁盤上的網(wǎng)站被稱為本地站點(diǎn)，處于Internet上的Web服務(wù)器里的網(wǎng)站被稱為遠(yuǎn)程站點(diǎn)。Dreamweaver8提供了對(duì)本地站點(diǎn)和遠(yuǎn)程站點(diǎn)強(qiáng)大的管理功能。

Dreamweaver8可以有效地建立并管理多個(gè)站點(diǎn)，搭建站點(diǎn)有兩種方法：一是使用向?qū)瓿?；二是利用高?jí)設(shè)定完成。

（二）向?qū)Т罱ㄕ军c(diǎn)

1.在“窗口”菜單中的“文件”面板中選擇“管理站點(diǎn)”，2.選擇“新建”/“站點(diǎn)”打開對(duì)話框，有“基本”和“高級(jí)”兩個(gè)標(biāo)簽，選擇“基本”。

3.在站點(diǎn)定義對(duì)話框中根據(jù)向?qū)б徊讲讲僮鳎拜斎刖W(wǎng)站名稱”“是否使作服務(wù)器技術(shù)”、“選擇編輯方式（編輯網(wǎng)頁(yè)的本地副本，完成后上傳。或使用本地網(wǎng)絡(luò)直接在服務(wù)器上進(jìn)行編輯。）”、選“存儲(chǔ)位置”、“配置遠(yuǎn)程站點(diǎn)（選無(wú)，網(wǎng)站建設(shè)完成后再FTP上傳。）”

完成設(shè)置，在“文件”面板中顯示出剛建立的站點(diǎn)。

（四）管理本地站點(diǎn)

通常，dreamweaver8站點(diǎn)管理器都要對(duì)多個(gè)網(wǎng)站進(jìn)行管理，這就需要專門的工具來(lái)完成站點(diǎn)的切換，添加、刪除等操作，打開“文件”面板，在下拉菜單中選“管理站點(diǎn)”，可打開多站點(diǎn)管理面板。

用dreamweaver8編輯網(wǎng)頁(yè)或進(jìn)行網(wǎng)站管理時(shí)，每次只能操作一個(gè)站點(diǎn)，可選其它站點(diǎn)切換操作編輯。

在管理站點(diǎn)中，可復(fù)制站點(diǎn)，刪除站點(diǎn)（文件保存在硬盤上不會(huì)被刪），可導(dǎo)入，導(dǎo)出（導(dǎo)出為一個(gè)XML文件。）

任務(wù)三html代碼的基本結(jié)構(gòu)

（2課時(shí)）

一、【教學(xué)目標(biāo)】

知識(shí)目標(biāo)：介紹html網(wǎng)頁(yè)的編寫方法，介紹網(wǎng)頁(yè)命名規(guī)則和html代碼的基本結(jié)構(gòu)。技能目標(biāo)：掌握html代碼的基本結(jié)構(gòu)后，能在Dreamweaver8的“代碼”面板，建立第一個(gè)網(wǎng)頁(yè)頁(yè)面。

情感目標(biāo)：通過(guò)本次學(xué)習(xí)后，能培養(yǎng)學(xué)生對(duì)網(wǎng)頁(yè)制作軟件的進(jìn)一步了解，增強(qiáng)學(xué)生學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的興趣和欲望，熟知網(wǎng)頁(yè)制作軟件給我們?cè)O(shè)計(jì)網(wǎng)頁(yè)帶來(lái)的便捷。

二、【教學(xué)重點(diǎn)】

1．Html的基本概念。2．html網(wǎng)頁(yè)的編寫方法。3.建立第一個(gè)網(wǎng)頁(yè)頁(yè)面。

三、【教學(xué)難點(diǎn)】

html網(wǎng)頁(yè)的編寫方法。

四、【教學(xué)過(guò)程】

（一）明確項(xiàng)目任務(wù)（包括了導(dǎo)入項(xiàng)目任務(wù)和布置項(xiàng)目任務(wù)）

上節(jié)課，我們學(xué)習(xí)了創(chuàng)建本地站點(diǎn)、搭建模擬結(jié)構(gòu)，我們先一起在Dreamweaver中搭建起我們的站點(diǎn)結(jié)構(gòu)。結(jié)構(gòu)搭建好了，我們今天就一起來(lái)做網(wǎng)頁(yè)吧！

（二）制定項(xiàng)目實(shí)施計(jì)劃（項(xiàng)目實(shí)施）

1．教師講解示范：在桌面上展示一張簡(jiǎn)單網(wǎng)頁(yè)，查看其源代碼，和學(xué)生一起來(lái)分析，看看能發(fā)現(xiàn)什么問(wèn)題。引出我們html代碼的寫法。詳細(xì)介紹網(wǎng)頁(yè)命名規(guī)則和html代碼編寫規(guī)則。

2．學(xué)生活動(dòng)：學(xué)生小組討論，分析源代碼的特點(diǎn)。教師做好對(duì)學(xué)生的輔導(dǎo)檢查，對(duì)做的好的學(xué)生給予鼓勵(lì)。

3．教師講解示范：制作一張簡(jiǎn)單網(wǎng)頁(yè)。在Dreamweaver中創(chuàng)建一張網(wǎng)頁(yè)：“文件”---“新建”--“html”，在“代碼”面板逐個(gè)講解作用功能，完成第一張網(wǎng)頁(yè)。

4．學(xué)生活動(dòng)：請(qǐng)一個(gè)小組上臺(tái)演示，完成第一張網(wǎng)頁(yè),保存網(wǎng)頁(yè)，在瀏覽器預(yù)覽網(wǎng)頁(yè)。教師做好對(duì)學(xué)生的輔導(dǎo)檢查，對(duì)做的好的學(xué)生給予鼓勵(lì)。

5．教師講解示范：為網(wǎng)頁(yè)添加標(biāo)題。觀察瀏覽器中顯示出標(biāo)題，引出中的