1、項(xiàng)目案例：六人行網(wǎng)站第十三章訓(xùn)練的技能點(diǎn)使用DIV+CSS實(shí)現(xiàn)整體布局使用DIV+CSS實(shí)現(xiàn)典型的4種局部結(jié)構(gòu)使用絕對(duì)定位和濾鏡實(shí)現(xiàn)CSS特效使用CSS實(shí)現(xiàn)頁(yè)面的美化任務(wù)描述系統(tǒng)概述六人行網(wǎng)站是目前人氣較旺的網(wǎng)絡(luò)交友平臺(tái) 模擬制作4個(gè)網(wǎng)頁(yè) 首頁(yè)活動(dòng)頁(yè)據(jù)點(diǎn)頁(yè)注冊(cè)頁(yè) 系統(tǒng)角色網(wǎng)站開(kāi)發(fā)人員、瀏覽者問(wèn)題分析1：網(wǎng)站制作步驟使用Dreamweaver創(chuàng)建站點(diǎn)、公用文件夾制作首頁(yè)創(chuàng)建網(wǎng)站所有頁(yè)面共用的全局樣式global.css并綁定頁(yè)面使用標(biāo)簽引用細(xì)節(jié)風(fēng)格detail.css創(chuàng)建頁(yè)面的頂部、底部模板應(yīng)用模板實(shí)現(xiàn)多個(gè)頁(yè)面，包括布局實(shí)現(xiàn)、涉及的樣式實(shí)現(xiàn)頁(yè)面的兼容性測(cè)試 問(wèn)題分析2：實(shí)現(xiàn)頁(yè)面的整體布局4個(gè)頁(yè)面

2、均為多行多列的布局頁(yè)面整體布局的實(shí)現(xiàn)步驟根據(jù)效果圖劃分區(qū)塊，編寫(xiě)HTML頁(yè)面結(jié)構(gòu)創(chuàng)建各區(qū)塊的布局樣式layout.css，用綁定頁(yè)面 參加豐富的活動(dòng) 培訓(xùn) 11月17號(hào)婚戀心理工作坊（ 活動(dòng)介紹婚戀心理工作坊：?jiǎn)紊砣耸窟M(jìn)入婚戀關(guān)系的十大障礙. 難點(diǎn)分析1：典型局部布局結(jié)構(gòu)4-1 div-dl-dt-dd結(jié)構(gòu) 演示示例： div-dl-dt-dd結(jié)構(gòu)此區(qū)域的布局主要在實(shí)現(xiàn)浮動(dòng)與填充屬性時(shí)使用 難點(diǎn)分析1：典型局部布局結(jié)構(gòu)4-2如何實(shí)現(xiàn)頁(yè)面的效果？使用div-ul-li結(jié)構(gòu)實(shí)現(xiàn)h1 整個(gè)圓角矩形，典型的div-ul-li結(jié)構(gòu)，含13個(gè) 多塊類(lèi)似結(jié)構(gòu)左浮動(dòng) 2個(gè)絕對(duì)定位；50%濾鏡黑色背景 寬50%

3、左浮動(dòng) 1px虛線上邊框 都市生活 難點(diǎn)分析1：典型局部布局結(jié)構(gòu)4-3 div-ul-li結(jié)構(gòu)外層結(jié)構(gòu) 圓角矩形結(jié)構(gòu) 演示示例： div-ul-li結(jié)構(gòu) 此區(qū)域的布局主要用于實(shí)現(xiàn)可重復(fù)的相同結(jié)構(gòu) 難點(diǎn)分析1：典型局部布局結(jié)構(gòu)4-4 table-tr-td結(jié)構(gòu) 此區(qū)域的布局主要用于規(guī)范布局 難點(diǎn)分析2：背景修飾技巧3-1 自適應(yīng)高度的圓角矩形 組織結(jié)構(gòu) 羽毛球培訓(xùn)班報(bào)名 六人行免費(fèi)口語(yǔ)輔導(dǎo)卡申請(qǐng)中 “戶(hù)外”雜志半價(jià)征訂 難點(diǎn)分析2：背景修飾技巧3-2 CSS代碼.roundline-height:21px;background:url(./images/rounded-right.gif) to

4、p right no-repeat;width:195px;.listpadding:9px 9px 0px 9px; background:url(./images/rounded-left.gif) top left no-repeat;.endpadding:0 0 0 9px; background:url(./images/rounded-left.gif) bottom left no-repeat;.end pline-height:9px;height:9px;margin-top:-9px; padding:0 9px 9px 0; background:url(./imag

5、es/rounded-right.gif) bottom right no-repeat; 背景偏移屬性值“右上”難點(diǎn)分析2：背景修飾技巧3-3背景偏移量技術(shù) 活動(dòng)分類(lèi)中的標(biāo)題背景選中菜單背景 活動(dòng)展示的標(biāo)題背景 活動(dòng)展示頂部排序背景活動(dòng)展示頂部VIP背景開(kāi)發(fā)計(jì)劃用例1：登錄網(wǎng)站 70分鐘用例2：發(fā)布或參與活動(dòng) 240分鐘用例3：參與或發(fā)布據(jù)點(diǎn) 30分鐘用例4：注冊(cè)會(huì)員 30分鐘用例1：登錄網(wǎng)站4-1需求說(shuō)明實(shí)現(xiàn)功能有頂部Logo、菜單及搜索條件底部版權(quán)熱門(mén)活動(dòng)與熱門(mén)據(jù)點(diǎn)版塊鄰居版塊登錄版塊 思路分析實(shí)現(xiàn)整體布局實(shí)現(xiàn)頁(yè)面頂部、底部實(shí)現(xiàn)熱門(mén)活動(dòng)和鄰居版塊實(shí)現(xiàn)登錄版塊登錄鄰居熱門(mén)據(jù)點(diǎn)熱門(mén)活動(dòng)底部頂

6、部用例1：登錄網(wǎng)站4-2難點(diǎn)提示使用dl-dt-dd實(shí)現(xiàn) 參加豐富的活動(dòng) 培訓(xùn) 11月17號(hào)婚戀心理工作坊（ 活動(dòng)介紹婚戀心理工作坊：?jiǎn)紊砣耸窟M(jìn)入婚戀關(guān)系的十大障礙. 用例1：登錄網(wǎng)站4-3需求說(shuō)明實(shí)現(xiàn)整體布局實(shí)現(xiàn) （25分鐘）制作模板 （25分鐘）實(shí)現(xiàn)頁(yè)面頂部 （25分鐘）實(shí)現(xiàn)頁(yè)面底部 （25分鐘）實(shí)現(xiàn)熱門(mén)活動(dòng)和鄰居版塊 （25分鐘）實(shí)現(xiàn)登錄版塊 （25分鐘）完成時(shí)間：150分鐘用例1：登錄網(wǎng)站4-4功能測(cè)試頁(yè)面布局頁(yè)面樣式互相驗(yàn)證完成的程序功能小組長(zhǎng)檢查本組完成情況功能測(cè)試用例2：發(fā)布或參與活動(dòng)4-1 需求說(shuō)明完善第8章完成的活動(dòng)頁(yè) ，要求實(shí)現(xiàn)頂部放置Logo，橫幅廣告和右側(cè)熱門(mén)信息導(dǎo)航條

7、活動(dòng)分類(lèi)活動(dòng)日期活動(dòng)展示底部版權(quán)實(shí)現(xiàn)后復(fù)用5次左浮動(dòng) 用例2：發(fā)布或參與活動(dòng)4-2難點(diǎn)提示使用圓角矩形實(shí)現(xiàn)熱門(mén)活動(dòng)展示設(shè)置相對(duì)定位與絕對(duì)定位實(shí)現(xiàn)圖片上方的效果實(shí)現(xiàn)1行出現(xiàn)2段文字設(shè)左浮動(dòng)和右浮動(dòng)實(shí)現(xiàn)虛線下方的同行左右對(duì)齊 英語(yǔ)學(xué)習(xí)更多 !- 12個(gè) 略- 用例2：發(fā)布或參與活動(dòng)4-3需求說(shuō)明完善第8章完成的活動(dòng)頁(yè) ，要求實(shí)現(xiàn)頂部放置Logo，橫幅廣告和右側(cè)熱門(mén)信息（10分鐘）導(dǎo)航條 （25分鐘）活動(dòng)分類(lèi) （25分鐘）活動(dòng)日期 （10分鐘）活動(dòng)展示 （25分鐘）底部版權(quán) （10分鐘）完成時(shí)間：105分鐘用例2：發(fā)布或參與活動(dòng)4-4功能測(cè)試檢查點(diǎn)1 （5分鐘） 點(diǎn)擊首頁(yè)中導(dǎo)航條進(jìn)入活動(dòng)頁(yè)檢查點(diǎn)2

8、（5分鐘） 導(dǎo)航條檢查點(diǎn)3 （10分鐘）活動(dòng)分類(lèi) 檢查點(diǎn)4（5分鐘） 活動(dòng)日期檢查點(diǎn)5（10分鐘）活動(dòng)展示互相驗(yàn)證完成的程序功能小組長(zhǎng)檢查本組完成情況功能測(cè)試共性問(wèn)題集中講解常見(jiàn)調(diào)試問(wèn)題及解決辦法代碼規(guī)范問(wèn)題共性問(wèn)題集中講解用例3：參與或發(fā)布據(jù)點(diǎn)3-1 需求說(shuō)明制作據(jù)點(diǎn)頁(yè)熱門(mén)據(jù)點(diǎn)創(chuàng)建據(jù)點(diǎn)按鈕據(jù)點(diǎn)交易廣場(chǎng) 據(jù)點(diǎn)最新動(dòng)態(tài)信息 用例3：參與或發(fā)布據(jù)點(diǎn)3-2 思路分析地圖用大圖片展示效果 采用ul-li實(shí)現(xiàn)據(jù)點(diǎn)分類(lèi)列表數(shù)字用定義特殊風(fēng)格難點(diǎn)提示實(shí)現(xiàn)六人行據(jù)點(diǎn)頁(yè)熱門(mén)據(jù)點(diǎn)效果 完成時(shí)間：25分鐘換行實(shí)現(xiàn)1px下邊框外層設(shè)填充用例3：參與或發(fā)布據(jù)點(diǎn)3-3功能測(cè)試檢查點(diǎn)1 （5分鐘） 點(diǎn)擊首頁(yè)中導(dǎo)航條進(jìn)入據(jù)點(diǎn)

9、頁(yè)檢查點(diǎn)2 （10分鐘）熱門(mén)據(jù)點(diǎn) 互相驗(yàn)證完成的程序功能小組長(zhǎng)檢查本組完成情況功能測(cè)試用例4：注冊(cè)會(huì)員2-1 需求說(shuō)明制作會(huì)員注冊(cè)頁(yè)難點(diǎn)提示采用div-ul-li的布局結(jié)構(gòu)返回首頁(yè)鏈接標(biāo)語(yǔ)實(shí)現(xiàn) 聲明信息 協(xié)議鏈接及提交按鈕 會(huì)員注冊(cè)信息 完成時(shí)間：25分鐘用例4：注冊(cè)會(huì)員2-2功能測(cè)試檢查點(diǎn)1 （5分鐘） 點(diǎn)擊首頁(yè)中導(dǎo)航條進(jìn)入注冊(cè)頁(yè)檢查點(diǎn)2 （10分鐘）接收會(huì)員信息并提交 互相驗(yàn)證完成的程序功能小組長(zhǎng)檢查本組完成情況功能測(cè)試頁(yè)面的兼容性測(cè)試完成時(shí)間：25分鐘系統(tǒng)集成后，重新測(cè)試系統(tǒng)所有程序功能測(cè)試出的缺陷記錄在“常見(jiàn)問(wèn)題列表中”修正缺陷后返測(cè)，并更新“常見(jiàn)問(wèn)題列表中”頁(yè)面的兼容性測(cè)試項(xiàng)目總結(jié)講解要點(diǎn)： 完成情況、技能總結(jié)、經(jīng)驗(yàn)分享、項(xiàng)目收獲表達(dá)要求： 清晰流暢、有條理