中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）任务12 完整项目：化妆品网站设计与实现 同步课件(共28张PPT)

(课件网) 任务12 完整项目：制作化妆品网站 Web前端开发案例教程 HTML5+CSS3 微课版 完整项目：制作化妆品网站 任务12 本任务以设计上海百雀羚日用化学有限公司网站为例，学习电商网站的设计与实现。本任务通过最新的HTML5+CSS3制作技术的应用，做出更加绚丽多彩的网页效果；在网页上添加了音频和视频；利用CSS3的动画制作技术实现了动画，使做出的网站可以不使用JavaScript或jQuery就可以实现动画效果。 12.1 任务描述 化妆品网站首页效果图 注册页面 登录页面 其他页面效果图 12.1 任务描述 知识点 HTML5+CSS3进行网页布局 01 CSS3动画 02 网站规划 随着互联网的普及，在网上展示企业的产品变得越来越重要，设计化妆品网站的目的，就是使人可以方便地了解产品的基本情况与最新的信息。 本网站设计目的？ 问题的提出 12.2 网站规划 上海百雀羚日用化学有限公司网站的主要功能 网站需求分析 12.2 网站规划 在过去几年里，网站设计的风格发生了巨大变化，现代设计的发展趋势迅速流行扁平化的配色方案，整洁美观和简单易用是网页设计流行的趋势。本网站尽量采用简洁大方的设计，这对搜索和加载速度也是极有利的。在配色上，展现百雀羚的自然健康的价值理念，采用绿色为主色调。 网站的风格定位 12.2 网站规划 首页规划草图 12.2 网站规划 素材准备 audio文件夹存放音频文件 video文件夹存放视频文件 css文件夹存放样式表文件 images文件夹存放所有图像文件 iconfont文件夹存放从网上下载的图标字体文件 12.2 网站规划 网站主页设计 1．创建项目 在HBuilderX中，新建项目，项目名称：chapter12，位置位于“E:/Web前端开发/源码”目录下。 2．准备素材 将本例所用素材复制到chapter12文件夹中。 3．新建网页 在项目中新建一个网页文件，命名为“index.html”。 12.3 制作网站主页 主页设计步骤 4．创建CSS样式表文件 在项目的CSS文件夹中创建CSS样式表文件，文件名：index.css，将该样式表文件链接到主页index.html中，另外，也将图标字体的样式表文件链接到主页中。 5．网站主页上部设计 主页设计步骤 12.3 制作网站主页 分为主标题、副标题和产品三部分。 当鼠标指针悬停到产品图片上时，从图片上方下拉出遮罩效果。 6．“至臻宠爱畅销榜单”部分设计 主页设计步骤 12.3 制作网站主页 7．“百雀羚草本系列”部分设计 主页设计步骤 分为主标题、副标题和产品三部分。 当鼠标指针悬停到产品图片上时，图片翻转，出现第二张图片。 12.3 制作网站主页 8．“评测中心”部分设计 主页设计步骤 分为主标题、副标题和产品三部分。 当鼠标指针悬停到产品图片上时，图片缩小并消失，出现第二张图片。 12.3 制作网站主页 9．脚部及版权部分设计 主页设计步骤 分为上面的LOGO图片和下面的表单部分。 12.3 制作网站主页 网站登录页面设计 12.4 制作网站登录页面 浏览效果如下图所示 该页面分为三部分，头部、中间部分和底部，头部内容又分为左右两部分，中间是表单，底部是公司名称。 分析效果图 结构搭建 添加样式 表单内主要控件有：单行文本框、密码框、提交按钮。 12.4 制作网站登录页面 制作网站注册页面 12.5 制作网站注册页面 页面浏览效果如下图所示 该页面分为三部分，头部、中间部分和底部，头部内容又分为左右两部分，中间是表单，底部是公司名称。 分析效果图 结构搭建 添加样式 表单内主要控件有：单行文本框、密码框、提交按钮。 通过设置pattern属性，用正则表达式所定制的模式来对字符串进行匹配。 用placeholder属性设置描述输入字段预期值的简短的提示信息。 12.5 制作网站注册页面 任务3 制作化妆品网站 任务12 任务小结 使用HTML5+CSS3的最新结构元素构建页面内 ... ...