网页设计2——页面布局.ppt

《网页设计2——页面布局.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、页面布局确定页面逻辑架构规范图例与交付物基本框架模板页面布局大框套小框布局方式通栏布局布局方式导航在主视觉下方布局方式左中右布局方式环绕式布局方式穿插式布局方式元素类型包含权重Logo图片模板T1导航链接组合模板T1面包屑链接组合模板T1列表标题文字重要文章列表序列文章名称、作者、发布时间明显页码及翻页链接组合上一页下一页当前页明显搜索表单模板T1广告图片模板T1◆确定页面逻辑架构例：Page[List02][Article_List][T1]的页面逻辑表◆确定页面逻辑架构例：Page[List02][Article_List][T1]的页

2、面逻辑图页面名称文件名字代号模板简介模板01Template_01T1无这是一个通用的左右两栏模板首页IndexPage01T2首页使用T2模板，纵列三栏布局文章列表Article_listList02T1某栏目的文章全集，使用T1模板……………◆确定页面逻辑架构◆规范物与交付物◆基本框架模板◆分析屏幕的复杂度◆分析屏幕的复杂度AverageScreen（平均值）分析平均值定义描述与对策AS<=2简单页面只需要两个屏幕即可以把页面中的全部信息传达清楚，将采用最简单的方式处理，甚至是“不分栏”处理2

3、使用分栏的方法进行内容区块的归并和分类，进行信息的组合610超复杂页面必须进行减肥或拆分，删除多余的页面元素，才能进行设计◆从纵栏入手进行内容分块一种典型的两栏布局，每个栏都有命名◆从纵栏入手进行内容分块内容分块通常包含四个大分类：页面识别（Page_ID）：包含商标、标语、页面标题、广告词、版权信息等导航系统（Navi）：导航条、面包屑交互工具（Tools）：搜索、登录、功能区

4、、友情链接等内容（Content）：内容的正文、列表、摘要◆从纵栏入手进行内容分块◆左边还是右边◆确定模板数量区块元素List01产品列表页List02资讯列表页Page01资讯最终页Index首页Colum02栏目页页面识别Logo&Slogan√√√√√导航系统导航√√√√√面包屑√√√√快速入口√交互工具搜索√√√√√登录注册√√√√√对比功能√√产品推荐√√√收藏√关联内容√访问历史√√√◆根据以上表格推出的最简单模板◆模板之间不是简单的外观区别突出品牌图形的Logo通常放置在首页或重要的分流页面简化的Logo通常在内容阅读页面提醒

5、用户识别目前的网站