L10-《网络信息制作与发布》网页艺术设计1

《网络信息制作与发布》

第四章网页的艺术设计浙江广播电视大学徐斌立导言本章主要介绍网页设计的设计特点。网页设计与传统的平面设计在视觉传达上有很多的相似点，但在技术实现方面又有很大的区别。网页设计是传统的平面设计的视觉传达效果运用和网络技术实现的有机结合。和传统的媒体一样，网页也要求有一定的艺术感染力。学习本章不仅可以学到网页设计相关的色彩、版式和文字设计原理，以及文字在设计中的运用，还能够通过色彩的运用、素材的调整和整体页面的版式布局来学习网页的设计要素。学习目标认知目标了解网页设计中浏览器与显示器对网页设计的影响2.理解网页中色彩的基本概念3.分析网页色彩搭配的一般原则4.理解网页中构成设计的有关概念5.理解网页中的版式布局学习目标技能目标完成网页布局方案提出有关网页的配色方案传统的平面设计讲究页面构图、版式布局、色彩搭配、空间表现，这些要素对于网页设计来说也是适用的。4.1网页设计的兼容性在网页设计的过程中，要注意兼容性问题。设计好的网页在实际工作环境下无法运行，轻者造成信息无法准确地传达，严重时系统会无法正常运行，需要重新设计。对于网页，实际上而言，最大的挑战就是在不同的浏览器、操作系统和硬件平台中设计出显示效果相同网页效果。

从理论上讲，所有的网络浏览器都应该完全支持同样的标准，而开发者也制作符合标准的网站就能适当地出现在每位浏览者面前。但是，浏览网站的用户使用各种各样的浏览器平台，这些浏览器功能各有不同，有些浏览器不能完全支持网络标准。4.1网页设计的兼容性IE（内核）浏览器

相信大家对这个浏览器非常熟悉，当我们在Windows系统中上网查看网页内容的时候，打开IE浏览器。IE即InternetExplorer的缩写，是由微软公司出品，由于采用与Windows捆绑的方式提供给用户，IE占据了绝大多数的个人计算机浏览器份额。除了IE浏览器外，还有多种使用IE内核的第三方浏览器，如“360安全浏览器”“遨游”等，这些浏览器因为使用了IE内核，同时因为用了完全不同的外壳，在功能上有所增强。国内绝大多数网络用户使用的都是基于微软的IE内核的浏览器。（其实在开发中，测试不同IE版本之间的兼容性是更痛苦的一件事）4.1.1浏览器4.1网页设计的兼容性非IE（内核）浏览器其他的非IE(内核）浏览器，有欧朋的OPERA浏览器、Google的Chrome浏览器、Mozilla的Firefox浏览器等。我们除了IE之外还有多种浏览器可以选择，相比来说，这些浏览器在Web标准化支持来说比IE更好。我们在网页设计中，会考虑到不同浏览器的兼容问题，所以必须在不同的浏览器中测试制作好的网页的效果。有这么多浏览器，同学们认的过来吗？开发的时候在那些浏览器中测试比较好呢？4.1网页设计的兼容性现在的互联网使用者讨论得最多的话题除了速度还有兼容性，随着各种智能终端设备的逐渐普及，人们对网站的访问早巳不再局限于计算机这一媒体介质，因此如何才能让各种各样的智能终端设备顺利地访问网站成为一个新问题。1.计算机显示器在浏览网页时，所以网页随着屏幕尺寸的不同呈现结果也不相同。浏览器的可用空间受到屏幕分辨率的影响。现阶段大多数人的显示器分辨率设置到1024x768或更高（17寸屏幕），但是考虑到以低分辨率来适应高分辨率的原则，所以很多网站还是在1024X768的分辨率下来进行制作。4.1.2显示设备4.1网页设计的兼容性当显示器的分辨率为1024x768时，浏览器的屏幕最大宽度为1024像素（px），由于默认的垂直滚动条占去20像素，所以网页的安全宽度应该小于等于1000像素。所谓安全是指在全屏显示的时候，浏览器是不会出现水平滚动条。4.1.2显示设备腾讯网宽度1000px浙江广播电视大学网站宽度1000px在后面课程讲授布局的时候，我们会研究和学历主流网站布局方式4.1网页设计的兼容性目前智能终端设备（智能手机或平板电脑）屏幕分辨率呈现高分辨率、多样化趋势，市场上的三大主流智能设备如下：Google的Android系统、苹果的I0S系统、微软的WindowsPhone系统为了更好地迎合多种智能终端访问设备，在进行网站设计的过程中，一定要注意保证网站基础构建的灵活、这样才能做到根据不同的分辨率对网页进行相应的调整，从而保证整个页面的整齐与统一。4.1.2智能终端设备4.1网页设计的兼容性目前智能终端设备（智能手机或平板电脑）屏幕分辨率呈现高分辨率、多样化趋势，市场上的三大主流智能设备如下：Google的Android系统、苹果的I0S系统、微软的WindowsPhone系统为了更好地迎合多种智能终端访问设备，在进行网站设计的过程中，一定要注意保证网站基础构建的灵活、这样才能做到根据不同的分辨率对网页进行相应的调整，从而保证整个页面的整齐与统一。4.1.2智能终端设备4.1网页设计的兼容性智能终端设备中的页面设计与WebAPP制作不在本课的知识点范围，我在这里简要介绍一下相关核心技术。

关于移动网站分辨率宽度设置：

宽度可以使用320px为标准，图片宽度可以以640px为标准。

这样一方面兼容了低分辨率的低端机，一方面兼容了高分辨率的高端机，缺点