河北開放大學(xué)24秋實(shí)驗(yàn)1：電商網(wǎng)站前端頁面內(nèi)容編寫（16分）

【目標(biāo)】根據(jù)素材中的設(shè)計(jì)圖，編寫網(wǎng)站首頁，查詢列表頁和詳情頁三個(gè)網(wǎng)頁的html內(nèi)容（暫時(shí)不用編寫CSS代碼）

【時(shí)間】約4學(xué)時(shí)

【步驟】

1．根據(jù)素材中給定的網(wǎng)站首頁設(shè)計(jì)圖實(shí)現(xiàn)租房網(wǎng)首頁HTML內(nèi)容的定義

圖1 網(wǎng)站首頁設(shè)計(jì)圖

包括：

（1）頂部主導(dǎo)航欄和登錄狀態(tài)按鈕

　?、冱c(diǎn)擊logo，可跳轉(zhuǎn)回首頁

　　②點(diǎn)擊”租房”，可跳轉(zhuǎn)到租房列表頁面

（2）上部廣告區(qū)域

（3）中部熱鏈接按鈕列表

（4）下部二維碼廣告區(qū)域

（5）底部頁腳內(nèi)容

2．根據(jù)素材中給定的房源查詢頁面設(shè)計(jì)圖實(shí)現(xiàn)“租房”頁面的HTML內(nèi)容

圖2 房源查詢頁面設(shè)計(jì)圖

包括:

（1）新的頂部主導(dǎo)航欄和登錄狀態(tài)按鈕

（2）上部搜索框和搜索條件區(qū)域

（3）下方租房信息列表及分頁按鈕，其中點(diǎn)擊租房列表中的圖片可跳轉(zhuǎn)到詳情頁

3．根據(jù)素材中給定的房屋詳情頁面設(shè)計(jì)圖實(shí)現(xiàn)租房詳細(xì)信息頁面的HTML內(nèi)容

圖3 房屋詳情頁面設(shè)計(jì)圖

包括:

（1）標(biāo)題

（2）左側(cè)圖片展示區(qū)域

（3）右側(cè)租房主要信息項(xiàng)

（4）下方租房詳細(xì)信息

說明：對(duì)頁面內(nèi)容和布局結(jié)構(gòu)，根據(jù)自己的理解可以進(jìn)行適當(dāng)改造和修改加工，不可完全雷同

【實(shí)驗(yàn)要求】

需要提交的材料為實(shí)驗(yàn)報(bào)告。

實(shí)驗(yàn)報(bào)告由實(shí)驗(yàn)?zāi)繕?biāo)、實(shí)驗(yàn)環(huán)境、實(shí)驗(yàn)內(nèi)容、實(shí)驗(yàn)結(jié)果、實(shí)驗(yàn)體會(huì)五個(gè)方面構(gòu)成，其中，實(shí)驗(yàn)結(jié)果為本階段編寫的網(wǎng)頁的運(yùn)行效果截圖。網(wǎng)站三個(gè)頁面的HTML代碼和素材圖片的壓縮包作為實(shí)驗(yàn)報(bào)告附件。

需要提交的材料以WinRAR或WinZip等壓縮包形式上傳。本實(shí)驗(yàn)占形考成績的16%。

【實(shí)驗(yàn)評(píng)價(jià)要點(diǎn)】

輔導(dǎo)教師對(duì)提交的三個(gè)網(wǎng)頁的HTML代碼進(jìn)行評(píng)價(jià)，評(píng)價(jià)應(yīng)該包括：

1．能夠使用HTML5結(jié)構(gòu)元素和div分區(qū)元素，劃分頁面整體結(jié)構(gòu)

2．能夠靈活使用列表元素定義導(dǎo)航

3．能夠靈活使用a元素定義各種超鏈接

4．能夠按照設(shè)計(jì)圖要求，為網(wǎng)頁添加圖片

5．能夠利用表單元素為網(wǎng)頁添加信息收集的功能

6．能夠利用表格元素定義查詢結(jié)果列表

7．除完成設(shè)計(jì)效果圖規(guī)定的內(nèi)容外，還要模仿當(dāng)前網(wǎng)頁設(shè)計(jì)，自行添加一個(gè)自定義的網(wǎng)頁內(nèi)容區(qū)域，并用HTML實(shí)現(xiàn)其基礎(chǔ)內(nèi)容和結(jié)構(gòu)

奧鵬，國開，廣開，電大在線，各省平臺(tái)，新疆一體化等平臺(tái)學(xué)習(xí)
詳情請(qǐng)咨詢QQ : 3230981406或微信:aopopenfd777