网页版式设计2
- 格式：ppt
- 大小：2.65 MB
- 文档页数：35
下载文档原格式
合集下载
《网页设计基础》PPT课件
1.4 建立网站的基本流程
图1-2所示的是一个网站的完整制作流程.
确定主题策划与准备来自收集资料与素材规划网站结构
图
-
1
设计网页版式
2
确定网站结构
网
站
制作阶段
制作网页元素
的
制
插入元件与排版
作 流
上传网站
程
后期工作
维护与更新
1.4.1 确定主题
网站的主题也就是网站的题材, 是网站设计首先遇到的问题.
〔2〕利用Fireworks修改图像非常方便.
〔3〕Fireworks无需借助其他工具就可 以完成将一个图像转化为网页元素的全过程.
〔4〕Fireworks具有文件导出功能.
1.3.2 Flash
Flash是Macromedia公司开发 的用于矢量图形编辑和动画创作的 专业软件,它是一种交互式动画设 计工具,用它可以将音乐、声效、 动画以及富有新意的界面融合在一 起,以制作出高品质的网页动态效 果.
网站的定位要小,内容要精.
网站的题材最好选自己擅长或 者喜爱的内容.
网站名称,是网站设计的一部 分,而且是一个关键的要素,和现实 生活中一样,网站名称是否正气、
1.4.2 搜集资料 1.4.3 网站的整体规划
进行网站的整体规划也就是组 织网站的内容并设计其结构. 1.4.4 网页设计与制作
1．静态网页的设计与制 作
Dreamweaver是 Macromedia公司推出的一款大 众化的网页制作软件,它具有可 视化编辑界面,用户不必编写复 杂的HTML源代码就可以生成跨 平台、跨浏览器的网页,不仅适 合于专业网页编辑人员的需要, 同时也容易被业余网页制作人员 所掌握.
1.2.3 FrontPage
网页设计与制作（附微课视频第2版）参考答案
⽹页设计与制作（附微课视频第2版）参考答案第⼀章习题参考答案⼀、选择题1、A2、A3、B4、C5、A、B、C、D6、A、C、D7、B8、C9、B⼆、简答题1．答：URL是UniformResourceLocation的缩写,译为“统⼀资源定位符”，URL是Internet 上⽤来描述信息资源的字符串,主要⽤在各种WWW客户程序和服务器程序上,特别是著名的Mosaic。
采⽤URL可以⽤⼀种统⼀的格式来描述各种信息资源,包括⽂件、服务器的地址和⽬录等；2答：⽂本、图像、动画、视频等。
3.答：⽹页结构语⾔的作⽤是将⽹页需要的内容以结构化、模块化的⽅式总结和存储，供表现语⾔和⾏为进⾏调⽤。
⽹页结构语⾔包括可扩展超⽂本标记语⾔XHTML 1.0和HTML 5等两种结构语⾔。
其中，XHTML 1.0为当前被⼴泛使⽤的标准，⽽HTML 5标准则是⽹页未来将被使⽤的标准。
⽹页表现语⾔的作⽤是为⽹页的结构语⾔定义尺⼨、位置、背景，以及⽂本的各种效果。
⽬前⽹页表现的国际标准语⾔为CSS 样式表技术。
⽹页结构语⾔和⽹页表现语⾔共同作⽤可以为⽤户呈现⽹页的整体画⾯，然⽽，⽹页是⼀种交互性的媒体，其除了可以呈现内容外，还可以根据⽤户的界⾯操作响应各种事件，此时，就需要⽤到⽹页的⾏为语⾔。
⽹页的⾏为语⾔包括多种类型，例如，JavaScript、JScript以及VBScript等。
4.答：⼀个完整的HTML5⽂档包含声明、头部和主体三个部分组成。
第⼆章习题参考答案⼀、选择题1.A、B2.A3.B4.D5.D6.D7.C⼆、简答题1．答：（⼀）⽹站功能需求分析；（⼆）⽹站的策划，本阶段主要包含⽹站栏⽬，内容，产品提炼等等；（三）⽹站设计，根据策划开始进⾏设计；（四）程序代码的开发；（五）上线测试；（5）后期维护；2.答：（1）对称与均衡对称分为左右对称、上下对称、重复对称、旋转对称等形式。
对称的造型在⼤⾃然中⽐⽐皆是，同时也是版式设计常⽤的构成形式。
网页美工设计教案(2)精品PPT课件
（2）色彩的冷暖感 冬天看到黄色的光，会有温暖感，夏天看到蓝色的水
会有凉爽感。冷暖感本身属于触感，然而即使不去用 手摸而只是用眼睛看也会感到暖和冷，这是由于生活 经验积累而产生的。色彩的冷暖感被称为色性，而冷 暖感主要取决于色调。暖色，如黄色，橙色，红色， 紫色等都属于暖色系列。
（3）色彩的软硬感
软硬感与冷暖感类似，色彩的软硬感与明度有关系。明度低 的色彩给人以坚硬、冷漠的感觉。相反，明度高的色彩给人 以柔软、亲切的感觉。软色调给我们以明快，柔和，亲切的 感觉。
一定的面积，面积是色彩不可缺少的特性。
2.2 网页配色的原理 2.2.1 色彩的基本知识 在千变万化的色彩世界中，人们视觉感受到的色彩非常 丰富，可分为无彩色系和有彩色系两大类。有彩色系， 包括在可见光谱中的全部色彩，它以红、橙、黄、绿、 蓝、紫等为基本色。无彩色系，指由黑色、白色及黑白 两色相融而成的各种深浅不同的灰色系列。
1.2 网页中的平面构成
1.2.1网页设计中的平面构成
网页是构成网站的基本元素，是承载各种网站应用的 平台。通俗的说，您的网站就是由网页组成的。网页 （Web page）是一个文件，他存放在世界某个角落的某一 部计算机中，而这部计算机必须是与互联网相连的。网页 经由网址（URL）来识别与存取，当我们在浏览器输入网 址后，经过一段复杂而又快速的程序，网页文件会被传送 到你的计算机，然后再通过浏览器解释网页的内容，再展 示到你的眼前。是万维网中的一页，通常是HTML格式（文 件扩展名为.html或.htm）。网页通常用图像档来提供图 画。网页要透过网页浏览器来阅读。
2.1.2色彩的对比
色彩对比指各色彩之间存在的矛盾、对立、差别。色 彩诱人魅力，主要在于色彩对比的妙用。色彩对比强烈， 视觉刺激力会很强；色彩对比弱，易产生协调的效果；如 果没有对比，会出现混沌、模糊、乏味的效果。因此色彩 对比是网页配色的必要环节与过程。色彩对比通常以色相 对比考虑居多（图2-2 ），同时还有色彩的明度对比、纯 度对比、面积对比等。在网页配色中，无论是色相对比、 明度对比和纯度对比，都是基于色彩面积的对比，也就是 色彩的比例问题。因为色彩如果没有相当的面积，就很难 感受到其色相。因此，形态作为视觉色彩的载体，总有其
网页的版式设计
网页的版式设计（一）编者按：很多从事网页设计的计算机专业人员，对于网页的制作技术驾轻就熟，但对于网页富有艺术性和个性的设计却感到力不从心。
特别是没有经过艺术设计专业训练的网页制作者，在掌握了网页制作技术的情况下，都渴望将自己的网页制作得更具创意和美感。
目前关于网页制作的讨论和介绍，多以讲解软件的技术性操作为主要内容，侧重艺术方面的非常之少。
经过作者同意，从这一期开始，我们选载《网页艺术设计》一书的部分章节，从最基本的内容讲起，希望对广大网页制作者有所助益。
一、文字的格式化1.字号、字体、行距字号大小可以用不同的方式来计算，例如磅（point）或像素（pixel）。
因为以计算机的像素技术为基础的单位需要在打印时转换为磅，所以，建议采用磅为单位。
最适合于网页正文显示的字体大小为12磅左右，现在很多的综合性站点，由于在一个页面中需要安排的内容较多，通常采用9磅的字号。
较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。
需要注意的是，小字号容易产生整体感和精致感，但可读性较差。
网页设计者可以用字体来更充分地体现设计中要表达的情感。
字体选择是一种感性、直观的行为。
但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。
粗体字强壮有力，有男性特点，适合机械、建筑业等内容；细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。
在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多采。
关键是如何根据页面内容来掌握这个比例关系。
从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。
因为浏览器是用本地机器上的字库显示页面内容的。
作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。
而你指定的字体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。
解决问题的办法是：在确有必要使用特殊字体的地方，可以将文字制成图像，然后插入页面中。
网页设计与制作(附微课视频 第2版)参考答案
第一章习题参考答案一、选择题1、A2、A3、B4、C5、A、B、C、D6、A、C、D7、B8、C9、B二、简答题1．答：URL是UniformResourceLocation的缩写,译为“统一资源定位符”，URL是Internet 上用来描述信息资源的字符串,主要用在各种WWW客户程序和服务器程序上,特别是著名的Mosaic。
采用URL可以用一种统一的格式来描述各种信息资源,包括文件、服务器的地址和目录等；2答：文本、图像、动画、视频等。
3.答：网页结构语言的作用是将网页需要的内容以结构化、模块化的方式总结和存储，供表现语言和行为进行调用。
网页结构语言包括可扩展超文本标记语言XHTML 1.0和HTML 5等两种结构语言。
其中，XHTML 1.0为当前被广泛使用的标准，而HTML 5标准则是网页未来将被使用的标准。
网页表现语言的作用是为网页的结构语言定义尺寸、位置、背景，以及文本的各种效果。
目前网页表现的国际标准语言为CSS样式表技术。
网页结构语言和网页表现语言共同作用可以为用户呈现网页的整体画面，然而，网页是一种交互性的媒体，其除了可以呈现内容外，还可以根据用户的界面操作响应各种事件，此时，就需要用到网页的行为语言。
网页的行为语言包括多种类型，例如，JavaScript、JScript以及VBScript等。
4.答：一个完整的HTML5文档包含声明、头部和主体三个部分组成。
第二章习题参考答案一、选择题1.A、B2.A3.B4.D5.D6.D7.C二、简答题1．答：（一）网站功能需求分析；（二）网站的策划，本阶段主要包含网站栏目，内容，产品提炼等等；（三）网站设计，根据策划开始进行设计；（四）程序代码的开发；（五）上线测试；（5）后期维护；2.答：（1）对称与均衡对称分为左右对称、上下对称、重复对称、旋转对称等形式。
对称的造型在大自然中比比皆是，同时也是版式设计常用的构成形式。
对称的形式给人以稳定平衡的感觉，但也容易流于刻板、单调。
网页的版式设计
网页设计网页的版式设计在网页设计中根据特定的主题和内容，把文字、图形图像、动画、视频、色彩等信息传达要素界定在一个范围内，有机的、秩序的、艺术性的组织在一起，形成美观的页面并不是容易的事。
由于多数专业的计算机技术人员缺乏艺术设计的能力，致使许多网页一直都是按固定的格式来完成，只是在文字内容上有所变化，所以使很多网页看起来千篇一律，缺乏个性。
为了让网页更具艺术魅力，必须加强制作人员的艺术素养，将艺术与技术有机的结合起来，使网络呈现更绚丽的色彩。
网页的版面设计应从造型、视觉心理及版式构成几方面入手。
一、版式设计的造型在版式空间中标题、内容、主体图形、色调、视觉中心、背景和留白都是造型的最基本元素，将这些基本元素在800*600像素或1024*768像素的版面中有机的结合起来就是设计的过程。
网页版式设计常常借助多种形式的框架（骨骼），规则的框架与不规则的框架，可见的框架与不可见的框架，同时还要与文字样式、色调等因素紧密联系起来。
网页界面设计不同于报纸、杂志等版面的设计，它是动态的、变化的版面。
多数人的显示器分辨率为800*600像素或1024*768像素，我们设计版面时就应以800*600像素为标准，除去滚动条所占的20像素，安全宽度应控制在780像素以内，这样才能浏览到全部的横向页面内容，垂直方向上，页面是可滚动的，版面的长度一般不作限制，但是一些较正规的网站要求滚动不超过3屏，针对这样动态的版面空间，设计起来就要存在较大的难度。
为此，网页设计师应采取一些相应的对策：1．运用自适应宽度技术。
即在版面宽度超出800像素时，页面内容自动伸缩，充满整个版面，这样的技术就要求版面设计也要具有适应性。
1024*768像素环境下的页面效果800*600像素环境下的页面效果2．运用背景来适应不同分辨率的版面效果。
1024*768像素环境下运用背景填充空白部分 800*600像素环境下3．使版面保持固定尺寸，禁止滚动出现，增强对版面的控制，这样的方案非常适用于设计性较强的图形界面。
网页布局设计
6
网页常见布局类型
3.2 网页布局的类型很多，下面简要介绍一 些常见布局类型。
网站Logo+导航栏+Banner广告
导 航 菜 单 主体内容 + 其
广 告 + 其 他
他
版权信息+联系方式+其他 图3-2 国字型网页布局
3.2.1
国字型
国字型网页布局通常被门户、 购物类等内容丰富的大型网站所 使用。其基本布局形式是将网站 的Logo、导航栏及Banner等置 于顶部；下方安排网页的主体内 容，主题内容的左、右两侧分别 是导航菜单、广告或其他栏目； 最后由页尾形成外框底部，将主 体内容包围，如图3-2所示。
提示
扁平化是目前流行的网页设计趋势之 一，其特点是去掉页面中多余的透视、纹 理、渐变及3D效果等元素，让“信息” 重新作为网页核心被凸显出来。同时，在 设计元素上强调极简化和符号化，让页面 中的内容更容易被聚焦，从而带给用户更 直观的浏览体验，如图3-12所示。
图3-12 扁平化布局
18
网页布局技巧
如果网页使用自适应宽度模式，可直接使用 1 920像素或更大的宽度设计。
5
提示
上述网页宽度尺寸是含页边距 （图3-1所示的细节扩展区域）的 尺寸；设计网页版心时，其宽度应 比上述网页宽度稍小一些，以预留 出页边距。例如，若网页对应的是 1 366×768分辨率的显示器，可将 网页版心宽度设为1 190像素。
网站的宣传版块通常使用图文结合的形式进行宣传，此时，使用图文平铺是最基本的信息排 列方式，它能使页面显得整洁利落，如图3-21（a）所示。如果将图片、文字等信息进行层叠，打 破传统的左右、上下布局，能增加画面的透视与层次关系，使枯燥的图文说明方式更具设计感， 如图3-21（b）所示。
网页常见布局类型
3.2 网页布局的类型很多，下面简要介绍一 些常见布局类型。
网站Logo+导航栏+Banner广告
导 航 菜 单 主体内容 + 其
广 告 + 其 他
他
版权信息+联系方式+其他 图3-2 国字型网页布局
3.2.1
国字型
国字型网页布局通常被门户、 购物类等内容丰富的大型网站所 使用。其基本布局形式是将网站 的Logo、导航栏及Banner等置 于顶部；下方安排网页的主体内 容，主题内容的左、右两侧分别 是导航菜单、广告或其他栏目； 最后由页尾形成外框底部，将主 体内容包围，如图3-2所示。
提示
扁平化是目前流行的网页设计趋势之 一，其特点是去掉页面中多余的透视、纹 理、渐变及3D效果等元素，让“信息” 重新作为网页核心被凸显出来。同时，在 设计元素上强调极简化和符号化，让页面 中的内容更容易被聚焦，从而带给用户更 直观的浏览体验，如图3-12所示。
图3-12 扁平化布局
18
网页布局技巧
如果网页使用自适应宽度模式，可直接使用 1 920像素或更大的宽度设计。
5
提示
上述网页宽度尺寸是含页边距 （图3-1所示的细节扩展区域）的 尺寸；设计网页版心时，其宽度应 比上述网页宽度稍小一些，以预留 出页边距。例如，若网页对应的是 1 366×768分辨率的显示器，可将 网页版心宽度设为1 190像素。
网站的宣传版块通常使用图文结合的形式进行宣传，此时，使用图文平铺是最基本的信息排 列方式，它能使页面显得整洁利落，如图3-21（a）所示。如果将图片、文字等信息进行层叠，打 破传统的左右、上下布局，能增加画面的透视与层次关系，使枯燥的图文说明方式更具设计感， 如图3-21（b）所示。
第2章 网页版设设计与色彩搭配[101页]
2.2 学习任务：网页版式设计
9．三角型 网页各视觉元素呈三角形排列。正三角形（金字塔
型）最具稳定性，倒三角形则产生动感。侧三角形构 成一种均衡版式，既安定又有动感。
《网页设计与制作案例教程》（第3版）
2.2 学习任务：网页版式设计
《网页设计与制作案例教程》（第3版）
2.2 学习任务：网页版式设计
《网页设计与制作案例教程》（第3版）
2.1 案例分析：不同风格网页作品欣赏与解析
网页作品欣赏之四：苹果公司网站首页
《网页设计与制作案例教程》（第3版）
2.1 案例分析：不同风格网页作品欣赏与解析
网页采用四横的骨骼式设计，整体色彩采用黑白灰 色调。从色彩及版式看，网站秉承了苹果创始人乔布 斯的极简风格，苹果在网页设计上并没有花费太大笔 墨。骨骼式架构是公司网站通用的架构，容易被浏览 者接受，黑白灰是永恒的时尚色。中间大块区域被主 打商品占据，产品宣传意图明显。可见，无论从版式 还是配色，无处不透露着苹果公司的文化氛围和价值 理念，很容易被苹果的粉丝所认可。
《网页设计与制作案例教程》（第3版）
2.2 学习任务：网页版式设计
2.2.3 网页的版式设计风格
1．骨骼型
是一种规范的、理性的分割方法，类似报刊的版式。 骨骼型又称为分栏式。常见的骨骼有竖向通栏、双栏、 三栏、四栏和横向的通栏、双栏、三栏和四栏等。一 般以竖向分栏为多。这种版式给人以和谐、理性的美。 几种分栏方式结合使用，既理性、条理，又活泼而富 有弹性。
《网页设计与制作案例教程》（第3版）
2.2 学习任务：网页版式设计
2.2.1 版式设计概述 网页的版式设计，是指在有限的屏幕空间内，根据
网页主题诉求，将网页元素按照一定的艺术规律进行 组织和布局，使其形成整体视觉印象，最终达到有效 传达信息的视觉设计。它以有效传达信息为目标，利 用视觉艺术规律，将网页的文字、图像、动画、音频 、视频等元素组织起来，充分体现了网页整体风格。
《网店设计与装修》课程标准
《网店设计与装修》课程标准学时数：32学时 ___________________课程性质：专业选修课 ________适用专业：电子商务专业 ______一、本课程的性质、地位、作用以及与其它相关课程内容的联系本课程是电子商务专业的一门主干专业技能课程。
通过本课程的学习，要求学生掌握网店装修的基本概念，学会使用常用的PhotoShop和dreamweaver来实现各种功能和表现，解决在网店美工中装修网店时遇到的各种专修效果问题，能够设计装修出常见的各种店铺风格的店铺首页以商品详情页，具备表达恰当、美观大气并能够体现商品的网店装修和美工的能力。
同时通过本课程的学习，培养学生成为技能全面，实战能力超强的“能手”型人才。
二、本课程的教学目标1.知识教学目标1）认识电商、认识美工重要性2）了解美术基础及强化素描、色彩、手绘等；3）熟练操作PhotOShop、Dreamweaver；4）初步理解专业图像处理、图片的修复与合；5）初步认识店招设计；6）初步认识海报设计；7）深入理解详情页制作；8）深入理解店铺装修的构思的作用；9）深入理解美工实践课店铺装；10）深入理解认识专业美工。
2.能力教学目标1）会使用PhOtoShop、DreamWeaVer网页设计工具制作网页；2）掌握网页与平面构成、色彩、版面设计的关系；3）熟练掌握颜色值的配置和背景图案的设置方法，熟练掌握字符、链接颜色的设置方法；4）熟练掌握掌握重复、渐变、发射的构成练习；5）掌握特异、肌理、图与底、对比、韵律等平面使用方法；6）掌握使用滤镜对现成的图像进行处理；7）掌握熟练掌握图窠填充的技巧；8）掌握相关工具和技巧的混合运用，绘制出各种图案效果；9）熟练掌握PhotOShop、Dreamweaver设计网页版面与制作的方法和技巧,使学生能够运用美术思想来设计制作具有观赏性的网页页面；10）掌握Photoshop图案填充作品不仅局限于对象的简单叠加，而且具有五彩缤纷的渲染效果表格的使用方法，会用表格布局并设计网页。
简单优雅的网站颜色方案-黑白网页设计
简单优雅的网站颜色方案-黑白网页设计网页设计的世界里，黑白两色仿佛是最纯粹的语言，它们简洁、有力，又充满无穷的变化。
今天，就让我们一起探索这个简单而优雅的黑白网页设计方案。
一、设计理念在设计之初，我们明确了这样一个核心理念：用最少的颜色，传达最丰富的情感和信息。
黑白两色，看似对立，实则互补，它们共同构筑了一个平衡、和谐、高级的视觉体验。
二、颜色搭配1.黑色背景黑色，作为网页的背景色，给人一种稳重、深邃的感觉。
它既能突出白色文字和图像的鲜明对比，又能营造出一种神秘、专业的氛围。
2.白色主体白色，作为网页的主体色，它纯净、简洁，让人眼前一亮。
我们将白色应用于文字、图像、导航栏等元素，使其成为视觉焦点。
3.灰色辅助灰色，作为黑白的过渡色，它既不会抢走黑白的视觉焦点，又能增加层次感。
在网页设计中，我们用灰色来表示辅助信息，如注释、标签等。
4.亮色点缀在黑白灰的基础上，我们可以适当地加入一些亮色，如红色、蓝色、绿色等，作为点缀。
这些亮色既能活跃氛围，又能引导用户关注重要信息。
三、布局设计1.简洁的导航栏导航栏作为用户浏览网页的重要工具，我们将其设计得简洁明了。
黑色背景上，白色文字清晰可见，灰色图标点缀其间，既美观又实用。
2.突出的是网页的核心内容，我们采用大号白色文字，搭配黑色背景，使其具有强烈的视觉冲击力。
同时，灰色辅助文字和保持一定的间距，层次感分明。
3.清晰的版式在版式设计上，我们遵循简洁、对称的原则。
黑色、白色、灰色三种颜色交替出现，形成一种视觉节奏。
同时，留白的设计使得整个网页看起来更加透气、舒适。
4.丰富的内容在内容呈现上，我们采用图文结合的方式。
白色文字搭配高质量的黑色或灰色图像，既保证了信息的传达，又增加了视觉美感。
四、交互设计1.清晰的按钮按钮作为用户与网页交互的重要元素，我们将其设计得简洁明了。
黑色背景上，白色文字搭配灰色图标，清晰可见，易于。
2.动态效果为了增加网页的趣味性，我们可以加入一些动态效果。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
9pt(磅)\12px(像数)
网页设计者可以用字体来更充分地体现设计中要表达的情感。 字体选择是一种感性、直观的行为。但是，无论选择什么字 体，都要依据网页的总体设想和浏览者的需要。 1.粗体字强壮有力，
有男性特点，
适合机械、 建筑业等内容
细体字高雅细致， 有女性特点，更适合服装、 化妆品、食品等行业的内容
•对称型
• 8.焦点型 • 焦点型的网页版式通过对视线的诱导，使页面具 有强烈的视觉效果。焦点型分三种情况。（1）中 心 以对比强烈的图片或文字置于页面的视觉中 心。（2）向心 视觉元素引导浏览者视线向页面 中心聚拢，就形成了一个向心的版式。向心版式 是集中的、稳定的，是一种传统的手法。（3）离 心 视觉元素引导浏览者视线向外辐射，则形成 一个离心的网页版式。离心版式是外向的、活泼 的，更具现代感，运用时应注意避免凌乱。 • 此类网站如AQUAFINA。
满版型
3.分割型
把整个页面分成上下或左右两部分，分别安排图片和文 案。两个部分形成对比：有图片的部分感性而具活力， 文案部分则理性而平静。可以调整图片和文案所占的面 积，来调节对比的强弱。例如：如果图片所占比例过大， 文案使用的字体过于纤细，字距、行距、段落的安排又 很疏落，则造成视觉心理的不平衡，显得生硬。倘若通 过文字或图片将分割线虚化处理，就会产生自然和谐的 效果。 此类网站版式为各类网站所采用。如ABBEY。
• 1.2 版式设计的原则 让观看者在享受美感的同时，接受作者想要传达的信息。 1、主题鲜明突出 版式设计的最终目的是使版面产生清晰的条理性，用悦目的组织 来更好地突出主题，达到最佳诉求效果。 按照主从关系的顺序，使放大的主体形象视觉中心，以此表达主 题思想。 将文案中的多种信息作整体编排设计，有助于主体形象的建立。 在主体形象四周增加空白量，使被强调的主体形象更加鲜明突出。 2、形式与内容统一 版式设计的前提－版式所追求的完美形式必须符合主题的思想内 容。 通过完美、新颖的形式，来表达主题。 没有文字的版面，最难设计。
除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加 强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。 例如，加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容 恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强版面的空间层 次与弹性，表现出独到的匠心
分割型
• 4.中轴型 • 沿浏览器窗口的中轴将图片或文字作水平或 垂直方向的排列。水平排列的页面给人稳定、 平静、含蓄的感觉。垂直排列的页面给人以 舒畅的感觉。 • 此类网站版式为各类网站所采用。如ALFA ROMEO。
中轴型
• 5.曲线型
• 图片、文字在页面上作曲线的分割或编 排构成，产生韵律与节奏。 • 此类网站版式为各类网站所采用。如 POISE。
骨骼型
.2.满版型
页面以图像充满整版。主要以图像为诉求点，也 可将部分文字压置于图像之上。视觉传达效果直观而 强烈。满版型给人以舒展、大方的感觉。随着宽带的 普及，这种版式在网页设计中的运用越来越多。 此类版式被各种网站所采用，但运用自如的是韩 国网站。韩国网站设计在运用满版和FLASH方面是我 们应当仔细研习的。如SK-KING。
曲线型
• 6.倾斜型
• 页面主题形象或多幅图片、文字作倾斜编 排，形成不稳定感或强烈的动感，引人注 目。 • 此类网站版式为各类网站所采用。如 BIOTHERM。
倾斜型
• 7.对称型
• 对称的页面给人稳定、严谨、庄重、理性的感受。对称分 为绝对对称和相对对称。一般采用相对对称的手法，以避 免呆板。左右对称的页面版式比较常见。四角型也是对称 型的一种，是在页面四角安排相应的视觉元素。四个角是 页面的边界点，重要性不可低估。在四个角安排的任何内 容都能产生安定感。控制好页面的四个角，也就控制了页 面的空间。越是凌乱的页面，越要注意对四个角的控制。 • 此类网站版式为各类网站所采用。如PEDRPPER。
• 怎么样做好网页版式设计？
先来了解网页版式布局的基本类型
主要有：
骨骼型、满版型、分割型、中轴型、曲线 型、倾斜型、对称型、焦点型、三角型、 自由型十种。
• 1.骨骼型 网页版式的骨骼型是一种规范的、理性的分割方 法，类似于报刊的版式。常见的骨骼有竖向通栏、 双栏、三栏、四栏和横向的通栏、双栏、三栏和 四栏等。一般以竖向分栏为多。这种版式给人以 和谐、理性的美。几种分栏方式结合使用，既理 性、条理，又活泼而富有弹性。 • 此类网站均属门户、新闻媒体类网站所采用。如 。
自由型 无规律的、随意的编排构成。 有活泼、轻快的感觉。
自由型 无规律的、随意的编排构成。 有活泼、轻快的感觉。
自由型 无规律的、随意的编排构成。 有活泼、轻快的感觉。
• 行距的变化也会对文本的可读性产生很大影响。一般情况 下，接近字体尺寸的行距设置比较适合正文。行距的常规 比例为10:12，即用字10点，则行距12点。这主要是出于 以下考虑:适当的行距会形成一条明显的水平空白带，以 引导浏览者的目光，而行距过宽会使一行文字失去较好的 延续性。
12px/18--20 行距
什么是版式设计?
– 版式设计 1 版式设计概述 版式设计是现代设计艺术的重要组成部分，是视觉传达的重 要手段，表面上看，它是一种关于编排的学问；实际上，它不仅 是一种技能，更是技术与艺术的高度统一。版式设计是现代设计 家必须具备艺术修养和技术知识。 – 1.1 版式设计的定义 版式[format] －指书刊等的版面格式 版面－（报刊、书籍的一）整页 所谓版式设计，就是在版面上，将有限的视觉元素进行有机 的排列组合。 将理性思维，个性化地表现出来；一种具有个人风格和艺术 特色的视觉传送方式。 – 传达信息，同时，也产生感官上的美感。 版式设计的范围，涉及到报纸、刊物、书籍（画册）、产品 样本、挂历、招贴画、唱片封套和网页页面等平面设计各个领域。
•焦点型
• 9.三角型
• 网页各视觉元素呈三角形或多角形排列。正三角形（金字 塔型）最具稳定性，倒三角形则产生动感。侧三角形构成 一种均衡版式，既安定又有动感。 • 此类网站均属门户、新闻媒体类网站所采用。如LIFEbeat。
•三角型
• 10.自由型
• 自由型的页面具有活泼、轻快的风格。 • 此类网站如SESAC。
• 2 版式的基本类型 骨格型、满版型、上下分割型、左右分割型、中轴型、曲线型、 倾斜型、对称型、重心型、三角型、并置型、自由型和四角型等13种。 • 2.1 骨格型 规范的、理性的分割方法。 常见的骨格有－竖向通栏、双栏、三栏和四栏等。一般以竖向 分栏为多。 图片和文字的编排上，严格按照骨格比例进行编排配置，给人 以严谨、和谐、理性的美。 骨格经过相互混合后的版式，既理性有条理，又活泼而具有弹 性。 • 2.2 满版型 版面以图像充满整版，主要以图像为诉示，视觉传达直观而强 烈。文字配置压置在上下、左右或中部（边部和中心）的图像上。 满版型，给人大方、舒展的感觉。是商品广告常用的形式。
• • •人喜欢的网站都有下面的特征： ·布局简单 ·中心定位 ·3D效果 ·柔和,自然的背景色 ·颜色鲜亮（要谨慎使用） ·可爱的图标（也要谨慎使用） ·有许多留白 ·大字体 ……………………………………………..
一.文字的格式化
字号、字体、行距 字号大小可以用不同的方式来计算，例如磅(point)或像 素(pixel)。因为以计算机的像素技术为基础的单位需要在打 印时转换为磅，所以，建议采用磅为单位。 最适合于网页正文显示的字体大小为12磅左右，现在很多 的综合性站点，由于在一个页面中需要安排的内容较多，通常 采用9磅的字号。较大的字体可用于标题或其他需要强调的地 方，小一些的字体可以用于页脚和辅助信息。需要注意的是， 小字号容易产生整体感和精致感，但可读性较差。
在同一页面中，字体种类少，版面雅致，有稳定感;字体种 类多，则版面活跃，丰富多采。关键是如何根据页面内容来 掌握这个比例关系。
从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。因为浏览器 是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数 浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字 体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。解 决问题的办法是:在确有必要使用特殊字体的地方，可以将文字制成图像，然 后插入页面中。