《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版） 》教案 第3課 站點(diǎn)的創(chuàng)建與管理（一）

第課站點(diǎn)的創(chuàng)建與管理第課站點(diǎn)的創(chuàng)建與管理（一）3（一）站點(diǎn)的創(chuàng)建與管理（一）站點(diǎn)的創(chuàng)建與管理第課3PAGE4PAGE4PAGE5PAGE53第3第課站點(diǎn)的創(chuàng)建與管理（一） 課題站點(diǎn)的創(chuàng)建與管理(一）課時(shí)2課時(shí)（180min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）認(rèn)識(shí)DreamweaverCC工作界面（2）了解DreamweaverCC的初始化設(shè)置（3）掌握調(diào)整DreamweaverCC工作界面的方法思政育人目標(biāo)：（1）體驗(yàn)網(wǎng)頁(yè)制作工具的使用方法，培養(yǎng)基本的工作能力（2）練習(xí)創(chuàng)建站點(diǎn)，鍛煉學(xué)生的實(shí)踐能力，培養(yǎng)學(xué)生的探究精神。教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：DreamweaverCC工作界面教學(xué)難點(diǎn)：調(diào)整DreamweaverCC工作界面教學(xué)方法情景模擬法、問(wèn)答法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：傳授新知（23min）課堂搶答（10min）第2節(jié)課：?jiǎn)栴}導(dǎo)入（5min）

任務(wù)實(shí)施（25min）

實(shí)踐探究（10min）

課堂小結(jié)（3min）

作業(yè)布置（2min）教學(xué)過(guò)程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過(guò)文旌課堂APP，查閱資料，了解DreamweaverCC軟件【學(xué)生】按照教師要求完成課前任務(wù)通過(guò)課前的預(yù)熱，讓學(xué)生了解所學(xué)軟件，激發(fā)學(xué)生的學(xué)習(xí)欲望考勤

（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問(wèn)題導(dǎo)入

（10min）【教師】提出以下問(wèn)題：閱讀教材，說(shuō)一說(shuō)什么是DreamweaverCC軟件，它的主要作用是什么？【學(xué)生】思考、舉手發(fā)言DreamweaverCC是一款集網(wǎng)頁(yè)制作和網(wǎng)站管理于一身，所見即所得的可視化網(wǎng)頁(yè)編輯軟件。通過(guò)問(wèn)題導(dǎo)入，引導(dǎo)學(xué)生思考，調(diào)動(dòng)學(xué)生的主觀能動(dòng)性，了解本節(jié)課要學(xué)習(xí)的內(nèi)容傳授新知

（23min）【教師】通過(guò)學(xué)生的發(fā)言，引入新的知識(shí)點(diǎn)，介紹DreamweaverCC一、DreamweaverCC的工作界面【教師】安裝DreamweaverCC，展示其工作界面，幫助學(xué)習(xí)理解DreamweaverCC的工作界面比較簡(jiǎn)潔，主要由應(yīng)用程序欄、工具欄和文檔標(biāo)簽欄等組成。（詳見教材）【教師】布置以下學(xué)習(xí)任務(wù)：根據(jù)教材提示，安裝軟件，探索DreamweaverCC軟件應(yīng)用程序欄、工具欄、文檔標(biāo)簽欄的功能【學(xué)生】思考、實(shí)際操作【教師】巡視課堂紀(jì)律，對(duì)學(xué)習(xí)有困難的學(xué)生進(jìn)行幫助1．應(yīng)用程序欄應(yīng)用程序欄位于工作區(qū)頂部，左側(cè)顯示菜單欄，右側(cè)包含工作區(qū)切換器（可在其下拉列表中選擇不同的工作區(qū)模式）和程序窗口控制（最小化、最大化及關(guān)閉）按鈕2．工具欄工具欄用于放置一些常用按鈕，如打開文檔、文件管理等。此外，單擊工具欄最下方的自定義工具欄按鈕可以打開“自定義工具欄”對(duì)話框，在該對(duì)話框中能夠自由設(shè)置工具欄中要顯示的按鈕。3．文檔標(biāo)簽欄文檔標(biāo)簽欄依次顯示當(dāng)前打開的所有網(wǎng)頁(yè)文檔的標(biāo)簽（標(biāo)簽上顯示相應(yīng)網(wǎng)頁(yè)文檔的名稱）及其關(guān)閉按鈕；當(dāng)某個(gè)文檔鏈接了外部文檔時(shí)，其文檔標(biāo)簽下方將顯示當(dāng)前文檔源代碼及其鏈接的文檔名，單擊對(duì)應(yīng)的鏈接按鈕，可打開其所鏈接的文檔。（詳見教材）【教師】展示DreamweaverCC軟件的界面，輔助學(xué)習(xí)理解DreamweaverCC界面的文檔工具欄的功能4．文檔工具欄文檔工具欄位于文檔標(biāo)簽欄上方，包括代碼、拆分、設(shè)計(jì)等按鈕，單擊它們可切換至對(duì)應(yīng)的視圖模式。代碼：在文檔窗口中顯示代碼視圖。代碼視圖是用于編寫HTML、CSS、JavaScript，以及其他任何類型代碼的手工編碼環(huán)境。設(shè)計(jì)：在文檔窗口中顯示設(shè)計(jì)視圖。設(shè)計(jì)視圖中顯示的效果類似于在瀏覽器中看到的效果，用戶可以在該視圖中直接編輯網(wǎng)頁(yè)中的各個(gè)對(duì)象，并且在對(duì)網(wǎng)頁(yè)文檔進(jìn)行操作之后，網(wǎng)頁(yè)代碼會(huì)自動(dòng)更新。實(shí)時(shí)視圖：?jiǎn)螕簟霸O(shè)計(jì)”按鈕右側(cè)的三角按鈕，在展開的下拉列表中選擇“實(shí)時(shí)視圖”選項(xiàng)，文檔窗口中即顯示實(shí)時(shí)視圖，其與設(shè)計(jì)視圖類似，但能更逼真地顯示文檔在瀏覽器中的效果，還可以與文檔進(jìn)行交互。（詳見教材）【教師】展示DreamweaverCC軟件的界面，輔助學(xué)習(xí)理解DreamweaverCC界面的狀態(tài)欄、“插入”面板、“文件”面板等菜單的功能5．狀態(tài)欄狀態(tài)欄位于文檔窗口底部，它提供了當(dāng)前文檔的一些基本信息。6．“插入”面板“插入”面板包含用于創(chuàng)建和插入對(duì)象（如表格、圖像等）的按鈕，在設(shè)計(jì)視圖或代碼視圖中定位插入點(diǎn)后單擊某個(gè)按鈕可插入對(duì)應(yīng)的元素。7．“文件”面板使用“文件”面板可查看和管理站點(diǎn)中的所有文件與文件夾，包括網(wǎng)頁(yè)文件中使用的素材文件和網(wǎng)頁(yè)文件8．“CSS設(shè)計(jì)器”面板使用“CSS設(shè)計(jì)器”面板能夠非常方便地創(chuàng)建CSS樣式。通過(guò)該面板設(shè)置屬性后，CSS文件將自動(dòng)更新代碼?！窘處煛坎贾靡韵聦W(xué)習(xí)任務(wù)：根據(jù)教材提示，自主探索“CSS設(shè)計(jì)器”面板的功能【學(xué)生】思考、實(shí)際操作、探索【教師】巡視課堂紀(jì)律，對(duì)學(xué)習(xí)有困難的學(xué)生進(jìn)行幫助“CSS設(shè)計(jì)器”面板由以下窗格組成。源：列出與文檔相關(guān)的所有CSS樣式表。單擊窗格左上方的按鈕，可以創(chuàng)建新的CSS文件或?qū)⒁延械腃SS文件附加到文檔，也可以直接在頁(yè)面中定義樣式。媒體：顯示在“源”窗格中所選樣式文件中的全部媒體查詢。如果不選擇特定媒體查詢，則此窗格將顯示與文檔關(guān)聯(lián)的所有媒體查詢。選擇器：顯示在“源”窗格中所選樣式文件中的全部選擇器。如果同時(shí)還選擇了某個(gè)媒體查詢，則此窗格將只顯示該媒體查詢下的選擇器。屬性：顯示能夠?yàn)橹付ㄟx擇器設(shè)置屬性的列表。（詳見教材）二、DreamweaverCC的初始化設(shè)置DreamweaverCC中的一些屬性設(shè)置可以根據(jù)個(gè)人的喜好及習(xí)慣進(jìn)行調(diào)整，方法為單擊“編輯”菜單，在展開的下拉菜單中選擇“首選項(xiàng)”選項(xiàng)，打開“首選項(xiàng)”對(duì)話框，然后進(jìn)行設(shè)置。下面介紹幾個(gè)常用設(shè)置。字體：在“分類”列表框中選擇“字體”選項(xiàng)，對(duì)話框右側(cè)顯示字體設(shè)置區(qū)，在其中可以設(shè)置代碼的字體樣式及字號(hào)等。實(shí)時(shí)預(yù)覽：在“分類”列表框中選擇“實(shí)時(shí)預(yù)覽”選項(xiàng)，對(duì)話框右側(cè)顯示實(shí)時(shí)預(yù)覽設(shè)置區(qū)，在界面上方的列表框中可以修改用于查看頁(yè)面效果的默認(rèn)瀏覽器，選擇對(duì)應(yīng)瀏覽器選項(xiàng)后勾選“主瀏覽器”復(fù)選框，然后單擊“應(yīng)用”按鈕即可界面：在“分類”列表框中選擇“界面”選項(xiàng)，對(duì)話框右側(cè)顯示界面設(shè)置區(qū)，單擊界面上方的正方形按鈕即可切換DreamweaverCC的主題顏色。【學(xué)生】聆聽、思考、理解、記憶通過(guò)講解，讓學(xué)生了解DreamweaverCC的工作界面，通過(guò)講解和對(duì)DreamweaverCC的分析，掌握DreamweaverCC軟件的初始化設(shè)置課堂搶答（10min）【教師】提出DreamweaverCC工作界面不同組成部分的名稱，讓學(xué)生搶答各組成部分的作用【學(xué)生】聆聽、搶答、說(shuō)出DreamweaverCC工作界面不同組成部分的作用通過(guò)課堂搶答加深學(xué)生對(duì)所學(xué)知識(shí)的認(rèn)識(shí)，活躍課堂氣氛第二節(jié)課問(wèn)題導(dǎo)入

（5min）【教師】提問(wèn)引出新知識(shí)點(diǎn)【學(xué)生】思考、發(fā)言用問(wèn)題導(dǎo)入，讓學(xué)生主動(dòng)探究調(diào)整DreamweaverCC工作界面任務(wù)實(shí)施

（25min）【教師】演示調(diào)整DreamweaverCC工作界面的操作，并對(duì)其進(jìn)行分析使用DreamweaverCC制作或編輯網(wǎng)頁(yè)時(shí)，經(jīng)常需要打開、關(guān)閉某個(gè)面

板，或?qū)ζ涔ぷ鹘缑孢M(jìn)行各種調(diào)整。下面學(xué)習(xí)調(diào)整DreamweaverCC工作界

面的常見操作。（1）快速打開與關(guān)閉面板組。默認(rèn)狀態(tài)下，文檔窗口右側(cè)為面板組。按“F4”鍵可將其關(guān)閉；再次按“F4”鍵可恢復(fù)原來(lái)的狀態(tài)。（2）折疊與擴(kuò)展面板組。單擊面板組右上角的控制按鈕，即可將面板組折疊起來(lái)，想要展開時(shí)再次單擊該按鈕即可。（3）添加面板。單擊“窗口”→“行為”菜單，即可在工作區(qū)中添加“行為”面板。（4）移動(dòng)面板。鼠標(biāo)左鍵按住“行為”面板的上方，向工作區(qū)右側(cè)的面板組上方靠近，面板組將顯示藍(lán)色邊框，此時(shí)松開鼠標(biāo)，即可將該面板合并到面板組中，如圖2-14所示。（5）關(guān)閉面板。（6）重置工作區(qū)。（詳見教材）【學(xué)生】觀察、記錄、理解，上機(jī)操作【教師】巡堂指導(dǎo)，及時(shí)解決學(xué)生的問(wèn)題通過(guò)任務(wù)實(shí)施，讓學(xué)生們主動(dòng)參與學(xué)習(xí)，對(duì)調(diào)整DreamweaverCC工作界面相關(guān)操作留下印象，在實(shí)踐過(guò)程中理解、鞏固知識(shí)點(diǎn)實(shí)踐探索

（10min）【教師】組織學(xué)生閱讀“高手點(diǎn)撥”中的內(nèi)容，嘗試在DreamweaverCC中進(jìn)行更多操作【學(xué)生】自主學(xué)習(xí)、理解、上機(jī)操作【教師】巡堂指導(dǎo)，及時(shí)解決學(xué)生的問(wèn)題通過(guò)實(shí)踐探索，使學(xué)生進(jìn)一步鞏固所學(xué)知識(shí)，了解更多關(guān)于DreamweaverCC的知識(shí)課堂小結(jié)

（3min）【教師】簡(jiǎn)要總結(jié)本節(jié)課的要點(diǎn)本節(jié)課了解了DreamweaverCC的基本界面，DreamweaverCC軟件的初始化，通過(guò)實(shí)踐學(xué)習(xí)了如何調(diào)整DreamweaverCC的工作界面。希望大家在課下多加復(fù)習(xí)，熟悉DreamweaverCC的基本界面的元素和調(diào)整方法?！緦W(xué)生】總結(jié)回顧知識(shí)點(diǎn)總結(jié)知識(shí)點(diǎn)，鞏固印象作業(yè)布置

（2mi