第2章 网页版面设计基础

网页设计与制作教程(第4版）机械工业出版社同名教材配套电子教案一基本概念二网页版面设计三实训第2章网页版面设计基础2.1.1虚拟界面由于网页是通过计算机的显示通道与人们交流的，并不是现实世界中的实际物体，因此又被称为“虚拟界面”。从网络的角度来看，虚拟界面是一个网站的窗口，网站中的数据库信息、链接功能以及各种网络服务都通过这个界面进行实施。一个网站的网页可以有多个，通常根据需要分层设置。从平面设计的角度来看，每个虚拟界面就是一个版面，可以利用平面设计理念对其进行设计。但是，网页毕竟是计算机技术和多媒体技术的产物，具有某些一般版面所没有的特点和性质。为了对虚拟版面进行设计，就必须拓展设计的范围，丰富设计的手段，如对于版面各种媒介的设计与制作，要应用一些新的技术。2.1基本概念2.1.1虚拟界面网页的界面通过显示器显示，除了运用一般版面设计手段对这个虚拟界面进行设计以外，还需要针对该界面的独特之处进行设计，这就需要了解虚拟界面的独特之处。2.1基本概念图2-1包含多种多媒体的网页2.1.2网页界面的特点网页的界面通过显示器显示，除了运用一般版面设计手段对这个虚拟界面进行设计以外，还需要针对该界面的独特之处进行设计，这就需要了解虚拟界面的独特之处。其主要表现在以下几个方面。1．版面尺寸规范化2．媒介形式的多样化3．有限的界面颜色数量4．界面的嵌套性5．具有控制功能2.1基本概念2.1.2网页界面的特点版面尺寸规范化：通常采用显示器的标准显示模式。1）800像素×600像素。2）1024像素×768像素。3）1280像素×1024像素或更高。图2-2是采用不同显示模式显示的迪斯尼公司网站的网页。2.1基本概念a)800像素×600像素b)1024像素×768像素c)1280像素×1024像素2.1.3网页的功能网页是计算机技术和多媒体技术实际应用的产物，因此，网页同时具备计算机技术和多媒体技术的基本功能。其主要功能包括：展示功能、超链接功能、检索功能以及统计和计算功能等。2.1基本概念2.2.1版面编排原则网页是信息传播的一种载体，在设计上同其他出版物如报纸、杂志等有许多共同之处，也要遵循一些设计的基本原则。但是，由于表现形式、运行方式不同，网页设计同时又具有其特有的规律。网页的艺术设计，是技术与艺术的结合、内容与形式的统一。版面编排的首要任务就是根据网页传达内容的需要，将不同的文字和图片按照一定的次序用最合理的编排和布局组成一个有机的整体并展现出来。版面编排应注意以下几点。1．突出中心，理清主次2．搭配合理，大小呼应3．图文并茂，相得益彰2.2网页版面设计2.2.2网页排版布局的一般步骤（1）构思根据网站内容的整体风格，设计版面布局。（2）初步填充内容这一步就要把一些主要的内容放到网页中，例如，网站的标志、广告条、菜单、导航条、计数器等。（3）细化在将各主要元素确定好之后，下面就可以考虑文字、图像、表格等页面元素的排版布局了。在这一步，设计者可以利用网页编辑工具把草案做成一个简略的网页，当然，对每一种元素所占的比例也要有一个详细的数字，以便以后修改。2.2网页版面设计2.2.3版面典型风格网页的版面风格与广告设计的版面风格是统一的，其目的都是为了产生美感、提高阅读兴趣、吸引人们的注意力。网页的设计首先要考虑风格的定位。任何网页都要根据主题的内容来决定其风格与形式，因为只有形式与内容的完美统一才能达到理想的效果。主页风格的形成主要依赖于主页的版式设计，依赖于页面的色调处理，还有图片与文字的组合形式等。这些问题看似简单，但往往需要主页的设计和制作者具有一定的美术素质和修养。与平面广告相比，网页的总体风格是：文字较多，可进行超链接，使用动画、视频、声音，其信息量远远大于广告。比较典型的网页风格主要有：对称型、偏置型、标题型和混合型等。2.2网页版面设计2.2.3版面典型风格2.2网页版面设计对称型偏置型标题型2.2.4网页排版布局的常用技术（1）CSS（层叠样式表）布局使用CSS布局技术能完全精确地定位文本图片。CSS对于初学者来说显得有点复杂，但它的确是一种好的布局方法。（2）表格布局表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响，而且表格在定位图片和文本上比用CSS更加方便。表格布局惟一的缺点是，当设计者使用了过多的表格时，会影响页面的下载速度。（3）框架布局从布局上考虑，框架结构不失为一个好的布局方法。2.2网页版面设计2.2.5色彩搭配色彩是人的视觉中最敏感的东西，把握好页面的色彩，页面设计就成功了一半。好的色彩运用能使浏览者对网站留下较深的印象。色彩和谐与否，是整个网页设计是否成功的关键。色彩总的应用原则是“总体协调，局部对比”，网页的整体色彩效果应该是和谐的，只在局部的、小范围的地方突出一些强烈色彩的对比。2.2网页版面设计2.2.5色彩搭配1．首屏页面的设计所谓首屏页面，是指在打开一个网站首页时，不拖动画面右侧的滚动条能够看到的部分，如图2-6所示。2.2网页版面设计2.2.5色彩搭配2．导航栏的设计导航栏是网页非常重要的组成部分，是引导阅读、扩大信息量的有力手段。图2-7是网站的导航栏。2.2网页版面设计2.2.6设计规则网页设计与广告、报刊等平面设计有着共同的要求，下面主要介绍网页的特殊之处。1．首屏页面的设计2．导航栏的设计3．媒介规格设计4．网页效果与网页效率5．强调整体6．网页与读者群7．网页命名规则8．及时更新网页2.2网页版面设计2.2.7设计误区在设计网页时，如果设计不当，就会造成网页虽美观，但运行缓慢，甚至无法正常运行的现象。为了避免上述现象发生，列举几个常见的设计误区，以便引起重视。1．片面追求版面效果2．使用纵向的导航栏3．使用多种媒体形式4．规则化2.2网页版面设计2.2.8案例一：设计曙光大学网站首页版面【案例综述】使用网页版面设计技术设计曙光大学网站首页版面。【案例展示】曙光大学网站首页版面的效果如图2-8所示。2.2网页版面设计2.3.1实训一：设计“爱家美食”网站首页版面【实训综述】使用网页版面设计技术设计“爱家美食”网站首页版面。【实训展示】“爱家美食”网站首页版面的效果如图2-9所示。2.3实训图2-9实例效果1．对于现在普遍使用的19in显示器，网页的版面尺寸设置为多少像素合适？为什么？2．上网浏览网页，指出这些网页版面属于哪种类型。3．色彩搭配有哪些原则？请给出几组匹配的色彩。4．如图2-10所示是“韵魅”网站的首页，请读者谈谈该页面网页版面设计的步骤。2.4习题