0301--靜態(tài)網(wǎng)頁(yè)制作(dreamweaver)-以“個(gè)人(完整版)
【正文】 控制。【任務(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è)面。 教師簡(jiǎn)述本項(xiàng)目單元的重點(diǎn)、難點(diǎn)，讓學(xué)生有帶著任務(wù)、有重點(diǎn)跟隨老師授課。 靈活運(yùn)用盒子模型靈活設(shè)計(jì)網(wǎng)頁(yè)布局178。 網(wǎng)頁(yè)結(jié)構(gòu)和樣式分離178。 通過(guò)CSS樣式修飾難點(diǎn)：178。 理解盒子模型的意義178。（2）利用項(xiàng)目互動(dòng)提問(wèn)回顧知識(shí)點(diǎn) l 網(wǎng)站設(shè)計(jì)流程？l 盒子模型的關(guān)鍵屬性？l 常用的定位方式有幾種？（3）互動(dòng)總結(jié)教師通過(guò)與學(xué)生互動(dòng)溝通，進(jìn)行知識(shí)的歸納：l 網(wǎng)站的設(shè)計(jì)流程包括需求分析、制作網(wǎng)頁(yè)效果圖、創(chuàng)建和設(shè)計(jì)網(wǎng)站、測(cè)試和發(fā)布等幾個(gè)環(huán)節(jié)；l 盒子模型的關(guān)鍵屬性包括content、border、padding和margin四個(gè)屬性。【任務(wù)分析】采用藍(lán)色主色調(diào)，體現(xiàn)客戶簡(jiǎn)潔實(shí)用的目標(biāo)。(5) 創(chuàng)建樣式表文件“”，將其保存在站點(diǎn)根目錄下的CSS文件夾中。 margin:0。核心思想是利用列表實(shí)現(xiàn)導(dǎo)航條內(nèi)容的添加，在通過(guò)css樣式實(shí)現(xiàn)布局的改變。 marginleft:15px。 textdecoration:underline。 height:800px。 float:left。 fontweight:bold。br 六點(diǎn)零五分，br 我走進(jìn)地下鐵。 }.rightTitle{ fontsize:5px。三、板書設(shè)計(jì)新課講解可擦寫區(qū)域l 設(shè)計(jì)網(wǎng)站效果圖l 劃分頁(yè)面區(qū)塊（重點(diǎn)）l 設(shè)計(jì)網(wǎng)站首頁(yè)頁(yè)眉（重點(diǎn)、難點(diǎn)）l 設(shè)計(jì)網(wǎng)站首頁(yè)導(dǎo)航條（重點(diǎn)、難點(diǎn)）l 設(shè)計(jì)網(wǎng)站首頁(yè)主題部分（重點(diǎn)、難點(diǎn)）講解細(xì)節(jié)布置任務(wù)四、課后附記課程回顧：【約10分鐘】l 通過(guò)互動(dòng)的方式回顧之前的學(xué)習(xí)內(nèi)容，為階段項(xiàng)目的制作做好準(zhǔn)備。3. 任務(wù)目標(biāo)：熟練“個(gè)人主頁(yè)”首頁(yè)的設(shè)計(jì)和創(chuàng)建。在實(shí)際使用中，我們可以為這些需要居中的元素創(chuàng)建一個(gè)起容器作用的div。一般網(wǎng)站需要設(shè)置的是“a:link”、“a:visited”、“a:hover”三種狀態(tài)，“a:active”狀態(tài)設(shè)置較少。布置單元項(xiàng)目任務(wù)【約5分鐘】要求學(xué)生課下任務(wù)必須按質(zhì)按量按時(shí)完成，強(qiáng)調(diào)作業(yè)的重要性。互動(dòng)提問(wèn)原因？總結(jié)：不占尺寸，但是還可以看到區(qū)塊的范圍。此部分符合樣式是為了對(duì)代碼進(jìn)行優(yōu)化，避免累贅，提高代碼的執(zhí)行效率。l 時(shí)刻保持與教師的互動(dòng)。l 認(rèn)真聽取教師的總結(jié)，明確本項(xiàng)目單元的學(xué)習(xí)任務(wù)。 }.rightContent{ fontsize:15px。re both convincedbr that a sudden passion joined them.br Such certainth is beautiful,br but uncertainty is more beautiful still./p br/div(7) 在“”樣式表中添在名稱為“divRight”樣式，并對(duì)其樣式的具體設(shè)置。 }(5) 頁(yè)面效果如圖5所示：圖5 “個(gè)人主頁(yè)”主內(nèi)容區(qū)左區(qū)塊效果圖(6) 添加主體內(nèi)容右區(qū)塊的頁(yè)面結(jié)構(gòu)，其代碼如下： div id=divRight h4 class=rightTitlea href=介紹/a/h4 p class=rightContent我努力的抓緊世界，最后卻仍被世界淘汰，如果一開始就松手，我會(huì)不那么傷心嗎？你說(shuō)，親愛的孩子，世事難料，隨它去吧！/p h4 class=chara3a href=照相本子/a/h4 p class=chara2關(guān)于童年，你記住了什么？ br 兩歲時(shí)，我擁有一只巨大的粉紅豬，它總在我嚎啕大哭時(shí)逗我笑。 paddingleft:10px。
公司管理相關(guān)推薦
鄂ICP備17016276號(hào)-1