电子商务网站的主页内容布局 授课：花小琴.

Presentation on theme: "电子商务网站的主页内容布局 授课：花小琴."— Presentation transcript:

1 电子商务网站的主页内容布局 授课：花小琴

2 常见的网页布局结构 国字型布局——国字型布局由同字型布局进化而来，因布局结构与汉字国相似而得名。其页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等。

3 常见的网页布局结构 T型布局——T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。

4 常见的网页布局结构 标题正文型——标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。

5 常见的网页布局结构 左右框架型布局——左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容

6 常见的网页布局结构 上下框架型——上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。

7 常见的网页布局结构 综合框架型——综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术

8 常见的网页布局结构 POP布局——POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。

9 常见的网页布局结构 FLASH布局——FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。

10 页面布局 页面布局效果 条理清晰 主次分明 色彩对比度适当 布局疏密适当
条理清晰：网页起到向浏览者传达信息的作用，必须保持页面条理清晰、让每个浏览者都会很轻松的理解页面的内容。 主次分明：一个网页所包含的网页元素很多，包括图像、文字、动画和影片等，必须通过布局来保证主次分明。 色彩对比度适当：让不同的形态、色彩等元素相互对比，来形成鲜明的视觉效果。例如不同颜色之间的对比，大块颜色与小块颜色的对比等，它们往往能够创造出丰富的变化效果。 布局疏密适当：网页要做到疏密有度，不要整个网页一种样式，在适当进行留白，运用空格、改变行间距、字间距等制造出一些变化的效果。 10

11 网页布局形式 常见网页布局形式 “国”字型 拐角型 标题正文型 左右框架型 上下框架型 综合框架型 封面型 Flash型 变化型 “国”字型
也可以称为“同”字型，是一些大型网页所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分别列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是大家大网上见到的最多的一种结构类型。 11

12 网页布局形式 拐角型 拐角型 这种结构与“国”字型其实只是形式上的区别，其实很相近的，上面是标题及广告横幅，接下来是左侧的一窄列链接等，右列是很宽的正文，下面也是网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。 12

13 网页布局形式 封面型 封面型 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接，甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果处理的好，会给人带来赏心悦目的感觉。 13

14 网页布局形式 Flash型 Flash型 其实Flash型与封面型结构是类似的，只是这种类型采用了目前非常流行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。 14

15 网页版面布局与制作 布局就是指以最适合用户浏览的方式将图片和文字排放在页面的不同位置。“最适合”是一个不确定的形容词 。
布局的重要性：挖掘客户的需求，将用户需要的内容充分展示出来， 为客户提供舒适、友好、简单的访问体验，进而留住客户，还能结合SEO，提升网站的搜索引擎排名。如同盖房子有草图一样，网站设计也同样有草图。

16 草图

17 示意图（布局图）——美工图

18 网站外形尺寸：网页黄金分割

19 网站外形尺寸：网页黄金分割

20 九宫格 在这个九宫格中中间部分就产生了四个交叉点，这四个交叉点就是视觉中心点。

21 九宫格

22 十六种常见布局形式

23 首页 列表页（文字列表、图片列表） 内容页 单页面
网站示意图 首页 列表页（文字列表、图片列表） 内容页 单页面

24

25

26

27

28

29 电子商务网站结构图

30 电子商务网站首页内容 用户入口 导航条 商品类型 搜索框 首页广告 最新动态 推荐商品 最新商品 热卖商品 特价商品 购物帮助 友情链接
版权所有

31

32

33

34 本次课任务任务 画出网站的三级示意图（布局图、草图） 1.首页示意图； 2.二级分页示意图（如商品列表） 3.二级分页示意图（如我的商城） 4.三级分页示意图（如商品介绍） 使用软件：Photoshop、DreamWeaver、Word 要求：画出框架，不需要详细设计 可以参考，但不能照搬