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

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

1、一 基本概念二 网页版面设计三 实训,第2章 网页版面设计基础,1 虚拟界面 由于网页是通过计算机的显示通道与人们交流的，并不是现实世界中的实际物体，因此又被称为“虚拟界面”。从网络的角度来看，虚拟界面是一个网站的窗口，网站中的数据库信息、链接功能以及各种网络服务都通过这个界面进行实施。一个网站的网页可以有多个，通常根据需要分层设置。从平面设计的角度来看，每个虚拟界面就是一个版面，可以利用平面设计理念对其进行设计。但是，网页毕竟是计算机技术和多媒体技术的产物，具有某些一般版面所没有的特点和性质。为了对虚拟版面进行设计，就必须拓展设计的范围，丰富设计的手段，如对于版面各种媒介的设计与制作，要应用

2、一些新的技术。UI user intrerface,一 基本概念,一 基本概念,包含多种多媒体的网页,2 网页界面的特点 网页的界面通过显示器显示，除了运用一般版面设计手段对这个虚拟界面进行设计以外，还需要针对该界面的独特之处进行设计，这就需要了解虚拟界面的独特之处。其主要表现在以下几个方面。1版面尺寸规范化2媒介形式的多样化3有限的界面颜色数量4界面的嵌套性5具有控制功能,一 基本概念,2 网页界面的特点版面尺寸规范化：通常采用显示器的标准显示模式。1）800像素600像素。2）1024像素768像素。3）1280像素1024像素或更高。不同显示模式显示的迪斯尼公司网站的网页。,一 基本概念

3、,a)800像素600像素 b)1024像素768像素 c)1280像素1024像素,网页页面大小 合理地设置页面尺寸，可以避免用户频繁地拖动滚动条。目前国内的上网者习惯使用是微软公司的Internet Explorer浏览器（简称IE浏览器）。在屏幕分辨率为1024768时，不同版本的IE浏览器的屏幕大小是不相同的。以下是各版本IE浏览器页面尺寸表。,3 网页的功能 网页是计算机技术和多媒体技术实际应用的产物，因此，网页同时具备计算机技术和多媒体技术的基本功能。其主要功能包括：展示功能、超链接功能、检索功能以及统计和计算功能等。,一 基本概念,1 版面编排原则 网页是信息传播的一种载体，在设

4、计上同其他出版物如报纸、杂志等有许多共同之处，也要遵循一些设计的基本原则。但是，由于表现形式、运行方式不同，网页设计同时又具有其特有的规律。网页的艺术设计，是技术与艺术的结合、内容与形式的统一。版面编排的首要任务就是根据网页传达内容的需要，将不同的文字和图片按照一定的次序用最合理的编排和布局组成一个有机的整体并展现出来。版面编排应注意以下几点。1突出中心，理清主次2搭配合理，大小呼应3图文并茂，相得益彰,二 网页版面设计,2 网页排版布局的一般步骤（1）构思 根据网站内容的整体风格，设计版面布局。（2）初步填充内容 这一步就要把一些主要的内容放到网页中，例如，网站的标志、广告条、菜单、导航条、

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

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

7、nner时，既可遵循以上标准，以方便网站的广告用户设计广告。同时，也可灵活根据网页的版式对其尺寸进行调节，以符合网页整体的风格和布局。,13,内容版块,网页的内容版块通常是网页的主体部分。这一版块可以包含各种文本、图像、动画、超链接等。在设计内容栏时，用户可以先独立地设计多个子栏，然后再将这些子栏拼接在一起，形成整体的效果。同时，还可以对子栏进行优化排列，提高用户的体验。如网页的内容较少，则还可以使用单独的内容栏，通过大量的图像使网页更加美观。,14,版尾版块,版尾，顾名思义是网页页面最底端版块，通常放置网站的版权信息。版权信息的书写需要遵循国际通行的规范，其格式如下所示。Copyright

8、dates by author/ownerCopyright 可以由copyright符号“”代替dates可以是具体的年份，也可以是由年份表现的的时间段author/owner为作者或所有者，可为个人名，也可为企业名。在作者/所有者之后，可以添加“All Rights Reserved.”表示版权所有。但“All Rights Reserved.”的大小写和最后英文句号”.”不可省略。如需要添加中文的“版权所有”，应写在英文版权所有之后。例如，清华大学网站的版尾信息为“2010 Tsinghua University.All Rights Reserved.”,15,4 版面典型风格 网页的

9、版面风格与广告设计的版面风格是统一的，其目的都是为了产生美感、提高阅读兴趣、吸引人们的注意力。网页的设计首先要考虑风格的定位。任何网页都要根据主题的内容来决定其风格与形式，因为只有形式与内容的完美统一才能达到理想的效果。主页风格的形成主要依赖于主页的版式设计，依赖于页面的色调处理，还有图片与文字的组合形式等。这些问题看似简单，但往往需要主页的设计和制作者具有一定的美术素质和修养。与平面广告相比，网页的总体风格是：文字较多，可进行超链接，使用动画、视频、声音，其信息量远远大于广告。比较典型的网页风格主要有：对称型、偏置型、标题型和混合型等。,二 网页版面设计,4 版面典型风格,二 网页版面设计,

10、对称型,偏置型,标题型,在设计网页时，需要了解网页的5种基本结构布局。(1)“国”字型“国”字型网页布局又称“同”字型网页布局，其最上方为网站的Logo、Banner及导航条，接下来是网站的内容版块。在内容版块左右两侧通常会分列两小条内容，可以是广告、友情链接等，也可以是网站的子导航条。,18,(2)拐角型拐角型布局也是一种常见的网页结构布局。其与“国”字型布局的区别在于内容版块只有一侧有侧栏。拐角型布局比“国”字型布局的网页稍微个性化一些，常用于一些娱乐性网站。,19,(3)上下框架型上下框架型网页布局的主题部分并非如“国”字型或拐角型一样有主栏和侧栏组成，而是一个整体或复杂的组合内容结构，

11、因此通常应用于一些栏目较少的网站，或有整体背景图像的网站。,20,(4)左右框架型这是一种被垂直划分为两个或更多个框架的网页布局结构，类似将上下框架型布局旋转90度之后的效果。左右框架型网页布局通常会被应用到一些个性化的网页或大型论坛网页等，具有结构清晰、内容一目了然的优点。,21,(5)封面型这种类型的网页，通常作为一些个性化网站的首页，以精美的动画，加上几个链接或“进入”按钮，甚至只在图片或动画上做超链接。,22,5 网页排版布局的常用技术（1）CSS（层叠样式表）布局 使用CSS布局技术能完全精确地定位文本图片。CSS对于初学者来说显得有点复杂，但它的确是一种好的布局方法。（2）表格布局

12、 表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响，而且表格在定位图片和文本上比用CSS更加方便。表格布局惟一的缺点是，当设计者使用了过多的表格时，会影响页面的下载速度。（3）框架布局 从布局上考虑，框架结构不失为一个好的布局方法。,二 网页版面设计,6 色彩搭配 色彩是人的视觉中最敏感的东西，把握好页面的色彩，页面设计就成功了一半。好的色彩运用能使浏览者对网站留下较深的印象。色彩和谐与否，是整个网页设计是否成功的关键。色彩总的应用原则是“总体协调，局部对比”，网页的整体色彩效果应该是和谐的，只在局部的、小范围的地方突出一些强烈色彩的对比。,二 网页版面设计,网页设计是

13、平面设计的一个分支，因此对色彩都有较大的依赖性。色彩可以决定网站的整体风格，也可以决定网站所表现的情绪。1三原色的概念人类的眼睛是根据所看见的光的波长来识别颜色的。肉眼可识别的白色太阳光，事实上是由多种波长的光复合而成的全色光。根据全色光各复合部分的波长（长波，中波和短波），可以将全色光解析为3种基本颜色，即红（Red）、绿（Green）和蓝（Blue）等三种原色光。,25,2色彩的属性任何一种色彩都会具备色相、饱和度和明度三种基本属性。这3种基本属性又被称作色彩的三要素。色相色相是由色彩的波长产生的属性，根据波长的长短，可以将可见光划分为6种基本色相，即红、橙、黄、绿、蓝和紫。根据这6种色相

14、可以绘制一个色相环，表示6种颜色的变化规律。在Photoshop等图像处理软件中，通常用一种渐变色条来表示色彩的色相。,26,饱和度饱和度是指色彩的鲜艳程度，又称彩度、纯度。色彩的饱和度越高，则色相越明确，反之则越弱。饱和度取决于可见光波波长的单纯程度。在色彩中，六色色相环中的6种基础色饱和度最高，黑、白、灰没有饱和度。下面为饱和度由低到高的示意图。,27,明度明度是指色彩的明暗程度，也称光度、深浅度。色彩的明度来自于光波中振幅的大小。色彩的明度越高，则颜色越明亮，反之则越阴暗。在无彩色系中，明度最高的是白色，而最低的是黑色。在有彩色系中，明度最高的是黄色，最低的是紫色。下面为颜色的明度由低到

15、高的示意图。,28,3色彩模式自然界中的颜色种类繁多，单纯以颜色的名称来表示颜色是无法适应平面设计及工业生产需要的。因此，人们引入了色彩模式的概念。色彩模式是表示色彩的方法。在不同的应用领域里，表示色彩的方式也有很大区别。在平面设计领域，常用的色彩模式主要分为两种，即RGB色彩模式和CMYK色彩模式。RGB色彩模式 用于计算机CRT显示器的色彩模式，基于光学三原色。CMYK色彩模式 用于印刷品的色彩模式，基于油墨4种颜色分别为青色（Cyan）、洋红色（Magenta，又称品红色）、黄色（Yellow）、黑色（Black，为与RGB的蓝色区分而使用最后一个字母K）,29,4Web216安全色在早

16、期各种浏览器中，图像的颜色显示方式并不统一，同样一种颜色在不同的网页浏览器中可能会显示不同的颜色。为了保证网页基本的色彩显示，人们规定了216种颜色的显示方法，这216种颜色以同样的效果在任一的浏览器中，不会造成色彩的错乱，被称作“安全的”颜色，即Web216安全色。,30,Web216色盘,7 设计规则首屏页面的设计 所谓首屏页面，是指在打开一个网站首页时，不拖动画面右侧的滚动条能够看到的部分，如图所示。,二 网页版面设计,导航栏的设计 导航栏是网页非常重要的组成部分，是引导阅读、扩大信息量的有力手段。图2-7是网站的导航栏。,二 网页版面设计,7 设计规则 网页设计与广告、报刊等平面设计有

17、着共同的要求，下面主要介绍网页的特殊之处。1首屏页面的设计2导航栏的设计3媒介规格设计4网页效果与网页效率5强调整体6网页与读者群7网页命名规则8及时更新网页,二 网页版面设计,8 设计误区 在设计网页时，如果设计不当，就会造成网页虽美观，但运行缓慢，甚至无法正常运行的现象。为了避免上述现象发生，列举几个常见的设计误区，以便引起重视。1片面追求版面效果2使用纵向的导航栏3使用多种媒体形式4规则化,二 网页版面设计,Photoshop CS4简介,Photoshop是Adobe公司开发的一款专业图形图像处理软件。在图像处理领域，Photoshop是目前最流行的图像处理工具，其主要处理以像素（Pi

18、xels）构成的数字图像。利用其广泛的编修与绘图工具，进行图片编辑工作。,35,Dreamweaver CS4简介,Dreamweaver是Macromedia（现被Adobe公司收购）开发的一款强大的所见即所得网页设计与开发工具。在网页领域，Dreamweaver是目前最流行的网页设计与开发工具。Dreamweaver目前最新版本CS4（10.0，于2008年9月发布），支持将PSD文件作为智能对象导入网页，并使网页中的图像随智能对象的改变而更新；同时，增强了代码提示引擎的功能，方便用户编写各种脚本程序。,36,Flash C4简介,Flash是（Macromedia，后被Adobe收购）开

19、发的一种矢量动画及多媒体开发工具。在动画制作领域，Flash是一种易上手且功能强大的2D矢量动画制作软件，由于其制作的动画体积小、效果丰富，且支持脚本控制，因此被大量应用于互联网中。,37,网页设计理念,网页设计不仅是一门实用技术，更是一门创造性的艺术。其是一个感性思考与理性分析相结合的过程。网页设计不仅依赖于各种平面设计软件和网页制作软件，更依赖于网页设计者的独立思考。,38,8 案例一：设计曙光大学网站首页版面【案例综述】使用网页版面设计技术设计曙光大学网站首页版面。【案例展示】曙光大学网站首页版面的效果如图2-8所示。,二 网页版面设计,实训一：设计“爱家美食”网站首页版面【实训综述】使用网页版面设计技术设计“爱家美食”网站首页版面。【实训展示】“爱家美食”网站首页版面的效果如图2-9所示。,三 实训,图2-9 实例效果,