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

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

2、學(xué)習(xí)態(tài)度，重視基礎(chǔ)知識的學(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)頁設(shè)計教案2教學(xué)方法O理論講授O小組討論項目教學(xué)任務(wù)驅(qū)動O參觀教學(xué)O模擬教學(xué) 實(shí)驗(yàn)實(shí)訓(xùn)O演示教學(xué)O其他素材 資源O文本素材O實(shí)物展示PPTPPT 幻燈片O音頻素材O視頻素材O動畫素材圖形/ /圖像素材O網(wǎng)絡(luò)資源O其他Dreamweaver 網(wǎng)頁設(shè)計教案教學(xué)設(shè)計1 1、 通過教師演示“計算機(jī)系后臺登錄頁面”

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

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

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

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

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

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

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

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

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

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

14、SS+DIVCSS+DIV 布局。(7 7) CSSCSS 修飾表格通過colorcolor 屬性、backgroundbackground 屬性和 borderborder 屬性等設(shè)置，以提升表格的外觀顯示效果。2 2、項目實(shí)施一實(shí)施 -(1 1)利用表格完成頁面布局教師從分組中找出 1-21-2 名學(xué)生完成【圖 6-176-17 學(xué)生信息表網(wǎng)頁效果】中表格的創(chuàng)建。學(xué)學(xué)生生信息議信息議學(xué)號姓名性別出生日期個人愛好學(xué)號姓名性別出生日期個人愛好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é)生做好筆記。教師采用激勵 的方式，讓學(xué)生 主動參與到項 目實(shí)施中。教師做好學(xué)生 平時成績的記錄。Dreamweaver 網(wǎng)頁設(shè)計教案12(2(2)使用 CSSCSS 設(shè)置表格樣式教師在圖 6-176-17 的基礎(chǔ)上，以圖 6-336-33 為目標(biāo)講解 CSSCSS 設(shè)置表格樣式Dreamweaver 網(wǎng)頁設(shè)計教案131教師講解使用 CSSCSS 設(shè)置表格顏色。CSSCSS 通過 colorcolor 屬性設(shè)置表格中文 字的顏色，

16、通過backgroundbackground 屬性修飾表格的背景色。2教師講解使用 CSSCSS 設(shè)置表格邊框。CSSCSS 通過 borderborder 屬性設(shè)置表格的邊 框樣式。教師從分組中找出 1-21-2 名學(xué)生完成圖 6-176-17 表格樣式和邊框樣式的設(shè)置，最 終效果如圖 6-36-33 3所示。教師操作演示各行變色表格的制作過程，效果如圖6-346-34 所示。1核心知識點(diǎn)：表格的奇數(shù)和偶數(shù)行分別設(shè)置不同的樣式。2注意：要遵循表格的結(jié)構(gòu)與樣式分開的原則班級信息一覽表二、單元小結(jié)與項目單元任務(wù)1.1.項目單元小結(jié)通過互動提問的方式總結(jié)歸納本項目單元內(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)用中提高對于表格的掌握程度。2.2.項目單元任務(wù)完成教材“考核評價”部分表格題目的相關(guān)內(nèi)容教師以引導(dǎo)為主，由 學(xué)生完成 6-336-33 表格 的搭建。-f-F姓若性別岀生日朋爰好001壬麗玲19S7-2-3音樂002褪萌女1988-7-16武術(shù)003李山男1990-12-20足球004顧小月女1989-10-23詩歆005男1988-614古詩詞006養(yǎng)凱男1987-2-15排球007男1991-4-34 乓球008昊麗麗女1992*1223羽毛球009勇籃球