国开2020《Web开发基础》形考任务1-5题目汇总.docx

实验1：电商网站前端页面内容编写（16分） 【目标】根据素材中的设计图，编写网站首页，查询列表页和详情页三个网页的html内容（暂时不用编写CSS代码） 【时间】约4学时 【步骤】 1．根据素材中给定的网站首页设计图实现租房网首页HTML内容的定义 图1 网站首页设计图 包括： （1）顶部主导航栏和登录状态按钮 　　①点击logo，可跳转回首页 　　②点击”租房”，可跳转到租房列表页面 （2）上部广告区域 （3）中部热链接按钮列表 （4）下部二维码广告区域 （5）底部页脚内容 2．根据素材中给定的房源查询页面设计图实现“租房”页面的HTML内容 图2 房源查询页面设计图 包括: （1）新的顶部主导航栏和登录状态按钮 （2）上部搜索框和搜索条件区域 （3）下方租房信息列表及分页按钮，其中点击租房列表中的图片可跳转到详情页 3．根据素材中给定的房屋详情页面设计图实现租房详细信息页面的HTML内容 图3 房屋详情页面设计图 包括: （1）标题 （2）左侧图片展示区域 （3）右侧租房主要信息项 （4）下方租房详细信息 说明：对页面内容和布局结构，根据自己的理解可以进行适当改造和修改加工，不可完全雷同 【实验要求】 需要提交的材料为实验报告。 实验报告由实验目标、实验环境、实验内容、实验结果、实验体会五个方面构成，其中，实验结果为本阶段编写的网页的运行效果截图。网站三个页面的HTML代码和素材图片的压缩包作为实验报告附件。 需要提交的材料以WinRAR或WinZip等压缩包形式上传。本实验占形考成绩的16%。 【实验评价要点】 辅导教师对提交的三个网页的HTML代码进行评价，评价应该包括： 1．能够使用HTML5结构元素和div分区元素，划分页面整体结构 2．能够灵活使用列表元素定义导航 3．能够灵活使用a元素定义各种超链接 4．能够按照设计图要求，为网页添加图片 5．能够利用表单元素为网页添加信息收集的功能 6．能够利用表格元素定义查询结果列表 7．除完成设计效果图规定的内容外，还要模仿当前网页设计，自行添加一个自定义的网页内容区域，并用HTML实现其基础内容和结构 实验2：电商网站前端页面 CSS 样式编写（24分） 【目标】根据素材中的设计图要求，在实验1成果基础上，为网页添加CSS样式 【时间】约6学时 【步骤】 1.按图1所示，为实验1中的首页内容添加CSS样式，使其符合设计图的要求 2.按图2所示，为实验1中的租房列表页面添加CSS样式，使其符合设计图的要求 3.按图3所示，为实验1中的租房详情页添加CSS样式，使其符合设计图的要求 4.为自行添加的自定义页面内容区域，按照自己的设计，定义CSS样式。 【实验要求】 需要提交的材料为实验报告。 实验报告由实验目标、实验环境、实验内容、实验结果、实验体会五个方面构成，其中，实验结果为本阶段编写的网页的运行效果截图。三个网页的HTML代码和CSS代码以及素材图片的压缩包作为实验报告附件。 需要提交的材料以WinRAR或WinZip等压缩包形式上传。本实验占形考成绩的24%。 【实验评价要点】 辅导教师对提交的三个网页的HTML和CSS代码进行评价，评价应该包括： 1.能够使用CSS中定位属性，实现网页整体和局部的布局。 2.能够使用CSS中列表样式和浮动属性，定义各种列表和导航条的样式。 3.能够使用CSS中表格样式定义查询结果列表的样式 4.能够使用各种字体，背景，图片等样式，按照设计图要求，定义网页局部细节的样式 5.除完成设计效果图规定的样式外，还要对实验1中自行添加的部分内容，添加CSS样式。 实验3：电商网站前端页面动效实现（8分） 【目标】为首页添加规定的动画效果 【时间】约2学时 【步骤】 1.为首页上方广告区域添加动画效果：四张广告图片组成四面体形状，自动旋转。 2.中间三个热链接按钮，当鼠标悬停时，可添加旋转效果。 【实验要求】 需要提交的材料为实验报告。 实验报告由实验目标、实验环境、实验内容、实验结果、实验体会五个方面构成，其中，实验结果为本阶段编写的网页的运行效果截图。三个网页的HTML代码和CSS代码以及素材图片的压缩包作为实验报告附件。 需要提交的材料以WinRAR或WinZip等压缩包形式上传。本实验占形考成绩的8%。 【实验评价要点】 辅导教师对提交的企业网站站点进行评价，评价应该包括： 1.能够使用CSS3变换，将多个图片组成四面体 2.能够使用CSS3动画，定义四面体自动旋转，暂停等 3.能够使用过渡和变换，为普通按钮或图片添加动效 4.除完成设计效果图规定的动画效果外，还要对实验1和实验2中自行添加的部分内容，添加部分自行设计的动画效果。 实验4：电商网站前端页面 LESS 编写（1