原副标题：北欧国家对外开放理工学院高教《WEB合作开发此基础》形考各项任务标准答案1-5
试验1：B2C中文网站后端页面文本撰写（16分）
【最终目标】依照片断中的草图，撰写中文网站主页，查阅条目页和详情页四个页面的html内容（暂不必撰写CSS标识符）
【天数】约4自修
【关键步骤】
1．依照片断中取值的中文网站主页草图同时实现廉租房网主页HTML文本的表述
北欧国家对外开放理工学院高教《Web合作开发此基础》形考各项任务试验12345标准答案
图1 中文网站主页草图
包括：
（1）顶端主导航系统栏和登入状况按键
①点选logo，可重定向回主页
②点选”廉租房”，可重定向到廉租房条目页面
（2）下部电视广告地区
（3）东部热镜像按键条目
（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：B2C中文网站后端页面 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：B2C中文网站后端页面动效同时实现（8分）
【最终目标】为主页添加规定的动画效果
【天数】约2自修
【关键步骤】
1.为主页上方电视广告地区添加动画效果：四张电视广告图片组成四面体形状，自动旋转。
2.中间四个热镜像按键，当鼠标悬停时，可添加旋转效果。
【试验要求】
需要提交的材料为试验报告。
试验报告由试验最终目标、试验环境、试验文本、试验结果、试验体会五个方面构成，其中，试验结果为本阶段撰写的页面的运行效果截图。四个页面的HTML标识符和CSS标识符以及片断图片的压缩包作为试验报告附件。
需要提交的材料以WinRAR或WinZip等压缩包形式上传。本试验占形考成绩的8%。
【试验评价要点】
辅导教师对提交的企业中文网站站点进行评价，评价应该主要包括：
1.能够使用CSS3变换，将多个图片组成四面体
2.能够使用CSS3动画，表述四面体自动旋转，暂停等
3.能够使用过渡和变换，为普通按键或图片添加动效
4.除完成设计效果图规定的动画效果外，还要对试验1和试验2中自行添加的部分文本，添加部分自行设计的动画效果。
试验4：B2C中文网站后端页面 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：B2C中文网站后端页面响应式设计（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/
