电子商务网页制作-项目一.pptx

《电子商务网页制作-项目一.pptx》由会员分享，可在线阅读，更多相关《电子商务网页制作-项目一.pptx（45页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、项目一项目一 赏析电子商务网站页面赏析电子商务网站页面项目综述通过比较和分析，掌握电子商务企业网站和典型电子商务网站的设计需求、页面组成部分、常见布局方式和配色方法，通过学习能够模仿同类网站进行设计规划。项目目标能力目标：学习完本项目后,学生应当能够依据不同的网站、网店设计需求对网站进行合理的结构规划,包括:(1)分析网站的配色方案。(2)分析网站的版式结构。(3)编写简易网站赏析报告。(4)模仿同类网站进行规划设计。知识目标：(1)网页基础知识。(2)网页的基本构成。(3)网站的构成和风格设置。(4)网页布局的常用结构。(5)网站的规划原理。Part01任务一借鉴分析典型电商企业网站的结构任

2、务引导 本任务的目标是通过分析店庆电商企业网站的结构掌握电商网站的需求分析、布局结构分析和色彩应用分析，然后了解基本的网站需求分析方法、常见排版方式和配色方式。任务实施电商企业网站的需求分析电商企业网站的布局结构分析电商企业网站的色彩应用030201知识分析1.网站规划的市场调研 网站的规划是指在网站建设前确定好网站的主题和功能目标后，对网站目标定位，进行的内容规划和功能规划。其中直接的表现就是网站结构的规划，特别对于网站前端部分而言，更为关注的是网站的栏目设计。对于确定网站的主题和功能目标而言。就是明确该电商企业网站建立的目标是企业形象展示，还是用于与用户之间进行交互、社群营销改进服务；还是

3、单纯要实现网络营销与在线交易为主的。其次，是分析考虑企业自身的经营状况，包括企业的主营产品的情况，消费市场的认知程度以及所处行业状况。目标明确后，就是市场分析，分析网络中企业现有的同类型公司的网站情况。若是比较大的网站，那么往往还需要进行调研面对市场人群的详细情况，进行目标客户分析。最后再进行可行性分析评估。知识分析2.竞品分析竞品分析通常包括背景分析和定位分析两方面：背景分析主要包括公司的资源、团队的背景，人员构成、组织架构、公司愿景、成本构成。通过背景分析，可以深入了解公司的现状，公司的风格。知识分析3.基于栅格化设计原理的网页布局 栅格系统应用于设计领域已经至少50年了。栅格化让眼睛浏览

4、信息更加愉悦。从报纸、杂志，到手机界面，栅格系统全面渗透到各种信息传达的界面当中。1692年，法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的，重视功能性的新字体。知识分析3.基于栅格化设计原理的网页布局 （1）960栅格化系统 960栅格化系统是由Nathan Smith创造的，具体来讲，就是基于960像素宽度，通过划分具有规律的分割，来提高网页开发效率。如下图所示：将960像素的页面平均分成12分，间隔10像素。960像素12栅格分割示意图知识分析3.基于栅格化设计原理的网页布局 （1）960栅格化系统 960栅格化

5、系统系统（或者说适应型css构架）早期主要用来进行快速原型制作，减少重复单调的工作，但是目前，它在网页设计开发项目中开始扮演非常重要的角色。它为我们的设计提供一个坚实的坐标基础。960像素12栅格分割示意图知识分析3.基于栅格化设计原理的网页布局（2）栅格计算方法 在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如图所示栅格化计算方法示意图W=（an）+（n-1）i由于a+i=A，可得：(An)i=W拓展练习1.版心 版心是页面中主要内容所在的区域。版面上除去周围白边，剩下的以文字和图片为主要组成

6、的部分就是版心。在对网页进行布局设计的过程中，也精彩用到版心的概念，而版心的大小通常和显示器的宽度有关。面对不同的显示器宽度常用的版心尺寸分别由：920像素、960像素、1000像素、1200像素。随着显示器的不断变宽，用户越来越喜爱宽屏所带来的视觉体验，1400像素的版心尺寸也逐渐普及。拓展练习2.网页设计常用尺寸 网页设计因其载体的限制，要充分考虑到设备的尺寸，在设计页面的过程中，设计师往往会根据屏幕大小来设计页面每个部分的宽窄，通常一个静态屏幕所展示页面的宽高可以称之为一屏，一个完整的页面是由多屏组成的。一屏的宽度由显示器宽度决定，再根据不同的浏览器进行微调。在显示器的尺寸上减去20像素

7、到30像素不会出现水平滚动条。但在实际操作中，我们通常只会对网页中的主体部分进行设计，将主体放在屏幕中间，两边留白，或者插入大的背景图。因此网页的宽度很大程度上会和版心尺寸保持一致。通常是920像素到1400像素之间。而一屏的高度通常会在600像素到800像素之间，如果超过800像素，那么该部分内容就不能在一个静态屏幕上完整显示，会进一步影响用户的体验。拓展练习3网页广告常用尺寸 网页中，不同类型的广告通常会有不同的不同的尺寸，如下表所示。网页中的广告并没有绝对的尺寸大小，在实际使用中，可以根据不同的情况进行调整。序号尺寸（单位：px）用途1120*120适用于产品或新闻照片展示。2.120*

8、60主要用于做LOGO使用。3.120*90主要应用于产品演示或大型LOGO。4125*125适于表现照片效果的图像广告。5234*60适用于框架或左右形式主页的广告链接。6392*72主要用于有较多图片展示的广告条，用于页眉或页脚。7468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。888*31主要用于网页链接，或网站小型LOGO。习题1.根据所讲5种网页布局方式，为每种布局寻找一个具体的网站案例并进行分析。2.以“农业电商app”为主题，收集相关信息，并进行竞品分析。Part02任务二借鉴赏析典型电商网站任务引导无论是作为设计师还是使用网站的客户，我们都需要有一定的审美能力去辨别不同

9、的网页。本任务的目标是通过浏览“名城房产”、“恒生电子”等中小企业的网站,来分析其页面布局、网站栏目构成、色彩搭配等,以便为同类型企业规划设计网站。TEXT HERETEXT HERETEXT HERETEXT HERESupporting text her e.Supporting text her e.Supporting text her e.Supporting text her e.Supporting text her e.Supporting text her e.知识分析1.WWW WWW是World Wide Web的缩写,也可以简称为Web,中文名字为万维网。是Intern

10、et众多服务应用中最普及、功能最丰富、最常见的一个。平时上网浏览的网页正是万维网页面,网页设计与制作也可称为Web设计与制作。WWW是由遍布在Internet上的许多互相链接的超文本文档组成的系统,它将不同信息资源以网页的形式,由统一资源定位符(Uniform/Universal Resource Locator,URI)进行标识,通过超链接(Hyperlink)和超文本传输协议(HyperText Transfer Protocol,HTTP)有机地联系在一起,可使用Web浏览器软件进行浏览。WWW的核心由三个标准构成:统一资源定位符(URL),这是一个世界通用的负责给万维网上,如网页这样的

11、资源定位的系统;超文本传送协议(HTTP),负责规定浏览器和服务器怎样互相交流;超文本标记语言(HTML),用于定义超文本文档的结构和格式。知识分析2.网页和网站 网页是构成网站的基本元素,是承载各种网站应用的平台。网站就是由一系列围绕同一主题的统一风格的网页组成的。网站的具体内容就是网页,访问网站就是通过网页浏览器来获取该网站的资源信息或者网络服务。主页,也称为“Home Page”,也是一个网页,但是一个特殊的网页。一般每一个网站必须有且只有一个主页,该主页与该网站的URL绑定,当在浏览器中输入一个网站的URL时,在浏览器上将显示该网站的主页。主页相当于网站的正门。当然,访问一个网站不一定

12、通过主页进入,但是想要规范系统地了解一个屋子,还是需要通过正门进入。主页作为网站的正门,也是一个标志,体现了整个网站的制作风格和主题,主页上通常还会包含有整个网站的导航目录。知识分析2.网页和网站 网站中的网页一般包括静态网页和动态网页两种形式。静态网页是指不和后台数据库交互的网页,是显示HTML格式的网页,内容相对固定,当需要改变其信息内容时,必须重新使用网页制作工具来对其进行修改,修改后的网页还要重新上传到服务器上覆盖原来的页面。在静态网页上,可以出现各种动态的效果,如GIF动画、flash、滚动字幕等,这些动态效果并不会改变页面本身的内容。动态网页通常由数据库交互和相应的应用程序构成,采

13、用动态网站技术生成。动态网页文件一般以.asp、.aspx、.jsp、.php等为扩展名。并且在动态网页网址中常有一个标志性的符号-“?”,如“http:/ 网页版面布局大致可分为“同字形”、“拐角形”、“标题正文形”、“封面形”、“框架形”、“flash形”等。“同字形”,也称为“回字形”,是国内企业类网站主页最常用的类型,即分为顶端、主体和底部。顶端常由网站logo、banner和导航条构成。主体部分是网站的主要内容,一般分为三列,左右分列一些类目,中间是主要部分,有时也分为均分的四列。“同字形”最主要的特点就是沿中轴线左右大致对称。底部是网站的一些基本信息、联系方式、版权声明等。这种结构

14、是一般企业网站的首选,这种布局能体现出稳重的风格,同时也能显现出大气。知识分析3.网页版面布局类型 “拐角形”分为“左拐角形”和“右拐角形”,国内企业网站常采用“左拐角形”,这种结构与“同字形”很接近,只是形式上的区别,主要区别在主体部分,它分为两列,“左拐角形”左侧列表为一窄列,右列则很宽,“右拐角形”反之,其余顶端和底部和“同字形”类似。因此,这种布局经常和“同字形”结合运用,很多企业网站主页采用“同字形”,二级页面采用“左拐角形”,能够很好地体现整个网站的一贯风格。知识分析3.网页版面布局类型“标题正文形”,该类型最上面是标题或类似的一些东西,然后是分割线,接着就是正文,很像平时的文章。

15、这种类型多用于网站的新闻页面中。“封面形”,基本上出现在一些网站的首页,整个页面的绝大部分为一个动画或者精美的图像,然后通过几个简单的链接或者直接通过点击可以链接到真正的主页。这种类型主要起着美化和点题的作用,如同杂志的封面。“框架形”,就是采用框架的结构布局。常见的是“左右框架”,该结构分左右为两页,一般左面是导航链接,右面是正文。这种类型结构非常清晰,一目了然,常用于一些大型论坛中。知识分析3.网页版面布局类型“flash形”,该结构与封面形结构类似,只是这种类型采用flash来设计制作,由于flash的强大功能,页面所表达的信息更为丰富,也能直接在封面上显示交互的导航栏,主要用于服装、娱

16、乐等更注重展示效果的网页。知识分析4.构成网页的基本元素网页是网站的基本元素,而网页本身也是由一些基本元素构成的。做好网站的规划和设计,其实就是对各个网页的基本元素进行规划和设计。构成网页的基本元素包括logo、banner、导航条、文字、图像、多媒体、动态特效、表格、框架、超链接、表单等。知识分析4.构成网页的基本元素(1)logo。网站logo,也叫网站标志,它是一个网站的象征。网站标志一般放在网页的左上角。网站标志应体现该网站的特色、内容以及其内在的文化内涵和理念。通常企业网站的logo也就是该企业的logo。常为代表性的人物、动物、物品等,如工行的标志、搜狐的狐狸等。(2)banner

17、。网站banner,也叫网站横幅,是一种常见的网络广告和企业宣传形式。一般放在网页顶部最显著的位置,用于引起访问者注意,常用动画的形式表现。知识分析4.构成网页的基本元素(3)导航条。导航条是网页设计中的一项重要内容,为访问者提供访问所需内容的途径,利用导航条,就可以快速找到想要浏览的页面。同时导航条能清晰地展示整个网站的层次结构。一般来说,导航条在一个网站的各个页面中出现的位置是比较固定的,而且风格也是一致的。在网站中,导航条通常可分为图像导航条和文字导航条,也可分为横向导航条和纵向导航条。知识分析4.构成网页的基本元素(4)文字。网页的最基本的元素,就是网页的内容。一般企业网站的网页中的文

18、字始终是表达信息的主体。需要注意页面中文字大小、字体、颜色对比的组合,背景颜色的衬托,以及与图像等网页元素之间的排版。知识分析4.构成网页的基本元素(5)图像。图像在网页中主要起着表达信息、展示形象、衬托主题和体现风格的作用。在网页中可以使用多种格式的图像文件,其中使用最广泛的是JPEG和GIF两种格式的图像。图像还能作为背景、按钮、导航条、标题等。需要注意页面中的图像和网站主题的关系,以及和页面内容的关系。知识分析4.构成网页的基本元素(6)多媒体。多媒体元素主要包含动画、声音、视频等,更多的起美化页面使网页效果更为丰富的作用。和图像一样,多媒体元素也需要注意和网站主题的关系,以及和页面内容

19、的关系。还需要注意多媒体的格式,多媒体的格式非常多,尽可能采用主流格式,在常见的网页浏览器中能够显示,而不需要再去下载解码器。动画主要使用GIF动画格式和更为丰富的flash动画,动画的常见格式为.swf等。声音的常见格式为.mp3、.wma、.rm、.midi、.wav等。视频的常见格式为.avi、.mpeg、.mp4、.rm等。知识分析4.构成网页的基本元素(7)动态特效。为了使网页效果更加丰富,增加与访问者的互动,在网页中也越来越多地使用各种动态特效,如飘浮广告、广告图片自动轮换、图像淡出等。动态特效主要依靠一些控件和脚本语言(如JavaScript、VBScript)生成。(8)表格。

20、表格是网页中最常见的页面布局元素。控制着其他页面元素的位置以及页面的显示效果。表格由单元格组成,表格布局完成后,各元素分别填充到表格的单元格中。知识分析4.构成网页的基本元素(9)框架。框架也是网页中常见的页面布局元素,作用就是把网页在一个浏览器窗口下分割成几个不同的区域,从而实现在一个浏览器窗口中显示多个页面。使用框架布局可以让网站的结构更加清晰,而且各个框架之间不存在干扰问题。(10)超链接。超链接可以连接不同网页或站点,各个网页链接在一起后,才能构成一个网站。超链接实质是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是图像、电子邮件地址

21、、文件,甚至是一个应用程序。而在网页中用于超链接的对象,通常是一段文字或者是一个图像文件。知识分析4.构成网页的基本元素(11)表单。表单是一种特殊的网页元素,通常用于收集信息或实现一些交互式的效果。表单的主要功能是接收用户在浏览器端的输入信息,然后将这些信息发送到服务器端,由服务器进行处理。常见于网页登录、注册、搜索部分。知识分析5.网页设计与制作工具 进行网页设计与制作,往往通过辅助软件来完成。教程中所用的辅助软件主要是:网页编辑工具Dreamweaver;图像处理工具Photoshop;动画制作工具Flash。拓展练习1.CSS网页布局方式在网页设计时，除了视觉上的几种布局方式以外，在网

22、页实现发布到互联网上时，也有常用的布局方式，通常被称为CSS网页布局。（1）固定布局固定布局为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。这种布局具有很强的稳定性与可控性，也没有兼容性问题，但不能根据用户的屏幕尺寸做出不同的表现。即如果用户的屏幕分辨率小于这个宽度就会出现滚动条，如果大于这个宽度则会留下空白。因当今设备的显示的多元化，该布局方式基本已经淘汰。拓展练习1.CSS网页布局方式（2）流式布局 流式布局是为网页设置一个相对的宽度，页面元素的大小按照屏幕分辨率进行适配调整，但整体布局不变，通常以百分比做为长度单位，高度通常以像素为单位进行固定。流式布局的代表作栅格系

23、统（网格系统）。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是 Pinterest，后逐渐在国内流行。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。但其自身也有一定的缺点，例如因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调。拓展练习1.CSS网页布局方式（3）栅格化布局 栅格化布局是指将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度

24、单位来划分成均等的长度。比如像 bootstrap，foundation 这些框架采用的就是栅格系统，只要给页面元素添加其栅格系统指定的类名，就能达到想要的响应式布局效果。拓展练习1.CSS网页布局方式（4）自适应布局 自适应布局的特点是分别为不同的屏幕分辨率定义布局，即为不同类别的设备创建不同的静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换调用相应的布局（页面元素位置发生改变而大小不变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。拓展练习1.CSS网页布局方式（5）响应式布局响应式布局的目标是确保一个页面在所有终端

25、上（各种尺寸的PC、手机、ipad等）都能显示出令人满意的效果。通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的展示效果，一般情况下是检测设备屏幕的宽度来实现。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。拓展练习1.CSS网页布局方式（6）弹性布局 弹性布局跟流布局很像，网页宽度不固定，使用 em 或 rem 单位进行相对布局，避免了使用像素 px 布局在高分辨率下几乎无法辨识的缺点，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。但弹性布局也有局限性，如果不对这种布局设置一个最小宽度，当用户缩小窗口到一定程度时会造成布局严重错位。习题1.分析“淘宝网”、“阿里巴巴中国站”主页的特点。2.比较淘宝电子商务网站和行业性电子商务商城网站,分析它们的结构和特点。谢谢观看&欢迎指导！