《页面的布局》PPT课件

《《页面的布局》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

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

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

4、构，一是四角与中轴四点的结构，二是块状组合与散点组合结构。(2).四角与中轴四点结构四角是指网页边界相交形成的四个点，中轴四点指经过网页中心的垂直线和水平线的端点。通过四角与中轴四点结构的不同组合和变化，可以得到多种多样的网页布局结构。编排文本和图像元素(3).块状组合与散点组合结构块状组合是指通过水平线和垂直线将多幅图像在页面上整齐有序地排列成块状，该结构具有强烈的整体感和秩序美感，网页中的各幅图像相互自由叠置或分类叠置而构成的块状组合，具有轻快和活泼的特性，同时亦不失整体感；散点组合是指将图像分散排列在网页中的各个部位，采用该结构的

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

6、条）和导航栏，中间是当前网页的主要内容（通常被分成大小不等的两列，其中较宽的列用来放置网页的主体内容），最下面是网站的版权声明等信息。网页布局的基本类型4.标题正文型标题正文型结构是指网页的最上面是当前网页的标题或类似的对象（如修饰性图案），下面是当前网页的正文。5.左右框架型左右框架型是指网页的最上方为当前网页的标题或类似对象（如修饰性图案），下面使用框架将网页划分成宽窄不等的两部分，左边的框架是一般比较窄，主要是用来放置网页的导航链接，右边的框架一般比较宽，主要用来显示当前链接的内容6.上下框架型上下框架结构与左右框架型结构比较类似

7、，不同之处在于上下框架型结构导航栏在当前网页的最上方网页布局的基本类型7.综合框架型综合框架型的总体页面布局与拐角型结构十分类似，只不过综合框架型结构在划分网页的布局时是采用了框架技术。8.封面型封面型结构一般出现在网站的首页，大部分是通过精美的平面设计并结合局部的动画效果，之后在网页中放上几个简单的链接，以提示访问者进入网站的下一级页面。9.Flash动画型Flash动画型与封面型结构类似，只是该结构的网页是由Flash动画组合而成。由于Flash动画具有丰富及强大的交互功能，所以该结构的网页可表达的信息更丰富，而且其视听效果也十分完

8、美。网页布局的基本类型10.混合型混合型结构是指根据网页版式设计的需要，灵活运用上述八种结构来达到既定的版式设计要求。一般情况下，大部分的网页都需要同时使用上述八种结构中的多种结构。网页布局注意事项1.概述