电子商务网页设计与制作ppt (1)[16页]
合集下载
电子商务网页制作概述 课件
定义
电子商务网页是指通过网络平台展示 商品或服务,并实现交易的网页。
功能
电子商务网页具有商品展示、购物功 能、支付功能、用户注册和登录、订 单管理等功能。
电子商务网页的类型与特点
类型
按照商品类型分类,电子商务网页可 分为综合类电商网页、垂直类电商网 页和平台类电商网页。
特点
电子商务网页的特点包括用户体验友 好、交互性强、信息展示全面、易于 推广等。
2023
电子商务网页制作概 述
REPORTING
2023
目录
• 电子商务网页制作基础 • 电子商务网页的设计要素 • 电子商务网页的前端技术 • 电子商务网页的后端技术 • 电子商务网页的优化与推广 • 电子商务网页制作案例分析
2023
PART 01
电子商务网页制作基础
REPORTING
电子商务网页的定义与功能
电子商务网页的制作流程
设计阶段
进行整体风格设计、页面布局 设计、交互设计等。
测试阶段
对网站进行功能测试、性能测 试和兼容性测试,确保网站稳 定运行。
需求分析
明确网站目标和定位,了解用 户需求和行为习惯。
开发阶段
根据设计稿完成网页制作,包 括前端页面和后端功能的实现 。
上线运营
发布网站并进行持续的运营和 维护,包括内容更新、推广营 销等。
案例三:某电商平台的商品详情页制作
总结词
信息全面、易于比较
详细描述
该电商平台的商品详情页制作注重信息全面性和比较功 能。页面顶部展示了商品图片和名称,中部则详细介绍 了商品规格、材质、价格等信息,并提供了用户评价和 问答区域,方便用户了解其他用户的购物体验。底部则 提供了购买按钮和多种支付方式选择,方便用户完成购 买操作。同时,页面还支持不同规格和颜色的商品比较 功能,方便用户进行选购。
电子商务网页是指通过网络平台展示 商品或服务,并实现交易的网页。
功能
电子商务网页具有商品展示、购物功 能、支付功能、用户注册和登录、订 单管理等功能。
电子商务网页的类型与特点
类型
按照商品类型分类,电子商务网页可 分为综合类电商网页、垂直类电商网 页和平台类电商网页。
特点
电子商务网页的特点包括用户体验友 好、交互性强、信息展示全面、易于 推广等。
2023
电子商务网页制作概 述
REPORTING
2023
目录
• 电子商务网页制作基础 • 电子商务网页的设计要素 • 电子商务网页的前端技术 • 电子商务网页的后端技术 • 电子商务网页的优化与推广 • 电子商务网页制作案例分析
2023
PART 01
电子商务网页制作基础
REPORTING
电子商务网页的定义与功能
电子商务网页的制作流程
设计阶段
进行整体风格设计、页面布局 设计、交互设计等。
测试阶段
对网站进行功能测试、性能测 试和兼容性测试,确保网站稳 定运行。
需求分析
明确网站目标和定位,了解用 户需求和行为习惯。
开发阶段
根据设计稿完成网页制作,包 括前端页面和后端功能的实现 。
上线运营
发布网站并进行持续的运营和 维护,包括内容更新、推广营 销等。
案例三:某电商平台的商品详情页制作
总结词
信息全面、易于比较
详细描述
该电商平台的商品详情页制作注重信息全面性和比较功 能。页面顶部展示了商品图片和名称,中部则详细介绍 了商品规格、材质、价格等信息,并提供了用户评价和 问答区域,方便用户了解其他用户的购物体验。底部则 提供了购买按钮和多种支付方式选择,方便用户完成购 买操作。同时,页面还支持不同规格和颜色的商品比较 功能,方便用户进行选购。
电子商务网页设计与制作 (1)[14页]
任务二 赏析电子商务商城网站
该网站的布局结构和京东商城类似,便于消费者查找的搜索栏也放在页面顶部导航栏上方或者下方的 显著位置,“购物车”也会放置在右侧顶部显著的位置。主体部分从左到右依次为分类列表区、相关信息 动态区,促销宣传区、橱窗展示区等。在主页底部,有常见的“购物资讯”、“支付方式”、“帮助和购 物指南”等栏目。二级页面包括主商品的介绍、规格、用户评价等。
任务一 赏析企业形象网站
logo 导航栏 banner
内容栏
版尾
任务一 赏析企业形象网站
电子商务网页的风格和布局
(1)网页的风格:在对网页插入各种元素、修饰效果之前,要先确定网页的风格。网页的 风格是指网站给浏览者的整体形象,包括站点的CI(标志、色彩和字体)、版面布局、浏览方 式、交互性、文字、内容及网站荣誉等诸多因素。 (2)根据不同的网页风格,可以将网页分成商业网页和个人网页。商业网页内容丰富、信 息量大,一般都有统一的布局设计。个人网页风格多样、内容专一、形式灵活,更容易创 造出美感。 (3)国字型布局模式:这是一个形象的说法,就是指页面上下各有一个广告条,左侧是主 菜单,右侧是友情链接等,中间是主要内容。这种布局的优点是页面充实、内容丰富、信 息量大,是综合性网站常用的版式。 (4)“T”结构布局。所谓“T”结构,就是指网页上边和下边相结合,页面顶部为横条 网站标志和广告条,下方的左侧为主菜单,右侧显示内容的布局。这是网页设计中应用最 广泛的一种布局方式。
任务二 赏析电子商务商城网站
(1)淘宝网和传统网上商城不一样,它更像个平台,为商品在线交易的平台,但整体结构还是和商 城相近。淘宝网由于商品众多,分类工作是重中之重,除了左侧分类列表区进行初步分类外,更为详细的 商品分类列表占据了页面主体的主要部分,取代了其他商城站常见的橱窗展示区。
电子商务网页制作与设计公开课详细PPT
以德立身 以技立足
图3-1保存网页
放飞理想 激扬青春 展现自我
网页文件操作
温馨提示:
在“文件”菜单里有“保存”和“另存为”两个命令,首次保存网 页时,选择“保存”或“另存为”命令都会弹出“另存为”对话框,提 示设计者设置保存位置和文件名;对于已经保存过的网页进行再次编辑 时,选择“保存”命令直接将所作的修改保存到原网页文档,而选择 “另存为”命令则再次弹出“另存为”对话框,可以重新设置保存位置 和文件名。
以德立身 以技立足
放飞理想 激扬青春 展现自我
网页文件操作
(2)、保存网页
打开“文件”菜单,选择“保存”命令, 将弹出“另存为”对话框,选择保存的 位置并输入保存文件名,单击“保存” 按钮即可将网页保存。
快捷键:
保存:ctrl+S 另存为:ctrl+shift+S
谈一谈还有那些软件“保存与另存为” 跟DW软件一样快捷键。
以德立身 以技立足
图3-13保存网页
放飞理想 激扬青春 展现自我
修改网页属性
打开“修改”菜单,选择“页面属性”命令,或按快捷键(Ctrl+J), 或者单击属性面板中的“页面属性”按钮,将弹出“页面属性”对话框。
在该对话框中可以设置网页的各种属性,如页面文字的设置、页面背景的 设置、页面边距的设置、链接文字的设置以及标题编码的设置等,根据属性 分类不同,分为六个类别。
以德立身 以技立足
图3-16设置“链接”(CSS)
放飞理想 激扬青春 展现自我
修改网页属性
(4)、标题(CSS)
在“(标题CSS)”分类中,可 以设置如下属性:
标题字体的格式、大小和颜 色,设置标题1至标题6后,在字 体属性面板中直接指定文字为某 号标题后,该文字直接套用该标 题的属性。
图3-1保存网页
放飞理想 激扬青春 展现自我
网页文件操作
温馨提示:
在“文件”菜单里有“保存”和“另存为”两个命令,首次保存网 页时,选择“保存”或“另存为”命令都会弹出“另存为”对话框,提 示设计者设置保存位置和文件名;对于已经保存过的网页进行再次编辑 时,选择“保存”命令直接将所作的修改保存到原网页文档,而选择 “另存为”命令则再次弹出“另存为”对话框,可以重新设置保存位置 和文件名。
以德立身 以技立足
放飞理想 激扬青春 展现自我
网页文件操作
(2)、保存网页
打开“文件”菜单,选择“保存”命令, 将弹出“另存为”对话框,选择保存的 位置并输入保存文件名,单击“保存” 按钮即可将网页保存。
快捷键:
保存:ctrl+S 另存为:ctrl+shift+S
谈一谈还有那些软件“保存与另存为” 跟DW软件一样快捷键。
以德立身 以技立足
图3-13保存网页
放飞理想 激扬青春 展现自我
修改网页属性
打开“修改”菜单,选择“页面属性”命令,或按快捷键(Ctrl+J), 或者单击属性面板中的“页面属性”按钮,将弹出“页面属性”对话框。
在该对话框中可以设置网页的各种属性,如页面文字的设置、页面背景的 设置、页面边距的设置、链接文字的设置以及标题编码的设置等,根据属性 分类不同,分为六个类别。
以德立身 以技立足
图3-16设置“链接”(CSS)
放飞理想 激扬青春 展现自我
修改网页属性
(4)、标题(CSS)
在“(标题CSS)”分类中,可 以设置如下属性:
标题字体的格式、大小和颜 色,设置标题1至标题6后,在字 体属性面板中直接指定文字为某 号标题后,该文字直接套用该标 题的属性。
电子商务网页设计与制作完整版ppt课件全套教学教程(最新)
拓展练习 2.网页设计常用尺寸
网页设计因其载体的限制,要充分考虑到设备的尺寸,在设计页面的过程中, 设计师往往会根据屏幕大小来设计页面每个部分的宽窄,通常一个静态屏幕所展 示页面的宽高可以称之为一屏,一个完整的页面是由多屏组成的。
一屏的宽度由显示器宽度决定,再根据不同的浏览器进行微调。在显示器的 尺寸上减去20像素到30像素不会出现水平滚动条。但在实际操作中,我们通常只 会对网页中的主体部分进行设计,将主体放在屏幕中间,两边留白,或者插入大 的背景图。因此网页的宽度很大程度上会和版心尺寸保持一致。通常是920像素到 1400像素之间。而一屏的高度通常会在600像素到800像素之间,如果超过800像素, 那么该部分内容就不能在一个静态屏幕上完整显示,会进一步影响用户的体验。
知识分析
4.构成网页的基本元素 (1)logo。
网站logo,也叫网站标志,它是一个网站的象征。网站标志一般放在网页的左 上角。网站标志应体现该网站的特色、内容以及其内在的文化内涵和理念。通常 企业网站的logo也就是该企业的logo。常为代表性的人物、动物、物品等,如工 行的标志、搜狐的狐狸等。
知识分析
2. 竞品分析 竞品分析通常包括背景分析和定位分析两方面: 背景分析主要包括公司的资源、团队的背景,人员构成、组织架构、公司愿景、 成本构成。通过背景分析,可以深入了解公司的现状,公司的风格。
知识分析
3. 基于栅格化设计原理的网页布局 栅格系统应用于设计领域已经至少50年了。栅格化让眼睛浏览信息更加愉悦。
任务实施
01 电商企业网站的需求分析 02 电商企业网站的布局结构分析
03 电商企业网站的色彩应用
知识分析 1.网站规划的市场调研
网站的规划是指在网站建设前确定好网站的主题和功能目标后,对网站目标 定位,进行的内容规划和功能规划。其中直接的表现就是网站结构的规划,特别 对于网站前端部分而言,更为关注的是网站的栏目设计。
电子商务网页设计与制作完整版ppt课件全套教学教程(最新)
任务实施
01 电商企业网站的需求分析 02 电商企业网站的布局结构分析
03 电商企业网站的色彩应用
知识分析 1.网站规划的市场调研
网站的规划是指在网站建设前确定好网站的主题和功能目标后,对网站目标 定位,进行的内容规划和功能规划。其中直接的表现就是网站结构的规划,特别 对于网站前端部分而言,更为关注的是网站的栏目设计。
度,通过划分具有规律的分割,来提高网页开发效率。如下图所示: 将960像素的页面平均分成12分,间隔10像素。
960像素12栅格分割示意图
知识分析 3. 基于栅格化设计原理的网页布局
(1)960栅格化系统 960栅格化系统系统(或者说适应型css构架)早期主要用来进行快速原型制
作,减少重复单调的工作,但是目前,它在网页设计开发项目中开始扮演非常重 要的角色。它为我们的设计提供一个坚实的坐标基础。
拓展练习 2.网页设计常用尺寸
网页设计因其载体的限制,要充分考虑到设备的尺寸,在设计页面的过程中, 设计师往往会根据屏幕大小来设计页面每个部分的宽窄,通常一个静态屏幕所展 示页面的宽高可以称之为一屏,一个完整的页面是由多屏组成的。
一屏的宽度由显示器宽度决定,再根据不同的浏览器进行微调。在显示器的 尺寸上减去20像素到30像素不会出现水平滚动条。但在实际操作中,我们通常只 会对网页中的主体部分进行设计,将主体放在屏幕中间,两边留白,或者插入大 的背景图。因此网页的宽度很大程度上会和版心尺寸保持一致。通常是920像素到 1400像素之间。而一屏的高度通常会在600像素到800像素之间,如果超过800像素, 那么该部分内容就不能在一个静态屏幕上完整显示,会进一步影响用户的体验。
知识分析
2. 竞品分析 竞品分析通常包括背景分析和定位分析两方面: 背景分析主要包括公司的资源、团队的背景,人员构成、组织架构、公司愿景、 成本构成。通过背景分析,可以深入了解公司的现状,公司的风格。
电商课件电子商务网站建设课程PPT
挑战
讨论电子商务面临的挑战,如网络安全、法律法 规等。
电子商务网站建设的关键要素
1 目标市场
确定目标市场并了解其需 求和习惯。
2 网站架构
探讨网站基本架构和信息 组织。
3 用户体验
提升用户体验的重要性和 关键要素。
电子商务网站的设计与界面
美观布局
分享吸引用户的网站设计技巧和 布局。
易用界面
介绍如何创建用户友好的网站界 面。
响应式设计
解释响应式设计在电子商1
网站功能
列举电子商务网站常见功能,如购物车、
用户登录
2
支付等。
说明用户登录系统在电子商务网站中的
作用和优势。
3
购物流程
详细解析用户在电子商务网站上的购物 流程。
电子商务网站的营销与推广
1 SEO优化
介绍如何通过搜索引擎优化 提升网站排名。
电商课件 | 电子商务网站 建设课程PPT
欢迎来到电子商务网站建设课程PPT!本课程将深入探讨电子商务的概述、发 展历程、优势和挑战,以及关键要素、设计与界面、功能和流程,最后学习 电子商务网站的营销策略与推广方法。
电子商务概述
1 定义与特点
解释电子商务的概念和其具 备的特点。
2 发展背景
探索电子商务起源及其对传 统商业模式的影响。
2 社交媒体
探讨利用社交媒体进行网站 营销的方法。
3 在线广告
讲解如何使用在线广告宣传和推广电子商务网站。
3 商业模式
说明电子商务各种商业模式的运作原理。
电子商务发展历程
1
互联网时代
2
讲解互联网对电子商务发展的推动作用。
3
未来趋势
4
《网页设计与制作(1)》课件
了解各种颜色间的搭配和配色原则,以及如何使用颜
字体和排版原则
了解如何选择合适的字体和排版样式,以及如何使用
图片和多媒体的使用
1 多媒体的优势
2 图片的优化
3 响应式设计概念
了解如何使用图片、音频和 视频来增强网页的吸引力和 互动性。
了解图片优化的重要性,以 及如何选择合适的图片格式 和尺寸,以达到更快的加载 速度。
了解如何使用响应式设计来 适应不同的屏幕大小和设备 类型,以提升用户体验。
用户体验设计概念
1
了解用户
通过市场调研和用户反馈,了解用户的需求和特点。
2
ห้องสมุดไป่ตู้
设计用户旅程
将用户体验分解为不同的阶段,设计出让用户流畅、愉快的体验过程。
3
测试和优化
通过用户测试和分析数据,对网页进行不断优化,提升用户体验。
网页制作工具和技术
《网页设计与制作(1)》 PPT课件
欢迎来到《网页设计与制作(1)》PPT课件!在这个课程中,我们将探讨网页设 计和制作的基本概念和技术,帮助您成为一名优秀的网页设计师和开发者。
课程介绍
目标和目的
通过本课程,您将学习如何设 计和制作精美、现代化的网页, 并掌握实用的前端技术。
受众群体
任何对网页设计和制作感兴趣 的人,尤其是想要成为网页设 计师和开发者的人群。
安全性和可访问性
了解如何提升网页的安全性和可访问性,以便更好 地保护用户隐私和权益。
总结
感谢您学习本课程!通过本课程,您应该已经掌握了网页设计和制作的基本 概念和技术,为成为一名优秀的网页设计师和开发者打下了坚实的基础。
掌握网页制作的整个流程,包括需求分析、设计、开
常用网页制作技巧和技
字体和排版原则
了解如何选择合适的字体和排版样式,以及如何使用
图片和多媒体的使用
1 多媒体的优势
2 图片的优化
3 响应式设计概念
了解如何使用图片、音频和 视频来增强网页的吸引力和 互动性。
了解图片优化的重要性,以 及如何选择合适的图片格式 和尺寸,以达到更快的加载 速度。
了解如何使用响应式设计来 适应不同的屏幕大小和设备 类型,以提升用户体验。
用户体验设计概念
1
了解用户
通过市场调研和用户反馈,了解用户的需求和特点。
2
ห้องสมุดไป่ตู้
设计用户旅程
将用户体验分解为不同的阶段,设计出让用户流畅、愉快的体验过程。
3
测试和优化
通过用户测试和分析数据,对网页进行不断优化,提升用户体验。
网页制作工具和技术
《网页设计与制作(1)》 PPT课件
欢迎来到《网页设计与制作(1)》PPT课件!在这个课程中,我们将探讨网页设 计和制作的基本概念和技术,帮助您成为一名优秀的网页设计师和开发者。
课程介绍
目标和目的
通过本课程,您将学习如何设 计和制作精美、现代化的网页, 并掌握实用的前端技术。
受众群体
任何对网页设计和制作感兴趣 的人,尤其是想要成为网页设 计师和开发者的人群。
安全性和可访问性
了解如何提升网页的安全性和可访问性,以便更好 地保护用户隐私和权益。
总结
感谢您学习本课程!通过本课程,您应该已经掌握了网页设计和制作的基本 概念和技术,为成为一名优秀的网页设计师和开发者打下了坚实的基础。
掌握网页制作的整个流程,包括需求分析、设计、开
常用网页制作技巧和技
电子商务网页设计与制作ppt (4)[16页]
ad. Image.onmouseover=function( ) { this.Parent.AutoMove= false; }
ad. Image.onmouseout=function( ) { this.Parent.AutoMove= true; }
— 5—
一、添加图片
首先在Default.css中注释掉banner块的背景颜色, 并在images文件夹下存入图9-2所示的4个用于广告 轮换播放的图片。
— 6—
二、添加图片轮换功能
如图9-3所示,4张图片都已全部显示在了页面上,但还没有实现动态自动轮换的功能。为了实现自动轮换,我们 需要为它们添加脚本语言,即经常用到的JavaScript语言。在前面添加的图片代码下面加入以下代码:
— 4—
第一节 广告图片自动轮换的制作
本节的目标是利用CSS实现个人网站首页的广告图片的 自动轮换特效功能。广告图片自动轮换通过图片的自动切 换来展示各种广告图片,如果要浏览某张图片,可以通过点击 图片跳转到相应的页面,在这个页面里除了浏览此图片之外 还可以浏览其他相关信息,这是一种形象生动的广告形式,制 作效果如图9-1所示。
— 7—
//让图片标记为start的图片显示 $ (ids[start]).filters.revealTrans.Transition= Math.floor(Math.random( )*23);
$ (ids[start]).filters.reveaITrans.apply( ); $ (ids[start]).filters.reveaITrans.play( ); $ (ids[start]).style.display= 'none'; setid=setTimeout(loop,speed); start++; if(start= =ids.length){ start=0; } }; loop( ); } } galleryplay('1,2,3,4',1,6000);//调用自动播放函数 </script>
《网页设计与制作(1)》PPT课件
插入库
• 将光标放在网页中需求插入库文件的位置 /[资源]面板/[库]分类/选择库工程/[插入]或直 接拖动到光标所在位置即可。
更改库
• 假设修正了库文件,选择[文件]菜单/[保管] 命令/[更新库工程]对话框/讯问能否更新网 站中运用了该库文件的网页/单击[更新]按钮, 将更新网站中运用了该库文件的网页。
网页设计与制造
江西信息运用职业技术学院 电子商务与管理系
第9章 运用库、模板和行为
• 教学目的: • 运用库和模板方便快速地制造和维护网页;
运用行为生成网页特效。 • 教法:教、学、做一体
如何快速方便制造与维护网站?
• 层+CSS • 嵌入式 • 库与模板
认识库
• 想要在整个网站上经常反复运用或更新页面中 调用。
• 可以经过改动库更新一切采用库的网页, 不用一个一个的修正。
• 例如:页脚的版权信息做成库,等到要修 正版权时,只需修正库,就可以方便的更 新一切的页面了。
• 例如:LOGO部分、导航条等公共部分。
创建库工程
• [资源]面板/[库]按钮/翻开库类别/[新建库工 程]按钮。
• 基于站点文件夹,自动生成Library文件夹 和库文件*.lbi
把onKeyDown和onKeyUp这两事件合在一同。 • onKeyUp 当按下的键松开时产生。 • onLoad 当一图像或网页载入完成时产生。
• onMouseDown 当访问者按下鼠标时产生。 • onMouseMove 当访问者将鼠标在指定元素上挪动时产生 • onMouseOut 当鼠标从指定元素上移开时产生。 • onMouseOver 当鼠标挪动到指定元素时产生。 • onMouseUp 当鼠标弹起时产生。 • onMove 当窗体或框架挪动时产生。 • onReset 当表单内容被重新设置为缺省值时产生。 • onResize 当访问者调整阅读器或框架大小时产生。 • onSelect 当访问者选择文本框中的文本时产生。 • onSubmit 当访问者提交表单时产生。 • onUnload 当访问者分开网页时产生。
电子商务网页设计(第三版)课件汇总全书电子教案完整版课件最全幻灯片(最新)课件电子教案幻灯片
2. 内容及其格式标记的简单应用
(1)格式标记 <p>…</p> 用来创建一个段落,在此标记之间的文本将按照段落的格式显 示。 <br> 是一个很简单的换行标记,它没有结束标记,用来创建一个换行。 <dl></dl><dt></dt><dd></dd> 是普通列表标记,<dt></dt> 和 <dd></dd> 都必须放在<dl></dl> 标记之间。<dl></dl> 用来创建一个列 表;<dt></dt> 用来创建列表中的上层项目;<dd></dd> 用来创建列表中最 下层项目。
一、网页中添加文本
1. 添加普通文本
(1)直接输入文本 (2)复制粘贴文本 (3)从其他文件导入
2. 添加空格
在需要输入的地方单击鼠标左键,将输入法切换到半角状态,单击空格键即 可输入一个空格。如果需要输入多个连续的空格可以通过以下几种方法来实现:
(1)菜单“插入记录”/“HTML”/“特殊字符”/“不换行空格”。 (2)直接按“Ctrl+Shift+Space”快捷键。 (3)设置软件首选参数“允许连续空格”。
2. 网站逻辑链接结构基本形式
树状链接结构(一对一)
星状链接结构(一对多)
3. 网站逻辑链接结构的选择
最好的办法是:首页和一级页面之间用星状链接结构,一级和二级页面之 间用树状链接结构。
四、页面流程
1. 页面流程的概念
网站设计者为访 问者设计的在浏览网 站时的浏览经历就是 页面流程。
相关主题
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
— 8—
行业类综合网站
三, 分析“爱卡汽车”网站
“爱卡汽车”是国内最大、最专业的汽车主题网站之 一,其网址为“/”,该网站除了有 丰富的资讯、不同的分类列表、大量相关的行业广告等之 外,作为主题社区,比较侧重于网友间的互动、共享,自主式的 选车中心、各种推荐评测以及各款车的论坛占据了相当大 的比重。
该类型网站主页的底部一般是常见问答、友情链接、网站版权、备案等
信息。
— 14 —
本章练习题
1.选择5家本地有特色的制造业企业的网站进行分析。 2.在进行网页配色时,需要了解哪些要点? 3.网站的主题是如何确定的?有哪些注意要点? 4.分析其他类型电子商务网站的特点,如“去哪儿网”“口碑网”等。 5.分析“阿里巴巴中国站”主页的特点。 6.比较“淘宝网”和行业性电子商务商城网站,分析它们的结构和特点。
— 13 —
四, 网站分析总结
电子商务商城网站的最主要特色是主页会用很大篇幅来显示分类列表,一般位于主
体部分的左侧,有些商城类目非常丰富,如“淘宝网”,分类列表位于主体部分的主要位置。
该类型网站的布局因为要和分类列表区域结合,故也大多采用“左拐角形”布局,主页
的中间则是活动促销信息,下面往往是橱窗展示区,底部则是问题解答区。
整体采用绿色来展示自身与农副产品相关的特色。这种需要直 接面对消费者的电子商务商城网站,客服电话往往放在首页顶部显 著的位置,便于消费者查找的搜索栏也放在页面顶部导航栏上方或 者下方的显著位置。另外,“购物车”也放置在顶部显著的位置。
该网站主页的主体部分与一般商城网站类似,从左到右依次为分 类列表区、促销宣传区、橱窗展示区、相关信息动态区等。具体商 品信息均由商品图片、商品名称、规格、价格等构成。
— 12 —
三, 分析“淘宝网”网站
“淘宝网”是亚洲最大、最安全的网上交易平台,面向广大消费者提供类型丰富的商品,其网址
是“https:///”
“淘宝网”和传统的网上商城不一样,它更像个平台,即商品在线交易 的平台,但整体结构还是和网上商城相近。
“淘宝网”中某件商品的二级页面和网上商城商品的二级页面类似。
当然也有一些例外,如服装、汽车等制造业企业网站,更注重网站的展 示功能,以大量的修饰动画、图片素材修饰为主。而一些为人们提供服务 的餐饮、娱乐、购物、休闲等服务类公司形象网站,在页面的布局上更为 开放,图像、动画、色彩运用得更多,为了能更好地吸引普通访问者,在栏 目设计上也会有自身行业的一些特色。
— 6—
电子商务网页设计与制作
行业类综合网站
一、分析“名城房产”网站
(1)网站主页采用了“同字形”的页面布局设计,页面顶部为 企业LOGO和导航条,下面为宣传公司形象的动画横幅广告 (banner)。整体颜色为“土豪金”色调,也是现阶段高档住宅经 常使用的干挂石材外立面的颜色,以这类颜色为基调,搭配类 似香槟色等色调,在大面积白色的衬托下能表现出大气、干 净、上档次的品牌形象。
— 2—
行业类综合网站
二、分析“天马轴承”网站
(1)网站主页布局采用企业网站中常用的“同字形”页面布局设计, 页面顶部为企业LOGO,下面分别为导航条和宣传公司形象的动画 banner。整体颜色以国内企业网站常见的蓝色为主色调,在这一基 础上点缀了浅灰色和用于突出显示的红色,显得简洁、大气。
— 3—
➢ 网上购物商城的导航条一般不同于前面章节中所述企业网站的 导航条。
➢ 该网站主页的中间主体部分是商品促销信息区,由自动轮换的促 销活动图像或者动画组成。
— 11 —
分析“想购网”网站
农副 “想购网”是典型的立足于区域服务的电子商务商城网站,是一个为杭州主城区百姓和单位提供 产品的网上商城,其网址是“/”
行业类综合网站
三、分析“恒生电子”网站
网站主页采用了“同字形”的页面布局设计,顶部为企 业的LOGO、导航条和ban-ner。整体风格以浅蓝色为主 基调,并采用具有强对比的金黄色作为点缀,给人以年轻 有活力、稳步成长的感觉。
— 4—
行业类综合网站
四, 分析“银泰百货”网站
这类主要面向终端消费者的商业类企业网站, 近年来为了更好地吸引消费者,加大了动画、图 片等素材的运用,最为常见的就是banner区的范 围扩大。这类企业网站往往在页面布局上较传统 制造类企业网站更为创新,作为百货商业业态,在 色彩的表现上也更为丰富。
— 7—
行业类综合网站
二, 分析“中国纺织网”网站
“中国纺织网”是国内最大、最专业的纺织行业电子商务网站,是 一个为纺织企业提供网上资讯、网上贸易等综合服务的行业性电子 商务平台。
该网站的结构布局类似“左拐角形”,主要特色是信息丰富,各模块做 了大量分类,便于访问者快速查找所需的信息。页面中加入了大量相 关行业公司的广告,采用小图标企业广告的形式。在导航设置中,涵盖 了产品、求购、企业、资讯、论坛等常用行业网站。Biblioteka — 5—行业类综合网站
五, 网站分析总结
中小企业形象网站是电子商务网站设计中经常遇到的。区别于大型公 司的综合型网站,这些分别属于制造业、贸易类、IT通信业等中小企业的 形象网站,整体布局常采用“同字形”和“左拐角形”;整体风格颜色多采用公 司的标准色、LOGO的颜色以及和企业主题相联系的颜色,或者是蓝、灰 等体现商务简约风格的色调。
行业类综合网站
一, 分析“住在杭州”网站
作为区域房地产咨询行业的网站,“住在杭州”网站的主体部 分保持了前面章节中所分析的“同字形”布局,因为如此布局能 容纳更多的资讯信息。
提供资讯的行业网站,更多考虑的是访问者如何便捷地查找所需 的信息以及提供信息的准确度和广度。因此,在导航栏设计和版面 设计时要考虑:使各种分类信息一目了然,分类查找信息能通过导航 栏的设置来实现。
— 9—
行业类综合网站
四, 网站分析总结 行业类综合网站的布局结构常采用“左拐角形”和“同字形”。 行业类综合网站的导航条类目是根据企业的需求设计的。
— 10 —
一、分析“京东商城”网站
“京东商城”是国内最大、最专业的从事数码、家电、百货类购物的网上商城之一
➢ “京东商城”网站主页的版面布局大致是“同字形”或者“左拐角形”, 色调为喜庆的红色,顶端部分由网站LOGO、导航条以及方便访问 者搜索相关信息的搜索栏构成。