网页效果图，又称页面效果图。顾名思义，是一个网页页面的图片表现形式。也就是说，将网页页面用图片的形式表现出来，又称页面效果图。多用于建站前期。
定义
效果图设计是网站项目开发中非常重要的一环。通过效果图，客户可以把自己想展示的内容以图像的方式表现出来，因此效果图设计阶段是网站开发中最繁杂、最漫长的阶段，往往要占据项目开发时间的三分之一甚至三分之二。
网站前台人员以效果图为模型，使用Dreamweaver等网页制作软件搭建成真正的网站。
设计
我想这是很多人关心的话题。其实设计不同的效果图方法以及过程均不相同，但以下设计思路可以借鉴！
Step1 客户需求：主要是听取客户关于项目的具体要求。
Step2 网站策划：明确网站建设目标，收集客户资料，分析网站类型，确定网站风格。
Step3 绘制效果图：主要分类三个步骤，一是绘制草图；二是利用辅助线等技术绘制整体轮廓；三是进行各区域块的细化。
Step4 客户审核：在效果图设计过程中，一定与客户保持良好的联系，最终达到一致。
Step5 切片、优化导出
Step6 网页技术整合阶段，利用HTML+CSS+JAVASCRIP及相应用的后台编码技术完成整个网站的开发。
布局原则
网页的布局设计，就是指网页中图像和文字之间的位置关系，简单来说也可以称之为网页排版，网页布局设计最重要的就是传达信息，且使它们组成一个有机的整体，展现给广大的观众。可以依据如下几条来做：
1．主次分明，中心突出
在一个页面上，必然考虑视觉中心，这个中心一般在屏幕的中央，或者在左上的视觉优势位置。因此一些重要的文章和图片一般可以安排在这些部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次分明。
2．大小搭配，相互呼应。
较长的文章或标题不要编排在一起，要有一定的距离，同样，较短的文章也不能编排在一起。对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。
3．图文并茂，相得益彰。
文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。
网页布局分类
网页布局大致可分为：骨骼型、满版型、分割型、对称型、倾斜型、焦点型、三角型、自由型。下面分别论述。详例请参照图片册。
（1）骨骼型描述：网页中骨骼型是一种规范、严谨的分割方式，也是最为普通和最为常见的一种形式，类似报刊的版式。常见的网页骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。通常以竖向分栏居多。这种版式给人以和谐、理性的美。
（2）满版描述：满版型页面以图像充满整版。主要以图像为诉求点，可将部分文字置于图像之上。视觉传达效果直观而突出。给人以生动大方人感觉。满版型版式被各种网站所采用，以学校、娱乐、体育、艺术、儿童以及个性化网页，其中以韩国网站居多。
（3）分割型描述：分割型版式指把整个页面分成上下或左右两部分，分别安排图片或文字内容。两部分形成对比，使图片部分感性而具表现力，文字部分则理性而具说服力。可以调整图片和文字所占的面积比例，来调节对比强弱。如果图片比例过大，文字字体过于纤细，段落疏松，会造成视觉心理的不平衡，显得生硬。
（4）中轴或对称型描述：中轴型版式是将图片和文字沿浏览器窗口的中间轴心位置作水平或垂直方向排列的一种设计方式。沿中轴水平方向排列的页面可以给人稳定、平静、含蓄的感觉，沿中轴垂直方向排列的页面可以给人以舒畅的感觉。采用这种版式设计的网页比较适合做网站的首页。
（5）焦点型描述：焦点型的网页版式通过对浏览者视线人诱导，可以使页面产生强烈的视觉效果，如集聚感或膨胀感等。中心焦点型是将图片或文字置于页面的视觉中心。向心焦点型是视觉元素引导浏览者人视线向页面中心聚拢。离心焦点型是视觉元素引导浏览者的视线向外辐射。焦点型版式为各类网站使用，以体育、娱乐、动画网站为多。
（6）倾斜或曲线型描述：倾斜型页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。此类网站版式为各类网站所采用。曲线型网站图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。此类网站版式为各类网站所采用。
（7）三角型描述：三角型版式是指见面各视觉元素呈三角形或多角形排列。正三角形最具稳定性，倒三角形则可产生动感。侧三角形构成一种均衡版式，既安定又有动感。三角形版式为各类网站所采用。
（8）自由型描述：自由型版式人页面具有活泼、轻快人气氛。自由型版式也可应用于多种网站。如网络、娱乐、体育、个人、商务等。
以上介绍的版式基本类型并不是固定不变的，在实际设计中，设计师可以根据网页所要传达的主题内容来灵活地变化版式。在设计前要认真分析网站的定位，在设计中要灵活把握版式结构，才能更好地达到设计目的。