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