0301--靜態(tài)網(wǎng)頁制作(Dreamweaver)-以“個(gè)人.doc

Dreamweaver網(wǎng)頁設(shè)計(jì)教案河北工業(yè)職業(yè)技術(shù)學(xué)院靜態(tài)網(wǎng)頁制作（Dreamweaver）課程教案首頁授課教師張亞靜班級(jí)16網(wǎng)絡(luò)訂單1班學(xué)時(shí)2授課日期主題或任務(wù)以“個(gè)人主頁”項(xiàng)目為驅(qū)動(dòng)的階段復(fù)習(xí)課型考試授課地點(diǎn)多媒體教室企業(yè)專業(yè)教室實(shí)訓(xùn)室教學(xué)目標(biāo)知識(shí)目標(biāo)：1、 回顧常用標(biāo)簽的用法2、 強(qiáng)化樣式的綜合應(yīng)用2、理解盒子模型的意義3、掌握浮動(dòng)布局和定位技能目標(biāo)：1、通過CSS+DIV技術(shù)設(shè)計(jì)并實(shí)現(xiàn)一個(gè)完整網(wǎng)站項(xiàng)目的創(chuàng)建2、靈活運(yùn)用盒子模型靈活設(shè)計(jì)網(wǎng)頁布局3、靈活運(yùn)用浮動(dòng)和定位布局頁面素質(zhì)目標(biāo)：1、 培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí)2、 培學(xué)生的設(shè)計(jì)和創(chuàng)意能力，提升學(xué)生對(duì)于網(wǎng)頁設(shè)計(jì)的熱情學(xué)習(xí)內(nèi)容以“個(gè)人主頁”完整項(xiàng)目為驅(qū)動(dòng)進(jìn)行階段復(fù)習(xí)：1、網(wǎng)站設(shè)計(jì)流程2、規(guī)劃網(wǎng)站目錄結(jié)構(gòu)3、利用HTML基本標(biāo)簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)4、利用浮動(dòng)或定位設(shè)計(jì)頁面布局5、通過CSS樣式修飾6、進(jìn)行網(wǎng)站測(cè)試重點(diǎn)難點(diǎn)重點(diǎn)： 利用浮動(dòng)或定位設(shè)計(jì)頁面布局 通過CSS樣式修飾難點(diǎn)： 利用浮動(dòng)或定位設(shè)計(jì)頁面布局教學(xué)方法理論講授 小組討論 項(xiàng)目教學(xué)任務(wù)驅(qū)動(dòng) 參觀教學(xué) 模擬教學(xué)實(shí)驗(yàn)實(shí)訓(xùn) 演示教學(xué) 其他 素材資源文本素材實(shí)物展示PPT幻燈片音頻素材視頻素材動(dòng)畫素材圖形/圖像素材網(wǎng)絡(luò)資源其他教學(xué)設(shè)計(jì)1、 通過教師演示項(xiàng)目，采用項(xiàng)目驅(qū)動(dòng)法引導(dǎo)學(xué)生進(jìn)行階段知識(shí)的復(fù)習(xí)和回顧，強(qiáng)化關(guān)鍵知識(shí)的應(yīng)用；2、 讓學(xué)生對(duì)完整網(wǎng)站首頁的設(shè)計(jì)和制作有一個(gè)整體認(rèn)識(shí)，提升學(xué)生進(jìn)行真實(shí)項(xiàng)目開發(fā)的經(jīng)驗(yàn)和興趣。學(xué)習(xí)評(píng)價(jià)行為表現(xiàn) 課堂作業(yè) 測(cè)驗(yàn)測(cè)試 制作作品 其他 作業(yè)題目利用CSS+DIV自由設(shè)計(jì)并制作“個(gè)人首頁”要求： 網(wǎng)頁結(jié)構(gòu)和樣式分離 網(wǎng)站目錄結(jié)構(gòu)規(guī)劃合理 代碼格式規(guī)范雙語教學(xué) Banner head link navigation foot 系（部）： 計(jì)算機(jī)技術(shù)系 教研室： 網(wǎng)絡(luò)技術(shù) 教研室主任簽字： 年 月 日13學(xué)習(xí)單元六 以“個(gè)人主頁”項(xiàng)目為驅(qū)動(dòng)的階段復(fù)習(xí)授課內(nèi)容：以“個(gè)人主頁”項(xiàng)目為驅(qū)動(dòng)的階段復(fù)習(xí)學(xué)時(shí)：2學(xué)時(shí)（90分鐘）教學(xué)目標(biāo)：知識(shí)目標(biāo)： 回顧常用標(biāo)簽的用法 強(qiáng)化樣式的綜合應(yīng)用 理解盒子模型的意義 掌握浮動(dòng)布局和定位技能目標(biāo)： 通過CSS+DIV技術(shù)設(shè)計(jì)并實(shí)現(xiàn)一個(gè)完整網(wǎng)站項(xiàng)目的創(chuàng)建 靈活運(yùn)用盒子模型靈活設(shè)計(jì)網(wǎng)頁布局 靈活運(yùn)用浮動(dòng)和定位布局頁面素質(zhì)目標(biāo)： 培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí) 培學(xué)生的設(shè)計(jì)和創(chuàng)意能力，提升學(xué)生對(duì)于網(wǎng)頁設(shè)計(jì)的熱情教學(xué)內(nèi)容：1、網(wǎng)站設(shè)計(jì)流程2、規(guī)劃網(wǎng)站目錄結(jié)構(gòu)3、利用HTML基本標(biāo)簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)4、利用浮動(dòng)或定位設(shè)計(jì)頁面布局5、通過CSS樣式修飾 6、進(jìn)行網(wǎng)站測(cè)試教學(xué)重點(diǎn)：n 利用浮動(dòng)或定位設(shè)計(jì)頁面布局n 通過CSS樣式修飾教學(xué)難點(diǎn)：n 利用浮動(dòng)或定位設(shè)計(jì)頁面布局教學(xué)方法和策略：u 教學(xué)方法： 采用項(xiàng)目驅(qū)動(dòng)法、分組競(jìng)爭法、案例演示法提高學(xué)生的學(xué)習(xí)興趣u 教學(xué)策略： 通過分組討論、競(jìng)爭的方式激發(fā)學(xué)生的學(xué)習(xí)熱情教學(xué)設(shè)計(jì)思路：1、 通過教師演示項(xiàng)目，采用項(xiàng)目驅(qū)動(dòng)法引導(dǎo)學(xué)生進(jìn)行階段知識(shí)的復(fù)習(xí)和回顧，強(qiáng)化關(guān)鍵知識(shí)的應(yīng)用；2、 讓學(xué)生對(duì)完整網(wǎng)站首頁的設(shè)計(jì)和制作有一個(gè)整體認(rèn)識(shí)，提升學(xué)生進(jìn)行真實(shí)項(xiàng)目開發(fā)的經(jīng)驗(yàn)和興趣。授課內(nèi)容提綱：1、 復(fù)習(xí)舊課導(dǎo)出階段項(xiàng)目1、課程回顧（1）教師綜述 在前五個(gè)學(xué)習(xí)單元的課程中，我們分階段的以“計(jì)算機(jī)技術(shù)系網(wǎng)站”首頁項(xiàng)目為驅(qū)動(dòng)完成了網(wǎng)站首頁的制作，對(duì)于網(wǎng)站設(shè)計(jì)有了初步的認(rèn)識(shí)和了解，經(jīng)過階段學(xué)習(xí)，同學(xué)們已經(jīng)具備了獨(dú)立設(shè)計(jì)和制作網(wǎng)站首頁的能力。（2）利用項(xiàng)目互動(dòng)提問回顧知識(shí)點(diǎn) l 網(wǎng)站設(shè)計(jì)流程？l 盒子模型的關(guān)鍵屬性？l 常用的定位方式有幾種？（3）互動(dòng)總結(jié)教師通過與學(xué)生互動(dòng)溝通，進(jìn)行知識(shí)的歸納：l 網(wǎng)站的設(shè)計(jì)流程包括需求分析、制作網(wǎng)頁效果圖、創(chuàng)建和設(shè)計(jì)網(wǎng)站、測(cè)試和發(fā)布等幾個(gè)環(huán)節(jié)；l 盒子模型的關(guān)鍵屬性包括content、border、padding和margin四個(gè)屬性。l 常用的布局方式有浮動(dòng)和定位。 2、教師首先簡述本項(xiàng)目單元重點(diǎn)、難點(diǎn)，讓學(xué)生有重點(diǎn)的聽講。 教師簡述本項(xiàng)目單元的重點(diǎn)、難點(diǎn)，讓學(xué)生有帶著任務(wù)、有重點(diǎn)跟隨老師授課。1、網(wǎng)站設(shè)計(jì)流程2、規(guī)劃網(wǎng)站目錄結(jié)構(gòu)3、利用HTML基本標(biāo)簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)4、利用浮動(dòng)或定位設(shè)計(jì)頁面布局（重點(diǎn)和難點(diǎn)）5、通過CSS樣式修飾（重點(diǎn)） 6、進(jìn)行網(wǎng)站測(cè)試4、本學(xué)習(xí)單元總體目標(biāo)（教師總結(jié)） 通過本項(xiàng)目單元的學(xué)習(xí)，學(xué)生對(duì)階段只是做一整體實(shí)踐和應(yīng)用，讓學(xué)生感受階段學(xué)習(xí)成果的喜悅，為后續(xù)知識(shí)的學(xué)習(xí)奠定基礎(chǔ)，并提升學(xué)習(xí)的興趣和動(dòng)力。二、項(xiàng)目實(shí)施 教師簡述項(xiàng)目單元教學(xué)目標(biāo)和教學(xué)內(nèi)容，明確本項(xiàng)目單元教學(xué)重點(diǎn)和難點(diǎn)教學(xué)目標(biāo)l 通過“個(gè)人主頁”真實(shí)完整網(wǎng)站首頁的制作，對(duì)知識(shí)進(jìn)行階段復(fù)習(xí)和綜合應(yīng)用l 明確網(wǎng)頁結(jié)構(gòu)與表現(xiàn)分離的意義l 強(qiáng)化盒子模型的應(yīng)用l 熟練應(yīng)用CSS+DIV技術(shù)對(duì)頁面進(jìn)行布局l 能夠通過浮動(dòng)或定位實(shí)現(xiàn)頁面的布局l 培養(yǎng)學(xué)生的團(tuán)隊(duì)合作意識(shí)教學(xué)內(nèi)容1、網(wǎng)站設(shè)計(jì)流程2、規(guī)劃網(wǎng)站目錄結(jié)構(gòu)3、利用HTML基本標(biāo)簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)4、利用浮動(dòng)或定位設(shè)計(jì)頁面布局（重點(diǎn)和難點(diǎn)）5、通過CSS樣式修飾（重點(diǎn)） 6、進(jìn)行網(wǎng)站測(cè)試（一）工作任務(wù)一：設(shè)計(jì)和制作“個(gè)人主頁”效果圖【任務(wù)背景】某同學(xué)要設(shè)計(jì)一個(gè)“個(gè)人主頁”，現(xiàn)已由網(wǎng)站策劃人員先期分析了網(wǎng)站的目的、功能定位及內(nèi)容規(guī)劃。并根據(jù)功能定位先行設(shè)計(jì)了網(wǎng)站效果圖。【任務(wù)要求】根據(jù)與用戶溝通和交流做好的需求分析，設(shè)計(jì)和制作“個(gè)人主頁”效果圖。【任務(wù)分析】采用藍(lán)色主色調(diào)，體現(xiàn)客戶簡潔實(shí)用的目標(biāo)?！救蝿?wù)實(shí)施】在PS中設(shè)計(jì)“個(gè)人主頁”效果圖，具體實(shí)現(xiàn)過程不做詳解，如下圖1所示：圖1 頁面效果圖（二）工作任務(wù)二：分析“個(gè)人主頁”首頁整體結(jié)構(gòu)【任務(wù)背景】某學(xué)院計(jì)算機(jī)技術(shù)系要建立本系部網(wǎng)站，現(xiàn)已由網(wǎng)站策劃人員先期分析了網(wǎng)站的目的、功能定位及內(nèi)容規(guī)劃，并根據(jù)功能定位先行設(shè)計(jì)了網(wǎng)站效果圖?！救蝿?wù)要求】根據(jù)已經(jīng)收集好的素材及網(wǎng)站規(guī)劃，進(jìn)行網(wǎng)站的整體頁面布局?！救蝿?wù)分析】效果圖導(dǎo)出之后，我們就可以使用這些素材在Dreamweaver著手進(jìn)行布局了，現(xiàn)在的布局技術(shù)包括表格布局和Web標(biāo)準(zhǔn)布局，也就是俗稱的DIV+CSS布局，本項(xiàng)目我們主要使用Web標(biāo)準(zhǔn)來布局頁面。【任務(wù)實(shí)施】(1) 在具體布局之前，首先分析一下頁面的構(gòu)成，目的是明確所需要?jiǎng)?chuàng)建頁面的布局結(jié)構(gòu)，如下圖2所示。圖2 頁面的布局形式(2) 打開在上一章節(jié)中已經(jīng)創(chuàng)建好的名為grzyWeb的站點(diǎn)。(3) 規(guī)劃站點(diǎn)目錄結(jié)構(gòu)，建立CSS和images文件夾，將在ps中導(dǎo)出的圖片放入images文件夾。(4) 創(chuàng)建網(wǎng)站首頁，命名為“index.html”，將其保存在站點(diǎn)根目錄下。(5) 創(chuàng)建樣式表文件“index.css”，將其保存在站點(diǎn)根目錄下的CSS文件夾中。(6) 將“index.css”和網(wǎng)頁文件“index.html”進(jìn)行了關(guān)聯(lián)。核心代碼如下：(7) 首先根據(jù)分析得出的頁面結(jié)構(gòu)搭建整個(gè)網(wǎng)頁的頁面布局。在index.htmnl。 （三）工作任務(wù)三：制作“個(gè)人主頁”首頁頁眉【任務(wù)背景】在上一工作任務(wù)中，我們已經(jīng)實(shí)現(xiàn)了本項(xiàng)目DIV框架結(jié)構(gòu)布局，但是效果離我們要實(shí)現(xiàn)的網(wǎng)頁布局效果還相差甚遠(yuǎn)，僅僅依靠DIV標(biāo)簽是無法實(shí)現(xiàn)頁面布局的，我們必須要配合CSS來對(duì)網(wǎng)站的各個(gè)部分進(jìn)行更加精確的控制?！救蝿?wù)要求】通過CSS規(guī)則來精確控制網(wǎng)站首頁頁眉部分，從而實(shí)現(xiàn)頁面布局效果?！救蝿?wù)分析】完成ID名稱為top的DIV區(qū)塊的CSS設(shè)置?！救蝿?wù)實(shí)施】(1) 首先切換到樣式表文件“index.css”，添加下列樣式代碼對(duì)整個(gè)頁面的樣式進(jìn)行定義。bodypadding:0;margin:0;background:url(./images/bg.gif);(1) 接下來在樣式表中定義“top”的樣式，也就是定義頁眉的結(jié)構(gòu)，添加下列樣式代碼：#top,#nav,#main margin:0 auto; /*將頁面中的三個(gè)大區(qū)塊設(shè)置水平居中*/#banner width:600px; height:133px; (2) 在“index.html”中，在網(wǎng)頁的主題部分加入頁眉部分的圖片“banner.jpg”文件。代碼如下： (3) 頁面效果如圖3所示：圖3 “個(gè)人主頁”頁眉效果圖（四）工作任務(wù)四：制作“個(gè)人主頁”首頁導(dǎo)航條【任務(wù)要求】通過CSS規(guī)則來精確控制網(wǎng)站首頁導(dǎo)航欄部分，從而實(shí)現(xiàn)頁面布局效果?！救蝿?wù)分析】完成ID名稱為nav的DIV區(qū)塊的CSS設(shè)置。核心思想是利用列表實(shí)現(xiàn)導(dǎo)航條內(nèi)容的添加，在通過css樣式實(shí)現(xiàn)布局的改變?！救蝿?wù)詳解】(1) 在名稱為“nav”的DIV結(jié)構(gòu)中輸入以下代碼 首頁 心情日記 Free 一起走到 從明天起 紙飛機(jī) 下一站 (2) 首先切換到樣式表文件“index.css”，添加下列樣式代碼對(duì)導(dǎo)航條的樣式進(jìn)行定義。#nav width:600px; height:22px; background-color:#90bcff; margin-top:-15px; text-align:center; #nav ul list-style-type:none;margin-left:-15px; #nav li float:left;width:76px;text-align:center;line-height:22px;a:link color:#00F;text-decoration:none;a:hover color:#F00;text-decoration:underline;a:acktive color:#000; text-decoration:none;a:visited background-color: #000;(4) 頁面效果如圖4所示：圖4 “個(gè)人主頁”導(dǎo)航條效果圖（五）工作任務(wù)五：制作“個(gè)人主頁”首頁主內(nèi)容區(qū)【任務(wù)要求】通過CSS規(guī)則來精確控制網(wǎng)站首頁主內(nèi)容區(qū)域，從而實(shí)現(xiàn)頁面布局效果。【任務(wù)分析】完成網(wǎng)站主內(nèi)容區(qū)域布局設(shè)計(jì)及內(nèi)容版式設(shè)計(jì)，此部分我們將完成ID名稱為divMain的DIV區(qū)塊的CSS設(shè)置?！救蝿?wù)詳解】(1) 打開“index.css”文件，在樣式表中添在名稱為“divMain”樣式，并對(duì)其樣式的具體設(shè)置。 #divMain width:600px; height:800px; Background:red; /*添加區(qū)塊測(cè)試顏色*/(2) 頁面效果如圖5所示：圖5 “個(gè)人主頁”主內(nèi)容區(qū)效果圖(3) 添加主體內(nèi)容左區(qū)塊的頁面結(jié)構(gòu)，其代碼如下： 我的日記本 他們彼此深信，是瞬間迸發(fā)的熱情讓他們相遇。這樣的確定是美麗的，但變幻無常更為美麗。 心情軌跡 董事長的一切都讓人既羨慕又忌妒，但更讓人受不了的是，有一天，上蒼忽然賜給他一個(gè)神奇的禮物 (4) 在“index.css”樣式表中添在名稱為“divLeft”樣式，并對(duì)其樣式的具體設(shè)置。 #divLeft width:180px; height:580px; background:#D2E7FF; float:left; text-align:center; padding-left:10px; padding-right:10px;.imgLeft border:1px solid #09C; margin-top:15px;.leftTextTitle size:10px; color: #66F; font-weight:bold;.leftTextContent text-align:left;(5) 頁面效果如圖5所示：圖5 “個(gè)人主頁”主內(nèi)容區(qū)左區(qū)塊效果圖(6) 添加主體內(nèi)容右區(qū)塊的頁面結(jié)構(gòu)，其代碼如下： 介紹 我努力的抓緊世界，最后卻仍被世界淘汰，如果一開始就松手，我會(huì)不那么傷心嗎？你說，親愛的孩子，世事難料，隨它去吧！ 照相本子 關(guān)于童年，你記住了什么？ 兩歲時(shí)，我擁有一只巨大的粉紅豬，它總在我嚎啕大哭時(shí)逗我笑。三歲時(shí)，我騎著小木馬一路搖到外婆家，它不喝水也不吃草。四歲時(shí)，我離家出走，在公車上睡著了，最后是太空超人送我回家。我真的沒騙你，我通通都記得，還有照片為證。 地下鐵 天使在地下鐵的入口，和我說再見的那一年，我漸漸看不見了。十五歲生日的那年秋天早晨，窗外下著毛毛雨，我喂好我的貓。六點(diǎn)零五分，我走進(jìn)地下鐵。向左走向右走Theyre both convincedthat a sudden passion joined them.Such certainth is beautiful,but uncertainty is more beautiful still.(7) 在“index.css”樣式表中添在名稱為“divRight”樣式，并對(duì)其樣式的具體設(shè)置。 #divRight width:400px; height:580px; background:#E9FBFF; float:left; background:#e9fbff url(./images/self.jpg) no-repeat bottom right; .rightTitle font-size:5px; color:#0FC; .rightContent font-size:15px; color:#000; (8) 頁面效果如圖6所示：圖6 “個(gè)人主頁”主內(nèi)容區(qū)右區(qū)塊效果圖二、單元小結(jié)與項(xiàng)目單元任務(wù) 1.項(xiàng)目單元小結(jié)l 通過“個(gè)人主頁”真實(shí)項(xiàng)目對(duì)階段知識(shí)點(diǎn)進(jìn)行回顧、強(qiáng)化和綜合應(yīng)用，再次強(qiáng)調(diào)重點(diǎn)和難點(diǎn)。l 再次強(qiáng)化講解并應(yīng)用了CSS+DIV布局、盒子模型和浮動(dòng)布局的應(yīng)用。 2.項(xiàng)目單元任務(wù)1) 以“個(gè)人首頁”為項(xiàng)目驅(qū)動(dòng)，自由發(fā)揮完成一個(gè)真實(shí)項(xiàng)目的設(shè)計(jì)和創(chuàng)建。2) 寫出規(guī)范完善的設(shè)計(jì)和制作文檔，便于對(duì)知識(shí)進(jìn)行梳理和整理。三、板書設(shè)計(jì)新課講解可擦寫區(qū)域l 設(shè)計(jì)網(wǎng)站效果圖l 劃分頁面區(qū)塊（重點(diǎn)）l 設(shè)計(jì)網(wǎng)站首頁頁眉（重點(diǎn)、難點(diǎn)）l 設(shè)計(jì)網(wǎng)站首頁導(dǎo)航條（重點(diǎn)、難點(diǎn)）l 設(shè)計(jì)網(wǎng)站首頁主題部分（重點(diǎn)、難點(diǎn)）講解細(xì)節(jié)布置任務(wù)四、課后附記課程回顧：【約10分鐘】l 通過互動(dòng)的方式回顧之前的學(xué)習(xí)內(nèi)容，為階段項(xiàng)目的制作做好準(zhǔn)備。l 學(xué)生通過互動(dòng)方式回答教師提出的問題。l 認(rèn)真聽取教師的總結(jié)，明確本項(xiàng)目單元的學(xué)習(xí)任務(wù)。l 明確本項(xiàng)目單元的總體學(xué)習(xí)目標(biāo)。帶著目標(biāo)和任務(wù)學(xué)習(xí)。l 對(duì)學(xué)習(xí)目標(biāo)形成一個(gè)初步地、大致地、總體的知識(shí)輪廓。新課講解：【約65分鐘】1.項(xiàng)目引入思路：教師利用“個(gè)人主頁”項(xiàng)目為驅(qū)動(dòng)，進(jìn)行階段知識(shí)回顧、復(fù)習(xí)和綜合應(yīng)用。2.思路指導(dǎo)：通過“個(gè)人主頁”項(xiàng)目制作，完成一個(gè)網(wǎng)站首頁的整個(gè)設(shè)計(jì)流程。3. 任務(wù)目標(biāo)：熟練“個(gè)人主頁”首頁的設(shè)計(jì)和創(chuàng)建。l 此部分由于在課前已作為課前任務(wù)做好了前期的準(zhǔn)備工作，因此，直接在ps中實(shí)現(xiàn)效果圖的制作。l 時(shí)刻保持與教師的互動(dòng)。l 思路跟教師保持一致，保證學(xué)習(xí)效果。提醒學(xué)生出圖的方法，注意使用切片工具對(duì)大圖進(jìn)行切割?；?dòng)提問，整個(gè)頁面區(qū)塊如何劃分？教師提醒：合理進(jìn)行區(qū)塊劃分將有利于后期區(qū)塊內(nèi)容得添及樣式的的設(shè)計(jì)和制作。網(wǎng)