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

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

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

3、左浮動 1px虛線上邊框 都市生活 難點分析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ū)域的布局主要用于實現(xiàn)可重復(fù)的相同結(jié)構(gòu) 難點分析1：典型局部布局結(jié)構(gòu)4-4 table-tr-td結(jié)構(gòu) 此區(qū)域的布局主要用于規(guī)范布局 難點分析2：背景修飾技巧3-1 自適應(yīng)高度的圓角矩形 組織結(jié)構(gòu) 羽毛球培訓(xùn)班報名 六人行免費口語輔導(dǎo)卡申請中 “戶外”雜志半價征訂 難點分析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; 背景偏移屬性值“右上”難點分析2：背景修飾技巧3-3背景偏移量技術(shù) 活動分類中的標(biāo)題背景選中菜單背景 活動展示的標(biāo)題背景 活動展示頂部排序背景活動展示頂部VIP背景開發(fā)計劃用例1：登錄網(wǎng)站 70分鐘用例2：發(fā)布或參與活動 240分鐘用例3：參與或發(fā)布據(jù)點 30分鐘用例4：注冊會員 30分鐘用例1：登錄網(wǎng)站4-1需求說明實現(xiàn)功能有頂部Logo、菜單及搜索條件底部版權(quán)熱門活動與熱門據(jù)點版塊鄰居版塊登錄版塊 思路分析實現(xiàn)整體布局實現(xiàn)頁面頂部、底部實現(xiàn)熱門活動和鄰居版塊實現(xiàn)登錄版塊登錄鄰居熱門據(jù)點熱門活動底部頂

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

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

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

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