使用html語言和css開發(fā)商業(yè)站點(diǎn)

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

2、均為多行多列的布局頁面整體布局的實(shí)現(xiàn)步驟根據(jù)效果圖劃分區(qū)塊，編寫HTML頁面結(jié)構(gòu)創(chuàng)建各區(qū)塊的布局樣式layout.css，用綁定頁面 參加豐富的活動(dòng) 培訓(xùn) 11月17號婚戀心理工作坊（ 活動(dòng)介紹婚戀心理工作坊：單身人士進(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)頁面的效果？使用div-ul-li結(jié)構(gòu)實(shí)現(xiàn)h1 整個(gè)圓角矩形，典型的div-ul-li結(jié)構(gòu)，含13個(gè) 多塊類似結(jié)構(gòu)左浮動(dòng) 2個(gè)絕對定位；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)口語輔導(dǎo)卡申請中 “戶外”雜志半價(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)分類中的標(biāo)題背景選中菜單背景 活動(dòng)展示的標(biāo)題背景 活動(dòng)展示頂部排序背景活動(dòng)展示頂部VIP背景開發(fā)計(jì)劃用例1：登錄網(wǎng)站 70分鐘用例2：發(fā)布或參與活動(dòng) 240分鐘用例3：參與或發(fā)布據(jù)點(diǎn) 30分鐘用例4：注冊會員 30分鐘用例1：登錄網(wǎng)站4-1需求說明實(shí)現(xiàn)功能有頂部Logo、菜單及搜索條件底部版權(quán)熱門活動(dòng)與熱門據(jù)點(diǎn)版塊鄰居版塊登錄版塊 思路分析實(shí)現(xiàn)整體布局實(shí)現(xiàn)頁面頂部、底部實(shí)現(xiàn)熱門活動(dòng)和鄰居版塊實(shí)現(xiàn)登錄版塊登錄鄰居熱門據(jù)點(diǎn)熱門活動(dòng)底部頂

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

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

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

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