任务12 完整项目-制作爱心助农水果商城网站

教案名称任务十二制作爱心助农水果商城网站计划学时2学时知识目标能熟练创建各页面结构能熟练设置网页中各元素的CSS样式素质目标培养关爱他人的习惯在代码编写中养成精益求精的工匠精神教学重点网站规划，主页布局结构，样式定义教学难点网站规划CSS3过渡、变形等属性的使用主页样式代码的编写教学模式教学做一体化线上+线下混合教学教学活动及主要环节素养提升第1学时（网站主页设计）课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.导入新课：（5分钟）随着信息技术的飞速发展和互联网的普及，电子商务已经成为现代商业的重要模式。然而在农业领域，很多优质农产品面临着销售困境，农民增收困难。本任务制作爱心助农水果商城网站，借助互联网的优势打破地域限制，将水果直接推向更广阔的市场，提高流通效率，连接起农民和消费者，具有重要的现实意义。本任务将创建爱心助农水果商城网站的主页、登录页和注册页。=2\*ROMANII.重难点内容讲授：（35分钟）一、任务描述二、网站规划三、网站的风格定位四、规划草图五、网站主页设计1.准备工作在HBuilderX中，新建项目，项目名称为chapter12，在项目中新建一个网页文件，命名为index.html，在项目的css目录中创建样式表文件，文件名为index.css。将该样式表文件链接到主页index.html中，另外，将图标字体的样式表文件也链接到主页中。打开index.css文件，书写通用样式及初始样式。2．制作网站主页上部存放视频的大盒子包含头部、导航、音视频和图片等。其中，头部可以分为左（LOGO）和右（登录、注册控件）两部分，导航结构清晰，分为左、中、右3部分。当鼠标指针悬停于导航的左侧“选项”上时，出现侧边栏，因此，在导航左侧还需添加侧边栏部分。导航右侧的4个小图标是通过引用iconfont矢量图标实现的。3．制作“至臻宠爱畅销榜单”部分当鼠标悬停到图片上时，从图片上方下拉出遮罩效果。4．制作“百雀羚草本系列”部分当鼠标悬停在图片上时，图片翻转，显示另一张图片。5．制作“评测中心”部分当鼠标悬停在logo图片上时，logo图片缩小并消失，另一张logo图片缩小并出现。6．页脚及版权部分设计=3\*ROMANIII.课堂小结：（5分钟）网站描述需求分析风格定位主页动画第2学时（制作网站登录页面、注册页面）课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.新课内容：（40分钟）一、制作网站登录页面该页面分为3部分，头部、中部和底部，头部又分为左、右两部分，中部是表单，底部是公司名称。搭建结构制作网站登录页面，文件名为login.html。2.定义样式在项目中创建CSS文件，文件名为login.css，添加样式代码如下。二、制作网站注册页面网站注册页面和网站登录页面基本类似。1.搭建结构文件名为register.html2.定义样式在项目中创建CSS文件，文件名为register.css。=2\*ROMANII.课堂小结：（5分钟）添加表单pattern正则表达式为表单添加CSS样式作业：完成网站主页、登录页面和网站