第15章 主体版面设计.ppt

1、第15章 主体版面设计,网页的主体版面是指去除页面头部和页脚部分用来放置页面主要内容的页面区域。在内容区域一般包括页面的内容链接、文章列表和文章信息等，如图所示。主体版面的设计包括主体版面布局的确定、版面颜色和字体的选择、主题版面各模块的添加、图片和链接的设置等。,15.1 主体版面风格的确定,主体版面的风格是由页面的整体风格、页面的尺寸和页面的版面布局共同决定的。页面的整体风格决定了主体版面的颜色搭配、字体使用和图片排列；页面的尺寸决定了主体版面的宽度；页面的版面布局决定了主体版面内容板块的排列。同时，在进行主题版面设计时必须遵循一定的规则。本节将分别介绍这些内容。,15.1.1 主体版面颜

2、色搭配,在网页页面中，使用不同的颜色可以让人有不同的感受。在主体版面中，使用的颜色一般是页面的主颜色。在色彩搭配上，既要与页面头部风格相融合，又要与页面表现的内容相关联。一般的主体版面颜色数量应该尽量控制在3种颜色以内，前景色和背景色的对比应该明显，背景色要求柔和一些，前景色应该选择深一点的颜色。互联网上比较常见的色彩搭配技巧如下：,15.1.1 主体版面颜色搭配,1以一种色彩为主的颜色搭配,15.1.1 主体版面颜色搭配,2两种色彩搭配,15.1.1 主体版面颜色搭配,3以一个色系作为主颜色搭配,15.1.1 主体版面颜色搭配,4用黑色配一种彩色,15.1.2 主体版面字体选择,网页中字体的

3、选择主要包括字号、字体和行距。 1字号 字体的大小称为字号。 2字体 网页制作中比较常用的中文字体是宋体和黑体。 3行距 上一行字顶端到其下一行字顶端的距离称为行距。,15.1.3 主题版面的大小控制,由于用户使用的浏览器屏幕分辨率各不相同，因此主体版面的大小也有不同的规格，比较常见的主题版面大小是1024768和800600，,15.1.4 主体版面的布局,在12.3节中介绍了7种常见的页面综合布局，每一种页面综合布局决定了其对应的页面主体版面的布局风格。下面是比较常见的主体版面的布局方式。 1一栏式布局,15.1.4 主体版面的布局,2两栏式布局,15.1.4 主体版面的布局,3三栏式布局

4、 4多栏式布局,15.1.5 主体版面设计遵循的原理,主体版面的设计是一项技巧性比较强的排版技术。作为一项排版技术，其设计就应遵循排版技术的原理，下面是进行主体版面设计时应遵循的原理。 平衡：就是指重量的平均分配。 焦点和主次：人们浏览一个页面内容的时候，首先看到的地方称为焦点。 韵律设计：音乐的节拍有韵律，在平面设计中也有韵律。 统一和变化：统一不是让许多形态元素单一化和简单化，而是使多种变化因素具有条理性和规律性。,15.2 主体元素的确定,主体版面的风格确定之后就需要将主体版面在页面中进行体现，上一小节介绍的几种主体版面布局中，两栏式布局是初学者最易学会的，而且在网页中应用也最多，下面一

5、起来学习两栏式主体版面的制作。,15.2.1 两栏布局主体版面的左栏制作,所谓两栏就是将主体版面分两列进行显示，两栏式布局的设计思想是将主体版面分别放在左右两个单元格中，然后再在单元格中添加主体元素。其具体的制作步骤如下：,15.2.2 两栏布局主体版面的右栏制作,该两栏式页面主题布局的右栏是页面主体版面的真正主体，主要放置页面的主要内容。,15.3 样式调整及修改,任何的主体版面都要经过CSS样式的调整、控制和修饰美化，才能与页面的整体风格相搭配，才能使网页更加美观。下面一起来学习如何对两栏布局的主体版面进行CSS样式的调整。,15.3.1 两栏布局主体版面的CSS调整与修改,在上一节中，了解了页面主体版面不美观的原因是因为没有对其进行CSS样式的调整与控制，主体版面CSS样式的调整与修改的具体步骤如下：,15.3.2 两栏布局主体版面的CSS优化,两栏布局主体版面的CSS优化的具体步骤如下：,15.4 专家总结,本章首先介绍了如何确定主体版面的风格，包括：主体版面颜色