《網(wǎng)頁制作》項(xiàng)目式教案.doc

_長汀職業(yè)中專學(xué)校教案科目：電商網(wǎng)頁制作計(jì)算機(jī)組：張開秀班級(jí)：15電商3、4班項(xiàng)目一 初始dreamweaver8和建立站點(diǎn)章 節(jié)項(xiàng)目一1 初識(shí)Dreamweaver 8 課時(shí)；2 課時(shí)講授主要內(nèi)容1. Dreamweaver 8的基本概況2. Dreamweaver 8的功能和作用3. Dreamweaver 8的學(xué)習(xí)方法4. Dreamweaver 8的工作界面5. Dreamweaver 8工具欄和面板的使用方法重 點(diǎn)難 點(diǎn)Dreamweaver 8的工作界面Dreamweaver 8常用工具欄和面板的使用方法要求掌握的知識(shí)點(diǎn)和分析方法要求掌握Dreamweaver 8的功能和作用、定義站點(diǎn)的基本過程、創(chuàng)建文件和保存文件的方法、Dreamweaver 8 窗口界面、浮動(dòng)面板組、【標(biāo)準(zhǔn)】工具欄、【文件】面板、【文檔】工具欄、【屬性】面板、【插入】面板、工作區(qū)布局等知識(shí)點(diǎn)。項(xiàng)目主要是讓學(xué)生對(duì)網(wǎng)頁制作軟件Dreamweaver 8有一個(gè)總體認(rèn)識(shí)，并掌握學(xué)習(xí)Dreamweaver 8的基本方法。在項(xiàng)目中，首先介紹Dreamweaver 8的發(fā)展歷程、功能和作用，同時(shí)欣賞一些優(yōu)秀網(wǎng)站，然后介紹學(xué)習(xí)Dreamweaver 8的基本方法，最后介紹Dreamweaver 8的工作界面及其相關(guān)知識(shí)。授課思路，采用的教學(xué)方法和輔助手段，板書設(shè)計(jì)，重點(diǎn)如何突出，難點(diǎn)如何解決，師生互動(dòng)等1、從網(wǎng)頁案例欣賞入手，讓學(xué)生增強(qiáng)對(duì)網(wǎng)頁設(shè)計(jì)與制作這門課程的興趣，同時(shí)增強(qiáng)創(chuàng)業(yè)的信心。2、以情景模擬的方式介紹Dreamweaver 8的功能和作用以及學(xué)習(xí)方法。3、以制作一個(gè)簡(jiǎn)單的網(wǎng)頁為例（悠悠我心的個(gè)人網(wǎng)站），讓學(xué)生認(rèn)識(shí)Dreamweaver 8的工作界面和工作過程。4、通過PPT課件講授基本知識(shí)。5、讓學(xué)生自己動(dòng)手制作教學(xué)案例，來進(jìn)一步鞏固Dreamweaver 8的使用。作業(yè)布置打開教師發(fā)布的悠悠我心個(gè)人網(wǎng)站，鞏固Dreamweaver 8的使用教學(xué)反思通過學(xué)習(xí)，大部分學(xué)生對(duì)網(wǎng)頁制作這門課產(chǎn)生了濃厚的興趣。章 節(jié)項(xiàng)目一2規(guī)劃和創(chuàng)建站點(diǎn) 課時(shí)；2 課時(shí)講授主要內(nèi)容1. 創(chuàng)建站點(diǎn)的基本方法2. 管理站點(diǎn)的基本方法3. 設(shè)置首選參數(shù)的方法4. 創(chuàng)建文件夾和文件的基本方法重 點(diǎn)難 點(diǎn)導(dǎo)入和導(dǎo)出站點(diǎn)的基本方法設(shè)置首選參數(shù)的方法要求掌握的知識(shí)點(diǎn)和分析方法要求掌握網(wǎng)站制作流程、網(wǎng)頁布局的基本方式、定義站點(diǎn)、創(chuàng)建文件夾和文件、設(shè)置首選參數(shù)等知識(shí)點(diǎn)。項(xiàng)目主要是讓學(xué)生對(duì)使用Dreamweaver 8定義、創(chuàng)建和發(fā)布站點(diǎn)有一個(gè)總體認(rèn)識(shí)，并學(xué)會(huì)其基本操作方法。在項(xiàng)目中，首先介紹做好一個(gè)網(wǎng)站必須經(jīng)歷的基本過程及網(wǎng)頁布局和色彩搭配的基礎(chǔ)知識(shí)，然后介紹服務(wù)器環(huán)境的配置以及在Dreamweaver 8中定義和創(chuàng)建站點(diǎn)的基本方法，最后使用Dreamweaver 8發(fā)布站點(diǎn)的方法。授課思路，采用的教學(xué)方法和輔助手段，板書設(shè)計(jì)，重點(diǎn)如何突出，難點(diǎn)如何解決，師生互動(dòng)等1、教師講解網(wǎng)站制作流程、網(wǎng)頁布局的基本方式、網(wǎng)頁色彩搭配的原理和技巧等基礎(chǔ)知識(shí)，并演示創(chuàng)建站點(diǎn)的基本過程。2、通過PPT課件講授基本知識(shí)。3、讓學(xué)生自己動(dòng)手重新制作教學(xué)案例。4、通過實(shí)訓(xùn)讓學(xué)生進(jìn)一步熟悉所學(xué)知識(shí)。作業(yè)布置新建悠悠我心的站點(diǎn)，導(dǎo)出，發(fā)送給老師教學(xué)反思大部分學(xué)生都能很好的完成站點(diǎn)建設(shè)，對(duì)網(wǎng)頁制作的基本知識(shí)有了進(jìn)一步的了解 項(xiàng)目二 制作網(wǎng)站首頁任務(wù)描述：上一個(gè)項(xiàng)目中，創(chuàng)建了“幽幽我心的個(gè)人網(wǎng)站”。本項(xiàng)目將在這個(gè)站點(diǎn)中進(jìn)行首頁內(nèi)容的制作，學(xué)習(xí)如何在網(wǎng)頁中添加文本和圖像，使用CSS設(shè)置文本、圖像和頁面的樣式。任務(wù)完成后效果如圖所示：本項(xiàng)具體的教學(xué)過程共分為以下五個(gè)方面的任務(wù)：任務(wù)一 添加首頁文本（4課時(shí)）任務(wù)二 編輯文本樣式 （4課時(shí)）任務(wù)三 添加圖像 （4課時(shí)）任務(wù)四 創(chuàng)建與應(yīng)用CSS美化網(wǎng)頁 （4課時(shí)）任務(wù)五 使用代碼制作圖文網(wǎng)頁 （4課時(shí)）任務(wù)一 添加首頁文本一、提出任務(wù)1任務(wù)目標(biāo)完成首頁文本內(nèi)容。2. 解決的問題通過完成本任務(wù)學(xué)習(xí)修改網(wǎng)頁標(biāo)題，在網(wǎng)頁中添加文本，分段換行和段內(nèi)換行，輸入連續(xù)空格，保存和預(yù)覽網(wǎng)頁等知識(shí)。 3. 本任務(wù)所涉及原有知識(shí)要點(diǎn)完成本任務(wù)所涉及原有知識(shí)要點(diǎn)有：使用站點(diǎn)管理功能創(chuàng)建站點(diǎn)，在文件面板中創(chuàng)建和打開首頁文件。二、教學(xué)目標(biāo)1. 知識(shí)目標(biāo) 掌握修改網(wǎng)頁標(biāo)題。 掌握輸入網(wǎng)頁文本內(nèi)容的方法。 掌握網(wǎng)頁編輯中三種不同換行方式的區(qū)別。 了解在文檔窗口中輸入連續(xù)空格的幾種方法。 熟悉保存和預(yù)覽網(wǎng)頁的方法。2. 能力目標(biāo)掌握添加和編輯網(wǎng)頁文本的基本操作，能夠根據(jù)具體需求添加網(wǎng)頁文本內(nèi)容；通過參加科學(xué)探究活動(dòng)，具有初步添加和編輯網(wǎng)頁文本的能力，并加深對(duì)網(wǎng)頁文本重要性的理解。3. 情感目標(biāo)通過分組完成任務(wù)，提高自主學(xué)習(xí)和協(xié)作學(xué)習(xí)的能力，培養(yǎng)團(tuán)隊(duì)精神。三、教學(xué)分析與準(zhǔn)備1. 教學(xué)重點(diǎn) 修改網(wǎng)頁標(biāo)題。 輸入網(wǎng)頁文本內(nèi)容的方法。 在文檔中對(duì)文本分段換行和段內(nèi)換行，輸入連續(xù)空格。2教學(xué)難點(diǎn) 網(wǎng)頁編輯中三種不同換行方式的區(qū)別。 在文檔窗口中輸入連續(xù)空格的幾種方法。3. 教學(xué)方法任務(wù)驅(qū)動(dòng)學(xué)習(xí)和協(xié)作學(xué)習(xí)、探究學(xué)習(xí)相結(jié)合。4. 課時(shí)安排4課時(shí)。 5. 教學(xué)環(huán)境多媒體網(wǎng)絡(luò)教室。四、教學(xué)過程（組織課堂、復(fù)習(xí)知識(shí)、教師引領(lǐng)完成任務(wù)占1學(xué)時(shí)；舉一反三占3學(xué)時(shí)。）教學(xué)環(huán)節(jié)及手段教學(xué)內(nèi)容備注組織課堂復(fù)習(xí)知識(shí)任務(wù)流程導(dǎo)入任務(wù)瀏覽規(guī)定站點(diǎn)，教師引導(dǎo)，學(xué)生討論、分析分析任務(wù)完成任務(wù)教師啟發(fā)學(xué)生，使學(xué)生借助課本、幫助等完成。結(jié)合PPT進(jìn)行知識(shí)講解知識(shí)總結(jié)舉一反三任務(wù)目標(biāo)啟發(fā)思路分組完成任務(wù)學(xué)生自評(píng)或互評(píng)教師點(diǎn)評(píng)總結(jié)任務(wù)目標(biāo)啟發(fā)思路分組完成任務(wù)學(xué)生自評(píng)互評(píng)教師點(diǎn)評(píng)總結(jié)任務(wù)目標(biāo)啟發(fā)思路分組完成任務(wù)學(xué)生自評(píng)互評(píng)教師點(diǎn)評(píng)總結(jié)布置作業(yè)集中學(xué)生注意力，準(zhǔn)備上課。指定學(xué)生上前操作，考察學(xué)生對(duì)新建站點(diǎn)、新建文件功能的掌握情況。1新建站點(diǎn)“幽幽我心的個(gè)人網(wǎng)站”。2新建首頁文件index.html并打開。在開始新的課程學(xué)習(xí)之前，先來了解一下，網(wǎng)頁元素的構(gòu)成，為什么要在首頁中添加文本。通過瀏覽新浪、搜狐等著名網(wǎng)站的網(wǎng)頁，引導(dǎo)學(xué)生分析網(wǎng)頁的構(gòu)成元素，得出結(jié)論：網(wǎng)頁元素歸納起來有文本、圖像、表格等，其中最常用的是文本。因而，為首頁添加內(nèi)容，最重要的是為首頁添加文本。打開前面創(chuàng)建的首頁文件，展示給學(xué)生。顯然，一個(gè)沒有任何內(nèi)容的網(wǎng)頁是毫無意義的，從而導(dǎo)入要為首頁添加內(nèi)容。為首頁添加文本，就需要掌握在網(wǎng)頁中編輯文本的一些操作。提出任務(wù)：添加首頁文本在第一單元中建立了首頁空白文件“index.html”，本單元將對(duì)首頁修改標(biāo)題，添加準(zhǔn)備好的內(nèi)容并設(shè)置其格式。鼓勵(lì)學(xué)生通過查書、查找?guī)椭业讲⒖偨Y(jié)出添加網(wǎng)頁內(nèi)容的途徑以及設(shè)置網(wǎng)頁內(nèi)容格式的方法。修改網(wǎng)頁標(biāo)題并預(yù)覽列舉各站點(diǎn)的首頁標(biāo)題。明確首頁的標(biāo)題是對(duì)網(wǎng)站主旨的概括，起著畫龍點(diǎn)睛的作用。制作首頁，首先就是要修改首頁標(biāo)題文本?；仡櫞蜷_首頁文件的方法。在文檔工具欄中，將標(biāo)題修改為“幽幽我心的個(gè)人網(wǎng)站”。提醒學(xué)生注意：文檔窗口左上角網(wǎng)頁名稱處的“*”代表文件已經(jīng)被修改過但并沒保存，保存后“*”會(huì)消失。預(yù)覽網(wǎng)頁輸入首頁文本內(nèi)容并劃分段落 輸入首頁文本將素材“index.txt”文本內(nèi)容復(fù)制粘貼到文檔窗口。通過比較使學(xué)生明確：從普通文檔中復(fù)制過來的文本不保留格式內(nèi)容，只保留段落結(jié)構(gòu)，并且在文本遇到文檔窗口的邊界時(shí)會(huì)自動(dòng)換行。 換行操作a“自我介紹”、“青春寄語”和“立志飛翔 ”部分進(jìn)行段落劃分b“立志飛翔 ”部分進(jìn)行強(qiáng)制換行總結(jié)，三種換行方式的特點(diǎn)及其實(shí)現(xiàn)方法。 輸入連續(xù)空格演示輸入連續(xù)空格的幾種方式。完成“青春寄語”部分首行縮進(jìn)的操作。最后，保存網(wǎng)頁。強(qiáng)調(diào)及時(shí)保存頁面是一個(gè)好習(xí)慣，可以避免斷電或系統(tǒng)故障導(dǎo)致的數(shù)據(jù)丟失。通過完成本任務(wù)學(xué)習(xí)了修改網(wǎng)頁標(biāo)題，輸入網(wǎng)頁文本內(nèi)容，分段換行和段內(nèi)換行，輸入連續(xù)空格，保存和預(yù)覽網(wǎng)頁。依據(jù)前面學(xué)習(xí)的知識(shí)與掌握的專業(yè)技能，學(xué)生自己完成類似的任務(wù)，教師作為組織者和引導(dǎo)者，著重啟發(fā)學(xué)生尋找完成任務(wù)的思路，養(yǎng)成檢索與應(yīng)用“書籍”、“幫助”、“網(wǎng)絡(luò)”自學(xué)的好習(xí)慣。1使用IE瀏覽器瀏覽各種類型的頁面，分析各個(gè)頁面中文本所起作用，并分析是否可以用其他網(wǎng)頁元素代替。在互連網(wǎng)上有各種類型的網(wǎng)站，如搜索引擎類網(wǎng)站，商業(yè)類網(wǎng)站，個(gè)人網(wǎng)站等。設(shè)計(jì)各種類型的頁面都可以從中借鑒。對(duì)學(xué)生進(jìn)行分組，每組選擇一個(gè)主題網(wǎng)站進(jìn)行分析。要求每組學(xué)生講出自己的分析結(jié)果，并自評(píng)。結(jié)論：文本在網(wǎng)頁制作中起著關(guān)鍵的作用，通常不能用其他網(wǎng)頁元素替代。2新建一個(gè)網(wǎng)頁“practice2-1.html”，將本單元素材“舉一反三”文件夾中“practice2-1.txt” 的文本內(nèi)容拷貝到頁面中，使用插入空格的方法修改文本，使每一行文本中的“vs”字樣達(dá)到對(duì)齊的效果。新建網(wǎng)頁“practice2-1.html”，可以這樣完成：借助頭腦里的知識(shí)；借助互聯(lián)網(wǎng)借助Dreamweaver幫助同學(xué)討論。對(duì)學(xué)生分組，開始完成任務(wù)每組同學(xué)演示自己完成的任務(wù)，其他組給以評(píng)價(jià)?？偨Y(jié)各組同學(xué)完成任務(wù)情況，對(duì)完成好的給以表揚(yáng)，沒有完成的引導(dǎo)其找出沒有完成的原因。3新建一個(gè)網(wǎng)頁“practice2-2.html”，輸入多行文字內(nèi)容并進(jìn)行分段和強(qiáng)制換行，修改網(wǎng)頁標(biāo)題為“換行效果預(yù)覽”，保存后預(yù)覽頁面，觀察在IE瀏覽器中標(biāo)題在什么位置，瀏覽器窗口大小發(fā)生變化時(shí)，對(duì)三種換行方式的影響。三種換行方式指的是自動(dòng)換行、分段和強(qiáng)制換行，重點(diǎn)理解它們的區(qū)別。對(duì)學(xué)生分組，開始完成任務(wù)每組同學(xué)演示自己完成的任務(wù)，其他組給以評(píng)價(jià)?？偨Y(jié)各組同學(xué)完成任務(wù)情況，對(duì)完成好的給以表揚(yáng)，沒有完成的引導(dǎo)其找出沒有完成的原因。可以根據(jù)每組任務(wù)完成情況結(jié)合自評(píng)與互評(píng)情況給出每組的成績。思考下列問題：1如何預(yù)覽和保存網(wǎng)頁？2如何對(duì)文檔窗口中的文本進(jìn)行段落的劃分和強(qiáng)制換行操作？3如何實(shí)現(xiàn)插入欄兩種顯示方式的轉(zhuǎn)換？通過學(xué)生動(dòng)手操作，復(fù)習(xí)與本次任務(wù)有關(guān)的知識(shí)。力求通過任務(wù)導(dǎo)入，吸引學(xué)生學(xué)習(xí)欲望。引導(dǎo)學(xué)生分析歸納。明確任務(wù)。教師提出任務(wù)要求，由學(xué)生進(jìn)行討論，教師歸納總結(jié)。學(xué)生觀察標(biāo)題修改后文檔窗口左上角網(wǎng)頁名稱的變化。學(xué)生觀察預(yù)覽效果。學(xué)生對(duì)照觀察原文本文件與粘貼到文檔窗口后文本格式的變化情況。 教師作為引導(dǎo)者和組織者，學(xué)生分組上機(jī)操作，完成相應(yīng)任務(wù)并進(jìn)行評(píng)價(jià)。任務(wù)二 編輯文本樣式一、提出任務(wù)1任務(wù)目標(biāo)完成首頁文本樣式設(shè)置，添加水平分隔線與列表。2. 解決的問題本任務(wù)通過設(shè)置首頁文本樣式，學(xué)習(xí)文本樣式設(shè)置與應(yīng)用，修改文本樣式，添加水平分隔線與列表知識(shí)。 3. 本任務(wù)所涉及原有知識(shí)要點(diǎn)完成本任務(wù)所涉及原有知識(shí)要點(diǎn)有：輸入文本內(nèi)容的方法，段內(nèi)換行與劃分段落方法，輸入連續(xù)空格的方法。二、教學(xué)目標(biāo)1. 知識(shí)目標(biāo) 掌握文本樣式設(shè)置與應(yīng)用。 掌握修改文本樣式。 掌握重命名文本樣式。 掌握添加水平分隔線與列表。2. 能力目標(biāo)能夠根據(jù)具體需求進(jìn)行文本各種屬性及樣式的編輯與設(shè)置，并提高學(xué)生自主學(xué)習(xí)、協(xié)作學(xué)習(xí)和知識(shí)遷移的能力。3. 情感目標(biāo)通過教師引導(dǎo)學(xué)生主動(dòng)參與學(xué)習(xí)，使學(xué)生學(xué)會(huì)使用探求性學(xué)習(xí)方法獲取新知識(shí)，激發(fā)學(xué)習(xí)本課程的興趣，增強(qiáng)學(xué)好本課程的信心。三、教學(xué)分析與準(zhǔn)備1. 教學(xué)重點(diǎn) 文本樣式的設(shè)置、應(yīng)用及修改。 添加水平分隔線與列表。2教學(xué)難點(diǎn)文本樣式的設(shè)置、應(yīng)用及修改。3. 教學(xué)方法任務(wù)驅(qū)動(dòng)學(xué)習(xí)、協(xié)作學(xué)習(xí)和探究學(xué)習(xí)相結(jié)合4. 課時(shí)安排4課時(shí)。 5. 教學(xué)環(huán)境多媒體網(wǎng)絡(luò)教室四、教學(xué)過程（組織課堂、復(fù)習(xí)知識(shí)、教師引領(lǐng)完成任務(wù)占2學(xué)時(shí)；舉一反三占2學(xué)時(shí)。）教學(xué)環(huán)節(jié)及手段教學(xué)內(nèi)容備注組織課堂復(fù)習(xí)知識(shí)任務(wù)流程導(dǎo)入任務(wù)分析任務(wù)演示本任務(wù)完成效果，教師分析。完成任務(wù)知識(shí)總結(jié)舉一反三任務(wù)目標(biāo)啟發(fā)思路分組完成任務(wù)學(xué)生自評(píng)或互評(píng)教師點(diǎn)評(píng)總結(jié)布置作業(yè)集中學(xué)生注意力，準(zhǔn)備上課。指定學(xué)生上前操作，考察對(duì)添加文本內(nèi)容及劃分行與段落的掌握情況。在指定站點(diǎn)內(nèi)新建一個(gè)網(wǎng)頁，將事先輸入的兩首詩（沒做任何格式設(shè)置）復(fù)制過來，要求學(xué)生通過插入空格、分行與分段操作，使頁面外觀美觀。最后，預(yù)覽網(wǎng)頁。在開始新的課程學(xué)習(xí)之前，先來了解一下，為什么要為網(wǎng)頁設(shè)置文本樣式及設(shè)置哪些文本樣式。通過瀏覽網(wǎng)站，引導(dǎo)學(xué)生明白文本字體、字號(hào)、顏色、加粗、傾斜及對(duì)齊方式等文本樣式的設(shè)置是必需的，那么，如何完成文本樣式的設(shè)置與編輯呢？ 提出任務(wù)：完成首頁文本樣式設(shè)置，為首頁添加水平分隔線與列表。 可以直接通過屬性面板設(shè)置指定文本的樣式，也可以其他文本位置應(yīng)用該樣式，但樣式的修改需要在CSS樣式面板中進(jìn)行?？梢酝ㄟ^制作列表，添加水平線來編輯網(wǎng)頁的外觀。1文本樣式設(shè)置與應(yīng)用 為網(wǎng)頁中第一行文字“幽幽我心的個(gè)人網(wǎng)站”設(shè)置文本樣式回憶Word文本格式設(shè)置的設(shè)置步驟：首先選中相應(yīng)文本；接著通過格式工具欄進(jìn)行設(shè)置。網(wǎng)頁制作也類似，首先要選中相應(yīng)文本，接著通過文本屬性面板完成設(shè)置。演示設(shè)置過程，強(qiáng)調(diào)：文本屬性設(shè)置一氣呵成的重要性以及反復(fù)選中修改屬性的弊端。簡(jiǎn)介文本屬性面板各部分及其功能，講解為“字體”列表項(xiàng)添加字體的方法。 為網(wǎng)頁中第二段標(biāo)題文字“自我介紹”設(shè)置文本樣式。 為標(biāo)題文字“青春寄語”、“立志飛翔”，應(yīng)用樣式（為“自我介紹”設(shè)置的樣式）樣式重命名引導(dǎo)學(xué)生觀察并總結(jié)出樣式默認(rèn)命名形式為STYLE+N。一個(gè)網(wǎng)頁中可能會(huì)定義許多樣式，而這些樣式不一定全是文本類型的，為了方便使用樣式，最好對(duì)樣式進(jìn)行重命名，使名稱能表示樣式含義。演示為“幽幽我心的個(gè)人網(wǎng)站”中的文本樣式重命名的方法，并按照課本P37頁表格要求，設(shè)置“青春寄語”與“立志飛翔”中的文本樣式并重命名。修改文本樣式提出如何修改文本樣式讓學(xué)生思考，學(xué)生們可能有說通過屬性面板修改樣式的，教師可以演示通過屬性面板不能修改樣式。演示修改title2樣式：?jiǎn)螕簟皹邮健绷斜砼缘陌粹o，打開“CSS樣式”面板。對(duì)樣式“title2”進(jìn)行編輯，在面板當(dāng)中修改顏色值為“#FF6600”。讓學(xué)生觀察應(yīng)用了“title2”樣式的文本顏色是否會(huì)發(fā)生相應(yīng)的變化。插入列表與水平線選中“自我介紹”部分的文本內(nèi)容，選擇“屬性”面板中的“項(xiàng)目列表”，為選中文本插入項(xiàng)目列表。將光標(biāo)插入到“青春寄語”標(biāo)題之前，將“插入”欄切換到“HTML”類別，選擇其中的“水平線”按鈕，在“自我介紹”內(nèi)容和“青春寄語”內(nèi)容之間插入一條水平線，起到分隔的作用。通過完成本任務(wù)學(xué)習(xí)了文本樣式設(shè)置與應(yīng)用，修改文本樣式，添加水平分隔線與列表知識(shí)，設(shè)置文本樣式時(shí)最好一氣呵成。 依據(jù)前面學(xué)習(xí)的知識(shí)與掌握的專業(yè)技能，引導(dǎo)學(xué)生完成類似的任務(wù)，教師作為組織者和引導(dǎo)者，著重啟發(fā)學(xué)生尋找完成任務(wù)的思路，養(yǎng)成利用“書籍”、“幫助”、“網(wǎng)絡(luò)”等自學(xué)的好習(xí)慣。將本單元素材“舉一反三”文件夾中的網(wǎng)頁“practice2-3.html”拷貝到D:mysite目錄下，給頁面中的每一段文字設(shè)置一種不同的文本樣式。要設(shè)置各部分文字樣式首先做什么，接下來通過什么面板進(jìn)行設(shè)置；要做到標(biāo)題醒目，各段樣式不同但風(fēng)格要一致。把不同層次的學(xué)生分在一組中，鼓勵(lì)同學(xué)積極討論完成任務(wù)。組織不同組的同學(xué)互相評(píng)論對(duì)方完成任務(wù)的優(yōu)缺點(diǎn)。教師對(duì)每組同學(xué)完成任務(wù)情況進(jìn)行總結(jié)，對(duì)完成任務(wù)的表揚(yáng)，對(duì)沒有完成任務(wù)的鼓勵(lì)，并幫助他們分析沒有完成的原因?？梢愿鶕?jù)每組任務(wù)完成情況結(jié)合自評(píng)與互評(píng)情況給出每組的成績。1新建一個(gè)網(wǎng)頁“practice2-4.html”，插入5條水平線，使用屬性面板進(jìn)行不同的寬、高、對(duì)齊與陰影屬性設(shè)置，預(yù)覽頁面并比較不同屬性的設(shè)置效果。2.新建“班級(jí)榮譽(yù)”頁面，文件名為“practice2-5.html”，列舉班級(jí)成員所獲獎(jiǎng)勵(lì)，設(shè)置為編號(hào)列表，修改文本樣式，用不同的文本大小、顏色區(qū)分獎(jiǎng)勵(lì)的等級(jí)，保存并預(yù)覽頁面。嘗試先設(shè)文本樣式后設(shè)編號(hào)列表有何區(qū)別。（要求各組課下搜集班級(jí)成員獲獎(jiǎng)情況，并制定一個(gè)設(shè)置方案）通過指定學(xué)生上前演示，復(fù)習(xí)與本任務(wù)有關(guān)的知識(shí)。力求通過任務(wù)導(dǎo)入，吸引學(xué)生學(xué)習(xí)興趣。引入課題。教師講解為主。大多數(shù)學(xué)生都有編輯Word格式的經(jīng)驗(yàn)，引導(dǎo)學(xué)生將Word格式設(shè)置中的經(jīng)驗(yàn)遷移過來，加深學(xué)習(xí)的印象。 教師啟發(fā)思路，學(xué)生自己動(dòng)手完成。提醒學(xué)生使用幫助功能找到答案。任務(wù)三 添加圖像一、提出任務(wù)1任務(wù)目標(biāo)為首頁添加圖像內(nèi)容。2. 解決的問題本任務(wù)通過為首頁添加圖像內(nèi)容，學(xué)習(xí)在網(wǎng)頁中插入圖像和編輯圖像的方法。 3. 本任務(wù)所涉及原有知識(shí)要點(diǎn)完成本任務(wù)所涉及原有知識(shí)要點(diǎn)有：在網(wǎng)頁中輸入文本內(nèi)容。二、教學(xué)目標(biāo)1. 知識(shí)目標(biāo) 掌握使用插入欄插入圖像。 掌握使用菜單欄插入圖像。 掌握使用Ctrl+Alt+I組合鍵插入圖像。 掌握使用文件面板插入圖像。 掌握編輯圖像的方法。2. 能力目標(biāo)能夠根據(jù)具體情況在指定位置靈活高效地插入圖像并進(jìn)行必要的編輯。3. 情感目標(biāo)通過教師引導(dǎo)學(xué)生主動(dòng)參與學(xué)習(xí)，使學(xué)生學(xué)會(huì)使用探求性學(xué)習(xí)方法獲取新知識(shí)，激發(fā)學(xué)習(xí)本課程的興趣，增強(qiáng)學(xué)好本課程的信心。三、教學(xué)分析與準(zhǔn)備1. 教學(xué)重點(diǎn) 插入圖像的各種方法。 圖像的編輯操作。2教學(xué)難點(diǎn)圖像編輯的方法。3. 教學(xué)方法任務(wù)驅(qū)動(dòng)學(xué)習(xí)、協(xié)作學(xué)習(xí)和探究學(xué)習(xí)相結(jié)合。4. 課時(shí)安排4課時(shí)。 5. 教學(xué)環(huán)境多媒體網(wǎng)絡(luò)教室四、教學(xué)過程（組織課堂、復(fù)習(xí)知識(shí)、教師引領(lǐng)完成任務(wù)占2學(xué)時(shí)；舉一反三占2學(xué)時(shí)。）教學(xué)環(huán)節(jié)及手段教學(xué)內(nèi)容備注組織課堂復(fù)習(xí)知識(shí)任務(wù)流程導(dǎo)入任務(wù)分析任務(wù)完成任務(wù)結(jié)合PPT進(jìn)行講解知識(shí)總結(jié)舉一反三任務(wù)目標(biāo)啟發(fā)思路分組完成任務(wù)學(xué)生自評(píng)或互評(píng)教師點(diǎn)評(píng)總結(jié)任務(wù)目標(biāo)啟發(fā)思路分組完成任務(wù)學(xué)生自評(píng)或互評(píng)教師點(diǎn)評(píng)總結(jié)布置作業(yè)集中學(xué)生注意力，準(zhǔn)備上課。通過提問考察學(xué)生對(duì)設(shè)置文本樣式及插入水平線的掌握情況。1如何設(shè)置文本樣式？2如何重命名文本樣式以及在CSS樣式面板中修改文本樣式？3如何插入水平線？通過聯(lián)想學(xué)校宣傳欄、報(bào)紙、兒童書籍以及課本等內(nèi)容，總結(jié)出其中都有圖像；引導(dǎo)學(xué)生懂得通過插入圖像可以使內(nèi)容生動(dòng)直觀，具體形象。進(jìn)一步打開兩個(gè)網(wǎng)頁，一個(gè)是全文本的，一個(gè)是圖文并茂的，讓學(xué)生通過比較這兩個(gè)網(wǎng)頁明確哪一個(gè)更適用并說明原因，引出要使首頁內(nèi)容生動(dòng)形象，圖像的添加和編輯就必不可少了。提出任務(wù)：為首頁添加圖像內(nèi)容。圖像是網(wǎng)頁中經(jīng)常使用的元素，圖像的插入方法比較簡(jiǎn)單，但需要區(qū)分圖像的格式，并不是所有的圖像都能在網(wǎng)頁中正常顯示。插入圖像后需要熟悉其屬性面板的設(shè)置。1網(wǎng)頁中圖像文件的格式及其特點(diǎn)教師提出下列問題讓學(xué)生分組查找答案：通常在網(wǎng)頁中使用什么格式的圖像文件，它們的特點(diǎn)是什么？在同學(xué)回答上述問題基礎(chǔ)上，教師總結(jié)并講解在網(wǎng)頁中通常使用“.jpg”、“.gif”和“.png”格式圖像文件及其這三種格式圖像文件的特點(diǎn)。2準(zhǔn)備素材：將本單元素材文件夾中的“images”文件夾下的全部圖像素材復(fù)制到D:mysiteimages文件夾下。使用文件面板插入圖像拖曳文件面板中的 “top.jpg”到“自我介紹”標(biāo)題前，插入圖像“top.jpg”。選中所插入的圖像，在屬性面板中設(shè)置對(duì)齊方式為“右對(duì)齊”。預(yù)覽頁面效果。通過復(fù)習(xí)Word中插入圖像的方法，總結(jié)出另外三種插入圖像的方法。A使用菜單欄插入圖像定位插入點(diǎn)到“立志飛翔”文字前，選擇菜單欄“插入”菜單中的“圖像”選項(xiàng)，插入“flying.gif”圖像文件并設(shè)置對(duì)齊方式為“左對(duì)齊”。B使用插入欄常用類別中的按鈕插入圖像定位插入點(diǎn)到“立志飛翔”的第三段文字前，選擇“插入”欄“常用”類別中的按鈕，插入“flying.gif”圖像文件并設(shè)置對(duì)齊方式為“右對(duì)齊”。C使用Ctrl+Alt+I組合鍵插入圖像定位插入點(diǎn)到“立志飛翔”的第五段文字前，使用Ctrl+Alt+I組合鍵，插入“flying.gif”圖像文件并設(shè)置對(duì)齊方式為“左對(duì)齊”。4介紹圖像屬性面板完成圖像的編輯。概括本課插入圖像的四種方式。1將本單元素材文件夾中的“jyfs1.jpg”插入到一個(gè)新建頁面“practice2-7.html”中，裁剪后寬度為200像素，高度為100像素，并設(shè)置邊框?qū)挾葹?，完成后預(yù)覽頁面。插入后選中該圖像并通過屬性面板完成。把不同層次的學(xué)生分在一組中，鼓勵(lì)同學(xué)積極研究探索完成任務(wù)。組織不同組的同學(xué)互相評(píng)論對(duì)方完成任務(wù)的優(yōu)缺點(diǎn)。教師對(duì)每組同學(xué)完成任務(wù)情況進(jìn)行總結(jié)，對(duì)完成任務(wù)的表揚(yáng)，對(duì)沒有完成任務(wù)的鼓勵(lì)，并幫助他們分析沒有完成的原因。2新建網(wǎng)頁“practice2-8.html”，插入本單元素材文件夾中的“jyfs2.jpg”，嘗試使用Dreamweaver 8的圖像編輯功能修改圖像的亮度并進(jìn)行銳化設(shè)置。插入后選中該圖像并通過屬性面板完成。把不同層次的學(xué)生分在一組中，鼓勵(lì)同學(xué)積極討論完成任務(wù)的方法組織不同組的同學(xué)互相評(píng)論對(duì)方完成任務(wù)的優(yōu)缺點(diǎn)。教師對(duì)每組同學(xué)完成任務(wù)情況進(jìn)行總結(jié)，對(duì)完成任務(wù)的表揚(yáng)，對(duì)沒有完成任務(wù)的鼓勵(lì)，并幫助他們分析沒有完成的原因?？梢愿鶕?jù)每組任務(wù)完成情況結(jié)合自評(píng)與互評(píng)情況給出每組的成績。1通過網(wǎng)絡(luò)下載3張圖片，文件類型分別為“jpg”、“gif”、“bmp”，使用不同的方法插入到一個(gè)新建頁面 “practice2-6.html”中。復(fù)習(xí)時(shí)教師按照學(xué)生回答演示操作，指出其中的問題。力求通過任務(wù)導(dǎo)入，吸引學(xué)生學(xué)習(xí)欲望。引入課題。教師提出問題，并提示可以通過網(wǎng)絡(luò)搜索及查幫助找到答案。知識(shí)講解。師生一起回顧，探索發(fā)現(xiàn)插入圖像的三種方法。根據(jù)Word中插入圖像的經(jīng)驗(yàn)讓學(xué)生嘗試進(jìn)行，嘗試失敗的可以查找“幫助”或通過網(wǎng)絡(luò)獲得答案。教師啟發(fā)思路，學(xué)生自己動(dòng)手完成。 任務(wù)四 創(chuàng)建與應(yīng)用CSS美化網(wǎng)頁一、提出任務(wù)1任務(wù)目標(biāo)使用CSS美化網(wǎng)頁。2解決的問題本任務(wù)通過為對(duì)首頁進(jìn)行美化，學(xué)習(xí)應(yīng)用CSS樣式。3本任務(wù)所涉及原有知識(shí)要點(diǎn)完成本任務(wù)所涉及原有知識(shí)要點(diǎn)有：在網(wǎng)頁中輸入文本內(nèi)容、插入圖像及水平線。二、教學(xué)目標(biāo)1. 知識(shí)目標(biāo) 了解CSS樣式的作用與特點(diǎn)。 掌握使用CSS設(shè)置文本樣式。 掌握使用CSS設(shè)置背景樣式。 掌握使用CSS設(shè)置列表樣式。 掌握使用CSS設(shè)置水平線樣式。2. 能力目標(biāo)能夠使用CSS樣式面板進(jìn)行樣式的設(shè)置，區(qū)分使用“類”樣式與“標(biāo)簽”樣式。通過幫助或搜索引擎等查詢學(xué)習(xí)過程中出現(xiàn)的的概念和定義，掌握獲得相關(guān)信息的方法。3. 情感目標(biāo)正確看待自己，合理評(píng)價(jià)他人。三、教學(xué)分析與準(zhǔn)備1. 教學(xué)重點(diǎn) CSS樣式的設(shè)置。 “類”樣式與“標(biāo)簽”樣式的區(qū)別。2教學(xué)難點(diǎn)“類”樣式與“標(biāo)簽”樣式的區(qū)別。3. 教學(xué)方法提出任務(wù)并帶領(lǐng)學(xué)生進(jìn)行分析，通過分析形成解決問題的思路，通過提醒化解解決問題過程中遇到的問題，通過舉一反三拓展對(duì)知識(shí)點(diǎn)的認(rèn)識(shí)與理解。4. 課時(shí)安排4課時(shí)。 5. 教學(xué)環(huán)境多媒體網(wǎng)絡(luò)教室。四、教學(xué)過程（組織課堂、復(fù)習(xí)知識(shí)、教師引領(lǐng)完成任務(wù)占2學(xué)時(shí)；舉一反三占2學(xué)時(shí)。）教學(xué)環(huán)節(jié)及手段教學(xué)內(nèi)容備注組織課堂復(fù)習(xí)知識(shí)任務(wù)流程導(dǎo)入任務(wù)分析任務(wù)完成任務(wù)知識(shí)總結(jié)舉一反三任務(wù)目標(biāo)啟發(fā)思路分組完成任務(wù)學(xué)生自評(píng)或互評(píng)教師點(diǎn)評(píng)總結(jié)任務(wù)目標(biāo)啟發(fā)思路分組完成任務(wù)學(xué)生自評(píng)或互評(píng)教師點(diǎn)評(píng)總結(jié)布置作業(yè)集中學(xué)生注意力，準(zhǔn)備上課。通過提問復(fù)習(xí)上節(jié)課所學(xué)內(nèi)容，并了解學(xué)生對(duì)上節(jié)課知識(shí)點(diǎn)的掌握情況。1網(wǎng)頁中文本樣式是如何設(shè)置的？2其他網(wǎng)頁元素的樣式是如何設(shè)置的？是否也可以使用“屬性”面板來完成？在之前的任務(wù)中使用屬性面板來設(shè)置并應(yīng)用文本樣式，可以簡(jiǎn)化文本屬性的設(shè)置過程。其特點(diǎn)主要表現(xiàn)為：樣式可以一次設(shè)置多次應(yīng)用，可以同步修改已應(yīng)用的樣式。即豐富了文本的外觀、美化了頁面同時(shí)也使文本屬性的修改變得簡(jiǎn)單快捷。思考：是否可以用同樣方法設(shè)置其它網(wǎng)頁元素的樣式？提出任務(wù)：使用CSS美化網(wǎng)頁。使用屬性面板設(shè)置文本樣式是CSS應(yīng)用的一種特例，其他網(wǎng)頁元素可以使用屬性面板應(yīng)用已定義好的CSS樣式，但不能通過屬性面板完成樣式的定義，本任務(wù)將學(xué)習(xí)CSS樣式定義的一般方法。1創(chuàng)建與應(yīng)用CSS文本樣式。使用CSS面板創(chuàng)建文本樣式“title3”，并將新樣式應(yīng)用到“青春寄語”部分的標(biāo)題文本上。討論這種方法與之前學(xué)習(xí)的設(shè)置方法有什么不同。知識(shí)講解： CSS樣式的三種類型在使用“CSS樣式”面板定義新的樣式的時(shí)候，在彈出的對(duì)話框中要進(jìn)行樣式類型的選擇，其中包含了“類”、“標(biāo)簽”和“高級(jí)”三種類型，三種類型分別具有如下特點(diǎn)?！邦悺睒邮剑骸邦悺睒邮绞亲顬殪`活的一種類型的樣式，它可以任意定義名稱并且應(yīng)用到網(wǎng)頁中的各種對(duì)象上。但是這種類型的樣式在定義之后需要選擇對(duì)象并應(yīng)用后才會(huì)生效?！皹?biāo)簽”樣式：“標(biāo)簽”樣式的定義是建立在HTML語言基礎(chǔ)上的，可以針對(duì)網(wǎng)頁中的各種標(biāo)簽進(jìn)行定義，所以用這種類型的樣式定義的名稱僅限于固定的標(biāo)簽名稱，并且在樣式定義后，直接被應(yīng)用到頁面中相應(yīng)的標(biāo)簽對(duì)象中?！案呒?jí)”樣式：這種樣式僅用于定義超級(jí)鏈接的4種狀態(tài)，所以可定義的樣式名稱也只有相應(yīng)的4種，分別是：“a:link”用于定義超級(jí)鏈接初始狀態(tài)；“a:visited”用于定義已經(jīng)訪問過的超級(jí)鏈接狀態(tài)；“a:hover”用于定義鼠標(biāo)經(jīng)過超級(jí)鏈接對(duì)象時(shí)的狀態(tài)；“a:active”用于定義超級(jí)鏈接的活動(dòng)狀態(tài)。 CSS樣式可定義參數(shù)?！邦愋汀边x項(xiàng)：用于定義常規(guī)的文本屬性，包括“字體”、“大小”、“顏色”等選項(xiàng)?！氨尘啊边x項(xiàng)：用于定義背景屬性，可設(shè)置“背景顏色”、“背景圖像”、背景圖像的“水平位置”等選項(xiàng)?！皡^(qū)塊”選項(xiàng)：用于定義文本的間距與對(duì)齊方式等屬性?！胺娇颉边x項(xiàng)：用于定義表格、框架等對(duì)象的屬性?！斑吙颉边x項(xiàng)：用于定義各種對(duì)象的邊框?qū)傩?，表格、框架、水平線的邊框樣式都可以使用這一選項(xiàng)進(jìn)行定義?！傲斜怼边x項(xiàng)：用于定義文本列表的屬性。“定位”選項(xiàng)：用于定義層對(duì)象的屬性?！皵U(kuò)展”選項(xiàng)：用于定義光標(biāo)、圖像等內(nèi)容的視覺效果的擴(kuò)展屬性。2創(chuàng)建與應(yīng)用頁面背景樣式。文本樣式的設(shè)置使用的是三種CSS樣式中的第一種類型，即“類”樣式。其特點(diǎn)為：樣式的定義與應(yīng)用過程是分離的，所有定義好的“類”樣式都需要選擇相應(yīng)對(duì)象進(jìn)行應(yīng)用。觀察以下操作，比較“標(biāo)簽”樣式與“類”樣式的區(qū)別。單擊“CSS樣式”面板上的“新建CSS規(guī)則”按鈕，彈出“新建CSS規(guī)則”對(duì)話框，在當(dāng)前文檔中新建一個(gè)命名為“body”的“標(biāo)簽”樣式。完成相應(yīng)設(shè)置并瀏覽網(wǎng)頁。思考并討論：“類”樣式與“標(biāo)簽”樣式的區(qū)別。3完成其他樣式的設(shè)置 定義“標(biāo)簽”樣式“l(fā)i”。 定義“類”樣式“l(fā)ine”并應(yīng)用到頁面中的水平線上。思考：作為“類”樣式的“l(fā)ine”是否只能應(yīng)用于水平線？如果將一張圖片應(yīng)用了該樣式，會(huì)有什么結(jié)果，為什么？通過本任務(wù)學(xué)習(xí)了樣式設(shè)置方法及“類”樣式與“標(biāo)簽”樣式的區(qū)別。1新建網(wǎng)頁“practice2-9.html”，插入3條水平線，定義3種“類”樣式“l(fā)1”、“l(fā)2”、“l(fā)3”。定義過程中修改樣式中的邊框?qū)傩?，使其擁有不同的效果，分別應(yīng)用在各條水平線上，預(yù)覽頁面。三種“類”樣式分別定義與應(yīng)用，體現(xiàn)了“類”樣式的使用特點(diǎn)。每組4名同學(xué)，組長安排成員完成某一樣式的相關(guān)操作。組織不同組的同學(xué)互相評(píng)論對(duì)方完成任務(wù)的優(yōu)缺點(diǎn)。對(duì)正確完成的小組提出表揚(yáng)，不正確的進(jìn)行指正，或請(qǐng)其他組同學(xué)更正錯(cuò)誤。2將本單元素材“舉一反三”文件夾中的網(wǎng)頁“practice2-11.html”拷貝到D盤根目錄下，定義“標(biāo)簽”樣式“p”，設(shè)置文本大小與顏色，保存后預(yù)覽頁面觀察效果，之后定義“類”樣式“p1”，設(shè)置不同的文本大小與顏色，并應(yīng)用于頁面中所插入的文本，瀏覽頁面觀察效果，總結(jié)“類”樣式與“標(biāo)簽”樣式的區(qū)別。注意區(qū)分兩種樣式分別為“標(biāo)簽”樣式和“類”樣式，觀察在兩種樣式共存的情況下，那種樣式優(yōu)先。把不同層次的學(xué)生分在一組中，鼓勵(lì)同學(xué)積極討論完成任務(wù)的方法。組織同學(xué)自評(píng)或互評(píng)。教師對(duì)每組同學(xué)完成任務(wù)情況進(jìn)行總結(jié)，對(duì)完成任務(wù)的表揚(yáng)，對(duì)沒有完成任務(wù)的鼓勵(lì)，并幫助他們分析沒有完成的原因。新建網(wǎng)頁“practice2-10.html”，插入本單元素材“舉一反三”文件夾中的“jyfs3.jpg”和一條水平線，定義“類”樣式“l(fā)ine1”，修改樣式中的邊框?qū)傩?。分別將該樣式應(yīng)用在頁面中的圖片與水平線上，預(yù)覽頁面，分析樣式設(shè)置的結(jié)果。復(fù)習(xí)時(shí)教師按照學(xué)生回答演示操作，指出其中的問題。力求通過任務(wù)導(dǎo)入，吸引學(xué)生學(xué)習(xí)欲望。學(xué)生分組討論并嘗試操作。學(xué)生分組討論實(shí)現(xiàn)方法，并比較與之前所使用方法的不同。教師作為引導(dǎo)者和組織者，學(xué)生分組上機(jī)操作，完成相應(yīng)任務(wù)并進(jìn)行評(píng)價(jià)。學(xué)生總結(jié)之前任務(wù)中的方法或按教材中的操作步驟完成。學(xué)生分組討論并通過嘗試操作得出結(jié)論。任務(wù)五 使用代碼制作圖文網(wǎng)頁一、提出任務(wù)1任務(wù)目標(biāo)使用HTML代碼制作一個(gè)圖文網(wǎng)頁“唐詩賞析”。2. 解決的問題通過完成本任務(wù)，學(xué)習(xí)使用HTML代碼為網(wǎng)頁添加圖像、文本等元素并設(shè)置其屬性。3. 本任務(wù)所涉及原有知識(shí)要點(diǎn)完成本任務(wù)所涉及原有知識(shí)要點(diǎn)有：在設(shè)計(jì)視圖中為網(wǎng)頁添加文本、圖像等元素并設(shè)置屬性。二、教學(xué)目標(biāo)1. 知識(shí)目標(biāo) 掌握使用HTML代碼在網(wǎng)頁中插入文本。 掌握使用HTML代碼在網(wǎng)頁中插入列表。 掌握使用HTML代碼在網(wǎng)頁中插入圖像。 掌握使用HTML代碼在網(wǎng)頁中插入水平線。 掌握使用HTML代碼在網(wǎng)頁中創(chuàng)建CSS樣式。 掌握使用HTML代碼設(shè)置文本等元素的屬性。2. 能力目標(biāo)能夠使用HTML代碼制作圖文網(wǎng)頁，并學(xué)會(huì)使用HTML代碼設(shè)置圖像、文本、水平線的屬性。3. 情感目標(biāo)培養(yǎng)學(xué)生勤于探索、主動(dòng)學(xué)習(xí)的意識(shí)，樹立將來成為網(wǎng)頁制作專業(yè)技術(shù)人員的信心。三、教學(xué)分析與準(zhǔn)備1. 教學(xué)重點(diǎn) 使用HTML代碼插入文本、圖像和水平線。 使用HTML代碼設(shè)置網(wǎng)頁元素屬性。2教學(xué)難點(diǎn)使用HTML代碼設(shè)置網(wǎng)頁元素屬性。3. 教學(xué)方法任務(wù)引領(lǐng)學(xué)習(xí)、自主學(xué)習(xí)、協(xié)作學(xué)習(xí)和探究學(xué)習(xí)相結(jié)合，通過幾種教學(xué)方法的運(yùn)用，不僅讓學(xué)生掌握相關(guān)知識(shí)，同時(shí)提高學(xué)生的學(xué)習(xí)能力。4. 課時(shí)安排4課時(shí)。 5. 教學(xué)環(huán)境多媒體網(wǎng)絡(luò)教室。四、教學(xué)過程（組織課堂、復(fù)習(xí)知識(shí)、教師引領(lǐng)完成任務(wù)占2學(xué)時(shí)；舉一反三占2學(xué)時(shí)。）教學(xué)環(huán)節(jié)及手段教學(xué)內(nèi)容備注組織課堂復(fù)習(xí)知識(shí)任務(wù)流程導(dǎo)入任務(wù)分析任務(wù)完成任務(wù)知識(shí)講解教師引導(dǎo)，學(xué)生討論、分析。知識(shí)總結(jié)舉一反三任務(wù)目標(biāo)啟發(fā)思路分組完成任務(wù)學(xué)生自評(píng)或互評(píng)教師點(diǎn)評(píng)總結(jié)布置作業(yè)集中學(xué)生注意力，準(zhǔn)備上課。通過指定學(xué)生上前操作下列各題考察學(xué)生對(duì)已學(xué)HTML代碼的掌握情況。1使用HTML代碼創(chuàng)建一個(gè)空白網(wǎng)頁文件。 2使用記事本創(chuàng)建一個(gè)空白網(wǎng)頁文件。通過完成一個(gè)任務(wù)，啟發(fā)學(xué)生思考完成任務(wù)的方法，講授必要的知識(shí)，傳授必要的技能。1展示一個(gè)圖文頁面，讓學(xué)生描述在設(shè)計(jì)視圖下的制作流程。2讓學(xué)生討論上面復(fù)習(xí)知識(shí)的第2個(gè)問題，如果要求使用HTML代碼來完成這個(gè)操作，該如何實(shí)現(xiàn)？由以上兩個(gè)問題引出本課課題。 提出任務(wù)：使用代碼制作圖文網(wǎng)頁使用HTML代碼在網(wǎng)頁中插入文本和圖像，并進(jìn)行簡(jiǎn)單的屬性設(shè)置，了解相應(yīng)標(biāo)簽的使用方法、插入位置和基本屬性。1知識(shí)講解 在使用HTML語言制作網(wǎng)頁過程中，首先要設(shè)置網(wǎng)頁的標(biāo)題標(biāo)簽。如下所示：標(biāo) 簽 描述頁面標(biāo)題標(biāo)簽 插入文本、圖片以及水平線需要如下標(biāo)簽：標(biāo) 簽 描述段落標(biāo)簽圖像標(biāo)簽水平線標(biāo)簽 列表標(biāo)簽分為兩種形式而列表項(xiàng)標(biāo)簽是相同的，如下所示：標(biāo) 簽 描述項(xiàng)目列表標(biāo)簽編號(hào)列表標(biāo)簽列表項(xiàng)標(biāo)簽 如何設(shè)置頁面的背景顏色屬性？ 如何設(shè)置段落標(biāo)簽、圖像標(biāo)簽及水平線標(biāo)簽的屬性？ 如何在代碼試圖下應(yīng)用CSS。2自己動(dòng)手 準(zhǔn)備工作。 設(shè)置標(biāo)題并修改背景顏色。 添加圖像與文本。a添加段落標(biāo)簽并設(shè)置屬性。b添加圖像標(biāo)簽并設(shè)置屬性。c添加列表并設(shè)置屬性。d. 添加水平線標(biāo)簽并設(shè)置屬性。安排學(xué)生分組討論并示范操作，教師引導(dǎo)。 使用CSS。使用代碼定義CSS樣式并將其應(yīng)用到段落標(biāo)簽中。通過本任務(wù)主要學(xué)習(xí)了使用代碼在網(wǎng)頁中插入文本、圖像、列表、水平線，并設(shè)置相應(yīng)屬性。將本單元素材 “舉一反三”文件夾中的網(wǎng)頁“practice2-12.html”拷貝到D盤根目錄下，使用標(biāo)簽代碼制作項(xiàng)目列表，并比較與編號(hào)列表的區(qū)別。項(xiàng)目列表標(biāo)簽與編號(hào)列表標(biāo)簽的區(qū)別在于列表的瀏覽效果不同，使用方法是相同的，所以兩種列表中的列表項(xiàng)都是使用標(biāo)簽。學(xué)生分組上機(jī)，在組內(nèi)進(jìn)行討論交流，最終完成任務(wù)。由各組學(xué)生代表來分析說明本組完成情況。指出學(xué)生在總結(jié)時(shí)可能出現(xiàn)的錯(cuò)誤，補(bǔ)充不足，鼓勵(lì)學(xué)生學(xué)習(xí)使用HTML代碼制作網(wǎng)頁的信心。將本單元素材 “舉一反三”文件夾中的網(wǎng)頁“practice2-13.html”拷貝到D盤根目錄下，在“代碼”視圖下定義樣式“txt”，設(shè)置字體樣式為大小18像素，顏色為“#662244”，將這一樣式應(yīng)用到頁面中的所有段落標(biāo)簽中，在任一位置插入本單元素材“舉一反三”文件夾中的圖像“jyfs4.jpg”，使用代碼設(shè)置圖像的對(duì)齊方式，完成后預(yù)覽頁面。學(xué)生操作。力求通過任務(wù)導(dǎo)入，吸引學(xué)生學(xué)習(xí)興趣。任務(wù)提出后的分析過程可以先由學(xué)生討論，再由教師總結(jié)。培養(yǎng)學(xué)生自主學(xué)習(xí)、探究學(xué)習(xí)的能力。項(xiàng)目三 制作“作品展示”網(wǎng)頁本項(xiàng)目通過“創(chuàng)建表格”、“編輯表格”、“添加表格內(nèi)容”和“建立超級(jí)鏈接”四個(gè)任務(wù)，完成“幽幽我心的個(gè)人網(wǎng)站”中的“作品展示”網(wǎng)頁的制作，學(xué)習(xí)如何使用表格來進(jìn)行網(wǎng)頁的布局。任務(wù)完成后效果如圖所示： 本項(xiàng)具體的教學(xué)過程共分為以下五個(gè)方面的任務(wù)：任務(wù)一 創(chuàng)建表格 （4課時(shí)）任務(wù)二 編輯表格 （4課時(shí)）任務(wù)三 添加表格內(nèi)容 （4課時(shí)）任務(wù)四 建立超級(jí)鏈接 （6課時(shí)）任務(wù)五 使用代碼制作表格網(wǎng)頁 （6課時(shí)）任務(wù)一 創(chuàng)建表格一、提出任務(wù)1任務(wù)目標(biāo)完成“作品展示”網(wǎng)頁中表格的創(chuàng)建。2解決的問題通過在“作品展示”網(wǎng)頁中創(chuàng)建表格理解表格布局頁面的重要性，學(xué)習(xí)網(wǎng)頁的布局分析，掌握創(chuàng)建表格的幾種方法。3本任務(wù)所涉及原有知識(shí)要點(diǎn)完成本任務(wù)所涉及原有知識(shí)要點(diǎn)有：在頁面添加文本，設(shè)置文本格式，插入圖像，設(shè)置圖像格式。二、教學(xué)目標(biāo)1. 知識(shí)目標(biāo) 理解表格在網(wǎng)頁設(shè)計(jì)中的作用。 掌握利用表格布局頁面。 掌握創(chuàng)建表格的基本方法。 掌握創(chuàng)建嵌套表格。 掌握在網(wǎng)頁中利用表格進(jìn)行排版。2. 能力目標(biāo)掌握表的創(chuàng)建和編輯，能夠根據(jù)具體需求靈活應(yīng)用表格，并能利用表格進(jìn)行頁面布局和排版。3. 情感目標(biāo) 通過參與作品評(píng)價(jià)，提高學(xué)生的審美能力與鑒別能力。鼓勵(lì)學(xué)生根據(jù)任務(wù)需求進(jìn)行科學(xué)合理的設(shè)計(jì)，提高學(xué)生分析問題與解決問題能力。三、教學(xué)分析與準(zhǔn)備1. 教學(xué)重點(diǎn) 理解表格在網(wǎng)頁設(shè)計(jì)中的作用。 分析頁面的表格布局。 創(chuàng)建表格的基本方法。2教學(xué)難點(diǎn) 分析頁面的表格布局。 創(chuàng)建嵌套表格。3. 教學(xué)方法任務(wù)驅(qū)動(dòng)學(xué)習(xí)、協(xié)作學(xué)習(xí)、探究拓展學(xué)習(xí)與舉一反三相結(jié)合。4. 課時(shí)安排4課時(shí)。5. 教學(xué)環(huán)境多媒體網(wǎng)絡(luò)教室。四、學(xué)習(xí)過程（組織課堂、復(fù)習(xí)知識(shí)、教師引領(lǐng)完成任務(wù)占2學(xué)時(shí)，舉一反三占2學(xué)時(shí)。）教學(xué)環(huán)節(jié)及手段教學(xué)內(nèi)容備注組織課堂復(fù)習(xí)提問任務(wù)流程導(dǎo)入任務(wù)分析任務(wù)完成任務(wù)分析網(wǎng)頁布局創(chuàng)建本欄目目錄結(jié)構(gòu)創(chuàng)建表格知識(shí)完成任務(wù)知識(shí)小結(jié)舉一反三任務(wù)目標(biāo)啟發(fā)思路分組完成任務(wù)學(xué)生自評(píng)或互評(píng)教師點(diǎn)評(píng)總結(jié)布置作業(yè)集中學(xué)生注意力，準(zhǔn)備上課。通過提問考察學(xué)生對(duì)插入圖像基礎(chǔ)知識(shí)的了解。如何在網(wǎng)頁上插入一張圖片，并調(diào)整圖片的大小、位置？學(xué)生分組討論如何在網(wǎng)頁上制作一個(gè)班級(jí)通訊錄，每行內(nèi)容有“姓名、照片、地址、聯(lián)系電話”。通過上面討論，引導(dǎo)學(xué)生認(rèn)識(shí)利用表格制作通訊錄是方便快捷的方式，再引導(dǎo)學(xué)生聯(lián)想生活中用到的表格，進(jìn)而了解表格在網(wǎng)頁制作中的廣泛應(yīng)用。在Dreamweaver 8中，表格是用于在頁面上顯示表格式數(shù)據(jù)及對(duì)文本和圖像等元素進(jìn)行布局的強(qiáng)用力的工具。本任務(wù)將學(xué)習(xí)在網(wǎng)頁制作中如何靈活運(yùn)用表格。提出任務(wù)：利用表格規(guī)劃、布局作品展示網(wǎng)頁。依據(jù)設(shè)計(jì)