❖ 布局的重要性：挖掘客户的需求，将用户需要的内容 充分展示出来， 为客户提供舒适、友好、简单的访问 体验，进而留住客户，还能结合SEO，提升网站的搜索 引擎排名。如同盖房子有草图一样，网站设计也同样 有草图。
草图
示意图（布局图）——美工图
网站外形尺寸：网页黄金分割
网站外形尺寸：网页黄金分割
❖ 左右框架型布局——左右框架型布局结构是一些大型论坛和企业经 常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左 侧一般主要为导航栏链接，右侧则放置网站的主要内容
常见的网页布局结构
❖ 上下框架型——上下框架型布局与前面的左右框架型布局类似。其 区别仅在于是一种上下分为两页的框架。
常见的网页布局结构
九宫格
在这个九宫格中中间部分就产生了四个交叉点，这四个交叉 点就是视觉中心点。
九宫格
十六种常见布局形式
网站示意图
1. 首页 2. 列表页（文字列表、图片列表） 3. 内容页 4. 单页面
电 子 商 务 网 站 结 构 图
首页 商品分类 电子商务网站 我的商城
促销活动 客户服务
后台管理
❖ T型布局——T型布局结构因与英文大写字母T相似而得名。其页面的 顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单 ，下方右侧则用于放置网页正文等主要内容。
常见的网页布局结构
❖ 标题正文型——标题正文型布局的布局结构一般用于显示文章页面、 新闻页面和一些注册页面等。
常见的网页布局结构
电子商务网站的主页内容布局
授课：花小琴
常见的网页布局结构
❖ 国字型布局——国字型布局由同字型布局进化而来，因布局结构与 汉字国相似而得名。其页面的最上部分一般放置网站的标志和导航 栏或Banner广告，页面中间主要放置网站的主要内容，最下部分一 般放置网站的版权信息和联系方式等。
常见的网页布局结构
商城信息管理 活动管理 商品分类管理 商品管理 广告管理 问答管理 订用户入口 ❖ 导航条 ❖ 商品类型 ❖ 搜索框 ❖ 首页广告 ❖ 最新动态 ❖ 推荐商品 ❖ 最新商品 ❖ 热卖商品 ❖ 特价商品 ❖ 购物帮助 ❖ 友情链接 ❖ 版权所有
本次课任务任务
用户入口 商品类型 最新商品 购物帮助
商品列表
导航 广告 推荐商品 友情链接
商品介绍
搜索框 促销活动 热卖商品 版权所有
商品问答
商品评价
加入收藏 加入购物车
登录/注册 帐户管理 我的收藏 我的订单 我的问答 我的评价
购买 确认订单
提交订单
活动列表 活动内容页
购物流程 付款方式 配送服务 售后服务 关于我们
❖ 综合框架型——综合框架型布局是结合左右框架型布局和上下框架 型布局的页面布局技术
常见的网页布局结构
❖ POP布局——POP布局是一种颇具艺术感和时尚感的网页布局方式。 页面设计通常以一张精美的海报画面为布局的主体。
常见的网页布局结构
❖ FLASH布局——FLASH布局是指网页页面以一个或多个Flash作为页面 主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。
页面布局
页面布局效果
条理清晰 主次分明 色彩对比度适当 布局疏密适当
网页布局形式
常见网页布局形式
“国”字型 拐角型 标题正文型 左右框架型 上下框架型 综合框架型 封面型 Flash型 变化型
“国”字型
网页布局形式
拐角型
网页布局形式
封面型
网页布局形式
Flash型
网页版面布局与制作
❖ 布局就是指以最适合用户浏览的方式将图片和文字排 放在页面的不同位置。“最适合”是一个不确定的形 容词 。
❖ 画出网站的三级示意图（布局图、草图） 1.首页示意图； 2.二级分页示意图（如商品列表） 3.二级分页示意图（如我的商城） 4.三级分页示意图（如商品介绍）
❖ 使用软件：Photoshop、DreamWeaver、Word ❖ 要求：画出框架，不需要详细设计
可以参考，但不能照搬