资源简介

(共17张PPT)
第3章
网页布局设计
3.1
网页尺寸设置
图3-1 显示器尺寸使用率及页面视觉层次设置网页尺寸是进行网页设计的第一步。网页尺寸是指网页的高度和宽度。网页的高度一般没有限制，可根据网页内容来灵活设置。网页宽度主要分为定宽和自适应宽度两种类型。其中，定宽是指网页内容区域（版心）的宽度固定；自适应宽度是指网页内容区域的宽度自动适应浏览器（显示器）的宽度，随浏览器的宽度而变化。网页美工在设计网页前，应考虑页面是定宽还是自适应宽度。如果是定宽，应根据主流显示器的分辨率来设置效果图中的网页宽度。目前，主流显示器的分辨率如图3-1所示，因此，可将网页宽度设置为1 920、1 600、1 440、1 280、1 140、990等像素。其中，如果要让网页显得大气并具有现代感，可将其宽度设置为1 440像素以上；如果要让网页兼顾尺寸较小的显示器，则需要将其宽度设置得小一些，如990或1 024等像素。如果网页使用自适应宽度模式，可直接使用1 920像素或更大的宽度设计。提 示上述网页宽度尺寸是含页边距（图3-1所示的细节扩展区域）的尺寸；设计网页版心时，其宽度应比上述网页宽度稍小一些，以预留出页边距。例如，若网页对应的是1 366×768分辨率的显示器，可将网页版心宽度设为1 190像素。
3.2
网页常见布局类型
网页布局的类型很多，下面简要介绍一些常见布局类型。
3.2.1国字型国字型网页布局通常被门户、购物类等内容丰富的大型网站所使用。其基本布局形式是将网站的Logo、导航栏及Banner等置于顶部；下方安排网页的主体内容，主题内容的左、右两侧分别是导航菜单、广告或其他栏目；最后由页尾形成外框底部，将主体内容包围，如图3-2所示。图3-2 国字型网页布局网站Logo+导航栏+Banner广告导航菜单+其他主体内容广告+其他版权信息+联系方式+其他3.2.2拐角型拐角型布局与国字型布局类同，网页顶部都是网站的Logo、导航栏和Banner（Banner也可位于内容区）。不同的是，拐角型布局的页面左侧或右侧是纵向导航菜单，对侧为网页主体内容，即通过横向导航栏与纵向的导航菜单形成拐角，包围网页主体内容。拐角型布局同样适合购物类、门户类等网站使用，如图3-3所示。图3-3 拐角型网页布局网站Logo+导航栏固定导航菜单Banner广告、主体内容POP引自广告术语，是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心，如图3-4所示。POP型布局的网页常用于时尚类网站首页。其优点是页面优美，具有视觉冲击力，缺点是网页打开速度慢。3.2.3POP型图3-4 POP型网页布局图3-5 标题文本型网页布局标题文本型布局是指页面内容以文本为主。这种类型的网页顶部通常是标题，下面是正文，常用于注册、登录、评论或文章阅读等信息简洁的页面，如图3-5所示。3.2.4标题文本型图3-6 对称型网页布局顾名思义，对称型网页布局是指采取左右或者上下对称的布局。对称型布局如何应用得到，能使页面形成极佳的视觉冲击感。图3-6所示是典型的对称型网页布局，该网页无论是图像的内容还是版块的大小，都保持着人与马一一对称的关系。这样布局使页面极具震撼力，能给浏览者带来深刻的印象。3.2.5对称型全景型是目前十分流行的网页布局形式，是指使用全景图像或动画作为网站首页。该类型的网页高度通常只有一屏大小，浏览者可通过导航切换到其他页面。全景型布局的网页不仅时尚大方，而且有很强的视觉冲击感，多用于宣传企业形象，如图3-7所示。3.2.6全景型图3-7 全景型网页布局组合型网页布局多用于摄影网站或需要大量图片说明的网站，是指将等大或大小不一的多张图片组合、排列在网页中。需要注意的是，在选取图片时应事先统一图片的明度，让组合起来的图片具有整体感，否则密密麻麻拼在一起的图片会让人眼花缭乱。图3-8所示为日本的一家旅游网站的网页，它所选用的图片虽然大小不一，但色调是相同的。缤纷的色彩十分符合该行业特点，同时也能吸引浏览者的视线。3.2.7组合型图3-8 组合型网页布局图3-9是一家律师事务所的网站首页，该页面通过大小不一，但错落有致的矩形版块将导航内容散开分布在页面中。页面整体散而不乱，极具设计感。3.2.8散开型图3-9 散开型网页布局分割型布局是当今网页布局的一种流行趋势。常见的分割布局方式有斜线分割、块面分割、主题分割、等距分割等。使用分割布局的网页主次分明，形式感极强，能够将内容的重要性和层次性体现在网页的结构上，从而引导浏览者按顺序进行阅读，如图3-10所示。3.2.9分割型图3-10 分割式型网页布局
课堂互动
（1）以上介绍的网页布局类型各有哪些特点？
（2）某设计公司最近接手了一家电商网站的设计项目。该网站分类多，信息量大，作为该公司的网页美工，应选择什么类型的网页布局？
（3）观察图3-11所示的网页，简述它们分别属于哪种布局类型。
图3-11 不同布局类型的网页
提 示扁平化是目前流行的网页设计趋势之一，其特点是去掉页面中多余的透视、纹理、渐变及3D效果等元素，让“信息”重新作为网页核心被凸显出来。同时，在设计元素上强调极简化和符号化，让页面中的内容更容易被聚焦，从而带给用户更直观的浏览体验，如图3-12所示。图3-12 扁平化布局
THANK YOU!

展开更多......

收起↑