网页设计问题汇总.docx
《网页设计问题汇总.docx》由会员分享，可在线阅读，更多相关《网页设计问题汇总.docx（36页珍藏版）》请在冰豆网上搜索。
网页设计问题汇总
网页设计问题汇总
网页设计准备：
创建图像版式
图像版式是静态图像，它不会移动，可受用户控制，是灵活的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，商家（泛指企业）对商家的电子商务。
有时写作BtoB，但为了简便干脆用其谐音B2B（2即to）。
如今，B2B网站行业飞速发展，用户对其需求不仅仅在其功能上，对于网站设计的要求也越来越高。
本文就如何设计B2B行业网站标题栏进行分析：
B2B行业网站与一般的商业门户网站在标题栏设计上大部分是相同的，但是由于B2B行业网站更多的访问者和使用者是在办公室学习和工作的，需要更严肃的氛围，他们需要的更多是商机信息、行业资讯、行业技术知识等内容，而不是娱乐和休闲。
同时和企业网站标题栏设计具有很大的区别，页面不需要通过标题栏的颜色和外形来突出产品的特色及品牌文化，所以B2B行业网站要弱化标题栏的图片和颜色，不要对访问者获得内容造成影响，一般标准如下。
一.标题栏上的字要比网页上的大部分的内容字号更大，加粗，要更突出：
，看到过一些网站，以及一些设计师给我的页面标题栏上的字就和内容上的字一样大，都为12PX加粗，也许是他们无心，也许是他们觉得已经加粗了，但是从这里看出，一些人还是没有上升到理论的层面，凭感觉。
一般为字号为：
14PX，加粗。
二.标题栏字体和设计必须非常清晰，拒绝花哨。
根据网页的主题，内容的种类，不同页面的标题栏会设计成不同的效果，但是无论我们怎么设计，都必须要使标题栏上的字看起来很清楚、明白，使访问者一目了然，不能为了更好看，更有艺术效果，而使字看起来不清楚、不突出。
更重要的是，由于B2B行业网站的页面要更严肃，标题栏的字，图片和颜色，都要看起来更严肃一些，不能太花哨，太漂亮，简洁大方更好。
三.标题栏上不能大面积使用刺眼的颜色，不能干扰用户寻找内容。
B2B行业网站的首页、一级栏目、二级栏目、内容页等页面，访问者需要从页面里寻找大量自己感兴趣的内容，与专题页面、企业网站等不同，尤其是品牌企业网站的内容不多，需要通过颜色、字体、外形等来渲染产品的品牌特色，可以大面积使用颜色作为标题栏的背景色，采用很大的字号，不会喧宾夺主，会给访问者建立一个氛围。
四.标题栏应与所包含的内容形成一个整体，在视觉上形成区别。
每一个标题栏下面所属的内容都代表一个细分的内容，标题栏起到的作用就是希望访问者能尽快找到自己感兴趣的内容，要达到这个目的，就要用标题栏和边框将内容包围起来，形成一个整体，让访问者从视觉上更能区分自己正在看的是什么种类的信息。
五.标题栏和背景尽量拒绝圆形。
B2B行业网站需要更严肃一些的风格，所以标题栏切忌圆角太圆，也不能用太鲜艳的花纹作为背景，甚至使用椭圆形的。
在我多年的工作经验中，看到过一些设计师提供的B2B行业网站页面标题栏圆角太圆，这种设计给人很不严肃的氛围，有一点圆角就可以了。
在设计一些比较有特点的企业网站或品牌网站时，以及大家看到的QQ空间、51空间等个人主页可以使用一些个性化的标题栏，但是在B2B行业网站不能使用。
这个就是网站定位与设计的联系所在。
以上几点，虽然看似简单，但是往往会在设计过程中被设计师忽略，作为网站从业人员，必要要懂这些细节，在网站设计过程中及时发现并解决这些问题。
提高用户体验的网站设计原则
用户体验一直是衡量一个网站质量的重要标准之一，用户体验就是目标受众在网站上浏览时带来的感觉。
目前发现很多的网站不仅没有把用户体验处理好，有些甚至对用户体验的感念十分模糊，不知道从何下手，尤其是对于电子商务类网站，最终结果就是降低网站的转化率。
本文就介绍一下从哪些方面提高用户体验的网站设计原则：
一.网站信息
提高用户体验，首先就要重视起网站信息维护与更新，例如公司新闻，行业新闻，用户感想等等。
网站内容数据层一般情况下由产品经理发起经过多次的模拟构建最后由程序员进行搭建，由产品经理和程序员共同完成，以用户需求为基础，并将需求进行分类归纳和分析，但是不可能百分之百的满足用户，也要符合网站的一些设计原则。
从目前的行业内来看，B2B的信息量较B2C网站信息量显得有些迟钝。
二.网站呈现
通常网站所呈现出来的内容由美工和程序员搭建，所以站长需要具备基本美工和程序员知识。
这当中包括用户访问速度、信息用户接受程度、网站颜色等内容。
一个好的网站一定是由一个经验丰富或有特殊思维的前端美工实现。
现在被互联网“名人”炒翻的用户体验，笔者认为似乎有那么些道理，但都只限于用户感受，用户的感受是需要植入和长期培养的，一个好的网站只要不是看不下去，其信息的丰富程度也一定会吸引住大批用户。
三.网站内容
任何一个网站都是由大量的文字内容、图片内容和其它类型的内容组合而成。
网站编辑是网站内容控制的一个重要职位，随着互联网时代的来临，人们渐渐倾向于读图的方式浏览网站内容，所以使用图片控制用户和引导用户成为了眼下各大门户网站竞争的主要方向。
子新闻信息质量等同的情况下，只有导读性的内容才能吸引客户。
网页设计成功的五大关键
随着互联网的不断发展，网络已经出现在人们生活的每一个角落。
作为网络世界最重要元素之一的网站，更是人们关注的人点，企业可以利用网站来宣传品牌形象，政府可以利用网站来宣传自己的政策纲领，与人民进行互动，而个人也可以利用网站展示性格风采。
而一个网站的成功与否，网页设计在其中发挥了重大的作用。
以下分享网页设计成功的重要元素：
一.网站的栏目
建设一个网站就像撰写一篇文章一样，首先要写好提纲，主题才会明确，有清晰的层次。
如果网站的栏目结构不够清晰，非常杂乱的话不仅浏览者会看不清楚，自己在扩充和维护网站也十分困难。
网站的题材确定后，并且收集和组织了许多相关的资料内容，但如何组织内容才能吸引网友们来浏览网站呢?
栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。
二.网站的结构
目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，内容未来的扩充和移植有着重要的影响。
网站的目录是指你建立网站时创建的目录。
例如:
在用frontpage98建立网站时都默认建立了根目录和images（存放图片）子目录。
三.网站的主题定位
网站主题也就是网站的题材，网站设计开始首先遇到的问题。
网站题材千奇百怪,琳琅满目，只要想的到，就可以把它制作出来。
如果题材已经确定以后，就可以围绕题材给网站起一个名字。
网站名称，也是网站设计的一部分，而且是很关键的一个要素。
四.网站的CI形象
所谓CI（corporateidentity），意思是通过视觉来统一企业的形象。
一个杰出的网站，和实体公司一样，需要整体的形象包装和设计。
准确的，有创意的CI设计，对网站的宣传推广有事半功倍的效果。
五.网站的链接
最后，网站的链接结构对于网页也是十分重要的，它建立在目录结构基础之上，但是可以跨越目录，是指页面之间相互链接的拓扑结构。
有两种基本方式：
树状链接结构和星状链接结构。
网页设计中文字排版和设计的三要素
网页设计中网页文字的排版和设计对于一个网站给人的第一印象是十分重要的。
据数据统计，有80%左右的网站都是以文字内容为主，因此文字的设计安排或者利用效果直接关系到浏览者的心理感受，都需要谨慎考虑。
一、文字的大小安排
网页中文字的大小影响着浏览者的阅读感受。
文字过大不仅会影响阅读速度也会使网站显得过于凌乱。
而文字过小会加大阅读的难度，尤其是对于一些视力不是很好的用户。
那么文字大小究竟设置多少比较合适呢？
以中文字体为例，文字的大小等于14pix的时候网页显示会比较理想，而英文则在文字等于12pix的时候比较理想。
二、字距行距的设置
除了字体大小，字距和行距的调整没有印刷文字那么容易，调整起来比较困难一些。
字距可以在html文本里不断调整来取得比较理想的效果，对行距的调整就比较困难一些了，CSS（CascadingStyleSheet）标准语言里提供了LINE-HEIGHT参数，通过调整整个参数的百分比，可以改变行距。
每行文字数量最好控制在8-10个词左右，这样可以提高文字的可读性。
因为如果一行的文字太长的话，用户很难找到下一行的开头，大大降低了其可读性，破坏了网站在用户心里的形象。
三、文字的字体
一般来说，网页文字笔划圆弧越不规则，文字边缘的锯齿特征就越明显，这样在屏幕上显示的就不是很美观。
所以，在选择网页字体时尽可能去发现那些笔划贴近水平或者笔直方向的文字，或者文字的圆弧笔划要尽可能地靠近45度角的方向。
在英文字母里面，Verdana，Geneva，Arial，san-serif字体都是比较理想的网页字体，而中文字体中黑体字在网页的视觉效果比较好。
同时，网页字体要极力避免使用斜体，那样会影响易读程度。
网站建设的创意风格设计
如果给两个网站设计人员设计同一个主题的网站，任何的两个人都不会设计出同样的网站。
相比之下肯定会有一个令你比较喜欢的网页设计风格。
或者，当你看到点进一个网站，有可能会觉得很酷，有可能会觉得很漂亮，也有可能会觉得十分不喜欢网页的设计。
网站给人的第一感觉与网页设计的风格和创意有着十分大的关系。
一、什么是网站风格？
网站风格带给人的是抽象的感觉。
是指网站的各方面的整体感觉给网站用户的综合感受。
这个整体感觉包括站点的标志、字体、色彩、口号、页面布局、浏览方式、内容的存在意义、荣誉等许多方面。
正是因为这些方面，才使网站有了不同的风格。
且网站风格还具有人性化的特点。
通过网站的外表，内容，文字，交流可以概括出一个站点的个性，情绪。
总而言之，风格可以概括为一句话：
与众不同！
二、如何树立网站风格？
第一，确信风格是建立在有价值内容之上的。
第二，你需要彻底搞清楚自己希望站点给人的印象是什么。
第三，在明确自己的网站印象后，开始努力建立和加强这种印象。
三、什么是网站建设的创意？
创意是网站生存的关键。
没有了创意的网站，就如同一个没有灵魂的网站，吸引不了客户。
创意是传达信息的一种特别方式，并不是天才者的灵感，而是思考的结果，是将现有的要素重新组合，创意思考的途径最常用的是联想。
全Flash网站设计应用的发展前景
以计算机、网络为特征的信息社会深深改变了人们的生活方式，商业化的Internet自崛起开始便爆炸式的发展至世界各地，成为新的传播媒体。
全球各行各业纷纷利用互联网建立自己的Web站点，吐纳着信息潮流，竞争日益激烈。
这就是网站传达效率的竞争。
数字媒体时代的到来，使人们不在满足于简单直接的信息传达，人们渴望在接受信息的同时能够带来一种视觉享受。
Flash网站能帮助企业在激烈的商业竞争中全面、动态的展示企业的优势与产品特点，让浏览者在轻松、有趣的视觉感受中，以最短的时间了解企业资讯。
Flash是目前在网络应用中最好的多媒体动画，强烈的视觉冲击力给浏览者带来全新的感受，更易留下深刻的印象，能够极好的达到理想的宣传效果，全力营造出美仑美化的企业形象。
综合来说，Flash网站是一种艺术与技术相结合
升级会员 