《网站设计指南》 第15章 主体版面设计.pptVIP

《网站设计指南》 第15章 主体版面设计.ppt

  1. 1、本文档共20页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
  5. 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
  6. 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们
  7. 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
  8. 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
《网站设计指南》 第15章 主体版面设计

第15章 主体版面设计 网页的主体版面是指去除页面头部和页脚部分用来放置页面主要内容的页面区域。在内容区域一般包括页面的内容链接、文章列表和文章信息等,如图所示。主体版面的设计包括主体版面布局的确定、版面颜色和字体的选择、主题版面各模块的添加、图片和链接的设置等。 15.1 主体版面风格的确定 主体版面的风格是由页面的整体风格、页面的尺寸和页面的版面布局共同决定的。页面的整体风格决定了主体版面的颜色搭配、字体使用和图片排列;页面的尺寸决定了主体版面的宽度;页面的版面布局决定了主体版面内容板块的排列。同时,在进行主题版面设计时必须遵循一定的规则。本节将分别介绍这些内容。 15.1.1 主体版面颜色搭配 在网页页面中,使用不同的颜色可以让人有不同的感受。在主体版面中,使用的颜色一般是页面的主颜色。在色彩搭配上,既要与页面头部风格相融合,又要与页面表现的内容相关联。一般的主体版面颜色数量应该尽量控制在3种颜色以内,前景色和背景色的对比应该明显,背景色要求柔和一些,前景色应该选择深一点的颜色。互联网上比较常见的色彩搭配技巧如下: 15.1.1 主体版面颜色搭配 1.以一种色彩为主的颜色搭配 15.1.1 主体版面颜色搭配 2.两种色彩搭配 15.1.1 主体版面颜色搭配 3.以一个色系作为主颜色搭配 15.1.1 主体版面颜色搭配 4.用黑色配一种彩色 15.1.2 主体版面字体选择 网页中字体的选择主要包括字号、字体和行距。 1.字号 字体的大小称为字号。 2.字体 网页制作中比较常用的中文字体是宋体和黑体。 3.行距 上一行字顶端到其下一行字顶端的距离称为行距。 15.1.3 主题版面的大小控制 由于用户使用的浏览器屏幕分辨率各不相同,因此主体版面的大小也有不同的规格,比较常见的主题版面大小是1024×768和800×600, 15.1.4 主体版面的布局 在12.3节中介绍了7种常见的页面综合布局,每一种页面综合布局决定了其对应的页面主体版面的布局风格。下面是比较常见的主体版面的布局方式。 1.一栏式布局 15.1.4 主体版面的布局 2.两栏式布局 15.1.4 主体版面的布局 3.三栏式布局 4.多栏式布局 15.1.5 主体版面设计遵循的原理 主体版面的设计是一项技巧性比较强的排版技术。作为一项排版技术,其设计就应遵循排版技术的原理,下面是进行主体版面设计时应遵循的原理。 平衡:就是指重量的平均分配。 焦点和主次:人们浏览一个页面内容的时候,首先看到的地方称为焦点。 韵律设计:音乐的节拍有韵律,在平面设计中也有韵律。 统一和变化:统一不是让许多形态元素单一化和简单化,而是使多种变化因素具有条理性和规律性。 15.2 主体元素的确定 主体版面的风格确定之后就需要将主体版面在页面中进行体现,上一小节介绍的几种主体版面布局中,两栏式布局是初学者最易学会的,而且在网页中应用也最多,下面一起来学习两栏式主体版面的制作。 15.2.1 两栏布局主体版面的左栏制作 所谓两栏就是将主体版面分两列进行显示,两栏式布局的设计思想是将主体版面分别放在左右两个单元格中,然后再在单元格中添加主体元素。其具体的制作步骤如下: 15.2.2 两栏布局主体版面的右栏制作 该两栏式页面主题布局的右栏是页面主体版面的真正主体,主要放置页面的主要内容。 15.3 样式调整及修改 任何的主体版面都要经过CSS样式的调整、控制和修饰美化,才能与页面的整体风格相搭配,才能使网页更加美观。下面一起来学习如何对两栏布局的主体版面进行CSS样式的调整。 15.3.1 两栏布局主体版面的CSS调整与修改 在上一节中,了解了页面主体版面不美观的原因是因为没有对其进行CSS样式的调整与控制,主体版面CSS样式的调整与修改的具体步骤如下: 15.3.2 两栏布局主体版面的CSS优化 两栏布局主体版面的CSS优化的具体步骤如下: 15.4 专家总结 本章首先介绍了如何确定主体版面的风格,包括:主体版面颜色的搭配、主体版面字体的选择、主体版面大小的控制和主体版面设计遵循的原理。第2节和第3节通过具体的实例展示了主体版面制作的全过程,包括主体元素的确定,以及样式的调整和修改。

文档评论(0)

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

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

1亿VIP精品文档

相关文档