网页设计问题汇总

整理文档很辛苦,赏杯茶钱您下走!

免费阅读已结束,点击下载阅读编辑剩下 ...

阅读已结束,您可以下载文档离线阅读编辑

资源描述

网页设计问题汇总网页设计准备:创建图像版式图像版式是静态图像,它不会移动,可受用户控制,是灵活的Web页面。它们将与最终创建的页面的在外观上十分相近。然而,在创建版式的过程中还要执行很多操作步骤,以使其更接近最终的页面,并且在对版式进行切片时更容易将它转换成最终页面。设置画布尺寸当为固定宽度的设计创建版式时,很容易确定所需画布的尺寸。只要决定最终的固定页面的宽度,并且为画布设置同样的尽寸即可(或者可能将它设置得更大一些,如果对超出的空白区域也进行了设计,即使用户使用超出固定宽度的尺寸,同样也可以显示设计图案)。当创建灵活设计时,以像素为单位的页面宽度将因用户而异,那你会为画布选择什么宽度呢?我想你有3种选择:a.选择你认为的最小的设计宽度。b.选择你认为的最大的设计宽度。c.选择你认为的大多数用户都会采用的中等尺寸。每种选择都有它的优缺点。1.匹配最小的宽度在创建版式之前,应该决定设计的最小宽度(或你想让用户看到的最重要部分的最小宽度)。于是,你可以将这个最小宽度或与之按近的宽度作为画布的宽度。这可以让你确保所有一切都非常适合这个小尺寸。同时还可以让你避免犯因疏忽而让图像过大以至于不匹配最小宽度的错误。然而,设计成最小宽度也会有问题,这主要是因为最终的设计效果在得到延展后,一切看起来是那么的松散、稀疏。你不妨想象一下这个设计被拉宽后的效果,这样一来,你便可以根据一个更宽的宽度范围来更改设计了。2.匹配最大的宽度除了最小的宽度外,你也许还要在设计里包含最大的宽度——要么是你想要展现的壮丽的场景,要么是那些超出你意料之外的浏览者所期望的。如果你在设计中使用最大的宽度来设定画布的尺寸,就可以避免设计在较大的显示尺寸下显得过于松散、稀疏的问题,并确保文字的长度不会变得太长而难以阅读。在切分设计版面前,你说不定还可以省却修改版面的功夫了——见后续内容,通常,创建小于最终页面的版面意味着在切分版面时必须延展版面,因此切片需要与所需页面相同大小。然而,以一个大的宽度设计可能会不经意地增添了设计的难度——它比设计小尺寸的空间要难一些。你也许会过度地放大图像或者在设计中填入过多的“素材”(功能框、图像、工具条),这样一来,当页面以较小的宽度显示时,页面看起来会非常拥挤并且很难阅读。3.选择一个折衷的办法除了使用最小和最大的宽度,你还可以选择位于这两种宽度尺寸之间的值用做画布尺寸。看看哪种尺寸可能为大多数浏览者所使用,并将该尺寸用做设计尺寸。你可以将设计优化为大多数人想看的那种。使用折衷的画布尺寸可以帮助你避开那两种缺点。但是如果你不仔细的话,它也可以让你的设计更受两种缺点的影响。例如,你应该让设计的宽度跨越600像素到1200像素,并且创建一个宽度为900像素的设计。非常有可能,你会创建一个四不像的设计:图像对于600像素的最小宽度来说不合适——太大,页面元素和文本对于1200像素的最大宽度来说太稀疏,很不容易阅读。尽管就很多方面而言,这个设计都非常了不起,但是它始终有一个缺陷:在两个极端的宽度尺寸(而非一个)都存在问题。然而,当你采用位于它们中间的尺寸浏览时,这些问题的严重性又将得到不同程度的缓解。对于大多数设计而言,中间宽度可能足最好的-一在整个设计过程中,要谨慎小心并且持续不断地考虑以其他可能的宽度显示的情形。始终要牢记的一点是,最终创建的Web页面不是一个静态的页面,它将是一个灵活的页面。网页设计中的图形(图像)文件格式1、GIF格式GIF,全称图形交换格式,GraphicalInterchangeFormat的缩写,是由CompuServe公司开发的图形图像格式,主要用于互联网上的图形/图像交流。GIF图形图像格式是一种无损压缩的图形图像格式,对于颜色画面简单的图形/图像,有非常高的压缩率。使用该格式减少图形图像文件尺寸时,不会丢失原始图形图像的任何信息。而且,这种压缩算法比较简单,解压缩的速度很快,很适合在网页上显示。因此,GIF格式在网页中得到了广泛的应用。GIF的优点还有:支持透明(Transparency)和交错(lnterlaced)模式,支持GIF89a~J画格式等。透明模式,是一种图形/图像的透明部分能够透出背景色的模式,这种模式可以去掉图形图像比较生硬的矩形边框,使图形/图像更好地融合到网页页面中。交错模式,是指将图形/图像装载到浏览器窗口的显示方式。一个普通的图形/图像是从上到下逐行显示的,在显示完毕之前,浏览者无法了解图形/图像的全貌。而设置了交错模式的GIF图形/图像则是隔行显示的,使浏览者不必等待图形/图像全部传输完,就可以看到图形/图像的大致轮廓。对于简单的Web动画来说,GIF89a动画是最容易掌握的技术。GIF89a动画包含一系列的帧,每一帧就是一幅图形图像。此外,还包含一些播放动画的参数,如延迟时间、循环顺序等。浏览器从动画文件中读取各帧图形图像,然后根据播放参数在浏览器窗口循环显示,形成动画效果。GIF89a动画的使用大大增加了页面的趣味性。GIF格式的缺点是,最多只能使用256种颜色,这使它不能用于存储高质量的图形/图像文件。2、JPEG格式JPEG,是联合图形/图像专家小组JointPhotographicExpertGroup的缩写。JPEG格式的图形/图像采用了一种失真的压缩算法,这种压缩丢失了部分图形/图像信息,同时也获得了较高的压缩比。因此,压缩比例越大,图形图像质量越差。这种算法的优点是,由于它考虑了人的视觉特性,因此只要图形/图像的压缩比例适合,一般不会使人感到压缩前后的差异。JPEG支持24bit真彩.适用于具有丰富细节的高质量图形图像。与GIF格式相比,它也有类似于交错显示的渐进式显示,但不支持透明颜色。另外,JPEG的压缩算法比较复杂,因此,图形图像解压缩显示的时间也相应较长。3、PIN格式PNG,英文全称PortableNetworkGraphics,是可携式网络图形图像的缩写。这个格式的图形图像已经得到IE和NETSCAPE两大浏览器的支持,目前在许多欧美网站已经开始采用PNG图形图像。这种格式的图形图像兼有GIF和JPEG的色彩模式。PNG不仅能储存256色以下的“IndexColor”图形图像,还能储存24位真彩图形图像,甚至能最高可储存至48位超强色彩的图形图像。如果图形图像是以文字、形状及线条为主,PNG会用类似GIF的压缩方法来获得较好的压缩率,而且不破坏原始图形图像的任何细节。而对于照片类图形图像的压缩,PNG则采用类似JPEG的压缩算法,不同的是图形图像压缩后能保持与压缩前图形图像质量一样,没有一点失真。另外,PNG也采取了类似于GIF格式的交错显示模式,使图形图像得以渐里在屏幕上。PNG的优势还体现在对透明图形图像的处理上。JPEG格式无法实现图形图像透明;而采用GIF格武透明图形图像则略显刻板,因为GIF透明图形图像只有1与0的透明信息,只有透明或不透明两种选择,缺少层次。PNG则提供了“Q”频段0至255的透明信息,可以使图形图像的透明区域出现深度不同的层次。而且,PNG图形图像可以让图形图像完美的覆盖在任何背景上,改善了GIF透明图形图像描边不佳的问题。对GIF图形图像而言,系统不同画面显示的效果也不一样,PNG则避免了这一缺点。在Macintosh上制作IYJPNG图形图像,放在Windows上显示时图形图像不会失真;反之亦然。文字资料(如作者、出处)、储存蒙板(MASK)、伽玛值、色彩校正码等信息,均可掺杂在PNG图形图像中一起传输。制约PNG图形图像不能更广泛应用的主要因素是,它无法制作出动画效果。PNG图形图像格式开发人员已经意识到这一点,基于PNG图形图像开发出了新的图形图像格式,即PNG的动画实现格式-MNG。4、MNG格式MNG,英文全称Multiple-ImageNetworkGraphics,是多重影像网络图形图像的缩写,是对PNG图形图像格式的完善。PaintShopPro等绘图软件的最新版本已开始支持MNG,相信不久的将来MNG同样也能获得浏览器的支持。如图3-71和图3-72所示。与GIF89a动画相比,MNG有以下优点:·MNG采用以对象为基础的动画。动画采用对象的移动、复制、粘贴来实现,从而减少了动画文件的天于。·MNG对于复杂的动画采用了嵌套循环方式。·MNG使用了比GIF更优化的压缩方式:·MNG能够集合以PNG和JPEG为基础的图形图像。·lvfNG支持透明的JPEG格式。色彩在各个领域中的表现力不同的领域有不同的色彩表现,根据其行业特色也各有特征。1.综合门户型网站这类网站没有特定的受众群体,访问量是众多网站中最高的。网页在色彩设计上要求直观、简洁,以便用户咋最短的时间内连接到需要的栏目。如新浪网站的首页,用黄色为主色调明亮大方,图片和文字的用色有条理,保证了视线的流畅性。2.娱乐休闲类网站进人这类网站的浏览者是为了放松心情、寻求娱乐的,这类网站注重美观,一般会用具有强烈刺激性的色彩来体现个性。3.商业经济类网站这类网站是商家宣传自己的门户,它的浏览者是从事商业活动的雇主、员工和上网购物、搜寻商业信息的客户。网页在色彩设计上要求统一协调、有秩序感。对页面上的标识、主色调选取应采用企业标准色,一方面利于树立企业形象、传达服务理念,另一方面给人深刻印象、易于识别。4.人文艺术类网站该类网站旨在向大众传播文化、艺术,透着浓郁的文化气息,故在色彩设计上主色调多选用淡雅、朴素的色彩,显出典雅的文化氛围。5.政府机构类网站此类网站代表了各地政府机关的网上形象,在色彩设计上主色调可选用明度和饱和度较高的蓝、绿色,力求显示政府机构在人民心目中严谨大气、庄重肃穆的形象。6.体育休闲类网站体育休闲类网站的对象是众多的体育爱好者,这些人中又以青年人居多,故该类网站的主色调多偏重于活泼、前卫的色调。7.新闻媒体类网站新闻媒体类网站是指传统媒体(包括报纸、电视等)的网上节点。新闻媒体建立网站的目的不一,有的是为了寻求传统媒体向网络的转移,有的则是传统媒体的电子版,因此网站的风格也不尽相同。总体而言,该类网站在主色调表现上力求大方稳重,在严肃中又不失轻松活泼之意。8.行业类网站该类网站是指内容涉及专门行业的专业网站,在色彩设计方面应考虑行业特征。可采用行业的象征性色彩为主色调,例如医疗类网站可选用白色为主色调,给浏览者亲切、可信赖的感觉。9.个人网站用色非常的个性化,充分体现了网站拥有者的个性和个人审美情趣。网页美术设计概述互联网之所以吸引人,在于它是全世界资源共享的平台,同时它的页面呈现效果是动态的,甚至是有声音的,可以互动参与的,还有令人惊奇的无法预知的下一秒将呈现出的页面效果,这是网页设计和平面设计最大的区别。因此,在设计网页时,设计者应该更多地从视觉关怀的角度进行网页设计,使之更具人性化诉求。网页美术设计,是指网页设计者根据网页所要表达的主题,将大量信息通过归纳、整理、美化设计,使页面视觉漂亮、网页信息有条理,从而提高网页的阅读效率和信息搜索率。网页设计者不仅要掌握基本的网页制作技术,还需要掌握网站的风格、配色等网页美术设计原理,依照项目设计的目的和需求,自觉地对网页的构成元素进行艺术构思,是一种创造性思维活动,以创造出艺术化、人性化的网站页面为目的。网页的美术设计在整个网站设计过程中是很重要的一个环节,美术设计有特色的网站更能得到浏览者的青睐。经测定,网站浏览者在网站首页上停留的时间长短,通常以第一感觉(视觉)来评判,进而决定是否点选、进入网站观看内容,这一时间一般维持在2秒钟左右。此时,在极短的时间内,网站是否能给人留下好的印象,就在于它呈现出的整体视觉感受、内容、设计风格是否吸引浏览者从而迸入网站浏览。而掌握网页视觉美感的基础,则是将图形、文字和色彩作为网页视觉设计的基本元素进行编排,并根据不同网站形式风格的特征进行差异性设计。通过图形、文字、色彩等基本元素的创造性编排,产生了不同的网站视觉风格。B2B网站建设如何设计B2B行业网站标题栏B2B网站即BusinesstoBusiness,商家(泛指企业)对商家的电子

1 / 33
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功