1、Dreamweaver網頁設計教案河北工業(yè)職業(yè)技術學院靜態(tài)網頁制作(Dreamweaver ) 課程教案首頁授課教師張亞靜班級16網絡訂單1班學時2授課日期主題或任務以“個人主頁”項目為驅動的階段復習課型考試授課地點。多媒體教室。企業(yè)。專業(yè)教室實訓室教學目標知識目標：1、回顧常用標簽的用法2、強化樣式的綜合應用2、理解盒子模型的意義3、掌握浮動布局和定位技能目標：1、通過CSS+DIV技術設計法實現一個完整網站項目的創(chuàng)建2、靈活運用盒子模型靈活設計網頁布局3、靈活運用浮動和定位布局貞囿素質目標：1、培養(yǎng)學生團隊合作意識2、培學生的設計和創(chuàng)意能力，提升學生對于網頁設計的熱情學習內容以“個人主頁”

2、完整項目為驅動進行階段復習：1、網站設計流程2、規(guī)劃網站目錄結構3、利用HTML基本標簽創(chuàng)建網頁結構4、利用浮動或定位設計頁面布局5、通過CSS樣式修飾6、進行網站測試重點難點重點：利用浮動或定位設計貝囿布局通過CSS樣式修飾難點：利用浮動或定位設計貝囿布局教學方法。理論講授。小組討論 項目教學 任務驅動。參觀教學。模擬教學 實驗實訓。演示教學。其他X 資源。文本素材。實物展示PPT幻燈片。音頻素材。視頻素材。動畫素材圖形/圖像素材。網絡資源。其他Dreamweaver網頁設計教案教學設計1、通過教師演示項目，米用項目驅動法引導學生進行階段知識的復習和回顧，強化關鍵知識的應用；2、讓學生對完整

3、網站首頁的設計和制作有i一個整體認識，提升學生進行真實項目開發(fā)的經驗和興趣。學習評價行為表現。課堂作業(yè)。測驗測試制作作品。其他作業(yè)題目利用CSS+DIV自由設計普制作“個人首頁”要求：網頁結構和樣式分離網站目錄結構規(guī)劃合理代碼格式規(guī)范雙語教學Banner head link navigation foot系（部）：計算機技術系教研室：網絡技術教研室主任簽字：_年 月 日Dreamweaver網頁設計教案學習單元六 以“個人主頁”項目為驅動的階段復習授課內容：以“個人主頁”項目為驅動的階段復習學時：2學時（90分鐘）教學目標：知識目標：回顧常用標簽的用法強化樣式的綜合應用理解盒子模型的意義掌握浮

4、動布局和定位技能目標：通過CSS+DIV技術設計并實現一個完整網站項目的創(chuàng)建靈活運用盒子模型靈活設計網頁布局靈活運用浮動和定位布局頁面素質目標：培養(yǎng)學生團隊合作意識培學生的設計和創(chuàng)意能力，提升學生對于網頁設計的熱情教學內容：1、網站設計流程2、規(guī)劃網站目錄結構3、利用HTML基本標簽創(chuàng)建網頁結構4、利用浮動或定位設計頁面布局5、通過CSS樣式修飾6、進行網站測試教學重點：利用浮動或定位設計頁面布局通過CSS樣式修飾教學難點:利用浮動或定位設計頁面布局Dreamweaver網頁設計教案教學方法和策略：教學方法：采用項目驅動法、分組競爭法、案例演示法提高學生的學習興趣教學策略：通過分組討論、競爭的

5、方式激發(fā)學生的學習熱情教學設計思路：1、通過教師演示項目，采用項目驅動法引導學生進行階段知識的復習和回顧，強化關鍵知識的應用；2、讓學生對完整網站首頁的設計和制作有一個整體認識，提升學生進行真實項目開發(fā)的經驗和興趣。授課內容提綱：一、復習舊課導出階段項目1、課程回顧(1)教師綜述在前五個學習單元的課程中， 我們分階段的以“計算機技術系網站” 首頁項目為 驅動完成了網站首頁的制作， 對于網站設計有了初步的認識和了解， 經過階段學習， 同學們已經具備了獨立設計和制作網站首頁的能力。(2)利用項目互動提問回顧知識點網站設計流程？盒子模型的關鍵屬性？常用的定位方式有幾種？(3)互動總結教師通過與學生互

6、動溝通，進行知識的歸納：網站的設計流程包括需求分析、制作網頁效果圖、創(chuàng)建和設計網站、測試和發(fā)布等幾個環(huán)節(jié)；盒子模型的關鍵屬性包括 content border、padding和margin四個屬性。常用的布局方式有浮動和定位。2、教師首先簡述本項目單元重點、難點，讓學生有重點的聽講。課程回顧：【約10分鐘】通過互動的方 式回顧之前的 學習內容，為階 段項目的制作 做好準備。學生通過互動 方式回答教師 提出的問題。認真聽取教師 的總結，明確本 項目單元的學 習任務。4Dreamweaver網頁設計教案教師簡述本項目單元的重點、難點，讓學生有帶著任務、有重點跟隨老師授課。1、網站設計流程2、規(guī)劃網

7、站目錄結構3、利用HTML基本標簽創(chuàng)建網頁結構4、利用浮動或定位設計頁面布局（重點和難點）5、通過CSS樣式修飾（重點）6、進行網站測試4、本學習單元總體目標（教師總結）通過本項目單元的學習，學生對階段只是做一整體實踐和應用，讓學生感受階 段學習成果的喜悅，為后續(xù)知識的學習奠定基礎，并提升學習的興趣和動力。二、項目實施教師簡述項目單元教學目標和教學內容，明確本項目單元教學重點和難點教學目標通過“個人主頁”真實完整網站首頁的制作，對知識進行階段復習和綜合 應用明確網頁結構與表現分離的意義強化盒子模型的應用熟練應用CSS+DIV技術對頁面進行布局能夠通過浮動或定位實現頁面的布局培養(yǎng)學生的團隊合作意

8、識教學內容1、網站設計流程2、規(guī)劃網站目錄結構3、利用HTML基本標簽創(chuàng)建網頁結構4、利用浮動或定位設計頁面布局（重點和難點）5、通過CSS樣式修飾（重點）6、進行網站測試明確本項目單 元的總體學習 目標。帶著目標 和任務學習。對學習目標形 成一個初步地、 大致地、總體的 知識輪廓。新課講解：【約65分鐘】.項目引入思路：教師利用“個人 主 頁”項目為驅動，進 行階段知識回顧、復 習和綜合應用。.思路指導：通過“個人主頁”項 目制作，完成一個網 站首頁的整個設 計 流程。.任務目標：熟練“個人主頁”首 頁的設計和創(chuàng)建。（一）工作任務一：設計和制作“個人主頁”效果圖Dreamweaver網頁設計

9、教案【任務背景】某同學要設計一個 “個人主頁”，現已由網站策劃人員先期分析了網站的目的、 功能定位及內容規(guī)劃。并根據功能定位先行設計了網站效果圖?！救蝿找蟆扛鶕c用戶溝通和交流做好的需求分析，設計和制作“個人主頁”效果圖?！救蝿辗治觥坎捎盟{色主色調，體現客戶簡潔實用的目標?！救蝿諏嵤看瞬糠钟捎谠?課前已作為課 前任務做好了 前期的準備工 作，因此，直接 在ps中實現效 果圖的制作。時刻保持與教 師的互動。思路跟教師保 持一致，保證學 習效果。在PS中設計“個人主頁”效果圖，具體實現過程不做詳解，如下圖 1所示:提醒學生出圖的 方 法，注意使用切片工 具對大圖進行切割。圖1頁面效果圖(二)工

10、作任務二：分析“個人主頁”首頁整體結構【任務背景】某學院計算機技術系要建立本系部網站，現已由網站策劃人員先期分析了網站 的目的、功能定位及內容規(guī)劃，并根據功能定位先行設計了網站效果圖?！救蝿找蟆扛鶕呀浭占玫乃夭募熬W站規(guī)劃，進行網站的整體頁面布局?！救蝿辗治觥啃Ч麍D導出之后，我們就可以使用這些素材在Dreamweaver著手進行布局了，現在的布局技術包括表格布局和Web標準布局，也就是俗稱的 DIV+CSS布局，本項目我們主要使用 Web標準來布局頁面。【任務實施】(1)在具體布局之前，首先分析一下頁面的構成，目的是明確所需要創(chuàng)建頁面的布局結構，如下圖2所示。Dreamweaver網頁設計

11、教案互動提問，整個頁面 區(qū)塊如何劃分？教師提醒：合理進行 區(qū)塊劃分將有利 于 后期區(qū)塊內容得 添 及樣式的的設計 和 制作。圖2頁面的布局形式(2)打開在上一章節(jié)中已經創(chuàng)建好的名為grzyWeb的站點。 規(guī)劃站點目錄結構，建立 CSS和images文件夾，將在 ps中導出的圖片放入 images文件夾。 創(chuàng)建網站首頁，命名為index.html ”，將其保存在站點根目錄下。(5)創(chuàng)建樣式表文件“ index.css，將其保存在站點根目錄下的 CSS文件夾中。網站結構在設計 過 程中，一定要保證網 頁結構與表現進 行 分離，便于后期網站 的維護。(6)將“index.css”和網頁文件“inde

12、x.html”進行了關聯。核心代碼如下：(7)首先根據分析得出的頁面結構搭建整個網頁的頁面布局。在 index.htmnl。(三)工作任務三：制作“個人主頁”首頁頁眉【任務背景】在上一工作任務中，我們已經實現了本項目DIV框架結構布局，但是效果離我們要實現的網頁布局效果還相差甚遠，僅僅依靠DIV標簽是無法實現頁面布局的，我們必須要配合 CSS來對網站的各個部分進行更加精確的控制?！救蝿找蟆緾SS中首選的讓 元素水平居中的 方法將元素的 margin-left 和 margin-right 屬性 設置為auto即可。通過CSS規(guī)則來精確控制網站首頁頁眉部分，從而實現頁面布局效果?！救蝿辗治觥客?/p>

13、成ID名稱為top的DIV區(qū)塊的CSS設置?！救蝿諏嵤?1)首先切換到樣式表文件“index.css”,添加下列樣式代碼對整個頁面的樣式進 行定義。7Dreamweaver網頁設計教案body(padding:0;margin:0;background:url(./images/bg.gif);)(1)接下來在樣式表中定義“ top”的樣式，也就是定義頁眉的結構，添加下列樣式 代碼：#top,#nav,#mainmargin:0 auto; /*將頁面中的三個大區(qū)塊設置水平居中 */)#bannerwidth:600px;height:133px; )(2)在“index.html”中，在網

14、頁的主題部分加入頁眉部分的圖片“banner.jpg”文件。代碼如下： 頁面效果如圖3所示：圖3 “個人主頁”頁眉效果圖(四)工作任務四：制作“個人主頁”首頁導航條【任務要求】通過CSS規(guī)則來精確控制網站首頁導航欄部分，從而實現頁面布局效果?！救蝿辗治觥客瓿蒊D名稱為nav的DIV區(qū)塊的CSS設置。核心思想是利用列表實現導航條 內容的添加，在通過 css樣式實現布局的改變。【任務詳解】(1)在名稱為“ nav”的DIV結構中輸入以下代碼8在實際使用中，我 們可以為這些需 要居中的元素創(chuàng) 建一個起容器作 用的div。需要特 別注意的一點就 是，必須為該容器 指定寬度。此部分符合樣式 是為了對代碼

15、進 行優(yōu)化，避免累 贅，提高代碼的執(zhí) 行效率。此部分由于不涉 及二級頁面的制 作，將所有的導航 目標設置為空鏈Dreamweaver網頁設計教案接。首 頁 心情日記 Free一起走到I 從明天起 紙飛機 下一站 說明：a:link是超級鏈 接的初始狀態(tài)。a:hover是把鼠 標放上去時懸停 的 狀態(tài)。a:active是鼠標 點擊時，即鼠標左鍵 點擊鏈接對象與 釋 放鼠標右鍵之間 很 短暫樣式效果。a:visited是訪問 過后的狀態(tài)。一般網站需要 設置的是a:link、 “a:visited、 ”Whover ” 三種狀態(tài)， a:active ” 狀態(tài)設置較少。/u(2)首先切換到樣式表文件“

16、 index.css，添加下列樣式代碼對導航條的樣式進行 定義。#nav width:600px; height:22px; background-color:#90bcff; margin-top:-15px;text-align:center; #nav ullist-style-type:none;margin-left:-15px;#nav li floatleft;width:76px;text-align:center;line-height:22px; a:link color:#00F;text-decoration:none;a:hover color:#F00;text-d

17、ecoration:underline;a:acktivecolor:#000;text-decoration:none;a:visited background-color: #000;頁面效果如圖4所示：Dreamweaver網頁設計教案圖4 “個人主頁”導航條效果圖顏色測試法是網頁布局中最常用的測試方法?；犹釂栐颍?總結：不占尺寸，但 是還可以看到區(qū) 塊 的范圍。（五）工作任務五：制作“個人主頁”首頁主內容區(qū)【任務要求】通過CSS規(guī)則來精確控制網站首頁主內容區(qū)域，從而實現頁面布局效果?！救蝿辗治觥客瓿删W站主內容區(qū)域布局設計及內容版式設計，此部分我們將完成ID名稱為divMain的DI

18、V區(qū)塊的CSS設置?！救蝿赵斀狻吭跇邮皆O置過程中，注重代碼的效率， 此 部分注意提醒學生。1）兩張圖片的樣式 相同2）兩個圖片的標題 相同3）兩個圖片的文字描述相同（1）打開“ index.css”文件，在樣式表中添在名稱為“ divMain ”樣式，并對其樣式 的具體設置。#divMainwidth:600px;height:800px;Background:red; /*添加區(qū)塊測試顏色*/（2）頁面效果如圖5所示：10Dreamweaver網頁設計教案由于此部分樣式 比 較繁多，強調學生一 定要邊做邊測試，以 瀏覽器效果為準。圖5 “個人主頁”主內容區(qū)效果圖(3)添加主體內容左區(qū)塊的頁面

19、結構，其代碼如下:img src=images/selfpic.jpg”定是美麗的，但變幻無常更為美麗。width=93我的日記本他們彼此深信,心情軌跡 height=123 class=imgLeft” /是瞬間迸發(fā)的熱情讓他們相遇。這樣的確width=93height=103董事長的一切都讓人既羨慕又忌妒，但更讓人受不了的是,提醒學生：注意代碼的格式，要有層次感。有一天，上蒼忽然賜給他一個神奇的禮物 在“ index.css”樣式表中添在名稱為“ divLeft ”樣式，并對其樣式的具體設置。#divLeft width:180px; height:580px; background:#D

20、2E7FF; float:left;text-align:center; padding-left:10px; padding-right:10px;.imgLeftborder:1px solid #09C; margin-top:15px;.leftTextTitle size:10px; color: #66F; font-weight:bold;.leftTextContent11Dreamweaver網頁設計教案Bacground 屬性是一 個符合屬性，可以同 時設置背景的多個屬性，中間通過空格 來連接不同屬性值。text-align:left;)(5)頁面效果如圖5所示:圖5 “個

21、人主頁”主內容區(qū)左區(qū)塊效果圖(6)添加主體內容右區(qū)塊的頁面結構，其代碼如下：介紹 我努力的抓緊世界，最后卻仍被世界淘汰，如果一開始就松手，我會不那么傷心嗎？你說，親愛的孩子，世事難料，隨它去吧！照相本子 關于童年，你記住了什么？兩歲時，我擁有一只巨大的粉紅豬，它總在我嚎啕大哭時逗我笑。三歲時，我騎著小木馬一路搖到外婆家，它不喝水也不吃草。 四歲時，我離家出走，在公車上睡著了，最后是太空超人送我回家。我真的沒騙你，我通通都記得，還有照片為證。地下鐵 天使在地下鐵的入口，單元項目歸納和總結【約5分鐘】教師采用互動提 問的方式進行知識 的歸納和總結，并強調 重點和難點知識。布置單元項目任務和我說再見的那一年， 我漸漸看不見了。十五歲生日的那年秋天早晨, 窗外下著毛毛雨， 我喂好我的貓。 六點零五分，我走進地下鐵。向左走向右走 Theyre both convinced that a sudden passi