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

湖南省商業(yè)技術(shù)學(xué)院

學(xué)期授課進(jìn)度計(jì)劃

（二年級(jí)第一學(xué)期）

課程名稱網(wǎng)頁(yè)制作與設(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í)超出缺少?gòu)浹a(bǔ)

教學(xué)截至

章節(jié)內(nèi)容

備注：用藍(lán)黑或碳素墨水鋼筆填寫

教學(xué)計(jì)劃

學(xué)本門課程《網(wǎng)頁(yè)設(shè)計(jì)與制作》的教學(xué)班級(jí)為14級(jí)計(jì)算機(jī)班，計(jì)算機(jī)班對(duì)網(wǎng)絡(luò)知識(shí)

情

有一定的了解，基礎(chǔ)知識(shí)較好，同時(shí)根據(jù)實(shí)際情況，特?cái)M定本計(jì)劃。

分

析

通過(guò)本學(xué)期《網(wǎng)頁(yè)設(shè)計(jì)與制作》的學(xué)習(xí)，主要要求同學(xué)們掌握網(wǎng)頁(yè)制作的一些

基本功能和操作，為以后的一些學(xué)習(xí)和工作打下較好的基礎(chǔ)。通過(guò)學(xué)習(xí)要求同學(xué)達(dá)

大到以下要求：

綱1、了解DreamweaverCS6的詳細(xì)功能及操作方法。

2、熟練掌握網(wǎng)頁(yè)制作技巧。

要3、掌握網(wǎng)頁(yè)規(guī)范以及網(wǎng)頁(yè)優(yōu)化和網(wǎng)站推廣的知識(shí)。

求4、明確網(wǎng)站建設(shè)的流程和站點(diǎn)建設(shè)成后需要做的優(yōu)化推廣工作。

教1、超級(jí)鏈接

學(xué)2、表格表單應(yīng)用

重3、框架使用

點(diǎn)4、CSS樣式

教1、超級(jí)鏈接

學(xué)2、用表格和框架布局頁(yè)面

難3、創(chuàng)建數(shù)據(jù)庫(kù)

點(diǎn)

講授法、演示法、項(xiàng)目教學(xué)法、合作學(xué)習(xí)、對(duì)話、任務(wù)驅(qū)動(dòng)法、頭腦風(fēng)暴、小組討

教論法等教學(xué)方法。

學(xué)

方

法

學(xué)期授課進(jìn)度計(jì)劃表

周次授課內(nèi)容課時(shí)備注

1、2周新生軍訓(xùn)

31.1網(wǎng)站基礎(chǔ)知識(shí)2

1.2網(wǎng)站建設(shè)概述2

實(shí)訓(xùn)新建一個(gè)網(wǎng)頁(yè)2上機(jī)

42.1添加和編輯文本2

實(shí)訓(xùn)網(wǎng)站素材處理2上機(jī)

實(shí)訓(xùn)制作簡(jiǎn)單網(wǎng)頁(yè)2上機(jī)

5

6

7國(guó)慶放假6機(jī)動(dòng)補(bǔ)周一課

82.2添加和編輯圖像6

2.3創(chuàng)建超級(jí)鏈接2

實(shí)訓(xùn)圖像處理和創(chuàng)建超級(jí)鏈接2上機(jī)

9實(shí)訓(xùn)跳轉(zhuǎn)菜單2上機(jī)

2.4使用表格布局頁(yè)面2

實(shí)訓(xùn)表格布局實(shí)例分析2上機(jī)

102.5使用框架布局頁(yè)面2

運(yùn)動(dòng)會(huì)充周三到周五

運(yùn)動(dòng)會(huì)

11實(shí)訓(xùn)框架布局實(shí)例分析2上機(jī)

3.3添加動(dòng)畫2

添加音頻和視頻2

12實(shí)訓(xùn)DIV與表格的轉(zhuǎn)換2上機(jī)

4.3晃動(dòng)的圖片2

實(shí)訓(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)美化頁(yè)面2上機(jī)

15實(shí)訓(xùn)應(yīng)用CSS到網(wǎng)頁(yè)中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布局頁(yè)面2

6.2認(rèn)識(shí)Spry2

17實(shí)訓(xùn)調(diào)整樣式2上機(jī)

6.3選擇服務(wù)器和使用虛擬機(jī)2

6.4申請(qǐng)域名2

18實(shí)訓(xùn)網(wǎng)站發(fā)布2上機(jī)

7.1個(gè)人主頁(yè)制作2

7.2策劃構(gòu)思及設(shè)計(jì)流程2

19實(shí)訓(xùn)頁(yè)面布局2上機(jī)

7.3制作頁(yè)面頭部2

7.4制作中間表格內(nèi)容2

20元旦放假2機(jī)動(dòng)

2充周一課

2

212

2

2

22復(fù)習(xí)考試6

教研組

意見(jiàn)

課題1.1網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)教學(xué)課時(shí)2課時(shí)

知識(shí)目標(biāo)能了解網(wǎng)頁(yè)制作軟件的特點(diǎn)

教學(xué)目標(biāo)能力目標(biāo)能掌握網(wǎng)頁(yè)制作的基本概念

情感目標(biāo)提高學(xué)生團(tuán)結(jié)合作精神，提高學(xué)生競(jìng)爭(zhēng)意識(shí)

教學(xué)重點(diǎn)網(wǎng)頁(yè)的組成

教學(xué)難點(diǎn)網(wǎng)頁(yè)的分類，網(wǎng)址與域名的區(qū)分

1.教學(xué)場(chǎng)所：多媒體教室

教學(xué)資源2.教學(xué)設(shè)備：安裝有Dreamweavercs5軟件的計(jì)算機(jī)

3.教學(xué)資料：輔助課件.多媒體教學(xué)軟件

教法講解法、任務(wù)驅(qū)動(dòng)教學(xué)法學(xué)法小組討論法

教學(xué)過(guò)程課前準(zhǔn)備導(dǎo)入新課講授新課動(dòng)手實(shí)踐課堂小結(jié)作業(yè)布置

時(shí)間分配510501555

教學(xué)過(guò)程

過(guò)程安排教學(xué)內(nèi)容教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖

1、教師自我介紹；1自.我介紹1.班長(zhǎng)統(tǒng)計(jì)座次使師生盡快互

2、點(diǎn)名；2按.照花名冊(cè)點(diǎn)名表相認(rèn)識(shí)，并促

課前準(zhǔn)備3、課程介紹3課.程介紹2學(xué).生自我介紹使學(xué)生答題了

4、課堂要求4統(tǒng).計(jì)學(xué)情3反.應(yīng)學(xué)情解我們的課

5提.出期望與要求4推.薦課代表。程。

本次課是本學(xué)期第一次上課，簡(jiǎn)單以提問(wèn)的方式了解學(xué)生之間相互討提問(wèn)跟就業(yè)和

介紹本課程：學(xué)生對(duì)網(wǎng)頁(yè)設(shè)計(jì)的論，加深對(duì)網(wǎng)頁(yè)薪資有關(guān)的問(wèn)

導(dǎo)入新課1、網(wǎng)頁(yè)設(shè)計(jì)相關(guān)級(jí)別及其薪資待遇認(rèn)知設(shè)計(jì)的認(rèn)識(shí)題，抓住學(xué)生

2、網(wǎng)頁(yè)設(shè)計(jì)的就業(yè)方向及其公司類注意力。

型

一、網(wǎng)頁(yè)設(shè)計(jì)介紹簡(jiǎn)單介紹網(wǎng)頁(yè)知識(shí)吸收新知識(shí)并思講述基礎(chǔ)知

提問(wèn)：網(wǎng)頁(yè)設(shè)計(jì)要考生活中常見(jiàn)網(wǎng)識(shí)，為后面學(xué)

1、網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信點(diǎn)并將學(xué)生分組進(jìn)頁(yè)設(shè)計(jì)知識(shí)習(xí)打下基礎(chǔ)

息（包括產(chǎn)品和服務(wù)）的一種方式，行討論分組討論，并派加強(qiáng)學(xué)生之間

講述網(wǎng)站設(shè)計(jì)級(jí)出代表來(lái)總結(jié)交流溝通能

是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和別，引導(dǎo)學(xué)生對(duì)這思考自己的定位力，加深學(xué)生

信息平臺(tái)，離開網(wǎng)站去談電子商務(wù)個(gè)行業(yè)向往，并鼓了解本行業(yè)的現(xiàn)對(duì)網(wǎng)頁(yè)設(shè)計(jì)要

勵(lì)學(xué)生向大師階段狀點(diǎn)理解

任務(wù)一是不可能的。努力認(rèn)識(shí)軟件基本組引導(dǎo)學(xué)生了解

講授新課2、企業(yè)的網(wǎng)站被稱為“網(wǎng)絡(luò)商標(biāo)”，簡(jiǎn)單介紹學(xué)生將來(lái)成這個(gè)行業(yè)

從事本行業(yè)的范圍做筆記，識(shí)記教引導(dǎo)學(xué)生了解

也是企業(yè)無(wú)形資產(chǎn)的組成部分，而介紹網(wǎng)頁(yè)制作需要師講述的知識(shí)本行業(yè)從事范

網(wǎng)站是Internet上宣傳和反映企業(yè)形的軟件圍

給學(xué)生灌輸網(wǎng)頁(yè)設(shè)提前引導(dǎo)學(xué)生

象和文化的重要窗口。計(jì)的基本知識(shí)認(rèn)識(shí)

二、網(wǎng)頁(yè)設(shè)計(jì)的要點(diǎn)dreamweaver

cs5為后面軟

1、明確建站目標(biāo)和需求。件學(xué)習(xí)打下基

2、網(wǎng)站主題鮮明。礎(chǔ)

這些知識(shí)都是

3、網(wǎng)站版式設(shè)計(jì)。學(xué)網(wǎng)頁(yè)設(shè)計(jì)最

4、色彩在網(wǎng)站設(shè)計(jì)中的作用。基本的基礎(chǔ)知

識(shí)，學(xué)生基礎(chǔ)

5、網(wǎng)站設(shè)計(jì)形式與內(nèi)容統(tǒng)一。知識(shí)薄弱，必

三、網(wǎng)站設(shè)計(jì)級(jí)別須了解這些才

能學(xué)習(xí)后面的

1、新手入行內(nèi)容

2、跳槽階段

3、穩(wěn)定階段

4、大師階段

四、網(wǎng)頁(yè)設(shè)計(jì)公司類型

1、門戶游戲類

2、企業(yè)部門類

3、網(wǎng)站建設(shè)類

4、互動(dòng)設(shè)計(jì)類

五、網(wǎng)頁(yè)三劍客

1、Dreamweaver：

可視化頁(yè)面設(shè)計(jì)、網(wǎng)站管理

2、Fireworks

頁(yè)面圖象設(shè)計(jì)工具

3、Flash

動(dòng)畫制作

六、網(wǎng)頁(yè)基礎(chǔ)知識(shí)

1、網(wǎng)頁(yè)與網(wǎng)站的區(qū)別

(1)網(wǎng)頁(yè)是WWW系統(tǒng)中信息的基

本單位，簡(jiǎn)單來(lái)說(shuō)，就是后綴名為

htm的文件。

(2)網(wǎng)站是指存放在網(wǎng)絡(luò)服務(wù)器上

的完整信息的集合體。

2、網(wǎng)頁(yè)的組成

(1)文字：最直接、通用、容易的

溝通方式

（2）圖片：網(wǎng)頁(yè)的一大特點(diǎn)——圖

文并茂

（3）動(dòng)畫：1995年，Sun公司開發(fā)了

Java語(yǔ)言，用戶可以創(chuàng)建能調(diào)用圖

片和聲音的多媒體應(yīng)用小程序（4）

超鏈接：要通過(guò)一種方式把各獨(dú)立

的網(wǎng)頁(yè)整和在一起，使之構(gòu)成一有

機(jī)整體，而這種鏈接頁(yè)面的功能叫

超鏈接。

（5）特殊組件：圖片與動(dòng)畫可算是

最常見(jiàn)的特殊組件。

3、主頁(yè)Homepage

引導(dǎo)訪問(wèn)者瀏覽網(wǎng)站。

index、main、default

4、網(wǎng)頁(yè)空間

在Internet上申請(qǐng)的一個(gè)存儲(chǔ)空間，

用以存放網(wǎng)頁(yè)。

5、網(wǎng)址和域名

網(wǎng)址：IP地址

域名：與IP地址相對(duì)應(yīng)，唯一性，

善于識(shí)別

最右邊：國(guó)家（中國(guó)cn）

其次：機(jī)構(gòu)（商業(yè)機(jī)構(gòu)——com）

再次：子網(wǎng)名稱

最左邊：服務(wù)器類別（web服務(wù)器

WWW）

6、網(wǎng)頁(yè)的分類

靜態(tài)頁(yè)面與動(dòng)態(tài)頁(yè)面

7、認(rèn)識(shí)網(wǎng)站

門戶網(wǎng)站：sina

個(gè)人網(wǎng)站：明星

專業(yè)網(wǎng)站：醫(yī)療

職能網(wǎng)站：政府

根據(jù)網(wǎng)頁(yè)設(shè)計(jì)要點(diǎn)，以小組為單位巡回指導(dǎo)，給予學(xué)小組討論，相互加深學(xué)生對(duì)網(wǎng)

生幫助溝通頁(yè)設(shè)計(jì)要點(diǎn)學(xué)

任務(wù)二

確定一個(gè)網(wǎng)站主題，小組討論需要習(xí)

動(dòng)手實(shí)踐

的步驟以及素材

1、按照課堂分組課后進(jìn)行討論

課后作業(yè)2、每組確定一個(gè)網(wǎng)站主題方向。

3、每組設(shè)計(jì)一個(gè)網(wǎng)站調(diào)查問(wèn)卷。

一、網(wǎng)頁(yè)設(shè)計(jì)師就業(yè)方向

課堂小結(jié)二、網(wǎng)站設(shè)計(jì)流程

三、常見(jiàn)網(wǎng)站

本次課是網(wǎng)頁(yè)設(shè)計(jì)第一次上課，主要講述一些網(wǎng)頁(yè)基礎(chǔ)知識(shí)，學(xué)生基礎(chǔ)知識(shí)薄弱，需要加

教學(xué)反思強(qiáng)，整體來(lái)說(shuō)計(jì)算機(jī)班基礎(chǔ)知識(shí)要好于電子商務(wù)班

一、網(wǎng)頁(yè)設(shè)計(jì)介紹

二、網(wǎng)頁(yè)設(shè)計(jì)的要點(diǎn)

三、網(wǎng)站設(shè)計(jì)級(jí)別

板書

四、網(wǎng)頁(yè)設(shè)計(jì)公司類型

五、網(wǎng)頁(yè)三劍客

六、網(wǎng)頁(yè)基礎(chǔ)知識(shí)

課題1.2網(wǎng)站建設(shè)概述教學(xué)課時(shí)2課時(shí)

知識(shí)目標(biāo)了解做網(wǎng)站的準(zhǔn)備工作，掌握站點(diǎn)的建立。

1.能了解網(wǎng)站開發(fā)的基本流程。

教學(xué)目標(biāo)能力目標(biāo)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)站

1.教學(xué)場(chǎng)所：多媒體教室

教學(xué)資源2.教學(xué)設(shè)備：安裝有Dreamweavercs5軟件的計(jì)算機(jī)

3.教學(xué)資料：輔助課件、多媒體教學(xué)軟件

教法講解法、任務(wù)驅(qū)動(dòng)教學(xué)法學(xué)法小組討論法

教學(xué)過(guò)程

過(guò)程安排教學(xué)內(nèi)容教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖

1、搜集了解網(wǎng)站開發(fā)的基本流程。配合學(xué)生搜索資料網(wǎng)上搜索教師培養(yǎng)學(xué)生自主

2、網(wǎng)站設(shè)計(jì)、制作過(guò)程中的一些原及解答疑問(wèn)提出問(wèn)題，了學(xué)習(xí)能力

課前準(zhǔn)備

則、注意事項(xiàng)。解網(wǎng)站設(shè)計(jì)事

項(xiàng)

網(wǎng)站設(shè)計(jì)大致流程是哪些？每組派聽(tīng)取學(xué)生的觀點(diǎn)并闡述觀點(diǎn)，組員鍛煉學(xué)生的語(yǔ)

導(dǎo)入新課

出一個(gè)代表闡述本組課前搜集的資給予一定的知道之間相互討論言表達(dá)能力和

(5min)

料分析能力

任務(wù)一一、網(wǎng)站設(shè)計(jì)流程

講授新課

(35min)架構(gòu)內(nèi)容信息

搜集整理資料

網(wǎng)站上傳

網(wǎng)站推廣

二、網(wǎng)1、確定網(wǎng)站主題小組討論，相互加深學(xué)生對(duì)網(wǎng)

更新維護(hù)的建議溝通頁(yè)設(shè)計(jì)要點(diǎn)學(xué)

1、確7匕土磔2、給網(wǎng)站取名習(xí)

討論：網(wǎng)站是靠什么贏利的？3、提示決定網(wǎng)站

J站點(diǎn)結(jié)4的性質(zhì)

2、規(guī)龍

V

(1)經(jīng)號(hào)構(gòu)設(shè)計(jì)

(2)E錄結(jié)構(gòu)設(shè)計(jì)

任務(wù)二(3)開謨?cè)O(shè)計(jì)

分組討論

(40min)(4)3項(xiàng)設(shè)計(jì)

(5)第E他頁(yè)面設(shè)計(jì)

(6)6:業(yè)站點(diǎn)設(shè)計(jì)

(7)>J站點(diǎn)設(shè)計(jì)目標(biāo)對(duì)象

訪問(wèn)率

三、網(wǎng)頁(yè)版面布局設(shè)計(jì)

1、版通i布局的原則

(1)主次分明、中心突出

(2)大小搭配、相互呼應(yīng)

(3)圖文并茂、相得益彰

(4)動(dòng)靜適度、平衡對(duì)稱

2、頁(yè)面布局的類型

(1)“國(guó)”字型

(2)框架型

(3)標(biāo)題正文型

(4)封面型

(5)綜合型

四、規(guī)劃站點(diǎn)

1、建立站點(diǎn)目錄

2、站點(diǎn)規(guī)劃

規(guī)劃站點(diǎn)結(jié)構(gòu)是利用不同的文件

夾將不同的網(wǎng)頁(yè)內(nèi)容分門別類的保

存。

3、創(chuàng)建導(dǎo)航草圖

五、搜集素材

1、搜集并制作素材

無(wú)論是文字素材還是圖片、動(dòng)畫素

材，都應(yīng)注意其來(lái)源是否注明版權(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)

課后作業(yè)根據(jù)這次課的內(nèi)容、注意事項(xiàng)，構(gòu)思一個(gè)明確的網(wǎng)站主題，并將站點(diǎn)結(jié)構(gòu)的規(guī)劃用文件夾表

(5min)示出來(lái)

一、網(wǎng)站設(shè)計(jì)確定主題

課堂小結(jié)二、網(wǎng)站設(shè)計(jì)流程

(5min)

三、站點(diǎn)管理

本次主要講述站點(diǎn)的建立和管理，課程較簡(jiǎn)單，學(xué)生掌握較好

教學(xué)反思

一、網(wǎng)站設(shè)計(jì)流程

二、網(wǎng)站開發(fā)原則

三、網(wǎng)頁(yè)版面布局設(shè)計(jì)

板書四、規(guī)劃站點(diǎn)

五、搜集素材

六、創(chuàng)建站點(diǎn)

七、管理站點(diǎn)

實(shí)訓(xùn)課題新建一個(gè)網(wǎng)頁(yè)實(shí)訓(xùn)課時(shí)2課時(shí)

1>熟悉Dreamweavercs4界面

實(shí)訓(xùn)目標(biāo)

2、制作簡(jiǎn)單網(wǎng)頁(yè)

1、學(xué)會(huì)在網(wǎng)頁(yè)中輸入文字、插入圖片等

實(shí)訓(xùn)重點(diǎn)

2、掌握簡(jiǎn)單代碼的編寫

實(shí)訓(xùn)難點(diǎn)代碼的編寫

實(shí)訓(xùn)方法上機(jī)實(shí)訓(xùn)

實(shí)訓(xùn)準(zhǔn)備教案、素材、案例、教材、計(jì)算機(jī)機(jī)房

1.對(duì)照實(shí)習(xí)報(bào)告的要求，完成上機(jī)任務(wù)；

實(shí)訓(xùn)要求2.任務(wù)完成后及時(shí)要求教師考評(píng)；

3.完善實(shí)習(xí)報(bào)告，填寫實(shí)訓(xùn)總結(jié)；

遵守實(shí)訓(xùn)紀(jì)律，不游戲，不睡覺(jué)，不高聲談?wù)摗?/p>

實(shí)訓(xùn)過(guò)程

內(nèi)容操作要求及步驟

1、雙擊打開軟件一一新建HTML網(wǎng)頁(yè)一一網(wǎng)頁(yè)名字為nesOl——輸入以下文字然后保存

任務(wù)一

2、文字要求：標(biāo)題宋體二號(hào)藍(lán)色正文：五號(hào)宋體加粗

新建網(wǎng)頁(yè)1

制作如下網(wǎng)頁(yè)素材見(jiàn)文件夾網(wǎng)頁(yè)命名文字為index保存在文件夾中上交給老師

?^光臨我的足球網(wǎng)

■■

愎了解刖足訃的的法霖?fù)粝旅娴那殂陆?/p>

戊谿

任務(wù)二

新建網(wǎng)頁(yè)2

L-',—，F(xiàn)C?五；

操作步驟：新建HTML網(wǎng)頁(yè)一一輸入文字一一將標(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)頁(yè)，學(xué)生存在對(duì)DW界面不熟，操作不熟練

等缺點(diǎn)，需加強(qiáng)操作

課題2.1編輯和添加文本教學(xué)課時(shí)2課時(shí)

1、掌握輸入和編輯文本

知識(shí)目標(biāo)

2、學(xué)會(huì)插入文本，掌握設(shè)置文本格式的方法

教學(xué)目標(biāo)能力目標(biāo)掌握網(wǎng)頁(yè)中三種常見(jiàn)列表的創(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)建列表

1.教學(xué)場(chǎng)所：多媒體教室

教學(xué)資源2.教學(xué)設(shè)備：安裝有Dreamweavercs5軟件的計(jì)算機(jī)

3.教學(xué)資料：輔助課件.多媒體教學(xué)軟件

教法講解法、任務(wù)驅(qū)動(dòng)教學(xué)法學(xué)法小組討論法

教學(xué)過(guò)程

過(guò)程安排教學(xué)內(nèi)容教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖

提問(wèn)：在DW中輸入文本和在Word中將學(xué)生分組，并提討論并思考以討論的形式

導(dǎo)入新課輸入文本有何區(qū)別？出問(wèn)題，引導(dǎo)學(xué)生提高學(xué)生之間

(5min)小組之間討論并總的交流溝通

結(jié)

一、插入文本演示并強(qiáng)調(diào)重點(diǎn)認(rèn)真聽(tīng)講并記下文本插入是基

1、插入普通文本重點(diǎn)礎(chǔ)知識(shí)，為下

2、插入不換行空格面任務(wù)二打下

任務(wù)一3、插入水平線基礎(chǔ)

插入文本4、插入日期和特殊字符

(20min)二、編輯文本

1、基本樣式設(shè)置

2、設(shè)置段落格式

3、創(chuàng)建列表

完成以下網(wǎng)頁(yè)實(shí)例：1、引導(dǎo)學(xué)生討論小組討論本實(shí)例即是對(duì)

該網(wǎng)頁(yè)由哪幾任務(wù)一的鞏

任務(wù)二部分組成固，也為下一

(55min)2、引導(dǎo)學(xué)生小組次課打下基礎(chǔ)

組內(nèi)分工，完

成小模塊

作業(yè)布置1、找一篇文章輸入至頁(yè)面中，然后利用所學(xué)知識(shí)，對(duì)其進(jìn)行格式編排

(5min)

一、插入文本

課堂小結(jié)

(5min)二、編輯文本

一、插入文本

5、插入普通文本

6、插入不換行空格

7、插入水平線

板書

8、插入日期和特殊字符

二、編輯文本

1、基本樣式設(shè)置

2、設(shè)置段落格式

3、創(chuàng)建列表

三、實(shí)例操作

本次課是一個(gè)基礎(chǔ)知識(shí)內(nèi)容，文本是一個(gè)網(wǎng)頁(yè)必不可少的內(nèi)容，對(duì)網(wǎng)頁(yè)設(shè)計(jì)至關(guān)重要，學(xué)生

教學(xué)反思

必須牢牢掌握文本的各個(gè)要點(diǎn)。目前來(lái)說(shuō)學(xué)習(xí)興趣較好。

實(shí)訓(xùn)課題網(wǎng)站素材處理實(shí)訓(xùn)課時(shí)2課時(shí)

1、掌握創(chuàng)建本地站點(diǎn)和遠(yuǎn)程站點(diǎn)

實(shí)訓(xùn)目標(biāo)

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ī)房

1、對(duì)照實(shí)習(xí)報(bào)告的要求，完成上機(jī)任務(wù)；

實(shí)訓(xùn)要求2、任務(wù)完成后及時(shí)要求教師考評(píng)；

3、完善實(shí)習(xí)報(bào)告，填寫實(shí)訓(xùn)總結(jié)；

4、遵守實(shí)訓(xùn)紀(jì)律，不游戲，不睡覺(jué)，不高聲談?wù)摗?/p>

實(shí)訓(xùn)過(guò)程

內(nèi)容操作要求及步驟

1、熟悉DW界面

任務(wù)一

2、在D盤根目錄創(chuàng)建一個(gè)站點(diǎn)名稱為《我的足球網(wǎng)》，本地站點(diǎn)文件夾為jcwww,如下圖所

創(chuàng)建站點(diǎn)

示

任務(wù)二

利用教師所給素材，制作簡(jiǎn)單網(wǎng)頁(yè)《我的偶像》，素材見(jiàn)文件夾

設(shè)置默認(rèn)圖像

文件夾

完善報(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)頁(yè)實(shí)訓(xùn)課時(shí)2課時(shí)

1、掌握新建網(wǎng)頁(yè)、編輯文字、處理圖像

實(shí)訓(xùn)目標(biāo)2、新建站點(diǎn)

3、插入水平線、空格、自動(dòng)更新時(shí)間

實(shí)訓(xùn)重點(diǎn)制作簡(jiǎn)單網(wǎng)頁(yè)流程

實(shí)訓(xùn)難點(diǎn)綜合運(yùn)用HTML工具

實(shí)訓(xùn)方法上機(jī)實(shí)訓(xùn)

實(shí)訓(xùn)準(zhǔn)備教案、素材、案例、教材、計(jì)算機(jī)機(jī)房

4、對(duì)照實(shí)習(xí)報(bào)告的要求，完成上機(jī)任務(wù)；

實(shí)訓(xùn)要求5、任務(wù)完成后及時(shí)要求教師考評(píng)；

6、完善實(shí)習(xí)報(bào)告，填寫實(shí)訓(xùn)總結(jié)；

4、遵守實(shí)訓(xùn)紀(jì)律，不游戲，不睡覺(jué)，不高聲談?wù)摗?/p>

實(shí)訓(xùn)過(guò)程

內(nèi)容操作要求及步驟

1、熟悉DW菜單欄常用界面

任務(wù)一

2、完成以下簡(jiǎn)單網(wǎng)站，素材見(jiàn)素材庫(kù)

足球偶像網(wǎng)頁(yè)

完善報(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è)P(yáng)

課題2.2添加和編輯圖像教學(xué)課時(shí)2課時(shí)

1、掌握?qǐng)D像裁剪、重新取樣、亮度、銳化的設(shè)置

知識(shí)目標(biāo)

2、掌握?qǐng)D像屬性設(shè)置

教學(xué)目標(biāo)能力目標(biāo)掌握運(yùn)用軟件對(duì)圖像處理的能力

情感目標(biāo)提高學(xué)生團(tuán)結(jié)合作精神，提高學(xué)生競(jìng)爭(zhēng)意識(shí)

教學(xué)重點(diǎn)圖像的編輯

教學(xué)難點(diǎn)圖像的編輯

1.教學(xué)場(chǎng)所：多媒體教室

教學(xué)資源2.教學(xué)設(shè)備：安裝有Dreamweavercs5軟件的計(jì)算機(jī)

3.教學(xué)資料：輔助課件.多媒體教學(xué)軟件

教法講解法、任務(wù)驅(qū)動(dòng)教學(xué)法學(xué)法小組討論法

教學(xué)過(guò)程

過(guò)程安排教學(xué)內(nèi)容教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖

前面介紹網(wǎng)頁(yè)的時(shí)候有說(shuō)過(guò)，在保演示cluo.jpeg這分組討論用什么提出問(wèn)題引發(fā)

證畫質(zhì)的情況下，圖片的數(shù)據(jù)量越張圖片，分析數(shù)據(jù)方法來(lái)更改數(shù)據(jù)學(xué)生思考，引

小越好。問(wèn)題：如果一張圖片數(shù)據(jù)量為93k、畫質(zhì)為量和規(guī)格出這次課的主

導(dǎo)入新課量很大，我們?cè)撊绾尉庉嫞?024*768規(guī)格的圖題

(5min)

片如何更改數(shù)據(jù)量

和規(guī)格？

給出cluo.jpeg和gg.jpeg兩張圖片對(duì)圖片寬、高、裁觀看教師演示，引導(dǎo)學(xué)生學(xué)習(xí)

進(jìn)行對(duì)比，提出任務(wù)：如何從切、重新采樣、銳并思考理論的時(shí)候思

cluo.jpeg變化到gg.jpeg?化等設(shè)置進(jìn)行演示cluo.jpeg變成考如何理論運(yùn)

任務(wù)一具體操作步驟：打開DW軟件一一插cluo.jpeg的方用到實(shí)踐

編輯圖片入圖像cluo.jpeg,對(duì)圖片屬性設(shè)置法

(30min)如下目標(biāo)值：

編輯完成后與原圖像進(jìn)行對(duì)比，會(huì)

發(fā)現(xiàn)數(shù)據(jù)量、規(guī)格都發(fā)生變化，但

瀏覽網(wǎng)頁(yè)更友好

概念：在網(wǎng)頁(yè)瀏覽中，有時(shí)當(dāng)鼠標(biāo)1、鼓勵(lì)學(xué)生小組小組討論如何完

移到某個(gè)圖像上或者單擊時(shí)，圖像討論如何完成成該效果并進(jìn)行

會(huì)變成另外一副圖像。翻轉(zhuǎn)圖像效嘗試

瀏覽時(shí)效果：果；

鼠標(biāo)放上去時(shí)效果：2、給學(xué)生展示翻

轉(zhuǎn)圖像做出來(lái)

的效果，然后

講解如何

才能完成這個(gè)

任務(wù)二

效果

制作翻轉(zhuǎn)圖像

(50min)

一、如何編輯圖像

課堂小結(jié)

二、制作翻轉(zhuǎn)圖像效果

(5min)

一、編輯圖像

1、重新采樣

板書設(shè)計(jì)

2、裁剪、銳化

二、翻轉(zhuǎn)圖像制作效果

本次教學(xué)學(xué)生較感興趣，特別是鼠標(biāo)經(jīng)過(guò)的圖像，學(xué)生完成得較好，值得鼓勵(lì)

教學(xué)反思

課題2.3創(chuàng)建超級(jí)鏈接教學(xué)課時(shí)2課時(shí)

1、掌握創(chuàng)建超鏈接的方法

知識(shí)目標(biāo)2、掌握相對(duì)鏈接和絕對(duì)鏈接的區(qū)別

3、創(chuàng)建錨點(diǎn)鏈接

教學(xué)目標(biāo)

能力目標(biāo)提高學(xué)生學(xué)習(xí)創(chuàng)作能力

情感目標(biāo)提高學(xué)生團(tuán)結(jié)合作精神，提高學(xué)生競(jìng)爭(zhēng)意識(shí)

1、正確認(rèn)識(shí)路徑

教學(xué)重點(diǎn)

2、理解相對(duì)鏈接和絕對(duì)鏈接的區(qū)別

教學(xué)難點(diǎn)添加超鏈接、相對(duì)路徑、絕對(duì)路徑

1.教學(xué)場(chǎng)所：多媒體教室

教學(xué)資源2.教學(xué)設(shè)備：安裝有Dreamweavercs5軟件的計(jì)算機(jī)

3.教學(xué)資料：輔助課件.多媒體教學(xué)軟件

教法講解法、任務(wù)驅(qū)動(dòng)教學(xué)法學(xué)法小組討論法

教學(xué)過(guò)程

過(guò)程安排教學(xué)內(nèi)容教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖

每次瀏覽網(wǎng)頁(yè)的時(shí)候點(diǎn)擊某個(gè)文字進(jìn)入新浪網(wǎng)給學(xué)生觀看效果并討論以提問(wèn)且學(xué)生

或者圖片，能自動(dòng)跳轉(zhuǎn)到另一個(gè)頁(yè)演示超級(jí)鏈接的效如何才能實(shí)現(xiàn)該較熟悉的瀏覽

導(dǎo)入新課

面，提問(wèn)：這樣的鏈接形式叫什果并進(jìn)行提問(wèn)效果網(wǎng)頁(yè)的方式吸

(5min)

么？如何實(shí)現(xiàn)？引學(xué)生的注意

一、新建站點(diǎn)jcww,并在站點(diǎn)內(nèi)新給學(xué)生演示如何插觀看教師演示，讓學(xué)生熟悉DW

建默認(rèn)圖像文件夾images,將網(wǎng)頁(yè)入鏈接；演示不同并思考-new、添加超級(jí)鏈接

Index.HTML里的“我與足球”鏈接目標(biāo)新建窗口的區(qū)-blank>-self的界面

至Unews.HTML,目標(biāo)為-blank；別幾個(gè)目標(biāo)值窗口

任務(wù)一

“足球新聞”鏈接到“逢入京的區(qū)別

創(chuàng)建超級(jí)鏈接

使.HTML"，目標(biāo)為-new；"足球

(20min)

明星”鏈接到“我與足球

網(wǎng).HTML”,目標(biāo)為-self。

二、對(duì)比每個(gè)目標(biāo)不同，網(wǎng)頁(yè)新建

窗口不同并進(jìn)行總結(jié)

區(qū)別：演示教材P60實(shí)例思考并正確理解正確理解相對(duì)

相對(duì)鏈接是指鏈接的地址是本站點(diǎn)演示如何插入錨點(diǎn)相對(duì)鏈接和絕對(duì)鏈接和絕對(duì)鏈

任務(wù)二之內(nèi)的對(duì)象；絕對(duì)鏈接是指鏈接的鏈接鏈接概念接，為下面的

相對(duì)鏈接和絕地址是遠(yuǎn)程對(duì)象，用域名或IP作為觀看教師演示并學(xué)習(xí)打下基礎(chǔ)

對(duì)鏈接地址思考錨點(diǎn)鏈接的錨點(diǎn)鏈接應(yīng)用

(20min)一、概念：在本頁(yè)進(jìn)行鏈接的叫做應(yīng)用比較廣泛，學(xué)

任務(wù)三錨點(diǎn)，一般在長(zhǎng)篇的文章或技術(shù)文生需要掌握并

錨點(diǎn)鏈接檔中是使用，鏈接到某個(gè)特殊的段應(yīng)用

(35min)落。

二、打開第4章/4-3/jieshao.html

網(wǎng)頁(yè)，演示錨點(diǎn)鏈接效果

一、頁(yè)面與頁(yè)面之間的超鏈接

課堂小結(jié)

二、相對(duì)鏈接和絕對(duì)鏈接

(5min)

三、錨點(diǎn)鏈接(本頁(yè)之間鏈接)

一、網(wǎng)上查找哪些頁(yè)面常用頁(yè)面與頁(yè)面鏈接，哪些是用錨點(diǎn)鏈接并總結(jié)

作業(yè)布置

二、利用教材第4章/4-3/jieshao.html的素材，自己動(dòng)手創(chuàng)建錨點(diǎn)鏈接

(5min)

三、創(chuàng)建超級(jí)鏈接的方法與步驟

四、相對(duì)鏈接和絕對(duì)鏈接

板書

五、創(chuàng)建錨點(diǎn)鏈接

本次課主要介紹超鏈接的常用方法，超鏈接在學(xué)生上網(wǎng)中隨處可見(jiàn)，較易理解，學(xué)生之間的

教學(xué)反思討論也非常激烈，較好。

實(shí)訓(xùn)課題圖像處理和創(chuàng)建超鏈接實(shí)訓(xùn)課時(shí)2課時(shí)

3、學(xué)會(huì)利用DW處理圖像

實(shí)訓(xùn)目標(biāo)4、掌握創(chuàng)建超級(jí)鏈接的方法

5、理解相對(duì)鏈接和絕對(duì)鏈接概念

1、圖片處理

實(shí)訓(xùn)重點(diǎn)

2、超級(jí)鏈接

實(shí)訓(xùn)難點(diǎn)超級(jí)鏈接的使用

實(shí)訓(xùn)方法上機(jī)實(shí)訓(xùn)

實(shí)訓(xùn)準(zhǔn)備教案、素材、案例、教材、計(jì)算機(jī)機(jī)房

7、對(duì)照實(shí)習(xí)報(bào)告的要求，完成上機(jī)任務(wù)；

實(shí)訓(xùn)要求8、任務(wù)完成后及時(shí)要求教師考評(píng)；

9、完善實(shí)習(xí)報(bào)告，填寫實(shí)訓(xùn)總結(jié)；

4、遵守實(shí)訓(xùn)紀(jì)律，不游戲，不睡覺(jué)，不高聲談?wù)摗?/p>

實(shí)訓(xùn)過(guò)程

操作要求及步驟

1、將圖片6.jpeg修改為尺寸為240*160,數(shù)據(jù)量設(shè)置為8K左右（6-11k都可以）并進(jìn)行裁剪

任務(wù)一

和銳化等設(shè)置，熟悉圖片處理幾個(gè)設(shè)置，設(shè)置完成后以網(wǎng)頁(yè)的形式保存，保存在文件夾

處理圖像

中，保存名稱為“xiugai.html”

2、將教師發(fā)送的Index.HTML網(wǎng)頁(yè)進(jìn)行編輯，將“我與足球”四個(gè)字專連接到“我與足球

網(wǎng).html"，目標(biāo)為-self；將“足球新聞”四個(gè)字鏈接到“逢入京使.html”,目標(biāo)為

-blank；將“足球明星”四個(gè)字鏈接到“news.html"，目標(biāo)為-newO

3、修改頁(yè)面屬性：在頁(yè)面屬性對(duì)話框中，設(shè)置鏈接選項(xiàng)中的大小為16像素，鏈接顏色為

“#6666cc"，變換圖像顏色為"#ff6600”，己訪問(wèn)鏈接為**#6633（56”，活動(dòng)鏈接為

“#99cc00"，下劃線樣式為“僅在變換圖像時(shí)顯示下劃線"o設(shè)置的對(duì)話框如下圖所

示：

任務(wù)二計(jì)受tdtt

曜享體1XT，印—缽）?B/

超級(jí)鏈接霸簿大?。?2▼SfjfW

第#一心町儂出更他少SH特，11正“由）

已詢耳Z精⑼：旦33加?xùn)|曰檢GI縣*53

不加日式加|僅在云梆皆打髭彳1帆?

「端"1◎啟應(yīng)招⑴:［射勁

完善報(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í)

6、掌握?qǐng)D像熱點(diǎn)鏈接的使用

實(shí)訓(xùn)目標(biāo)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ī)房

10、對(duì)照實(shí)習(xí)報(bào)告的要求，完成上機(jī)任務(wù)；

實(shí)訓(xùn)要求11、任務(wù)完成后及時(shí)要求教師考評(píng)；

12、完善實(shí)習(xí)報(bào)告，填寫實(shí)訓(xùn)總結(jié)；

4、遵守實(shí)訓(xùn)紀(jì)律，不游戲，不睡覺(jué)，不高聲談?wù)摗?/p>

實(shí)訓(xùn)過(guò)程

操作要求及步驟

任務(wù)一在地圖中創(chuàng)建熱點(diǎn)鏈接

創(chuàng)建圖像熱點(diǎn)

鏈接

打開news.HTML網(wǎng)頁(yè)，在如下圖所示的位置插入圖片，圖片為“鼠標(biāo)經(jīng)過(guò)的圖片”，鏈接到

本頁(yè)的“冠軍杯新聞”處（提示：利用錨點(diǎn)鏈接）

打開"jieshao.htmlM網(wǎng)頁(yè)，在下載資源文本中將教師提供的“qq.rar”放入站點(diǎn)，做成的效果

是點(diǎn)擊“下載資源”就能下載“qq.rar”，同理在“聯(lián)系我們”中設(shè)置郵件下載

任務(wù)二

制作跳轉(zhuǎ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èi)容較多，大部分學(xué)生能在規(guī)定時(shí)間內(nèi)完成任務(wù)，較好。

課題2.4使用表格布局頁(yè)面教學(xué)課時(shí)2課時(shí)

1、了解表格在網(wǎng)頁(yè)設(shè)計(jì)中的《三用。

2、掌握網(wǎng)頁(yè)中表格的制作方石去、表格屬性的設(shè)置方法以及單元格屬性的設(shè)置

知識(shí)目標(biāo)方法，能夠在單元格中正確插入文字和圖片。

3、能夠根據(jù)網(wǎng)頁(yè)設(shè)計(jì)內(nèi)容，IE確布局表格的結(jié)構(gòu)，掌握表格嵌套的設(shè)計(jì)方

法。