作者：李洪雷 侯水生
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
网页美工设计Photoshop+Flash+Dreamweaver从入门到精通 第2版试读：
前言
互联网信息技术彻底改变了人们的生活和工作，越来越多的企业和个人建立起网站来宣传自己，网页设计人员的需求量大大增加。网页设计是一项综合性的技能，是现代艺术设计中具有广泛性和前沿性的新媒体艺术形式之一。一个优秀的网站在栏目设计、导航设计、色彩搭配、内容设计等方面都非常严谨。有的网站看上去可能很简单，但却能够在网络中脱颖而出，这些网站可以给人一种吸引力，让浏览者在访问的同时，不知不觉地记住网站的相关信息，感受到企业的文化。如何让网站在网络上脱颖而出？网页美工无疑起到了重要的作用。网页的图片处理、特效文字设计、Logo与按钮设计、海报设计、动画设计、网页的排版布局等，都属于网页美工的范畴。如今客户的眼光越来越挑剔，对网页的视觉要求也越来越高，因此，网页美工已经成为网页设计中不可或缺的一个重要部分。
在众多网页美工类图书中，本书第1版上市距今已经3年了，期间重印达10多次，被各大培训机构和高职院校选作教材，目前仍然具有极强的生命力。本书特色● 知识系统、全面。本书从基础知识开始讲起，全面介绍图片
处理、特效文字设计、Logo与按钮设计、海报设计、动画设
计、网页的排版布局等内容，最后还给出了综合实例，力求还原
一个真实的网站建设任务，让读者的学习更有针对性。● 采用“基础+实例”的形式讲解。为了使读者能够真正掌握
网页设计的技巧，本书通过大量实例全面介绍了网页美工设计的
各个环节，而且对操作过程中的每一个步骤都有详细说明。不论
是初学者，还是有一定基础的读者，只要根据这些步骤操作，就
能顺利完成整个实例。
本书写作人员中既包括从业多年的网页设计培训教师，又包括一线的网页制作和网站建设人员，这使得本书理论与实践并重，方法与技巧并存。在编写过程中，我们力求精益求精，但难免存在一些不足之处，读者在使用本书时如果遇到相关技术问题，可以发E-mail和我们联系。
本书对具有一定Photoshop、Flash和Dreamweaver基础的网页设计与制作人员、网站建设与开发人员有较高的参考价值，同时也可作为高等院校相关专业师生、网页制作培训班学员、个人网站爱好者与自学者的学习参考书。第1章 初识网页设计与配色
为了能够使网页初学者对网页设计有一个总体的认识，在介绍网页设计制作前，本章首先介绍网页设计的基础知识，如网页的相关术语，网页设计常用工具Dreamweaver、Flash和Photoshop以及网页的布局与配色。通过本章的学习可以为后面设计制作更复杂的网页打下良好的基础。1.1 网页设计的相关术语
在学习网页设计之前，先来了解一下静态网页和动态网页的基本概念。1.1.1 什么是静态网页
静态网页是网站建设初期经常采用的一种形式。网站建设者把内容设计成静态网页，访问者只能被动地浏览网站建设者提供的网页内容。静态网页的特点如下。● 网页内容不会发生变化，除非网页设计者修改了网页的内
容。● 不能实现与浏览网页的用户之间的交互。信息流向是单向的，
即从服务器到浏览器。服务器不能根据用户的选择调整返回给用
户的内容。静态网页的浏览过程如图1-1所示。图1-1 静态网页的浏览过程1.1.2 什么是动态网页
动态网页中，网页文件里包含了程序代码，通过后台数据库与Web服务器的信息交互，由后台数据库提供实时数据更新和数据查询服务。这种网页的后缀名称一般根据不同的程序设计语言而不同，常见的有.asp、.jsp、.php、.perl、.cgi等形式。动态网页能够根据不同时间和不同访问者而显示不同内容。常见的BBS、留言板和购物系统通常都是用动态网页实现的。动态网页的制作比较复杂，需要用到ASP、PHP、JSP和ASP.NET等专门的动态网页设计语言。动态网页浏览过程如图1-2所示。图1-2 动态网页浏览过程
动态网页的一般特点如下。● 动态网页以数据库技术为基础，可以大大降低网站维护的工
作量。● 采用动态网页技术的网站可以实现更多的功能，如用户注
册、用户登录、搜索查询、用户管理、订单管理等。● 动态网页并不是独立存在于服务器上的网页文件，只有当用
户请求时服务器才会返回一个完整的网页。1.2 网页美工常用工具
由于目前“所见即所得”类型的工具越来越多，使用也越来越方便，所以网页制作已经变成了一件轻松的工作。Dreamweaver、Flash、Photoshop这3个软件相辅相承，是网页美工的首选工具。其中，Dreamweaver主要用来制作网页文件，其制作出来的网页兼容性好，制作效率也很高；Flash用来制作精美的网页动画；Photoshop用来处理网页中的图像。1.2.1 掌握网页编辑排版软件Dreamweaver
Dreamweaver是网页设计与制作领域中用户最多、应用最广、功能最强的软件，Dreamweaver CC的发布，更坚定了Dreamweaver在网页设计与制作领域中的地位。Dreamweaver用于网页的整体布局和设计，它可以对网站进行创建和管理，是网页制作“三剑客”之一，利用它可以轻而易举地制作出充满动感的网页。Dreamweaver提供众多的可视化设计工具、应用开发环境以及代码编辑支持。开发人员和设计师能够快捷地创建功能强大的网络应用程序。图1-3所示为利用Dreamweaver制作网页。图1-3 利用Dreamweaver制作网页1.2.2 掌握网页图像制作软件Photoshop
Photoshop是Adobe公司推出的图像处理软件，目前已被广泛应用于平面设计、网页设计和照片处理等领域。随着计算机技术的发展，Photoshop已历经数次版本更新。图1-4所示为利用Photoshop设计网页图像。图1-4 利用Photoshop设计网页图像1.2.3 掌握网页动画制作软件Flash
Flash是一款功能非常强大的交互式矢量多媒体网页制作工具，能够轻松输出各种各样的动画效果。它不需要特别繁杂的操作，但其动画效果、互动效果、多媒体效果十分出色。由于用Flash编制的网页文件比普通网页文件要小得多，所以大大加快了浏览速度。图1-5所示为利用Flash制作网页动画。图1-5 为利用Flash制作网页动画1.3 网页版面布局设计
网页设计要讲究编排和布局，虽然网页设计不同于平面设计，但它们有许多相近之处，应加以借鉴和利用。为了达到最佳的视觉表现效果，网页的整体布局要合理，使浏览者有一个流畅的视觉体验。1.3.1 网页版面布局原则
同平面设计一样，在设计网页时也要遵循一些基本原则。熟悉一些基本的设计原则，再对网页的特殊性做一些考虑，便不难设计出美观大方的页面。网页设计有以下基本原则，熟悉这些原则将对页面的设计有所帮助。（1）主次分明，中心突出
对一个页面进行设计，必须考虑视觉的中心。这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图像一般可以安排在这个部位，在视觉中心以外的地方可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。（2）大小搭配，相互呼应
不要将较长的文章或标题搭配在一起，要有一定的距离。同样，也不要将较短的文章编排在一起。对待图像的安排也是这样，要互相错开，使大小不同的图像之间有一定的间隔，这样可以使页面错落有致，避免偏离重心。（3）图文并茂，相得益彰
文字和图像具有一种相互补充的视觉关系。页面上文字太多，就显得沉闷，缺乏生气；页面上图像太多，缺少文字，必然会减少页面的信息量。因此，最理想的效果是文字与图像密切配合、互为衬托，这样既能活跃页面，又能使页面有丰富的内容。（4）简洁一致性
保持简洁的常用做法是使用醒目的标题。这个标题常常采用图形表示，但图形同样要求简洁。另一种保持简洁的做法是限制所用的字体和颜色的数目，一般每页使用的字体不超过3种。
要保持一致性，可以从页面的排版入手，各个页面使用相同的页边距，文本、图形之间保持相同的间距，主要图形、标题或符号旁边留下相同的空白。（5）元素搭配合理
格式美观的正文、和谐的色彩搭配、较好的对比度，这些元素使得文字具有较强的可读性。要使页面具有生动的背景图案，页面元素应大小适中、布局匀称，不同元素之间有足够空白且保持平衡，文字准确无误。（6）考虑到大多数人使用256色显示模式，因此一个页面显示的文本和背景的颜色不宜过多，应当控制在256色以内。主题颜色通常只需要2～3种，并采用一种标准色。1.3.2 点、线、面的构成
在网页的视觉构成中，点、线、面既是最基本的造型元素，又是最重要的表现手段。在布局网页时，点、线、面是需要最先考虑的因素。只有合理处理好点、线、面的关系，才能设计出具有最佳视觉效果的页面，才能充分地表达出网页最终目的。网页设计实际上就是如何处理好这三者的关系，因为不管任何视觉形象或者版式构成，归根结底，都可以归纳为点、线和面的关系。1．点的视觉构成
在网页中，一个单独而细小的形象可以称为点，如汉字就可以称为一个点；点也可以是一个网页中相对微小单纯的视觉形象，如按钮、Logo等。
点是构成网页的最基本单位，它起到使页面活泼生动的作用，使用得当，甚至可以成为点睛之笔。
一个网页往往需要有数量不等、形状各异的点来构成。点的形状、方向、大小、位置、聚集、发散，能够给人带来不同的心理感受。2．线的视觉构成
点的延伸形成线，线在页面中表示方向、位置、长短、宽度、形状、质量和情绪。线是分割页面的主要元素之一，是决定页面显示的基本要素。线分为直线和曲线，有垂直、水平、倾斜、几何曲线、自由线这几种呈现形式。
线是能被赋予情感的，如水平线给人开阔、安宁、平静的感觉，斜线具有动力、不安、速度和现代意识，垂直线具有庄严、挺拔、力量、向上的感觉。曲线给人带来柔软流畅的感觉，自由曲线是较好的情感抒发手段。将不同的线运用到页面设计中，会获得不同的效果。
水平线的重复排列会对访问者形成强烈的形式感和视觉冲击力，能够让访问者在第一眼就产生兴趣，从而达到吸引注意力的目的。
自由曲线的运用打破了水平线产生的庄严和单调，给网页增加了丰富、流畅、活泼的气氛。图1-6所示为使用曲线的网页。图1-6 使用曲线的网页
水平线和自由曲线的组合运用形成新颖的形式和不同情感的对比，从而将视觉中心有力地衬托出来。3．面的视觉构成
面是无数点和线的组合，具有一定的面积和质量，占据的空间更多，因而相比点和线来说视觉冲击力更大、更强烈。图1-7所示为使用网页中的面。图1-7 使用网页中的面
面的形状可以大致分为以下几种。● 几何形的面：方形、圆形、三角形、多边形的面（在页面中
经常出现）。● 有机切面：可以用弧形相交或者相切得到。● 不规则形的面和意外因素形成的随意形面。
面具有自己鲜明的个性和情感特征，只有合理地安排好网页中各个面的关系，才能设计出充满美感且实用的网页。1.4 常见的版面布局形式
常见的网页布局形式大致有“国”字型、拐角型、框架型、封面型和Flash型布局等。1．“国”字型布局“国”字型布局如图1-8所示。从图中可以看出，最上面是网站的标志、广告以及导航栏；接下来是网站的主要内容，左右分别列出一些栏目，中间是主要部分；最下部是网站的一些基本信息。这种结构是国内一些大中型网站常用的布局方式，其优点是充分利用版面、信息量大，缺点是页面显得拥挤、不够灵活。图1-8 “国”字型布局2．拐角型布局
拐角型结构布局如图1-9所示，页面顶部为标志+广告条，下方左面为主菜单，右面显示正文信息。这是网页设计中广泛使用的一种布局方式，一般应用于企业网站中的二级页面。这种布局的优点是页面结构清晰、主次分明，是初学者最容易上手的布局方法。在这种类型中，一种很常见的布局是最上面是标题及广告，左侧是导航链接。图1-9 拐角型布局3．框架型布局
框架型布局一般分成上下或左右布局，一栏是导航栏目，一栏是正文信息。复杂的框架结构可以将页面分成许多部分，常见的是三栏布局。如图1-10所示，上边一栏放置图像广告，左边一栏显示导航栏，右边显示正文信息。图1-10 框架型布局4．封面型布局
封面型布局一般应用在网站的主页或广告宣传页上。此布局中，通常会为精美的图像加上简单的文字链接，指向网页中的主要栏目。图1-11所示是封面型布局。图1-11 封面型布局5．Flash型布局
这种布局跟封面型的布局结构类似，不同的是页面采用了Flash技术，动感十足，可以大大增强页面的视觉效果。图1-12所示为Flash型布局。图1-12 Flash型布局6．标题正文型布局
这种类型最上面是标题或类似的元素，下面是正文。一些文章页面或注册页面就是这种类型。图1-13所示为标题正文型布局。图1-13 标题正文型布局1.5 文字与图像版式设计
文本是重要的信息载体和交流工具，网页中的信息也是以文本为主。虽然文字不如图像直观形象，但是却能准确地表达信息的内容和含义。在确定网页的版面布局后，还需要确定文本的样式，如字体、字号和颜色等，还可以将文字图形化。1.5.1 文字的字体、字号、行距
网页中，中文默认的标准字体是“宋体”，英文是Times New Roman。如果在网页中没有设置任何字体，则浏览器中将以这两种字体显示网页。字号大小可以使用磅（point）或像素（pixel）来确定。一般网页常用的字号大小为12磅左右，较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。需要注意的是，小字号容易产生整体感和精致感，但可读性较差。
无论选择什么字体，都要以网页的总体设想和浏览者的需要为基础。在同一页面中，字体种类少，版面雅致，有稳重感；字体种类多，则版面活跃，丰富多彩。布局的关键是根据页面内容来掌握相关比例关系。
变化的行距也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10 : 12，即字用10点，则行距用12点，如图1-14所示；否则行距太小，字体看着会很不舒服，而行距适当放大后字体感觉比较合适。图1-14 行距太小
行距可以用行高（line-height）属性来设置，建议以磅或默认行高的百分数为单位，如20pt或150%。1.5.2 文字的图形化
所谓文字的图形化，是指把文字作为图形元素来表现，从而起到强化原有功能的作用。作为网页设计者，既可以按照常规的方式来设置字体，也可以对字体进行艺术化的设计。无论怎样，一切都应该围绕如何更出色地实现自己的设计目标来进行。
将文字图形化，以更富创意的形式表达出深层的设计思想，能够避免网页的单调与平淡，从而打动人心，图1-15所示为图形化的文字。图1-15 图形化的文字1.6 网页配色安全
有时虽然使用了合理且美观的网页配色方案，但由于浏览时所用的显示器、操作系统、显卡以及浏览器的不同而有不尽相同的显示效果。因此，对于一个网页设计者来说，了解并且利用网页安全色可以拟定出更安全、更出色的网页配色方案。通过使用“216网页安全色”进行网页配色，不仅可以避免色彩失真，还可以使配色方案更好地为网站服务。1.6.1 216网页安全色
216网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合（调色板），也就是说这些颜色在任何终端设备上的显示效果都是相同的，所以使用216网页安全色进行网页配色可以避免原有的颜色失真问题。
网页安全色是当红色（Red）、绿色（Green）、蓝色（Blue）颜色数字信号值为0、51、102、153、204、255（十六进制为00、33、66、99、CC或FF）时构成的颜色组合，它一共有6×6×6=216种颜色。图1-16所示为网页安全色调色板。我们可以看到很多站点利用其他非网页安全色同样也展现了新颖独特的设计风格，所以并不需要刻意地追求使用局限在216网页安全色范围内的颜色，而是应该更好地搭配使用安全色和非安全色。图1-16 网页安全色调色板1.6.2 网页安全色配色辞典
216网页安全色对于一个网页设计师来说是必备的常识，利用它可以拟定出更安全、更出色的网页配色方案。只要在网页中使用216网页安全色，就可以控制网页的色彩显示效果。图1-17所示为网页安全色配色辞典。图1-17 网页安全色配色辞典1.7 不同色彩的网页
在人类千万年来的生活实践中，植物的绿色、稻麦的黄色、海洋的蓝色等各种自然色彩形成了一系列共同的印象，使人们对色彩赋予了特别的象征意义。1．红色
红色的色感温暖，象征着刚烈而外向，是一种对人刺激性很强的颜色。红色容易引起人们的注意，也容易使人兴奋、激动、紧张、冲动，同时它还是一种容易造成人视觉疲劳的颜色。在众多颜色里，红色是最鲜明生动、最热烈的颜色。因此红色也是代表热情的情感之色。
在网页颜色应用中，根据网页主题内容的需求，纯粹使用红色为主色调的网站相对较少，它多被当作辅助色、点睛色，达到陪衬、醒目的效果。这类颜色的组合比较容易使人提升兴奋度，被广泛地应用于食品、时尚休闲、化妆品、服装等类型的网站，容易营造出诱惑、艳丽等气氛。图1-18所示为以红色为主的网页。图1-18 以红色为主的网页2．黑色
黑色也有很强大的感染力，能够表现出特有的高贵。此外，黑色还经常用于表现死亡和神秘。在商业设计中，黑色是许多科技产品的用色，如电视、跑车、摄影机、音响、仪器等。在其他方面，黑色庄严的意象也常用在一些特殊场合的空间设计中，如生活用品和服饰设计大多利用黑色来塑造高贵的形象。黑色也是一种永远流行的主要颜色，适合与多种色彩搭配。图1-19所示为使用黑色为主的网页。图1-19 使用黑色为主的网页3．橙色
橙色能够展示轻快、收获、温馨、时尚，是快乐、喜悦、充满能量的色彩。在整个色谱里，橙色具有兴奋度，是最耀眼的色彩，给人以华贵而温暖、兴奋而热烈的感觉，是令人振奋的颜色。同时，橙色具有健康、活力、勇敢自由等象征意义，能给人以庄严、尊贵、神秘的感觉。橙色在空气中的穿透力仅次于红色，也是容易造成视觉疲劳的颜色。
在网页颜色里，橙色适用于视觉要求较高的时尚网站，属于注目、芳香的颜色，也常被用于强调味觉的食品网站，是容易引起食欲的颜色。图1-20所示为使用橙色为主的网页。图1-20 使用橙色为主的网页4．灰色
在商业设计中，灰色具有柔和、高雅的意象，属于中间性格，男女皆能接受，所以灰色也是一直以来都很流行的主要颜色。许多高科技产品，尤其是和金属材料有关的，几乎都采用灰色来传达高级、技术的形象。灰色大多被用在不同层次的变化组合中，与其他色彩搭配，才不会显得平淡、沉闷、呆板、僵硬。图1-21所示是使用灰色为主的网页。图1-21 使用灰色为主的网页5．黄色
黄色通常代表阳光，具有活泼与轻快的特点，给人十分年轻的感觉。它的亮度最高，和其他颜色配合可以增添活泼的感觉，有温暖感。图1-22所示为使用黄色为主的网页。图1-22 使用黄色为主的网页
浅黄色代表明朗、愉快、希望、发展，具备雅致、清爽属性，较适合用于女性及化妆品类网站。
中黄色给人带来崇高、尊贵、辉煌、注意、扩张的心理感受。
深黄色给人带来高贵、温和、稳重的心理感受。6．绿色
在商业设计中，绿色所传达的是清爽、理想、希望、生长的意象，符合服务业、卫生保健业、教育行业、农业的要求。在工厂中，为了避免操作时眼睛疲劳，许多机械也是采用绿色，一般医疗机构场所也常采用绿色来做空间色彩规划。图1-23所示为使用绿色为主的网页。图1-23 使用绿色为主的网页7．蓝色
由于蓝色给人以沉稳的感觉，且具有智慧、准确的意象，在商业设计中用来强调科技、高效的商品或企业形象，如电脑、汽车、影印机、机械、摄影器材等产品。另外，蓝色也代表忧郁和浪漫，因此也常运用在文学作品或感性诉求的商业设计中。图1-24所示为使用以蓝色为主的网页。图1-24 使用蓝色为主的网页8．紫色
紫色由于具有强烈的女性化特征，因此在商业设计用色中受到了很多限制，除了和女性有关的商品或企业形象外，其他类的设计很少会采用紫色为主色。图1-25所示为使用紫色的网页。
试读结束[说明：试读内容隐藏了图片]