0601-靜態(tài)網(wǎng)頁(yè)制作(Dreamweaver)-布局網(wǎng)站后.

1、Dreamweaver 網(wǎng)頁(yè)設(shè)計(jì)教案河北工業(yè)職業(yè)技術(shù)學(xué)院靜態(tài)網(wǎng)頁(yè)制作（Dreamweaver ）課程教案首頁(yè)授課教師張亞靜班級(jí)1616 網(wǎng)絡(luò)訂單 1 1 班學(xué)時(shí)2 2授課日期主題或任務(wù)布局網(wǎng)站后臺(tái)登錄頁(yè)面知識(shí)準(zhǔn)備-管理表格課型考試授課地點(diǎn)O多媒體教室O企業(yè)O專業(yè)教室 實(shí)訓(xùn)室教學(xué)目標(biāo)知識(shí)目標(biāo)：1 1、 明確表格的作用2 2、 掌握表格的構(gòu)成3 3、 了解表格屬性和單元格屬性4 4、 能夠靈活操作表格5 5、 掌握 CSSCSS 設(shè)置表格的樣式技能目標(biāo)：1 1、 能靈活運(yùn)用表格布局頁(yè)面2 2、 能夠利用 CSSCSS 靈活設(shè)置表格樣式素質(zhì)目標(biāo)：1 1、培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí)2 2、 培養(yǎng)學(xué)生的良好的

2、學(xué)習(xí)態(tài)度，重視基礎(chǔ)知識(shí)的學(xué)習(xí)學(xué)習(xí)內(nèi)容1、 管理表格1 1）表格構(gòu)成2 2） 表格屬性3 3） 單元格屬性4 4） 操作表格5 5） 表格布局2 2、 利用 CSSCSS 設(shè)置表格樣式重點(diǎn)難點(diǎn)重點(diǎn)：利用 CSSCSS 設(shè)置表格樣式難點(diǎn)：利用 CSSCSS 設(shè)置表格樣式Dreamweaver 網(wǎng)頁(yè)設(shè)計(jì)教案2教學(xué)方法O理論講授O小組討論項(xiàng)目教學(xué)任務(wù)驅(qū)動(dòng)O參觀教學(xué)O模擬教學(xué) 實(shí)驗(yàn)實(shí)訓(xùn)O演示教學(xué)O其他素材 資源O文本素材O實(shí)物展示PPTPPT 幻燈片O音頻素材O視頻素材O動(dòng)畫(huà)素材圖形/ /圖像素材O網(wǎng)絡(luò)資源O其他Dreamweaver 網(wǎng)頁(yè)設(shè)計(jì)教案教學(xué)設(shè)計(jì)1 1、 通過(guò)教師演示“計(jì)算機(jī)系后臺(tái)登錄頁(yè)面”

3、項(xiàng)目，采用項(xiàng)目驅(qū)動(dòng)法引導(dǎo)學(xué)生明確本項(xiàng)目 單兀學(xué)習(xí)目標(biāo)為官理表格，并通過(guò) CSSCSS 樣式 實(shí)現(xiàn)對(duì)表格的外觀修飾；2 2、 通過(guò)講解表格的相關(guān)知識(shí)，為登錄頁(yè)面布局打下基礎(chǔ)；3 3、通過(guò) CSSCSS 實(shí)現(xiàn)對(duì)表格的外觀設(shè)置，從而實(shí)現(xiàn)網(wǎng)頁(yè)結(jié)構(gòu)與表現(xiàn)的完美結(jié)合。學(xué)習(xí)評(píng)價(jià)行為表現(xiàn)O課堂作業(yè)O測(cè)驗(yàn)測(cè)試制作作品O其他作業(yè)題目1 1）完成教材“考核評(píng)價(jià)”部分表格題目的相關(guān)內(nèi)容2 2）完成教材中關(guān)于官理表格部分的案例和操作雙語(yǔ)教學(xué)TableTable colucolu mnmnrowrow stylestyle系（部）：計(jì)算機(jī)技術(shù)系教研室：網(wǎng)絡(luò)技術(shù)教研室主任簽字：-_ 年月日Dreamweaver 網(wǎng)頁(yè)設(shè)計(jì)教

4、案4學(xué)習(xí)單元十布局網(wǎng)站后臺(tái)登錄頁(yè)面知識(shí)準(zhǔn)備-管理表格授課內(nèi)容：布局網(wǎng)站后臺(tái)登錄頁(yè)面知識(shí)準(zhǔn)備-管理表格學(xué)時(shí)：2 2 學(xué)時(shí)（9090 分鐘）教學(xué)目標(biāo)：知識(shí)目標(biāo)：熟練掌握 JavaScriptJavaScript 的基本語(yǔ)法能夠識(shí)別簡(jiǎn)單的 jQueryjQuery 特效代碼技能目標(biāo)：能夠網(wǎng)站項(xiàng)目中通過(guò)“行為面板”添加簡(jiǎn)單的交互行為能夠網(wǎng)站項(xiàng)目中編寫簡(jiǎn)單的JavaScriptJavaScript 特效提網(wǎng)頁(yè)效果能夠?qū)Τ墒斓?JavaScriptJavaScript 或 jQueryjQuery 特效實(shí)例進(jìn)行修改，并應(yīng)用到靜態(tài)頁(yè)面中提高學(xué)生解決實(shí)際問(wèn)題的能力情感目標(biāo)：培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí)培養(yǎng)學(xué)生自我分析

5、問(wèn)題和解決問(wèn)題的能力教學(xué)重點(diǎn)：主內(nèi)容區(qū)整體構(gòu)架設(shè)計(jì)及制作主內(nèi)容區(qū)圖文混排的方法教學(xué)難點(diǎn)：主內(nèi)容區(qū)整體構(gòu)架設(shè)計(jì)及制作定教學(xué)方法和策略：教學(xué)方法：采用項(xiàng)目驅(qū)動(dòng)法、分組競(jìng)爭(zhēng)法、案例演示法提高學(xué)生的學(xué)習(xí)興趣教學(xué)策略：通過(guò)分組討論、競(jìng)爭(zhēng)的方式激發(fā)學(xué)生的學(xué)習(xí)熱情Dreamweaver 網(wǎng)頁(yè)設(shè)計(jì)教案教學(xué)設(shè)計(jì)思路:Dreamweaver 網(wǎng)頁(yè)設(shè)計(jì)教案61 1、 通過(guò)教師演示項(xiàng)目，采用項(xiàng)目驅(qū)動(dòng)法引導(dǎo)學(xué)生明確本項(xiàng)目單元學(xué)習(xí)目標(biāo)2 2、 鼓勵(lì)學(xué)生多使用代碼視圖，運(yùn)用靈活方便的代碼快速解決問(wèn)題3 3、 知識(shí)準(zhǔn)備講解完成后，由學(xué)生自己動(dòng)手完成簡(jiǎn)單首頁(yè)特效的添加，強(qiáng)化知識(shí)的掌握程度和靈活運(yùn)用程度，讓學(xué)生帶著任務(wù)去學(xué)習(xí)，積

6、極性得以提高。授課內(nèi)容提綱：一、復(fù)習(xí)舊課導(dǎo)出新課1 1、課程回顧1 1）教師綜述在上一學(xué)習(xí)單元的課程中，之前我們已經(jīng)完成了網(wǎng)站二級(jí)頁(yè)面的設(shè)計(jì)和創(chuàng)建的 學(xué)習(xí)，使二級(jí)頁(yè)面和主頁(yè)具有相同的風(fēng)格。（2 2）利用項(xiàng)目互動(dòng)提問(wèn)回顧知識(shí)點(diǎn)網(wǎng)站模板的作用是什么？創(chuàng)建模板的方法和步驟？應(yīng)用模板的方法3 3）互動(dòng)總結(jié)與學(xué)生互動(dòng)總結(jié)上節(jié)課重點(diǎn)內(nèi)容，以及學(xué)生制作中的亮點(diǎn)指出，并指明有待提 升和改進(jìn)的地方。2 2、 項(xiàng)目任務(wù)導(dǎo)入1 1） 教師利用互動(dòng)提問(wèn)引入新知用戶瀏覽的網(wǎng)頁(yè)資源需要更新怎么辦？是否需要網(wǎng)站整體修改一遍？ 是不是任何用戶都可以對(duì)資源進(jìn)行管理？如果不是，怎么確定合法訪問(wèn) 者？2 2） 教師根據(jù)互動(dòng)討論進(jìn)行

7、總結(jié)需要建立一個(gè)后臺(tái)登錄頁(yè)面，管理員通過(guò)它實(shí)現(xiàn)網(wǎng)站內(nèi)容的資源管理。之前儲(chǔ)備的知識(shí)已經(jīng)不能完成后續(xù)功能的需求，需要引入新知識(shí)繼續(xù)完成后臺(tái)登錄頁(yè)面的制作。本項(xiàng)目單元要學(xué)習(xí)的新內(nèi)容是布局網(wǎng)站后臺(tái)登錄頁(yè)面知識(shí)準(zhǔn)備-管理表格（點(diǎn)題），我們可以通過(guò)學(xué)習(xí)表格基礎(chǔ)知識(shí)為制作后臺(tái)登錄頁(yè)面做好準(zhǔn)備。課程回顧：【約 1010 分鐘】學(xué)生在教師的 引導(dǎo)下，互動(dòng)回 答教師的提問(wèn)， 一起對(duì)網(wǎng)頁(yè)模 板和庫(kù)的知識(shí)進(jìn)行回顧。要求學(xué)生認(rèn)真記錄實(shí)訓(xùn)環(huán)節(jié) 問(wèn)題的解決方案。通過(guò)互動(dòng)提問(wèn)的 方 式讓學(xué)生動(dòng)腦筋 去 思考，為新知識(shí)的學(xué) 習(xí)奠定基礎(chǔ)Dreamweaver 網(wǎng)頁(yè)設(shè)計(jì)教案73 3、 教師首先簡(jiǎn)述本項(xiàng)目單元重點(diǎn)、難點(diǎn)，讓學(xué)生有重點(diǎn)

8、的聽(tīng)講。 教師簡(jiǎn)述本項(xiàng)目單元的重點(diǎn)、難點(diǎn)，讓學(xué)生有帶著任務(wù)、有重點(diǎn)地聽(tīng)課。（1 1）表格構(gòu)成（重點(diǎn)）（2 2）操作表格（重點(diǎn)）（3 3）使用 CSSCSS 設(shè)置表格樣式（重點(diǎn)、難點(diǎn)）4 4、 本學(xué)習(xí)單元總體目標(biāo)（教師總結(jié)）通過(guò)學(xué)完本項(xiàng)目單元，能靈活運(yùn)用表格布局頁(yè)面，并且能夠通過(guò)利用CSSCSS靈活設(shè)置表格樣式，為網(wǎng)站后臺(tái)的搭建奠定基礎(chǔ)。二、新課講解教師簡(jiǎn)述項(xiàng)目單元教學(xué)目標(biāo)和教學(xué)內(nèi)容，明確本項(xiàng)目單元教學(xué)重點(diǎn)和難點(diǎn)教學(xué)目標(biāo)能夠創(chuàng)建表格能夠操作表格能夠通過(guò) CSSCSS 樣式修飾表格教學(xué)內(nèi)容1、 管理表格1 1 ）表格構(gòu)成2 2） 表格屬性3 3） 單元格屬性4 4） 操作表格5 5） 表格布局2

9、2、 利用 CSSCSS 設(shè)置表格樣式（重點(diǎn)和難點(diǎn)）（一）工作任務(wù)一：計(jì)算機(jī)系網(wǎng)站簡(jiǎn)單網(wǎng)頁(yè)特效的添加場(chǎng)景設(shè)計(jì)：教師采用項(xiàng)目驅(qū)動(dòng)法，展示【學(xué)生信息表】和【班級(jí)信息表】項(xiàng)目 案例，讓學(xué)生對(duì)本項(xiàng)目單元實(shí)施完成后效果有一個(gè)總體認(rèn)識(shí)，便于學(xué)生對(duì)知識(shí)形成 體系，帶著明確的任務(wù)學(xué)習(xí)。學(xué)生明確本項(xiàng)目 單 元結(jié)束后自己能 干 什么。新課講解 1 1:【約 3030 分鐘】1.1.項(xiàng)目引入思路：教師利用計(jì)算機(jī) 系 網(wǎng)站目入手，為完成 后臺(tái)管理界面的 布 局和美化打下基礎(chǔ)。2.2.思路指導(dǎo)：掌握表格布局頁(yè) 面 及用CSSCSS 樣式修飾和 美化表格。3.3.任務(wù)目標(biāo)：為后臺(tái)的布局和 美 化奠定基礎(chǔ)。教師對(duì)學(xué)生進(jìn)行

10、分 組，以便在任務(wù)一講 解中，通過(guò)項(xiàng)目驅(qū)動(dòng) 和互動(dòng)討論的方式 實(shí)施教學(xué)。Dreamweaver 網(wǎng)頁(yè)設(shè)計(jì)教案8瞬|竝1WS-12-?L帥1 11目教師展示項(xiàng)目一完 成后的效果，學(xué)生對(duì) 學(xué)習(xí)目標(biāo)有更清 晰 的認(rèn)識(shí)。班級(jí)信息一覽表學(xué)號(hào)姓名性別出生日期001王麗玲女1987-2-3音樂(lè)002女1908-7-16武術(shù)003李山男1990-12-20足球004顧小月19S9-10-23詩(shī)就005男1988-6-14古詩(shī)詞006男19S7-2-15扌非球007舅1991*4-3乒乓球008吳麗麗1992-12-23羽毛球009張渤男1991-9-11盪球010黃樂(lè)樂(lè)女1989-6-1S誨泳1 1、知識(shí)準(zhǔn)備

11、（教師講解）教師闡述講解表格的作用，一方面可以顯示數(shù)據(jù)，另外一個(gè)主要的用途可以進(jìn) 行網(wǎng)頁(yè)布局，尤其是網(wǎng)站后臺(tái)界面的布局。（1 1）表格構(gòu)成表格的概念：是用于在網(wǎng)頁(yè)上顯示表格式數(shù)據(jù)，對(duì)文本、圖像等進(jìn)行布局 的強(qiáng)有力的工具。表格的構(gòu)成：由行列交叉的單元格構(gòu)成。（2 2）表格屬性表格屬性設(shè)置直接影響表格在網(wǎng)頁(yè)中的顯示效果，進(jìn)而影響網(wǎng)頁(yè)的布局效 果。教師操作講解：表格屬性設(shè)置主要包括表格的寬度、高度、填充、間距、 對(duì)齊方式、邊框、背景顏色、邊框顏色、背景圖像等。（3 3）單元格屬性教師講解表格的 構(gòu) 成、表格屬性和單元 格屬性，提醒學(xué)生對(duì) 關(guān)鍵知識(shí)點(diǎn)進(jìn)行記錄。單元項(xiàng)目歸納和總結(jié)【約 5 5 分鐘】教師

12、采用互動(dòng)提 問(wèn) 的方式進(jìn)行知識(shí) 的 歸納和總結(jié)，并強(qiáng)調(diào) 重點(diǎn)和難點(diǎn)知識(shí)。Dreamweaver 網(wǎng)頁(yè)設(shè)計(jì)教案9行屬性、列屬性和單元格屬性(4)(4)創(chuàng)建表格通過(guò)對(duì)話框界面操作創(chuàng)建表格教師通過(guò)設(shè)計(jì)視 圖 和代碼視圖對(duì)創(chuàng) 建 表格的關(guān)鍵知識(shí)進(jìn) 行操作和講解，做到 有的放矢，為網(wǎng)站后 天的搭建做好準(zhǔn)備。通過(guò) HTMLHTML 代碼創(chuàng)建表格格式代碼如下：?jiǎn)卧駜?nèi)的內(nèi)容教師通過(guò)手動(dòng)和代碼兩種方式講解下表的創(chuàng)建過(guò)程:(5(5)操作表格教師演示講解表格的常用操作:教師采用分組 競(jìng)爭(zhēng)的策略，選 擇出兩組完成 表格的創(chuàng)建，作 為平時(shí)小組成 績(jī)進(jìn)行記錄。對(duì)學(xué)生的操作進(jìn)行點(diǎn)評(píng)。1選擇整個(gè)表格2選擇行例3選擇單元格D

13、reamweaver 網(wǎng)頁(yè)設(shè)計(jì)教案10Dreamweaver 網(wǎng)頁(yè)設(shè)計(jì)教案114添加行/ /列5刪除行例6拆分單元格7合并單元格8表格應(yīng)用要求學(xué)生體驗(yàn)和 記 錄合并和拆分單 元 格的兩個(gè)重要屬性：colspacolspa n-n-跨歹U Urowssparowsspa n-n-跨行教師引導(dǎo)學(xué)生完成案例 6-16-1 的制作教師演示講解案例 6-26-2 細(xì)線表格的制作，總結(jié)案例的知識(shí)點(diǎn)(表 格背景色和單元格背景色的設(shè)置)(6(6)表格布局由于 CSS+DIVCSS+DIV 布局靈活性和網(wǎng)頁(yè)訪問(wèn)速度遠(yuǎn)遠(yuǎn)優(yōu)于表格布局，因此，對(duì)于大型網(wǎng)站和符合 Web2.0Web2.0 技術(shù)規(guī)范網(wǎng)站，強(qiáng)烈推薦采用C

14、SS+DIVCSS+DIV 布局。(7 7) CSSCSS 修飾表格通過(guò)colorcolor 屬性、backgroundbackground 屬性和 borderborder 屬性等設(shè)置，以提升表格的外觀顯示效果。2 2、項(xiàng)目實(shí)施一實(shí)施 -(1 1)利用表格完成頁(yè)面布局教師從分組中找出 1-21-2 名學(xué)生完成【圖 6-176-17 學(xué)生信息表網(wǎng)頁(yè)效果】中表格的創(chuàng)建。學(xué)學(xué)生生信息議信息議學(xué)號(hào)姓名性別出生日期個(gè)人愛(ài)好學(xué)號(hào)姓名性別出生日期個(gè)人愛(ài)好35029001李曉敏女李曉敏女1999-6 8羽毛球羽毛球35029002張立志男張立志男19先先- -12-:5足球足球35029003陳麗陳麗 女女

15、1999-3-18繪回繪回從小組中尋找 1-21-2 名 學(xué)生完成細(xì)線表 格 的制作，體驗(yàn)表格及 表格屬性的強(qiáng)大功教師講解 CSSCSS 修飾 表格的關(guān)鍵內(nèi)容，提 醒學(xué)生做好筆記。教師采用激勵(lì) 的方式，讓學(xué)生 主動(dòng)參與到項(xiàng) 目實(shí)施中。教師做好學(xué)生 平時(shí)成績(jī)的記錄。Dreamweaver 網(wǎng)頁(yè)設(shè)計(jì)教案12(2(2)使用 CSSCSS 設(shè)置表格樣式教師在圖 6-176-17 的基礎(chǔ)上，以圖 6-336-33 為目標(biāo)講解 CSSCSS 設(shè)置表格樣式Dreamweaver 網(wǎng)頁(yè)設(shè)計(jì)教案131教師講解使用 CSSCSS 設(shè)置表格顏色。CSSCSS 通過(guò) colorcolor 屬性設(shè)置表格中文 字的顏色，

16、通過(guò)backgroundbackground 屬性修飾表格的背景色。2教師講解使用 CSSCSS 設(shè)置表格邊框。CSSCSS 通過(guò) borderborder 屬性設(shè)置表格的邊 框樣式。教師從分組中找出 1-21-2 名學(xué)生完成圖 6-176-17 表格樣式和邊框樣式的設(shè)置，最 終效果如圖 6-36-33 3所示。教師操作演示各行變色表格的制作過(guò)程，效果如圖6-346-34 所示。1核心知識(shí)點(diǎn)：表格的奇數(shù)和偶數(shù)行分別設(shè)置不同的樣式。2注意：要遵循表格的結(jié)構(gòu)與樣式分開(kāi)的原則班級(jí)信息一覽表二、單元小結(jié)與項(xiàng)目單元任務(wù)1.1.項(xiàng)目單元小結(jié)通過(guò)互動(dòng)提問(wèn)的方式總結(jié)歸納本項(xiàng)目單元內(nèi)容，再次強(qiáng)調(diào)重點(diǎn)和難點(diǎn)管理表

17、格的常用操作及表格樣式的設(shè)置。重點(diǎn)是表格構(gòu)成、操作表格和利用 CSSCSS 設(shè)置表格樣式。難點(diǎn)是利用 CSSCSS 設(shè)置表格樣式。要求學(xué)生在實(shí)際應(yīng)用中提高對(duì)于表格的掌握程度。2.2.項(xiàng)目單元任務(wù)完成教材“考核評(píng)價(jià)”部分表格題目的相關(guān)內(nèi)容教師以引導(dǎo)為主，由 學(xué)生完成 6-336-33 表格 的搭建。-f-F姓若性別岀生日朋爰好001壬麗玲19S7-2-3音樂(lè)002褪萌女1988-7-16武術(shù)003李山男1990-12-20足球004顧小月女1989-10-23詩(shī)歆005男1988-614古詩(shī)詞006養(yǎng)凱男1987-2-15排球007男1991-4-34 乓球008昊麗麗女1992*1223羽毛球009勇籃球