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

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