搜索
网页设计&产品内页设计电子商务美工电子商务部目录页CONTENTSPAGE第二章产品页设计第一章网页设计目录网页设计第一章—4—前台网站后台企业内部信息系统物流中心支付中心认证中心供应者采购者第一章网页设计1.电子商务网站概述1.1电子商务系统的构成—5—电子商务政策法律人才信用规范社会基础支柱网络平台基础平台应用平台电子商务五大社会支柱第一章网页设计1.电子商务网站概述1.2电子商务的体系结构—6—•1、定义：–电子商务网站市企业开展电子商务的基础设施和信息平台，是实施电子商务的公司或商家与服务对象之间的交互界面，是电子商务系统运转的承担者和表现者。–区别与一般web站点：以数据处理为主，数据类型复杂、数据流量大，数据交换频繁。运行效率和数据安全是影响电子商务网站架构的重要因素。第一章网页设计1.电子商务网站概述2、基本电子商务网站的构成要素–网站的域名及地点–网站的页面–商品目录–购物车、付款台、商品配送–计数器、留言板–会员管理–商品库存管理—7—第一章网页设计2.网站和网页的区别•1、网页：–当浏览者输入一个网址或者单击一个链接，在浏览器上就会看到文字、图像、动画、视频、音频等内容，能够承载这些内容的页面就称为网页。浏览网页是互联网应用最广的功能，网页时网络的基本组成部分。–根据页面内容可以分首页、主页、专栏网页、内容网页和功能网页等类型；按制作技术分为静态网页与动态网页。•2、网站：–网站就是把一些网页等信息文件通过超链接的形式关联起来形成的信息文件的集合。信息可以是网页形式也可以是其他的文档形式。—8—HTML＋浏览器→网站网页→第一章网页设计2.网站和网页的区别—9—第一章网页设计3.动态网页和静态网页动态网页与静态网页是相对应的，网页URL（统一资源定位符（URL，英语UniformResourceLocator的缩写）也被称为网页地址，是因特网上标准的资源的地址。）的后缀以htm、html、shtml、xml等常见形式出现的，是静态网页。而网页URL的后缀以asp、jsp、php、perl、cgi等形式出现的，就是动态网页。(1)静态网页每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“?”;(2)网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件;(3)静态网页的内容相对稳定，因此容易被搜索引擎检索;(4)静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难;(5)静态网页的交互性差，在功能方面有较大的限制。(1)动态网页以数据库技术为基础，可以大大降低网站维护的工作量;(2)采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等;(3)动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页;(4)动态网页中的“?”对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，或者出于技术方面的考虑，搜索蜘蛛不去抓取网址中“?”后面的内容，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。动态网页可以是纯文本内容的，也可以是包含各种动画内容的，这些都是网页具体内容的表现方式，无论网页是否有动态效果，采用动态网站技术生成的网页都称为动态网页。从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但是从网站开发、管理、维护的角度来看就有很大的差别。静态网页的特点：动态网页的一般特点：—10—伪静态是相对真实静态来讲的。通常我们为了更好的缓解服务器压力，和增强搜索引擎的友好面。都将文章内容生成静态页面。但是有的朋友为了实时的显示一些信息。或者还想运用动态脚本解决一些问题。不能用静态的方式来展示网站内容。但是这就损失了对搜索引擎的友好面。怎么样在两者之间找个中间方法呢，这就产生了伪静态技术。就是展示出来的是以.html一类的静态页面形式，但其实是用ASP一类的动态脚本来处理的。第一章网页设计3.动态网页和静态网页伪静态:如何分辨动态网页和静态网页？打开你想判断的网站后，再在网址框中输入javascript:alert(document.lastModified)IE5以上...，此方法可以判断一个网页的最后更新时间，如果这个时间与现在的时间相同，说明是伪静态的，反之为静态的。—11—第一章网页设计4.网页的基本构成元素网页由网址（URL）来识别与存取，当访问者在浏览器的地址栏中输入网址后，通过一段时复杂而又快捷的程序，网页文件会被传送到访问者的计算机内，然后通过浏览器把这些HTML代码“翻译”成图文并茂的网页。Flash动画图像文字视频图像链接构成元素含义文本和图像这是网页中两个最基本的构成元素，目前所有的网页中都有他们的身影。超链接网页中的链接又可分为文字连接和图像链接两种，只要访问者用鼠标来单击带有链接的文字或者图像，就可以自动链接到对应的其他文件，这样才让网页能够链接成为一个整体，超链接也是整个网络的基础。动画网页中的动画可以分为GIF动画和Flash动画两种。动态的内容总是要比静止的内容能够吸引人们的注意力，因此精彩的动画能够让网页更加丰富。表单这是一种可以再访问者和服务器之间进行信息交互的技术，使用表单可以完成搜索、登录、发送邮件等交互功能。音频/视频随着网络技术的不断发展，网站上已经不再是单调的图像和文字内容，越来越多的设计人员会在网页中加入视频、背景音乐等，让网站更加富有个性、时尚和魅力。—12—第一章网页设计5.网页设计的基本原则一个优秀的网站要有一个明确的主题，整个网站设计要围绕这个主题进行制作，也就是说在网页设计之前要明确网站的目的，所有网页都是要围绕着这个内容来制作。首页设计得如何是整个网站成功与否的关键，反映整个网站给人的整体感觉。能否吸引访问者，全在于首页的设计效果。首页最好要清楚，具有人性化的类别选项，让访问者可以快速的找到自己想要的内容。网站的分类也十分重要，可以按主题分类、按性质分类、按组织结构分类，或者按人们的思考方式分类等等。无论是哪一种分类的方法，都要让访客很容易的找到目标。明确主题1首页很重要2分类3好的网站必须与使用者有良好的互动性，包括在整个设计呈现、使用介面导引上等等，都应该掌握互动的原则，让使用者感觉他的每一步都确实得到适当的回应，这部分需要一些设计上的技巧与软硬件支持。事实上，好的网站设计必须加上个人技巧、经验累积以及软硬件技术的配合运用等。互动性4—13—技术是令人着迷的东西，许多人也喜欢使用技术。专家普遍指出，好的技术运用会让网页栩栩如生，令人叹为观止；但不当的技术则适得其反，反而成为网页的大败笔。首先，使用技术时一定要考虑传输时间，不要成为他人观看的沉重负担；其次，技术一定要与本身网站的性质及内容相配合，不要耍了一大堆不相干的技术。最后，技术最好不要用得太过多样而复杂，有些人似乎不展现功力就不快乐，所以也不管合不合适，就把所有可用技术全部用在里面，这时大家就会看到一个惨不忍睹的页面。图片是网站的特色之一，它带有醒目、吸引人以及传达信息的功能，好的图片应用可以让网页增色不少，但不当的图片应用则会带来反效果，而其中又以大量使用无意义及大型的图片成为网页设计的败笔。目前国内的网络传输资源极为有限，因此使用图片时一定要考虑传输时间的问题。根据经验与统计，使用者可以忍受的最长等待时间大约是30秒钟，如果您的网页无法在这段时间内传输并显示完毕，那么使用者就会毫不留情掉头离去。因此必须依据HTML文件、图片文件的大小，考虑传输速率、延迟时间、网络交通状况，以及服务端与使用者端的软硬件条件，估算网页的传输与显示时间。在图片使用上，尽量采用一般浏览器均可支持的压缩图片格式，例如JPEG与gif等，而其中JPEG的压缩效果较好，适合中大型的图片，可以节省传输时间第一章网页设计5.网页设计的基本原则图像应用技巧5避免滥用技术6及时的更新和维护7访问者希望看到新鲜的东西，没有人对过时的信息感兴趣，因此网站的信息一定要及时及时性，时刻保持着新鲜感是很重要的。—14—启－互动开场，引起兴趣2信息：有价值的内容才会吸引访问者1整体布局：好的网页应该干净、整洁、条理清楚、布局清晰5文字的可读性：选用常用的字体，用于正文和标题、利于阅读4图像和版面设计：图像和版面应集中反映网站所传达的主要信息内容6多媒体功能应用：动画视频更能吸引注意力，但需要考虑客户端的传输速度3下载速度：确保打开页面速度尽可能快，一般人不会很有耐心的等导向清晰：按照人们的阅读习惯去设置人性化的导向7第一章网页设计6.网页设计的成功要素设计一个成功的网站，具体有下列几条基本因素，这些因素对网站的成功与否有着重要的影响。—15—第一章网页设计7.网页的风格网页的风格风格（style）是抽象的，是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI“CorporateIdentitySystem”企业形象识别系统”（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。风格的形成需要在开发中不断强化、调整和修饰，也需要不断向优秀网站学习。具体设计时，对于不同性质的行业，应体现出不同的网站设计风格。一般情况下，政府部门的网站风格应比较庄重沉稳，文化教育部门的网站应该高雅大方，娱乐行业的网站可以活泼生动一些，商务网站可以贴近民俗，而个人网站则可以不拘一格，更多地结合内容和设计者的兴趣，充分彰显个性。—16—第*页第一章网页设计8.网页的色彩搭配三原色人眼对红、绿、蓝最为敏感，人的眼睛像一个三色接收器的体系，大多数的颜色可以通过红、绿、蓝三色按照不同的比例合成产生。同样，绝大多数单色光也可以分解成红、绿、蓝三种色光，这是色度学的最基本的原理，也称三原色原理。红色+绿色=黄色绿色+蓝色=青色红色+蓝色=品红红色+绿色+蓝色=白色—17—冷暖色ColorCircle色环WarmColor暖色我们将火苗的颜色：红、黄和橙色归为暖色。试验表明在红色的灯光下，我们的身体会不自觉地分泌更多的肾上腺素，同时血压升高、血液循环加快，体温上升。ColdColor冷色那些在蓝色和绿色区域内的则被称为冷色。蓝色和绿色很容易让人联想起水和树所特有的镇定的品质。实验显示蓝色和绿色的光线能够缓和心跳，降低体温，放松肌肉。第一章网页设计8.网页的色彩搭配—18—色彩与情感第一章网页设计8.网页的色彩搭配—19—色彩与情感第一章网页设计8.网页的色彩搭配•红色:•橙色：•黄色：•绿色：•蓝色：•白色：活力、力量、温暖、坚持、愤怒、急躁喜悦、安全、创造力、刺激、快乐、乐观、担心和谐、放松、和平、真诚、满意、慷慨和平、宽广、希望、忠诚、灵活、容忍和平、纯洁、孤立、宽广神秘、沉稳、严肃、气质•黑色：这两个色块一样大吗？—20—色彩与品牌第一章网页设计8.网页的色彩搭配—21—网站用色第一章网页设计8.网页的色彩搭配无论是平面设计、还是网页设计、色彩永远是最重要的一环。当距离显示屏较远的时候，看到的不是优美的版式设计或者美丽的图片，而是网页的色彩。用一种色彩，先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。用两种色彩，先选中一种色彩，然后选择它的对比色。用一个色系，简单地说就是用一个感觉的色彩，例如淡蓝、淡黄、淡绿、或者土黄、土灰、土蓝。注意：在网页配色中，还要切记一些误区：1、不要将所有颜色都用到，尽量控制在三至五种色彩以内。2、背景和前文的对比尽量要大（绝对不要用花纹繁复的图案做背景），以便突出主要文字内容。—22—第一章网页设计8.网页的色彩搭配—23—第一章网页设计8.网页的色彩搭配—24—第一章网页设计8.网页的色彩搭配虎彩商城用色？红色代表着吉祥、喜气