【文章內(nèi)容簡(jiǎn)介】 （ 1）認(rèn)識(shí) Dreamweaver,熟悉 Dreamweaver 軟件環(huán)境； （ 2）掌握建立空站點(diǎn)的操作方法； （ 3）掌握新建文件夾的操作方法； （ 4）掌握新建網(wǎng)頁(yè)的操作方法 過(guò)程與方法：鞏固設(shè)計(jì)網(wǎng)站結(jié)構(gòu)的方法 情感態(tài)度與價(jià)值觀 ： （ 1）形成良好的文件命名習(xí)慣； （ 2）樹(shù)立成功建站的信心。 【教學(xué)重點(diǎn)】： （ 1）理解選擇網(wǎng)頁(yè)制作工 具的原則； （ 2）理解站點(diǎn)的概念； （ 3）理解建立站點(diǎn)文件夾的意義； （ 4）能夠完成建立站點(diǎn)、在站點(diǎn)中建立文件夾和網(wǎng)頁(yè)的一系列任務(wù)。 【教學(xué)難點(diǎn)】： （ 1）鞏固設(shè)計(jì)網(wǎng)站結(jié)構(gòu)的方法； （ 2）掌握網(wǎng)頁(yè)命名的技巧。 【教學(xué)方法】：對(duì)比教學(xué)法、探究學(xué)習(xí)法、模仿學(xué)習(xí)法 【教學(xué)準(zhǔn)備】：教學(xué)資源網(wǎng)站； 相關(guān)素材整理歸類； 【教學(xué)過(guò)程】： 一、導(dǎo)入新課 介紹網(wǎng)站。網(wǎng)站是由超鏈接將多個(gè)網(wǎng)頁(yè)組織在一起的集合，其中包含了許多網(wǎng)頁(yè)文件以及圖片、 Flash 動(dòng)畫(huà)等素材。 如： 站點(diǎn) ,就是指網(wǎng)站具體位置。 二、新課學(xué)習(xí) 頁(yè)制作工具。 Dreamweaver 是專業(yè)的網(wǎng)頁(yè)制作軟件。它最大的特點(diǎn)就是“所見(jiàn)即所得”的可視化編輯，也提供 HTML 代碼。 建空站點(diǎn) ⑴ 啟動(dòng) Dreamweaver，“站點(diǎn)”→“新建站點(diǎn)”→“站點(diǎn)定義”。 ⑵ 設(shè)置站點(diǎn)屬性。 ① “ 站點(diǎn)定義”→“基本”命名為“ life_water”。 ② “下一步”選擇“否，我不想使用服務(wù)器技術(shù)”。 ③ “下一步”選擇“編輯我的計(jì)算機(jī)上的本地副本，完成任務(wù)后再上傳 到服務(wù)器（推薦）。 ④ “文件夾”→“下一步”→“您如何連接到遠(yuǎn)程服務(wù)器”→“無(wú)”。 ⑤ “下一步”→“站點(diǎn)定義總結(jié)”→“完成”。 建文件夾和網(wǎng)頁(yè) ㈠ 新建文件夾 （ 1）“文件”→右鍵單擊“站點(diǎn) life_water”→“新建文件夾”名為“ untitled”，將其改為“ shuiziyuangaikuang”。 （ 2）右鍵單擊“ shuiziyuangaikuang”→“新建文件夾””→“ shijieshuikuang”，同樣地的方法依次建立“ zhongguoshuikuang”、“ jiaxiangshuikuang”文件夾。 （ 3）重復(fù)上述步驟，將“ baohushuiziyuan”及其子文件夾“ shuidelangfei”、“ shuidewuran”和“ shuidebaohu”建立好。 ㈡ 新建網(wǎng)頁(yè) 1．在“文件”面板中右鍵單擊“站點(diǎn) _ife— water”，在彈出的快捷菜單中選擇“新建文件”，這時(shí)會(huì)新增一行，一個(gè)新的網(wǎng)頁(yè)就建好了。 2．將處于重命名狀態(tài)的網(wǎng)頁(yè)命名為“ index． htmi”。 3．設(shè)置“ index． html”為網(wǎng)站首頁(yè)。 (1)執(zhí)行“站點(diǎn)”→“管理站點(diǎn)”命令，選中“ lire— water”站點(diǎn)，單擊“ 編輯”菜單，彈出“站點(diǎn)定義”對(duì)話框。 (2)在“高級(jí)”選項(xiàng)卡“分類”欄中選擇“站點(diǎn)地圖布局”，在右側(cè)區(qū)域“主頁(yè)”一欄選擇剛才建立好的“ index． html”，單擊“確定”，“ index． html”就成了網(wǎng)站的首頁(yè)。 （ 3）雙擊“ index． html”左邊的工作區(qū)變成網(wǎng)頁(yè)的編輯區(qū)域，可輸入文字。 （ 4）保存文件。執(zhí)行“文件”→“在瀏覽器中預(yù)覽”→“ IExplore F12”進(jìn)行預(yù)覽。 學(xué)生上機(jī)操作的任務(wù)和目標(biāo)： （ 1）認(rèn)識(shí) Dreamweaver,熟悉 Dreamweaver 軟件環(huán)境； (2）新建 站點(diǎn)； （ 3）新建文件夾； （ 4）新建網(wǎng)頁(yè)。 第四節(jié) 夢(mèng)幻織網(wǎng) —— 表格布局、插入媒體元素 【教學(xué)目標(biāo)】： 知識(shí)與技能： 掌握利用表格實(shí)現(xiàn)網(wǎng)頁(yè)版面布局的方法； 學(xué)會(huì)設(shè)置網(wǎng)頁(yè)中文字的格式； 學(xué)會(huì)調(diào)整圖片，使其符合要求； 掌握為網(wǎng)頁(yè)添加背景的方法； 【教學(xué)重點(diǎn)】： .給“生命之源 —— 水”的主題網(wǎng)站的首頁(yè)進(jìn)行表格布局。 給表格進(jìn)行屬性設(shè)置。 編輯網(wǎng)頁(yè) —— 插入媒體元素。 【教學(xué)難點(diǎn)】： 對(duì)表格進(jìn)行屬性設(shè)置 插入媒體元素 【教學(xué)方法】：探究學(xué)習(xí)法、模仿學(xué)習(xí)法 【教學(xué)準(zhǔn)備 】：相關(guān)的網(wǎng)頁(yè)制作素材 【教學(xué)課時(shí)】： 2課時(shí) 【教學(xué)過(guò)程】： 第一課時(shí) 一、復(fù)習(xí)上一節(jié)課的內(nèi)容 建立站點(diǎn) 重點(diǎn)講講“生命之源 —— 水”主題網(wǎng)站的結(jié)構(gòu)布局（上節(jié)課很多學(xué)生沒(méi)有掌握） 二、新課 明確學(xué)習(xí)內(nèi)容：表格布局，給表格進(jìn)行屬性設(shè)置。 學(xué)生自讀教材實(shí)踐 1 的內(nèi)容以求大致了解學(xué)習(xí)內(nèi)容。 教師演示操作步驟： （ 1）啟動(dòng)軟件→雙擊上一節(jié)課新建主頁(yè)“ ”（打開(kāi)編輯窗口） （ 2）執(zhí)行“插入” →“表格”（彈出表格對(duì)話框） （ 3）在對(duì)話框中設(shè)置參數(shù)：行數(shù)為 1，列數(shù)為 2，像素為 980，邊框粗細(xì)為 1 像素，其余參數(shù)為默認(rèn)值。 (4)重復(fù)上一個(gè)步驟，分別插入兩個(gè) 1行 3 列，像素為 980的表格。 提示：因?yàn)槟壳帮@示器的分辨率都在 1024*768 之上，表格的布局寬度為 980 不會(huì)出現(xiàn)滾動(dòng)條，不過(guò)我們的電腦只有 800*600，所有達(dá)不到效果。 （ 5）設(shè)置表格屬性：?jiǎn)螕舻谝粋€(gè)表格左邊的單元格，在“屬性”對(duì)話框中設(shè)置像素為：寬為 170，高為 100。如圖所示 （ 6）重復(fù)步驟 5，將插入的第三個(gè)表格的兩側(cè)的單元格寬設(shè)置為 170 像素。 （ 7）在第三個(gè)表格兩側(cè)的單元格中分別插入一個(gè) 3行 1 列、寬為 170 像素的表格。 （ 8）將剛插入的兩個(gè)表格的所有單元格的高度設(shè)為 200 像素。 （ 9）選擇整個(gè)表格，在“屬性’對(duì)話框中將對(duì)齊方式改為“居中對(duì)齊”。如圖所示。 學(xué)生根據(jù)老師的演示利用表格給網(wǎng)頁(yè)進(jìn)行布局。 三、總結(jié)本堂課所學(xué)內(nèi)容 第二課時(shí) 課時(shí)目標(biāo)：完成給表格媒體插入媒體元素（教材實(shí)踐 2至實(shí)踐 4的內(nèi)容） 一、復(fù)習(xí)上一節(jié)課的內(nèi)容 二、新課 明確上一節(jié)課所制定的表格的各個(gè)單元格所要的內(nèi)容。 網(wǎng)站標(biāo)志 （圖片） 動(dòng)畫(huà)條幅 導(dǎo)航條 導(dǎo)航條 導(dǎo)航條 圖片 文字 圖片 圖片 圖片 圖片 圖片 教師演示 實(shí)踐 1 （ 1）把第二個(gè)表格作為導(dǎo)航區(qū)，分別在三個(gè)單元格中輸入“首頁(yè)”、“水資源概況”、“保護(hù)水資源”。 （ 2）在中間最大的區(qū)域的單元格中粘貼文字。 對(duì)剛才輸入的內(nèi)容進(jìn)行對(duì)齊設(shè)置 （ 3）在導(dǎo)航欄三個(gè)空白處單擊，在“屬性”檢查器中將水平對(duì)齊方式改為“居中對(duì)齊”。 注意：要區(qū)分表格對(duì)齊和表格內(nèi)容對(duì)齊的區(qū)別。 （ 4）設(shè)置內(nèi)容信息區(qū)將單元格垂直對(duì)齊改為“頂端”對(duì)齊。 （ 5）選擇文字，在“屬性”中調(diào)整字體的大小和顏色，設(shè)置單元格的背景顏色。 實(shí)踐 3 （ 1）在第一個(gè)單元格中點(diǎn)擊鼠標(biāo)，執(zhí)行插入→圖像命令。 （ 2）在彈出的“選擇圖 像源文件”對(duì)話框中選擇網(wǎng)站標(biāo)志圖片，單擊確定。 （ 3）在彈出的“圖像標(biāo)簽輔助功能屬性”對(duì)話框中單擊“確定”按鈕。 改變相片的大小使之符合要求。 （ 4）選中圖片，在屬性檢查器中將圖片的大小設(shè)為寬為 170像素，高為 100 像素。 插入其他圖片 適當(dāng)調(diào)整圖片大小并非一定按 170*200。 實(shí)踐 4 （ 1）在網(wǎng)站條幅單元格中點(diǎn)擊→插入→媒體→ flash 命令。 （ 2）在彈出的“選擇文件”對(duì)話框中選擇準(zhǔn)備好的 flash動(dòng)畫(huà)，單擊“確定”按鈕即可。 （ 3）調(diào)整 flash 動(dòng)畫(huà)的大小，方法和調(diào)整圖片大小的方法一樣。 （ 4）點(diǎn)擊 flash 動(dòng)畫(huà)，在屬性中點(diǎn)擊“播放”即可以看到效果。 保存網(wǎng)頁(yè) 文件→保存→按 F12 鍵可以通過(guò)瀏覽器查看整個(gè)網(wǎng)頁(yè)的效果。 學(xué)生根據(jù)老師的演示看書(shū)單獨(dú)完成主頁(yè)的制作，老師下堂尋常，解決疑難。 三、小結(jié)本堂課內(nèi)容 四、教學(xué)反思。 第五節(jié)聯(lián)通世界 —— 添加超鏈接、設(shè)置頁(yè)面屬性 【教學(xué)目標(biāo)】： 知識(shí)與技能： （ 1）理解導(dǎo)航的作用； （ 2）學(xué)會(huì)正確設(shè)置超鏈接； （ 3）學(xué)會(huì)更改網(wǎng)頁(yè)背景顏色和網(wǎng)頁(yè)標(biāo)題。 【過(guò)程與方法】：體會(huì)利用超極鏈接解決頁(yè)面跳轉(zhuǎn)的方法 【情感態(tài)度與價(jià)值觀 】 （ 1）形成技術(shù)是為人服務(wù)的技術(shù)觀； （ 2）鞏固良好的命名習(xí)慣； 【教學(xué)重點(diǎn)】 ： 1. 文字超級(jí)鏈接的設(shè)置； 2. 按鈕或圖片超級(jí)鏈接的設(shè)置 。 【教學(xué)難點(diǎn)】 ： 超級(jí)鏈接的設(shè)置 【教學(xué)方法】 ： 講授法、演示法、上機(jī)實(shí)習(xí)法 【教學(xué)準(zhǔn)備】 ：從 下載教學(xué)資源 【教學(xué)過(guò)程】 ： 一、 創(chuàng)設(shè)情境，講授新課 這節(jié)課我們還是以 實(shí)例 ，來(lái)看看怎么把我們?cè)谇懊嬉呀?jīng)建立好的零散的網(wǎng)頁(yè)組成一個(gè)整體 ，進(jìn)而完成網(wǎng)站的建設(shè)。 在前面的學(xué)習(xí)過(guò)程中，我們已經(jīng)把各個(gè)網(wǎng)頁(yè)建設(shè)好了，但到目前為止，網(wǎng)頁(yè)之間還沒(méi)聯(lián)系起來(lái)并組一個(gè)有機(jī)的整體（也就是網(wǎng)站），我們就來(lái)看看怎么樣把零散的網(wǎng)頁(yè)鏈接起來(lái)。 ㈠ 內(nèi)部頁(yè)面的鏈接 1． 首頁(yè)鏈接到各個(gè)子頁(yè)面 2． 各子頁(yè)面返回到首頁(yè)面 瀏覽者從首頁(yè)進(jìn)入子頁(yè)面后，有時(shí)還需要從當(dāng)前子頁(yè)面再返回到主頁(yè)中，因此，需要在各子頁(yè)面中建立超級(jí)鏈接，返回到主頁(yè)。 3． 在新窗口中打開(kāi)鏈接頁(yè)面 ㈡ 鏈接到外部網(wǎng)站 我們知道，在我們的網(wǎng)站中，可以建立鏈接到網(wǎng)站以外的地方，如：友情鏈接等。我們來(lái)看看，鏈接到 外部網(wǎng)站怎么來(lái)做。 我們以首頁(yè)中鏈接到清華大學(xué)為例，在首頁(yè)加入清華大學(xué)網(wǎng)站的 LOGO（后面簡(jiǎn)稱清華大學(xué)圖片，其實(shí)就是清華大學(xué)的校徽?qǐng)D案），作為鏈接外部網(wǎng)站的鏈接點(diǎn) ，右擊，選擇超鏈接。 ，在地址欄中輸入清華大學(xué)網(wǎng)站的地址： ，添加期貨友情鏈接。 二、 知識(shí)遷移，拓展思維 有關(guān)超級(jí)鏈接還有許多其他方 式，如：鏈接到電子信箱；用書(shū)簽建立超鏈接…… 第六節(jié) 交流與評(píng)價(jià) —— 發(fā)布與評(píng)價(jià)網(wǎng)站 【教學(xué)目標(biāo)】： 知識(shí)與技能 角網(wǎng)站發(fā)布的基本過(guò)程； 學(xué)會(huì)使用 Dreamweaver 檢查站點(diǎn)超鏈； 正確設(shè)置超鏈接。 【過(guò)程與方法】： 1,掌握評(píng)價(jià)網(wǎng)站的方法； 學(xué)會(huì)合作交流的方法。 【情感態(tài)度與價(jià)值觀】 培弄協(xié)作的意識(shí)； 培弄學(xué)生踏實(shí)的實(shí)踐風(fēng)格； 在交往中表現(xiàn)寬容、忍耐的態(tài)度。 【教學(xué)重點(diǎn)】：學(xué)會(huì)檢查站點(diǎn)超鏈接；了解網(wǎng)站發(fā)布過(guò)程；學(xué)會(huì)上傳網(wǎng)站。 【教學(xué)難點(diǎn)】：掌握評(píng)價(jià)網(wǎng)站的方法；學(xué)會(huì)合 作交流的方法。 【教學(xué)方法】：電腦演示法 【教學(xué)過(guò)程】： 一、新課講解 直接上傳網(wǎng)站的方法：不借助 cut FTP 等上傳下載軟件，除了使用 Dreamweaver 自帶的功能外，使用 IE 也可以直接上傳網(wǎng)站。以網(wǎng)易為例，在 IE 地址欄中輸入 后回車。這時(shí)系統(tǒng)會(huì)要求輸入用戶名和密碼， IE 就會(huì)進(jìn)入所分配的空間，在資源管理器中打開(kāi)本地磁盤(pán)中主頁(yè)所在的目錄。選中主頁(yè)的所有目錄和文件，執(zhí)行“復(fù)制”命令，粘貼到 IE 打開(kāi)的空間，等待傳送完畢后就可以瀏覽了。 二、教學(xué)活動(dòng)： （ 1）合成網(wǎng)站時(shí)，容易出現(xiàn) 的