目录

第一章 绪论 ........................................... 6 第一节 国内外电子商务发展的现状 .................... 6 第二节 公司网站的重要性 ........................... 7 第二章 DIV+CSS网站设计与制作技术 ...................... 8 第一节 网页设计与制作的主要工具 .................... 8 第二节 DIV+CSS技术介绍 ............................ 8 第三节 网站制作流程 ............................... 8 第三章 某公司网站设计 ............................... 10 第一节 确定公司创建网站的目的与意义 .............. 10 第二节 需求分析 ................................... 10 第三节 设计工作流程 ............................... 10 第四节 栏目设计 ................................... 11 第四章 公司网站制作 ................................. 12 第一节 设计草图 .................................. 12 第二节 设计制作PSD模板 .......................... 13 第三节 利用DIV+CSS制作网站页面 ................... 20 第五章 总结 ......................................... 27 第六章 致谢 .......................................... 28

第一章 绪论

第一节 国内外电子商务发展的现状

电子商务，涵盖的范围很广，一般可分为代理商、商家和消费者（Agent、Business、Consumer，即ABC）企业对企业(Business-to-Business，即 B2B），企业对消费者（Business-to-Consumer，即 B2C），个人对消费者(Consumer-to-Consumer，即 C2C），企业对政府（Business-to-Government）， 线上对线下（Online To Offline，O2O），商业机构对家庭（Business To Family），供给方对需求方（Provide to Demand），门店在线（Online to Partner，O2P）等8种模式。

近年电子商务在中国发展势头迅猛，从无到有成长了很多电子商务的大咖，中国的本土电商正在做大做强。

北京时间2015年5月15日上午，商务部新闻发言人沈丹阳介绍《中国电子商务报告（2014）》时说，我国电子商务交易总额快速增长，已成为国民经济的重要增长点，并且国际影响力显著增强。

沈丹阳认为传统企业将继续加快进入电子商务领域的步伐，移动电子商务将继续保持高速增长，大宗商品交易平台将成为电子商务发展的热点。

在国外方面，从美国电子商务现状入手分析。电子商务市场正以前所未有的速度腾飞而起，这主要是由少数平台推动的。

从图1-1可以看出，Flipkart、Amazon Seller Central、Shopify和阿里巴巴全球速卖通（AliExpress）的流量正在不断增长。

图 1-1 电子商务流量分析

推动电子商务市场飞速发展的因素很多，包括更有吸引力的价格，更多更便捷的送货渠道，这些市场采用的营销手段等等。这种趋势是向上的，在快递网络不断健全的今天，电子

商务的发展明显呈现出加速增长的态势。

当然，这四家平台并不像产品那样具有直接的可比性。Shopify支持的是卖家自己网站上的贸易，而亚马逊、Flipkart和全球速卖通则为卖家们提供了一个市场平台，卖家们在同一平台上争夺客户。但是这张图传达出来的讯息是很明显的，那就是大平台支持小商店的情况将越来越普遍。

在流量趋势方面，世界各大电商正在压缩美国电商，美国的巨头将失去全球在线零售的大笔订单而更加转向本土，在这样的增长态势下，对于eBay、亚马逊和沃尔玛等公司来说将是压力重重的。

在美国电商网站方面，用户参与度高的平台的流量增长趋势明显大于用户参与度低的平台，并且电子商务变得更具有社交性，各电商网站拥有了分享功能。用户的分享为平台提供了一大部分流量，来自用户对用户的宣传与讨论也促进产品的销售。

总结下来国内外电商发展主要呈以下几种趋势： 趋势一：小商店将得到大平台的支持

趋势二：美国的巨头们将丧失对全球在线零售业的掌控 趋势三：用户参与度将是一项更重要的因素 趋势四：电子商务将变得更具社交性

电子商务越来越渗入每一个人的生活，在今后的发展中，会更加离不开电子商务。对于企业来说，拓展电子商务越来越必要。

第二节 公司网站的重要性

在电子商务发展迅猛的今天，公司网站成为各大企业竞争的一项要点。各公司网站的功能与用户体验也影响用户选择公司。

有利于提升企业形象企业网站的作用更类似于企业在报纸和电视上所做的宣传企业本身及品牌的广告。可以全面详细地介绍企业及企业产品企业网站的一个最基本的功能，就是能够全面、详细地介绍企业及企业产品。企业可以把任何想让人们知道的信息放入网站。如企业简介、企业的人员、厂房、生产设施、研究机构、产品外观、功能及使用方法等，都可以展示于网上。还可以在线销售，可以与潜在客户建立商业联系这是企业网站最重要的功能之一，也是为什么那么多企业非常重视网站建设的根本原因。

现在，世界各国的经销商主要都是利用互联网络来寻找新的产品和新的供求，因为这样做费用最低.效率最高。原则上，全世界任何人，只要知道了企业的网址，就可以看到企业的产品和服务。因此，关键在于如何将企业网址推广出去。公司网站在对于老客户的沟通方面也非常方便，使用公司网站的电子邮件业务让公司每年省下一大笔费用，同时实现对客户的实时沟通也是非常重要的。

第二章 DIV+CSS网站设计与制作技术

第一节 网页设计与制作的主要工具

网页设计工具：PS、CorelDraw、Ai、Flash等

网页制作的主要工具有：Dreamweaver、VisualStudio、Idea、PHPStorm、记事本等 网页设计与制作的工具有很多，很多软件具有强大的开发辅助功能。设计方面需要一个图像制作软件，图像处理软件很多。功能强大并且越顺手越适合使用，软件需要提供切片功能。制作方面，Dreamweaver作为一个保姆型入门软件将所有的方面考虑的很周全，让网页开发变得简单。熟练后也会发现Idea工具非常好用。而后面提到了记事本，表明网页的制作工具要求其实非常的低，是个文本编辑器基本都是可以制作网页的，文本工具占用的磁盘空间非常小，而网页的体积小也正是他流通的优势。本文接下来主要使用的工具有PS+VisualStudio。

第二节 DIV+CSS技术介绍

DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。

通过外链样式CSS，可以给网站进行模板制作，将样式的编写操作多次引用达到节省操作的目的。

第三节 网站制作流程

第一步：确定网站需求。

客户将自己所要建设的网站功能以及相关要求告知设计人员，如想要的效果，开设的栏目，想要的风格等。同时需提供网站制作的相关资料，产品描述，详细的网站框架设计要求等。

第二步：制定网站制作方案

双方就网站制作的内容、风格、细节等问题进行协商，以达成共识。为网站建设的开展做铺垫。

第三步：签定网站制作合同，支付预付款