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

1、整理文本整理文本.整理文本.長汀職業(yè)中專學(xué)校教案科目：?電商網(wǎng)頁制作?計(jì)算機(jī)組：張開秀整理文本整理文本.整理文本.班級：15電商3、4班工程一 初始dreamweaver8和建立站點(diǎn)章 節(jié)工程一1 初識(shí)Dreamweaver 8 課時(shí)；2 課時(shí)講授主要內(nèi)容Dreamweaver 8的根本概況Dreamweaver 8的功能和作用Dreamweaver 8的學(xué)習(xí)方法Dreamweaver 8的工作界面Dreamweaver 8工具欄和面板的使用方法重 點(diǎn)難 點(diǎn)Dreamweaver 8的工作界面Dreamweaver 8常用工具欄和面板的使用方法要求掌握的知識(shí)點(diǎn)和分析方法要求掌握Dreamwea

2、ver 8的功能和作用、定義站點(diǎn)的根本過程、創(chuàng)立文件和保存文件的方法、Dreamweaver 8 窗口界面、浮動(dòng)面板組、【標(biāo)準(zhǔn)】工具欄、【文件】面板、【文檔】工具欄、【屬性】面板、【插入】面板、工作區(qū)布局等知識(shí)點(diǎn)。工程主要是讓學(xué)生對網(wǎng)頁制作軟件Dreamweaver 8有一個(gè)總體認(rèn)識(shí)，并掌握學(xué)習(xí)Dreamweaver 8的根本方法。在工程中，首先介紹Dreamweaver 8的開展歷程、功能和作用，同時(shí)欣賞一些優(yōu)秀網(wǎng)站，然后介紹學(xué)習(xí)Dreamweaver 8的根本方法，最后介紹Dreamweaver 8的工作界面及其相關(guān)知識(shí)。授課思路，采用的教學(xué)方法和輔助手段，板書設(shè)計(jì)，重點(diǎn)如何突出，難點(diǎn)如何

3、解決，師生互動(dòng)等1、從網(wǎng)頁案例欣賞入手，讓學(xué)生增強(qiáng)對網(wǎng)頁設(shè)計(jì)與制作這門課程的興趣，同時(shí)增強(qiáng)創(chuàng)業(yè)的信心。2、以情景模擬的方式介紹Dreamweaver 8的功能和作用以及學(xué)習(xí)方法。3、以制作一個(gè)簡單的網(wǎng)頁為例悠悠我心的個(gè)人網(wǎng)站，讓學(xué)生認(rèn)識(shí)Dreamweaver 8的工作界面和工作過程。4、通過PPT課件講授根本知識(shí)。5、讓學(xué)生自己動(dòng)手制作教學(xué)案例，來進(jìn)一步穩(wěn)固Dreamweaver 8的使用。作業(yè)布置翻開教師發(fā)布的悠悠我心個(gè)人網(wǎng)站，穩(wěn)固Dreamweaver 8的使用整理文本整理文本.整理文本.教學(xué)反思通過學(xué)習(xí)，大局部學(xué)生對網(wǎng)頁制作這門課產(chǎn)生了濃厚的興趣。章 節(jié)工程一2規(guī)劃和創(chuàng)立站點(diǎn) 課時(shí)；2

4、課時(shí)講授主要內(nèi)容創(chuàng)立站點(diǎn)的根本方法管理站點(diǎn)的根本方法設(shè)置首選參數(shù)的方法創(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)。工程主要是讓學(xué)生對使用Dreamweaver 8定義、創(chuàng)立和發(fā)布站點(diǎn)有一個(gè)總體認(rèn)識(shí)，并學(xué)會(huì)其根本操作方法。在工程中，首先介紹做好一個(gè)網(wǎng)站必須經(jīng)歷的根本過程及網(wǎng)頁布局和色彩搭配的根底知識(shí)，然后介紹效勞器環(huán)境的配置以及在Dreamweaver 8中定義和創(chuàng)立站點(diǎn)的根本方法，最后使用Dreamweaver 8發(fā)布站點(diǎn)的方法。授課思路，采

5、用的教學(xué)方法和輔助手段，板書設(shè)計(jì)，重點(diǎn)如何突出，難點(diǎn)如何解決，師生互動(dòng)等1、教師講解網(wǎng)站制作流程、網(wǎng)頁布局的根本方式、網(wǎng)頁色彩搭配的原理和技巧等根底知識(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è)，對網(wǎng)頁制作的根本知識(shí)有了進(jìn)一步的了解 工程二 制作網(wǎng)站首頁任務(wù)描述：上一個(gè)工程中，創(chuàng)立了“幽幽我心的個(gè)人網(wǎng)站。本工程將在這個(gè)站點(diǎn)中進(jìn)行首頁內(nèi)容的制作，學(xué)習(xí)如何在網(wǎng)頁中添加文本和圖像，使用CSS設(shè)置文本

6、、圖像和頁面的樣式。任務(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)

7、 掌握修改網(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)頁文本的能力，并加深對網(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)容的方法。 在文檔中對文本分段換行和段內(nèi)換行，輸入連續(xù)空格。2教學(xué)難點(diǎn) 網(wǎng)頁編輯中三種不同換行方式的區(qū)別

8、。 在文檔窗口中輸入連續(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ù)集中學(xué)生注意力，準(zhǔn)備上課。指定學(xué)生上前操作，考察學(xué)生對新建站點(diǎn)、新建文件功能的掌握情況。1新建站點(diǎn)“幽幽我心的個(gè)人網(wǎng)站。2新建首頁文件index.html并翻開。在開始新的課程學(xué)習(xí)之前，先來了解一下，網(wǎng)頁元素的構(gòu)成，為什么要在首頁中添加文本。通過瀏覽新浪、搜狐等著名網(wǎng)站的

9、網(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，本單元將對首頁修改標(biāo)題，添加準(zhǔn)備好的內(nèi)容并設(shè)置其格式。通過學(xué)生動(dòng)手操作，復(fù)習(xí)與本次任務(wù)有關(guān)的知識(shí)。力求通過任務(wù)導(dǎo)入，吸引學(xué)生學(xué)習(xí)欲望。引導(dǎo)學(xué)生分析歸納。明確任務(wù)。教師提出任務(wù)要求，由學(xué)生進(jìn)行討論，教師歸納總結(jié)。整理文

10、本整理文本.整理文本.完成任務(wù)教師啟發(fā)學(xué)生，使學(xué)生借助課本、幫助等完成。結(jié)合PPT進(jìn)行知識(shí)講解知識(shí)總結(jié)舉一反三鼓勵(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)題是對網(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ù)制粘貼到文檔窗口。通過

11、比較使學(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)者，著重啟

12、發(fā)學(xué)生尋找完成任務(wù)的思路，養(yǎng)成檢索與應(yīng)用“書籍、“幫助、“網(wǎng)絡(luò)自學(xué)的好習(xí)慣。學(xué)生觀察標(biāo)題修改后文檔窗口左上角網(wǎng)頁名稱的變化。學(xué)生觀察預(yù)覽效果。學(xué)生對照觀察原文本文件與粘貼到文檔窗口后文本格式的變化情況。 整理文本整理文本.整理文本.任務(wù)目標(biāo)啟發(fā)思路分組完成任務(wù)學(xué)生自評或互評教師點(diǎn)評總結(jié)任務(wù)目標(biāo)啟發(fā)思路分組完成任務(wù)學(xué)生自評互評教師點(diǎn)評總結(jié)任務(wù)目標(biāo)啟發(fā)思路分組完成任務(wù)1使用IE瀏覽器瀏覽各種類型的頁面，分析各個(gè)頁面中文本所起作用，并分析是否可以用其他網(wǎng)頁元素代替。在互連網(wǎng)上有各種類型的網(wǎng)站，如搜索引擎類網(wǎng)站，商業(yè)類網(wǎng)站，個(gè)人網(wǎng)站等。設(shè)計(jì)各種類型的頁面都可以從中借鑒。對學(xué)生進(jìn)行分組，每組選擇一個(gè)主題

13、網(wǎng)站進(jìn)行分析。要求每組學(xué)生講出自己的分析結(jié)果，并自評。結(jié)論：文本在網(wǎng)頁制作中起著關(guān)鍵的作用，通常不能用其他網(wǎng)頁元素替代。2新建一個(gè)網(wǎng)頁“practice2-1.html，將本單元素材“舉一反三文件夾中“practice2-1.txt 的文本內(nèi)容拷貝到頁面中，使用插入空格的方法修改文本，使每一行文本中的“vs字樣到達(dá)對齊的效果。新建網(wǎng)頁“practice2-1.html，可以這樣完成：借助頭腦里的知識(shí)；借助互聯(lián)網(wǎng)借助Dreamweaver幫助同學(xué)討論。對學(xué)生分組，開始完成任務(wù)每組同學(xué)演示自己完成的任務(wù)，其他組給以評價(jià)?？偨Y(jié)各組同學(xué)完成任務(wù)情況，對完成好的給以表揚(yáng)，沒有完成的引導(dǎo)其找出沒有完成的原

14、因。3新建一個(gè)網(wǎng)頁“practice2-2.html，輸入多行文字內(nèi)容并進(jìn)行分段和強(qiáng)制換行，修改網(wǎng)頁標(biāo)題為“換行效果預(yù)覽，保存后預(yù)覽頁面，觀察在IE瀏覽器中標(biāo)題在什么位置，瀏覽器窗口大小發(fā)生變化時(shí)，對三種換行方式的影響。三種換行方式指的是自動(dòng)換行、分段和強(qiáng)制換行，重點(diǎn)理解它們的區(qū)別。教師作為引導(dǎo)者和組織者，學(xué)生分組上機(jī)操作，完成相應(yīng)任務(wù)并進(jìn)行評價(jià)。整理文本整理文本.整理文本.學(xué)生自評互評教師點(diǎn)評總結(jié)布置作業(yè)對學(xué)生分組，開始完成任務(wù)每組同學(xué)演示自己完成的任務(wù)，其他組給以評價(jià)?？偨Y(jié)各組同學(xué)完成任務(wù)情況，對完成好的給以表揚(yáng)，沒有完成的引導(dǎo)其找出沒有完成的原因?？梢愿鶕?jù)每組任務(wù)完成情況結(jié)合自評與互評情

15、況給出每組的成績。思考以下問題：1如何預(yù)覽和保存網(wǎng)頁？2如何對文檔窗口中的文本進(jìn)行段落的劃分和強(qiáng)制換行操作？3如何實(shí)現(xiàn)插入欄兩種顯示方式的轉(zhuǎn)換？任務(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)用。 掌握修改文本樣式。 掌握重命名文本樣式。 掌握添加水

16、平分隔線與列表。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í)知

17、識(shí)任務(wù)流程導(dǎo)入任務(wù)集中學(xué)生注意力，準(zhǔn)備上課。指定學(xué)生上前操作，考察對添加文本內(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)、顏色、加粗、傾斜及對齊方式等文本樣式的設(shè)置是必需的，那么，如何完成文本樣式的設(shè)置與編輯呢？ 通過指定學(xué)生上前演示，復(fù)習(xí)與本任務(wù)有關(guān)的知識(shí)。力求通過任務(wù)導(dǎo)入，吸引學(xué)生學(xué)習(xí)興趣。整理文本整理文本.整理文本.分析任務(wù)演示本任務(wù)完成效果

18、，教師分析。完成任務(wù)提出任務(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ù)選中修改屬性的弊端。簡介文本屬性面板各局部及其功能，講解為“字體列表項(xiàng)添加字體的方法。

19、 為網(wǎng)頁中第二段標(biāo)題文字“自我介紹設(shè)置文本樣式。 為標(biāo)題文字“青春寄語、“立志飛翔，應(yīng)用樣式為“自我介紹設(shè)置的樣式樣式重命名引導(dǎo)學(xué)生觀察并總結(jié)出樣式默認(rèn)命名形式為STYLE+N。一個(gè)網(wǎng)頁中可能會(huì)定義許多樣式，而這些樣式不一定全是文本類型的，為了方便使用樣式，最好對樣式進(jìn)行重命名，使名稱能表示樣式含義。演示為“幽幽我心的個(gè)人網(wǎng)站中的文本樣式重命名的方法，并按照課本P37頁表格要求，設(shè)置“青春寄語與“立志飛翔中的文本樣式并重命名。修改文本樣式提出如何修改文本樣式讓學(xué)生思考，學(xué)生們可能有說通過屬性面板修改樣式的，教師可以演示通過屬性面板不能修改樣式。演示修改title2樣式：引入課題。教師講解為主。

20、大多數(shù)學(xué)生都有編輯Word格式的經(jīng)驗(yàn)，引導(dǎo)學(xué)生將Word格式設(shè)置中的經(jīng)驗(yàn)遷移過來，加深學(xué)習(xí)的印象。 整理文本整理文本.整理文本.知識(shí)總結(jié)舉一反三任務(wù)目標(biāo)啟發(fā)思路分組完成任務(wù)學(xué)生自評或互評教師點(diǎn)評總結(jié)布置作業(yè)單擊“樣式列表旁的按鈕，翻開“CSS樣式面板。對樣式“title2進(jìn)行編輯，在面板當(dāng)中修改顏色值為“#FF6600。讓學(xué)生觀察應(yīng)用了“title2樣式的文本顏色是否會(huì)發(fā)生相應(yīng)的變化。插入列表與水平線選中“自我介紹局部的文本內(nèi)容，選擇“屬性面板中的“工程列表，為選中文本插入工程列表。將光標(biāo)插入到“青春寄語標(biāo)題之前，將“插入欄切換到“HTML類別，選擇其中的“水平線按鈕，在“自我介紹內(nèi)容和“青春

21、寄語內(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é)積

22、極討論完成任務(wù)。組織不同組的同學(xué)互相評論對方完成任務(wù)的優(yōu)缺點(diǎn)。教師對每組同學(xué)完成任務(wù)情況進(jìn)行總結(jié)，對完成任務(wù)的表揚(yáng)，對沒有完成任務(wù)的鼓勵(lì)，并幫助他們分析沒有完成的原因。可以根據(jù)每組任務(wù)完成情況結(jié)合自評與互評情況給出每組的成績。教師啟發(fā)思路，學(xué)生自己動(dòng)手完成。提醒學(xué)生使用幫助功能找到答案。整理文本整理文本.整理文本.1新建一個(gè)網(wǎng)頁“practice2-4.html，插入5條水平線，使用屬性面板進(jìn)行不同的寬、高、對齊與陰影屬性設(shè)置，預(yù)覽頁面并比較不同屬性的設(shè)置效果。2.新建“班級榮譽(yù)頁面，文件名為“practice2-5.html，列舉班級成員所獲獎(jiǎng)勵(lì)，設(shè)置為編號(hào)列表，修改文本樣式，用不同的文本大

23、小、顏色區(qū)分獎(jiǎng)勵(lì)的等級，保存并預(yù)覽頁面。嘗試先設(shè)文本樣式后設(shè)編號(hào)列表有何區(qū)別。要求各組課下搜集班級成員獲獎(jiǎng)情況，并制定一個(gè)設(shè)置方案任務(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ù)具體情況在指定位置

24、靈活高效地插入圖像并進(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ù)集中學(xué)生注意力，準(zhǔn)備上課。通過提問考察學(xué)生對設(shè)置文本樣式及插入水平線的掌握情況。1如何設(shè)置文本樣式

25、？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)形象，圖像的添加和編輯就必不可少了。復(fù)習(xí)時(shí)教師按照學(xué)生答復(fù)演示操作，指出其中的問題。整理文本整理文本.整理文本.分析任務(wù)完成任務(wù)結(jié)合PPT進(jìn)行講解知識(shí)總結(jié)舉一反三任務(wù)目標(biāo)提出任務(wù)：為首頁添加圖像內(nèi)容。圖像是網(wǎng)頁中經(jīng)常使用的元素，圖像的插入方法比較簡單，但需要區(qū)分圖像的格式，

26、并不是所有的圖像都能在網(wǎng)頁中正常顯示。插入圖像后需要熟悉其屬性面板的設(shè)置。1網(wǎng)頁中圖像文件的格式及其特點(diǎn)教師提出以下問題讓學(xué)生分組查找答案：通常在網(wǎng)頁中使用什么格式的圖像文件，它們的特點(diǎn)是什么？在同學(xué)答復(fù)上述問題根底上，教師總結(jié)并講解在網(wǎng)頁中通常使用“.jpg、“.gif和“.png格式圖像文件及其這三種格式圖像文件的特點(diǎn)。2準(zhǔn)備素材：將本單元素材文件夾中的“images文件夾下的全部圖像素材復(fù)制到D:mysiteimages文件夾下。使用文件面板插入圖像拖曳文件面板中的 “top.jpg到“自我介紹標(biāo)題前，插入圖像“top.jpg。選中所插入的圖像，在屬性面板中設(shè)置對齊方式為“右對齊。預(yù)覽頁

27、面效果。通過復(fù)習(xí)Word中插入圖像的方法，總結(jié)出另外三種插入圖像的方法。A使用菜單欄插入圖像定位插入點(diǎn)到“立志飛翔文字前，選擇菜單欄“插入菜單中的“圖像選項(xiàng)，插入“flying.gif圖像文件并設(shè)置對齊方式為“左對齊。B使用插入欄常用類別中的按鈕插入圖像定位插入點(diǎn)到“立志飛翔的第三段文字前，選擇“插入欄“常用類別中的按鈕，插入“flying.gif圖像文件并設(shè)置對齊方式為“右對齊。C使用Ctrl+Alt+I組合鍵插入圖像定位插入點(diǎn)到“立志飛翔的第五段文字前，使用Ctrl+Alt+I組合鍵，插入“flying.gif圖像文件并設(shè)置對齊方式為“左對齊。4介紹圖像屬性面板力求通過任務(wù)導(dǎo)入，吸引學(xué)生學(xué)

28、習(xí)欲望。引入課題。教師提出問題，并提示可以通過網(wǎng)絡(luò)搜索及查幫助找到答案。知識(shí)講解。師生一起回憶，探索發(fā)現(xiàn)插入圖像的三種方法。根據(jù)Word中插入圖像的經(jīng)驗(yàn)讓學(xué)生嘗試進(jìn)行，嘗試失敗的可以查找“幫助或通過網(wǎng)絡(luò)獲得答案。整理文本整理文本.整理文本.啟發(fā)思路分組完成任務(wù)學(xué)生自評或互評教師點(diǎn)評總結(jié)任務(wù)目標(biāo)啟發(fā)思路分組完成任務(wù)學(xué)生自評或互評教師點(diǎn)評總結(jié)布置作業(yè)完成圖像的編輯。概括本課插入圖像的四種方式。1將本單元素材文件夾中的“jyfs1.jpg插入到一個(gè)新建頁面“practice2-7.html中，裁剪后寬度為200像素，高度為100像素，并設(shè)置邊框?qū)挾葹?，完成后預(yù)覽頁面。插入后選中該圖像并通過屬性面板

29、完成。把不同層次的學(xué)生分在一組中，鼓勵(lì)同學(xué)積極研究探索完成任務(wù)。組織不同組的同學(xué)互相評論對方完成任務(wù)的優(yōu)缺點(diǎn)。教師對每組同學(xué)完成任務(wù)情況進(jìn)行總結(jié)，對完成任務(wù)的表揚(yáng)，對沒有完成任務(wù)的鼓勵(lì)，并幫助他們分析沒有完成的原因。2新建網(wǎng)頁“practice2-8.html，插入本單元素材文件夾中的“jyfs2.jpg，嘗試使用Dreamweaver 8的圖像編輯功能修改圖像的亮度并進(jìn)行銳化設(shè)置。插入后選中該圖像并通過屬性面板完成。把不同層次的學(xué)生分在一組中，鼓勵(lì)同學(xué)積極討論完成任務(wù)的方法組織不同組的同學(xué)互相評論對方完成任務(wù)的優(yōu)缺點(diǎn)。教師對每組同學(xué)完成任務(wù)情況進(jìn)行總結(jié)，對完成任務(wù)的表揚(yáng)，對沒有完成任務(wù)的鼓勵(lì)

30、，并幫助他們分析沒有完成的原因。可以根據(jù)每組任務(wù)完成情況結(jié)合自評與互評情況給出每組的成績。1通過網(wǎng)絡(luò)下載3張圖片，文件類型分別為“jpg、“gif、“bmp，使用不同的方法插入到一個(gè)新建頁面 “practice2-6.html中。教師啟發(fā)思路，學(xué)生自己動(dòng)手完成。 任務(wù)四 創(chuàng)立與應(yīng)用CSS美化網(wǎng)頁整理文本整理文本.整理文本.一、提出任務(wù)1任務(wù)目標(biāo)使用CSS美化網(wǎng)頁。2解決的問題本任務(wù)通過為對首頁進(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è)置

31、文本樣式。 掌握使用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)正確看待自己，合理評價(jià)他人。三、教學(xué)分析與準(zhǔn)備1. 教學(xué)重點(diǎn) CSS樣式的設(shè)置。 “類樣式與“標(biāo)簽樣式的區(qū)別。2教學(xué)難點(diǎn)“類樣式與“標(biāo)簽樣式的區(qū)別。3. 教學(xué)方法提出任務(wù)并帶著學(xué)生進(jìn)行分析，通過分析形成解決問題的思路，通過提醒化解解決問題過程中遇到的問題，通過舉一反三拓展對知識(shí)點(diǎn)的認(rèn)識(shí)與理解。4. 課時(shí)安排4課時(shí)。 5.

32、教學(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í)集中學(xué)生注意力，準(zhǔn)備上課。通過提問復(fù)習(xí)上節(jié)課所學(xué)內(nèi)容，并了解學(xué)生對上節(jié)課知識(shí)點(diǎn)的掌握情況。1網(wǎng)頁中文本樣式是如何設(shè)置的？復(fù)習(xí)時(shí)教師按照學(xué)生答復(fù)演示操作，指出其中的問題。整理文本整理文本.整理文本.任務(wù)流程導(dǎo)入任務(wù)分析任務(wù)完成任務(wù)2其他網(wǎng)頁元素的樣式是如何設(shè)置的？是否也可以使用“屬性面板來完成？在之前的任務(wù)中使用屬性面板來設(shè)置并應(yīng)用文本樣式，可以簡化文本屬性的設(shè)置過程。其特點(diǎn)主要表現(xiàn)為：樣式可以一次設(shè)置屢次應(yīng)用，可以同步修改已應(yīng)用的樣式。即豐富了文本的外觀

33、、美化了頁面同時(shí)也使文本屬性的修改變得簡單快捷。思考：是否可以用同樣方法設(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í)候，在彈出的對話框中要進(jìn)行樣式類型的選擇，其中包含了“類、“標(biāo)簽和“高級

34、三種類型，三種類型分別具有如下特點(diǎn)?！邦悩邮剑骸邦悩邮绞亲顬殪`活的一種類型的樣式，它可以任意定義名稱并且應(yīng)用到網(wǎng)頁中的各種對象上。但是這種類型的樣式在定義之后需要選擇對象并應(yīng)用后才會(huì)生效?！皹?biāo)簽樣式：“標(biāo)簽樣式的定義是建立在HTML語言根底上的，可以針對網(wǎng)頁中的各種標(biāo)簽進(jìn)行定義，所以用這種類型的樣式定義的名稱僅限于固定的標(biāo)簽名稱，并且在樣式定義后，直接被應(yīng)用到頁面中相應(yīng)的標(biāo)簽對象中。“高級樣式：這種樣式僅用于定義超級鏈接的4種狀態(tài)，所以可定義的樣式名稱也只有相應(yīng)的4種，分別是：“a:link用于定義超級鏈接初始狀態(tài)；“a:visited用于定義已經(jīng)訪問過的超級鏈接狀態(tài)；“a:hover用于定義

35、鼠標(biāo)經(jīng)過超級鏈接對象時(shí)的狀態(tài)；“a:active用于定義超級鏈接的活動(dòng)狀態(tài)。力求通過任務(wù)導(dǎo)入，吸引學(xué)生學(xué)習(xí)欲望。學(xué)生分組討論并嘗試操作。學(xué)生分組討論實(shí)現(xiàn)方法，并比較與之前所使用方法的不同。整理文本整理文本.整理文本.知識(shí)總結(jié)舉一反三任務(wù)目標(biāo)啟發(fā)思路 CSS樣式可定義參數(shù)?！邦愋瓦x項(xiàng)：用于定義常規(guī)的文本屬性，包括“字體、“大小、“顏色等選項(xiàng)。“背景選項(xiàng)：用于定義背景屬性，可設(shè)置“背景顏色、“背景圖像、背景圖像的“水平位置等選項(xiàng)?！皡^(qū)塊選項(xiàng)：用于定義文本的間距與對齊方式等屬性?！胺娇蜻x項(xiàng)：用于定義表格、框架等對象的屬性?！斑吙蜻x項(xiàng)：用于定義各種對象的邊框?qū)傩?，表格、框架、水平線的邊框樣式都可以使用

36、這一選項(xiàng)進(jìn)行定義。“列表選項(xiàng)：用于定義文本列表的屬性。“定位選項(xiàng)：用于定義層對象的屬性?！皵U(kuò)展選項(xiàng)：用于定義光標(biāo)、圖像等內(nèi)容的視覺效果的擴(kuò)展屬性。2創(chuàng)立與應(yīng)用頁面背景樣式。文本樣式的設(shè)置使用的是三種CSS樣式中的第一種類型，即“類樣式。其特點(diǎn)為：樣式的定義與應(yīng)用過程是別離的，所有定義好的“類樣式都需要選擇相應(yīng)對象進(jìn)行應(yīng)用。觀察以下操作，比較“標(biāo)簽樣式與“類樣式的區(qū)別。單擊“CSS樣式面板上的“新建CSS規(guī)那么按鈕，彈出“新建CSS規(guī)那么對話框，在當(dāng)前文檔中新建一個(gè)命名為“body的“標(biāo)簽樣式。完成相應(yīng)設(shè)置并瀏覽網(wǎng)頁。思考并討論：“類樣式與“標(biāo)簽樣式的區(qū)別。3完成其他樣式的設(shè)置 定義“標(biāo)簽樣式“

37、li。 定義“類樣式“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ù)覽頁面。教師作為引導(dǎo)者和組織者，學(xué)生分組上機(jī)操作，完成相應(yīng)任務(wù)并進(jìn)行評價(jià)。整理文本整理文本.整理文本.分組完成任務(wù)學(xué)生自評或互評教師點(diǎn)評總結(jié)任務(wù)目標(biāo)啟發(fā)思路分組完成任務(wù)學(xué)生自評或互評教師點(diǎn)評總結(jié)布置

38、作業(yè)三種“類樣式分別定義與應(yīng)用，表達(dá)了“類樣式的使用特點(diǎn)。每組4名同學(xué)，組長安排成員完成某一樣式的相關(guān)操作。組織不同組的同學(xué)互相評論對方完成任務(wù)的優(yōu)缺點(diǎn)。對正確完成的小組提出表揚(yáng)，不正確的進(jìn)行指正，或請其他組同學(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)先。把不

39、同層次的學(xué)生分在一組中，鼓勵(lì)同學(xué)積極討論完成任務(wù)的方法。組織同學(xué)自評或互評。教師對每組同學(xué)完成任務(wù)情況進(jìn)行總結(jié)，對完成任務(wù)的表揚(yáng)，對沒有完成任務(wù)的鼓勵(lì)，并幫助他們分析沒有完成的原因。新建網(wǎng)頁“practice2-10.html，插入本單元素材“舉一反三文件夾中的“jyfs3.jpg和一條水平線，定義“類樣式“l(fā)ine1”，修改樣式中的邊框?qū)傩浴７謩e將該樣式應(yīng)用在頁面中的圖片與水平線上，預(yù)覽頁面，分析樣式設(shè)置的結(jié)果。學(xué)生總結(jié)之前任務(wù)中的方法或按教材中的操作步驟完成。學(xué)生分組討論并通過嘗試操作得出結(jié)論。整理文本整理文本.整理文本.任務(wù)五 使用代碼制作圖文網(wǎng)頁一、提出任務(wù)1任務(wù)目標(biāo)使用HTML代碼制

40、作一個(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è)置圖像、文本、水平線

41、的屬性。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)入任

42、務(wù)分析任務(wù)完成任務(wù)知識(shí)講解教師引導(dǎo)，學(xué)生討論、分析。集中學(xué)生注意力，準(zhǔn)備上課。通過指定學(xué)生上前操作以下各題考察學(xué)生對已學(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)行簡單的屬性設(shè)置，了解相應(yīng)標(biāo)簽的使用方法、插入位置和根

43、本屬性。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) 簽 描述工程列表標(biāo)簽編號(hào)列表標(biāo)簽列表項(xiàng)標(biāo)簽 如何設(shè)置頁面的背景顏色屬性？ 如何設(shè)置段落標(biāo)簽、圖像標(biāo)簽及水平線標(biāo)簽的屬性？學(xué)生操作。力求通過任務(wù)導(dǎo)入，吸引學(xué)生學(xué)習(xí)興趣。任務(wù)提出后的分析過程可以先由學(xué)生討論，再由教師總結(jié)。整理文本整理文本.整理文本.知識(shí)總結(jié)舉一反三任務(wù)目標(biāo)啟發(fā)思路分組完成任務(wù)學(xué)生自評或互評教師點(diǎn)評總結(jié)布置作業(yè) 如何在代碼試圖下應(yīng)用CS

44、S。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)簽代碼制作工程列表，并比較與編號(hào)列表的區(qū)別。工程列表標(biāo)簽與編號(hào)列表標(biāo)簽的區(qū)別在于列表的瀏覽效果不同，使用方法是相同的，所以兩種列表中的列表項(xiàng)都是

45、使用標(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è)置圖像的對齊方式，完成后預(yù)覽頁面。培養(yǎng)學(xué)生自主學(xué)習(xí)、探究學(xué)習(xí)的能力。整理文本整理文本.整理文本.工程三 制作“作品展示

46、網(wǎng)頁本工程通過“創(chuàng)立表格、“編輯表格、“添加表格內(nèi)容和“建立超級鏈接四個(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ù)四 建立超級鏈接 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ù)所涉及原有

47、知識(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) 通過參與作品評價(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)

48、 分析頁面的表格布局。 創(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)頁布局集中學(xué)生注意力，準(zhǔn)備上課。通過提問考察學(xué)生對插入圖像根底知識(shí)的了解。如何在網(wǎng)頁上插入一張圖片，并調(diào)整圖片的大小、位置？學(xué)生分組討論如何在網(wǎng)頁上制作一個(gè)班級通訊錄，每行內(nèi)容有“姓名、照片、地址、聯(lián)系 。通過上面討論，引導(dǎo)學(xué)生認(rèn)識(shí)利用表格制作通訊錄是方便快

49、捷的方式，再引導(dǎo)學(xué)生聯(lián)想生活中用到的表格，進(jìn)而了解表格在網(wǎng)頁制作中的廣泛應(yīng)用。在Dreamweaver 8中，表格是用于在頁面上顯示表格式數(shù)據(jù)及對文本和圖像等元素進(jìn)行布局的強(qiáng)用力的工具。本任務(wù)將學(xué)習(xí)在網(wǎng)頁制作中如何靈活運(yùn)用表格。提出任務(wù)：利用表格規(guī)劃、布局作品展示網(wǎng)頁。依據(jù)設(shè)計(jì)圖樣，可以使用四個(gè)表格把頁面劃分為四個(gè)區(qū)域，四個(gè)表格分別命名為“table1、“table2、“table3和“table4。依據(jù)不同的設(shè)計(jì)內(nèi)容，這四個(gè)表格還需要進(jìn)行相應(yīng)的編輯與嵌套。1分析網(wǎng)頁布局 見課本圖3-2，教師帶著學(xué)生進(jìn)行頁面表格分析。引導(dǎo)學(xué)生了解：“table1是一個(gè)2行1列的表格。第一行用于放置網(wǎng)站標(biāo)題及圖

50、像，第二行嵌套一個(gè)1行5列的表格“table1-1”，用于放置五個(gè)導(dǎo)航按鈕?！皌able2是一個(gè)1行4列的表格。左右單元格為空白區(qū)域，中間兩個(gè)單元格分別用于放置“作品展示和“友情鏈接兩張圖像?！皌able3是一個(gè)1行3列的表格。左右單元格為空白區(qū)域，中間單元格用于放置作品分類標(biāo)題和圖像。在中間單元格嵌套一個(gè)6行1列的表格“table3-1”?！皌able3-1”表格的每一行再嵌套一個(gè)表格，其中第一、三、五行分別嵌套一個(gè)1行2列的表格，用于放置圖標(biāo)及作品題目；第二、四、六行分別嵌套一個(gè)1行5列的表格，放置三幅作品及左右兩個(gè)空白區(qū)域。學(xué)生答復(fù)，教師按照步驟操作。學(xué)生展開討論教師展示“作品展示網(wǎng)頁成

51、品PPT給出課本圖3-1頁面布局及課本圖3-2整理文本整理文本.整理文本.創(chuàng)立本欄目目錄結(jié)構(gòu)創(chuàng)立表格知識(shí)“table4是一個(gè)3行1列的表格，第一行是空白區(qū)域，第二行通過設(shè)置行屬性顯示為一條細(xì)線，第三行放置版權(quán)信息。重點(diǎn)理解如下內(nèi)容：課本圖3-1頁面布局由4個(gè)大表格組成，分別分析每個(gè)表格的作用。b什么是嵌套表格插入嵌套表格是指在表格的單元格中插入新的表格。和嵌套表格的作用。 教師舉一些網(wǎng)頁布局的實(shí)際例子讓學(xué)生進(jìn)行協(xié)同分析?？偨Y(jié)：通過以上幾個(gè)實(shí)際網(wǎng)站頁面的例子，介紹表格布局知識(shí)，即許多網(wǎng)頁的表格布局可分為上、中、下三個(gè)局部，上面局部放置網(wǎng)頁的標(biāo)題，中間局部放置網(wǎng)頁的主要內(nèi)容,下局部放置制作者的信息

52、及版權(quán)信息等。上、中、下三個(gè)局部又包含各自的嵌套表格來布局相應(yīng)的內(nèi)容。提問：回想以前翻開一張網(wǎng)頁的時(shí)候是所有的內(nèi)容都同時(shí)全部顯示嗎？如果不是的話是怎樣進(jìn)行顯示的呢？為什么這樣顯示？表格布局在這里有什么作用？總結(jié)：如果使用表格布局網(wǎng)頁結(jié)構(gòu)不合理，會(huì)降低網(wǎng)頁瀏覽速度。因?yàn)闉g覽器在解析網(wǎng)頁時(shí)，先將整個(gè)網(wǎng)頁的結(jié)構(gòu)下載完后才顯示內(nèi)容，如果不使用嵌套表格布局網(wǎng)頁只使用一個(gè)表格會(huì)非常復(fù)雜，瀏覽者要等待很長時(shí)間才能看到網(wǎng)頁內(nèi)容。通常用表格布局頁面時(shí)，應(yīng)該遵循以下幾點(diǎn)：a整個(gè)網(wǎng)頁不要放在一個(gè)表格里，盡量使用多個(gè)表格來進(jìn)行布局。b表格的嵌套層次盡量要少。c單一表格的結(jié)構(gòu)盡量整齊，不要太復(fù)雜。2創(chuàng)立目錄結(jié)構(gòu)在Dre

53、amweaver 8中翻開“幽幽我心的個(gè)人網(wǎng)站，依據(jù)第一單元建立的網(wǎng)站目錄結(jié)構(gòu)，在本欄目“works文件夾中新建文件“works.html，然后把光盤中本單元素材中的“wkimages、“flash、“l(fā)inks文件夾復(fù)制到本欄目“works文件夾中。本欄目目錄結(jié)構(gòu)如課本表3-1所示。3創(chuàng)立表格的知識(shí) 練習(xí)插入一個(gè)表格：學(xué)會(huì)使用菜單、“插入欄、快捷鍵創(chuàng)立表格。 答復(fù)表格對話框中如下選項(xiàng)的作用：“頁眉選項(xiàng)組、“標(biāo)題、“對齊標(biāo)題、“摘要。 要求學(xué)生答復(fù)以下問題：a大多數(shù)瀏覽器默認(rèn)顯示單元格邊距、間距是多少？假設(shè)要確保瀏覽器顯示的表格沒有邊距和間距，必須把單元格邊距和單元格間距設(shè)置為多少？讓學(xué)生積極

54、討論實(shí)際例子的布局結(jié)構(gòu)，教師歸納總結(jié)。給一定時(shí)間學(xué)生自己學(xué)習(xí)或討論找出答案，教師最后總結(jié)。整理文本整理文本.整理文本.完成任務(wù)知識(shí)小結(jié)舉一反三任務(wù)目標(biāo)啟發(fā)思路分組完成任務(wù)學(xué)生自評或互評教師點(diǎn)評總結(jié)布置作業(yè)b如果沒有明確指定邊框的值，那么瀏覽器怎么顯示表格邊框呢？大多數(shù)瀏覽器默認(rèn)顯示邊框粗細(xì)是多少？假設(shè)要確保瀏覽器顯示的表格沒有邊框應(yīng)該怎么辦？假設(shè)把邊框設(shè)置為0，那么如何查看單元格和表格的邊框呢？c在網(wǎng)頁制作過程中，元素的長度單位可以選用百分比或像素來表示。請解釋什么是像素、百分比？它們的區(qū)別是什么？“百分比是相對于誰說的？教師在最后總結(jié)時(shí)一定要強(qiáng)調(diào)是父元素，其絕對大小會(huì)隨所屬父元素的大小變化而

55、發(fā)生變化。d在用表格布局頁面時(shí)，寬度設(shè)置為多少時(shí)頁面不會(huì)出現(xiàn)水平方向的滾動(dòng)條？教師總結(jié)：為防止瀏覽過程中出現(xiàn)水平方向的滾動(dòng)條，通常在800*600分辨率下，把表格寬度最大設(shè)置為778像素，在1024*768分辨率下最大設(shè)置為1002像素。e如何給當(dāng)前表格命名？如何刪除當(dāng)前選中的表格？f嵌套表格的寬度受所在單元格寬度的限制嗎？4自己動(dòng)手根據(jù)所學(xué)知識(shí)，創(chuàng)立課本圖3-1頁面所需表格結(jié)構(gòu)。通過完本錢任務(wù)學(xué)習(xí)了： 創(chuàng)立表格 表格布局頁面 表格在頁面中的作用：讓學(xué)生討論表格在網(wǎng)頁制作中的作用：網(wǎng)頁中既有明顯的表格，也有隱含的表格；表格在網(wǎng)頁中有兩種作用：布局與真正的表格。創(chuàng)立網(wǎng)頁“practice3-1.

56、html，在網(wǎng)頁中插入一個(gè)6行5列的表格，寬500像素，邊框粗細(xì)與單元格間距均為5像素，頁眉選擇“頂部，標(biāo)題為“產(chǎn)品信息，保存并預(yù)覽網(wǎng)頁?；叵氩迦氡砀竦膸追N方法，考慮頁眉、標(biāo)題等選項(xiàng)出現(xiàn)在哪個(gè)對話框的選項(xiàng)卡中，并考慮如何設(shè)置創(chuàng)立表格的相關(guān)屬性。學(xué)生分組完成任務(wù)，教師巡視指導(dǎo)，指出問題，糾正學(xué)生不良操作習(xí)慣。由各組學(xué)生代表分析說明自己完成的任務(wù)。對完成任務(wù)的學(xué)生給予鼓勵(lì)，完不成的幫助其找到原因并引導(dǎo)完成。整理文本整理文本.整理文本.1創(chuàng)立網(wǎng)頁“practice3-2.html，在網(wǎng)頁中插入如圖JYFS3-1所示的嵌套表格，保存并預(yù)覽網(wǎng)頁。圖JYFS3-12創(chuàng)立網(wǎng)頁“practice3-3.htm

57、l，在網(wǎng)頁中插入如圖JYFS3-2所示的嵌套表格，保存并預(yù)覽網(wǎng)頁。圖JYFS3-23制作一個(gè)以環(huán)保為主題的網(wǎng)頁，首先利用已學(xué)知識(shí)設(shè)計(jì)欄目和目錄結(jié)構(gòu)，創(chuàng)立表格布局網(wǎng)頁。整理文本整理文本.整理文本.任務(wù)二 編輯表格一、提出任務(wù)1任務(wù)目標(biāo)編輯已創(chuàng)立成的表格。2. 解決的問題通過對本單元任務(wù)一創(chuàng)立的表格進(jìn)行編輯，學(xué)習(xí)更改表格邊框或背景顏色，添加、刪除行或列，調(diào)整行高、列寬及表格大小，拆分或合并單元格。3. 本任務(wù)所涉及原有知識(shí)要點(diǎn)完本錢任務(wù)需要掌握以前學(xué)過的利用表格布局頁面，創(chuàng)立表格等知識(shí)點(diǎn)。二、教學(xué)目標(biāo)1. 知識(shí)目標(biāo) 掌握選擇單元格。 掌握選擇表格。 掌握設(shè)置單元格屬性。 掌握設(shè)置表格屬性。 掌握表

58、格的根本操作：如合并、拆分單元格，添加、刪除行或列，調(diào)整行高、列寬。2. 能力目標(biāo)掌握表格編輯，能夠根據(jù)具體需求靈活應(yīng)用表格。3. 情感目標(biāo)培養(yǎng)學(xué)生用比較分析方法分析問題、解決問題的能力，并使學(xué)生具有自主學(xué)習(xí)能力。三、教學(xué)分析與準(zhǔn)備1. 教學(xué)重點(diǎn) 選擇單元格、選擇表格。 設(shè)置單元格和表格的屬性。 表格的根本操作。整理文本整理文本.整理文本.2教學(xué)難點(diǎn)單元格和表格屬性的區(qū)分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ù)

59、習(xí)提問任務(wù)流程導(dǎo)入任務(wù)分析任務(wù)完成任務(wù)知識(shí)點(diǎn)講解集中學(xué)生注意力，準(zhǔn)備上課。通過提問方式考察學(xué)生對插入表格的掌握情況。1創(chuàng)立表格的方法有哪些？2用表格布局頁面的本卷須知有哪些？表格插入后和課本圖3-1的表格相比較，會(huì)發(fā)現(xiàn)相差甚遠(yuǎn)，至少表格的高度就相差很多，有些單元格還需要調(diào)整。要完成最終效果，就必須對表格進(jìn)行編輯。提出任務(wù)：編輯任務(wù)一中已創(chuàng)立成的表格。觀察任務(wù)一中創(chuàng)立的表格，比照最終效果，需要分別對表格“table1”、“table2”、“table3”、“table4及其嵌套表格，設(shè)置對齊、行高與列寬、背景顏色、背景圖像和邊框等屬性。1知識(shí)點(diǎn)講解 選中單元格和表格a引導(dǎo)學(xué)生利用已經(jīng)學(xué)過的Wor

60、d表格知識(shí)遷移總結(jié)什么是表格、單元格、行、列。b介紹表格的3個(gè)重要標(biāo)簽“table、tr、td并演示用法。c學(xué)生分組討論選擇表格的方法，并最后總結(jié)。d學(xué)生分組討論選擇表格中行、列、單元格的方法，并最后總結(jié)。思考：選中表格中所有單元格和選中整個(gè)表格是一個(gè)概念嗎？帶著問題學(xué)習(xí)下面知識(shí)。 設(shè)置單元格屬性、表格屬性利用屬性面板設(shè)置屬性。學(xué)生答復(fù)，教師歸納。教師用PPT展示這兩張表格。教師講授教師簡單介紹知識(shí)點(diǎn)。整理文本整理文本.整理文本.a表格“屬性面板參數(shù)介紹“表格Id：表格的Id，為表格命名?！靶泻汀傲校罕砀裰行?、列的數(shù)目。“寬和“高：以像素為單位或按百分比指定表格寬度、高度。通常不需要設(shè)置表格的