Web前端开发案例教程（HTML5+CSS3） 第12章 案例：电商网站.pptxVIP

第12章 完整案例：电商网站 ※ 进一步掌握HTML5+CSS3网页布局的方法； ※ 掌握音频和视频的添加方法； ※ 掌握CSS3的动画制作技术； 2 12.1 12.2 12.3 12.4 雅诗兰黛化妆品公司网站描述 网站规划 网站主页设计 网站其它页设计 第12章 完整案例：电商网站 12.1 3 雅诗兰黛化妆品公司网站描述 第12章 完整案例：电商网站 4 雅诗兰黛集团由雅诗·兰黛和约瑟夫·兰黛始创于1946年。目前，雅诗兰黛集团傲居世界化妆品行业领先地位，生产和营销高品质的护肤、彩妆、香水和护发产品。 本网站所有图片和视频均来自网络。下面是创建完成的雅诗兰黛化妆品公司网站主页面的浏览效果图，如图12-1到12-3所示。 5 图12-1　网站主页上部 6 图12-1　网站主页上部 7 图12-3　网站主页底部 12.2 8 网站规划 第12章 完整案例：电商网站 9 12.2.1 网站需求分析 10 在过去几年里，网站设计的风格发生了巨大变化，现代设计的发展趋势迅速流行扁平化的配色方案，整洁美观和简单易用是网页设计趋势的流行。本网站尽可以采用简洁大方的设计，这对搜索和加载速度也是极有利的。在配色上，采用蓝色为主色调。 12.2.2 网站的风格定位 11 12.2.3 规划草图 12 12.2.4 素材准备 本网站的所有素材如图所示。其中，audio文件夹存放音频文件，video文件夹存放视频文件，css文件夹存放样式表文件，images文件夹存放所有图像文件，fonts文件夹存放从网上下载的图标字体文件。另外，字体库文件夹是关于字体使用的介绍文件，放在这儿便于用户学习如何使用从网上下载的字体。 12.3 网站主页设计 13 14 主页设计步骤： 1．创建网站文件夹 在磁盘E盘根目录下创建网站文件夹：电商网站，将素材中提供的所有文件夹拷贝到该文件夹下。 2．创建站点 启动DreamWeaver，通过“站点”｜“新建站点”命令，创建网站站点，站点名称为：电商网站，本地站点文件夹为：E:\电商网站\。 3．新建网页 在站点中新建一个网页文件，命名为“index.html”。 4．创建CSS样式表文件 在站点中创建CSS样式表文件，文件名为index.css。然后书写通用样式及初始样式，代码略。 15 主页设计步骤： 5．附加样式表文件 在index.html文件的头部标记中，将index.css样式表附加到“index.html”页面中，代码如下： link rel=stylesheet type=text/css href=css/index.css 16 主页设计步骤： 6．制作网站首页的上部 17 主页设计步骤： 7．制作雅粉挚爱心愿榜单部分 18 主页设计步骤： 8．制作我要试妆部分 19 主页设计步骤： 9．制作评测中心部分 20 主页设计步骤： 10．制作脚部及版权部分 12.4 21 网站其它页设计 第12章 完整案例：电商网站 22 其它页设计由同学们自行完成。 23 23 本案例使用HTML5+CSS3的最新结构元素构建页面内容；大量运用了图像元素显示化妆品的视觉效果；音频和视频的运用为网站添加了动感的效果；另外，运用CSS3的最新动画制作技术实现了图像的变换、旋转、放大或缩小等效果。通过该网站的学习，可以学会最流行的WEB前端制作技术。 感谢您的观看！