网站设计原理与实战第1章网页美术设计概述第1章网站设计概述网页美术设计概述我们现在所熟悉的互联网,由数以万计的网站组成,每个网站又由多层的网页构成,其中“网页”成为构成互联网的基本元素。第1章网站设计概述完整网站设计所需的内容网页视觉风格的主旨视觉风格设计是指利用视觉符号进行信息传达的设计。网站设计的基本元素在实际设计中基础设计元素大体可以概括为“视听元素”和“版式元素”两大类。第1章网站设计概述网页美术设计的要素设计与技术相结合在这里,我们所指的设计并不仅仅是网页表现上的一些装饰,而是需要将企业形象、文化内涵等元素都要体现在网页视觉设计中。立体空间节奏感网页中的立体空间是一个想象空间,这种空间关系需要借助动静变化、图像的比例关系等空间因素表现出来。视觉导向性浏览者在浏览网站页面时,网页中的文字、图像、颜色、图标等都是作为信息特征和视觉导向来进行视觉引导的。视觉服务我们在网页设计的过程中尽量避免使用过多的图像和体积过大的图像。导航设置在进行网页页面设计时,应全面考虑导航效果的设计。第1章网站设计概述各类多媒体视听元素的集合视听元素是网页艺术设计的基本元素,是网页中基本视觉元素和听觉元素的总称。网站页面中的视听元素主要有文本、背景、按钮、图标、表格、颜色、导航工具、背景音乐和动态影像等。多媒体技术的广泛应用,极大地增加了网页的感染力。在网页的诸要素中,设计者所要考虑的就是如何综合各类多媒体视听元素,以艺术化的网页形式传达准确的网站信息。在网站页面中使用多媒体视听元素,需要考虑用户端机器对文件的播放格式是否支持。对于大多数网络浏览者而言,都是通过PC机来浏览网页的,而不同的PC机的软件配置各不相同,有时需要浏览者下载相应的软件才能播放。GIF、JPEG图形和GIF89a动画是比较通用的图像或视频格式,大多数浏览器都会支持这些格式;而有些较专业的媒体文件则需要先下载相应的软件才能播放,如APE格式的文件。第1章网站设计概述整体网站的结构设计网页的功能与形式美网页视觉设计是一种特殊的存在形式,它具有明确的实用功能,因此对网页作品进行审美分析也必然是一种形式上的和功能上的分析为主。网页视觉形式美法则网页视觉形式美是通过艺术化的设计手法带给浏览者的愉悦感受和体会。视觉设计与创造思维相结合创造性是区分一幅优透的网页视觉设计作品与一般的网页设计作品的决定因素设计中常见的创意方法设计风格的不断创新,设计手法的不断变化,既给设计师的创作提供了庞大而丰富的经验库,也给初次涉足于这个领域的设计师以茫然无措、眼好缭乱的印象。第1章网站设计概述网页设计中应注意的问题要考虑浏览页面终端的影响考虑用户使用客户端浏览时对流量的限制。尽量使用美观简化的设计。页面设计要使用包含单独主题的小页面。网页信息要条理清楚,层次分明。搜索引擎和导航条添加人性化的互动。网页设计中易出现的问题优秀的网页设计作品,会使浏览者产生感官上的美感和精神上的享受。第1章网站设计概述网站建设的整体设计流程项目规划马克思将做事的计划性看成是人区别动物的本质特征之一。设计者必须认真对待网站的开发计划,这样才能使网站的建设经得起时间的考验。内容组织此部分包括三个方面的工作——搜集筛选内容、组织内容、编写脚本。页面设计在设计网页的过程中,还需要根据设计者的构想,制作多媒体文件,由专业的程序设计人员编制相应的程序等,以实现网页的交互性。测试发布网站的测试发布包括完整性测试和可用性测试两部分。站点推广它将打开浏览者通往站点的大门,并拓宽获得反馈信息的渠道。反馈评估网页设计人员必须根据用户的反馈信息经常地对网页进行调整和修改,定期或不定期地增加新的内容。第1章网站设计概述网页美术设计的原则为用户考虑为用户考虑的原则实际上就是要求设计者要时刻站在浏览者的角度来考虑。主题突出视觉设计表达的是一定的意图和要求,有明确的主题,并按照视觉心理规律和形式将主题主动地传达给观赏者。有机的整体网页的整体性包括内容和形式上的整体性,这里主要讨论设计形式上的整体性。内容与形式相统一设计的内容是指它的主题、形象、题材等要素的总和,形式就是它的结构、风格设计语言等表现方式。更新和维护如果想要经营一个带有即时性质的网站,除了注意内容外,资料还要每日更新。第1章网站设计概述优秀网页设计的特征交互性网络媒体不同于传统媒体的地方就在于信息的动态更新和即时交互性。版式的不可控制性网页的视觉设计与传统印刷的版式设计有着极大的差异。技术与艺术结合的紧密性网络技术主要表现为客观因素,艺术创意主要表现为主观因素,网页设计者应该积极主动地掌握现有的各种网络技术规律,注重技术和艺术的紧密结合,这样才能穷尽技术之长,实现艺术想象,满足浏览者对网页的高质量需求。多媒体的综合性目前网页中使用的多媒体视听元素主要有文字、图像、声音、动画、视频等。多维性多维性源于超级链接,它主要体现在网页设计中导航的设计上。第1章网站设计概述网站设计常用工具网页编辑排版软件——Dreamweaver网页编辑排版软件——Dreamweaver,全称AdobeDreamweaver,很多设计人员也将其简称为DW。网页图片设计软件——PhotoshopAdobePhotoshop,简称PS,是由AdobeSystems开发和发行的图像处理软件。网页动画制作软件——Flash经过多年的不断发展和更新,Flash已经成为目前网页中动画的主要设计制作软件。网页标记语言——HTML从HTML语言的诞生到迄今为止,不断的发展与更新满足着设计人员的需求,越来越完善的语言规范使得用其设计制作出的网站页面具有很好的稳定性与兼容性。第1章网站设计概述课堂练习——设计网站导航栏在“图层样式”对话框中选中“描边”选项,对相关参数进行设置。相同制作方法,完成其他文字的制作。完成导航栏的设计制作,得到最终效果。第1章网站设计概述课后练习——设计网站弹出广告页面在我们打开很多网站时,总会弹出一些小的广告页面,这些广告页面的尺寸较小,设计精美,并且通过弹出的形式可以引起浏览者的注意,本实例我们就一起设计一个网站弹出广告页面,通过简单的背景与图形相结合,使浏览者能够很快明白广告的主题内容。第1章网站设计概述