电子商务网站建设与网页设计1.pptx

1、构建电子商务网站CHAPTER ONE 随着互联网技术的飞速发展，电子商务已经渗透到各行各业。电子商务网站作为企业的重要窗口，不仅是企业品牌、文化、产品和服务宣传的信息平台，而且通过网站在线交易，能够降低经营成本，拓展发展空间。本项目将从电子商务网站的设计准则出发，详细介绍如何合理规划和设计电子商务网站结构，以及如何使用Dreamweaver创建站点等知识。能够根据网站的设计准则设计电子商务网站结构。能够使用Dreamweaver创建站点。学习目标Contents目录电子商务网站设计基础知识1电子商务网站结构设计2使用Dreamweaver创建站点3一、电子商务网站设计基础知识0102一、电子

2、商务网站设计基础知识网页及网页设计2电子商务网站的定义1网页构成要素3一、电子商务网站设计基础知识电子商务网站的定义1p 电子商务网站是基于浏览器/服务器应用方式，买卖双方互不谋面地进行各种商贸活动，实现消费者的网上购物、商户之间的网上交易和在线电子支付以及各种商务活动、交易活动、金融活动和相关的综合服务活动的一种新型的商业运营模式。B2BB2C（天猫、京东商城、亚马逊）C2C（淘宝）O2OB2QF2C京东商城网站一、电子商务网站设计基础知识网页及网页设计2DreamweaverPhotoshopFlashCorelDRAWFireworksIllustrator网页设计软件主要有：一、电子商

3、务网站设计基础知识01文本02图像03动画04超链接05网站Logo06导航条07表格08框架09表单10横幅广告网页构成要素3一、电子商务网站设计基础知识1明确网站建设目的和用户需求2总体设计主题鲜明3设计人性化的交互界面5准确无误的链接4网页形式与内容相统一6网站信息的时效性7合理利用多媒体功能8努力提高网站的性能Contents目录电子商务网站设计基础知识1电子商务网站结构设计2使用Dreamweaver创建站点3二、电子商务网站结构设计网站的物理结构0101网站的逻辑结构0202网站的构成0303网页的空间结构0404网页的布局结构0404二、电子商务网站结构设计2树形结构1扁平式结构

4、二、电子商务网站结构设计扁平式网站中任意两个页面之间都可以相互链接，网页之间的链接深度都是1。树形使用分类、频道等页面，对同类属性的页面进行链接地址组织的网站结构。链接深度大多大于1。二、电子商务网站结构设计网站的构成引导用户浏览网站其他部分的内容第一时间直观地给用户展示想展示的内容体现和突出网站主题的作用123风格各异1内容制胜首页内页2二、电子商务网站结构设计1.网页顶部u 一般在这个位置大多放的是网站Logo，登录条、页面横幅广告、菜单栏等内容都可以放在顶部。2.网页主体u 企业信息、产品介绍、业务流程等一系列想要对用户表达的内容都在这个区域。3.网页底部u 网页底部大多用于放置友情链接

5、、网站版权信息、使用协议等，也可以放一些导航链接。二、电子商务网站结构设计“国”字型结构布局页面结构清晰，主次分明，是适合初学者使用的布局方法。因为过于规矩而显得呆板，如果在细节、色彩上安排不得当，很容易让人产生视觉疲劳。优点缺点二、电子商务网站结构设计“厂”字型结构布局二、电子商务网站结构设计“回”字型结构布局将网页中不被重视的页脚利用了起来，增加了主体内容，充分利用了页面的有限空间。使页面充斥着各种内容，可能会给人造成过于繁杂的感觉。优点缺点二、电子商务网站结构设计框架型结构布局p 由于兼容性和美观等因素，这种布局目前专业设计人员采用的已经不多，不过在一些大型论坛上还是比较受青睐的，有些企

6、业网站也有应用。左右框架型A上下框架型B综合框架型C二、电子商务网站结构设计5自由式结构布局精美的平面设计，富有创意的Flash动画，精彩的视频，让表达的信息更丰富。这种结构文字过少，难以让浏览者长时间关注，有时可能因为导航条不太明显而给用户操作造成不便。优点缺点Contents目录电子商务网站设计基础知识1电子商务网站结构设计2使用Dreamweaver创建站点3三、使用Dreamweaver创建站点初识Dreamweaver0101创建站点的准备0202创建与设置站点0303三、使用Dreamweaver创建站点Dreamweaver是美国著名的多媒体软件开发商Macromedia公司推出

7、的一套专业可视化网页开发工具，用于网页设计与制作。定义用于各类素材的集成与发布，可视性强，且支持Flash、Shockwave、Active等许多外部媒体的发布，采用浮动面板的设计风格，使用简单、方便。特点Dreamweaver具有制作效率高、网站管理系统、控制能力强等优点。优点三、使用Dreamweaver创建站点注册域名（常用于商业企业）net（常用于网络服务）.org（非盈利组织）.cn（国内域名）.gov只开放给政府机构.edu只开放给教育机构三、使用Dreamweaver创建站点申请空间2估算网站大约需要占用多大的容量，根据所需的容量去找空间。要清楚需要什么类型的空间？考虑以下问题：

8、选择网络线路。选择电信、移动或联通的线路？或者选择双线或三线。除了以上选择，还需要选择带宽，考虑需要多快的网速。三、使用Dreamweaver创建站点虚拟主机适合较为简单的网站VPS（虚拟专用服务器）适合稍大的网站独立服务器适合企业使用p 网络空间类型分为以下三种。三、使用Dreamweaver创建站点01创建站点02编辑站点03删除站点04修改站点05复制站点06导出与导入站点三、使用Dreamweaver创建站点1简述电子商务网站建设应该遵循哪些设计准则。2常见的网页布局结构有哪些？试举例说明。3在Dreamweaver CS6中创建一个名为“时尚科技”的站点，将其中的本地站点保存在D:shishangkeji文件夹下，然后为“时尚科技”网站建立一个存放图片的文件夹images。项目习题