第6章页面的布局(论文资料).pptVIP

页面的布局 本章主要内容 了解网页布局的基本元素 掌握编排文本和图像元素 了解网页布局的基本类型 掌握网页布局的注意事项 编排文本和图像元素 1.概述 页面布局：是指通过文字和图像等网页元素对象的某种空间组合以期最大 限度地表现网页的视觉和谐与优美。 2.编排文本 在网页布局中，文本的编排一般是指在文本在网页中的组织形式与布局样 式。 标题与正文编排，可以考虑先将正文分成若干栏，然后再将正文的标题置 入。将正文分栏的目的是为了获得页面的空间与弹性，以避免通栏编排可能 带来的的呆板和标题插入方式的单一性。虽然标题是网页中整段文本或整篇 文章的标题，但不一定非得千篇一律地放在文本段落的上方，在真正设计时 ，我们完全可以尝试将标题居中、横向、竖向或边置等方式的编排处理，甚 至可以直接将标题插入到文本当中，从而以新颖的版式设计来打破旧有的规 律。 编排文本和图像元素 网页中的的字间距和行间距在某种程度上会改变访问者的阅读心理 ，如适 当加大文本的行间距可以体现轻松和舒展的情绪，适用于娱乐和抒情内容的 网页。另外，通过精心安排文字的字间距和行间距，可增强网页版面的空间 感和层次感，以充分体现设计师独到的匠心。 在进行网页文字的编辑时，常常会碰到提纲挈领的文字，即引文（也称眉 头）。引文概括一个段落、一个章节或整篇文章的大意，因此在编排上应给 予特殊的页面位置和空间来强调。引文的编排方式多种多样，如我们可以将 引文嵌入到正文的左右侧、上方、下方或中心位置等，当然也可通过更改引 文的字体或字号来加以强调。若需要将网页中的个别文字作为整个页面或某 个局部区域的诉求重点，那么可以通过加粗、加边框、加下划线、加指示性 符号或倾斜文本等手段有意识地强化文字的外观和视觉效果，使其在页面中 显得出众而夺目。另外，改变某些文本的颜色，也可以使这部分文字得到强 调。实际上，上述方法都是运用了对比的法则。 编排文本和图像元素 2.编排图像 (1).概述 从艺术美的角度进行考究，网页中图像的编排主要有两种结构，一是四角 与中轴四点的结构，二是块状组合与散点组合结构。 (2).四角与中轴四点结构 四角是指网页边界相交形成的四个点，中轴四点指经过网页中心的垂直线 和水平线的端点。通过四角与中轴四点结构的不同组合和变化，可以得到多 种多样的网页布局结构。 编排文本和图像元素 (3).块状组合与散点组合结构 块状组合是指通过水平线和垂直线将多幅图像在页面上整齐有序地排列成 块状，该结构具有强烈的整体感和秩序美感，网页中的各幅图像相互自由叠 置或分类叠置而构成的块状组合，具有轻快和活泼的特性，同时亦不失整体 感；散点组合是指将图像分散排列在网页中的各个部位，采用该结构的网页 注意图像的大小和主次。 网页布局的基本类型 1.概述 网页布局的基本类型大致可分为“国”字型、拐角型、标题正文型、左右框架 型、上下框架型、综合框架型、封面型、Flash动画型和混合型等九种。 2. “国”字型 “国”字型结构是指网页的最上面是网站的Logo（标志）、Banner（横幅广告 条）和导航栏，中间是当前网页的主要内容（通常被分成大小不等的三列， 其中中间的一列用来放置当前网页的主体内容），最下面的是网站的版权声 明等信息。 3.拐角型 拐角型与“国”字型结构其实只是形式上存在一些区间，即网页的最上面是网 站的Logo（标志）Banner（横幅广告条）和导航栏，中间是当前网页的主要 内容（通常被分成大小不等的两列，其中较宽的列用来放置网页的主体内容） ，最下面是网站的版权声明等信息。 网页布局的基本类型 4.标题正文型 标题正文型结构是指网页的最上面是当前网页的标题或类似的对象（如修 饰性图案），下面是当前网页的正文。 5.左右框架型 左右框架型是指网页的最上方为当前网页的标题或类似对象（如修饰性图 案），下面使用框架将网页划分成宽窄不等的两部分，左边的框架是一般比 较窄，主要是用来放置网页的导航链接，右边的框架一般比较宽，主要用来 显示当前链接的内容 6.上下框架型 上下框架结构与左右框架型结构比较类似，不同之处在于上下框架型结构 导航栏在当前网页的最上方 网页布局的基本类型 7.综合框架型 综合框架型的总体页面布局与拐角型结构十分类似，只不过综合框架型结 构在划分网页的布局时是采用了框架技术。 8.封面型 封面型结构一般出现在网站的首页，大部分是通过精美的平面设计并结合 局部的动画效果，之后在网页中放上几个简单的链接，以提示访问者进入网 站的下一级页面。 9.Flash动画型 Flash动画型与封面型结构类似，只是该结构的网页是由Flash动画组合而成。 由于Flas