第2章 网页版面设计基础.ppt

《第2章 网页版面设计基础.ppt》由会员分享，可在线阅读，更多相关《第2章 网页版面设计基础.ppt（40页珍藏版）》请在优知文库上搜索。

1、包含多种多媒体的网页a)800像素600像素 b)1024像素768像素 c)1280像素1024像素网页页面大小网页页面大小 合理地设置页面尺寸，可以避免用户频繁地拖动滚动条。目前国内的上网者习惯使用是微软公司的Internet Explorer浏览器（简称IE浏览器）。在屏幕分辨率为1024768时，不同版本的IE浏览器的屏幕大小是不相同的。以下是各版本IE浏览器页面尺寸表。IE浏览器版本浏览器版本屏幕宽度屏幕宽度屏幕高度屏幕高度IE6.01003px600pxIE7.0（菜单栏显示状态）（菜单栏显示状态）1003px594pxIE7.0（菜单栏隐藏状态）（菜单栏隐藏状态）1003px62

2、0pxIE8.0（菜单栏隐藏状态）（菜单栏隐藏状态）1003px626pxIE8.0（菜单栏显示状态）（菜单栏显示状态）1003px598px（1）构思）构思 根据网站内容的整体风格，设计版面布局。根据网站内容的整体风格，设计版面布局。（2）初步填充内容）初步填充内容 这一步就要把一些主要的内容放到网页中，例如，网站这一步就要把一些主要的内容放到网页中，例如，网站的标志、广告条、菜单、导航条、计数器等。的标志、广告条、菜单、导航条、计数器等。（3）细化）细化 在将各主要元素确定好之后，下面就可以考虑文字、图在将各主要元素确定好之后，下面就可以考虑文字、图像、表格等页面元素的排版布局了。在这一步

3、，设计者可以像、表格等页面元素的排版布局了。在这一步，设计者可以利用网页编辑工具把草案做成一个简略的网页，当然，对每利用网页编辑工具把草案做成一个简略的网页，当然，对每一种元素所占的比例也要有一个详细的数字，以便以后修改。一种元素所占的比例也要有一个详细的数字，以便以后修改。网页是由各种版块构成的。Internet中的网页内容各异。然而多数网页都是由一些基本的板块组成的，包括Logo、导航条、Banner、内容版块、版尾等。logo是标识网站的名称，并为用户提供识别的标记。绝大多数网站都有一个独特的Logo。Logo对于网站而言是唯一的。导航条导航条是网站的重要组成元素。其可以索引网站内容，帮

4、助用户快速访问网站功能。导航条内包含的是网站功能的按钮或链接，其项目的数量不宜过多。通常同级别的项目数量以3到7个为宜。一个网站往往可包含多个级别的导航条，例如主导航条、登录导航条、友情链接导航条等。有时导航条也会与banner结合使用，通过图像增强导航条的表现力。12BannerBanner为网页中的广告条，又被称作旗帜、网幅或横幅，是一种可以由文本、图像和动画相结合而成的网页栏目。国际广告联盟的“标准与管理委员会”联合广告支持信息和娱乐联合会等国际组织，推出了一系列网络广告宣传物的标准尺寸，被称作“IAC/CASIE”标准，共包括7种标准的Banner尺寸。在设计Banner时，既可遵循以

5、上标准，以方便网站的广告用户设计广告。同时，也可灵活根据网页的版式对其尺寸进行调节，以符合网页整体的风格和布局。13名称名称Banner面积面积摩天大楼形摩天大楼形120px600px中级长方形中级长方形300px250px正方形弹出正方形弹出250px250px宽摩天大楼宽摩天大楼160px600px大长方形大长方形336px280px长方形长方形180px150px竖长方形竖长方形240px400px内容版块网页的内容版块通常是网页的主体部分。这一版块可以包含各种文本、图像、动画、超链接等。在设计内容栏时，用户可以先独立地设计多个子栏，然后再将这些子栏拼接在一起，形成整体的效果。同时，还可

6、以对子栏进行优化排列，提高用户的体验。如网页的内容较少，则还可以使用单独的内容栏，通过大量的图像使网页更加美观。14版尾版块版尾，顾名思义是网页页面最底端版块，通常放置网站的版权信息。版权信息的书写需要遵循国际通行的规范，其格式如下所示。Copyright dates by author/ownerCopyright 可以由copyright符号“”代替dates可以是具体的年份，也可以是由年份表现的的时间段author/owner为作者或所有者，可为个人名，也可为企业名。在作者/所有者之后，可以添加“All Rights Reserved.”表示版权所有。但“All Rights Reser

7、ved.”的大小写和最后英文句号”.”不可省略。如需要添加中文的“版权所有”，应写在英文版权所有之后。例如，清华大学网站的版尾信息为“2010 Tsinghua University.All Rights Reserved.”15 网页的版面风格与广告设计的版面风格是统一的，其目网页的版面风格与广告设计的版面风格是统一的，其目的都是为了产生美感、提高阅读兴趣、吸引人们的注意力。的都是为了产生美感、提高阅读兴趣、吸引人们的注意力。网页的设计首先要考虑风格的定位。任何网页都要根据主题网页的设计首先要考虑风格的定位。任何网页都要根据主题的内容来决定其风格与形式，因为只有形式与内容的完美统的内容来决定

8、其风格与形式，因为只有形式与内容的完美统一才能达到理想的效果。主页风格的形成主要依赖于主页的一才能达到理想的效果。主页风格的形成主要依赖于主页的版式设计，依赖于页面的色调处理，还有图片与文字的组合版式设计，依赖于页面的色调处理，还有图片与文字的组合形式等。这些问题看似简单，但往往需要主页的设计和制作形式等。这些问题看似简单，但往往需要主页的设计和制作者具有一定的美术素质和修养。与平面广告相比，网页的总者具有一定的美术素质和修养。与平面广告相比，网页的总体风格是：文字较多，可进行超链接，使用动画、视频、声体风格是：文字较多，可进行超链接，使用动画、视频、声音，其信息量远远大于广告。比较典型的网页

9、风格主要有：音，其信息量远远大于广告。比较典型的网页风格主要有：对称型、偏置型、标题型和混合型等。对称型、偏置型、标题型和混合型等。对称型对称型偏置型偏置型标题型标题型 在设计网页时，需要了解网页的5种基本结构布局。(1)“国国”字型字型“国”字型网页布局又称“同”字型网页布局，其最上方为网站的Logo、Banner及导航条，接下来是网站的内容版块。在内容版块左右两侧通常会分列两小条内容，可以是广告、友情链接等，也可以是网站的子导航条。18(2)拐角型拐角型拐角型布局也是一种常见的网页结构布局。其与“国”字型布局的区别在于内容版块只有一侧有侧栏。拐角型布局比“国”字型布局的网页稍微个性化一些，

10、常用于一些娱乐性网站。19(3)上下框架型上下框架型上下框架型网页布局的主题部分并非如“国”字型或拐角型一样有主栏和侧栏组成，而是一个整体或复杂的组合内容结构，因此通常应用于一些栏目较少的网站，或有整体背景图像的网站。20(4)左右框架型左右框架型这是一种被垂直划分为两个或更多个框架的网页布局结构，类似将上下框架型布局旋转90度之后的效果。左右框架型网页布局通常会被应用到一些个性化的网页或大型论坛网页等，具有结构清晰、内容一目了然的优点。21(5)封面型封面型这种类型的网页，通常作为一些个性化网站的首页，以精美的动画，加上几个链接或“进入”按钮，甚至只在图片或动画上做超链接。22（1）CSS（

11、层叠样式表）布局（层叠样式表）布局 使用使用CSS布局技术能完全精确地定位文本图片。布局技术能完全精确地定位文本图片。CSS对对于初学者来说显得有点复杂，但它的确是一种好的布局方法。于初学者来说显得有点复杂，但它的确是一种好的布局方法。（2）表格布局）表格布局 表格布局的优势在于它能对不同对象加以处理，而又不表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响，而且表格在定位图片和文本上用担心不同对象之间的影响，而且表格在定位图片和文本上比用比用CSS更加方便。表格布局惟一的缺点是，当设计者使用更加方便。表格布局惟一的缺点是，当设计者使用了过多的表格时，会影响页面的下载速度

12、。了过多的表格时，会影响页面的下载速度。（3）框架布局）框架布局 从布局上考虑，框架结构不失为一个好的布局方法。从布局上考虑，框架结构不失为一个好的布局方法。色彩是人的视觉中最敏感的东西，把握好页面的色彩，色彩是人的视觉中最敏感的东西，把握好页面的色彩，页面设计就成功了一半。好的色彩运用能使浏览者对网站留页面设计就成功了一半。好的色彩运用能使浏览者对网站留下较深的印象。色彩和谐与否，是整个网页设计是否成功的下较深的印象。色彩和谐与否，是整个网页设计是否成功的关键。色彩总的应用原则是关键。色彩总的应用原则是“总体协调，局部对比总体协调，局部对比”，网页，网页的整体色彩效果应该是和谐的，只在局部的

13、、小范围的地方的整体色彩效果应该是和谐的，只在局部的、小范围的地方突出一些强烈色彩的对比。突出一些强烈色彩的对比。网页设计是平面设计的一个分支，因此对色彩都有较大的依赖性。色彩可以决定网站的整体风格，也可以决定网站所表现的情绪。1三原色的概念三原色的概念人类的眼睛是根据所看见的光的波长来识别颜色的。肉眼可识别的白色太阳光，事实上是由多种波长的光复合而成的全色光。根据全色光各复合部分的波长（长波，中波和短波），可以将全色光解析为3种基本颜色，即红（Red）、绿（Green）和蓝（Blue）等三种原色光。252色彩的属性色彩的属性任何一种色彩都会具备色相、饱和度和明度三种基本属性。这3种基本属性又

14、被称作色彩的三要素。色相色相是由色彩的波长产生的属性，根据波长的长短，可以将可见光划分为6种基本色相，即红、橙、黄、绿、蓝和紫。根据这6种色相可以绘制一个色相环，表示6种颜色的变化规律。在Photoshop等图像处理软件中，通常用一种渐变色条来表示色彩的色相。26饱和度饱和度是指色彩的鲜艳程度，又称彩度、纯度。色彩的饱和度越高，则色相越明确，反之则越弱。饱和度取决于可见光波波长的单纯程度。在色彩中，六色色相环中的6种基础色饱和度最高，黑、白、灰没有饱和度。下面为饱和度由低到高的示意图。27明度明度是指色彩的明暗程度，也称光度、深浅度。色彩的明度来自于光波中振幅的大小。色彩的明度越高，则颜色越明

15、亮，反之则越阴暗。在无彩色系中，明度最高的是白色，而最低的是黑色。在有彩色系中，明度最高的是黄色，最低的是紫色。下面为颜色的明度由低到高的示意图。28 3色彩模式色彩模式自然界中的颜色种类繁多，单纯以颜色的名称来表示颜色是无法适应平面设计及工业生产需要的。因此，人们引入了色彩模式的概念。色彩模式是表示色彩的方法。在不同的应用领域里，表示色彩的方式也有很大区别。在平面设计领域，常用的色彩模式主要分为两种，即RGB色彩模式和CMYK色彩模式。RGB色彩模式色彩模式 用于计算机CRT显示器的色彩模式，基于光学三原色。CMYK色彩模式色彩模式 用于印刷品的色彩模式，基于油墨4种颜色分别为青色（Cyan

16、）、洋红色（Magenta，又称品红色）、黄色（Yellow）、黑色（Black，为与RGB的蓝色区分而使用最后一个字母K）29 4Web216安全色安全色在早期各种浏览器中，图像的颜色显示方式并不统一，同样一种颜色在不同的网页浏览器中可能会显示不同的颜色。为了保证网页基本的色彩显示，人们规定了216种颜色的显示方法，这216种颜色以同样的效果在任一的浏览器中，不会造成色彩的错乱，被称作“安全的”颜色，即Web216安全色。30Web216色盘首屏页面的设计首屏页面的设计 所谓首屏页面，所谓首屏页面，是指在打开一个网站是指在打开一个网站首页时，不拖动画面首页时，不拖动画面右侧的滚动条能够看右侧的滚动条能够看到的部分，如图所示。到的部分，如图所示。导航栏的设计导航栏的设计 导航栏是网页非常重要的组成部分，是引导阅读、扩大导航栏是网页非常重要的组成部分，是引导阅读、扩大信息量的有力手段。图信息量的有力手段。图2-7是网站的导航栏。是网站的导航栏。网页设计与广告、报刊等平面设计有着共同的要求，下面主要介绍网页的特殊之处。1首屏页面的设计首屏页面的设计2导航栏的设计导航栏的设计3媒介规格设计媒