《页面的布局》PPT课件.ppt

1、页面的布局,本章主要内容,了解网页布局的基本元素 掌握编排文本和图像元素 了解网页布局的基本类型 掌握网页布局的注意事项,编排文本和图像元素,1.概述 页面布局：是指通过文字和图像等网页元素对象的某种空间组合以期最大 限度地表现网页的视觉和谐与优美。 2.编排文本 在网页布局中，文本的编排一般是指在文本在网页中的组织形式与布局样 式。 标题与正文编排，可以考虑先将正文分成若干栏，然后再将正文的标题置 入。将正文分栏的目的是为了获得页面的空间与弹性，以避免通栏编排可能 带来的的呆板和标题插入方式的单一性。虽然标题是网页中整段文本或整篇 文章的标题，但不一定非得千篇一律地放在文本段落的上方，在真正

2、设计时 ，我们完全可以尝试将标题居中、横向、竖向或边置等方式的编排处理，甚 至可以直接将标题插入到文本当中，从而以新颖的版式设计来打破旧有的规 律。,编排文本和图像元素,网页中的的字间距和行间距在某种程度上会改变访问者的阅读心理 ，如适 当加大文本的行间距可以体现轻松和舒展的情绪，适用于娱乐和抒情内容的 网页。另外，通过精心安排文字的字间距和行间距，可增强网页版面的空间 感和层次感，以充分体现设计师独到的匠心。 在进行网页文字的编辑时，常常会碰到提纲挈领的文字，即引文（也称眉 头）。引文概括一个段落、一个章节或整篇文章的大意，因此在编排上应给 予特殊的页面位置和空间来强调。引文的编排方式多种多

3、样，如我们可以将 引文嵌入到正文的左右侧、上方、下方或中心位置等，当然也可通过更改引 文的字体或字号来加以强调。若需要将网页中的个别文字作为整个页面或某 个局部区域的诉求重点，那么可以通过加粗、加边框、加下划线、加指示性 符号或倾斜文本等手段有意识地强化文字的外观和视觉效果，使其在页面中 显得出众而夺目。另外，改变某些文本的颜色，也可以使这部分文字得到强 调。实际上，上述方法都是运用了对比的法则。,编排文本和图像元素,2.编排图像 (1).概述 从艺术美的角度进行考究，网页中图像的编排主要有两种结构，一是四角 与中轴四点的结构，二是块状组合与散点组合结构。 (2).四角与中轴四点结构 四角是指

4、网页边界相交形成的四个点，中轴四点指经过网页中心的垂直线 和水平线的端点。通过四角与中轴四点结构的不同组合和变化，可以得到多 种多样的网页布局结构。,编排文本和图像元素,(3).块状组合与散点组合结构 块状组合是指通过水平线和垂直线将多幅图像在页面上整齐有序地排列成 块状，该结构具有强烈的整体感和秩序美感，网页中的各幅图像相互自由叠 置或分类叠置而构成的块状组合，具有轻快和活泼的特性，同时亦不失整体 感；散点组合是指将图像分散排列在网页中的各个部位，采用该结构的网页 注意图像的大小和主次。,网页布局的基本类型,1.概述 网页布局的基本类型大致可分为“国”字型、拐角型、标题正文型、左右框架 型、

5、上下框架型、综合框架型、封面型、Flash动画型和混合型等九种。 2. “国”字型 “国”字型结构是指网页的最上面是网站的Logo（标志）、Banner（横幅广告 条）和导航栏，中间是当前网页的主要内容（通常被分成大小不等的三列， 其中中间的一列用来放置当前网页的主体内容），最下面的是网站的版权声 明等信息。 3.拐角型 拐角型与“国”字型结构其实只是形式上存在一些区间，即网页的最上面是网 站的Logo（标志）Banner（横幅广告条）和导航栏，中间是当前网页的主要 内容（通常被分成大小不等的两列，其中较宽的列用来放置网页的主体内容） ，最下面是网站的版权声明等信息。,网页布局的基本类型,4.

6、标题正文型 标题正文型结构是指网页的最上面是当前网页的标题或类似的对象（如修 饰性图案），下面是当前网页的正文。 5.左右框架型 左右框架型是指网页的最上方为当前网页的标题或类似对象（如修饰性图 案），下面使用框架将网页划分成宽窄不等的两部分，左边的框架是一般比 较窄，主要是用来放置网页的导航链接，右边的框架一般比较宽，主要用来 显示当前链接的内容 6.上下框架型 上下框架结构与左右框架型结构比较类似，不同之处在于上下框架型结构 导航栏在当前网页的最上方,网页布局的基本类型,7.综合框架型 综合框架型的总体页面布局与拐角型结构十分类似，只不过综合框架型结 构在划分网页的布局时是采用了框架技术。

7、 8.封面型 封面型结构一般出现在网站的首页，大部分是通过精美的平面设计并结合 局部的动画效果，之后在网页中放上几个简单的链接，以提示访问者进入网 站的下一级页面。 9.Flash动画型 Flash动画型与封面型结构类似，只是该结构的网页是由Flash动画组合而成。 由于Flash动画具有丰富及强大的交互功能，所以该结构的网页可表达的信息 更丰富，而且其视听效果也十分完美 。,网页布局的基本类型,10.混合型 混合型结构是指根据网页版式设计的需要，灵活运用上述八种结构来达到 既定的版式设计要求。一般情况下，大部分的网页都需要同时使用上述八种 结构中的多种结构。,网页布局注意事项,1.概述 网页

8、版式设计中的注意事项主要体现在网页的宽度、网页的长度、网页文 件的大小 、突出更新内容、注意“留白”区域以及“动”、“静”搭配合理等六个方 面。 2.网页的宽度 随着互联网和电脑的发展，以前绝大用户采用800*600分辨率，现在逐渐 采用1024*768分辨率，由于宽屏显示器的出现，甚至有一部分用户采用 1280*800分辨率或更高的分辨率，这种“三分天下”的局面，给网页的布局 带来了一定困难，因为你无法知道用户到底采用哪一种分辨率来访问网页， 针对这情况，我们是采取表格或层的宽度百分比来设计。但是这种方式局限 了设计者对网页的美工设计、版式以及布局的表现和发挥。这样，只有采取 折衷的办法，在

9、网站加一个详细的分辨率统计功能，将网站开通运营一段时 间，通过分辨率统计来分析网站的受众采用的分辨率比例，来调整页面的设 计,网页布局注意事项,3.网页的长度 在web设计领域，网页的长度一般以浏览器窗口的屏数来度量，据有关权威 机构调查得出的结果显示，网页的长度一般不宜超过3屏（最佳长度为 1.82.5屏），因为屏数过多的网页会严重影响访问者的心情和耐心，同时也 不方便访问者查找自己想要的内容。当然，在一些很特殊的场合或一些十分 独特的网站中，网页的长度完全可以根据实际的需要来设计，因为网页的长 度从理论上来讲是可以无限长的，但尽管如此，还是建议最好保证所设计的 网页在3屏以内。,网页布局注

10、意事项,4.网页文件的大小 网页设计首先要解决的问题是为目标访问者快速地提供有价值的信息，其 次才能考虑将页面设计得尽可能漂亮一些。因此，在设计网页时，必须保证 网页能被访问者快速地下载，即保证网页的文件体积尽可能地小。 一般地，网站的首页文件（包含所有图像、文本和多媒体对象）不宜超过 30KB，网站的二级页面的文件（包含所有图像、文本和多媒体对象）不宜超 过45KB。 若在网页中使用了大量的图像，特别是使用了大面积图像，那么最好将网 页中的图像首先在Photoshop或Fireworks等软件中进行切割，同时还需要将切 割后图像文件输出成HTML格式的文件，以方便Dreamweaver 等软件对网页 进行进一步的加工。,网页布局注意事项,5.突出更新内容 可以专门开辟一块地方放更新的内容，也可以把更新了的内容用颜色或者小 动画之类的图片突出显示，总之就是让访问者一下子就能知道网站最近有没 有更新、更新了哪些内容，这样浏览者就不必把时间花费在“寻找”之中。同时 ，也使网页有了“亲和力”。 6.注意“留白”区域 不要把页面全都放上内容，适当地留出些空白区域，不仅可以利用这些空 白来划分不同的区域，还可以给浏览者的眼睛一