网页版式设计.ppt

网页设计常用软件 一、版式的基本类型 网页版式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型十种。 1.骨骼型 网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。 骨骼型 2.满版型 页面以图像充满整版。主要以图像为诉求点，也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。随着宽带的普及，这种版式在网页设计中的运用越来越多。 满版型 3.分割型 把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成对比：有图片的部分感性而具活力，文案部分则理性而平静。可以调整图片和文案所占的面积，来调节对比的强弱。例如：如果图片所占比例过大，文案使用的字体过于纤细，字距、行距、段落的安排又很疏落，则造成视觉心理的不平衡，显得生硬。倘若通过文字或图片将分割线虚化处理，就会产生自然和谐的效果。 分割型 4.中轴型 沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。 4.中轴型 5.曲线型 图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。 6.倾斜型 页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。 7.对称型 对称的页面给人稳定、严谨、庄重、理性的感受。 对称分为绝对对称和相对对称。一般采用相对对称的手法，以避免呆板。左右对称的页面版式比较常见。 ?四角型也是对称型的一种，是在页面四角安排相应的视觉元素。四个角是页面的边界点，重要性不可低估。在四个角安排的任何内容都能产生安定感。控制好页面的四个角，也就控制了页面的空间。越是凌乱的页面，越要注意对四个角的控制。 对称型 8.焦点型 焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。焦点型分三种情况。 （1）中心　以对比强烈的图片或文字置于页面的视觉中心。 ? （2）向心　视觉元素引导浏览者视线向页面中心聚拢，就形成了一个向心的版式。向心版式是集中的、稳定的，是一种传统的手法。 ? （3）离心　视觉元素引导浏览者视线向外辐射，则形成一个离心的网页版式。离心版式是外向的、活泼的，更具现代感，运用时应注意避免凌乱。 焦点型 9.三角型 网页各视觉元素呈三角形排列。正三角形（金字塔型）最具稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既安定又有动感。 10.自由型 自由型的页面具有活泼、轻快的风格。 网页欣赏 网页欣赏 网页欣赏 网页欣赏 网页欣赏 网页欣赏 网页欣赏 网页欣赏 网页欣赏 网页欣赏 网页欣赏 谢 谢 LOGO 网页的版式设计 主讲：… Fireworks Flash Photoshop Dreamweaver 综合运用多种分栏形式 四边出血，向外扩张，适合年轻人的口味。 分割线上的压置的图片既打破了页面分割的生硬感，也使自身得到强调。左边框上的小标签乃点睛之笔。 不易觉察的中轴型版式，给人以轻快之感。 网站的导航标题沿图形弧线排列 文字水平排列，将画框斜置，产生对比与动势，印象被加强 以相对对称手法制作的导航页面 通过离心的版式，清晰地传达出网站提供的服务 整体看为正三角形的构图，主体形象稳定而突出 引导视线的图片以散点构成，传达随意、轻松的气氛 LOGO