第三章页面排版与布局.ppt

学习网站的设计与开发 郁晓华 主编 第三章 页面排版与布局 版面布局设计过程 网页信息量和结构样式 网页色彩 页面布局技术 一、页面的版面布局 指以最合适浏览的方式将图片和文字排放在页面的不同位置，使得视觉效果与使用效果最佳。 确定如何把功能模块安排到页面上（主次模块问题） 可画出页面的结构草图 一、页面的版面布局 版面布局是一个创意的过程，分3个阶段 方案设计：创意阶段，画出页面的结构草图 初步设计：确定功能模块摆放，涉及主次模块问题 定案设计：调整，对初步的布局进行精细化、具体化 白色背景，可加些色块 版面零散，可用线条和符号串联 文字过多，可插图片平衡 表格太规矩，可改用导角 二、网页信息量和结构样式 页面的空间构成（日本视觉设计研究所 ）：标题空间、欢迎空间和目录信息空间 二、网页信息量和结构样式 信息量的5种类型 页面结构的5种样式 1.信息量的5种类型 检索型： 以文字信息为主体，图片少于5% 将表示欢迎的信号控制在最低限度，如小图片、配色讲究 但可以通过增加空白表现自由感和高贵感 准检索型： 文字与图像的比例为2:1 稍微增加图形、色彩要素使主页气氛开放 1.信息量的5种类型 均衡型： 欢迎空间与目录信息各占一半 与任何排版样式都可以进行自由的组合 印象主体型： 以图片为主体，产生画面的宽裕感，传达优雅、自由的气氛 配色以同色系为基调，有节制使用对比色 目录省略型： 文字信息最少的样式，除标题外文字限制在1~2行内 最大限度地表现页面印象，造型性是表现优美效果的关键 2.页面结构的5种样式 开放结构 以图或文作为视觉中心，将各种页面要件和视觉要素向页面四周展开 视觉中心可以在页面中心，也可在页面某一边角或任意一点上 特点：布局自由活泼，形式灵活多变，节目简洁美观 基本类型：轴型、线型、焦点型 页面结构的5种样式 包围结构 分全包围和半包围 为了包容杂多的内容，利用一定形式的色块、图片、线条等构件形成全封闭或半封闭的边栏或边框，以使网页的视觉效果更具整体感 特点：适合于栏目多，板块多，广告多，信息量大的网站 基本类型：格型、框型 二、网页信息量和结构样式 页面排版样式选择 三、网页色彩 216网络安全色 “静态色彩”和“动态色彩” 1.216网络安全色 216网络安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的色彩集合，也就是说在任何浏览用户显示设备上都能显示相同效果的色彩。 网络安全颜色为216种颜色，其中彩色210种，非彩色6种 常用的网页制作软件都自带了216网络安全色调色板，推荐网页上的调色板，合理协调显示了216色间的相互关系 2.“静态色彩”和“动态色彩” “静态色彩”（框架色彩） 是结构色彩、背景色彩和表格色彩等带有特殊识别意义的、决定网站的色彩风格的色彩 给访问者留下的色彩印象，作用是永久的 2.“静态色彩”和“动态色彩” “动态色彩” 是插图、照片和广告等复杂图像中带有的色彩，带有多种不同的色调，并且在不同的页面更换 只能对单独页面起强烈的视觉引导作用，但访问者离开后就不会记得，作用是即时的 “静态色彩”和“动态色彩” 以静态色彩为主体的网站主要是大型的门户、资讯和电子商务等信息内容型的站点 以动态色彩为主体的网站主要是图片尺寸大、图片信息多的图片展示型的站点 四、页面布局技术 页面切割 布局方式（表格、层和框架） 1.页面切割 原则： 网页简单化。简单到把网站分为header，content，sidebar，footer四个部分 把网页中的图片尽量切割得小一些 有规律部分的图片可以考虑使用背景图案 设计比较复杂的部分，可以不分割 2.布局方式 表格布局 由图像编辑器全自动生成表格布局的页面，如Adobe Photoshop、ImageReady和Fireworks等 表格属性： border=0 cellpadding=0 cellspacing=0 大小单位：百分比/像素 单元格的合并与拆分：colspan/rowspan 表格布局 2.布局方式 层布局 层是网页的一个区域，用于精确定位网页元素。可往层里加入图像、文本等其他页面元素，借助层可以对加入的页面元素进行精确定位。 DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。 CSS+DIV是基于XHTML网站设计语言的国际WEB标准中的典型应用，是为了说明与HTML网页设计语言中的表格（table）定位方式的区别。 2.布局方式 CSS盒模型（Box?Model） 2.布局方式 表格布局与层布局（案例） 2