第四章 网页的布局方法.pptVIP

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 网页的布局技巧 对称式布局（以中心为基线，左右对称） * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 网页的布局技巧 卫星式布局（以太阳为中心的卫星环绕型） 布局特点是中间有一个太阳，各个卫星以全景布局展开，让浏览者沉浸在可以自由参与的开发感之中。 太阳带来坚定不移的安定感和卫星带来的开放感并存。 常见的卫星式布局包括以下几种类型 以太阳为中心，小卫星均匀散开 以太阳为中心的不同散开形式 太阳不在页面的中心，卫星在周围排列 网页的布局技巧 照片组合式布局（新世界以全景式自由的展现出来） 多张照片经过组合，产生新的情趣，显现出全景式的效果。 网页的布局技巧 包围式布局（限定范围的效果） 将页面四周用色块或者图案围起来，便产生了一个被限定的空间，使人产生了安全感，给人信任、稳定的感受 如果“墙壁”结实有力，就表示这个范围是一个拒绝他人侵入的特别“领地”，给人一种非常安全的感受 用柔和的色彩包围，给人轻松感受 在“墙壁”的某一侧打开一个缺口，给人互动的、开放的感受 同时在“墙壁”的两侧打开缺口，给人限定的开放感 网页的布局技巧 散开式布局（山水画般的自由和优雅） 无规则的排列，体现自由和自然的感觉 网页的布局技巧 单侧齐行式布局（理性与自由共存的版式设计） 这种布局形式是指以左对齐式为基调，将右侧散开。在追求理智与自由感平衡的场合，常使用这种布局形式。 优雅的布局形式，不适合信息量大的网页。 信息量过多，则会减少右侧的自由空间，单侧齐行式布局所特有的美感也会削弱 网页设计与制作第四章网页布局方法 网页的布局设计 按照一定的规律把网页中图像和文字等页面元素排列到最佳的位置，也可以称为网页排版 分割、组织和传达信息，并且使网页容易阅读，使界面具有亲和力和可用性是网页设计师的责任。 确定版面率 页面整体布局 页面局部布局 网页布局的流程图 设计版式造型 绘制页眉 绘制文本 最后调整的草图 确定版面率 网页的版面率是图片和文字在浏览器中所占的比率，也就是网页中留白区域的面积。 留白区域面积少会使页面局促、紧凑； 留白区域多，会使页面自由、大气 还要确定网页中文字和图像的面积比率，这关系到版面产生的生动性、记忆性和阅读性 图像多增强阅读活力，反之，则会减少阅读兴趣 文字比例太低则会削弱沟通力和亲和力，阅读兴趣也会随之减弱 “网格设计” 确定版面率 页面整体布局 页面局部布局 网站标志 万客 会刊 网站广告 新闻中心 版权信息 趣味空间 广告 广告 万科 楼盘 会员 登录 导航 网页布局形式的分类 满版布局形式 文字或图像充满整个页面，有时是以单一的背景颜色或图像填充页面 适用于首页、flash动画网站。美观、大气、充满艺术气息。 十字布局形式 以横向与纵向来分隔整个页面 多用于产品宣传网页，以及需要使用大量图像的网页 网页布局的分类 九宫格布局形式 九宫格的变化形式 网页布局的分类 米字布局形式 网页的布局技巧 黄金分割式布局（完美的比例给人视觉上的享受） 网页的布局技巧 左右对齐式布局（没有浪费的空间，表现商业性形象） 网页的布局技巧 全景式布局（用趣味性吸引浏览者） 将小图像间隔地排列，视线无论从哪个角度都可以进入页面，从而给人以开放的轻松气氛 对于全景布局而言，图像的位置是重点： 页面中均一排列着多幅小图像，给人开放。轻松的感受，容易吸引浏览者， 页面中的图像过少，则看起来不像是全景式布局 页面中的图像过大，给人迟钝和沉重的感受 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *