《网站设计与开发》教学课件.pptx

网站设计与开发

目录项目一电子商务网站赏析与规划项目二HTML5基础页面制作项目三CSS3页面美化项目四网页特效制作项目五电子商务网站设计开发项目实战项目六响应式电子商务网站开发项目七电子商务网站的推广

项目一电子商务网站赏析与规划任务一电子商务网站赏析任务二电子商务网站的建设规划3

项目引入随着互联网的快速发展，基于网络的电子商务蓬勃兴起，并日益成为一种新的商业媒介和营销渠道。在此背景下，企业的电子商务网站无可争议地成为企业开展电子商务的绝佳平台。电子商务网站具有与客户及潜在客户建立商业联系，全面详细地介绍企业及其产品，减少通信、广告、管理等费用，降低经营成本，及时得到客户的反馈信息等诸多优势，一个优秀的电子商务网站能够大幅度提高企业的竞争力，有效塑造企业形象。4

目前，一方面电子商务网站数量众多，同质化现象十分严重。要想在第一时间吸引客户，就必须有良好的网站设计；另一方面，从互联网到移动互联网，技术的更新迭代又不断推动着电子商务网站的发展变革。因此，掌握电子商务网站的基本知识，把握电子商务网站开发的一般规律，做好网站建设的前期规划和设计显得尤为重要。5

学习目标知识目标1.熟悉电子商务网站的基本类型和发展趋势。2.熟悉万维网的工作原理。3.熟悉电子商务网站网页布局、色彩应用及视觉营销的一般方法。技能目标1.能够通过电子商务网站页面分析，获取电子商务网站常见元素的基本参数。2.能够通过比较分析电子商务网站，形成提升电子商务网站用户体验的思路。6

任务分析电子商务网站有多种类型，本任务通过赏析不同类型的优秀电子商务网站，帮助学习者了解电子商务网站的基本类型、网页布局、色彩设计等内容，为后续学习打下基础。7

相关知识一、电子商务网站的基本类型和发展趋势1.电子商务网站的基本类型电子商务网站是企业、机构或个人在互联网上建立的站点，用作开展电子商务活动的基础设施、信息平台和交互窗口。电子商务网站的类型有很多，下面按照构建电子商务网站的主体分类，介绍不同电子商务网站的特点及设计风格。8

（1）企业电子商务网站和行业电子商务网站企业电子商务网站是以企业为构建主体开展电子商务活动的平台。9华为网站主页小米网站主页

企业电子商务网站特别是中小企业电子商务网站，页面布局多采用“居中对称”和“左拐角形”的方式。网站设计配色多采用企业标准色、企业标志的颜色以及与企业产品相关的颜色，或者蓝色、灰色等典型体现商务简约风格的色调。网站导航条基本涵盖了该网站的二级页面栏目分类，常见的栏目有：指示主页的“首页”、介绍企业基本信息的“关于公司”、展示企业动态的“新闻中心”、展示产品的“产品中心”、体现服务的“服务支持”、招聘人才的“加入我们”等。网站底部一般有版权信息、友情链接、企业联系方式、说明信息等。为了保持网站风格的统一性，二级页面的头部、底部和导航通常保持一致。10

（2）电子商城电子商城是以电子商务软件构建的大型商品电子交易平台，其主要作用是通过电子商城交易平台向客户准确、快捷地销售产品。比较知名的电子商城有阿里巴巴集团旗下的淘宝、天猫、全球速卖通，慧聪网，京东商城，当当网等。电子商城正在朝品牌化、规模化、集团化发展方向演变。11

12京东商城网站主页

（3）政府电子商务网站政府电子商务网站是以政府为构建主体，面向企业和个人提供税收、公共服务等网络化交互活动的平台。13中国政府采购网/中国政府购买服务信息平台主页

（4）服务机构电子商务网站服务机构电子商务网站是以服务机构为构建主体开展电子商务活动的平台，包括商业服务机构、金融服务机构、邮政服务机构、家政服务机构、娱乐服务机构等电子商务网站。14中国工商银行网站主页

2.电子商务网站的发展趋势电子商务作为经济发展的关键动力，已全方位融入经济社会大动脉，推动实体经济由渠道驱动向数字驱动转变，开启了以数字化、智能化、网络化为特征的数字经济新时代。电子商务网站有以下发展趋势。（1）平台化电子商务越来越呈现平台化特征。15

（2）多样化如今的电子商务已经进入泛电子商务时代，人们在生活中的方方面面都能体会到电子商务带来的便利和快捷，如出行订票、订酒店、网络团购等。（3）移动化随着移动互联网与智能终端设备的普及，越来越多的消费者在购物时选择了移动电商。16

二、电子商务网站开发的基础知识1.万维网的工作原理万维网（WorldWideWeb，WWW）是以超文本或超媒体的信息结构构建的一种简单但强大的全球信息系统，其核心部分由超文本传输协议、统一资源定位系统和超文本标记语言三个标准构成。万维网中的信息资源主要由一篇篇的网页文档构成。17

2.电子商务网站开发相关术语（1）超文本传输协议超文本传输协议（HyperTextTransferProtocol，