资源简介

教案名称 任务十二 制作化妆品网站 计划学时 2学时
知识目标 能够创建化妆品网站主页、登录页、注册页，搭建页面结构，添加页面元素和内容能够设置网页中各元素的CSS样式
思政目标 坚定文化自信，增强民族自豪感 ( https: / / www. / link m=bgS7LtnbFJ5hQG6y7XIwfImuxFgYAf%2BTTsBWdNV31M8cStcwIyotxcewiLSOYh%2F1%2FD9VMIvktxh3uW6o9ky0IKn1iOFZHl04GppTKkRkGiSX5R%2BFjo0%2BhxqQ2RO1D2CBAp9CHLAXrwabxrw3syDHCcjBAODffNcThV4hPnuw2Dm2rUJVy5FKjQ6sfVMPpzT2iKJ4kcP%2BoqjRIaYVSM0JJOFmh2ZQXAOzaIFBNL702dMLMf4njB%2Fe21aU%2B2ww%3D" \t "_blank )培养一丝不苟的精神
教学重点 网站规划，主页布局结构，动画
教学难点 网站规划，CSS3动画网站登录页面
教学模式 教学做一体化线上+线下混合教学
教学活动及主要环节 思政元素切入点
第1学时（网站主页设计）课前发布任务：观看学台相关学习视频。做课前测试题。I.导入新课：（5分钟）本项目学习电商网站的设计与制作。通过最新的HTML5+CSS3制作技术的应用，做出更加绚丽多彩的网页，学会在网页上添加音频和视频，并用CSS3的动画制作技术，使做出的网站可以不使用JavaScript或JQuery就可以实现动画效果。II.重难点内容讲授：（35分钟）一、百雀羚品牌描述百雀羚品牌创立于1931年，是中国历史悠久的护肤品牌。经过多年不懈创新与努力发展，百雀羚已经成长为较好的中国护肤品牌。本任务创建百雀羚化妆品网站的主页、登录页和注册页。二、网站需求分析随着互联网的普及，网上展示自己企业的产品变得越来越有必要，设计公司网站的目的，就是能使任何人在任何时候、任何地方都能借助网络了解企业的基本情况与最新的产品信息。三、 网站的风格定位在过去几年里，网站设计的风格发生了巨大变化，现代流行扁平化的设计风格，整洁美观和简单易用是网站设计流行的关键。本网站尽量采用简洁大方的设计风格，这对搜索和加载速度也是极有利的。在配色上，为了展现百雀羚的自然健康的价值理念，采用绿色作为主色调。四、规划草图五、网站主页设计1.准备工作在HBuilderX中，新建项目，项目名称为chapter12，在项目中新建一个网页文件，命名为index.html，在项目的css目录中创建样式表文件，文件名为index.css。将该样式表文件链接到主页index.html中，另外，将图标字体的样式表文件也链接到主页中。打开index.css文件，书写通用样式及初始样式。2．制作网站主页上部存放视频的大盒子包含头部、导航、音视频和图片等。其中，头部可以分为左（LOGO）和右（登录、注册控件）两部分，导航结构清晰，分为左、中、右3部分。当鼠标指针悬停于导航的左侧“选项”上时，出现侧边栏，因此，在导航左侧还需添加侧边栏部分。导航右侧的4个小图标是通过引用iconfont矢量图标实现的。3．制作“至臻宠爱畅销榜单”部分当鼠标悬停到图片上时，从图片上方下拉出遮罩效果。4．制作“百雀羚草本系列”部分当鼠标悬停在图片上时，图片翻转，显示另一张图片。5．制作“评测中心”部分当鼠标悬停在logo图片上时，logo图片缩小并消失，另一张logo图片缩小并出现。6．页脚及版权部分设计III.课堂小结：（5分钟）网站描述需求分析风格定位主页动画第2学时（制作网站登录页面、注册页面）课前发布任务：观看学台相关学习视频。做课前测试题。I.新课内容：（40分钟）一、制作网站登录页面该页面分为3部分，头部、中部和底部，头部又分为左、右两部分，中部是表单，底部是公司名称。搭建结构制作网站登录页面，文件名为login.html。2.定义样式在项目中创建CSS文件，文件名为login.css，添加样式代码如下。二、制作网站注册页面网站注册页面和网站登录页面基本类似。1.搭建结构文件名为register.html2.定义样式在项目中创建CSS文件，文件名为register.css。II.课堂小结：（5分钟）添加表单pattern正则表达式为表单添加CSS样式作业： 完成网站主页、登录页面和网站注册页面。 "百雀羚"是上海百雀羚日用化学有限公司(英文缩写:SPDC)旗下品牌成立于1931年，是一家民营企业。2008年曾获"中国驰名商标"称号。此前"百雀羚"已连续两次获"上海市著名商标"。2017年，百雀羚成为国际化妆品化学家联合会(IFSCC) 在中国的首个金级会员。 在"Brand Finance"全球最有价值的50个化妆品和个护品牌"排行榜中 ，并于2021年成为跻身全球top15的中国美妆品牌 。态度决定高度,细节决定成败。登录、注册页面要简洁，错误提示应描述清楚并且便于阅读，增强用户体验感。

展开更多......

收起↑