靜態(tài)網(wǎng)制作Dreamweaver課程教案首

1、Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)教案河北工業(yè)職業(yè)技術(shù)學(xué)院靜態(tài)網(wǎng)頁(yè)制作(Dreamweaver ) 課程教案首頁(yè)授課教師張亞靜班級(jí)16網(wǎng)絡(luò)訂單1班學(xué)時(shí)2授課日期主題或任務(wù)以“個(gè)人主頁(yè)”項(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、通過(guò)CSS+DIV技術(shù)設(shè)計(jì)法實(shí)現(xiàn)一個(gè)完整網(wǎng)站項(xiàng)目的創(chuàng)建2、靈活運(yùn)用盒子模型靈活設(shè)計(jì)網(wǎng)頁(yè)布局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)頁(yè)設(shè)計(jì)的熱情學(xué)習(xí)內(nèi)容以“個(gè)人主頁(yè)”

2、完整項(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)頁(yè)結(jié)構(gòu)4、利用浮動(dòng)或定位設(shè)計(jì)頁(yè)面布局5、通過(guò)CSS樣式修飾6、進(jìn)行網(wǎng)站測(cè)試重點(diǎn)難點(diǎn)重點(diǎn)：利用浮動(dòng)或定位設(shè)計(jì)貝囿布局通過(guò)CSS樣式修飾難點(diǎn)：利用浮動(dòng)或定位設(shè)計(jì)貝囿布局教學(xué)方法。理論講授。小組討論 項(xiàng)目教學(xué) 任務(wù)驅(qū)動(dòng)。參觀教學(xué)。模擬教學(xué) 實(shí)驗(yàn)實(shí)訓(xùn)。演示教學(xué)。其他X 資源。文本素材。實(shí)物展示PPT幻燈片。音頻素材。視頻素材。動(dòng)畫(huà)素材圖形/圖像素材。網(wǎng)絡(luò)資源。其他Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)教案教學(xué)設(shè)計(jì)1、通過(guò)教師演示項(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ì)完整

3、網(wǎng)站首頁(yè)的設(shè)計(jì)和制作有i一個(gè)整體認(rèn)識(shí)，提升學(xué)生進(jìn)行真實(shí)項(xiàng)目開(kāi)發(fā)的經(jīng)驗(yàn)和興趣。學(xué)習(xí)評(píng)價(jià)行為表現(xiàn)。課堂作業(yè)。測(cè)驗(yàn)測(cè)試制作作品。其他作業(yè)題目利用CSS+DIV自由設(shè)計(jì)普制作“個(gè)人首頁(yè)”要求：網(wǎng)頁(yè)結(jié)構(gòu)和樣式分離網(wǎng)站目錄結(jié)構(gòu)規(guī)劃合理代碼格式規(guī)范雙語(yǔ)教學(xué)Banner head link navigation foot系（部）：計(jì)算機(jī)技術(shù)系教研室：網(wǎng)絡(luò)技術(shù)教研室主任簽字：_年 月 日Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)教案學(xué)習(xí)單元六 以“個(gè)人主頁(yè)”項(xiàng)目為驅(qū)動(dòng)的階段復(fù)習(xí)授課內(nèi)容：以“個(gè)人主頁(yè)”項(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)用理解盒子模型的意義掌握浮

4、動(dòng)布局和定位技能目標(biāo)：通過(guò)CSS+DIV技術(shù)設(shè)計(jì)并實(shí)現(xiàn)一個(gè)完整網(wǎng)站項(xiàng)目的創(chuàng)建靈活運(yùn)用盒子模型靈活設(shè)計(jì)網(wǎng)頁(yè)布局靈活運(yùn)用浮動(dòng)和定位布局頁(yè)面素質(zhì)目標(biāo)：培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí)培學(xué)生的設(shè)計(jì)和創(chuàng)意能力，提升學(xué)生對(duì)于網(wǎng)頁(yè)設(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)頁(yè)結(jié)構(gòu)4、利用浮動(dòng)或定位設(shè)計(jì)頁(yè)面布局5、通過(guò)CSS樣式修飾6、進(jìn)行網(wǎng)站測(cè)試教學(xué)重點(diǎn)：利用浮動(dòng)或定位設(shè)計(jì)頁(yè)面布局通過(guò)CSS樣式修飾教學(xué)難點(diǎn):利用浮動(dòng)或定位設(shè)計(jì)頁(yè)面布局Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)教案教學(xué)方法和策略：教學(xué)方法：采用項(xiàng)目驅(qū)動(dòng)法、分組競(jìng)爭(zhēng)法、案例演示法提高學(xué)生的學(xué)習(xí)興趣教學(xué)策略：通過(guò)分組討論、競(jìng)爭(zhēng)的

5、方式激發(fā)學(xué)生的學(xué)習(xí)熱情教學(xué)設(shè)計(jì)思路：1、通過(guò)教師演示項(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)站首頁(yè)的設(shè)計(jì)和制作有一個(gè)整體認(rèn)識(shí)，提升學(xué)生進(jìn)行真實(shí)項(xiàng)目開(kāi)發(fā)的經(jīng)驗(yàn)和興趣。授課內(nèi)容提綱：一、復(fù)習(xí)舊課導(dǎo)出階段項(xiàng)目1、課程回顧(1)教師綜述在前五個(gè)學(xué)習(xí)單元的課程中， 我們分階段的以“計(jì)算機(jī)技術(shù)系網(wǎng)站” 首頁(yè)項(xiàng)目為 驅(qū)動(dòng)完成了網(wǎng)站首頁(yè)的制作， 對(duì)于網(wǎng)站設(shè)計(jì)有了初步的認(rèn)識(shí)和了解， 經(jīng)過(guò)階段學(xué)習(xí)， 同學(xué)們已經(jīng)具備了獨(dú)立設(shè)計(jì)和制作網(wǎng)站首頁(yè)的能力。(2)利用項(xiàng)目互動(dòng)提問(wèn)回顧知識(shí)點(diǎn)網(wǎng)站設(shè)計(jì)流程？盒子模型的關(guān)鍵屬性？常用的定位方式有幾種？(3)互動(dòng)總結(jié)教師通過(guò)與學(xué)生互

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

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

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

9、教案【任務(wù)背景】某同學(xué)要設(shè)計(jì)一個(gè) “個(gè)人主頁(yè)”，現(xiàn)已由網(wǎng)站策劃人員先期分析了網(wǎng)站的目的、 功能定位及內(nèi)容規(guī)劃。并根據(jù)功能定位先行設(shè)計(jì)了網(wǎng)站效果圖。【任務(wù)要求】根據(jù)與用戶溝通和交流做好的需求分析，設(shè)計(jì)和制作“個(gè)人主頁(yè)”效果圖?！救蝿?wù)分析】采用藍(lán)色主色調(diào)，體現(xiàn)客戶簡(jiǎn)潔實(shí)用的目標(biāo)?！救蝿?wù)實(shí)施】此部分由于在 課前已作為課 前任務(wù)做好了 前期的準(zhǔn)備工 作，因此，直接 在ps中實(shí)現(xiàn)效 果圖的制作。時(shí)刻保持與教 師的互動(dòng)。思路跟教師保 持一致，保證學(xué) 習(xí)效果。在PS中設(shè)計(jì)“個(gè)人主頁(yè)”效果圖，具體實(shí)現(xiàn)過(guò)程不做詳解，如下圖 1所示:提醒學(xué)生出圖的 方 法，注意使用切片工 具對(duì)大圖進(jìn)行切割。圖1頁(yè)面效果圖(二)工

10、作任務(wù)二：分析“個(gè)人主頁(yè)”首頁(yè)整體結(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)站的整體頁(yè)面布局?！救蝿?wù)分析】效果圖導(dǎo)出之后，我們就可以使用這些素材在Dreamweaver著手進(jìn)行布局了，現(xiàn)在的布局技術(shù)包括表格布局和Web標(biāo)準(zhǔn)布局，也就是俗稱的 DIV+CSS布局，本項(xiàng)目我們主要使用 Web標(biāo)準(zhǔn)來(lái)布局頁(yè)面?！救蝿?wù)實(shí)施】(1)在具體布局之前，首先分析一下頁(yè)面的構(gòu)成，目的是明確所需要?jiǎng)?chuàng)建頁(yè)面的布局結(jié)構(gòu)，如下圖2所示。Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)

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

12、x.html”進(jìn)行了關(guān)聯(lián)。核心代碼如下：(7)首先根據(jù)分析得出的頁(yè)面結(jié)構(gòu)搭建整個(gè)網(wǎng)頁(yè)的頁(yè)面布局。在 index.htmnl。(三)工作任務(wù)三：制作“個(gè)人主頁(yè)”首頁(yè)頁(yè)眉【任務(wù)背景】在上一工作任務(wù)中，我們已經(jīng)實(shí)現(xiàn)了本項(xiàng)目DIV框架結(jié)構(gòu)布局，但是效果離我們要實(shí)現(xiàn)的網(wǎng)頁(yè)布局效果還相差甚遠(yuǎn)，僅僅依靠DIV標(biāo)簽是無(wú)法實(shí)現(xiàn)頁(yè)面布局的，我們必須要配合 CSS來(lái)對(duì)網(wǎng)站的各個(gè)部分進(jìn)行更加精確的控制?！救蝿?wù)要求】CSS中首選的讓 元素水平居中的 方法將元素的 margin-left 和 margin-right 屬性 設(shè)置為auto即可。通過(guò)CSS規(guī)則來(lái)精確控制網(wǎng)站首頁(yè)頁(yè)眉部分，從而實(shí)現(xiàn)頁(yè)面布局效果?！救蝿?wù)分析】完

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

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

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

16、 index.css，添加下列樣式代碼對(duì)導(dǎo)航條的樣式進(jìn)行 定義。#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;頁(yè)面效果如圖4所示：Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)教案圖4 “個(gè)人主頁(yè)”導(dǎo)航條效果圖顏色測(cè)試法是網(wǎng)頁(yè)布局中最常用的測(cè)試方法?；?dòng)提問(wèn)原因？ 總結(jié)：不占尺寸，但 是還可以看到區(qū) 塊 的范圍。（五）工作任務(wù)五：制作“個(gè)人主頁(yè)”首頁(yè)主內(nèi)容區(qū)【任務(wù)要求】通過(guò)CSS規(guī)則來(lái)精確控制網(wǎng)站首頁(yè)主內(nèi)容區(qū)域，從而實(shí)現(xiàn)頁(yè)面布局效果。【任務(wù)分析】完成網(wǎng)站主內(nèi)容區(qū)域布局設(shè)計(jì)及內(nèi)容版式設(shè)計(jì)，此部分我們將完成ID名稱為divMain的DI

18、V區(qū)塊的CSS設(shè)置。【任務(wù)詳解】在樣式設(shè)置過(guò)程中，注重代碼的效率， 此 部分注意提醒學(xué)生。1）兩張圖片的樣式 相同2）兩個(gè)圖片的標(biāo)題 相同3）兩個(gè)圖片的文字描述相同（1）打開(kāi)“ index.css”文件，在樣式表中添在名稱為“ divMain ”樣式，并對(duì)其樣式 的具體設(shè)置。#divMainwidth:600px;height:800px;Background:red; /*添加區(qū)塊測(cè)試顏色*/（2）頁(yè)面效果如圖5所示：10Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)教案由于此部分樣式 比 較繁多，強(qiáng)調(diào)學(xué)生一 定要邊做邊測(cè)試，以 瀏覽器效果為準(zhǔn)。圖5 “個(gè)人主頁(yè)”主內(nèi)容區(qū)效果圖(3)添加主體內(nèi)容左區(qū)塊的頁(yè)面

19、結(jié)構(gòu)，其代碼如下:img src=images/selfpic.jpg”定是美麗的，但變幻無(wú)常更為美麗。width=93我的日記本他們彼此深信,心情軌跡 height=123 class=imgLeft” /是瞬間迸發(fā)的熱情讓他們相遇。這樣的確width=93height=103董事長(zhǎng)的一切都讓人既羨慕又忌妒，但更讓人受不了的是,提醒學(xué)生：注意代碼的格式，要有層次感。有一天，上蒼忽然賜給他一個(gè)神奇的禮物 在“ index.css”樣式表中添在名稱為“ divLeft ”樣式，并對(duì)其樣式的具體設(shè)置。#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網(wǎng)頁(yè)設(shè)計(jì)教案Bacground 屬性是一 個(gè)符合屬性，可以同 時(shí)設(shè)置背景的多個(gè)屬性，中間通過(guò)空格 來(lái)連接不同屬性值。text-align:left;)(5)頁(yè)面效果如圖5所示:圖5 “個(gè)

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