网页效果图，又称页面效果图。顾名思义，是一个网页页面的图片表现形式。也就是说，将网页页面用图片的形式表现出来，又称页面效果图，多用于建站前期。
一、定义
网站制作人员在了解客户需求之后，要根据客户需求起草网站策划书，客户同意策划方案后，网站美工要制作出若干张“网页效果图”，图片格式多为.jpg、.psd、.png，用户从中选取一张用来作模型，或者根据用户意见再次修改效果图，直到用户满意为止。
网页效果图设计是网站项目开发中非常重要的一环。通过网页效果图，客户可以把自己想展示的内容以图像的方式表现出来，因此网页效果图设计阶段是网站开发中最繁杂、最漫长的阶段，往往要占据项目开发时间的1/3甚至2/3。
网站前台人员以网页效果图为模型，使用Dreamweaver等网页制作软件搭建成真正的网站。
二、设计
这是很多人关心的话题。其实设计不同的网页效果图的方法及过程均不相同，但以下设计思路可以借鉴！
步骤1 客户需求。主要是听取客户关于项目的具体要求。
步骤2 网站策划。明确网站建设目标，收集客户资料，分析网站类型，确定网站风格。
步骤3 绘制效果图。主要分为3个步骤：一是绘制草图；二是利用辅助线等技术绘制整体轮廓；三是进行各区域块的细化。
步骤4 客户审核。在效果图设计过程中，一定要与客户保持良好的联系，最终达到一致。
步骤5 切片、优化导出。
步骤6 网页技术整合阶段，利用HTML＋CSS＋JavaScript及相应的后台编码技术完成整个网站的开发。
三、布局原则
网页的布局设计，就是指网页中图像和文字之间的位置关系，简单来说也可以称之为网页排版。网页布局设计最重要的就是传达信息，且使它们组成一个有机的整体，展现给广大的观众。可以依据以下几条原则进行网页布局。
（1）主次分明，中心突出。
在一个页面上，必然要考虑视觉中心，这个中心一般在屏幕的中央，或者在左上的视觉优势位置。因此，一些重要的文章和图片一般可以安排在这些部位，在视觉中心以外的地方可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到主次分明。
（2）大小搭配，相互呼应。
较长的文章或标题不要编排在一起，要有一定的距离。同样，较短的文章也不能编排在一起。对待图片的安排也是这样，要互相错开，使大小之间有一定的间隔，这样可以使页面错落有致，避免重心偏离。
（3）图文并茂，相得益彰。
文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，又缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。
四、网页布局分类
网页布局大致可分为骨骼型、满版型、分割型、对称型、倾斜型、焦点型、三角型、自由型。下面分别论述。详例可参照图片册。
（1）骨骼型描述。网页中骨骼型是一种规范、严谨的分割方式，也是最为普通、最为常见的一种形式，类似报刊的版式。常见的网页骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。通常以竖向分栏居多。这种版式给人以和谐、理性的美。
（2）满版型描述。满版型页面以图像充满整版。主要以图像为诉求点，可将部分文字置于图像之上。其视觉传达效果直观而突出，给人以生动、大方的感觉。满版型版式被各种网站所采用，如学校、娱乐、体育、艺术、儿童以及个性化网页，其中以韩国网站居多。
（3）分割型描述。分割型版式指把整个页面分成上、下或左、右两部分，分别安排图片或文字内容。两部分形成对比，使图片部分感性而具表现力，文字部分则理性而具说服力。可以调整图片和文字所占的面积比例，来调节对比强弱。如果图片比例过大，文字字体过于纤细、段落疏松，会造成视觉心理的不平衡，显得生硬。
（4）中轴或对称型描述。中轴型版式是将图片和文字沿浏览器窗口的中间轴心位置做水平或垂直方向排列的一种设计方式。沿中轴水平方向排列的页面可以给人稳定、平静、含蓄的感觉，沿中轴垂直方向排列的页面可以给人以舒畅的感觉。采用这种版式设计的网页比较适合作网站的首页。
（5）焦点型描述。焦点型的网页版式通过对浏览者视线的诱导，可以使页面产生强烈的视觉效果，如集聚感或膨胀感等。中心焦点型是将图片或文字置于页面的视觉中心；向心焦点型是通过视觉元素引导浏览者的视线向页面中心聚拢；离心焦点型是通过视觉元素引导浏览者的视线向外辐射。焦点型版式为各类网站使用，以体育、娱乐、动画网站居多。
（6）倾斜或曲线型描述。倾斜型页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。此类网站版式为各类网站所采用。曲线型网站图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。此类网站版式为各类网站所采用。
（7）三角型描述。三角型版式是指界面各视觉元素呈三角形或多角形排列。正三角型最具稳定性，倒三角型则可产生动感。侧三角型构成一种均衡版式，既安定又有动感。三角型版式为各类网站所采用。
（8）自由型描述。自由型版式的页面具有活泼、轻快的气氛。自由型版式也可应用于多种网站，如网络、娱乐、体育、个人、商务等。
以上介绍的版式基本类型并不是固定不变的，在实际设计中，设计师可以根据网页所要传达的主题内容来灵活地变化版式。在设计前要认真分析网站的定位，在设计中要灵活把握版式结构，才能更好地达到设计目的。
五、网页文字设置
一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。而为了追求醒目的视觉效果，可以为标题使用较深的颜色。下面是作者制作网页和浏览别人的网页时，对网页背景色和文字色彩搭配积累的经验，这些颜色可以作正文的底色，也可以作标题的底色，再搭配不同的字体，一定会有不错的效果，希望对大家在制作网页时有所裨益。
BgcolorΚ″＃F1FAFA″——作正文的背景色好，淡雅；
BgcolorΚ″＃E8FFE8″——作标题的背景色较好；
BgcolorΚ″＃E8E8FF″——作正文的背景色较好，文字颜色配黑色；
BgcolorΚ″＃8080C0″——上配黄色、白色文字较好；
BgcolorΚ″＃E8D098″——上配浅蓝色或蓝色文字较好；
BgcolorΚ″＃EFEFDA″——上配浅蓝色或红色文字较好；
BgcolorΚ″＃F2F1D7″——配黑色文字素雅，如果是红色则显得醒目；
BgcolorΚ″＃336699″——配白色文字好看些；
BgcolorΚ″＃6699CC″——配白色文字好看些，可以作标题；
BgcolorΚ″＃66CCCC″——配白色文字好看些，可以作标题；
BgcolorΚ″＃B45B3E″——配白色文字好看些，可以作标题；(www.xing528.com)
BgcolorΚ″＃479AC7″——配白色文字好看些，可以作标题；
BgcolorΚ″＃00B271″——配白色文字好看些，可以作标题；
BgcolorΚ″＃FBFBEA″——配黑色文字比较好看，一般作为正文；
BgcolorΚ″＃D5F3F4″——配黑色文字比较好看，一般作为正文；
BgcolorΚ″＃D7FFF0″——配黑色文字比较好看，一般作为正文；
BgcolorΚ″＃F0DAD2″——配黑色文字比较好看，一般作为正文；
BgcolorΚ″＃DDF3FF″——配黑色文字比较好看，一般作为正文；
浅绿色底配黑色文字，或白色底配蓝色文字都很醒目，但前者突出背景，后者突出文字。红色底配白色文字，比较深的底色配黄色文字非常有效果。
上文只是起到抛砖引玉的作用，大家可以发挥想象力，搭配出更有新意、更醒目的颜色，使网页更具有吸引力。
如今，互联网越来越走近我们的生活，网上冲浪也渐渐成为生活中不可缺少的一部分。网络世界五彩缤纷，涌现出大量优秀、精美的网页。大量网络信息无非就是通过文本、图像、Flash动画等呈现，其中，文本是网页中最为重要的设计元素。对于网页设计初学者而言，了解和掌握网页设计中的文字排版设计就显得尤为重要。
（一）文字的格式化
字号大小可以用不同的方式来计算，如磅＃quotel.quoter＃或像素（Pixel）。因为以像素技术为基础单位打印时需要转换为磅，所以建议采用磅为单位。
最适合于网页正文显示的字体大小为12磅左右，现在很多的综合性站点，由于在一个页面中需要安排的内容较多，通常采用9磅字。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。需要注意的是，小字号容易产生整体感和精致感，但可读性较差。
网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。例如，粗体字强壮有力，有男性特点，适合机械、建筑业等内容；细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。
从加强平台无关性的角度来考虑，正文内容最好采用默认字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的机器里只装有3种字体类型及一些相应的特定字体。而指定的字体在浏览者的机器里并不一定能够找到，这就给网页设计带来很大的局限性。解决问题的办法是：在确有必要使用特殊字体的地方，可以将文字制成图像，然后插入页面中。
行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10∶12，即用字10点，则行距12点。这主要是出于这些考虑：适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。
除了对可读性的影响外，行距本身也是具有很强表现力的设计语言，为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。例如，加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强版面的空间层次与弹性，表现出独到的匠心。
行距可以用行高（line-height）属性来设置，建议以磅或默认行高的百分数为单位，如｛line-height：20pt｝、｛line-height：150%｝。
（二）文字的整体编排
页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。从艺术的角度可以将字体本身看作一种艺术形式，它在个性和情感方面对人有着很大影响。在网页设计中，字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。从某种意义上讲，所有的设计元素都可以理解为图形。
1.文字的图形化
字体具有两方面的作用：一是实现字意与语义的功能；二是美学效应。文字的图形化，既是强调它的美学效应，把记号性的文字作为图形元素来表现，同时又强化了原有的功能。作为网页设计者，既可以按照常规的方式来设置字体，也可以对字体进行艺术化设计。无论怎样，一切都应围绕如何更出色地实现自己的设计目标。
将文字图形化、意象化，以更富创意的形式表达出深层的设计思想，能够克服网页的单调与平淡，从而打动人心。
2.文字的叠置
文字与图像之间或文字与文字之间在经过叠置后，能够产生空间感、跳跃感、透明感、杂音感和叙事感，从而成为页面中活跃的、令人注目的元素。虽然叠置手法影响了文字的可读性，但是能造成页面独特的视觉效果。这种不追求易读，而刻意追求“杂音”的表现手法，体现了一种艺术思潮。因而，它不仅大量运用于传统的版式设计，在网页设计中也被广泛采用。
3.标题与正文
在进行标题与正文的编排时，可先考虑将正文作双栏、三栏或四栏的编排，再进行标题的置入。将正文分栏，是为了求取页面的空间与弹性，避免通栏的呆板以及标题插入方式的单一性。标题虽是整段或整篇文章的标题，但不一定千篇一律地置于段首之上，可作居中、横向、竖向或边置等编排处理，甚至可以直接插入字群中，以新颖的版式来打破旧有的规律。
4.文字编排的4种基本形式
页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。
（1）两端均齐。文字从左端到右端的长度均齐，字群形成方方正正的面，显得端正、严谨、美观。
（2）居中排列。在字距相等的情况下，以页面中心为轴线排列，这种编排方式使文字更加突出，产生对称的形式美感。
（3）左对齐或右对齐。左对齐或右对齐使行首或行尾自然形成一条清晰的垂直线，很容易与图形配合。这种编排方式有松有紧，有虚有实，跳动而飘逸，产生节奏与韵律的形式美感。左对齐符合人们阅读时的习惯，显得自然；右对齐因不太符合阅读习惯而较少采用，但显得新颖。
（4）绕图排列。将文字绕图形边缘排列。如果将底图插入文字中，会令人感到融洽、自然。
（三）文字的强调
1.行首的强调
将正文的第一个字或字母放大并作装饰性处理，嵌入段落的开头，这在传统媒体版式设计中称为“下坠式”。此技巧的发明溯源于欧洲中世纪的文稿抄写员。由于它有吸引视线、装饰和活跃版面的作用，所以被应用于网页的文字编排中。其下坠幅度应跨越一个完整字行的上下幅度。至于放大多少，则依据所处网页环境而定。
2.引文的强调
在进行网页文字编排时，常常会碰到提纲挈领性的文字，如引文。引文可概括一个段落、一个章节或全文大意，因此在编排上应给予特殊的页面位置和空间来强调。引文的编排方式多种多样，如将引文嵌入正文的左右侧、上方、下方或中心位置等，并且可以在字体或字号上与正文相区别而产生变化。
3.个别文字的强调
如果将个别文字作为页面的诉求重点，则可以通过加粗、加框、加下划线、加指示性符号、倾斜字体等手段有意识地强化文字的视觉效果，使其在页面整体中显得出众而夺目。另外，改变某些文字的颜色，也可以使这部分文字得到强调。这些方法实际上都是运用了对比的法则。
（四）文字的颜色
在网页设计中，设计者可以为文字、文字链接、已访问链接和当前活动链接选用各种颜色。例如，如果使用FrontPage编辑器，默认的设置是这样的：正常字体颜色为黑色，默认的链接颜色为蓝色，鼠标单击之后又变为紫红色。使用不同颜色的文字可以使想要强调的部分更加引人注目，但应该注意的是，对于文字的颜色，只可少量运用，如果什么都想强调，其实是什么都没有强调。况且，在一个页面上运用过多的颜色，会影响浏览者阅读页面内容，除非你有特殊的设计目的。
颜色的运用除了能够起到强调整体文字中特殊部分的作用外，对于整个文案的情感表达也会产生影响。这涉及色彩的情感象征性问题，限于篇幅，在这里不做深入探讨。
另外需要注意的是，文字颜色的对比度，包括明度上的对比、纯度上的对比以及冷暖的对比。这些不仅对文字的可读性发生作用，更重要的是，可以通过对颜色的运用实现想要的设计效果、设计情感和设计思想。
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
