第二节 网页的版式设计
网页的版式设计
网页的版式设计（一）编者按：很多从事网页设计的计算机专业人员，对于网页的制作技术驾轻就熟，但对于网页富有艺术性和个性的设计却感到力不从心。
特别是没有经过艺术设计专业训练的网页制作者，在掌握了网页制作技术的情况下，都渴望将自己的网页制作得更具创意和美感。
目前关于网页制作的讨论和介绍，多以讲解软件的技术性操作为主要内容，侧重艺术方面的非常之少。
经过作者同意，从这一期开始，我们选载《网页艺术设计》一书的部分章节，从最基本的内容讲起，希望对广大网页制作者有所助益。
一、文字的格式化1.字号、字体、行距字号大小可以用不同的方式来计算，例如磅（point）或像素（pixel）。
因为以计算机的像素技术为基础的单位需要在打印时转换为磅，所以，建议采用磅为单位。
最适合于网页正文显示的字体大小为12磅左右，现在很多的综合性站点，由于在一个页面中需要安排的内容较多，通常采用9磅的字号。
较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。
需要注意的是，小字号容易产生整体感和精致感，但可读性较差。
网页设计者可以用字体来更充分地体现设计中要表达的情感。
字体选择是一种感性、直观的行为。
但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。
粗体字强壮有力，有男性特点，适合机械、建筑业等内容；细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。
在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多采。
关键是如何根据页面内容来掌握这个比例关系。
从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。
因为浏览器是用本地机器上的字库显示页面内容的。
作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。
而你指定的字体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。
解决问题的办法是：在确有必要使用特殊字体的地方，可以将文字制成图像，然后插入页面中。
网页页面设计教案
《网页页面设计》教案教学对象：教学总学时：主讲教师：主讲教师单位：时间：年月日概要本门课程的教学目标和要求：通过教学训练，使学生的设计能力、软件应用能力及实际操作能力得到深入的提高。
通过理论讲解与实例分析，学生可熟悉网页页面设计与制作的相关知识；通过应用训练，学生可掌握相关软件，并逐步培养学生的创造能力；通过综合训练，学生可以将理论知识应用于实践，并逐步提高学生的设计能力。
学生在完成本课程学习后，应达到如下要求：（1）正确理解网页页面的含义。
（2）掌握网页页面设计的基本知识和基本规律。
（3）熟悉网页页面设计的方法。
（4）能够将理论与实践相结合，独立完成网页页面设计与制作。
教学要点：不同类型的网页页面设计。
教学重点及难点：综合运用平面制图软件进行网页页面的设计与制作。
教学方法：先课堂讲授,掌握一定基础知识，然后进行实例教学，启发创作，在课堂形成教学互动；最后创作练习，培养学以致用，实战能力。
教学总时数：56学时教学参考书：《网页页面设计与制作》目录课题一网页概述课题二网页设计视听元素课题三交互式视觉元素课题四网页版面设计课题五网页配色课题六 PS网页切图教案首页课题一网页概述具体授课内容：网站设计是一个系统的软件应用工程，工作内容千头万绪，涉及到项目管理、页面设计，程序设计，网站测试，资料收集、文档编辑等方面工作，它需要不同的人员分工合作才能完成。
只有建立和实施规范的网站设计流程，有效整合各方面的工作内容，才能高效有序地开展网站设计工作，最终顺利地实现网站开发的目标。
通过本堂课的学习，使学生了解什么是网页页面设计，网页页面的规格、网页页面版面以及相关设计软件等。
概念分解：一、网站与网页1、网站：为了更好的推广企业、机构、活动等整体形象，利用互联网技术（数字技术）实现的超链接网络信息查询的多个页面。
2、网页：网站中，用来提供相关信息的单一页面。
3、网站与网页的区别：浏览器窗口中显示的单一页面，是网页。
《dreamweaver网页设计与制作》课程标准
《Dream weav er网页设计与制作》课程标准一、课程定位和课程设计（一）课程性质与作用“网页设计与制作”是高职电子商务专业的职业技能课，重点讲述网页设计与制作的基础知识、基本理论和基本技能，是一门包含了网页、网站的概念、网页主要工具软件dreamweaver中文版的使用以及网页制作的拓展内容（Flash、Firework）等诸多知识的操作性极强的技能型应用课程，是本专业的一门带有实践环节的专业基础课程，是电子商务专业学生的必修课程。
“网页设计与制作”是“电子商务网站规划与管理”和“动态网页设计与制作”等课程的前期基础课程。
通过对网页设计与制作基础知识和技能的学习,使学生系统了解网页、网站的概念、网页主要工具软件dreamweaver的使用等基础知识，熟练运用网页制作的工具软件，使学生具有网页、网站制作的知识与能力，具备应用电脑独立开发网页、网站并将网站上传并测试的技能，具备解决网页设计、网站开发中出现各种问题的能力。
本课程培养学生的职业素养和创新能力，为日后走向工作岗位打下理论与实践基础。
通过本课程的学习实现学生思想过硬、理论基础扎实、实际工作能力强的教学目标。
(二)课程基本理念本课程遵循职业性原则，以学生未来职业中可能用到的知识为中心，采用任务驱动的设计理念，以学生为主体，多元智力的学生观，突出课程的职业性，实践性和开放性，紧紧盯住产业需求，牢牢贴近一线服务，专业融入产业，规格服务岗位。
（三）课程设计思路主要指课程设计的总体思路：基于工作任务的结构模式，采取提出问题----介绍解决问题的方法----归纳总结，培养寻找答案的思维方法的模式。
以问题引导出相关原理和概念，在讲述实例的过程中融入，通过分析归纳，介绍解决工程实际问题的思想和方法，然后进行概括总结。
二、课程目标通过对网页设计与制作基础知识和技能的学习,使学生系统了解网页、网站的概念、网页主要工具软件dreamweaver的使用等基础知识，熟练运用网页制作的工具软件，使学生具有网页、网站制作的知识与能力，具备应用电脑独立开发网页、网站并将网站上传并测试的技能，具备解决网页设计、网站开发中出现各种问题的能力。
网页基本版式
4.中轴型
沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。
5.曲线型
图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。
6.倾斜型
页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。
2.满版型
页面以图像充满整版。主要以图像为诉求点，也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。随着宽带的普及，这种版式在网页设计中的运用越来越多。
3.分割型
把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成对比：有图片的部分感性而具活力，文案部分则理性而平静。可以调整图片和文案所占的面积，来调节对比的强弱。例如：如果图片所占比例过大，文案使用的字体过于纤细，字距、行距、段落的安排又很疏落，则造成视觉心理的不平衡，显得生硬。倘若通过文字或图片将分割线虚化处理，就会产生自然和谐的效果。
8.焦点型
焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。焦点型分三种情况。
（1）中心 以对比强烈的图片或文字置于页面的视觉中心。
（2）向心 视觉元素引导浏览者视线向页面中心聚拢，就形成了一个向心的版式。向心版式是集中的、稳定的，是一种传统的手法。
（3）离心 视觉元素引导浏览者视线向外辐射，则形成一个离心的网页版式。离心版式是外向的、页面给人稳定、严谨、庄重、理性的感受。
对称分为绝对对称和相对对称。一般采用相对对称的手法，以避免呆板。左右对称的页面版式比较常见。
四角型也是对称型的一种，是在页面四角安排相应的视觉元素。四个角是页面的边界点，重要性不可低估。在四个角安排的任何内容都能产生安定感。控制好页面的四个角，也就控制了页面的空间。越是凌乱的页面，越要注意对四个角的控制。
第2章 网页版设设计与色彩搭配[101页]
![第2章 网页版设设计与色彩搭配[101页]](https://img.taocdn.com/s3/m/ce6257985fbfc77da269b1e9.png)
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 版式设计概述 网页的版式设计，是指在有限的屏幕空间内，根据
网页主题诉求，将网页元素按照一定的艺术规律进行 组织和布局，使其形成整体视觉印象，最终达到有效 传达信息的视觉设计。它以有效传达信息为目标，利 用视觉艺术规律，将网页的文字、图像、动画、音频 、视频等元素组织起来，充分体现了网页整体风格。
网页教案(div布局)
网页教案(div布局)第一章：HTML基础1.1 教学目标了解HTML的基本概念和作用掌握HTML的基本语法和常用标签1.2 教学内容HTML简介：HTML的概念、作用和发展历程HTML基本语法：标签、属性、注释等常用HTML标签：、段落、图片、、列表等1.3 教学步骤讲解HTML的基本概念和作用演示HTML的基本语法和常用标签让学生通过实例练习编写简单的HTML页面1.4 课后作业编写一个简单的HTML页面，包括、段落、图片和第二章：CSS基础2.1 教学目标了解CSS的基本概念和作用掌握CSS的基本语法和常用选择器2.2 教学内容CSS简介：CSS的概念、作用和发展历程CSS基本语法：选择器、属性、注释等常用CSS选择器：标签选择器、类选择器、ID选择器等2.3 教学步骤讲解CSS的基本概念和作用演示CSS的基本语法和常用选择器让学生通过实例练习编写简单的CSS样式2.4 课后作业编写一个简单的CSS样式，设置一个HTML页面的背景颜色、字体大小和颜色第三章：DIV布局基础3.1 教学目标了解DIV布局的基本概念和作用掌握DIV布局的基本方法和技巧3.2 教学内容DIV布局简介：DIV的概念、作用和应用场景盒模型：盒子模型概念、宽高设置、内外边距等浮动布局：浮动的概念、原理和应用定位布局：定位的概念、原理和应用3.3 教学步骤讲解DIV布局的基本概念和作用演示盒模型、浮动布局和定位布局的方法和技巧让学生通过实例练习编写一个简单的DIV布局页面3.4 课后作业编写一个简单的DIV布局页面，包括头部、主体和尾部三个部分第四章：响应式布局4.1 教学目标了解响应式布局的基本概念和作用掌握响应式布局的实现方法和技巧4.2 教学内容响应式布局简介：响应式布局的概念、作用和应用场景媒体查询：媒体查询的概念、语法和使用方法弹性布局：弹性布局的概念、原理和应用网格布局：网格布局的概念、原理和应用4.3 教学步骤讲解响应式布局的基本概念和作用演示媒体查询、弹性布局和网格布局的方法和技巧让学生通过实例练习编写一个简单的响应式布局页面4.4 课后作业编写一个简单的响应式布局页面，包括不同屏幕尺寸下的布局调整。
网页设计教学教案
网页设计教学教案第一章：网页设计概述1.1教学目标让学生了解网页设计的概念和重要性让学生掌握网页设计的基本原则和流程1.2教学内容网页设计的定义和作用网页设计的基本原则（如用户体验、界面设计、内容组织等）网页设计的流程（如需求分析、设计稿制作、编码实现等）1.3教学方法讲授法：讲解网页设计的概念和原则案例分析法：分析优秀网页设计案例，让学生了解设计要点实践操作法：让学生动手制作简单的网页设计稿1.4教学评估课堂问答：检查学生对网页设计概念和原则的理解案例分析报告：评估学生对优秀网页设计案例的分析能力网页设计稿：检查学生的实际操作能力第二章：网页界面设计2.1教学目标让学生掌握网页界面设计的基本原则和方法让学生了解网页界面设计的常见元素和布局方式2.2教学内容网页界面设计的基本原则（如清晰性、一致性、美观性等）网页界面设计的常见元素（如文字、图片、按钮等）网页界面设计的布局方武（如网格布局、分区布局等）2.3教学方法讲授法：讲解网页界面设计的原则和常见元素案例分析法：分析优秀网页界面设计案例，让学生了解设计要点实践操作法：让学生动手制作网页界面设计稿2.4教学评估课堂问答：检查学生对网页界面设计原则和常见元素的理解案例分析报告：评估学生对优秀网页界面设计案例的分析能力网页界面设计稿：检查学生的实际操作能力第三章：网页布局与排版3.1教学目标让学生掌握网页布局和排版的基本原则和方法让学生了解网页布局和排版的常见技术和工具3.2教学内容网页布局和排版的基本原则（如清晰性、一致性、美观性等）网页布局和排版的常见技术（如HTML、CSS等）网页布局和排版的工具（如网页编辑器、设计软件等）3.3教学方法讲授法：讲解网页布局和排版的原则和技术案例分析法：分析优秀网页布局和排版案例，让学生了解设计要点实践操作法：让学生动手制作网页布局和排版设计稿3.4教学评估课堂问答：检查学生对网页布局和排版原则和技术的理解案例分析报告：评估学生对优秀网页布局和排版案例的分析能力网页布局和排版设计稿：检查学生的实际操作能力第四章：网页色彩与字体设计4.1教学目标让学生掌握网页色彩和字体设计的基本原则和方法让学生了解网页色彩和字体设计的常见技巧和搭配规律4.2教学内容网页色彩设计的基本原则（如对比度、饱和度、色调等）网页字体设计的基本原则（如易读性、一致性、美观性等）网页色彩和字体的常见搭配规律和技巧4.3教学方法讲授法：讲解网页色彩和字体设计的原则和方法案例分析法：分析优秀网页色彩和字体设计案例，让学生了解设计要点实践操作法：让学生动手实践，进行网页色彩和字体设计4.4教学评估课堂问答：检查学生对网页色彩和字体设计原则和方法的理解案例分析报告：评估学生对优秀网页色彩和字体设计案例的分析能力网页色彩和字体设计稿：检查学生的实际操作能力第五章：网页交互设计让学生了解网页交互设计的基本概念和重要性让学生掌握网页交互设计的常见技术和方法5.2教学内容网页交互设计的定义和作用网页交互设计的常见技术（如Jav a Sc r ipt.jQuery等）网页交互设计的常见方法（如按钮、滑动门、下拉菜单等）5.3教学方法讲授法：讲解网页交互设计的概念和技术案例分析法：分析优秀网页交互设计案例，让学生了解设计要点实践操作法：让学生动手实践，进行网页交互设计5.4教学评估课堂问答：检查学生对网页交互设计概念和技术的理解案例第六章：网页素材的使用6.1教学目标让学生了解网页素材的种类和作用让学生掌握网页素材的使用方法和技巧6.2教学内容网页素材的种类（如图片、音频、视频等）网页素材的作用和选择原则网页素材的使用方法和技巧（如插入、优化、压缩等）讲授法：讲解网页素材的种类和作用案例分析法：分析优秀网页素材使用案例，让学生了解设计要点实践操作法：让学生动手实践，使用网页素材6.4教学评估课堂问答：检查学生对网页素材种类和作用的理解案例分析报告：评估学生对优秀网页素材使用案例的分析能力网页设计稿：检查学生的实际操作能力第七章：网页代码基础7.1教学目标让学生了解网页代码的种类和作用让学生掌握网页代码的基本编写方法和技巧7.2教学内容网页代码的种类（如HTML、CSS、Jav a Sc r ipt等）网页代码的作用和编写原则网页代码的基本编写方法和技巧7.3教学方法讲授法：讲解网页代码的种类和作用案例分析法：分析优秀网页代码编写案例，让学生了解设计要点实践操作法：让学生动手实践，编写网页代码7.4教学评估课堂问答：检查学生对网页代码种类和作用的理解案例分析报告：评估学生对优秀网页代码编写案例的分析能力网页设计稿：检查学生的实际操作能力第八章：网页兼容性与优化8.1教学目标让学生了解网页兼容性和优化的概念和重要性让学生掌握网页兼容性和优化的方法和技巧8.2教学内容网页兼容性的概念和原因网页优化的概念和方法网页兼容性和优化的方法和技巧（如代码优化、图片优化等）8.3教学方法讲授法：讲解网页兼容性和优化的概念和方法案例分析法：分析优秀网页兼容性和优化案例，让学生了解设计要点实践操作法：让学生动手实践，进行网页兼容性和优化8.4教学评估课堂问答：检查学生对网页兼容性和优化概念和方法的理解案例分析报告：评估学生对优秀网页兼容性和优化案例的分析能力网页设计稿：检查学生的实际操作能力第九章：网页设计案例分析9.1教学目标让学生了解网页设计案例的分析方法和流程让学生掌握分析优秀网页设计案例的技巧和要点9.2教学内容网页设计案例分析的方法和流程分析优秀网页设计案例的技巧和要点网页设计案例的评析和总结9.3教学方法讲授法：讲解网页设计案例分析的方法和流程案例分析法：分析优秀网页设计案例，让学生了解设计要点实践操作法：让学生动手实践，进行网页设计案例分析9.4教学评估课堂问答：检查学生对网页设计案例分析方法和流程的理解案例分析报告：评估学生对优秀网页设计案例分析的技巧和要点的掌握情况网页设计稿：检查学生的实际操作能力第十章：网页设计项目实践10.1教学目标让学生了解网页设计项目的流程和规范让学生掌握完成网页设计项目的方法和技巧10.2教学内容网页设计项目的流程和规范完成网页设计项目的方法和技巧网页设计项目的评析和总结10.3教学方法讲授法：讲解网页设计项目的流程和规范案例分析法：分析优秀网页设计项目，让学生了解设计要点实践操作法：让学生动手实践，完成网页设计项目10.4教学评估课堂问答：检查学生对网页设计项目流程和规范的理解案例分析报告：评估学生对优秀网页设计项目分析的技巧和要点的掌握情况网页设计稿：检查学生的实际操作能力重点和难点解析1.网页设计概述2.网页界面设计补充和说明：介绍如何使用设计原则（如对齐、对比、重复和亲密性）来创建直观且吸引人的界面。
(完整版)课件-《版式设计》
文艺复兴时期版式
24
第一章
4. 工业革命时期的版式设计 一大批具有改革精神的艺术家在原有的维多利亚精致、浪漫、复杂的设计风格
上发展了在平面中讲究编排、强调版面装饰性的工艺美术运动设计风格，版面用各 种几何图形插入并分割，其中文字和曲线花纹结合在一起，形成优美而富有浪漫情 调的图文装饰，对称的结构形成了严谨、朴素、庄严的风格。其优点是设计方法和 设计方案很精美，缺点是过于烦琐。
32
第一章
招贴画的画面不拘一格， 似乎有点过于随意，但仔细分 析会发现其构图合理，生动的 手文字和涂鸦画法能够传达给 读者轻松、生活化的感受。
个性化版式设计
33
第一章
第三节 现代版式设计的特点
二、商业化
随着市场经济的发展，有很多商家认识到版式设计在产品宣传、销售中的 重要作用，愿意为设计埋单，设计服务商家市场需要便成了硬道理。产品广 告的画面以促销为目的，要求在众多同类广告中脱颖而出，吸引浏览者眼球并 快速传递产品优质特性和促进销售的其他积极的信息。
➢ 时尚化原则的运用特别体现在各都市类报纸的副刊上，如时尚生活类、服饰 美容类、饮食健康类、旅游娱乐类等较为轻松休闲的专刊。
➢ 这类专刊在版式设计上大多采用简短的文章块，大量精美、生动的图片，适 度的留白，简洁的版式结构。时尚类杂志的排版风格让读者在图文并茂、清 新悦目、轻松舒适的状态下享受并接受版面所要传达的信息内容。
36
➢ 以适量的图片、图表还原信息用图片 讲故事，以图表解说信息，让读者轻 松、形象地获得信息；
➢ 版面以厚题薄文、长题短文、适留白、 色彩清淡等现代设计方式方便读者检 索，给读者提供明快、清新的视觉空 间，读者在轻松的环境下完成阅读。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第二节网页的版式设计在网页设计中根据特定的主题和内容，把文字、图形图像、动画、视频、色彩等信息传达要素界定在一个范围内，有机的、秩序的、艺术性的组织在一起，形成美观的页面并不是容易的事。
由于多数专业的计算机技术人员缺乏艺术设计的能力，致使许多网页一直都是按固定的格式来完成，只是在文字内容上有所变化，所以使很多网页看起来千篇一律，缺乏个性。
为了让网页更具艺术魅力，必须加强制作人员的艺术素养，将艺术与技术有机的结合起来，使网络呈现更绚丽的色彩。
网页的版面设计应从造型、视觉心理及版式构成几方面入手。
一、版式设计的造型在版式空间中标题、内容、主体图形、色调、视觉中心、背景和留白都是造型的最基本元素，将这些基本元素在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．使版面保持固定尺寸，禁止滚动出现，增强对版面的控制，这样的方案非常适用于设计性较强的图形界面。
通常网页中还会有一些动态的信息，不仅活跃了画面气氛，还可通过不同内容的替换，增大信息量，不过动画效果的运用要合理，千万不能泛滥，造成喧宾夺主的效果，而且动画的形式与内容要与网页主题相适应，政治与教育等内容比较严肃的网页在动画应用上更是要慎重。
二、页面中的点、线、面及留白的处理版面设计中，文字、图形图像根据其在画面中的大小、方向、排列可以视为点、线、面等构成要素，同时文字又有标题和正文之分；图片也有主次之分，所以在网页设计时都要加以考虑。
图片与文字，还有动画这些信息都需要同时展示给观众，不加设计的简单地罗列在一个页面上，往往会使人感觉粗制滥造，使人不愿继续停留，所以必须要跟据主题内容的需要，将传递信息的图片和文字按照一定的次序和关系进行合理的编排和布局，使整个页面和谐统一，充满艺术性。
点、线、面、视觉中心、留白等元素所处位置不同，对观众的视觉和心理会产生的作用也不同。
当设计主体处于版面的几何中心时，给人的感觉是平衡、稳重，不过相对就会显得呆板、缺乏灵活性；如将设计主体向一侧稍作偏移，既可打破了原有的稳定与平衡，形成一个动向，画面因此而造成不稳定趋势，这时需要在适当的位置添加平衡元素，使画面在变化中求稳定。
下图是奥迪公司的一个宣传网页，页面将最为稳定的几何中心作为视觉中心，画面中的文字标题与按钮却安排在页面的偏左侧，冲破了画面的呆板构图，为取得平衡，右下角的奥迪标志起了重要的作用，同时还突出了页面的宣传重点。
图8.101．点的作用在空间中单一的点有集中醒目的特点，给人明确、坚定、充实的感觉。
所以可利用点的这一特性强调将要重点表现的对象。
可利用“点”符号，对文字信息加以强调，也可采用点状图形图像形式加以提示。
可口可乐宣传网页中坐下部分的三张小图片，在这个页面中实际上起着点的作用，以图片的形式强调后面的信息，如图。
2．线与面的作用线与面不仅能作为造型元素，同时还是划分空间的有力武器。
由线和面形成的对空间的分割与遮挡使空间的层次得以延伸，形成距离美感。
下面一张普通的图片经线、面分割后，形成了色调、面积等方面的对比关系，使画面的层次分明，突出了中心内容。
3．留白的运用在页面设计中往往点、线、面等实体造型元素是人们的重点注意的部分，实际上“留白”也是不容忽视的。
所谓“留白”，就是除文字、图片、图案等信息要素以外的空白空间。
“留白”与其它元素一样具有大小、形状等特征，它与其它元素的关系就是“图”与“地”的关系，是相互依存、相互衬托的。
在网页设计中，“无意”的留白应与“有意”的造型同样引起足够的重视，因为“无意”的留白空间有时给人的视觉冲击会高于其它的元素所带来的效果。
不过“留白”并不是越多越好，这要根据主题内容和整体风格而定，信息量大、内容更新快的网站一般空白较少，而专业的、艺术类的网站“留白”较常见。
下图是万宝路网站的页面，版面由文字、图片、色块与留白共同组成，此页面的留白空间较大，不仅有效的突出了文字及图片信息，同时还强化了空间的延续性。
? 这是一个设计展示类网站，版面的大面积的空白给人以无限的想象空间，文字及图形在空白的衬托下更显突出其设计主题。
下图是《PC》杂志的网页，提供了大量的软件、硬件及计算机新闻的信息，所以页面中的空白很少，动态图像、图片与文字是页面中的主要构成元素。
4．点、线、面关系的处理根据大小、方向等因素，文字与图片在一个页面中既可以是点，也可以是线，也可以是面。
孤立的、小的文字与图片，在页面中往往被视为页面中的点。
按一定方向、秩序排列的字与图片会形成视觉上的线，它的存在在界面中一般起到引导和分割的作用。
面多数是由文字或图片、图形形成的，有时也会是由小字块构成，起到突出主题和衬托的作用。
?三、版式设计的构成形式网页的界面版式设计与其它设计一样要遵循一定的规律和秩序，将各个构成要素以一定的规律和秩序加以系统化的组合，协调好各个要素之间的关系，使整个网页作品体现整体秩序的美感。
首先就是要抓住主线，然后再协调好各个层级关系，应注意各部分之间的逻辑结构，根据主体特征确定版面设计形式结构，做到既风格统一，又富于变化。
其构成形式主要有：分割与比例、重复与渐变、对称与均衡、节奏与韵律、统一与变化等。
1．分割与比例空间分割是设计中最常用的造型方法之一，它所解决的就是如何把文字、图形、图像巧妙的配置在限定的版面空间的问题，同时还要确保有主有次，相互关联。
设计主体一般会占据较大的、突出的空间，其他的辅助元素则会依附于它，围绕主体进行配置。
有时分割也会由色彩色调来进行划分，最引人注目的部分，很容易被视为主体。
如下图大背景是灰蓝色块，彩色图片部分的绚丽色彩自然成为人们视觉焦点，而且画面中的动与静的对比也将人的视线先引入中间地带，处理得较好的是它通过色调的变化融合了这种对比，使画面又趋于统一。
山旅野外探险俱乐部比例是指图形或整体形式的部分与整体、部分与部分之间的量的比率关系，是图形或形体变化的尺度。
均衡的比例能够给人以美感，在设计中常用这种具有数理概念的比率，创造出优美的作品，如：黄金分割比，数列比等。
1.黄金分割比亦称黄金律、黄金比例。
在一条线段上，按照最佳长短比例，将此线段分割为长段与短段，或按此最佳长短线段的比例构成一个矩形的最佳的长边与短边的比例，即构成黄金分割。
目前，我们经常使用或看到的明信片、邮票、国旗、名片的长宽比都与黄金分割比例非常接近。
利用黄金分割比例完成的构图通常具有秩序、明朗的特性，予人一种清新的感觉。
黄金分割比的画法绘制一个正的矩形ABCD，取其中一边的中点M为圆心，以MA长为半径画弧，交CD的延长线于点E, 以点E向BA的延长线做垂线交于点F，得矩形BCEF。
此时EF：FB=1：1.618?? a：b=1：1.618。
去掉正方形ABCD后，矩形ADEF依然是一个黄金矩形，ED：EF=1：1.618。
黄金分割比广泛应用于各类造型艺术中，在建筑、雕塑、工业设计等领域它一直是一个美的尺度。
金星女神维纳斯具体标准是以肚脐为界，向上到头顶的长度是整個身长的0.382倍；向下到脚心的长度是整个身长的0.618倍。
不止于此，髋宽与躯干长度之比；上肢长度与下肢长度之比；下肢长度与全身长度之比，均近似于0.618；还有：眼位于头发际至頦底的上、中三分之一交界处；鼻的下点位于头发际至頦底的上、中三分之一交界处，全都符合黄金分割，大量事实证明：古人今人凡是越接近于黄金分割，五官、体态就越优美。
雅典巴特农神庙是卫城最耀眼的一颗明珠，它的屋顶的高度与房梁的长度比率是1：1.618，也是遵循黄金分割比率的典范。
黄金分割比率是一个常数，等于5：3、8：5、13：8……，我们的生活中很多都呈现了这种比率关系，如：照片、电视屏幕、邮票、书籍开本等等。
在网页版式设计中，有时会将设计主体也放置在版面的构成中心，就是视觉中心，这个中心位置就是根据黄金分割比找出的四个点，这四点将画面分割为“九宫布局”，如下图所示。
这四点内的范围就是视觉刺激范围。
网页的主体被放置在视觉刺激点或此范围内任何位置，其辅助元素可放置在视觉中心或四点连线的附近，并注意保持一定的向心性。
下面两幅页面既是依据黄金分割比创作的主页。
?2．重复与渐变重复是指相同或相似的形态规律性的连续出现。
其实重复是构成中的最常见的一种形式，我们生活中熟悉的花朵、小昆虫，甚至人类都存在重复的表象。
一定的秩序的重复能够给人统一、节奏、连续、平稳等感觉，重复又分单纯重复和渐变两种。
单纯重复就是单一个体的反复出现，大的形状、大小、方向、颜色都不作改变，这种重复多被采用作背景图案或底纹。
渐变是在重复的基础上连续性的又有一些变化，有时是形状上的变化，有时是方向上的变化，或者是色彩的变化，这种变化与重复给人感觉整齐而多样。
3．对称与均衡对称分为绝对对称和相对对称，绝对对称是指以中心线或中心点为轴，作上下、左右、旋转等同等、同量的对称，这种形式能展现出严正、庄重、肃穆、沉静的特征。
我国的传统宫殿建筑就是对称式造型为主的，如故宫紫禁城，在对称的造型中有一种威严的宏伟气势。
相对对称是在对称的格局中存在部分形状或色彩等方面的微小变化，这种对称形式具有对称的稳定性，同时又富于变化。
相对对称的表现形式较多，如形状置换、方向颠倒、体量变化、位置交叠、动势变化等。
均衡既是平衡，它摆脱了对称式的中心线或中心点的控制，但是它始终存在重心。
版面的均衡并不是实际重量的均衡，而是根据版面构成元素的形量、大小、轻重、色彩、位置等视觉判断产生的平衡。
均衡感使设计版面更具和谐的生命力，它同时存在调和与力学的空间配置。
4．节奏与韵律节奏与韵律源自于音乐概念，“美丽属于韵律”，韵律被平面设计所吸收。