国家开放大学《Web开发基础》形考任务实验1-5参考答案.pdf

国家开放大学《Web开发基础》形考任务实验1-5参考答案

实验1电商网站前端页面内容编写

【目标】根据素材中的设计图，编写网站首页，查询列表页和详情页三个网

htmlCSS代码）

页的内容（暂时不用编写

【时间】约4学时

【步骤】

1根据素材中给定的网站首页设计图实现租房网首页HTML内容的定义

图1网站首页设计图

包括：

(1)顶部主导航栏和登录状态按钮

句点击logo,可跳转回首页

“租房”，可跳转到租房列表页面

＠点击

(2)上部广告区域

(3)中部热链接按钮列表

(4)下部二维码广告区域

(S)底部页脚内容

2根据素材中给定的房源查询页面设计图实现“租房”页面的HTML内容

图2房源查询页面设计图

包括：

(1)新的顶部主导航栏和登录状态按钮

索

(2)上部搜框和有哪些信誉好的足球投注网站条件区域

(3)下方租房信息列表及分页按钮，其中点击租房列表中的图片可跳转到

详情页

3根据素材中给定的房屋详情页面设计图实现租房详细信息页面的HTML内

容

图3房屋详情页面设计图

包括：

(1)标题

(2)左侧图片展示区域

(3)右侧租房主要信息项

(4)下方租房详细信息

说明：对页面内容和布局结构，根据自己的理解可以进行适当改造和修改加

工，不可完全雷同

【实验要求】

需要提交的材料为实验报告。

实验报告由实验目标、实验环境、实验内容、实验结果、实验体会五个方面

构成，其中，实验结果为本阶段编写的网页的运行效果截图。网站三个页面的

HTML代码和素材图片的压缩包作为实验报告附件。

需要提交的材料以WinRAR或WinZip等压缩包形式上传。本实验占形考成

%

绩的16。

【实验评价要点】

辅导教师对提交的三个网页的HTML代码进行评价，评价应该包括：

HTMLS结构元div

1能够使用素和分区元素，划分页面整体结构

2.

能够灵活使用列表元素定义导航

3能够灵活使用a元素定义各种超链接

4能够按照设计图要求，为网页添加图片

5能够利用表单元素为网页添加信息收集的功能

6能够利用表格元素定义查询结果列表

7一个

除完成设计效果图规定的内容外，还要模仿当前网页设计，自行添加

HTML

自定义的网页内容区域，并用实现其基础内容和结构

参考答案：

电商网站前端页面内容编写实验报告

一、实验目标

根据给定的设计图，编写电商网站（以租房网为例）的首页、查询列表页和

详情页三个网页的HTMLHTMLS的基本结构div分

内容。通过实践，掌握元素、

区、列表元素、超链接、表单元素、表格元素等的使用，以及如