任务实施
01 电商企业网站的需求分析 02 电商企业网站的布局结构分析
03 电商企业网站的色彩应用
知识分析 1.网站规划的市场调研
网站的规划是指在网站建设前确定好网站的主题和功能目标后，对网站目标 定位，进行的内容规划和功能规划。其中直接的表现就是网站结构的规划，特别 对于网站前端部分而言，更为关注的是网站的栏目设计。
度，通过划分具有规律的分割，来提高网页开发效率。如下图所示： 将960像素的页面平均分成12分，间隔10像素。
960像素12栅格分割示意图
知识分析 3. 基于栅格化设计原理的网页布局
（1）960栅格化系统 960栅格化系统系统（或者说适应型css构架）早期主要用来进行快速原型制
作，减少重复单调的工作，但是目前，它在网页设计开发项目中开始扮演非常重 要的角色。它为我们的设计提供一个坚实的坐标基础。
拓展练习 2.网页设计常用尺寸
网页设计因其载体的限制，要充分考虑到设备的尺寸，在设计页面的过程中， 设计师往往会根据屏幕大小来设计页面每个部分的宽窄，通常一个静态屏幕所展 示页面的宽高可以称之为一屏，一个完整的页面是由多屏组成的。
一屏的宽度由显示器宽度决定，再根据不同的浏览器进行微调。在显示器的 尺寸上减去20像素到30像素不会出现水平滚动条。但在实际操作中，我们通常只 会对网页中的主体部分进行设计，将主体放在屏幕中间，两边留白，或者插入大 的背景图。因此网页的宽度很大程度上会和版心尺寸保持一致。通常是920像素到 1400像素之间。而一屏的高度通常会在600像素到800像素之间，如果超过800像素， 那么该部分内容就不能在一个静态屏幕上完整显示，会进一步影响用户的体验。
知识分析
2. 竞品分析 竞品分析通常包括背景分析和定位分析两方面： 背景分析主要包括公司的资源、团队的背景，人员构成、组织架构、公司愿景、 成本构成。通过背景分析，可以深入了解公司的现状，公司的风格。
知识分析
3. 基于栅格化设计原理的网页布局 栅格系统应用于设计领域已经至少50年了。栅格化让眼睛浏览信息更加愉悦。
拓展练习
3．网页广告常用尺寸
网页中，不同类型的广告通常会有不同的不同的尺寸，如下表所示。
网页中的广告并没有绝对的尺寸大小，在实际使用中，可以根据不同的情况进行
调整。
序号
1 2. 3. 4 5 6
尺寸（单位： px）
120*120 120*60 120*90 125*125 234*60 392*72
习题
1.根据所讲5种网页布局方式，为每种布局寻找一个具体的网站案例并进行分析。 2.以“农业电商app”为主题，收集相关信息，并进行竞品分析。
Part 02
任务二· 借鉴赏析典型电商网站
任务引导
无论是作为设计师还是使用网站 的客户，我们都需要有一定的审 美能力去辨别不同的网页。本任 务的目标是通过浏览“名城房 产”、“恒生电子”等中小企业 的网站,来分析其页面布局、网 站栏目构成、色彩搭配等,以便 为同类型企业规划设计网站。
7
468*60，
8
88*31
用途
适用于产品或新闻照片展示。 主要用于做LOGO使用。 主要应用于产品演示或大型LOGO。 适于表现照片效果的图像广告。 适用于框架或左右形式主页的广告链接。 主要用于有较多图片展示的广告条，用于页眉或 页脚。 应用最为广泛的广告条尺寸，用于页眉或页脚。 主要用于网页链接，或网站小型LOGO。
960像素12栅格分割示意图
知识分析
3. 基于栅格化设计原理的网页布局 （2）栅格计算方法
在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与 单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如图所示
栅格化计算方法示意图
W =（a×n）+（n-1）i 由于a+i=A， 可得：(A×n) – i = W
从报纸、杂志，到手机界面，栅格系统全面渗透到各种信息传达的界面当中。 1692年，法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管 理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的，重视功能 性的新字体。
知识分析 3. 基于栅格化设计原理的网页布局
（1）960栅格化系统 960栅格化系统是由Nathan Smith创造的，具体来讲，就是基于960像素宽
项目一 赏析电子商务网站页面
项目综述
通过比较和分析，掌握电子商务企业网站和典型电子商 务网站的设计需求、页面组成部分、常见布局方式和配色方法， 通过学习能够模仿同类网站进行设计规划。
项目目标
能力目标：学习完本项目后,学生应当能够依据不同的网站、网店设计需求对网站进行合理的
结构规划,包括: (1)分析网站的配色方案。 (2)分析网站的版式结构。 (3)编写简易网站赏析报告。 (4)模仿同类网站进行规划设计。
ห้องสมุดไป่ตู้展练习
1.版心 版心是页面中主要内容所在的区域。版面上除去周围白边，剩下的以文字和
图片为主要组成的部分就是版心。在对网页进行布局设计的过程中，也精彩用到 版心的概念，而版心的大小通常和显示器的宽度有关。面对不同的显示器宽度常 用的版心尺寸分别由：920像素、960像素、1000像素、1200像素。随着显示器 的不断变宽，用户越来越喜爱宽屏所带来的视觉体验，1400像素的版心尺寸也逐 渐普及。
对于确定网站的主题和功能目标而言。就是明确该电商企业网站建立的目标是 企业形象展示，还是用于与用户之间进行交互、社群营销改进服务；还是单纯要 实现网络营销与在线交易为主的。其次，是分析考虑企业自身的经营状况，包括 企业的主营产品的情况，消费市场的认知程度以及所处行业状况。目标明确后， 就是市场分析，分析网络中企业现有的同类型公司的网站情况。若是比较大的网 站，那么往往还需要进行调研面对市场人群的详细情况，进行目标客户分析。最 后再进行可行性分析评估。
知识目标：(1)网页基础知识。
(2)网页的基本构成。 (3)网站的构成和风格设置。 (4)网页布局的常用结构。 (5)网站的规划原理。
Part 01
任务一· 借鉴分析典型电商企业网站的结构
任务引导
本任务的目标是通过分析店庆电商企业网站的结构掌握电商 网站的需求分析、布局结构分析和色彩应用分析，然后了解基本 的网站需求分析方法、常见排版方式和配色方式。