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

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

【時間】約4學時

【步驟】

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

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

包括：

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

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

　?、邳c擊”租房”，可跳轉(zhuǎn)到租房列表頁面

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

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

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

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

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

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

包括:

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

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

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

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

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

包括:

（1）標題

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

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

（4）下方租房詳細信息

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

【實驗要求】

需要提交的材料為實驗報告。

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

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

【實驗評價要點】

輔導教師對提交的三個網(wǎng)頁的HTML代碼進行評價，評價應(yīng)該包括：

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

2．能夠靈活使用列表元素定義導航

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

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

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

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

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

奧鵬，國開，廣開，電大在線，各省平臺，新疆一體化等平臺學習
詳情請咨詢QQ : 3230981406或微信:aopopenfd777