常见的网页布局结构

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