国家开放大学电大《WEB开发基础》形考任务答案1 |
您所在的位置:网站首页 › wed开发基础形考任务4及答案 › 国家开放大学电大《WEB开发基础》形考任务答案1 |
答案获取方式在文末 实验1:电商网站前端页面内容编写(16分)【目标】根据素材中的设计图,编写网站首页,查询列表页和详情页三个网页的html内容(暂时不用编写CSS代码) 【时间】约4学时 【步骤】 1.根据素材中给定的网站首页设计图实现租房网首页HTML内容的定义 国家开放大学电大《Web开发基础》形考任务实验12345答案 图1 网站首页设计图 包括: (1)顶部主导航栏和登录状态按钮 ①点击logo,可跳转回首页 ②点击”租房”,可跳转到租房列表页面 (2)上部广告区域 (3)中部热链接按钮列表 (4)下部二维码广告区域 (5)底部页脚内容 2.根据素材中给定的房源查询页面设计图实现“租房”页面的HTML内容 国家开放大学电大《Web开发基础》形考任务实验12345答案 图2 房源查询页面设计图 包括: (1)新的顶部主导航栏和登录状态按钮 (2)上部搜索框和搜索条件区域 (3)下方租房信息列表及分页按钮,其中点击租房列表中的图片可跳转到详情页 3.根据素材中给定的房屋详情页面设计图实现租房详细信息页面的HTML内容 国家开放大学电大《Web开发基础》形考任务实验12345答案 图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 编写(12分)【目标】将实验2中三个页面的CSS代码用less重新组织 【时间】约3学时 【步骤】 1.使用Less语法重新组织三个页面中相同的颜色、字体等属性值,集中定义在一处 2.使用Less语法根据定义的基准值,定义部分修正的值。 3.使用Less语法简写复杂结构的选择器定义 4.使用Less语法重用部分相同的样式属性。 【实验要求】 需要提交的材料为实验报告。 实验报告由实验目标、实验环境、实验内容、实验结果、实验体会五个方面构成,其中,实验结果为本阶段编写的网页的运行效果截图。三个网页的HTML代码、CSS代码和less代码以及素材图片的压缩包作为实验报告附件。 需要提交的材料以WinRAR或WinZip等压缩包形式上传。本实验占形考成绩的12%。 【实验评价要点】 辅导教师对学员的实际操作进行评价,评价应该包括: 1.能够合理使用Less的变量,集中定义相同的CSS属性值 2.能够合理使用算数计算,根据Less变量的值,动态生成新的CSS属性值 3.能够利用Less语法最大限度的简化和重用复杂选择器的结构 4.能够利用Less中的混合和函数最大限度的重用CSS属性 5.将自己添加的部分页面的CSS代码一并转为Less 实验5:电商网站前端页面响应式设计(20分)【目标】按照素材中设计图将实验1和实验2中的首页,改为响应式 【时间】约5学时 【步骤】 1.根据以下三张不同设备下的设计图,使用Bootstrap栅格系统,将首页转为响应式网页 PC下:PC下: 国家开放大学电大《Web开发基础》形考任务实验12345答案 Pad下: 国家开放大学电大《Web开发基础》形考任务实验12345答案 手机下: 国家开放大学电大《Web开发基础》形考任务实验12345答案 【实验要求】 需要提交的材料为实验报告。 实验报告由实验目标、实验环境、实验内容、实验结果、实验体会五个方面构成,其中,实验结果为本阶段编写的网页的运行效果截图。新版首页的HTML代码、CSS代码以及素材图片的压缩包。 需要提交的材料以WinRAR或WinZip等压缩包形式上传。本实验占形考成绩的20%。 【实验评价要点】 辅导教师对学员的实际操作进行评价,评价应该包括: 1.使用Bootstrap栅格系统实现顶部响应式导航条 2.使用Bootstrap轮播组件修改上部广告为轮播方式 3.使用相对单位和弹性布局实现列表项在不同设备中的正常显示 4.除完成设计效果图规定的布局效果外,还要保证自行添加的自定义部分内容在不同设备下也能支持响应式 本课程答案来源于:https://dianda.wangkebaohe.com/1350/ ![]() ![]() 发布于:四川 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |