网站效果图设计 作者 刘心美 教材--第6章网页设计基础.pptVIP

* 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 知识目标： 了解网站、网页概念及网页与网站二者关系 掌握网页的设计流程，视觉元素，版式风格设计，形式语言的运用 了解色彩基础概念，网页的色彩设计分析，色彩的搭配与运用 分辨网页流程,版式的能力 分析网页配色的能力 能力目标： 第6章 网页设计基础 网页设计流程 6.1 网站布局 6.2 网页的色彩设计 6.3 授 课 安 排 网页设计流程 6.1 1. 网站开发流程 网站项目开发一般要分为客户需求、效果图设计、开发、测试、运行和维护几个阶段，各阶段循环往复，一直到客户审核通过为止，如图所示。 网页设计流程 6.1 2. 页面效果图开发流程 在页面效果图设计阶段，一般要经过客户需求、网站策划、绘制效果图、客户审核、切片、优化导出等流程，如图所示。 效果图设计 客户需求 网站策划 绘制效果图 客户审核 切片 优化导出 网页布局 6.2 网页是网站构成的基本元素，网页的精彩与否决定了网站的成败，当我们遨游于互联网上，一副副精彩的网页会一一呈现，丰富的色彩、简洁的文字、炫丽的图片效果，当然是不可忽略的因素，但是另一个关键的问题是，如何将这些网页元素进行合理排版，让他们相互配合，相互映衬，这就是网页的布局的作用。下面，我们就有关网页布局谈论一下。 网页布局 6.2 图6-8 网页效果图 图6-9 网页的布局结构 6.2.2 网页布局理论 网页的布局设计图，在布局图中要划分明确主次区域，层次结构，清晰的布局结构是一个网站成功的关键所在。以图为例来说。 网页中的各个内容区域以一个个的“矩形块”构成，按照从上到下，从左到右的顺序对网页的布局结构进行排列，整体布局结构划为四行: 第一行来制作Logo 第二行制作导航 第三行制作内容，内容区域又拆分为左、右两列，左侧为关键内容、标题等，右侧为具体内容的说明。 第四行制作版权信息。 Part 1 6.2.1 网页效果图布局原则 网页的布局设计，就是网页元素的排版和定位，具体来讲是指网页中图像、文字等之间的位置关系，通过网页布局，实现将它们组成一个有机的整机，更好的实现传达信息的功能。关于网页布局要从以下要点几点出发： 1．主次分明，中心突出 2．大小搭配，相互呼应。 3．图文并茂，相得益彰。 Part 1 6.2.2 网页布局理论 图6-8 网页效果图 图6-9 网页的布局结构 网页的布局设计图，在布局图中要划分明确主次区域，层次结构，清晰的布局结构是一个网站成功的关键所在。以图为例来说。 网页中的各个内容区域以一个个的“矩形块”构成，按照从上到下，从左到右的顺序对网页的布局结构进行排列，整体布局结构划为四行: 第一行来制作Logo 第二行制作导航 第三行制作内容，内容区域又拆分为左、右两列，左侧为关键内容、标题等，右侧为具体内容的说明。 第四行制作版权信息。 Part 1 6.2.3 网页布局分类 网页布局大致可分为：骨骼型、满版型、分割型、对称型、倾斜型、焦点型、三角型、自由型。下面分别论述。 1、骨骼型 描述：网页中骨骼型是一种规范、严谨的分割方式，也是最为普通和最为常见的一种形式，类似报刊的版式。常见的网页骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。 特征：这种版式给人以和谐、理性的美。骨骼型版式常为综合门户、政府机关、新闻媒体类网站所采用。 Part 1 6.2.3 网页布局分类 网页布局大致可分为：骨骼型、满版型、分割型、对称型、倾斜型、焦点型、三角型、自由型。下面分别论述。 2、满版型 描述：页面以是以图像为诉求点，利用图像来充满整个版面，将部分文字置于图像之上。 特征：视觉传达效果直观且突出，给人以生动大方的感觉，常被如学校、娱乐、体育、艺术、儿童以及个性化网页等所采用，是韩国网站所常使用的版式。 Part 1 6.2.3 网页布局分类 网页布局大致可分为：骨骼型、满版型、分割型、对称型、倾斜型、焦点型、三角型、自由型。下面分别论述。 3、分割型 描述：指把整个页面划分成上下或左右两个部分，两部分形成对比。一般都分成图片和文字两部分，图片部分感性而具表现力，文字部分理性而具说服力，通过调整图片和文字部分的比例，来调节对比强弱。 Part 1 6.2.3 网页布局分类 网页布局大致可分为：骨骼型、满版型、分割型、对称型、倾斜型、焦点型、三角型、自由型。下面分别论述。 4、中轴或对称型 将页面元素沿当前窗口的中间轴心位置进行水平或垂直方向的对称排列。所谓对称可指左右对称、上下对称、四角型对称等。左右对称是指沿中轴水平左右对