项目八 电子商务网站建设案例-搭建家具商城网站

项目八电子商务网站建设案例

——搭建家具商城网站电子商务网站建设与网页设计

（微课版）1申请域名与空间2设计家具商城网站原型3制作家具商城网站首页目录CONTENTS4测试与发布网站域名是网站的“门牌号”，担负着标示网站和导向企业站点的双重作用。网站空间是存放网站内容的“屋子”，注册网站之后，只有购买网站空间才能发布网站内容。本任务将学习域名与空间的相关知识。任务一申请域名与空间一、注册域名域名的定义域名系统（DomainNameSystem，DNS），简称“域名”，是互联网的一项核心服务。它作为将域名和IP地址相互映射的一个分布式数据库，能够使人们更方便地访问互联网，而不用记住能够被机器直接读取的IP地址数字串。域名的级别域名可以分为不同的级别，包括顶级域名、二级域名和三级域名等。顶级域名是由一个合法字符串加域名后缀组成的，如

等。顶级域名分为两类：一类是国家和地区顶级域名，另一类是国际顶级域名。二级域名是指顶级域名之下的域名。三级域名是在二级域名的基础上再加字符串。域名的注册电子商务企业在选取域名时要遵循两个基本原则。域名应该简明易记，便于输入。域名要有一定的内涵和意义，如企业的名称、产品名称、商标名、品牌名等。一、注册域名域名的注册方法比较简单，比较常用的域名注册机构是万网。在万网上注册域名的具体操作方法如下。二、选择虚拟主机与申请空间选择虚拟主机时主要考虑因素除了访客的主要群体外，还应考虑选择合适的空间，数据库的支持及大小等配置功能，以及了解服务商的空间限制、数据安全情况。中小企业的特点是小而精，建议选择有规模的行内专业服务商，如阿里云虚拟主机。虚拟主机的选择阿里云虚拟主机二、选择虚拟主机与申请空间如果创建的是个人网站，那么可以申请免费或低收费空间。对于个人用户而言，这是最为省钱、便利和实用的方式，但存在宕机、空间限制较多、不提供数据库、不能绑定域名、试用期短等方面的问题。目前，提供免费空间的服务商有阿里云、华为云、腾讯云、新网等。下面以在“主机蛋”网站申请空间为例进行介绍，具体操作方法如下。申请空间电子商务网站是一个巨大的信息载体和平台，从营销的角度来说，它相当于一个“宣传册”。本任务将通过一个实际的电子商务网站建设案例介绍如何设计电子商务网站原型，以帮助读者对网页布局形成整体认识，提升网页设计水平。任务二设计家具商城网站原型一、分析网站需求明确用户诉求调查与分析目标用户，了解网站可能的服务对象及其需求，规划与设计符合目标客户群特点的网站，以满足与适应用户一定的需求和爱好。网站整体风格网站风格要符合网站所属行业属性，让用户直观地感受到网站首页所要传递的产品信息。根据用户的浏览习惯，将用户最常使用的功能置于醒目的位置，以便用户查找及使用。技术可行性技术可行性是指构建与运行网站所必需的硬件、软件及相关电子商务业务流程的支撑分析。收益和风险分析收益分析包括预测网站的投资回报率、预期销售额和利润等；风险分析需要考虑潜在的技术风险、市场风险、竞争风险等。通过评估收益和风险，可以制定相应的策略来降低风险并提高收益。二、制作网站原型在设计网站之前，应该有一个构思的过程，对网站的完整功能和内容进行全面的分析。将各种页面模块、元素进行排版和布局，获得大致的页面效果，这个过程被称为“原型设计”。在设计时，要采用统一的风格和结构把各页面组织在一起。整体风格颜色多采用公司的标准色、Logo的颜色以及与产品相关的颜色。家具网站Logo首页布局二、制作网站原型在设计网站之前，应该有一个构思的过程，对网站的完整功能和内容进行全面的分析。将各种页面模块、元素进行排版和布局，获得大致的页面效果，这个过程被称为“原型设计”。在设计时，要采用统一的风格和结构把各页面组织在一起。整体风格颜色多采用公司的标准色、Logo的颜色以及与产品相关的颜色。产品分类区和产品展示区详细布局顶部详细布局二、制作网站原型在设计网站之前，应该有一个构思的过程，对网站的完整功能和内容进行全面的分析。将各种页面模块、元素进行排版和布局，获得大致的页面效果，这个过程被称为“原型设计”。在设计时，要采用统一的风格和结构把各页面组织在一起。整体风格颜色多采用公司的标准色、Logo的颜色以及与产品相关的颜色。家具网站首页最终效果三、创建站点网站建设的实质性阶段是从站点的创建开始的，下面创建一个名为site3的站点，具体操作方法如下。本任务将以制作家具商城网站首页为例，引领读者熟悉网站建设的整个过程，熟练掌握使用DIV+CSS布局网页及完整制作网站首页的方法。任务三制作家具商城网站首页一、使用DIV+CSS布局网页搭建简洁又实用的电子商务网站，首页的布局尤其重要。结构良好的网站布局可以使用户有一目了然的感觉，能快速搜索到自己所需的商品并产生购买欲。网站首页最终效果确定下来之后，即可进行网页的布局设计。在本案例中，使用DIV+CSS布局网站首页的具体制作方法如下。二、制作页面顶部导航栏在整个电子商务网站中的地位举足轻重，简单、直观的导航栏不但能够提高网站的易用性，而且在用户找到所要的信息后，有助于提高用户转化率。导航栏的设计应尽可能地简单，让用户一目了然。本案例首页顶部主要由顶部栏和导航栏两部分组成，具体制作方法如下。三、制作焦点图在网页中用于宣传的焦点图现在逐渐变成首页中起主要修饰作用的模块，尺寸也在逐渐变大，变得更为醒目。在本案例中，该部分是通过将图像嵌入页面中实现的。焦点图的具体制作方法如下。四、制作产品分类区产品分类区采用图片加文字的组合形式，在制作过程中要注意控制好显示尺寸和比例，让分类信息能够完整地展示在浏览者面前，起到快速导航的作用。产品分类区的具体制作方法如下。五、制作产品展示区在“新品上市”产品展示区需要显示产品的图片、名称和价格3个部分，采用上下结构，产品图片在上，名称和价格在下。产品展示区的具体制作方法如下。六、制作页面底部网页底部信息栏和顶部导航栏的设计思路相同，其具体制作方法如下。七、使用JavaScript制作焦点图交互效果通过精心设计的图片和文字，焦点图可以向用户展示重要的信息，引导用户了解网站的核心内容。目前，大多数网站都设有自动轮播的焦点图，图片在设定的时间内进行自动切换。本案例将使用JavaScript制作焦点图交互效果，具体制作方法如下。申请了空间和域名并制作好网站后，还不能立即上传网站。特别是在电子商务网站开发中，为了确保浏览者能够顺利地访问网站、各链接均能正常跳转，在将站点上传之前，完成系统的测试、确认和验收是非常重要的。经过必要的测试，当网站能够稳定工作之后，就可以将站点上传到远程Web服务器上，让其成为真正的站点，这就是发布网站。本任务将学习测试与发布网站的方法。任务四测试与发布网站一、网站的测试兼容性测试兼容性测试就是验证应用程序是否可以在用户使用的机器上运行。如果用户是全球范围的，需要测试各种操作系统版本、浏览器类型和版本，以及设备类型和规格。功能测试功能测试是测试中的重点，主要包括链接测试、表单测试、Cookies测试、设计语言测试和数据库测试等。一、网站的测试兼容性测试兼容性测试就是验证应用程序是否可以在用户使用的机器上运行。如果用户是全球范围的，需要测试各种操作系统版本、浏览器类型和版本，以及设备类型和规格。功能测试功能测试是测试中的重点，主要包括链接测试、表单测试、Cookies测试、设计语言测试和数据库测试等。性能测试网站的性能测试主要从连接速度测试、负载（Load）测试和压力（Stress）测试3个方面进行。可用性测试可用性测试主要包括以下几个方面：导航测试、图形测试、内容测试、整体界面测试。接口测试Web站点可能会与外部服务器通信，请求数据、验证数据或提交订单，所以需要进行接口测试。接口测试包括：服务器接口测试、外部接口测试。安全性测试Web应用系统的安全性测试主要有以下几个方面：目录设置、登录、Session、日志文件、安全漏洞。二、网站的发布以FTP方式发布以FTP方式发布网页的用户，一般在远程主机上专门设有目录接收上传文档，完成上传后远程服务器管理员将网页文档放置到相应的Web网站目录位置。目前，实现FTP上传服务的软件很多，如CuteFTP、WinSCP、NetFTP、FileZilla等。用网页制作工具发布一般网页制作工具软件都具有网页发布功能。如利用DreamweaverCC2018发布网页：首先将申请的虚拟空间的信息设置到Dreamweaver对应的站点中，然后通过内置的站点管理功能上传或下载站点文件。二、网站的发布以FTP方式发布以FTP方式发布网页的用户，一般在远程主机上专门设有目录接收上传文档，完成上传后远程服务器管理员将网页文档放置到相应的Web网站目录位置。目前，实现FTP上传服务的软件很多，如CuteFTP、WinSCP、NetFTP、FileZilla等。用网页制作工具发布一般网页制作工具软件都具有网页发布功能。如利用DreamweaverCC2018发布网页：首先将申请的虚拟空间的信息设置到Dreamweaver对应的站点中，然后通过内置的站点管理功能上传或下载站点文件。以直接目录方式发布对于自己管理的拥有专线接入的网站，网页发布可