第十章网页版式设计的基本要素、特点与应用
项目任务六
项目实训：网页版式设计的基本练习。
项目形式：表现出不同类型版面中空间的平衡画面，组合成不同的形态而产生空间感。
项目目的：通过对不同类型的网页学习，增强对基本要素的组合能力。
项目时间：4课时
项目要求：针对不同类型的网页以适当的方法，进行组合、排列、分布。
得到空间的平衡效果；运用点、线、面、色彩、图案的分布进行创作，通过项目，学生可以体验到不同类型的网页设计的要求，提高审美水平。
网页艺术设计是是网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动。
一、网页艺术设计的内容
设计活动中包含着主观和客观两方面的因素，在确立了网页主题之后，首先要明确和熟悉设计的对象和构成的要素。网页艺术设计涉及的具体内容很多，可以概括为视听元素和版式设计两个方面。
1. 视听元素
这里所说的视听元素，主要包括：文本、背景、按钮、图标、图像、表格、颜色、导航工具、背景音乐、动态影像等。无论是文字、图形、动画，还是音频、视频，网页设计者所要考虑的是如何以感人的形式把它们放进页面这个“大画布”里。多媒体技术的运用大大丰富了网页艺术设计的表现力。
以上各视听元素大多数浏览器本身都可以显示或收听，无需任何外部程序或模块支持。比如，大部分浏览器都可以显示GIF、JPEG图形和GIF89a 动画。还有些多媒体文件（如MP3音乐）需要先下载到本地硬盘上，然后启动相应的外部程序来播放。另外，在浏览器使用插件（Plug-in）可以播放更多格式的多媒体文件。微软推出IE浏览器后，提供了基于OLE的ActiveX 技术，用来在网页中播放多媒体。目前ActiveX已经成为热门技术。另一种播放多媒体的技术是Java Applet它是用Java语言编写的应用于网页之中的小应用程序，相比于插件和ActiveX，Java Applet具有更大的灵活性和良好的跨平台能力，因此具有很好的发展前景。总之，技术的不断发展使多媒体元素在网页艺术设计中的综合运用越来越广泛，使浏览者可以享受到更加完美的视听效果。这些新技术的出现，也对网页的艺术设计提出了更高的要求。
2. 版式设计
网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处，它在网页的艺术设计中占据着重要的地位。所谓网页的版式设计，是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。
但网页的排版与书籍杂志的排版又有很多差异。印刷品都有固定的规格尺寸，网页则不然，它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且，网页的组织结构不像印刷品那样为线性组合，这给网页的版式设计带来了一定的难度。
二、网页艺术设计的原则
网页作为传播信息的一种载体，同其他出版物如报纸、杂志等在设计
上有许多共同之处，也要遵循一些设计的基本原则。但是，由于表现形式、运行方式和社会功能的不同，网页设计又有其自身的特殊规律。网页的艺术设计，是技术与艺术的结合，内容与形式的统一。它要求设计者必须掌握以下三个主要原则：
1. 主题鲜明
优秀的网页设计必然服务于网站的主题，就是说，什么样的网站，应该有什么样的设计。例如，设计类的个人站点与商业站点性质不同，目的也不同，所以评论的标准也不同。网页艺术设计与网站主题的关系应该是这样：首先，设计是为主题服务的；其次，设计是艺术和技术结合的产物，就是说，即要“美”，又要实现“功能”；最后，“美”和“功能”都是为了更好地表达主题。当然，有些情况下，“功能”即是“主题”，还有些情况下，“美”即是主题。例如，雅虎作为一个搜索引擎，首先要实现“搜索”的“功能”。它的主题即是它的“功能”。而一个个人网站，可以只体现作者的设计思想，或者仅仅以设计出“美”的网页为目的。它的主题只有一个，就是——美。
只注重主题思想的条理性而忽视网页构成元素空间关系的形式美组合，或者只重视网页形式上的条理而淡化主题思想的逻辑，都将削弱网页主题的最佳诉求效果，难以吸引浏览者的注意力，出现平庸的网页设计或使网页设计以失败而告终。
要使网页从形式上获得良好的诱导力，鲜明地突出诉求主题，具体可以通过对网页的空间层次、主从关系、视觉秩序及彼此间的逻辑性的把握运用来达到。
2. 形式与内容统一
一方面，网页设计所追求的形式美，必须适合主题的需要，这是网页
设计的前提。只讲花哨的表现形式以及过于强调“独特的设计风格”而脱离内容，或者只求内容而缺乏艺术的表现，网页设计都会变的空洞而无力。设计者只有将二者有机地统一起来，深入领会主题的精髓，再融合自己的思想感情，找到一个完美的表现形式，才能体现出网页设计独具的分量和特有的价值。
另一方面，要确保网页上的每一个元素都有存在的必要性，不要为了炫耀而使用冗余的技术。那样得到的效果可能会适得其反。只有通过认真设计和充分的考虑来实现全面的功能并体现美感才能实现形式与内容的统一。
据有关资料所做的保守估计，目前在网页数据传输平均以每秒1.5k的速度到达客户端。假设某个网页为了丰富其艺术性而追赶时髦地大量使用图像或其它多媒体元素等，虽然达到了其静态形式美的效果，却造成多达几十K甚至更大的网页数据，使浏览者必须等待很长时间才能看到“庐山真面目”，这样的网页就不是一个优秀的网页，因为它不符合网页传播信息的突出特性之一——快捷性，使网页内容不能很快地到达访问者，影响了访问效果和质量，损害了访问者的情趣和积极性，这种技术要素影响了传达信息的效果，因而不是形式与内容的完美统一。
网页具有多屏、分页、嵌套等特性，设计者可以对其进行形式上的适当变化以达到多变性处理效果，丰富整个网页的形式美。这就要求设计者在注意单个页面形式与内容统一的同时，更不能忽视同一主题下多个分页面组成的整体网页的形式与整体内容的统一。
因此，在网页设计中必须注意形式与内容的高度统一。
3. 强调整体
网页的结构形式是由各种视听要素组成的。在设计网页时，强调页面各组成部分的共性因素或者使部分共同含有某种形式特征，是求得整体的常
用方法。这主要从版式、色彩、风格等方面入手。例如：在版式上，将页面中各视觉要素作通盘考虑，以周密的组织和精确的定位来获得页面的秩序感，即使运用“散”的结构，也是经过深思熟虑之后的决定；一个站点通常只使用两到三种标准色，并注意色彩搭配的和谐；对于分屏的长页面，不可设计完第一页以后再考虑下一页。同样，整个网页内部的页面，都应统一规划，统一风格，让浏览者体会到设计者完整的设计思想。
从某种意义上讲，强调网页结构形式的视觉整体性必然会牺牲灵活的多变性，“物极必反”就是这个道理。因此，在强调网页整体性设计的同时必须注意：过于强调整体性可能会使网页呆板、沉闷，以致影响访问者的情趣和继续浏览的欲望。“整体”是“多变”基础上的整体。
三、网页艺术设计的特点
1. 交互性与持续性
网页不同于传统媒体之处，就在于信息的动态更新和即时交互性。即时的交互性是Web成为热点的主要原因，也是网页设计时必须考虑的问题。
传统媒体（如广播、电视节目、报刊杂志等）都以线性方式提供信息，即按照信息提供者的感觉、体验和事先确定的格式来传播。而在Web环境下，人们不再是一个传统媒体方式的被动接受者，而是以一个主动参与者的身份加入到信息的加工处理和发布之中。这种持续的交互，使网页艺术设计不像印刷品设计那样，发表之后就意味着设计的结束。网页设计人员必须根据网站各个阶段的经营目标，配合网站不同时期的经营策略，以及用户的反馈信息，经常地对网页进行调整和修改。例如，为了保持浏览者对网站的新鲜感，很多大型网站总是定期或不定期的进行改版，这就需要设计者在保持网站视觉形象一贯性的基础上，不断创作出新的网页设计作品。
2. 多维性
多维性源于超级链接，主要体现在网页设计中对导航的设计上。由于超级链接的出现，网页的组织结构更加丰富，浏览者可以在各种主题之间自由跳转，从而打破了以前人们接收信息的线性方式。例如，可将页面的组织结构分为序列结构、层次结构、网状结构、复合结构等。但页面之间的关系过于复杂，不仅使浏览者检索和查找信息增加了难度，也给设计者带来了更大的困难。为了让浏览者在网页上迅速找到所需的信息，设计者必须考虑快捷而完善的导航设计。
3. 多种媒体的综合性
目前网页中使用的多媒体视听元素主要有文字、图像、声音、视频等，随着网络带宽的增加、芯片处理速度的提高以及跨平台的多媒体文件格式的推广，必将促使设计者综合运用多种媒体元素来设计网页，以满足和丰富浏览者对网络信息传输质量提出的更高要求。目前国内网页已经出现了模拟三维的操作界面，在数据压缩技术的改进和流（Stream）技术的推动下，Internet网上出现实时的音频和视频服务，典型的有在线音乐、在线广播、网上电影、网上直播等。因此，多种媒体的综合运用是网页艺术设计的特点之一，是未来的发展方向。
4. 版式的不可控制性
网页版式设计与传统印刷版式设计有着极大的差异：
(1) 印刷品设计者可以指定使用的纸张和油墨，而网页设计者却不能要求
浏览者使用什么样的电脑或浏览器；
(2)网络正处于不断发展之中，不像印刷那样基本具备了成熟的印刷标准；
(3) 网页设计过程中有关Web的每一件事都可能随时发生变化。
这一切说明，网络应用尚处在发展之中，关于网络应用也很难在各个方面
都制订出统一的标准，这必然导致网页版式设计的不可控制性。其具体表现为：
(1) 网页页面会根据当前浏览器窗口大小自动格式化输出；
(2) 网页的浏览者可以控制网页页面在浏览器中的显示方式；
(3) 不同种类、版本的浏览器观察同一个网页页面，效果会有所不同；
(4) 用户的浏览器工作环境不同，显示效果也会有所不同。
把所有这些问题归结为一点，即网页设计者无法控制页面在用户端的最终显示效果，但这也正是网页设计的吸引人之处。
5. 技术与艺术结合的紧密性
例如，浏览者欣赏一段音乐或电影，以前必须先将这段音乐或电影下载回本地机器，然后使用相应的程序来播放，由于音频或视频文件都比较大，需要较长的下载时间。流（Stream）技术出现以后，网页设计者充分、巧妙地应用此技术，让浏览者在下载过程中就可以欣赏这段音乐或电影，实现了实时的网上视频直播服务和在线欣赏音乐服务，无疑增强了页面传播信息的表现力和感染力。
网络技术与艺术创意的紧密结合，使网页的艺术设计由平面设计扩展到立体设计，由纯粹的视觉艺术扩展到空间听觉艺术，网页效果不再近似于书籍或报刊杂志等印刷媒体，而更接近于电影或电视的观赏效果。技术发展促进了技术与艺术的紧密结合，把浏览者带入一个真正现实中的虚拟世界。
技术与艺术的紧密结合在网页艺术设计中体现得尤为突出。
实例解析1：网站LOGO设计案例分析
在网站设计中logo的设计是不可缺少的一个重要环节。logo是网站特色和内涵的集中体现,它作用于传递网站的定位和经营理念、同时便于人们识别。一个重点突出的商标内容元素，一张极具视觉冲击力的商标设计，
会直接影响到客户对网站的判断，特别是网站日后需要进行全球性推广，优秀的商标设计会吸引来更多的访问者。以下是对部分网站logo的解剖分析。
太维互联网应用顾问（https://www.doczj.com/doc/f314539463.html,）
在颜色方面采用了深红色和黑色两种颜色结合而成，中文字体采用厚重的
“方正
3-10
黑体简体、方正综艺简体”，给人一种专业、严肃、稳重的感觉，太（多）维（维度）顾名思义就是以多种角度去观察、分析、思考，挖掘出客户最核心的需求，从而提出和实现真正适合客户的解决方案；在诠释“观察、思考、分析”方面我采用的是寓意手法，通过“眼睛”突显寓意；另外英文网址eye(眼睛)fit(适合)和太维中文字并列排列,也同样是突显太维专业顾问定位.
欧华商贸网（https://www.doczj.com/doc/f314539463.html,）
其特点通过鲜明的颜色和桥梁式的线条传递，把"E-欧洲"和"C-中国"有机（通过线条和网络）联接，良好地突显出网站核心定位。通过大号字体和粗体英文字母，使浏览者迅速吸引，并明记网站网址和网站名称。网站突出国际网
址，更有利于国际宣传，在用色方面更是简洁、利落。蓝色（又称:商业色）代表欧洲，而“c”字则用了中国最
3-11
具有代表性的红。弧线从“e”横跨到“c”代表着中欧之间的桥梁，促进欧洲与中国之间的商务贸易。
中国现车交易网（https://www.doczj.com/doc/f314539463.html,）
3-12
此logo在设计时采用的是形象手法，形象手法就是采用与logo对象直接关联而具典型特征的形象。这种手法直接、明确、一目了然，易于迅速理解和记忆。最大的特点就是将网站的产品，形象化和“车”字融合为一体，有效传递网站定位和核心产品。在用色上对比鲜明，图形格外醒目鲜艳，能给人以很强的视觉冲击效果且保持视觉平衡、线条流畅，整体美观、大方。
动感一百手机网（https://www.doczj.com/doc/f314539463.html,）
3-13
动感一百手机网是华南区人气最旺的B2C手机网站，所以在设计上需要活波，具有人性化。在设计手法上直接运用了网站的产品卡通化来表现的，烘托出网站的灵气而又直观的体现了网站的类型。有待改善的是没有与网站名称相融入、体现出网站的动感炫酷。
全球五金网（https://www.doczj.com/doc/f314539463.html,）
3-14
此LOGO在设计时主要通过形体化的语言,表达深层的期望与意境，在颜色方面采用的是以桔黄色为主色调,突出五金金属特有的光质；金球象征公司或网站提
供全球五金商贸交流服务，三条线条环绕金球动态运行,象征不停运转的五金商贸信息交流,更加相符全球五金网的定位.
实例解析2：Add化妆品
3-15
Add是香港爱加国际有限公司旗下的一个化妆品品牌。企业现集美容产品的科研开发、生产、直营、加盟连锁销售、美容研究于一体，立足香港，辐射全中国，聚集优秀化妆品专家、天然原料供应公司、皮肤护理专家、医学美容专家之力，以强大的资
3-16
金为后盾，以科学有效的运营管理为保障，以细致入微的护肤研究为突破，以诚挚友善的服务为永真，凭借庞大而顶尖的财智军团、纯天然优质精华以及健康有效的美容护肤配方，专业塑就产业领军人物！
客户需求:
客户主要产品是DIY化妆品，网站必须要有比较强的亲和力。要求提升品牌形象，服务消费群体。
解决方案:
结合DIY化妆品的特点和企业形象，以绿色为主凋，突出其环保特点，整个网站充满活力。
在模块功能上，提供了公司介绍、产品展示、联系我们等模块。还提供了会员功能、在线皮肤测试和免费领取试用品功能。
并可在后台自动生成Google SiteMap，使Google能更全面地索引网站。
应用技术:
3-17 服务器端技术：ASP(VBScript)
3-18
客户端技术：XHTML 1.0 transitional, CSS 2.0, JavaScript
采用DIV + CSS遵循Web标准开发，通过W3C官方检验。
浏览器兼容性: IE6.0、IE7.0、Firefox2.0、Opera9.0、Netscape8.1 语言版本: 中文、英文
完成时间: 2008年1月29日
网址: https://www.doczj.com/doc/f314539463.html,
实例解析3：Orange Shop
Orange Shop是上海鸥臣化妆品有限公司下面的一个化妆品品牌，其绝对优良的品质、时尚的概念、显著的功效和完善的服务得到了消费者的信赖。目前orange shop已经拥有了近三十家的DIY美容连锁店，在不断成长的过程中也让加盟商取得显著的经济效益。
客户需求:
客户要求突现Orange Shop形象特色，突出化妆品属性，个性、美观、大方，并且有较高的信任感。
解决方案:
结合Orange Shop特色，以橙色为主题，形象活泼大方，并开设有在线商城和会员服务，可实现在线销售和用户管理。
应用技术:
服务器端技术：ASP(VBScript)
客户端技术：XHTML 1.0 transitional, CSS 2.0, JavaScript 浏览器兼容性: IE6.0、IE7.0、Firefox2.0、Opera9.0、Netscape8.1 语言版本: 中文
完成时间: 2007年7月25日
网址: https://www.doczj.com/doc/f314539463.html,
第一讲网页设计概述 使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。 【教学内容】 讲解网页设计的相关术语及网站制作的基本流程。 【教学重点】 网页设计中的若干术语。 【教学难点】 理解网页设计中的若干术语。 【教学方式】 讲授式、讨论式、案例分析式。 【教学参考】 1、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社。 2、《Internet 网页工场》Wittime工作室重庆出版社。 3、《WEB网站设计》Joel Sklar著高等教育出版社。 4、《HTML网页制作教程》材义语编著铁道出版社。 【新课内容】 1.1 WWW和URL 1.1.1 Web的起源 Web是World Wide Web的简称，一般也称之为WWW或3W 1.1.2 Web的特点和结构 Web最大的特点是使用了超文本（Hypertext） WWW采用C/S（客户机/服务器）工作模式 在浏览器和服务器之间应用HTTP（Hyper Text Transfer Protocol，超文本传输协议）作为网络应用层通信协议 1.1.3 URL URL的完整格式 协议://主机名或IP地址：端口号/路径名/文件名
1.2 IE5的使用 Web浏览器是浏览Internet资源的客户端软件 在Windows环境下使用的浏览器主要有Internet Explorer、Netscape Navigator、Mosaic等 1.2.1 IE5的界面 1.2.2 IE5的使用 1.3 网页中所使用的技术 1.3.1 HTML语言和XML语言 1、HTML语言 ?HTML只使用SGML中很小一部分标记 ?HTML语言（Hyper Text Markup Language 超文本标记语言） ?HTML是纯文本的语言，其源代码可以用各种文本编辑工具进行编辑，常用的网页制作软件如FrontPage、Dreamweaver等实际上是自动生成HTML源代码的工具 2、XML语言 XML（eXtensible Markup Language） 1.3.2 动态网页 1.3.3 多媒体技术的应用 1.3.4 Web服务器端程序 1.4 制作网页的基本方法 1.4.1 制作网页的基本步骤 1、确定网页的内容 2、设计网页的组织结构 3、资料的收集与整理 4、选择网页的设计方法 1.4.2 制作网页时要注意的问题 1、网页的标题要简洁，明确。 2、在文本中要使用水平线，以分割不同部分。 3、对重点段落要强调显示。 4、网页中插入的图片要尽量的小。
13种典型网页版式设计介绍 一、骨骼型 骨骼型是一种规范的理性的分割方法。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。一般以竖向分栏为多。在图片和文字的编排上则严格按照骨骼比例进行编排配置，给人以严谨、和谐、理性的美。骨骼经过相互混合后的版式，既理性、条理，又活泼而具弹性。二、满版型 版面以图象充满整版，主要以图象为诉求，视觉传达直观而强烈。文字的配置压置在上下、左右或中部的图象上。满版型给人以大方、舒展的感觉，是商品广告常用的形式。 三、上下分割型 把整个版面分为上下两个部分，在上半部或下半部配置图片，另一部分则配置文案。配置有图片的部分感性而有活力，而文案部分则理性而静止。上下部分配置的图片可以是一幅或多幅。 四、左右分割型 把整个版面分割为左右两个部分，分别在左或右配置文案。当左右两部分形成强弱对比时，则造成视觉心理的不平衡。这仅仅是视觉习惯上的问题，也自然不如上下分割的视觉流程自然。不过，倘若将分割线虚化处理，或用文字进行
左右重复或穿插。 左右图文则变得自然和谐。 五、中轴型 将图形做水平或垂直方向的排列，文案以上下或左右配置。水平排列的版面给人稳定、安静、和平与含蓄之感。垂直排列的版面给人强烈的动感。 六、曲线型 图片或文字在版面结构上作曲线的编排构成，产生节奏和韵律。 七、倾斜型 版面主体形象或多幅图版做倾斜编排，造成版面强烈的动感和不稳定因素，引人注目。 八、对称型 对称的版式给人稳定、庄重理性的感觉。对称有绝对对称和相对对称。一般多采用相对对称。以避免过于严谨。对称一般以左右对称居多。 九、中心型 重心有三种楷念。1、直接以独立而轮廓分明的形象占据版 面中心。2、向心：视觉元素向版面中心聚拢的运动。3、离心：犹如将石子投入水中，产生一圈圈向外扩散的弧线运动。重心型版式产生视觉焦点，使强烈而突出。
《版式设计》课程标准课程编号：052045 使用专业：电脑艺术设计专业 课程类别：职业拓展领域 修课方式：必修 教学时数：44学时 教研室：电脑艺术设计工作室 编写日期：2012年5月 一、课程定位和课程设计 （一）课程性质与作用 课程的性质： 本课程注重设计前沿理论的研究和开发，是对学生艺术潜质、思维方式、创造能力等综合素质的全面开发和培养，帮助学生掌握科学的思维方法、搭建完备的设计理念构架、构建合理的设计知识体系，自觉地运用版式设计原理进行艺术设计。同时，本课程能有效地激发学生们的设计潜能，在艺术设计学习的过程中，不断地调整自己，从认识自我到超越自我，成为时代需求的艺术设计人才。本课程将积极组织并参与设计实践以及各种设计、创意大赛，使理论与实践结合，通过严格的基础训练和设计实践，使学生建立和掌握版式设计的概念和方法，并自如运用于艺术设计活动的各个领域。 课程的作用： 其前期必修课程是平面构成、色彩构成。与前续课程的联系（1）《手绘》
培养学生具备一定的手绘能力、观察能力和审美能力。（2）《PhotoShop应用》培养学生具备一定的位图图形制作与处理的能力。（3）《Coreldraw应用》培养学生具备一定的矢量图形制作与处理的能力。（4）《标志与广告设计》培养学生具备一定的标志与广告设计的理念。为后续《书籍装帧设计》课程打下良好基础。 (二)课程基本理念 版式设计课程的教学目的是把版面上所需要的设计元素进行必要的编排组合，成为直观动人、简明易读、主次分明、概念清楚的美的构成，使其在传达信息的同时，也传达着设计者的艺术追求与文化理念；从而通过版式设计，给阅读者提供一个优美的阅读“空间”。何谓版式设计？版式设计又称编排设计，是平面设计中的一个组成部分，为视觉传达设计的重要环节。版式设计当然要调动各类视觉元素进行形式上的组合排列，但更重要的是：版式上新颖的创意和个性化的表现。同时能够强化形式和内容的互动关系，以期全新的视觉效果。版式设计的创意不完全等同于平面设计中作品主题思想的创意，既相对独立，又必须服务于其主题思想创意。 （三）课程设计思路 本课程的教学内容是以版式设计训练为向导，以典型版面构成方法为基点，综合理论知识，操作技能和职业素养为一体的思路设计。通过完成各种学习情境的学习，学生不但能够掌握版面构成的方法以及与色彩、文字、图形重组的专业知识和审美能力，还能够全面培养其团队协作、沟通表达、工作责任心、职业道德与规范等综合素质，使学生通过学习的过程掌握工作岗位所需要的各项
https://www.doczj.com/doc/f314539463.html, 网页设计中四个页面布局要点网站排版布局是整个网站页面的核心，网页的基本结构千变万化，布局也不必拘泥于固定的格式，设计师根据实际情况变化即可。不过，关于网页设计的四种布局要点还是需要知道的。 一、无边界 无边界的布局模式，只是画出了一个大致的框架图，也许你只是想说这只是框架，因为设计规划前期很多素材还并不完善。一段文字和一张图片，甚至一个图标，在你进行布局的时候，由于素材并不是立刻手到擒来，因此布局总是喜欢用一个个矩形来代表一段文字或一张图片，这本没有错，但这个做法也会让人陷入“框架陷阱”。 二、基于模块或网络 有些排版方式是建立在模块化或类似网格的结构上的，在这些设计中，每个模块都力图根据屏幕尺寸伸缩调整。实际上这并不是什么新的方式，不过响应式网页设计让它变得更加有用，它暗示了一种自适应布局模式，可以像搭积木一样，由各种模块组件创建而成。 三、垂直分割
https://www.doczj.com/doc/f314539463.html, 垂直分割式的布局在上一篇文章中我们也有提到过，使用垂直分割布局，原因有两个。有时候在一套设计中，的确存在两个同等重要的主体元素。网页设计的通常方法，是按照重要性给内容排序。然后重要性会体现在设计的层次和结构上。但是假如你就是要推广两样东西呢？这种方式，可以让你突出两者，并让用户迅速在其中做出选择。第二是要表现出重要的两面性。 四、几何图形 网页设计布局几乎都是由几何构成的，三角形、圆形、矩形等等，都经常被使用。加之显示屏本身就是矩形，因此在布局时最常用到的也是矩形。 在实际的网页设计过程中一定是花样百出的，绝不可能用一两种布局模式就轻松完成，多思考多改变，总不会出错。但不管如何变化设计方式，最终还是要围绕着“美观”与“用户”进行的。
2.1 点线面 版面设计中的具象要素是文字图形图片等，抽象要素则为点线面，无论版面上的内容与形式多么复杂，最终都可以归纳到点线面上来，更注重精神与情感。在版面中，一个字母一块极小的图形可以理解为点，一行字和一条带状的图形可以理解为线。一组子一块空白或者一幅图可以理解为面。点线面在不同运动轨迹的引导下会产生不同的节奏和韵律，动与静刚与柔虚与实的感觉通常来自点线面的方向位置空间的相互作
用以及排列组织。通过点先面得分散和集中，拉开了版面的空间层次，形成了叙事强弱之韵律。高明的设计师善于在版面中造就一条潜在的运动轨迹，讲零散的点先面编制与充满韵律的运动之中，以美得旋律一道读者的视线，使所要表达的思想信息能够及其巧妙轻松自如地传达给读者。 版面设计中，无论是抽象形还是具象形，不论以何种形式出现，并等间隔排列时会使人感到一种严谨规律秩序之美，而点在自由排列时给人的感觉是轻松活泼，且具有抒情性。点的不同形态往往能引起观看的不同联想。单个点，多个点以及电的群花能给人带来视觉引导效果。点的形状及组合形式多种多样，但无论何种形态和形式的点，其运用首先从版面全局入手，在同一的前提下寻找变化的形式，并利用聚散大小层次转换变位明暗等形式丰富其视觉效果。 在版面设计中，线与点面相比，线是更活跃更富有个性和已与变化的元素。线有极大地灵活性，它可以任意变换方向形态，既可以严谨形态出现，也可以赋予形态的抒情性和强烈的动感。由于线的长度方向取之起伏疏密赋予了线不同性格，从而呈现出不同的视觉效果和速度舒展飘逸等。加之线的不同组织会产生不同的节奏韵律以及空间层次，先表现力极为丰富，能够诱导出无限潜藏的版面形态。 面在版面设计中常常占有着重要的位置，应用十分广泛，视觉效果最为显著。任何点线的排列及扩展最终必然一
专题页设计技巧浅析 https://www.doczj.com/doc/f314539463.html,以下面的这个奥运专题为例为大家分析专题设计中常遇到的一些问题。
这个页面存在的问题很多，我们来一个个分析。 第一个问题首屏高度 分析一下常见分辨率及浏览器下高度数据： 在window XP常见分辨率1024×768下我们除掉任务栏，浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是584。Win7下是574。在window XP常见分辨率1440×900下我们除掉任务栏，浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是716。Win7下是706。综合上面表中个分辨率及浏览器下的统计数据，我们很容易画出两条首屏线，分别是580PX和710PX，对应不同的分辨率。再来看下不同分辨率用户的占比情况： 通过对大于30W台客户端用户进行测试，得到的测试数据如下：首屏高度低于等于580 的有116786 个
人，占44.64%； 首屏高度低于等于720 的有216227 个人，占82.64%； 首屏高度低于等于800 的有241420 个人，占92.27%； 首屏高度低于等于900 的有259174 个人，占99.06%； 即当首屏高度大于580时有44.64的人看不到；大于720时有82.64%的人看不到； 大于800时有92.27%的人看不到。 我们将这个数据转化成3条线直观的显示在专题页面上： 总结起来就是注意首屏高度。 建议将最主要的信息显示在580PX高度范围内让用户打开网页第一屏就可以直接看到不用向下滚动。
第二个问题：标题够显眼么？ 检验一个专题头图标题是否够显眼其中的一个方法就是将网页去色，站在远处看看标题是否还看得清。我们有这个方法来检验一下这个专题： 是不是就可以看出头图文字跟背景混在一起不够清晰。
版式设计，也称为（）。版式编排 版面设计理论的形成，源自 （20）世纪的xx。 19世纪中叶，英国设计师、色彩专家欧文琼斯写成《》艺术，该书通过大量有关美的设计原理、方法和实打印输出的色彩模式为C\M\Y\K,字母"C"代表的是什么?（） D、青色打印输出的色彩模式为C\M\Y\K,字母"K"代表的是什么?（） D、黑色打印输出的色彩模式为C\M\Y\K,字母"Y"代表的是什么?（） B、柠黄例，成为19实际设计师的一本“圣经”。、装饰法则 工业美术运动的时间大约( )年。、1880~1910 工艺美术运动的领袖人物是英国艺术家、诗人（）。威廉.莫里斯 在xx“风格派”的代表人物是（）。 D、杜斯博格)黄色在（）纸上的易见度最低。 D、黑色 （）是降相同或相异的视觉元素作强弱对照编排所运用的形式手法。 B、对比属于名片造型构成要素的是（）。 D、标志 名片标准尺寸： ( )mm。 C、90mm*54mm 平面设计基础元素中不包括以下哪种（）
B、版式。 平面设计这一专业术语是（）年代出现的。 B、20世纪20年代 （）年，xx创立了xx设计学院。 D、19年)1900年在敦煌千佛洞中发现了一卷刻本《金刚波罗蜜经》，是有什么印刷技术？（） A、雕版印刷) 书籍里说的脸是指？（）.Ａ．封面 以文字为主进行图形创造时，要注意那个方面？（） Ｄ．以上答案都正确 那种色彩搭配，能形成你中有我，我中有你的视觉效果？（）Ａ．对比色 封面中的三大构成要素，一是图形，二是色彩，三是？（）Ｃ．文字 我国现在发现最早的文字叫什么?（） C、甲骨文 活字印刷术的发明人是?（） B、毕昇 一般印刷的尺寸要超出页面的实际尺寸,在裁切时要切掉一部分,我们称之为（） C、出血印刷中一般出血为多少毫米?（）、 C、3页面空间的主体内容称之什么?（） D、版心显示器输出的色彩模式为?（）
旅游网页设计六大要素 随着互联网的兴起，各种传统行业分分加入了互联网，包括咱们的旅游行业，下面“思途CMS”为大家总结、梳理了一份关于旅游网页设计的六大核心要素，掌握之后，能够让旅游网页设计更加简单！ 1.网页的主题 每一个页面都有一个核心的主题，首先分析确认这个页面的核心主题是什么，根据核心主题分析当前页面需要的内容，哪些内容是可以支撑这个页面的出题的，板块出来之后，核心内容放哪一块，其他的辅助内容又该放在哪儿？如何去衬托核心的内容，这些都是需要站在用户浏览者的角度去思考。必要时可以先画一个草图。 2、网页的色彩设计 网页的色彩设计可以根据行业及页面主题进行选择，比如旅游行业，那么大部分都是小清新类型，不凡有部分旅游企业是做红色旅游或者其他主题旅游的。所以在选择色调上面一定要围绕着自己的页面主题进行设计。
3、网页的字体设计 网页的字体设计需要考虑到用户的浏览习惯，用户的浏览习惯一般是从左上方浏览至右下方，需要着重考虑页面的核心内容及广告位上面的字体设计。例如，有些网站为了凸显广告，将核心的字体内容进行了特别的设计。 4、搜索相关资料 网站的骨架搭建起来以后，就需要进行内容的搜集各整理了。将内容添加到自己设计的页面当中，看看页面中是否还有不协调的地方没有。
5、进入实际操作附阶段 在规划出网页的版面和呈现方式后，就要进入实质性的工作了，即用各种软件，如文字编辑、图象处理、动画制作、音乐处理等来进行实际操作，最后通过网页设计软件将这些文字、图象、动画组合到页面中。 6、检查网站内容 当一切工作都已经完成后，在发布网页之前还要检查页面上的超链是否正确，图片是否正常显示，文字中是否有错别字等，以保证呈现给访问者一个完美的网页。
版式设计的四个基本原则 版式设计起源于古代城市规划，发展至今，形式与内容都发生了很大变化。 现代版式设计的目的是什么？简单来说，就是传达信息。使混乱的内容呈现一定秩序，从而流畅的传达给目标受众。 从版式设计要素上讲，版式设计存在四个基本原则，分别是：简单易读的文字;直观醒目的图片;工整美观的排版;清晰明了的配色。以下分别来说。 简单易读的文字：在文字慢慢成熟的过程中，首先追求的是书写的方便。反复使用的东西，被反复的简化和整理，并最终形成固定的形式，就是对再现的追求。下一步就开始对易读性的追求。经过这两个阶段，就形成了现代文字的形式。但是，文字在其自身所处时代中也会发生形式上的变化，因为文字始终是鲜活的。在书写机会逐渐减少的现代社会，对文字的基本要求是易读，所谓易读，就是指文字的可读性很强，这不仅与文字的形体有关，而且也与文字的大小、字距、行距等要素密切相关。 版式设计诸要素中，文字的主要作用是用来传达具体的信息，其基本要求是：简单、易读。 具体处理原则有以下几点： 1：字体、字号、字距和行距 汉字字体繁多，不同的字体具有不同的性格，适用于不同的场所。一般来说，笔画粗细一致的黑体，辨识度会更高一些。此外，过度装饰的文字，不利于快速准确的阅读。字号大小没有统一规定，视使用环境而定，很显然，户外广告的字号应该比宣传彩页的更大一些。另外，如果文字过小，影响到读者的阅读，就肯定不行了。至于字距和行距，也是视具体情况而定，但两者之间，存在一定的比例关系，通常来讲，行距需要大于3倍字距，否则，阅读过程中，读者的视线有可能会转移到旁边的内容上，造成干扰。 2：控制每行或者每列的字数。 依据相关机构所做人机工程学研究成果，在文字横排的情况下，每行不宜超过26个字，如果超过，读者就可能忘记开头的字，换行就是基于这种考虑而采取的方法。相同道理，竖排情况下，每列不应超过41个字。 3：合适的突跳率。 突跳率是指标题与正文字号的比例关系。常规情况下，标题字号大于正文字号，这样做的好处是，标题显得比较醒目，提高突跳率能够增加画面的吸引力并使画面显得更生动。
要怎么做才能让我们的网站设计从缤纷多彩的专业网站设计队伍中脱颖而出，赢得业内人士与客户的共同认可呢?其实做一个网站，主要记住简洁且不失美观，就是所谓的简单实用。那么其中网站就既要专业，又要有魅力！ 一，专业网站设计重在顺利浏览 网站设计与别的工作不同，不存在酒香不怕巷子深的说法，看不到的美，再美也只是零，这一点很残酷，因此，网站设计的加载速度控制异常重要。 二，专业网站设计重在超强兼容性 不要以为所有的客户都会选择和我们一样的浏览器，互联网科技这么发达，网站设计师看到的效果不一定就是客户看到的效果，专业网站设计师应该养成多浏览器检测的习惯。 三，专业网站设计重在给人留下深刻的第一眼印象 如果我们的网站设计作品在第一眼时并未能抓住浏览者的心，那么我们极有可能会失去浏览者的二次回访，甚至是继续浏览机会，所以说第一眼设计是网站设计成功的第一步。 四，专业网站设计重在色彩搭配 与主题内容相关的合理色彩搭配不仅能让人赏心悦目，更能突出网站设计师的实力与网站设计的魅力。 五，专业网站设计重在清晰实用的导航 一个好的导航设计可以帮助客户更快更好的浏览网站，也可以帮助企业更快更好的抓住客户的心，促进合作。 六，专业网站设计重在拥有可读性 一个真正好的网站应该是对人们有实质性帮助作用的网站，因此，网站设计的可读性于专业网站设计而言相当重要。 七，专业网站设计重在有新意，有亮点 想要让别人记住我们的网站就必须要在网站设计的过程中加入与众不同的设计元素，有新点，有亮点的网站才是与众不同的网站。 八，专业网站设计应该充分合理的运用多媒体元素 专业网站设计除了要充分照顾到客户的视觉感受之外还应该充分照顾到客户听觉、感觉，给人耳目一新的感觉。
浅析政府门户网站网页设计的要点(doc 8页)
政府门户网站网页设计的要点解析 目前，一些政府门户网站在网页设计方面还存在着诸多问题，如整体创意不足，页面布局不活，色彩搭配不当，字体运用不佳，导航设计不全，名称格式不一，域名没有统一，等等。笔者以为，政府门户网站的网页，特别是主页，起着呈现传达信息、与用户交互和提供帮助导航的重要功能，其设计应遵循以下原则：一是内容决定形式的原则，即网页设计必须服务于网站内容的呈现，要考虑浏览者获取信息的速度和舒适度。二是整体协调一致的原则。即网页设计的各个环节，包括色彩、布局、文字、图片等，要紧紧围绕既定的创意和风格展开。三是服从技术需要的原则。网页设计受技术制约的程度非常明显。如网页的宽度受限于显示器分辨率的大小；网页色彩的选取范围应在网络安全色中；网页中图片和动画的设计必须严格控制其大小和数量等等。 在明确以上设计原则的基础上，政府门户网站网页设计还应掌握以下要点。 一、整体创意与风格 网页的创意与风格是围绕主题和内容，对网页色彩、布局、动画、图片、文字等页面元素统一进行个性化设计而形成的整体视觉效果和艺术特点。当前，一些政府门户网站个性不足，趋向于模式化和同质化，中央人民政府门户网站几乎成了一些地方政府门户网站的“模板”，“千网一面”、“似曾相识”的现象严重。还有的网站网页风格不明显，主要表现在：同一页面内各种元素拼凑堆砌、零散混乱，缺少相互呼应和一致性；在页面与页面之间，特别是一级和二级页面之间，色彩、版式、文字等网页风格大相径庭，页面间联系不够紧密，没有形成统一的整站形象等。网页的创意与风格是网页设计的灵魂和统领，创意匮乏、风格平庸的网站很难吸引人的眼球。因此，加强网页的创意设计和风格塑造是提高网页设计水平的首要解决问题。 应该说，政府门户网站不应仅仅是一种政府发布信息资源和提供信息服务的工具，也应是一级政府在网络上精心打造的视觉形象，应着力反映政府的执政理念、发展策略和远景规划等深层次内容。尽管创意具有很强的主观色彩，似乎来自于灵感与顿悟，但绝非空穴来风完全不可把握。创意设计应紧紧抓住本地区的历史沿革、地域文化、民族特色等个性化特点，选取标志性的图片、有象征意义的色彩、隽永深刻的文字和恰当的布局，按照视觉规律进行艺术加工，设计出完整一致的视觉形象，并长期沿用下去，不断强化浏览者的记忆，久而久之就会深入人心，印象深刻，成为本地区独特的“网络形象代表”，这就是一个政府门户网站成功创意和风格的最终表现。 二、页面色彩与色调 对以呈现信息为主的门户网站而言，和谐的色彩色调能提高信息获取速度，比字形和字体的变化更能提高理解的准确度。当前，一些政府门户网站网
版式设计总结 所谓的版式设计就是在有限的空间里，编排，安排，组织管理图片、图形、文字色彩及工艺，材料等设计要求，同样的要素通过不同的编排会产生不同的效果。编排组织，管理设计师版式设计的重点。 在上这门课前我从来没想到版式也可以这么多样化，也可以这么的自由化，第一次感觉这个专业的广泛性。在现代社会，编排设计早成为了世界不可缺乏的视觉性公共语言在学习过程中，我了解到原来编排也要有这么多的学问，要先放主体，再编排，格式要注意大字配小字、分栏、字距等，要根据“米”字格式来排放等规则，是以字体、图形、色彩搭配形成的编排版式。通过几周的学习，让我基本了解了版式设计的构成要素、形式的法则等。 版面的基本理论中构成要素包括文字，图形，图片等，图片又包括方形图片、去底图片、多边形图片，异形，曲线形等要素。图形的形式又分三种：出血图形、退底图形、形状图形。文字最注重字体、字号、字距、行距。版面的设计形式法则有位置、方向、紧空紧、比例与分割、对称与均衡、节奏与韵律的等。 版式设计的基本编排有很多种：骨格型，满版型，1/2版，2/3版，叠加与聚散型等多种编排。老实说，我不知道我达到的是什么境界，但我明白在制作自己想象中的版式无疑是一种享受，不管是什么形式的编排都有它独特的艺术感受，前提是要有它的节奏韵律。 版式设计主要强调创意的表现，分为两种创意，一是针对主题思想的创意，一种是版面编排的设计创意。另外还要有优越的审美观念，追求个性品味。审美观念是可以慢慢培养的，一个优秀的版式设计不只是字体，图形、色彩等视觉元素组合的载体，它是创意者的构思舞台。版式设计主要是以视觉来判断整体的构思效果，所以要利用表面的形式来感受其主题思想。 开学以来所有的课程里，我觉得版式设计我学习得最充实，了解到的最多，刚做完稿的时候老师都会针对我们每个人的错误进行提改，让我们了解自己的不足，也吸收别人的长处，让我们有很大的进步空间。当老师把学姐（长）他们的作品拿给我们看的时候，我感觉好震撼，就想那要多大的耐心才能完成这样的作品，消耗的时间也很快，弄得我们常常忘记放学，每次几乎每次都是老师提醒。也对，老师说过这作业其实不难就是麻烦。俗话说“世上无难事，只怕有心人”嘛！ 经过这几周的实践练习，我发现好像越做越简单，越做越顺似的，刚开始做的时候总是犹豫不绝，不知图片、字体该放哪里，慢慢的掌握了其基本理念，也就不那么难拿捏了，在这门课上真的学习到了不少东西。 眼看这个课程就要结束了，虽然为了这个版式严重睡眠不足，但一看到自己装订出来的版式，心里就都是满满的满足感。
心之所向，所向披靡 网页设计要点汇总（可能不是那么的准确，请大家见谅） Lesson1 一、了解工作界面： ●“插入”栏，包含用于将各种类型的“对象”（如表格，图像，文本）等插入到文档中的按钮。 ●“文档”工具栏：包含按钮和弹出式菜单，可以在“设计”视图，“拆分”视图和“代码”视 图之间切换 ●“文档”窗口：显示当前创建和编辑文档 ●“属性”检查器：用于查看和更改所选对象或文本的各种属性，选择的对象不同，“属性”检 查器中包含的信息也不一样、 ●“面板组”：分组在某个标题下面的相关面板的集合。 ●“文件”面板：用来管理文件和文件夹，当使用dw创建一个站点后，站点的所有文件都将 显示在“文件”面板上。 二、网站制作的基本流程 1.站点：新建站点，取名→否，不适用服务器技术→选择储存位置（一般默认）→如何连接到服务器：无→完成 三：表格 插入→表格→常用表格设置：1024像素，粗细和间距一般设为0 增加一行表格：按住tab键即可 空格：crtl+shit+空格 换行：按回车键，显示的是两倍行距 按shift+回车键，是强制换行，显示一倍行距 四：html信息的设置 1.meta设置：meta标签是记录有关当前页面的信息 操作：插入记录→html→文件头标签→meta设置 2.关键词设置，描述设置，刷新设置操作与meta操作相同，都在文件头标签下。 Lesson 2 一：制作图像页面 1.图像常识：常用格式gif, jpeg, png三种图像格式 2.Gif：图像交换格式 只包含256种颜色，支持透明的背景色和动画格式 大面积单色区域图片 Jpeg(jpg)：联合图像专家组开发的图形标准，采用有损压缩算法，24位真彩色 不支持透明背景和动画格式 Png：可移植网络图形 保存的图像压缩，以减少占用的存储空间和下载速度，同时又不损失图像质量，一般情况
论网页的版式设计 吴娇娇／彭纲 我们都知道，浏览者进行网页浏览时的时间顺序通常是：由版式——艺术性，至导航——技术性，至网页内容——信息性或有用性，直至浏览过程的结束，产生评价结果。可以看出，网页设计的三个关键就是：版面设计、导航设计、网页内容。 版面的设计至关重要。在互联网上大量的产品和服务网页中，怎样才能使自己的网页从其他同类产品或服务中脱颖而出，成为浏览者的首选呢？仅仅有好的内容是远远不够的，网站的外观同样重要。内容再好，没有一个赏心悦目并具一定视觉冲击力的外观，必定会影响浏览者的阅读兴趣。人们称互联网经济为注意力经济，如何吸引大众的注意力、增强画面的视觉效果则成为设计的首要工作。 一、网页版面设计的含义 网页的版面设计同报纸杂志等平面媒体的版面设计有很多相通之处。所谓网页的版面设计，是在有限的屏幕空间上将多媒体元素进行有机组合，将传达内容所必要的各种构成要素的均衡、调和、律动的视觉导向以及空白等，根据主题的要求予以必要的关系设计，进行一种视觉的关联和合理配置。 一个成功的网页版面设计不仅能提高版面的注意价值，而且有利于该网页主题的信息传达并加强对浏览者的视觉留存。 二、网页版面的形式与内容的统一 网页的版式和传统印刷品的版式编排一样多种多样。 采用哪种版式并不是设计者的想当然，不同的网站主题（个人宣传、产品销售、提供服务等）对网页构成元素编排方式的要求是不同的，要依据受众的需求、市场的状况、版主的自身情况进行综合分析，还要明确建立该网站的目的、为谁提供产品或服务、能提供什么样的产品或服务、该网站的目标受众以及受众的特点等一系列定位之后才能决定的。如商务类版式的平易近人、娱乐类版式的生动活泼、科技类版式的严谨周密都是根据网站的个性特点来确定的。那些只讲花哨的表现形式或者过于强调独特的设计形式而脱离内容，只重视网页形式上的美感而淡化了主题思想的逻辑，将削弱网页主题的诉求效果，是不足取的。版式始终应为内容服务，设计者只有深入领会主题内容的精神，再融汇自己的思想，找到一个较完美的表现方式，才能真正体现出网站独具的分量和特有价值。 从视觉符号方面来看，视觉符号是相对于语言符号的点、线、面、色彩等视觉性记号。形式法则和构成规律是视觉语言的语法和句法，要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。可以运用对比与调和、对称与平衡、节奏以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感以及新鲜的个性。 三、网页版面的尺寸和构成要素 一般的印刷品都有固定的规格尺寸，而网页的尺寸则是由浏览者来控制的。网页版面指的是在浏览器上看到的完整的一个页面（可以包含框架和层）。网页页面会根据当前浏览窗口的大小自动格式化输出；不同种类、版本的浏览器观察同一个网页页面时，其效果会有所不同；而且用户浏览器的工作环境不同，显示效果也不一样。这就使网页设计者不能精确控制页面的每个元素的尺寸和位置，一般折中为６００×８００像素。网页的构成要素主要有：
版式设计的构成要素 点、线、面是构成视觉空间的基本元素，也是版面构成的主要语言。版面构成实际上就是如何经营好点、线、面。不管版式如何复杂，最终都可以简化到点、线、面。在设计师的眼里，世上万物都可以归纳为点、线、面：一个字母、几个数字，可以理解为一个点或多个点。 一行文字、一行空白，均可理解为一条线。 多行文字、一张图片或一片空白，都可以理解为不同形状的面。 版式设计就是在有限的版面空间内处理和协调好点线面之间相互依存、相互作用的关系，组合出各种各样的形态，构成有新意的符合审美意识的版式。 一、点 点在造型要素中是最基本的形态,也是最细小的单位。 一个较小的形态称为点，一条线的起始或终结也是点，两条或几条线的交叉处仍然可以称为点。点在形象设计中不是孤立存在的，它必然会依附于某个形体上，它的形状不固定，可以是任意的形象。比如：在一套形象设计中，服装上的蝴蝶结是点，一粒特殊的装饰扣是点，头发可以是点，帽子也可以是点。 点的性质是由空间环境所决定。点在空间环境中只占有极小的面积。点具有张力作用和紧张性，在空间的衬拖托下，点很容易将视线吸引和聚集。 在版面中一组文字、一个标志或几个符号的位置不同、数量不同、大小不同、聚散排列不同给人的感觉也不同。主要表现在以下几个方面： （一）平等配置 以大、小均等的点在整体上等距的排列，效果平稳、均衡，但是，容易显得缺少变化、呆板，无新意。 （二）不均等配置 以大、小不同，距离不等的分配方式排列，设计效果有强弱对比之感，配置效果活泼，富于变化。 （三）强调配置 一个点在整体形象中常常起到强调的作用。同样的点，由于设计的位置不一样，强调的位置也不一样。 比如：头饰作为点，配置在人体的上部，其装饰的不仅仅是头部或脸部，而
网页设计第二章重点 2.1.1 网站的种类 1．根据网站提供的服务分类：信息类网站、交易类网站、互动游戏类网站、有偿信息类网站、功能型网站、综合类网站 2．根据网站的性质分类：政府网站、企业网站、商业网站、教育科研机构网站、个人网站、非盈利机构网站、其他类型的网站 3．根据在大型搜索引擎上的设置分类 娱乐与休闲类网站、商业与经济类网站、艺术与人文类网站、健康与医药类网站、新闻与媒体类网站、政府与政治类网站、计算机与网络类网站、社会与文化类网站、科学与教育类网站、参考资料类网站 2.1.2网站建设的步骤（出简答！p22-p28，书上的详细内容也看一遍！） 1.网站目标和主题的确定 网站目标的确定（为什么要建立网站）；网站主题的确定（网站主题、网站风格、网站创意、网站名称） 2. 网站的规划 网站的规划包括：网站总体结构的设置、目录的设置和链接结构的设置。 3. 网站素材的准备 网站素材的准备包括：素材的搜集、整理加工、制作和存储等环节。 4. 网站制作工具的选择和确定 5. 网站的建立（设计制作网页） 6. 注册域名和申请网站空间 定个合适的域名： 由域名构成的网址会像商标一样，好的域名有助于将来塑造网上的形象。定义域名除了要考虑公司的性质以及信息内容的特征外，还应该使这个名字简洁、易记、具有冲击力。 租用虚拟服务器空间 一般虚拟主机提供商都能向用户提供大容量，高速度的服务器。用户可视网站的内容设置及其发展前景来选择。一页网页所占的磁盘空间大约20～50KB，10MB大约可以放置200～500页，但如果网站中的图片、动画较多，需要文件下载或有数据库等，就需要多一些空间。一般用户有50MB虚拟主机空间就够了。 7. 网站的测试和发布 网站在发布前后都应进行相关测试。 8. 网站的宣传和推广 首先企业自身要有推广网站的意识：在任何出现公司信息的地方都加上公司的网址，如名片、办公用品、宣传材料、媒体广告等。 9. 网站的更新和维护 网站建成之后，在运营的过程中需要定期不断更新网站的信息，及时总结经验和不足，逐步完善网站的功能 2.1.3 网站建设的原则 1.牢记内容第一的原则 2.网页文件命名原则 3.图片命名的原则 4.重视网页标题的设计 5.网站导航设计要清晰
浅谈网页设计中的版式设计 【摘要】网页设计包含视听元素与版式设计两项内容,而网页的版式设计在整个网页设计中具有重要的作用。它决定了网页的艺术风格 和个性特征,形成了网页整体视觉印象,本文拟就网页设计的版式设计谈谈自己的看法。 【关键词】网页设计;版式设计;布局 1.概念 1.1网页设计网页设计是在Internet的发展和数字技术的发展中出现的新艺术形式。它是以Internet为载体,以网络技术和数字技术为基础,依照设计目的、遵循艺术设计规律,实现设计目的与功能,强调艺术与科学密切结合的一种艺术创造化视觉传达活动。它是网络视觉艺术的主要表现形式,也是设计艺术的重要组成部分,它具有媒体相关性、数字技术性和设计艺术性三大基本内涵。 1.2网页版式设计网页版式设计是指在有限的屏幕空间内,按照设计师的想法、意图将网页的形态要数按照一定的艺术规律进行组织和布局,使其形成整体视觉印象,最终达到有效传达信息的视觉设计。它以有效传达信息为目标,利用视觉艺术规律,将网页的文字、图像、动画、音频、视频等元素组织起来,产生感官上的美感和精神上的享受,充分体现了设计师的艺术风格。 2.网页版式设计的作用 网页版式设计是设计师理性思维与感性表达的产物。它决定了网页的艺术风格和个性特征,并以视觉配置为手段影响着网页页面之间导航的方向性,以吸引浏览者注意力,增强网页内容的表达效果。网页版式设计在整个网页的设计中占有很重要的作用。 3.网页版式设计与传统印刷版式设计的差异网页的版式设计同报纸杂志等平面媒体的版式设计有很多共同之处,但网页的排版与书籍杂志的排版又有很大差异。印刷品都有固定的规格尺寸,网页则不然,它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且,网页的组织 结构不像印刷品那样为线性组合,这给网页的版式设计带来了一定的难度。具体表现如下:
版式设计总复习题 Company Document number：WUUT-WUUY-WBBGB-BWYTT-1982GT
版式设计复习题一．选择题 1．版面设计中最容易识别和记忆的信息载体是【 C 】 A. 文字 B. 图片 C. 图形 D. 符号 2．版面设计中点属于【 A 】 A. 抽象形 B. 具象形 C. 寓意形 D. 简洁形 3．倾斜方向的线令人产生【 D 】 A. 柔软感 B. 崇高感 C. 安定感 D. 运动感 4．三角形在版面构成中具有【 A 】 A. 稳定感 B. 圆满感 C. 稳重感 D. 方向感 5．以下不属于对称规则的是【 C 】 A. 上下对称 B. 左右对称 C. 前后对称 D. 对角对称 6．暗色是版面中的【 C 】 A. 近景 B. 远景 C. 中景 D. 前景 7．能够加强间隔醒目的视觉效果的是【 D 】 A. 图形 B. 文字 C. 色彩 D. 空白 8．在版面中，对重心、稳定、均衡、轻重，在心理上有很大的牵引力的是 【 B 】 A. 方向 B. 位置 C. 空白 D. 节奏 9．在版面设计形式的探讨中，首先要考虑的问题是【 A 】 A. 比例 B. 分割 C. 对称 D. 均衡 10．能够打破版面设计中单调乏味气氛的是【 C 】
A. 渐变 B. 重复 C. 特异 D. 对称 11．各种事物活动的“环境”是【 B 】 A. 意境 B. 空间 C. 位置 D. 方向 12．让每一行的第一个字或字母均统一在左侧的轴线上，右边可长可短，给人以优美自然、愉悦节奏感的是【 B 】 A. 左右均齐 B. 齐左 C. 齐中 D. 齐右 13．能够打破所有的条条框框，使版面更加活泼、新颖的是【 C 】 A. 图文穿插 B. 首字强调 C. 自由编排 D. 标题编排 14．最常见最基本的图片形式是【 A 】 A. 块面式 B. 退底式 C. 跨越式 D. 重叠式 15．下列不属于图形创意描述的是【 D 】 A. 寓意性 B. 抽象性 C. 具象性 D. 主题性 16．计算机字体的大小采用号数制、点数制。点也称磅，每一点相当于 【 B 】 A． B. C. D. 17．不符合规则重复描述的是【 B 】 A. 严谨 B. 趣味 C. 平稳 D. 静态 18．不属于版面设计应用范畴的是【 C 】 A. 书籍设计 B. 产品包装设计 C. 建筑设计 D. 招贴设计 19．一般情况下，行距要大于字距，行距大都为正文字号的【 A 】A. 二分之一 B. 三分之一 C. 四分之一 D. 三分之二 20．不属于版面视觉流程的是【 D 】
版式设计 - 版式设计的基本元素 点、线、面是构成视觉的空间的基本元素，也是排版设计上的主要语言。排版设计实际 上就是如何经营好点、线、面。不管版面的内容与形式如何复杂，但最终可以简化到点、线、 面上来。在平面设计家眼里，世上万物都可归纳为点、线、面、一个字母、一个页码数、可 以理解为一个点；一行文字、一行空白，均可理解为一条线；数行文字与一片空白，则可理 解为面。它们相互依存，相互作用，组合出各种各样的形态，构建成一个个千变万化的全新 版面。 1.点在版面上的构成 点的感觉是相对的，它是由形状，方向、大小、位置等形式构成的。这种聚散的排列与组合， 带给人们不同的心理感应。点可以成为画龙点睛之“点”，和其他视觉设计要素相比，形成画 面的中心，也可以和其他形态组合，起着平衡画面轻重，填补一定的空间，点缀和活跃画面 气氛的作用；还可以组合起来，成为一种肌理或其他要素，衬托画面主体。 2.线在版面上的构成 线游离于点与形之间，具有位置、长度、宽度、方向、形状和性格。直线和曲线是决定版面 形象的基本要素。每一种线都有它自己独特的个性与情感存在着。 将各种不同的线运用到版
面设计中去，就会获得各种不同的效果。所以说，设计者能善于运用它，就等于拥有一 个最得力的工具。 线从理论上讲，是点的发展和延伸。线的性质在编排设计中是多样性的。在许多应用性 的设计中，文字构成的线，往往占据着画面的主要位置，成为设计者处理的主要对象。线也 可以构成各种装饰要素， 以及各种形态的外轮廓， 它们起着界定、 分隔画面各种形象的作用。 作为设计要素，线在设计中的影响力大于点。线要求在视觉上占有更大的空间，它们的延伸 带来了一种动势。线可以串联各种视觉要素，可以分割画面和图像文字，可以使画面充满动 感，也可以在最大程度上稳定画面。 3.面在版面上的构成 面在空间上占有的面积最多，因而在视觉上要比点、线来得强烈、实在，具有鲜明的个 性特征。面可分成几何形和自由形两大类。因此，在排版设计时要把握相互间整体的和谐， 才能产生具有美感的视觉形式。在现实的排版设计中，面的表现也包容了各种色彩、肌理等 方面的变化， 同时面的形状和边缘对面的性质也有着很大的影响， 在不同的情况下会使面的 形象产生极多的变化。在整个基本视觉要素中，面的视觉影响力最大，它们在画面上往往是 举足轻重的。 版式设计 - 文字与版式设计 下图中的两大排白色文字很容易就吸引你的目光，因为作者充分利用了图中人物的姿 态，好象一手托着字而另一只手往下按着字，自然而然地吸引你的视线，达成设计目的。
网络工程设计作业（二） 学院：教育科学与技术学院 班级：09级网络一班 姓名：xxx 学号：xxxxxxxxxx
办公楼网络方案设计 为某单位办公楼设计网络，该办公楼为五层，网络中心位于二层中间，该楼长度60米，层高3.5米，每层办公室24个，该办公楼内需要形成局域网，所有办公室都可以上互联网，每个办公室按两个信息点设计，要求方案中有层平面图，层布线图 一、整个办公大楼计算机网络系统建设将要实现以下的目标： 1、建立办公楼的局域网，实现楼内部各种信息资源的共享，以及相互访问、调用文件和程序。 2、建设一个高性能、高可用性及高可扩展性的服务器系统。 3、将来建设办公自动化网，实现内部的办公自动化和传递信息无纸化。 4、实现通过专线连接Internet，实现办公楼内部用户访问Internet，获取各方面信息的功能。 二、楼层平面布局 第一层： 第二层：
第三层、第四层、第五层一样： 三、层布线图 （1）一层：
（2）二层： （3）三、四、五层： （4）竖直方向上：
四、预算 设备型号配置单价数量金额 网线AMP 超五类 网线产品适用：1000Base-T 最大 单段：100米传输速率： 100Mbps 包装长度：305米 750 23箱17250 路由器H3C ER5200 广域网接：2个 局域网接：3个 传输速率：10/100/1000Mbps 网络管理：基于Web的用户 管理接口用户数量：300台 防火墙：内置防火墙 3700 1 3700 防火墙思科 PIX-506E-BU N-K9 最大吞吐量100Mbps 安全过滤带宽30Mbps 无用户数限制 25000并发连接数 6990 1 6990 核心交换机H3C S5800-32C 传输速率： 10/100/1000/10000Mbps 端口 数量：28个 包转发率：156Mpps MAC地 址：32K 25500 1 25500 一般交换机华为 S5700-48TP -SI(AC) 传输速率：10/100/1000Mbps 端口数量：52个 背板带宽：256Gbps 包转发率：72Mpps 8230 5 41150 电话交换机沪光HG-80 4外线16分机520 1 520