0301--靜態(tài)網(wǎng)頁(yè)制作(dreamweaver)-以“個(gè)人-文庫(kù)吧資料
2025-04-22 08:22本頁(yè)面
【正文】 心嗎？你說(shuō)，親愛(ài)的孩子，世事難料，隨它去吧！/p h4 class=chara3a href=照相本子/a/h4 p class=chara2關(guān)于童年，你記住了什么？ br 兩歲時(shí)，我擁有一只巨大的粉紅豬，它總在我嚎啕大哭時(shí)逗我笑。 fontweight:bold。 } .leftTextTitle{ size:10px。 } .imgLeft{ border:1px solid 09C。 paddingleft:10px。 float:left。 height:580px。/p img src=images/ width=93 height=103 class=imgLeft / p class=leftTextTitle心情軌跡/p p class=leftTextContent董事長(zhǎng)的一切都讓人既羨慕又忌妒，但更讓人受不了的是，有一天，上蒼忽然賜給他一個(gè)神奇的禮物………/p /div(4) 在“”樣式表中添在名稱(chēng)為“divLeft”樣式，并對(duì)其樣式的具體設(shè)置。 /*添加區(qū)塊測(cè)試顏色*/}(2) 頁(yè)面效果如圖5所示：圖5 “個(gè)人主頁(yè)”主內(nèi)容區(qū)效果圖(3) 添加主體內(nèi)容左區(qū)塊的頁(yè)面結(jié)構(gòu)，其代碼如下：div id=divLeft img src=images/ width=93 height=123 class=imgLeft / p class=leftTextTitle我的日記本/p p class=leftTextContent他們彼此深信，是瞬間迸發(fā)的熱情讓他們相遇。 height:800px。【任務(wù)詳解】(1) 打開(kāi)“”文件，在樣式表中添在名稱(chēng)為“divMain”樣式，并對(duì)其樣式的具體設(shè)置。}(4) 頁(yè)面效果如圖4所示：圖4 “個(gè)人主頁(yè)”導(dǎo)航條效果圖（五）工作任務(wù)五：制作“個(gè)人主頁(yè)”首頁(yè)主內(nèi)容區(qū)【任務(wù)要求】通過(guò)CSS規(guī)則來(lái)精確控制網(wǎng)站首頁(yè)主內(nèi)容區(qū)域，從而實(shí)現(xiàn)頁(yè)面布局效果。 textdecoration:none。 textdecoration:underline。 textdecoration:none。 lineheight:22px。 width:76px。 marginleft:15px。 textalign:center。 backgroundcolor:90bcff。nav{ width:600px。核心思想是利用列表實(shí)現(xiàn)導(dǎo)航條內(nèi)容的添加，在通過(guò)css樣式實(shí)現(xiàn)布局的改變。代碼如下：div id=top img src=image//div(3) 頁(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è)面布局效果。 height:133px。 }(1) 接下來(lái)在樣式表中定義“top”的樣式，也就是定義頁(yè)眉的結(jié)構(gòu)，添加下列樣式代碼：top,nav,main{ margin:0 auto。 margin:0。【任務(wù)實(shí)施】(1) 首先切換到樣式表文件“”，添加下列樣式代碼對(duì)整個(gè)頁(yè)面的樣式進(jìn)行定義?！救蝿?wù)要求】通過(guò)CSS規(guī)則來(lái)精確控制網(wǎng)站首頁(yè)頁(yè)眉部分，從而實(shí)現(xiàn)頁(yè)面布局效果。核心代碼如下：link href=css/ rel=stylesheet type=text/css(7) 首先根據(jù)分析得出的頁(yè)面結(jié)構(gòu)搭建整個(gè)網(wǎng)頁(yè)的頁(yè)面布局。(5) 創(chuàng)建樣式表文件“”，將其保存在站點(diǎn)根目錄下的CSS文件夾中。(3) 規(guī)劃站點(diǎn)目錄結(jié)構(gòu)，建立CSS和images文件夾，將在ps中導(dǎo)出的圖片放入images文件夾?！救蝿?wù)實(shí)施】(1) 在具體布局之前，首先分析一下頁(yè)面的構(gòu)成，目的是明確所需要?jiǎng)?chuàng)建頁(yè)面的布局結(jié)構(gòu)，如下圖2所示?！救蝿?wù)要求】根據(jù)已經(jīng)收集好的素材及網(wǎng)站規(guī)劃，進(jìn)行網(wǎng)站的整體頁(yè)面布局。【任務(wù)分析】采用藍(lán)色主色調(diào)，體現(xiàn)客戶(hù)簡(jiǎn)潔實(shí)
公司管理相關(guān)推薦
鄂ICP備17016276號(hào)-1