电米乐M6 米乐子商务网页设计与制作 第2版 项目十一 电子商务网站综合实例ppt
电子商务网页设计与制作 第2版 项目十一 电子商务网站综合实例.ppt
电子商务网页设计与制作 第2版 项目十一 电子商务网站综合实例.ppt
免费在线继续使用相同的方法，完成其他页面原型的制作，店铺展示页面效果如图所示。将“热区”元件从“元件库”多次拖入页面中，页面效果如图所示。 03选择一个热区元件，双击“检视”面板中的“鼠标单击时”事件，如图所示。在弹出的“用例编辑”对话框中双击“打开链接”动作，在右侧选择要打开的页面，如图所示。 04使用相同的方法，为其他几个热区添加动作，完成效果如图所示样 式。 05执行“文件保存”命令，将文件保存，单击软件界面右上角的“预览”按钮，在浏览器中查看制作效果和交互效果，如图所示样式。 4 新手试炼——根据电子商务网站原型设计页面 网站原型设计制作完成后，设计师既可以根据原型开始设计网站页面。由于已经将网站的布局和交互都确定下来了，设计师在设计页面时，只需要考虑页面的美观性即可。大大的减少了设计师的工作复杂度。 任务描述——电子商务网站页面设计与制作 1 技术引入——浏览器适配的方法 2 新手试炼——使用FTP维护电子商务网站 3 4 11.3 任务二 睿欧电子商务网站的设计与制作 任务实施——设计睿欧电子商务网站 1 任务描述——电子商务网站页面设计与制作 该网站中使用了大量的JavaScript动效，使得页面效果非常的生动活泼，同时极简的设计风格也与产品极为相符，网站首页主要布局结果如图所示。 2 技术引入——浏览器适配的方法 1.跨浏览器适配通用的方法 根据开发需求，跨浏览器设计有多种解决方案，如果仅仅是要求在低版本IE浏览器中能够正常显示页面布局和内容，可以采用渐变增强的设计，仅仅使用一套代码，在布局方面采用一些兼容性的措施，保证不出现布局错乱即可。 而如果要保证所有的浏览器显示效果一致的话，一方面不得不放弃一些很炫酷的效果，例如使用CSS 3实现的元素变形与动画效果；另一方面不得不使用更多的图片，降低页面加载的性能；甚至我们可能必须根据用户浏览器的不同编写多套代码。 兼容性问题五花八门，这里先向大家介绍一种通用的方法，那就是通过条件注释让不同的浏览器加载不同的CSS样式，示例代码如下。 2.理解浏览器的私有CSS属性 当一个新的CSS属性被开发出来后，由于W3C标准的申请和审核流程十分严格和漫长，浏览器厂商往往会暂时绕开这一流程，通过添加前缀的方式让自己的浏览器率先支持新的属性，本节将向大家介绍各种不同浏览器的私有属性前缀。 不同核心的浏览器都定义了自己的私有CSS属性前缀，以下是在网站的制作过程中经常会用到的私有CSS属性的前缀。 ?-webkit：Webkit核心浏览器的私有CSS属性前缀，包括Chrome、Safari浏览器等。 ?-moz：Gecko核心浏览器的私有CSS属性前缀，主要是Firefox浏览器。 ?-ms：Trident核心浏览器的私有CSS属性前缀，主要是IE浏览器。 ?-o：Presto核心浏览器的私有CSS属性前缀，主要是Opera浏览器。 在实际的网站页面制作和开发过程中，对于大多数CSS 3属性来说，考虑到浏览器兼容性，往往需要把所有的浏览器私有属性都写上去，例如如下的CSS样式设置代码。 3.CSS属性前缀的排序 即使W3C标准得到了一致通过和广泛推广，但浏览器厂商为了兼容老的内容，还是不得不继续支持带有前缀的私有CSS属性，而开发者面对一些使用低版本浏览器的用户时，也不得不继续在编写CSS样式代码时写上所有的属性前缀。 但是问题随之产生：“W3C标准属性在某些情况下与带有前缀的属性具有不同的表现形式，那有什么解决方法呢？” 这一方面需要依赖网站开发者的知识和经验，另一方面也可以采取通用的方法，就是把W3C的标准语法放在CSS规则的最后面，例如如下的CSS样式设置代码。 3 任务实施——设计睿欧电子商务网站 01新建站点，如图所示。新建html文件，并将其保存为index.htnl文件，新建CSS文件，并将其附加到index.html上，如图所示样式。 02依次在页面中插入div，然后在style.css文件中创建对应的样式，完成效果如图所示。 03继续使用相同的方式，完成站点中其他页面的制作，如图所示。在源代码中，将外部的JS链接到页面中，完成轮替图的交互效果，如图所示。 04通过在“行为”面板中，添加“显示-隐藏元素”行为，如图所示，实现触发事件，如图所示。 05添加行为实际就是在Dreamweaver在源代码中添加了JavaScript代码，如图所示样式。在div中创建列表，源代码如图所示。 06继续使用相同的方法，在页面中添加JavaScript代码，实现更多的交互效果，如图所示。使用相同的方法，在其他也中添加javascript脚本，实现交互动画效果。 4 新手试炼——使用FTP维护电子商务网站 除了常规的系统管理外，如果需要对页面结构或文件进行修改，可以通过FTP将文件下载下来，修改完成后再上传回去即可。常见的FTP工具有FlashFXP 。 PPT模板下载：/moban/ 行业PPT模板：/hangye/ 节日PPT模板：/jieri/ PPT素材下载：/sucai/ PPT背景图片：/beijing/ PPT图表下载：/tubiao/ 优秀PPT下载：/xiazai/ PPT教程： /powerpoint/ Word教程： /word/ Excel教程：/excel/ 资料下载：/ziliao/ PPT课件下载：/kejian/ 范文下载：/fanwen/ 试卷下载：/shiti/ 教案下载：/jiaoan/ 字体下载：/ziti/ THANKS 本项目以一个睿欧电子商务网站为例，向读者全面展示了一个电子商务网站从无到有的过程。从网站原型制作开始，将网站策划以模型的形式展示出来。到网站页面的设计，最后到网站的制作都进行了分析和讲解。同时也对网站的上传与管理进行了介绍，帮忙读者全方位的了解电子商务网站的制作方法和流程 项目十一 电子商务网站综合实例 电子商务网站的发展局势 1 电子商务网站产品原型 2 电子商务网站的上传与管理 3 4 11.1 知识链接 电子商务网站浏览器兼容性测试 1 电子商务网站的发展局势 目前，大多数人已经在使用声控界面（VUI）进行操作了，苹果的Siri、三星的Bixby、谷歌的Alexa等。预计在外来网站设计中，将会出现使用语音激活网上商店，进行商品搜索并购买的行为。 1.语音控制操作 2.专用移动应用程序 电子商务已经在智能手机中普及开了，但是由于手机品牌众多。为了使不同的用户都可以获得好的用户体验，在未来的电子商务设计中，将会充分考虑移动设备的适配问题。为不同的机型创建专用的移动应用程序，是未来电子商务网站的设计思路。 3.更多的视频内容 视频内容在2018年非常流行，各种短视频平台层出不穷。在自己的电子商务网站中加入视频，用来说明商品和展示操作技巧，比使用图片和文本更能展示商品的优点，促进商品转化率。 一半的网络用户预计网站会在2秒或更短的时间内加载，而且他们倾向于放弃在3秒内未加载的网站。79％的网络购物者在网站表现出现问题时表示他们不会再回到网站购买，大约44％的人会告诉朋友他们网上购物的体验不佳。“为了获得更好的用户体验，在设计制作网站时，使用更规范更简洁的设计，加快页面的加载速度是非常必要的。 庞大的用户群，也为网站的安全性带来了考验，一旦发生信息泄露等事件，在资讯高度共享的今天，将给网站带来毁灭性的打击。即使你的电子商务网站只是很小的企业，也需要作出此类考虑，保持网站的安全性。 4.速度和安全性 5.粘滞导航面板 当用户向下滚动页面时，页面中会出现一个固定导航栏跟随滚动。这种效果是目前设计的重点。用户在浏览不同的页面时向下滚动，可以查看更多产品。同时允许用户在网站的任何位置都可以访问到导航菜单，尤其是当提示显示所选商品价格跟新时，都能有效的刺激用户，产生转化率。 微交互能够鼓励用户进行真正的互动，能够帮助形成习惯性循环的工具。对于电子商务网站来说，只需实现简单地奖励用户的行为即可。无论是简单的站内短信还是添加到购物车等操作，都可以使用动画触发反应。或者通过不同的颜色的徽章活图标展示不同的信息或操作，提醒用户进行交互操作。 6.微交互 7.个性化与品牌元素 电子商务网站的个性化程度越高，用户对它的感受就越多。设计一个个性化的网站，可以从网站的标志着手，采用与标志核心价值观一致的视觉元素，是一个不错的选择。 网站品牌的树立也非常重要，可以帮助加强公司形象，让用户更容易记住并识别你的品牌。在设计电子商务网站时，可以在网站的标题图片、背景、表单以及与客户交互的效果，都采用品牌视觉效果填充，可以大大提升网站的品牌效应。 2 电子商务网站产品原型 简单点说，产品原型就是产品设计成形之前的一个简单框架，对互联网行业来说，就是将页面模块、各种元素进行排版和布局，获得一个大致的页面效果，如图所示。为了使效果更加具体、形象和生动，还会加入一些交互性的元素，模拟页面的交互效果。米乐M6 米乐 1.纸质 设计师用笔直接在纸上进行产品原型的描绘，获得大致的原型效果，如图所示。这种方式通常是在产品经理进行原型构思阶段使用。通过这种方式可以将原型产品的构思和框架基本确定，然后再通过专业的软件将原型更形象更直观的转移到电子文档中，以便后续的研讨、设计、开发和备案。 2.Word和VISIO 使用Word进行原型设计。在Word文档建立一块画布，使用文本框、图片、控件等组合起来，形成一个原型设计方案，如图所示。Word文档门槛低，使用方便，功能效果丰富，如果一个熟练者设置可以达到一个很好的高保真页面。不过Word文档中的WEB控件功能有限，且交互性也比较弱。 VISIO创建原型，如图所示。比Word更加便于操作。可以进行快速原型设计，但表现力较弱。一些简单的页面还可以，大型页面就不行了。 3.专业原型设计工具 目前专业的原型设计工具有很多，比较常见的有Axure RP、Irise Studio和Mockup Screens等。这些工具软件不仅具有丰富的Web控件，而且交互性也做的很好。其中Axure RP 是其中的佼佼者，如图所示。 3 电子商务网站浏览器兼容性测试 1.使用Modernizr检查支持情况 Modernizr是一个检测浏览器对HTML 5标签和CSS 3属性是否支持的JavaScript库，它是一个开源项目，托管在Github，访问地址是/Modernizr/Modernizr。 Modernizr的功能其实很简单，就是使用JavaScript检测浏览器对HTML5和CSS 3的特性支持情况。支持某个属性，就在页面的html标签上添加一个相应的class，不支持某个属性就添加一个带no-前缀的class。例如，如果被检测的浏览器支持video标签，Moderniar就会在html标签上添加video类，否则，添加no-video类。 Movernizr除了添加相应的class到HTML元素以外，还提供一个全局的Modernizr JavaScript对象，该对象提供了不同的属性来表示当前浏览器是否支持某种新特性。例如，下面的代码可以用来判断浏览器是否支持canvas和local storage。 2.各浏览器对CSS3的支持情况 各大主流浏览器对CSS 3的支持越来越完善，曾经让多少前端开发人员心碎的IE也开始挺起CSS 3标准行列。当然，即使CSS 3标准制定完成，现代浏览器要普及到大部分用户也是一个相当漫长的过程。如果现在就要使用CSS 3来美化你的网站，有必要对各大主流浏览器对其新技术的支持情况有一个全面的了解。 4 电子商务网站的上传与管理 1.购买域名 选择购买域名时，最好选择比较大的服务商，以保证网站能够长期稳定访问。阿里云旗下的万网就是不错的选择。在浏览器地址栏中输入，即可进入万网，在搜索栏中输入想要购买的域名，如图所示。 2.国际域名 ?com：Commercial organizations,商业组织,公司 ?xyz：创意、创新；三维空间与无限可能 ?net：Network operations and service centers,网络服务商 ?top：顶级、米乐M6 米乐高端、适用于任何商业 公司 个人 ?tech：科技、技术 ?org：Other organizations,非盈利组织 ?gov：Governmental entities,政府部门 ?edu：Educational institutions,教研机构：internet king 互联网之王，同时英文单词是墨水的意思 ?red：吉祥、红色、热情、勤奋 ?int：International organizations,国际组织 ?mil：Military (U.S),美国军部 ?pub： public大众、公共、知名。 3.国内域名 ?cn: 中国国家顶级域名 ? 中国公司和商业组织域名 ? 中国网络服务机构域名 ? 中国政府机构域名 ? 中国非盈利组织域名 有了属于自己的域名后，还需要一个用来存放网站文件的空间，这个空间在Internet上就是服务器，有两种方式供用户选择，分别为虚拟主机方式和独立的服务器，用户可以根据网站的内容设置以及发展前景进行适当的选择。 在阿里云页面底部，找到“域名与网站”选项，单击“云虚拟主机”选项，如图所示。根据制作的需求，选择不同价格的方案即可，如图所示。 任务描述——睿欧电子商务网站结构和层级 1 技术引进——了解产品原型软件Axure 2 新手试炼——根据电子商务网站原型设计页面 3 4 11.2 任务一 设计睿欧电子商务网站的原型 任务实施——制作睿欧电子商务网站原型 1 任务描述——睿欧电子商务网站结构和层级 本任务将完成睿欧电子商务网站的原型制作，通过使用Axure 将整个站点中的所有页面和交互效果制作出来，以保证网站在设计开发过程中的反复修改，提高工作效率，完成网站原型公司简介和店铺展示页如图所示。 2 技术引进——了解产品原型软件Axure Axure RP是美国Axure Software Solution公司的旗舰产品，是一个专业的快速原型设计工具。让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。 作为专门的原型设计工具，它比一般创建静态原型的工具，如Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver、Visual Studio、FireWorks要快速、高效。目前Axure RP的最新版本为8.0，软件界面如图所示。 Axure RP 8.0的工作界面看起来非常的简单，结构清晰，非常方便用户使用。界面中各区域如图所示。 1.菜单栏 菜单栏位于软件界面的最顶端。按照功能划分为文件、编辑、视图、项目、布局、发布、团队、账号和帮助8个菜单，如图所示。每个菜单中包含同类的操作命令。用户可以根据要执行的操作类型在对应的菜单下选择操作命令。 2.工具栏 Axure RP 8中的工具栏由上半部的基本工具和下半部的样式工具两部分组成，如图所示。下面针对每个基本工具按钮进行下介绍。 3.面板 在Axure RP 8中一共为用户提供了5个功能面板，分别是页面、元件库、母版、检视和概要。默认情况下，这5个面板分为2组，分别排列于视图的两侧，如图所示。 3 任务实施——制作睿欧电子商务网站原型 01在Axure中分别将图片元件、三级标题元件、文本段落元件和矩形元件拖入到页面中，并修改文字标题，完成首页面结构原型，如图所示样式。在“页面”面板中创建网站页面结构，完成效果如图所示。
一种有机磷酸锌-硅烷复合钝化膜改性锌金属负极及其制备方法与应用.pdf
月饼内包装[五级上册综合实践教案4.饼包装“绿”起来,｜沪科黔科版].docx
原创力文档创建于2008年，本站为文档C2C交易模式，即用户上传的文档直接分享给其他用户（可下载、阅读），本站只是中间服务平台，本站所有文档下载所得的收益归上传人所有。原创力文档是网络服务平台方，若您的权利被侵害，请发链接和相关诉求至 电线) ，上传者
扫一扫关注微信公众帐号
