网页布局设计.pptVIP

  1. 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
  2. 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  3. 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
  4. 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
  5. 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们
  6. 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
  7. 7、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
3.3.2 曲线 在对网页布局时,常用直线分割版块。这样的布 局方式虽然不会出错,但过多的直线分割会让画面显 得死板,如图 3-15 ( a )所示。而通过改变分割线形 状,如将直线改为曲线、折线等,能有效地解决这个 问题,如图 3-15 ( b )所示,效果如图 3-16 所示。 ( a ) ( b ) 图 3-15 用直线和曲线分割版块 图 3-16 采用曲线分割的版块布局 21 3.3.3 ( a ) ( b ) 过渡 图 3-17 版块之间过渡生硬和过渡自然 对称型是目前比较流行的网页布局方式之一,采用这种布局的页面简洁大气,能够有效避免 因图片与文字叠加造成的混乱,但由于对称版块的颜色、样式不同,分割线会十分明显,导致版 块间过渡生硬,如图 3-17 ( a )所示。此时,可将与版块内容相关的元素置于 2 个版块之间,对版 块进行过渡处理,如图 3-17 ( b )所示。 22 图 3-18 所示的网页中, 设计师将产品图片横跨 2 个 版块,巧妙地打破了生硬 的分割线,让版块过渡更 为柔和,并且为页面增加 了活力。 图 3-18 采用产品图片过渡的对称布局 23 3.3.4 ( a ) ( b ) 隐藏 图 3-19 版块内容的全显和部分隐藏 对于 POP 型的页面布局来说,将图像中的所有信息集中放在版块中的某个位置会使页面显得 小气,如图 3-19 ( a )所示。而通过提炼信息内容,保留主要信息,隐藏次要信息能使页面更加大 气,如图 3-19 ( b )所示。 24 图 3-20 所示是一家设计类 网站,该网站以精简化的图片 作为首页的背景。图片只保留 最具特色的部分,将重复、次 要的部分置于屏幕外,从而更 有利于突出重要信息,同时也 让画面有一定的延伸感,显得 更加大气。 图 3-20 隐藏次要信息的 POP 型页面 25 第 3 章 网页布局设计 情景模拟 网页布局是指以最适合浏览的方式规划 网页各组成元素在页面中的位置,包括 Logo 、导航栏、 Banner 、图片和文字等。 在设计网页前应根据网站的类型、内容和风 格规划好网页布局。一个没有合理布局的网 页即使局部细节处理得再好,页面整体也会 是一盘散沙,不便于用户浏览。 小张的某个朋友由于缺乏设计网页的经 验,在设计网页时没有合理规划网页布局, 导致设计的网页版式凌乱,前后风格不一, 虽然某些版块设计出彩,但客户都不买账。 小张决定吸取朋友的教训,好好学习一下网 页布局设计。 了解网页的宽度设置 学习 目标 了解网页布局的常见类型 和网页布局技巧 能够根据需要合理地规划网页布局 3.1 网页尺寸设置 图 3-1 显示器尺寸使用率及页面视觉层次 设置网页尺寸是进行网页设计的第一步。网 页尺寸是指网页的高度和宽度。网页的高度一般 没有限制,可根据网页内容来灵活设置。网页宽 度主要分为定宽和自适应宽度两种类型。其中, 定宽是指网页内容区域(版心)的宽度固定;自 适应宽度是指网页内容区域的宽度自动适应浏览 器(显示器)的宽度,随浏览器的宽度而变化。 网页美工在设计网页前,应考虑页面是定宽 还是自适应宽度。如果是定宽,应根据主流显示 器的分辨率来设置效果图中的网页宽度。目前, 主流显示器的分辨率如图 3-1 所示,因此,可将 网页宽度设置为 1 920 、 1 600 、 1 440 、 1 280 、 1 140 、 990 等像素。其中,如果要让网页显得大 气并具有现代感,可将其宽度设置为 1 440 像素 以上;如果要让网页兼顾尺寸较小的显示器,则 需要将其宽度设置得小一些,如 990 或 1 024 等像 素。 如果网页使用自适应宽度模式,可直接使用 1 920 像素或更大的宽度设计。 5 提 示 上述网页宽度尺寸是含页边距 (图 3-1 所示的细节扩展区域)的 尺寸;设计网页版心时,其宽度应 比上述网页宽度稍小一些,以预留 出页边距。例如,若网页对应的是 1 366 × 768 分辨率的显示器,可将 网页版心宽度设为 1 190 像素。 6 3.2 网页常见布局类型 网页布局的类型很多,下面简要介绍一 些常见布局类型。 3.2.1 网站 Logo+ 导航栏 +Banner 广告 导 航 菜 单 + 其 他 广 告 + 其 他 国字型 主体内容 版权信息 + 联系方式 + 其他 图 3-2 国字型网页布局 国字型网页布局通常被门户、 购物类等内容丰富的大型网站所 使用。其基

文档评论(0)

jinxuetong + 关注
实名认证
文档贡献者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档