《網(wǎng)頁制作》教案

1、湖 南 省 商 業(yè) 技 術(shù) 學(xué) 院學(xué) 期 授 課 進(jìn) 度 計(jì) 劃（ 二 年級(jí) 第 一 學(xué)期）課程名稱 網(wǎng)頁制作與設(shè)計(jì)適用班級(jí) 16高21、22制定教師 易會(huì)芝審 批 簽 字教研室主任年 月 日教務(wù)科長(zhǎng)年 月 日教務(wù)院長(zhǎng)年 月 日 2017-2018 學(xué)年第 一 學(xué)期制定課 時(shí) 分 配授 課周 數(shù)周課時(shí)授 課總課時(shí)其 中講 課實(shí) 驗(yàn)復(fù)習(xí)考試機(jī) 動(dòng)23期 末 完 成 情 況計(jì) 劃課 時(shí)完 成課 時(shí)超 出 或 缺 少 課 時(shí)超 出缺 少彌 補(bǔ)教 學(xué) 截 至章 節(jié) 內(nèi) 容備注：用藍(lán)黑或碳素墨水鋼筆填寫教 學(xué) 計(jì) 劃學(xué)情分析本門課程網(wǎng)頁設(shè)計(jì)與制作的教學(xué)班級(jí)為14級(jí)計(jì)算機(jī)班，計(jì)算機(jī)班對(duì)網(wǎng)絡(luò)知識(shí)有一定的了解

2、，基礎(chǔ)知識(shí)較好，同時(shí)根據(jù)實(shí)際情況，特?cái)M定本計(jì)劃。大 綱 要 求通過本學(xué)期網(wǎng)頁設(shè)計(jì)與制作的學(xué)習(xí)，主要要求同學(xué)們掌握網(wǎng)頁制作的一些基本功能和操作，為以后的一些學(xué)習(xí)和工作打下較好的基礎(chǔ)。通過學(xué)習(xí)要求同學(xué)達(dá)到以下要求：1、了解DreamweaverCS6的詳細(xì)功能及操作方法。2、熟練掌握網(wǎng)頁制作技巧。3、掌握網(wǎng)頁規(guī)范以及網(wǎng)頁優(yōu)化和網(wǎng)站推廣的知識(shí)。4、明確網(wǎng)站建設(shè)的流程和站點(diǎn)建設(shè)成后需要做的優(yōu)化推廣工作。教 學(xué) 重 點(diǎn)1、超級(jí)鏈接2、表格表單應(yīng)用3、框架使用4、CSS樣式教 學(xué) 難 點(diǎn)1、超級(jí)鏈接2、用表格和框架布局頁面3、創(chuàng)建數(shù)據(jù)庫教 學(xué) 方 法講授法、演示法、項(xiàng)目教學(xué)法、合作學(xué)習(xí)、對(duì)話、任務(wù)驅(qū)動(dòng)法、

3、頭腦風(fēng)暴、小組討論法等教學(xué)方法。學(xué) 期 授 課 進(jìn) 度 計(jì) 劃 表周次授 課 內(nèi) 容課時(shí)備 注31.1網(wǎng)站基礎(chǔ)知識(shí)21、2周新生軍訓(xùn)1.2網(wǎng)站建設(shè)概述2實(shí)訓(xùn) 新建一個(gè)網(wǎng)頁2上機(jī)42.1添加和編輯文本2實(shí)訓(xùn) 網(wǎng)站素材處理2上機(jī)實(shí)訓(xùn) 制作簡(jiǎn)單網(wǎng)頁2上機(jī)567國慶放假6機(jī)動(dòng)補(bǔ)周一課82.2添加和編輯圖像62.3創(chuàng)建超級(jí)鏈接2實(shí)訓(xùn) 圖像處理和創(chuàng)建超級(jí)鏈接2上機(jī)9實(shí)訓(xùn) 跳轉(zhuǎn)菜單2上機(jī)2.4使用表格布局頁面2實(shí)訓(xùn) 表格布局實(shí)例分析2上機(jī)10 2.5使用框架布局頁面2運(yùn)動(dòng)會(huì)充周三到周五運(yùn)動(dòng)會(huì)11實(shí)訓(xùn) 框架布局實(shí)例分析2上機(jī)3.3添加動(dòng)畫2添加音頻和視頻212實(shí)訓(xùn) DIV與表格的轉(zhuǎn)換2上機(jī)4.3晃動(dòng)的圖片2實(shí)

4、訓(xùn) 交換圖像2上機(jī)13實(shí)訓(xùn) 拼圖游戲2上機(jī)4.4修改屬性特效及動(dòng)態(tài)菜單制作2實(shí)訓(xùn) 效果行為應(yīng)用2上機(jī)14實(shí)訓(xùn) 圖片展播實(shí)例2上機(jī)5.1認(rèn)識(shí)和編輯CSS2實(shí)訓(xùn) 美化頁面2上機(jī)15實(shí)訓(xùn) 應(yīng)用CSS到網(wǎng)頁中2上機(jī)5.2類型、背景和區(qū)塊樣式2實(shí)訓(xùn) 方框、邊框和導(dǎo)航欄2上機(jī)16實(shí)訓(xùn) 超鏈接樣式及設(shè)置技巧2上機(jī)學(xué) 期 授 課 進(jìn) 度 計(jì) 劃 表6.1DIV布局頁面26.2認(rèn)識(shí)Spry217實(shí)訓(xùn) 調(diào)整樣式2上機(jī)6.3選擇服務(wù)器和使用虛擬機(jī)26.4申請(qǐng)域名218實(shí)訓(xùn) 網(wǎng)站發(fā)布2上機(jī)7.1個(gè)人主頁制作27.2策劃構(gòu)思及設(shè)計(jì)流程219實(shí)訓(xùn) 頁面布局2上機(jī)7.3制作頁面頭部27.4制作中間表格內(nèi)容220元旦放假2機(jī)

5、動(dòng)2充周一課22122222復(fù)習(xí)考試6教研組意見課題1.1網(wǎng)頁制作基礎(chǔ)知識(shí)教學(xué)課時(shí)2課時(shí)教學(xué)目標(biāo)知識(shí)目標(biāo)能了解網(wǎng)頁制作軟件的特點(diǎn)能力目標(biāo)能掌握網(wǎng)頁制作的基本概念情感目標(biāo)提高學(xué)生團(tuán)結(jié)合作精神，提高學(xué)生競(jìng)爭(zhēng)意識(shí)教學(xué)重點(diǎn)網(wǎng)頁的組成教學(xué)難點(diǎn)網(wǎng)頁的分類，網(wǎng)址與域名的區(qū)分教學(xué)資源1.教學(xué)場(chǎng)所：多媒體教室2.教學(xué)設(shè)備：安裝有Dreamweaver cs5軟件的計(jì)算機(jī)3.教學(xué)資料：輔助課件.多媒體教學(xué)軟件教法講解法、任務(wù)驅(qū)動(dòng)教學(xué)法學(xué)法小組討論法教學(xué)過程課前準(zhǔn)備導(dǎo)入新課講授新課動(dòng)手實(shí)踐課堂小結(jié)作業(yè)布置時(shí)間分配510501555教學(xué)過程過程安排教學(xué)內(nèi)容教師活動(dòng) 學(xué)生活動(dòng)設(shè)計(jì)意圖課前準(zhǔn)備1、教師自我介紹；2、點(diǎn)名；

6、3、課程介紹4、課堂要求1.自我介紹2.按照花名冊(cè)點(diǎn)名3.課程介紹4.統(tǒng)計(jì)學(xué)情5.提出期望與要求1.班長(zhǎng)統(tǒng)計(jì)座次表2.學(xué)生自我介紹3.反應(yīng)學(xué)情4.推薦課代表。使師生盡快互相認(rèn)識(shí)，并促使學(xué)生答題了解我們的課程。導(dǎo)入新課本次課是本學(xué)期第一次上課，簡(jiǎn)單介紹本課程：1、網(wǎng)頁設(shè)計(jì)相關(guān)級(jí)別及其薪資待遇2、網(wǎng)頁設(shè)計(jì)的就業(yè)方向及其公司類型以提問的方式了解學(xué)生對(duì)網(wǎng)頁設(shè)計(jì)的認(rèn)知學(xué)生之間相互討論，加深對(duì)網(wǎng)頁設(shè)計(jì)的認(rèn)識(shí)提問跟就業(yè)和薪資有關(guān)的問題，抓住學(xué)生注意力。任務(wù)一講授新課一、網(wǎng)頁設(shè)計(jì)介紹1、網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息（包括產(chǎn)品和服務(wù)）的一種方式，是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺(tái)，離開網(wǎng)站去談電子商務(wù)是不

7、可能的。2、企業(yè)的網(wǎng)站被稱為“網(wǎng)絡(luò)商標(biāo)”，也是企業(yè)無形資產(chǎn)的組成部分，而網(wǎng)站是Internet上宣傳和反映企業(yè)形象和文化的重要窗口。二、網(wǎng)頁設(shè)計(jì)的要點(diǎn)1、明確建站目標(biāo)和需求。2、網(wǎng)站主題鮮明。3、網(wǎng)站版式設(shè)計(jì)。4、色彩在網(wǎng)站設(shè)計(jì)中的作用。5、網(wǎng)站設(shè)計(jì)形式與內(nèi)容統(tǒng)一。三、網(wǎng)站設(shè)計(jì)級(jí)別1、新手入行2、跳槽階段3、穩(wěn)定階段4、大師階段四、網(wǎng)頁設(shè)計(jì)公司類型1、門戶游戲類2、企業(yè)部門類3、網(wǎng)站建設(shè)類4、互動(dòng)設(shè)計(jì)類五、網(wǎng)頁三劍客1、 Dreamweaver： 可視化頁面設(shè)計(jì)、網(wǎng)站管理2、 Fireworks 頁面圖象設(shè)計(jì)工具3、 Flash 動(dòng)畫制作六、網(wǎng)頁基礎(chǔ)知識(shí)1、網(wǎng)頁與網(wǎng)站的區(qū)別（1）網(wǎng)頁是WWW系

8、統(tǒng)中信息的基本單位，簡(jiǎn)單來說，就是后綴名為htm的文件。（2）網(wǎng)站是指存放在網(wǎng)絡(luò)服務(wù)器上的完整信息的集合體。2、網(wǎng)頁的組成（1）文字：最直接、通用、容易的溝通方式（2）圖片：網(wǎng)頁的一大特點(diǎn)圖文并茂（3）動(dòng)畫：1995年，Sun公司開發(fā)了Java語言，用戶可以創(chuàng)建能調(diào)用圖片和聲音的多媒體應(yīng)用小程序（4）超鏈接：要通過一種方式把各獨(dú)立的網(wǎng)頁整和在一起，使之構(gòu)成一有機(jī)整體，而這種鏈接頁面的功能叫超鏈接。（5）特殊組件：圖片與動(dòng)畫可算是最常見的特殊組件。3、主頁Homepage引導(dǎo)訪問者瀏覽網(wǎng)站。 index、main、default4、網(wǎng)頁空間在Internet上申請(qǐng)的一個(gè)存儲(chǔ)空間，用以存放網(wǎng)頁。5

9、、網(wǎng)址和域名網(wǎng)址：IP地址域名：與IP地址相對(duì)應(yīng)，唯一性，善于識(shí)別最右邊：國家（中國cn）其次：機(jī)構(gòu)（商業(yè)機(jī)構(gòu)com）再次：子網(wǎng)名稱最左邊：服務(wù)器類別（web服務(wù)器www）6、網(wǎng)頁的分類靜態(tài)頁面與動(dòng)態(tài)頁面7、認(rèn)識(shí)網(wǎng)站門戶網(wǎng)站：sina個(gè)人網(wǎng)站：明星專業(yè)網(wǎng)站：醫(yī)療職能網(wǎng)站：政府簡(jiǎn)單介紹網(wǎng)頁知識(shí)提問：網(wǎng)頁設(shè)計(jì)要點(diǎn)并將學(xué)生分組進(jìn)行討論講述網(wǎng)站設(shè)計(jì)級(jí)別，引導(dǎo)學(xué)生對(duì)這個(gè)行業(yè)向往，并鼓勵(lì)學(xué)生向大師階段努力簡(jiǎn)單介紹學(xué)生將來從事本行業(yè)的范圍介紹網(wǎng)頁制作需要的軟件給學(xué)生灌輸網(wǎng)頁設(shè)計(jì)的基本知識(shí)吸收新知識(shí)并思考生活中常見網(wǎng)頁設(shè)計(jì)知識(shí)分組討論，并派出代表來總結(jié)思考自己的定位了解本行業(yè)的現(xiàn)狀認(rèn)識(shí)軟件基本組成做筆記，識(shí)記

10、教師講述的知識(shí)講述基礎(chǔ)知識(shí)，為后面學(xué)習(xí)打下基礎(chǔ)加強(qiáng)學(xué)生之間交流溝通能力，加深學(xué)生對(duì)網(wǎng)頁設(shè)計(jì)要點(diǎn)理解引導(dǎo)學(xué)生了解這個(gè)行業(yè)引導(dǎo)學(xué)生了解本行業(yè)從事范圍提前引導(dǎo)學(xué)生認(rèn)識(shí)dreamweaver cs5 為后面軟件學(xué)習(xí)打下基礎(chǔ)這些知識(shí)都是學(xué)網(wǎng)頁設(shè)計(jì)最基本的基礎(chǔ)知識(shí)，學(xué)生基礎(chǔ)知識(shí)薄弱，必須了解這些才能學(xué)習(xí)后面的內(nèi)容任務(wù)二動(dòng)手實(shí)踐根據(jù)網(wǎng)頁設(shè)計(jì)要點(diǎn)，以小組為單位確定一個(gè)網(wǎng)站主題，小組討論需要的步驟以及素材巡回指導(dǎo)，給予學(xué)生幫助小組討論，相互溝通加深學(xué)生對(duì)網(wǎng)頁設(shè)計(jì)要點(diǎn)學(xué)習(xí)課后作業(yè)1、 按照課堂分組課后進(jìn)行討論2、 每組確定一個(gè)網(wǎng)站主題方向。3、 每組設(shè)計(jì)一個(gè)網(wǎng)站調(diào)查問卷。課堂小結(jié)一、 網(wǎng)頁設(shè)計(jì)師就業(yè)方向二、 網(wǎng)站

11、設(shè)計(jì)流程三、 常見網(wǎng)站教學(xué)反思本次課是網(wǎng)頁設(shè)計(jì)第一次上課，主要講述一些網(wǎng)頁基礎(chǔ)知識(shí)，學(xué)生基礎(chǔ)知識(shí)薄弱，需要加強(qiáng)，整體來說計(jì)算機(jī)班基礎(chǔ)知識(shí)要好于電子商務(wù)班板書一、網(wǎng)頁設(shè)計(jì)介紹二、網(wǎng)頁設(shè)計(jì)的要點(diǎn)三、網(wǎng)站設(shè)計(jì)級(jí)別四、網(wǎng)頁設(shè)計(jì)公司類型五、網(wǎng)頁三劍客六、網(wǎng)頁基礎(chǔ)知識(shí)課題1.2網(wǎng)站建設(shè)概述教學(xué)課時(shí)2課時(shí)教學(xué)目標(biāo)知識(shí)目標(biāo)了解做網(wǎng)站的準(zhǔn)備工作，掌握站點(diǎn)的建立。能力目標(biāo)1. 能了解網(wǎng)站開發(fā)的基本流程。2. 能掌握網(wǎng)站開發(fā)的基本原則。3. 能學(xué)會(huì)站點(diǎn)的建立與管理。情感目標(biāo)提高學(xué)生團(tuán)結(jié)合作精神，增強(qiáng)小組合作能力教學(xué)重點(diǎn)站點(diǎn)的建立教學(xué)難點(diǎn)如何規(guī)劃好一個(gè)網(wǎng)站教學(xué)資源1.教學(xué)場(chǎng)所：多媒體教室2.教學(xué)設(shè)備：安裝有Dream

12、weaver cs5軟件的計(jì)算機(jī)3.教學(xué)資料：輔助課件、多媒體教學(xué)軟件教法講解法、任務(wù)驅(qū)動(dòng)教學(xué)法學(xué)法小組討論法教學(xué)過程過程安排教學(xué)內(nèi)容教師活動(dòng) 學(xué)生活動(dòng)設(shè)計(jì)意圖課前準(zhǔn)備1、搜集了解網(wǎng)站開發(fā)的基本流程。2、網(wǎng)站設(shè)計(jì)、制作過程中的一些原則、注意事項(xiàng)。配合學(xué)生搜索資料及解答疑問網(wǎng)上搜索教師提出問題，了解網(wǎng)站設(shè)計(jì)事項(xiàng)培養(yǎng)學(xué)生自主學(xué)習(xí)能力導(dǎo)入新課(5min)網(wǎng)站設(shè)計(jì)大致流程是哪些？每組派出一個(gè)代表闡述本組課前搜集的資料聽取學(xué)生的觀點(diǎn)并給予一定的知道闡述觀點(diǎn)，組員之間相互討論鍛煉學(xué)生的語言表達(dá)能力和分析能力任務(wù)一講授新課(35min)一、 網(wǎng)站設(shè)計(jì)流程架構(gòu)內(nèi)容信息搜集整理資料規(guī)劃網(wǎng)站結(jié)構(gòu)網(wǎng)頁制作整合網(wǎng)站效

13、果測(cè)試網(wǎng)站上傳網(wǎng)站推廣更新維護(hù)任務(wù)二分組討論(40min)二、 網(wǎng)站開發(fā)原則1、 確定主題討論：網(wǎng)站是靠什么贏利的？2、規(guī)劃站點(diǎn)結(jié)構(gòu)（1）結(jié)構(gòu)設(shè)計(jì)（2）目錄結(jié)構(gòu)設(shè)計(jì)（3）形象設(shè)計(jì)（4）主頁設(shè)計(jì)（5）其他頁面設(shè)計(jì)（6）企業(yè)站點(diǎn)設(shè)計(jì)（7）為站點(diǎn)設(shè)計(jì)目標(biāo)對(duì)象訪問率三、網(wǎng)頁版面布局設(shè)計(jì)1、版面布局的原則（1）主次分明、中心突出（2）大小搭配、相互呼應(yīng)（3）圖文并茂、相得益彰（4）動(dòng)靜適度、平衡對(duì)稱2、頁面布局的類型（1）“國”字型（2）框架型（3）標(biāo)題正文型（4）封面型（5）綜合型四、規(guī)劃站點(diǎn)1、建立站點(diǎn)目錄2、站點(diǎn)規(guī)劃 規(guī)劃站點(diǎn)結(jié)構(gòu)是利用不同的文件夾將不同的網(wǎng)頁內(nèi)容分門別類的保存。3、創(chuàng)建導(dǎo)航草圖五

14、、搜集素材1、搜集并制作素材無論是文字素材還是圖片、動(dòng)畫素材，都應(yīng)注意其來源是否注明版權(quán)所有。網(wǎng)站素材要為網(wǎng)站主題服務(wù)。2、整理素材原始素材、編輯處理好的素材3、命名規(guī)范六、創(chuàng)建站點(diǎn)1、不使用服務(wù)器技術(shù)2、本地編輯3、不連接到遠(yuǎn)程服務(wù)器七、管理站點(diǎn)（1）編輯現(xiàn)有站點(diǎn)（2）刪除已有站點(diǎn)1、確定網(wǎng)站主題的建議2、給網(wǎng)站取名3、提示決定網(wǎng)站的性質(zhì)小組討論，相互溝通加深學(xué)生對(duì)網(wǎng)頁設(shè)計(jì)要點(diǎn)學(xué)習(xí)課后作業(yè)(5min)根據(jù)這次課的內(nèi)容、注意事項(xiàng)，構(gòu)思一個(gè)明確的網(wǎng)站主題，并將站點(diǎn)結(jié)構(gòu)的規(guī)劃用文件夾表示出來課堂小結(jié)(5min)一、 網(wǎng)站設(shè)計(jì)確定主題二、 網(wǎng)站設(shè)計(jì)流程三、 站點(diǎn)管理教學(xué)反思本次主要講述站點(diǎn)的建立和管

15、理，課程較簡(jiǎn)單，學(xué)生掌握較好板書一、網(wǎng)站設(shè)計(jì)流程二、網(wǎng)站開發(fā)原則三、網(wǎng)頁版面布局設(shè)計(jì)四、規(guī)劃站點(diǎn)五、搜集素材六、創(chuàng)建站點(diǎn)七、管理站點(diǎn)實(shí)訓(xùn)課題新建一個(gè)網(wǎng)頁實(shí)訓(xùn)課時(shí)2課時(shí)實(shí)訓(xùn)目標(biāo)1、 熟悉Dreamweaver cs4界面2、 制作簡(jiǎn)單網(wǎng)頁實(shí)訓(xùn)重點(diǎn)1、 學(xué)會(huì)在網(wǎng)頁中輸入文字、插入圖片等2、 掌握簡(jiǎn)單代碼的編寫實(shí)訓(xùn)難點(diǎn)代碼的編寫實(shí)訓(xùn)方法上機(jī)實(shí)訓(xùn)實(shí)訓(xùn)準(zhǔn)備教案、素材、案例、教材、計(jì)算機(jī)機(jī)房實(shí)訓(xùn)要求1. 對(duì)照實(shí)習(xí)報(bào)告的要求，完成上機(jī)任務(wù)；2. 任務(wù)完成后及時(shí)要求教師考評(píng)；3. 完善實(shí)習(xí)報(bào)告，填寫實(shí)訓(xùn)總結(jié)；遵守實(shí)訓(xùn)紀(jì)律，不游戲，不睡覺，不高聲談?wù)摗?shí)訓(xùn)過程內(nèi)容操作要求及步驟任務(wù)一新建網(wǎng)頁11、 雙擊打開軟件

16、新建HTML網(wǎng)頁網(wǎng)頁名字為nes01輸入以下文字然后保存2、文字要求：標(biāo)題 宋體 二號(hào) 藍(lán)色 正文：五號(hào) 宋體 加粗任務(wù)二新建網(wǎng)頁2制作如下網(wǎng)頁 素材見文件夾 網(wǎng)頁命名文字為index 保存在文件夾中上交給老師操作步驟：新建HTML網(wǎng)頁輸入文字將標(biāo)題設(shè)置為36號(hào)，藍(lán)色，宋體插入兩根紅色的水平線插入時(shí)間插入商標(biāo)插入背景圖片保存完善報(bào)告填寫實(shí)訓(xùn)總結(jié)，并上交實(shí)習(xí)報(bào)告。自主練習(xí)剩余時(shí)間，可進(jìn)行自主練習(xí)，內(nèi)容不限，但不可違反上機(jī)紀(jì)律實(shí)訓(xùn)總結(jié)本次課是學(xué)生第一次上機(jī)，制作一個(gè)較簡(jiǎn)單的網(wǎng)頁，學(xué)生存在對(duì)DW界面不熟，操作不熟練等缺點(diǎn)，需加強(qiáng)操作課題2.1編輯和添加文本教學(xué)課時(shí)2課時(shí)教學(xué)目標(biāo)知識(shí)目標(biāo)1、 掌握輸入

17、和編輯文本2、學(xué)會(huì)插入文本，掌握設(shè)置文本格式的方法能力目標(biāo)掌握網(wǎng)頁中三種常見列表的創(chuàng)建，及其各自的特點(diǎn)情感目標(biāo)提高學(xué)生自主學(xué)習(xí)和團(tuán)隊(duì)競(jìng)爭(zhēng)意識(shí)教學(xué)重點(diǎn)插入和編輯文本教學(xué)難點(diǎn)創(chuàng)建列表教學(xué)資源1.教學(xué)場(chǎng)所：多媒體教室2.教學(xué)設(shè)備：安裝有Dreamweaver cs5軟件的計(jì)算機(jī)3.教學(xué)資料：輔助課件.多媒體教學(xué)軟件教法講解法、任務(wù)驅(qū)動(dòng)教學(xué)法學(xué)法小組討論法教學(xué)過程過程安排教學(xué)內(nèi)容教師活動(dòng) 學(xué)生活動(dòng)設(shè)計(jì)意圖導(dǎo)入新課（5min）提問：在DW中輸入文本和在Word中輸入文本有何區(qū)別？將學(xué)生分組，并提出問題，引導(dǎo)學(xué)生小組之間討論并總結(jié)討論并思考以討論的形式提高學(xué)生之間的交流溝通任務(wù)一插入文本(20min)一、

18、插入文本1、 插入普通文本2、 插入不換行空格3、 插入水平線4、 插入日期和特殊字符二、編輯文本1、基本樣式設(shè)置2、設(shè)置段落格式3、創(chuàng)建列表演示并強(qiáng)調(diào)重點(diǎn)認(rèn)真聽講并記下重點(diǎn)文本插入是基礎(chǔ)知識(shí)，為下面任務(wù)二打下基礎(chǔ)任務(wù)二(55min)完成以下網(wǎng)頁實(shí)例：1、 引導(dǎo)學(xué)生討論該網(wǎng)頁由哪幾部分組成2、 引導(dǎo)學(xué)生小組組內(nèi)分工，完成小模塊小組討論本實(shí)例即是對(duì)任務(wù)一的鞏固，也為下一次課打下基礎(chǔ)作業(yè)布置（5min）1、 找一篇文章輸入至頁面中，然后利用所學(xué)知識(shí)，對(duì)其進(jìn)行格式編排課堂小結(jié)（5min）一、 插入文本二、 編輯文本板書一、插入文本5、 插入普通文本6、 插入不換行空格7、 插入水平線8、 插入日期和

19、特殊字符二、編輯文本1、基本樣式設(shè)置2、設(shè)置段落格式3、創(chuàng)建列表三、實(shí)例操作教學(xué)反思本次課是 一個(gè)基礎(chǔ)知識(shí)內(nèi)容，文本是一個(gè)網(wǎng)頁必不可少的內(nèi)容，對(duì)網(wǎng)頁設(shè)計(jì)至關(guān)重要，學(xué)生必須牢牢掌握文本的各個(gè)要點(diǎn)。目前來說學(xué)習(xí)興趣較好。實(shí)訓(xùn)課題網(wǎng)站素材處理實(shí)訓(xùn)課時(shí)2課時(shí)實(shí)訓(xùn)目標(biāo)1、 掌握創(chuàng)建本地站點(diǎn)和遠(yuǎn)程站點(diǎn)2、 學(xué)會(huì)修改站點(diǎn)和多站點(diǎn)的管理實(shí)訓(xùn)重點(diǎn)站點(diǎn)的管理實(shí)訓(xùn)難點(diǎn)站點(diǎn)的管理實(shí)訓(xùn)方法上機(jī)實(shí)訓(xùn)實(shí)訓(xùn)準(zhǔn)備教案、素材、案例、教材、計(jì)算機(jī)機(jī)房實(shí)訓(xùn)要求1、 對(duì)照實(shí)習(xí)報(bào)告的要求，完成上機(jī)任務(wù)；2、 任務(wù)完成后及時(shí)要求教師考評(píng)；3、 完善實(shí)習(xí)報(bào)告，填寫實(shí)訓(xùn)總結(jié)；4、遵守實(shí)訓(xùn)紀(jì)律，不游戲，不睡覺，不高聲談?wù)?。?shí)訓(xùn)過程內(nèi)容操作要求及

20、步驟任務(wù)一創(chuàng)建站點(diǎn)1、熟悉DW界面2、在D盤根目錄創(chuàng)建一個(gè)站點(diǎn)名稱為我的足球網(wǎng)，本地站點(diǎn)文件夾為jcwww，如下圖所示任務(wù)二設(shè)置默認(rèn)圖像文件夾利用教師所給素材，制作簡(jiǎn)單網(wǎng)頁我的偶像，素材見文件夾完善報(bào)告填寫實(shí)訓(xùn)總結(jié)，并上交實(shí)習(xí)報(bào)告。自主練習(xí)剩余時(shí)間，可進(jìn)行自主練習(xí)，內(nèi)容不限，但不可違反上機(jī)紀(jì)律實(shí)訓(xùn)總結(jié)本次上機(jī)主要是讓學(xué)生掌握站點(diǎn)的建立及輸入文本和編輯文本等，學(xué)生操作較好，大部分能完成任務(wù)。實(shí)訓(xùn)課題制作簡(jiǎn)單網(wǎng)頁實(shí)訓(xùn)課時(shí)2課時(shí)實(shí)訓(xùn)目標(biāo)1、 掌握新建網(wǎng)頁、編輯文字、處理圖像2、 新建站點(diǎn)3、 插入水平線、空格、自動(dòng)更新時(shí)間實(shí)訓(xùn)重點(diǎn)制作簡(jiǎn)單網(wǎng)頁流程實(shí)訓(xùn)難點(diǎn)綜合運(yùn)用HTML工具實(shí)訓(xùn)方法上機(jī)實(shí)訓(xùn)實(shí)訓(xùn)準(zhǔn)備教

21、案、素材、案例、教材、計(jì)算機(jī)機(jī)房實(shí)訓(xùn)要求4、 對(duì)照實(shí)習(xí)報(bào)告的要求，完成上機(jī)任務(wù)；5、 任務(wù)完成后及時(shí)要求教師考評(píng)；6、 完善實(shí)習(xí)報(bào)告，填寫實(shí)訓(xùn)總結(jié)；4、遵守實(shí)訓(xùn)紀(jì)律，不游戲，不睡覺，不高聲談?wù)摗?shí)訓(xùn)過程內(nèi)容操作要求及步驟任務(wù)一足球偶像網(wǎng)頁1、 熟悉DW菜單欄常用界面2、 完成以下簡(jiǎn)單網(wǎng)站，素材見素材庫完善報(bào)告填寫實(shí)訓(xùn)總結(jié)，并上交實(shí)習(xí)報(bào)告。自主練習(xí)剩余時(shí)間，可進(jìn)行自主練習(xí)，內(nèi)容不限，但不可違反上機(jī)紀(jì)律實(shí)訓(xùn)總結(jié)本次上機(jī)內(nèi)容較多，主要考察學(xué)生綜合性的練習(xí)，如圖片的插入，文字的編輯及水平線的插入等，需要學(xué)生對(duì)前面的知識(shí)非常熟悉，13高12班整體班級(jí)學(xué)習(xí)氛圍較好，所有學(xué)生都能按時(shí)上交作業(yè)，值得表揚(yáng)課題2

22、.2添加和編輯圖像教學(xué)課時(shí)2課時(shí)教學(xué)目標(biāo)知識(shí)目標(biāo)1、 掌握?qǐng)D像裁剪、重新取樣、亮度、銳化的設(shè)置2、掌握?qǐng)D像屬性設(shè)置能力目標(biāo)掌握運(yùn)用軟件對(duì)圖像處理的能力情感目標(biāo)提高學(xué)生團(tuán)結(jié)合作精神，提高學(xué)生競(jìng)爭(zhēng)意識(shí)教學(xué)重點(diǎn)圖像的編輯教學(xué)難點(diǎn)圖像的編輯教學(xué)資源1.教學(xué)場(chǎng)所：多媒體教室2.教學(xué)設(shè)備：安裝有Dreamweaver cs5軟件的計(jì)算機(jī)3.教學(xué)資料：輔助課件.多媒體教學(xué)軟件教法講解法、任務(wù)驅(qū)動(dòng)教學(xué)法學(xué)法小組討論法教學(xué)過程過程安排教學(xué)內(nèi)容教師活動(dòng) 學(xué)生活動(dòng)設(shè)計(jì)意圖導(dǎo)入新課(5min)前面介紹網(wǎng)頁的時(shí)候有說過，在保證畫質(zhì)的情況下，圖片的數(shù)據(jù)量越小越好。問題：如果一張圖片數(shù)據(jù)量很大，我們?cè)撊绾尉庉嫞垦菔綾luo

23、.jpeg這張圖片，分析數(shù)據(jù)量為93k、畫質(zhì)為1024*768規(guī)格的圖片如何更改數(shù)據(jù)量和規(guī)格？分組討論用什么方法來更改數(shù)據(jù)量和規(guī)格提出問題引發(fā)學(xué)生思考，引出這次課的主題任務(wù)一編輯圖片(30min)給出cluo.jpeg和gg.jpeg兩張圖片進(jìn)行對(duì)比，提出任務(wù)：如何從cluo.jpeg變化到gg.jpeg？具體操作步驟：打開DW軟件插入圖像cluo.jpeg，對(duì)圖片屬性設(shè)置如下目標(biāo)值：編輯完成后與原圖像進(jìn)行對(duì)比，會(huì)發(fā)現(xiàn)數(shù)據(jù)量、規(guī)格都發(fā)生變化，但瀏覽網(wǎng)頁更友好對(duì)圖片寬、高、裁切、重新采樣、銳化等設(shè)置進(jìn)行演示觀看教師演示，并思考cluo.jpeg變成cluo.jpeg的方法引導(dǎo)學(xué)生學(xué)習(xí)理論的時(shí)候思

24、考如何理論運(yùn)用到實(shí)踐任務(wù)二制作翻轉(zhuǎn)圖像(50min)概念：在網(wǎng)頁瀏覽中，有時(shí)當(dāng)鼠標(biāo)移到某個(gè)圖像上或者單擊時(shí)，圖像會(huì)變成另外一副圖像。瀏覽時(shí)效果：鼠標(biāo)放上去時(shí)效果：1、 鼓勵(lì)學(xué)生小組討論如何完成翻轉(zhuǎn)圖像效果；2、 給學(xué)生展示翻轉(zhuǎn)圖像做出來的效果，然后講解如何才能完成這個(gè)效果小組討論如何完成該效果并進(jìn)行嘗試課堂小結(jié)(5min)一、 如何編輯圖像二、 制作翻轉(zhuǎn)圖像效果板書設(shè)計(jì)一、編輯圖像1、 重新采樣2、 裁剪、銳化二、翻轉(zhuǎn)圖像制作效果教學(xué)反思本次教學(xué)學(xué)生較感興趣，特別是鼠標(biāo)經(jīng)過的圖像，學(xué)生完成得較好，值得鼓勵(lì) 課題2.3創(chuàng)建超級(jí)鏈接教學(xué)課時(shí)2課時(shí)教學(xué)目標(biāo)知識(shí)目標(biāo)1、 掌握創(chuàng)建超鏈接的方法2、 掌握

25、相對(duì)鏈接和絕對(duì)鏈接的區(qū)別3、 創(chuàng)建錨點(diǎn)鏈接能力目標(biāo)提高學(xué)生學(xué)習(xí)創(chuàng)作能力情感目標(biāo)提高學(xué)生團(tuán)結(jié)合作精神，提高學(xué)生競(jìng)爭(zhēng)意識(shí)教學(xué)重點(diǎn)1、 正確認(rèn)識(shí)路徑2、 理解相對(duì)鏈接和絕對(duì)鏈接的區(qū)別教學(xué)難點(diǎn)添加超鏈接、相對(duì)路徑、絕對(duì)路徑教學(xué)資源1.教學(xué)場(chǎng)所：多媒體教室2.教學(xué)設(shè)備：安裝有Dreamweaver cs5軟件的計(jì)算機(jī)3.教學(xué)資料：輔助課件.多媒體教學(xué)軟件教法講解法、任務(wù)驅(qū)動(dòng)教學(xué)法學(xué)法小組討論法教學(xué)過程過程安排教學(xué)內(nèi)容教師活動(dòng) 學(xué)生活動(dòng)設(shè)計(jì)意圖導(dǎo)入新課(5min)每次瀏覽網(wǎng)頁的時(shí)候點(diǎn)擊某個(gè)文字或者圖片，能自動(dòng)跳轉(zhuǎn)到另一個(gè)頁面，提問：這樣的鏈接形式叫什么？如何實(shí)現(xiàn)？進(jìn)入新浪網(wǎng)給學(xué)生演示超級(jí)鏈接的效果并進(jìn)行提

26、問觀看效果并討論如何才能實(shí)現(xiàn)該效果以提問且學(xué)生較熟悉的瀏覽網(wǎng)頁的方式吸引學(xué)生的注意任務(wù)一創(chuàng)建超級(jí)鏈接（20min）一、新建站點(diǎn)jcww，并在站點(diǎn)內(nèi)新建默認(rèn)圖像文件夾images，將網(wǎng)頁Index.HTML里的“我與足球”鏈接到news.HTML，目標(biāo)為-blank；“足球新聞”鏈接到“逢入京使.HTML”，目標(biāo)為-new；“足球明星”鏈接到“我與足球網(wǎng).HTML”，目標(biāo)為-self。二、對(duì)比每個(gè)目標(biāo)不同，網(wǎng)頁新建窗口不同并進(jìn)行總結(jié)給學(xué)生演示如何插入鏈接；演示不同目標(biāo)新建窗口的區(qū)別觀看教師演示，并思考-new、-blank、-self幾個(gè)目標(biāo)值窗口的區(qū)別讓學(xué)生熟悉DW添加超級(jí)鏈接的界面任務(wù)二相對(duì)

27、鏈接和絕對(duì)鏈接(20min)任務(wù)三錨點(diǎn)鏈接(35min)區(qū)別：相對(duì)鏈接是指鏈接的地址是本站點(diǎn)之內(nèi)的對(duì)象；絕對(duì)鏈接是指鏈接的地址是遠(yuǎn)程對(duì)象，用域名或IP作為地址一、概念：在本頁進(jìn)行鏈接的叫做錨點(diǎn)，一般在長(zhǎng)篇的文章或技術(shù)文檔中是使用，鏈接到某個(gè)特殊的段落。二、打開第4章/4-3/jieshao.html網(wǎng)頁，演示錨點(diǎn)鏈接效果演示教材P60實(shí)例演示如何插入錨點(diǎn)鏈接思考并正確理解相對(duì)鏈接和絕對(duì)鏈接概念觀看教師演示并思考錨點(diǎn)鏈接的應(yīng)用正確理解相對(duì)鏈接和絕對(duì)鏈接，為下面的學(xué)習(xí)打下基礎(chǔ)錨點(diǎn)鏈接應(yīng)用比較廣泛，學(xué)生需要掌握并應(yīng)用課堂小結(jié)(5min)一、 頁面與頁面之間的超鏈接二、 相對(duì)鏈接和絕對(duì)鏈接三、 錨點(diǎn)鏈

28、接（本頁之間鏈接）作業(yè)布置(5min)一、 網(wǎng)上查找哪些頁面常用頁面與頁面鏈接，哪些是用錨點(diǎn)鏈接并總結(jié)二、 利用教材第4章/4-3/jieshao.html的素材，自己動(dòng)手創(chuàng)建錨點(diǎn)鏈接板書三、 創(chuàng)建超級(jí)鏈接的方法與步驟四、 相對(duì)鏈接和絕對(duì)鏈接五、 創(chuàng)建錨點(diǎn)鏈接教學(xué)反思本次課主要介紹超鏈接的常用方法，超鏈接在學(xué)生上網(wǎng)中隨處可見，較易理解，學(xué)生之間的討論也非常激烈，較好。實(shí)訓(xùn)課題圖像處理和創(chuàng)建超鏈接實(shí)訓(xùn)課時(shí)2課時(shí)實(shí)訓(xùn)目標(biāo)3、 學(xué)會(huì)利用DW處理圖像4、 掌握創(chuàng)建超級(jí)鏈接的方法5、 理解相對(duì)鏈接和絕對(duì)鏈接概念實(shí)訓(xùn)重點(diǎn)1、 圖片處理2、 超級(jí)鏈接實(shí)訓(xùn)難點(diǎn)超級(jí)鏈接的使用實(shí)訓(xùn)方法上機(jī)實(shí)訓(xùn)實(shí)訓(xùn)準(zhǔn)備教案、素材、

29、案例、教材、計(jì)算機(jī)機(jī)房實(shí)訓(xùn)要求7、 對(duì)照實(shí)習(xí)報(bào)告的要求，完成上機(jī)任務(wù)；8、 任務(wù)完成后及時(shí)要求教師考評(píng)；9、 完善實(shí)習(xí)報(bào)告，填寫實(shí)訓(xùn)總結(jié)；4、遵守實(shí)訓(xùn)紀(jì)律，不游戲，不睡覺，不高聲談?wù)?。?shí)訓(xùn)過程 操作要求及步驟任務(wù)一處理圖像1、 將圖片6.jpeg修改為尺寸為240*160，數(shù)據(jù)量設(shè)置為8K左右（6-11k都可以）并進(jìn)行裁剪和銳化等設(shè)置，熟悉圖片處理幾個(gè)設(shè)置，設(shè)置完成后以網(wǎng)頁的形式保存，保存在文件夾中，保存名稱為“xiugai.html”任務(wù)二超級(jí)鏈接2、 將教師發(fā)送的Index.HTML網(wǎng)頁進(jìn)行編輯，將“我與足球”四個(gè)字鏈接到“我與足球網(wǎng).html”，目標(biāo)為-self；將“足球新聞”四個(gè)字鏈接

30、到“逢入京使.html”， 目標(biāo)為-blank；將“足球明星”四個(gè)字鏈接到“news.html”， 目標(biāo)為-new。3、 修改頁面屬性：在頁面屬性對(duì)話框中，設(shè)置鏈接選項(xiàng)中的大小為16像素，鏈接顏色為“#6666cc”，變換圖像顏色為“#ff6600”，已訪問鏈接為“#663366”，活動(dòng)鏈接為“#99cc00”，下劃線樣式為“僅在變換圖像時(shí)顯示下劃線”。設(shè)置的對(duì)話框如下圖所示：完善報(bào)告填寫實(shí)訓(xùn)總結(jié)，并上交實(shí)習(xí)報(bào)告。自主練習(xí)剩余時(shí)間，可進(jìn)行自主練習(xí)，內(nèi)容不限，但不可違反上機(jī)紀(jì)律實(shí)訓(xùn)總結(jié)本次實(shí)習(xí)內(nèi)容較多，大部分學(xué)生能在規(guī)定時(shí)間內(nèi)完成任務(wù)，較好。實(shí)訓(xùn)課題跳轉(zhuǎn)菜單實(shí)訓(xùn)課時(shí)2課時(shí)實(shí)訓(xùn)目標(biāo)6、 掌握?qǐng)D像熱

31、點(diǎn)鏈接的使用7、 掌握腳本鏈接8、 掌握鏈接檢查器的使用實(shí)訓(xùn)重點(diǎn)路徑的正確使用實(shí)訓(xùn)難點(diǎn)鏈接的運(yùn)用及鏈接檢查器的使用實(shí)訓(xùn)方法上機(jī)實(shí)訓(xùn)實(shí)訓(xùn)準(zhǔn)備教案、素材、案例、教材、計(jì)算機(jī)機(jī)房實(shí)訓(xùn)要求10、 對(duì)照實(shí)習(xí)報(bào)告的要求，完成上機(jī)任務(wù)；11、 任務(wù)完成后及時(shí)要求教師考評(píng)；12、 完善實(shí)習(xí)報(bào)告，填寫實(shí)訓(xùn)總結(jié)；4、遵守實(shí)訓(xùn)紀(jì)律，不游戲，不睡覺，不高聲談?wù)摗?shí)訓(xùn)過程 操作要求及步驟任務(wù)一創(chuàng)建圖像熱點(diǎn)鏈接在地圖中創(chuàng)建熱點(diǎn)鏈接任務(wù)二制作跳轉(zhuǎn)菜單打開news.HTML網(wǎng)頁，在如下圖所示的位置插入圖片，圖片為“鼠標(biāo)經(jīng)過的圖片”，鏈接到本頁的“冠軍杯新聞”處（提示：利用錨點(diǎn)鏈接）打開“jieshao.html”網(wǎng)頁，在下載

32、資源文本中將教師提供的“qq.rar”放入站點(diǎn)，做成的效果是點(diǎn)擊“下載資源”就能下載“qq.rar”，同理在“聯(lián)系我們”中設(shè)置郵件下載完善報(bào)告填寫實(shí)訓(xùn)總結(jié)，并上交實(shí)習(xí)報(bào)告。自主練習(xí)剩余時(shí)間，可進(jìn)行自主練習(xí)，內(nèi)容不限，但不可違反上機(jī)紀(jì)律實(shí)訓(xùn)總結(jié)本次實(shí)習(xí)內(nèi)容較多，大部分學(xué)生能在規(guī)定時(shí)間內(nèi)完成任務(wù)，較好。課題2.4使用表格布局頁面教學(xué)課時(shí)2課時(shí)教學(xué)目標(biāo)知識(shí)目標(biāo)1、了解表格在網(wǎng)頁設(shè)計(jì)中的作用。2、掌握網(wǎng)頁中表格的制作方法、表格屬性的設(shè)置方法以及單元格屬性的設(shè)置方法，能夠在單元格中正確插入文字和圖片。3、能夠根據(jù)網(wǎng)頁設(shè)計(jì)內(nèi)容，正確布局表格的結(jié)構(gòu)，掌握表格嵌套的設(shè)計(jì)方法。能力目標(biāo)1、利用對(duì)比學(xué)習(xí)，培養(yǎng)學(xué)生

33、知識(shí)遷移的能力。2、通過用表格結(jié)構(gòu)設(shè)計(jì)網(wǎng)頁，使學(xué)生進(jìn)一步理解表格的作用、功能及網(wǎng)頁設(shè)計(jì)方法的多樣性，培養(yǎng)學(xué)生的發(fā)散思維能力情感目標(biāo)通過自主探究，使學(xué)生掌握軟件的使用規(guī)則，培養(yǎng)學(xué)生自主學(xué)習(xí)的能力。教學(xué)重點(diǎn)1、了解表格在網(wǎng)頁設(shè)計(jì)中的重要作用。2、掌握插入、編輯表格的方法及表格的屬性設(shè)置。3、掌握單元格屬性的設(shè)置。教學(xué)難點(diǎn)表格的嵌套在網(wǎng)頁設(shè)計(jì)中的應(yīng)用教學(xué)資源1.教學(xué)場(chǎng)所：多媒體教室2.教學(xué)設(shè)備：安裝有Dreamweaver cs5軟件的計(jì)算機(jī)3.教學(xué)資料：輔助課件.多媒體教學(xué)軟件教法講解法、任務(wù)驅(qū)動(dòng)教學(xué)法學(xué)法小組討論法教學(xué)過程過程安排教學(xué)內(nèi)容教師活動(dòng) 學(xué)生活動(dòng)設(shè)計(jì)意圖 導(dǎo)入新課(5min)（1）展示

34、兩個(gè)頁面并進(jìn)行比較：一個(gè)使用表格布局，表格邊框隱藏，其頁面工整，文本、圖片擺放對(duì)稱，具有一定的規(guī)律；另一個(gè)頁面凌亂，圖文混雜，擺放雜亂。問題1：你喜歡那個(gè)頁面的布局？問題2：用什么方法可以達(dá)到第二個(gè)頁面的效果？ 展示并引導(dǎo)學(xué)生思考學(xué)生仔細(xì)觀察并比較兩個(gè)網(wǎng)頁，討論、交流，回顧Word中學(xué)習(xí)過的表格，領(lǐng)悟表格在Dreamweaver中的作用。通過對(duì)比學(xué)習(xí)，培養(yǎng)學(xué)生知識(shí)遷移的能力。任務(wù)一網(wǎng)頁框架(25min)一、仿照網(wǎng)頁3的樣式，制作一個(gè)網(wǎng)頁框架。在學(xué)生自主探究的基礎(chǔ)上，教師總結(jié)插入表格的一般方法。并插入一個(gè)2行1列，表格寬度800像素，邊框粗細(xì)0像素的表格。演示如何插入表格并對(duì)表格的設(shè)置分析網(wǎng)頁3

35、，找出其中使用的表格，仿照插入圖像的方法，探索插入表格的方法。插入表格，通過實(shí)際操作強(qiáng)化對(duì)表格屬性的認(rèn)識(shí)。引導(dǎo)學(xué)生學(xué)習(xí)理論的時(shí)候思考如何理論運(yùn)用到實(shí)踐動(dòng)手分析和進(jìn)行創(chuàng)意設(shè)計(jì)，培養(yǎng)學(xué)生的模仿以及創(chuàng)新能力任務(wù)二表格合并和拆分(20min)二、在任務(wù)一的基礎(chǔ)上，探索表格基本屬性：合并與拆分單元格；單元格的寬度與高度；用實(shí)例來演示如何合并和拆分單元格根據(jù)需要，插入圖片，在第二行拆分為兩列，左邊放文字，右邊放圖通過實(shí)例，培養(yǎng)學(xué)生分析問題、解決問題的能力。任務(wù)三表格嵌套(30min)表格的嵌套。在大表中插入一個(gè)小的表格，這是創(chuàng)建復(fù)雜表格樣式的有效方法。要提示學(xué)生不要嵌套過多。展示幾種常見的圖文混排樣式，讓

36、學(xué)生選擇自己喜歡的一種完成網(wǎng)頁。完善網(wǎng)頁，制作完成的同學(xué)把網(wǎng)頁通過FTP上傳。讓學(xué)生自主發(fā)揮，充分展示個(gè)性風(fēng)采課堂小結(jié)(5min)一、 網(wǎng)頁框架和表格基本操作二、 表格的合并和拆分三、 表格嵌套課堂作業(yè)(5min)完成教材第五章/Index.html的表格教學(xué)反思通過表格的嵌套及分析，對(duì)頁面進(jìn)行布局。需要加強(qiáng)學(xué)生對(duì)表格合并和拆分的運(yùn)用 實(shí)訓(xùn)課題表格布局實(shí)例分析實(shí)訓(xùn)課時(shí)2課時(shí)實(shí)訓(xùn)目標(biāo)1、 能運(yùn)用表格為頁面布局2、 能掌握表格的嵌套操作3、 能做出“超越公司簡(jiǎn)介”頁面。實(shí)訓(xùn)重點(diǎn)1、掌握插入、編輯表格的方法及表格的屬性設(shè)置。2、掌握單元格屬性的設(shè)置。實(shí)訓(xùn)難點(diǎn)表格的嵌套在網(wǎng)頁設(shè)計(jì)中的應(yīng)用實(shí)訓(xùn)方法上機(jī)實(shí)

37、訓(xùn)實(shí)訓(xùn)準(zhǔn)備教案、素材、案例、教材、計(jì)算機(jī)機(jī)房實(shí)訓(xùn)要求13、 對(duì)照實(shí)習(xí)報(bào)告的要求，完成上機(jī)任務(wù)；14、 任務(wù)完成后及時(shí)要求教師考評(píng)；15、 完善實(shí)習(xí)報(bào)告，填寫實(shí)訓(xùn)總結(jié)；4、遵守實(shí)訓(xùn)紀(jì)律，不游戲，不睡覺，不高聲談?wù)摗?shí)訓(xùn)過程 操作要求及步驟任務(wù)一創(chuàng)建圖像熱點(diǎn)鏈接制作如下圖所示的界面：操作要求：1、 top區(qū)（1）一行三列：788px=128+540+120 Logo+Banner+主頁常用選項(xiàng)（2）第三列嵌套三行兩列表格：120px=30+90小圖標(biāo)+文本選項(xiàng)2、menu區(qū)（1）一行兩列：788px=148+640 顯示當(dāng)前日期+導(dǎo)航條（2）第二列嵌套1行17列表格：奇數(shù)列單元格輸入欄目文本，寬6

38、5px；偶數(shù)列單元格輸入“|”，寬為6px。3、main區(qū)（1）2行3列：788px寬，500px高 788=150+10+628 500=5+495（2）A、maintop區(qū) 合并單元格（3）B、mainleft區(qū)嵌套13行1列表格：145px寬，2px間距 第1行與第7行：高25px第2-6行：高36px，輸入文本 第8-13行：高40px，插入圖片（3）C、mainmiddle區(qū) 空單元格（4）D、mainright區(qū)嵌套3行1列表格：495px高 495=30+375+90第一行：輸入文本第二行：嵌套1行2列表格(628px=304+324）第一列：輸入文本第二列：嵌套2行1列表格30

39、0px寬，右對(duì)齊375px高=220+160 第1行：插入圖片 第2行：嵌套3行5列表格 高160=30+65+65 寬300=80+30+80+30+80第三行：鼠標(biāo)經(jīng)過圖像4、bottom區(qū)3行1列：788px寬，45px高第一行：水平線第二行：版權(quán)信息第三行：聯(lián)系方式完善報(bào)告填寫實(shí)訓(xùn)總結(jié)，并上交實(shí)習(xí)報(bào)告。自主練習(xí)剩余時(shí)間，可進(jìn)行自主練習(xí)，內(nèi)容不限，但不可違反上機(jī)紀(jì)律實(shí)訓(xùn)總結(jié)表格布局是最常見的一種布局方式，本次實(shí)訓(xùn)學(xué)生較積極，特別是13高12班同學(xué)學(xué)習(xí)氛圍特別好。課題2.5使用框架布局頁面教學(xué)課時(shí)2課時(shí)教學(xué)目標(biāo)知識(shí)目標(biāo)1、能掌握框架的基本操作。2、能理解框架技術(shù)的實(shí)質(zhì)。能力目標(biāo)能用框架布局

40、頁面情感目標(biāo)通過自主探究，使學(xué)生掌握軟件的使用規(guī)則，培養(yǎng)學(xué)生自主學(xué)習(xí)的能力。教學(xué)重點(diǎn)框架的基本操作教學(xué)難點(diǎn)用框架為頁面布局教學(xué)資源1.教學(xué)場(chǎng)所：多媒體教室2.教學(xué)設(shè)備：安裝有Dreamweaver cs5軟件的計(jì)算機(jī)3.教學(xué)資料：輔助課件.多媒體教學(xué)軟件教法講解法、任務(wù)驅(qū)動(dòng)教學(xué)法學(xué)法小組討論法教學(xué)過程過程安排教學(xué)內(nèi)容教師活動(dòng) 學(xué)生活動(dòng)設(shè)計(jì)意圖 導(dǎo)入新課(5min)在學(xué)習(xí)過表格布局后，我們可以做一些常規(guī)的頁面布局了，但有些特殊效果我們卻無法實(shí)現(xiàn)。如圖所示的網(wǎng)頁：今天我們來學(xué)習(xí)另一種頁面布局技術(shù)框架。展示框架頁面給學(xué)生，引發(fā)學(xué)生思考預(yù)習(xí) 并思考框架頁面布局通過實(shí)例來展示，引發(fā)學(xué)生思考特殊效果如何實(shí)

41、現(xiàn)，培養(yǎng)學(xué)生積極思考問題的能力任務(wù)一基本知識(shí)(35min)一、基本概念：框架是一種網(wǎng)頁布局技術(shù)。二、創(chuàng)建框架與框架集1、手動(dòng)設(shè)計(jì)2、插入預(yù)定義框架三、創(chuàng)建嵌套框架四、選擇框架和框架集1、在編輯區(qū)中選擇2、在框架面板中選擇五、刪除框架六、保存框架與框架集文件加強(qiáng)學(xué)生對(duì)框架布局的理解并進(jìn)行簡(jiǎn)單操作認(rèn)真聽講并對(duì)概念進(jìn)行消化理解學(xué)生只有在牢固的掌握了基本概念后才能為任務(wù)二的學(xué)習(xí)打下基礎(chǔ)任務(wù)二實(shí)例操作(40min)完成如下圖所示的頁面：要求如下：（1） topFrame：高：100px表格：2x2，寬-788px，高-100px高：100=75+25寬：788=128+660（2） 第一行：Logo+B

42、anner第二行：當(dāng)前頁位置信息+導(dǎo)航欄導(dǎo)航欄：1x7表格寬：660px高：25px字號(hào)：9pt行高：14pt（3） mainFrame：表格：2x2寬：788Px，高：400Px邊框：5px，間距：5px表格：3x1寬：788px，高：45px邊框：0px，間距：0px將學(xué)生分7組，并引導(dǎo)學(xué)生分組討論如何完成如圖所示的效果討論如何才能實(shí)現(xiàn)如圖所示的效果并總結(jié)通過實(shí)例，培養(yǎng)學(xué)生分析問題、解決問題的能力。課堂小結(jié)(5min)四、 框架基本概念二、創(chuàng)建框架與框架集三、創(chuàng)建嵌套框架四、選擇框架和框架集五、刪除框架六、保存框架與框架集文件課后作業(yè)(5min)設(shè)計(jì)一系列框架型頁面，然后將之實(shí)現(xiàn)。要求結(jié)合

43、超鏈接的相關(guān)知識(shí)。教學(xué)反思本次主要講述框架和框架集布局頁面，運(yùn)用實(shí)例學(xué)生加深了對(duì)框架的理解，運(yùn)用起來得心應(yīng)手。14高31班學(xué)生學(xué)習(xí)氛圍待加強(qiáng) 實(shí)訓(xùn)課題框架布局實(shí)例分析實(shí)訓(xùn)課時(shí)2課時(shí)實(shí)訓(xùn)目標(biāo)4、 能掌握布局表格和布局單元格的基本操作。5、 能在布局模式下對(duì)頁面進(jìn)行整體布局。實(shí)訓(xùn)重點(diǎn)掌握布局表格和布局單元格的基本操作。實(shí)訓(xùn)難點(diǎn)項(xiàng)目的實(shí)現(xiàn)實(shí)訓(xùn)方法上機(jī)實(shí)訓(xùn)實(shí)訓(xùn)準(zhǔn)備教案、素材、案例、教材、計(jì)算機(jī)機(jī)房實(shí)訓(xùn)要求16、 對(duì)照實(shí)習(xí)報(bào)告的要求，完成上機(jī)任務(wù)；17、 任務(wù)完成后及時(shí)要求教師考評(píng)；18、 完善實(shí)習(xí)報(bào)告，填寫實(shí)訓(xùn)總結(jié)；4、遵守實(shí)訓(xùn)紀(jì)律，不游戲，不睡覺，不高聲談?wù)?。?shí)訓(xùn)過程 操作要求及步驟任務(wù)一利用框架排

44、版步驟1 選擇文件菜單欄中的新建命令，創(chuàng)建一個(gè)新的頁面，并將其命名為“個(gè)人主頁”。 步驟2 選擇插入工具欄中布局任務(wù)欄中的框架命令，單擊按鈕，選擇下拉菜單的“頂部和嵌套的左側(cè)框架”命令。步驟3 彈出框架標(biāo)簽輔助功能屬性對(duì)話框，將網(wǎng)頁中框架的各個(gè)部分進(jìn)行命名。步驟4 選擇窗口菜單欄中框架命令。步驟5 右側(cè)的面板中就加入了框架面板，選中“topFrame”框架進(jìn)行編輯。 步驟6 頁面下方出現(xiàn)了“topFrame”框架的屬性面板。對(duì)“top Frame”框架進(jìn)行編輯。 步驟7 選中“mainFrame”框架進(jìn)行編輯，頁面下方出現(xiàn)了“mainFrame”框架的屬性面板，對(duì)“mainFrame”框架進(jìn)行

45、編輯。 步驟8 選中“l(fā)eftFrame”框架進(jìn)行編輯，頁面下方出現(xiàn)了“l(fā)eftFrame”框架的屬性面板，對(duì)“l(fā)eftFrame”框架進(jìn)行編輯。 步驟9 選擇文件菜單欄中的保存全部命令，對(duì)文件進(jìn)行保存。步驟10 彈出保存整體文件的對(duì)話框，為文件命名為“index.html”。步驟11 對(duì)各個(gè)框架部分進(jìn)行保存，為各個(gè)框架進(jìn)行命名。步驟12 單擊F12，在瀏覽器中預(yù)覽效果。 任務(wù)二創(chuàng)建框架集創(chuàng)建框架集，可以自己設(shè)計(jì)，也可以從預(yù)定義的框架集中選擇，還可以修改一個(gè)已存在的Dreamweaver文件來創(chuàng)建。實(shí)驗(yàn)內(nèi)容： 步驟1 選擇修改菜單欄中的框架集命令。步驟2 根據(jù)需要在其子菜單中選擇任意一個(gè)分割命

46、令。 步驟3 若要?jiǎng)h除一個(gè)子框架，將其邊框拖至頁面或其父框架之外即可。 完善報(bào)告填寫實(shí)訓(xùn)總結(jié)，并上交實(shí)習(xí)報(bào)告。自主練習(xí)剩余時(shí)間，可進(jìn)行自主練習(xí)，內(nèi)容不限，但不可違反上機(jī)紀(jì)律實(shí)訓(xùn)總結(jié)本次實(shí)訓(xùn)學(xué)生需要的掌握的內(nèi)容較多，對(duì)于框架布局的位置要準(zhǔn)確掌握，難度較大課題3.3添加動(dòng)畫教學(xué)課時(shí)2課時(shí)教學(xué)目標(biāo)知識(shí)目標(biāo)1、掌握在網(wǎng)頁中添加各種動(dòng)態(tài)元素2、掌握Flash屬性設(shè)置能力目標(biāo)1、學(xué)會(huì)區(qū)分源文件和影片文件格式2、掌握在網(wǎng)頁中插入各種Flash元素3、能為網(wǎng)頁添加音視頻元素。情感目標(biāo)通過自主探究，使學(xué)生掌握軟件的使用規(guī)則，培養(yǎng)學(xué)生自主學(xué)習(xí)的能力。教學(xué)重點(diǎn)添加flash的具體操作教學(xué)難點(diǎn)規(guī)劃一個(gè)多媒體網(wǎng)站導(dǎo)航條

47、教學(xué)資源1.教學(xué)場(chǎng)所：多媒體教室2.教學(xué)設(shè)備：安裝有Dreamweaver cs5軟件的計(jì)算機(jī)3.教學(xué)資料：輔助課件、多媒體教學(xué)軟件教法講解法、任務(wù)驅(qū)動(dòng)教學(xué)法學(xué)法小組討論法教學(xué)過程過程安排教學(xué)內(nèi)容教師活動(dòng) 學(xué)生活動(dòng)設(shè)計(jì)意圖 導(dǎo)入新課(5min)試想網(wǎng)頁中只有文字和圖片，那么網(wǎng)頁跟雜志報(bào)紙還有什么區(qū)別呢？動(dòng)態(tài)元素能夠更加豐富頁面的效果，是網(wǎng)頁是一大特色。注意：不要把動(dòng)態(tài)元素和動(dòng)態(tài)頁面劃上等號(hào)。將本次課的作品展示給學(xué)生，學(xué)生在欣賞精美網(wǎng)頁的同時(shí)思考如何完成該作品欣賞作品并思考通過作品來展示，引發(fā)學(xué)生思考如何實(shí)現(xiàn)，培養(yǎng)學(xué)生積極思考問題的能力任務(wù)一基本知識(shí)(35min)一、flash文件基本知識(shí)1、F

48、lash源文件：*.fla2、Flash影片文件：*.swf二、添加flash動(dòng)畫文件Flash動(dòng)畫是一種基于矢量格式的多媒體動(dòng)畫元件，它體積小，其擴(kuò)展名為.swf。Flash動(dòng)畫被廣泛應(yīng)用于網(wǎng)頁中。操作步驟：1.光標(biāo)定位2.插入flash文件3.保存、預(yù)覽三、添加flash按鈕Dreamweaver中內(nèi)置了一些flash按鈕，用戶可以很方便將他們添加到網(wǎng)頁中。注意：在頁面中添加flash按鈕和flash文本之前必須先保存網(wǎng)頁。操作步驟：1.光標(biāo)定位2.插入flash按鈕3.設(shè)置按鈕屬性4.保存、預(yù)覽四、添加flash文本插入媒體Flash文本五、為網(wǎng)頁添加音頻插入媒體插件教授新知識(shí)，為任務(wù)二的完成做準(zhǔn)備吸收動(dòng)畫新知識(shí)讓學(xué)生吸收新知識(shí)，為后面的實(shí)例操作打下基礎(chǔ)任務(wù)二拓展訓(xùn)練(40min)要求：制作如下圖所示網(wǎng)頁，插入三行一列表格，插入Flash動(dòng)畫要求動(dòng)畫大小寬高為400*300，第二行插入圖片，第三行輸入文字并排版，最后得到的結(jié)果如下圖所示：課堂小結(jié)(5min)一、 添加多媒體元素使頁面具有動(dòng)態(tài)效果二、 插入Flash按