web程序開(kāi)發(fā)開(kāi)心網(wǎng)前臺(tái)頁(yè)面設(shè)計(jì)

開(kāi)心網(wǎng)前臺(tái)頁(yè)面設(shè)計(jì)一、項(xiàng)目說(shuō)明本項(xiàng)目針對(duì)《Web程序開(kāi)發(fā)基礎(chǔ)》設(shè)置，任務(wù)是完成“開(kāi)心網(wǎng)”前臺(tái)靜態(tài)頁(yè)面的規(guī)劃和設(shè)計(jì)工作。希望通過(guò)本項(xiàng)目，提高練習(xí)者對(duì)網(wǎng)頁(yè)設(shè)計(jì)技術(shù)，加固對(duì)網(wǎng)站結(jié)構(gòu)、頁(yè)面布局、HTML元素等知識(shí)的理解。本項(xiàng)目主要使用HTML、CSS、XML等技術(shù)。二、網(wǎng)站結(jié)構(gòu)三、總體設(shè)計(jì)要求所有風(fēng)格統(tǒng)一，簡(jiǎn)潔大方，采用DIV+CSS布局，表單部分可以使用表格布局。所有顯示樣式全部采用CSS樣式表，不允許使用HTML屬性控制顯示樣式。設(shè)計(jì)瀏覽器分辨率為1024*768，頁(yè)面寬度為1000px，當(dāng)用戶瀏覽器分辨率更高時(shí)，頁(yè)面居中顯示，頁(yè)面尺寸要求如下：頁(yè)面使用到的圖片素材應(yīng)統(tǒng)一存放在images子文件夾下。四、具體頁(yè)面設(shè)計(jì)要求網(wǎng)站首頁(yè)（index.html）參考界面：設(shè)計(jì)要求：項(xiàng)目要求網(wǎng)站Logo點(diǎn)擊網(wǎng)站Logo之后可以連接到首頁(yè)（其他頁(yè)面同樣有此要求）。快速登錄通過(guò)左側(cè)Email和密碼可以實(shí)現(xiàn)快速登錄，處理登錄的程序?yàn)閘ogin.aspx，采用POST方式，登錄成功后自動(dòng)轉(zhuǎn)到用戶空間頁(yè)面（myspace.html）。頂部連接使用無(wú)序列表實(shí)現(xiàn)，連接一般狀態(tài)為“灰白色、下劃線”，鼠標(biāo)放在其上時(shí)字體變亮、下劃線消失；點(diǎn)擊時(shí)分別轉(zhuǎn)到相應(yīng)的目標(biāo)頁(yè)面底部連接使用無(wú)序列表實(shí)現(xiàn)，連接一般狀態(tài)為“灰白色、下劃線”，鼠標(biāo)放在其上時(shí)字體變亮、下劃線消失；點(diǎn)擊時(shí)分別連接到相應(yīng)的目標(biāo)頁(yè)面，點(diǎn)擊“京ICP證XXXX號(hào)”在新窗口打開(kāi)工業(yè)和信息化部備案網(wǎng)站（://）；點(diǎn)擊“聯(lián)系方式”可以自動(dòng)打開(kāi)用戶系統(tǒng)默認(rèn)的郵件客戶端程序向master@kaixin001發(fā)送郵件，郵件標(biāo)題為“網(wǎng)友來(lái)信了”頁(yè)面主體請(qǐng)根據(jù)圖示完成注冊(cè)頁(yè)面（reg.html）參考頁(yè)面：設(shè)計(jì)要求：項(xiàng)目要求網(wǎng)站Logo、快速登錄、頂部連接、底部連接的設(shè)計(jì)要求與網(wǎng)站首頁(yè)同（以下頁(yè)面設(shè)計(jì)要求中將不再重復(fù)）。左側(cè)尺寸140px注冊(cè)表單注冊(cè)表單的處理程序?yàn)閞egister.aspx，采用POST方式。表單中文本框的字體大小為14px；邊框粗細(xì)為1像素、邊框顏色為黑色。性別、生日、目前身份、隱私設(shè)置用單選按鈕或下拉列表實(shí)現(xiàn)。表單確認(rèn)按鈕字體大小為14px，按鈕顏色為暗紅色。注冊(cè)成功頁(yè)面（reg_succeed.html）參考頁(yè)面：設(shè)計(jì)要求：項(xiàng)目要求感謝注冊(cè)采用DIV布局，字體大小為14px。注冊(cè)成功后5秒鐘頁(yè)面自動(dòng)跳轉(zhuǎn)到登錄頁(yè)面（login.html）。登錄頁(yè)面（login.html）參考頁(yè)面：設(shè)計(jì)要求：項(xiàng)目要求登錄頁(yè)面通過(guò)Email和密碼可以實(shí)現(xiàn)快速登錄，處理登錄的程序?yàn)閘ogin.aspx，采用POST方式，登錄成功后自動(dòng)轉(zhuǎn)到用戶空間頁(yè)面（myspace.html）。用戶空間（myspace.html）參考頁(yè)面：設(shè)計(jì)要求：項(xiàng)目要求左側(cè)列表采用無(wú)序列表實(shí)現(xiàn)，連接一般狀態(tài)為“藍(lán)色、加粗、下劃線”，鼠標(biāo)放到其上顯示為“紅色、加粗、無(wú)下劃線”。右側(cè)Tab菜單采用無(wú)序列表實(shí)現(xiàn)，活動(dòng)的Tab背景為白色，非活動(dòng)的Tab背景為灰色幫助中心頁(yè)面（help.html）參考頁(yè)面：設(shè)計(jì)要求：項(xiàng)目要求右側(cè)分類鏈接用DIV標(biāo)簽實(shí)現(xiàn)三列布局，采用無(wú)序列表嵌套實(shí)現(xiàn)一級(jí)分類和二級(jí)分類。鏈接一般狀態(tài)為“12px、墨綠色、下劃線”，鼠標(biāo)放在其上時(shí)字體演示為紅色。分類幫助（help_account.html）參考頁(yè)面：設(shè)計(jì)要求：項(xiàng)目要求分類幫助同一主題（如“賬戶”）的幫助信息在同一個(gè)頁(yè)面中，點(diǎn)擊“幫助主題索引”時(shí)頁(yè)面跳轉(zhuǎn)到相應(yīng)幫助主題部分，點(diǎn)擊幫助主題后的“Top”回跳到主題索引部分。意見(jiàn)反饋意見(jiàn)（feedback.html）參考頁(yè)面：設(shè)計(jì)要求：項(xiàng)目要求意見(jiàn)反饋表單表單交由fe