河北開放大學24秋實驗1：電商網站前端頁面內容編寫（16分）

【目標】根據素材中的設計圖，編寫網站首頁，查詢列表頁和詳情頁三個網頁的html內容（暫時不用編寫CSS代碼）

【時間】約4學時

【步驟】

1．根據素材中給定的網站首頁設計圖實現租房網首頁HTML內容的定義

圖1 網站首頁設計圖

包括：

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

　　①點擊logo，可跳轉回首頁

　?、邳c擊”租房”，可跳轉到租房列表頁面

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

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

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

（5）底部頁腳內容

2．根據素材中給定的房源查詢頁面設計圖實現“租房”頁面的HTML內容

圖2 房源查詢頁面設計圖

包括:

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

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

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

3．根據素材中給定的房屋詳情頁面設計圖實現租房詳細信息頁面的HTML內容

圖3 房屋詳情頁面設計圖

包括:

（1）標題

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

（3）右側租房主要信息項

（4）下方租房詳細信息

說明：對頁面內容和布局結構，根據自己的理解可以進行適當改造和修改加工，不可完全雷同

【實驗要求】

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

實驗報告由實驗目標、實驗環(huán)境、實驗內容、實驗結果、實驗體會五個方面構成，其中，實驗結果為本階段編寫的網頁的運行效果截圖。網站三個頁面的HTML代碼和素材圖片的壓縮包作為實驗報告附件。

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

【實驗評價要點】

輔導教師對提交的三個網頁的HTML代碼進行評價，評價應該包括：

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

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

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

4．能夠按照設計圖要求，為網頁添加圖片

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

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

7．除完成設計效果圖規(guī)定的內容外，還要模仿當前網頁設計，自行添加一個自定義的網頁內容區(qū)域，并用HTML實現其基礎內容和結構

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