《网页设计与制作》-情境1：博客

任务一：网页设计与布局基础为了能够使网页设计初学者对网页设计有个总体的认识，在设计与制作网站之前，本章首先介绍网页设计的基础知识。如超文本标记语言HTML、网页脚本特效语言JavaScript和动态网页程序ASP；接着介绍如何设计网页和网页设计的基本原则，以及网页设计的常用软件Dreamweaver、Flash和Photoshop；最后讲解网页的布局设计，突出网页设计的艺术性和个性，好的布局设计会使网页显得更有美感和创意。一、预备知识在设计网页之前，首先要知道网页设计中常用的语言。超文本标记语言HTML是学习网页设计的基础，但是HTML语言的功能十分有限，无法实现令人耳目一新的动态效果，在这种情况下，各种脚本语言和动态网页开发语言应运而生，使得网页设计更加多样化。下一页返回任务一：网页设计与布局基础1.超文本标记语言通过浏览器浏览网页时，看到的其实是超文本文件，它一方面通过“超级链接”相互关联，另一方面内含多媒体对象，因此称为“超文本”。在Internet上，使用超文本标记语言（HTML）来描述超文本文件，而客户端的浏览器负责解释这些超文本，最终生成访问者看到的页面形式。HTML语言由一系列元素组成，用于组织文件的内容和指导文件的输出格式。元素名称不区分大小写。一个元素可以有多个属性，各个属性用空格分开，属性及其属性值不区分大小写。元素由标记构成，大多数标记是成对出现的，分起始标<>和结尾标记</>，以便和页面的内容区分开来。上一页下一页返回任务一：网页设计与布局基础2.网页脚本语言网页脚本语言（JavaScript）的出现使信息和用户之间不只是一种显示和浏览的关系，从而实现了一种实时的、动态的、可交互式的表达能力。可以利用JavaScript轻易地制作出漂亮的数字钟、有广告效果的跑马灯及显示浏览器停留的时间。这些特殊效果可以极大提高网页的互动性，从而吸引更多的人来访问网页。脚本语言有以下几个特性：（1）在客户端执行，完全在用户的计算机上运行，无须经过服务器。（2）面向对象，具有内置对象，也可以直接操作浏览器对象。（3）动态变化，可以对用户的输入作出反应，也可以直接对用户输出。上一页下一页返回任务一：网页设计与布局基础（4）简单易用，即使是初学者也能快速掌握。（5）只能与HTML几种语言一起使用，要通过浏览器解释执行。3.动态网页动态网页使用语言HTML+ASP、HTML+PHP或HTML+JSP等。动态网页以.asp、.jsp、.php、.perl、.cgi等形式为后缀。动态网页主要有以下几个特点。（1）动态网页以数据库技术为基础，可以极大降低网站维护的工作量。（2）采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、搜索查询、用户管理、订单管理等。（3）动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。上一页下一页返回任务一：网页设计与布局基础（4）动态网页中的“?”对搜索引擎检索存在一定的问题。搜索引擎一般不可能从一个网站的数据库中访问全部网页，因此采用动态网页的网站在进行搜索引擎推广时需要作一定的技术处理才能适应搜索引擎的要求。二、网页的设计方法网页设计是一个感性思考与理性分析相结合的复杂过程，它的方向取决于设计的任务，它的实现依赖于网页的制作。在网页设计中，最重要的并非是软件的应用，而是对网页设计的理解、美感体现以及页面制作的整体把握。1.网页设计的任务网页设计的任务是指设计者要表现的主题和要实现的功能。站点的性质不同，设计的任务也不同。形式上可以将站点分为以下3类。上一页下一页返回任务一：网页设计与布局基础（1）第一类是资讯门户类站点，像新浪、搜狐等。这类站点为访问者提供了大量的信息，而且访问量较大，因此需要注意页面的分割、结构的合理、页面的优化和界面的友好等问题。（2）第二类是资讯和形象相结合的网站，像一些较大的公司、国内的高校等。这类网站在设计上要求较高，既要保证资讯类网站信息大的要求，同时又要突出企业和单位的形象。（3）第三类则是形象类网站，如一些中小型的公司或单位。这类网站一般较小，有的只有几个页面，需要实现的功能也较为简单，网页设计的主要任务是突出企业形象。这类网站对设计者的美工水平要求较高。上一页下一页返回任务一：网页设计与布局基础2.网页设计的实现网页设计的流程可以分为两部分。第一部分是站点的规划及草图的绘制，这一部分可以在纸上完成；第二部分是网页的设计与制作，这一过程是在计算机上完成的。设计网页的第一步是设计版面布局。可以将网页看做传统的报纸杂志来编辑，这里面有文字、图像和动画，要以最恰当的方式将它们分别排放在页面的不同位置。常用的网页设计软件有Dreamweaver、Fireworks、Flash及Photoshop，这些都是很不错的网页设计软件。接下来要做的就是通过软件的操作，将设计的蓝图变为现实，最终的集成一般是在Dreamweaver里完成的。设计一定要有创意，这是最基本的要求，没有创意的设计是失败的。在制作的过程中，会碰到许多问题，其中最重要的莫过于页面的配色了。上一页下一页返回任务一：网页设计与布局基础可以先确定一种能表现主题的主体色，然后根据具体需求，应用颜色的近似和对比来完成整个页面的配色方案。整个页面在视觉上应是一个整体，以达到和谐、悦目的视觉效果。3.网页设计的基本原则网页设计一般遵循统一、连贯、分割、对比及和谐的原则。（1）统一是指网页的整体性和一致性。网页的整体效果是至关重要的，网页中各个板块的设计风格要协调一致。（2）连贯是指要注意页面的相互关系。设计中应利用各组成部分在内容上的内在联系和表现形式上的相互呼应，实现视觉上和心理上的连贯，使整个页面设计的各个部分极为融洽，犹如一气呵成。（3）分割是指将页面分成若干小块儿，小块儿之间有视觉上的不同，这样可以使浏览者一目了然。在信息量很大时为了使浏览者能够看清楚，就要注意到将画面进行有效分割。上一页下一页返回任务一：网页设计与布局基础（4）对比就是通过矛盾和冲突，使设计更加富有生机。对比的手法很多，如多与少、曲与直、强与弱、长与短、粗与细、主与次、黑与白、动与静、美与丑等。在使用对比时应慎重，对比过强容易破坏美感，影响统一。（5）和谐是指整个页面符合美的法则，浑然一体。三、常用的网页设计软件制作一个精美的网页，需要综合利用各种网页制作工具才能完成，下面简单介绍常用的网页设计软件。1.网页编辑排版软件DreamweaverDreamweaver是网页设计与制作领域中用户最多、应用最广、功能最强的软件，无论在国内还是国外，它都是备受专业Web开发人员喜爱的软件。随着DreamweaverCS3的发布，更坚定了Dreamweaver在网页设计与制作领域中的地位。上一页下一页返回任务一：网页设计与布局基础Dreamweaver用于网页的整体布局和设计，以及对网站进行创建和管理，被称为三剑客之一，利用它可以轻而易举地制作出充满动感的网页。图1-1-11所示是DreamweaverCS3的工作界面。2.网页动画制作软件FlashFlash是一款非常优秀的交互式矢量动画制作工具，能够制作包含矢量图、位图、动画、音频、视频、交互式动画等所有内容在内的站点解决方案。为了吸引浏览者的兴趣和注意，传递网站的动感和魅力，许多网站的介绍页面、广告条、按钮，甚至整个网站，都是采用Flash制作出来的。由于Flash编制的网页文件比普通网页文件要小得多，所以极大加快了浏览速度，使它成为一款十分适合动态Web制作的工具。图1-1-12所示是FlashCS3的工作界面。上一页下一页返回任务一：网页设计与布局基础3.网页图像制作软件Photoshop最常用的网页图像处理软件有Photoshop和Fireworks，其中Photoshop凭借其强大的功能和广泛的使用范围，一直占据着图像处理软件的领先地位。Photoshop在图像合成、图像处理和照片处理中可以实现非常完美的效果。图1-1-13所示是PhotoshopCS3的工作界面。四、网页版面布局设计网页的版面设计是基于内容的，是从网页的实用功能和审美功能两方面来说的。虽然网页设计不同于平面设计，但它们有许多相近之处，应加以利用和借鉴。为了达到最佳的视觉表现效果，应讲究整体布局的合理性，使浏览者有一个流畅的视觉体验。1.网页版面布局原则网页布局要遵循以下的原则。上一页下一页返回任务一：网页设计与布局基础（1）主次分明，中心突出。在一个页面上，必须考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的位置。重要的文字和图像一般可以安排在这个位置，在视觉中心以外的地方可以安排次要的内容，这样在页面上就突出了重点，做到了主次分明。（2）大小搭配，相互呼应。较长的文章或标题，不要编排在一起，它们之间要有一定的距离；同样，较短的文章，也不能编排在一起。图像的安排也是这样，要互相错开，使大小图像之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。上一页下一页返回任务一：网页设计与布局基础（3）图文并茂，相得益彰。文字与图像要密切配合，互相衬托，那样既能活跃页面，又可以使网页有丰富的内容。如果页面上文字太多，就会显得沉闷，缺乏生气；反之，如果页面上图像太多，缺少文字，则必然会减少页面的信息容量。（4）简洁一致性。保持简洁的常用做法是使用醒目的标题。另一种保持简洁的做法是限制所用的字体和颜色的数目。一般每个页面使用的字体不超过3种，使用的颜色应少于256种。要保持一致性，可以从页面的排版入手，各个页面使用相同的页边距，文本和图形之间保持相同的间距，主要图形、标题或符号旁边留下相同的空白。上一页下一页返回任务一：网页设计与布局基础（5）文本和背景的色彩。考虑到大多数人使用256色显示模式，因此一个页面显示的颜色不宜过多，应当控制在256色以内。主题颜色通常只需要2～3种，并采用一种标准色。2.点、线、面的构成点、线、面是构成视觉空间的基本元素，是表现视觉形象的基本设计语言。网页设计实际上是如何处理好三者的关系，因此不管是哪一种视觉形象或者版式构成，归根结底，都可以归纳为点、线和面。点、线和面相互依存，相互作用，可以组合成各种各样的视觉形象和千变万化的视觉空间。（1）点的视觉构成。点有集中视线、紧缩空间、引起注意的功能。在网页中，一个单独而细小的部分可以称为点。上一页下一页返回任务一：网页设计与布局基础点也可以是一个网页中相对微小单一的视觉形象，如一个按钮等。点是相对线和面而存在的视觉元素，也是构成网页的最基本单位，若使用得当，则可以起到画龙点睛的作用。一个网页往往需要由数量不等、形状各异的点来构成。点的形状、大小、位置、聚集和发散，能够给人带来不同的心理感受。（2）线的视觉构成。点延伸形成线。线在页面中表示方向、位置、长短、宽度、形状、质量和情绪。线是分割页面的主要元素之一。线的总体形状有垂直、水平、倾斜、几何曲线、自由线几种。直线给人以速度明确而锐利的感觉。水平线代表平稳、安定、广阔，具有踏实感。垂直线则有强烈的上升及下落趋势，可增加动感。斜线造成视觉的一种不安定。曲线则优美轻快、富于旋律。上一页下一页返回任务一：网页设计与布局基础将不同的线运用到页面设计中，可以充分地表达所要体现的东西，并会获得不同的效果。线条除了体现情感外，还能够利用粗细、虚实、渐变和放射来产生深度空间和广度空间的效果。（3）面的视觉构成。面是无数点和线的组合，其具有一定的面积和质量，占据空间的位置最多，因此相比点和线来说，视觉冲击力更强大。面可以分为方、圆、三角、多边形和有机切面等几种形式。面具有鲜明的个性和情感特征。只有合理地安排好面的关系，才能设计出充满美感，同时兼具艺术性和实用性的网页作品。五、网页布局方法在制作网页之前，可以先布局出网页的草图。网页布局的方法有两种，一种为纸上布局，另一种为软件布局，下面分别进行介绍。上一页下一页返回任务一：网页设计与布局基础1.纸上布局法有些设计者在制作网页时不喜欢先画出页面的布局草图，而是直接在网页设计软件中边设计布局边添加内容。这种不打草稿的方法难以设计出优秀的网页，所以在开始制作网页时，应先在纸上画出页面的布局草图。首先在纸上画出象征浏览器窗口的矩形，表示布局的范围。新建的页面就像一张白纸，没有任何表格、框架和约定俗成的东西，设计者可以尽可能地发挥想象力，将想到的“景象”画上去。这属于创造阶段，不必讲究细腻和工整，也不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。草图可以尽可能地多画几张，最后从中选定一张最满意的来继续创作。上一页下一页返回任务一：网页设计与布局基础2.软件布局法如果不喜欢用纸来画布局示意图，还可以利用Photoshop、Fireworks等软件来完成这些工作。不像用纸来设计布局，利用软件可以方便地使用颜色和图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。六、常见的版面布局形式网页的版面布局主要指网站主页的版面布局，其他网页的版面与主页风格基本一致。为了达到最佳的视觉表现效果，应讲究整体布局的合理性，使浏览者有一个流畅的视觉体验。常见的版面布局有“国”字型、“厂”字型、“框架”型、“封面”型和Flash型。1.“国”字型布局“国”字型也称为“同”字型，是一些大中型网站经常用的布局类型。上一页下一页返回任务一：网页设计与布局基础这种布局的最上面是网站的标志以及横幅广告条，接下来就是网站的主要内容，左右分别列出一些栏目，中间是主要部分，最下部是网站的一些基本信息。这种结构的优点是充分利用版面，信息量大；缺点是页面显得拥挤，不够灵活。图1-1-17所示的网站首页就采用了“国”字型布局。2.“厂”字型布局“厂”字型结构布局，就是指页面顶部为横条网站标志和广告条，顶部下方左面为主菜单，右面显示正文信息，整体效果类似“厂”字，所以称之为“厂”字型布局。这是网页设计中用得最广泛的一种布局方式，一般应用于企业网站的二级页面中。这种布局的优点是页面结构清晰、主次分明；缺点是规矩呆板，如果细节色彩搭配不好，很容易让人看之无味。图1-1-18所示的网站就采用了“厂”字型布局。上一页下一页返回任务一：网页设计与布局基础3.“框架”型布局“框架”型结构布局又分为左右框架型、上下框架型等。一般左面或上面是导航链接，有时最上面会有一个小的标题或标志，右面或下面是正文。一般见到的大型论坛都是这种结构，有一些企业网站也喜欢采用这种结构类型。因为这种类型的布局结构清晰，使人一目了然。图1-1-19所示的网页就是采用的上下“框架”型布局。4.“封面”型布局“封面”型结构布局主要出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者是一个“进入”的链接，甚至直接在首页的图片上做链接而没有任何提示。这种类型的布局如果处理得好，会给人带来赏心悦目的效果。图1-1-20所示的网站首页就是采用的“封面”型布局。上一页下一页返回任务一：网页设计与布局基础5.Flash型布局Flash型结构布局与“封面”型结构布局类似，只是Flash型采用了目前非常流行的Flash技术。与“封面”型不同的是，由于Flash强大的功能，Flash型布局页面所表达的信息更丰富。图1-1-21所示的网页就采用了Flash型布局。

上一页返回任务二：网站建设基础在设计网页之前，首先要了解并确定网站建设的基本流程。不同类型的网站其设计与制作的过程也不一样，但是整体的基本流程是一样的。学习本章后可以掌握网站建设的基本流程和网站建设中的一些规范，对网站建设有个基本的了解，为后面具体创建网站打下基础。一、网站建设规范任何一个网站开发之前都需要定制一个开发约定和规则，这样有利于项目整体风格的统一和代码的维护与扩展。由于网站项目开发的分散性、独立性、整合的交互性等，因此定制一套完整的约定和规则就显得尤为重要。这些规则和约定需要与开发人员、设计人员和维护人员共同讨论定制，整个开发过程都将严格按规则或约定开发。下一页返回任务二：网站建设基础1.组建开发团队规范在接手项目后的第一件事就是组建团队，根据项目的大小团队可以有几十人，也可以只有几个人；团队中可以包括项目经理、策划、美工、程序员、网页制作人员和测试员。（1）项目经理负责项目总体设计、开发进度的定制和监控、开发规范的定制和各个环节的评审工作，并协调各个成员小组之间的开发。（2）策划提供详细的策划方案和需求分析，还包括后期网站推广方面的策划。（3）美工根据策划和需求设计网站VI、界面和Logo等。（4）程序员根据项目总体设计来设计数据库和功能模块。（5）网页制作人员负责将程序员的代码和界面融合到一起，还可以制作网站的相关页面。上一页下一页返回任务二：网站建设基础（6）测试员负责测试程序。2.开发工具规范网站开发工具主要分为两部分，第一部分是网站前台开发工具，第二部分是网站后台开发环境。下面分别简单介绍这两部分需要使用的软件。网站前台开发主要是指网站页面的设计与制作，包括网站整体框架建立、常用图片和Flash动画设计等，主要使用的软件是AdobePhotoshop、Dreamweaver和Flash等。网站后台开发主要指网站动态程序的开发和数据库的创建，主要使用的软件和技术是JSP和数据库。JSP是一种非常优秀的网站程序开发语言，以全面的功能和简便的编辑方法受到众多网站开发者的欢迎。数据库系统的种类非常多，目前以关系型数据库系统最为常见。上一页下一页返回任务二：网站建设基础3.超链接规范网页中的链接按照链接路径的不同可以分为3种形式：“绝对路径”、“相对路径”和“根目录相对路径”。小网站由于层次简单，文件夹结构只有两三层，而且网站内容和结构的改动较小，所以使用“相对路径”是完全可以胜任的。当网站的规模大一些的时候，由于文件夹结构越来越复杂，且基于模板的设计方法被广泛使用，使用“相对路径”会出现如“超链接代码过长”、“模板中的超链接在不同的文件夹结构层次中无法直接使用”等问题。此时使用“根目录相对路径”是理想的选择，它可以使超链接的指向变得绝对化，无论在网站的哪一级文件夹中，“根目录相对路径”都能够准确指向。上一页下一页返回任务二：网站建设基础当网站规模再度增大，发展成为拥有一系列子网站的网站群的时候，各个网站之间的超链接就不得不采用“绝对路径”了。为了方便网站群中的各个网站共享，过去在单域名网站中以文件夹方式存放的各种公共设计资源，最好采用独立资源网站的形式进行存放，各子网站可以使用“绝对路径”对其进行调用。网站的超链接设计是一个很老的话题，而且也非常重要。设计和应用超链接确实是一项对设计人员的规划能力要求非常高的工作，而且这些规划能力多数是靠经验积累来获得的，所以要善于和勤于总结。4.文件夹和文件命名规范文件夹命名一般采用英文，长度一般不超过20个字符，命名采用小写字母。文件名称统一用小写的英文字母、数字和下画线的组合。命名原则的指导思想一是使工作组的每一个成员能够方便地理解每一个文件的意义；上一页下一页返回任务二：网站建设基础二是当在文件夹中使用“按名称排列”命令时，同一种大类的文件能够排列在一起，以便进行查找、修改和替换等操作。在给文件和文件夹命名时应注意以下规则。（1）尽量不使用难理解的缩写词。（2）不重复使用本文件夹，或者其他上层文件夹的名称。（3）加强对临时文件夹和临时文件的管理。（4）在文件以及文件夹的命名中避免使用特殊符号。（5）在组台词中使用连字符。5.代码设计规范一个良好的程序编码风格有利于系统的维护，代码也易于阅读和查错。在编写代码时应注意以下规范。上一页下一页返回任务二：网站建设基础（1）大小写规范。HTML文件是由大量标记组成的，如<head>、<tr>、<body>等，每个标记又由各种属性组成，标记有起始和结尾标记。每一个标记都有名称和若干属性，标记的名称和属性都在起始标记内标明。HTML语言本身不区分大小写，如<head>和<HEAD>是一样的，但作为严谨的网页设计师，应该确保每个网页的HTML代码使用统一的大小写方式。习惯上将HTML代码使用“小写”书写方式。（2）字体和格式规范。良好的代码编写格式能够使团队中所有设计人员更好地进行代码维护。规范化代码编写的第一步是统一编写环境，设计团队中所使用的编写软件应尽可能一致。上一页下一页返回任务二：网站建设基础代码的文本编辑要尽可能使用等宽字符，而不是等比例字符，这样可以很容易地进行代码缩进和文字对齐调整。等宽字符的含义是指每一个英文字符的宽度都是相同的。（3）注释规范。网页中的注释用于代码功能的解释和说明，以提高网页的可读性和可维护性。注释的内容应随着被注释代码的更新而更新，不能只修改代码而不修改注释；不要将注释写在代码后，而应该写在相应代码的前面，否则会使注释的可读性下降。如果某个网页是由多个部件组合而成的，而且每个部件都有自己的起始注释，那么这些起始注释应该配对使用，如Start/Stop、Begin/End等，而且这些注释的缩进应该一致。上一页下一页返回任务二：网站建设基础不要使用混乱的注释格式，如在某些页面使用“*”，而在其他页面使用“#”，而应该使用一种简明、统一的注释格式，并且在网站设计中贯穿始终。应减少网页中不必要的注释，但是在需要注释的地方，应该简明扼要地进行注释。使用注释的目的是为了让代码更容易维护，但是过于简短和不严谨的注释将同样妨碍设计人员的理解。二、网站建设的基本流程创建网站是一个系统工程，有一定的工作流程，只有道循这个步骤，才能设计出满意的网站。因此在制作网站前，先要了解网站建设的基本流程，这样才能制作出更好、更合理的网站。1.网站整体规划规划—个网站，可以用树状结构先把每个页面的内容大纲列出来。尤其当要制作一个大型网站的时候，上一页下一页返回任务二：网站建设基础特别需要把架构规划好，还要考虑到以后的扩充性，以免更改整个网站的结构。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，只有在制作网页之前把这些方面都考虑到了，才能在制作时胸有成竹，也才能制作出有个性、有特色并具有吸引力的网页。2.确定目标浏览者确定站点目标后，还需要判断哪些浏览者会访问自己的站点，这通常与站点的主题紧密相关。为了使站点能够吸引更多的浏览者，还应该充分考虑到浏览者所使用的计算机类型和操作平台、平均使用的连接速度及他们使用的浏览器种类等，这些因素都会影响浏览者对自己网页的访问。上一页下一页返回任务二：网站建设基础另外，还要充分了解浏览者所使用的浏览器的种类，这就需要使站点具有更大的浏览器兼容性。3.确定站点风格网站的风格是指网站的整体形象给浏览者的综合感受，是站点不同于其他网站的地方，如色彩、技术、交互方式等，独特的网站风格能给浏览者以深刻的印象。（1）确立风格的基础。确信风格是建立在有价值的内容之上的，这是最基本的，也是毋庸置疑的。（2）确立网站给人的印象。①明确网站要给人的总体印象。例如，网站是创意型的还是专业技术型的，是有美感的还是有冲击力的。上一页下一页返回任务二：网站建设基础②确立网站独特的主色调。③具有令人印象深刻的页面。④定位网站的形象，如果把网站比作一个人，那么他是成熟的中年人还是顽皮的儿童，是奔放的牛仔还是自信的创业者？⑤使浏览者和网站能顺利地进行交互。（3）印象的加强。在明确自己的网站印象后，开始努力建立和加强这种印象。设计者可以从以下几个方面来考虑。①使Logo尽可能地出现在每个页面的页眉、页脚或背景上。②突出标准色彩，文字的链接色彩、图片的主色彩、背景色和边框色彩等尽量与标准色彩一致。上一页下一页返回任务二：网站建设基础③突出标准字体，在关键的标题、菜单和图片中使用统一的标准字体。④准备一条朗朗上口的宣传标语，将其放在banner中或放在其他醒目的位置，告诉浏览者网站的特色是什么。⑤文字内容使用统一的语气和人称，即使是多个人合作维护，也要让浏览者感觉是同一个人写的。⑥使用统一的图片处理效果，如阴影效果的方向、厚度和模糊程度都必须相同。⑦创造一个网站特有的符号和图标。⑧用自己设计的花边、线条、点等。⑨展示网站获得的荣誉和成功作品。⑩告诉网友关于网站设计者的真实故事和想法。上一页下一页返回任务二：网站建设基础风格的形成不是一次完成的，是在实践中不断地强化、调整和修饰而逐渐形成的。4.收集资源首先，要新建一个总目录，用来存放网站的所有文件，然后再在这个目录下建立两个分别为“文字资料”和“图片资料”的子目录。放入目录中的文件名最好全部用英文小写，因为有些主机不支持英文大写和中文。（1）文本内容素材的收集。可以从网络、书本或报刊上找到需要的文字材料，也可以自己编写相关的文字材料，并将这些素材制作成Word文档保存在“文字资料”子目录下。收集的文本素材既要丰富，又要便于有机地组织，这样才能做出内容丰富、整体感强的网站。上一页下一页返回任务二：网站建设基础（2）动画图像素材的收集。只有文本内容的网站对于访问者来说是枯燥乏味、缺乏生机的。如果加上艺术内容素材，如静态图片、动态图像和音像等，将使网页充满动感与生机，也将吸引更多的访问者。这些素材主要来自以下3个方面。①从CD-ROM中获取。②利用现成图片或自己拍摄。③网页上可以用一些动画与特效增加主页的美观与功能，动画可以从网上下载。5.设计网页图像在整体规划好网站和搜集完资料之后就需要设计网页图像了，网页的图像设计包括Logo、标准色彩、标准字、宣传广告和首页等的设计。上一页下一页返回任务二：网站建设基础（1）设计网站标志。标志可以是中文和英文字母，也可以是符号和图案等。标志的设计创意应当来自网站的名称和内容，如网站内有代表性的人物、动物或植物，可以将它们加以卡通化或艺术化。专业网站可以以本专业有代表的物品作为标志。最常用和最简单的方式是用自己网站的英文名称作标志，采用不同的字体、字母的变形和字母的组合可以很容易制作出自己的标志。（2）设计网站色彩。网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩，用于网站的标志和主色块，给人以整体统一的感觉。其他色彩也可以使用，但应当只是作为点缀和衬托，绝不能喧宾夺主。一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。上一页下一页返回任务二：网站建设基础（3）设计网站字体。和标准色彩一样，标准字体是指用于标志和导航栏的特有字体。一般网页默认的字体是宋体。为了体现站点的与众不同和特有风格，可以根据需要选择一些特别字体。（4）设计网站宣传广告。网站的宣传广告也可以说是网站的精神、主题与中心，或者是网站的目标，通常用一句话或者一个词来高度概括。而用富有气势的话或词语来概括网站进行对外宣传时，可以收到较好的效果。（5）首页设计包括版面、色彩、图像、动态效果、图标等风格设计，也包括banner、菜单、版权等模块设计。6.制作网页设计完网页图像后，就可以按照规划逐步制作网页了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂的顺序来进行制作。上一页下一页返回任务二：网站建设基础所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是指先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要灵活运用模板，这样可以极大地提高制作效率。图1-2-5所示为制作好的模板网页。7.开发动态网站模块在页面设计中如果要实现动态功能，就需要开发动态功能模块。网站中常用的功能模块有搜索功能、留言板、博客、在线购物、论坛及聊天室等。（1）搜索功能。搜索功能是使浏览者在短时间内，快速地从大量的资料中找到符合要求的资料。这对于资料非常丰富的网站来说非常有用。要建立一个搜索功能，就要有相应的程序以及完善的数据库支持。上一页下一页返回任务二：网站建设基础（2）留言板。留言板、论坛及聊天室是为浏览者提供信息交流的地方。浏览者可以围绕个别产品、服务或其他话题进行讨论。顾客也可以提出问题和咨询，或得到售后服务。但是聊天室和论坛是比较占用资源的，一般只有大中型的网站才会建设论坛和聊天室。（3）新闻发布系统。新闻发布系统是用于提供方便直观的页面文字信息的更新维护界面，它能够提高工作效率和降低技术要求，非常适用于经常更新的栏目或页面。图1-2-7所示为新闻发布系统。（4）在线购物。在线购物是实现电子交易的基础，用户将感兴趣的产品放入自己的购物车，以备最后统一结账。当然用户也可以修改购物的数量，甚至将产品从购物车中取出。上一页下一页返回任务二：网站建设基础用户选择结算后系统自动生成订单。图1-2-8所示为购物系统界面。8.申请域名和空间域名是企业或事业单位在互联网上进行相互联络的网络地址。在网络时代，域名是企业、机构进入互联网必不可少的身份证明。注册域名前应该在域名查询系统中查询所希望注册的域名是否已经被注册了。几乎每一个域名注册服务商在自己的网站上都提供查询服务。国内域名顶级管理机构CNNIC的网站是www.cnnic.net，可以通过该网站查询相关的域名信息。图1-2-9所示为CNNIC的网站首页。域名注册的流程与方式比较简单，首先可以通过域名注册商或一些公共的域名查询网站查询所希望注册的域名是否已经被注册，如果没有，则需要尽快与一家域名注册服务商取得联系，告诉他们自己希望注册的域名及付款方式。上一页下一页返回任务二：网站建设基础域名属于特殊商品，一旦注册成功是不可退款的，所以通常情况下，域名注册服务商需要先收款。当域名注册服务商完成域名注册后，域名查询系统并不能立即查询到该域名，因为全球的域名WHOIS数据库更新需要1～3天的时间。网站是建立在网络服务器的一组计算机文件，它需要占据一定的硬盘空间，这就是一个网站所需的网站空间。一般来说，一个标准中型企业网站的基本网页HTML文件和网页图片需要8MB左右的空间，加上产品照片和各种介绍性页面，一般在15MB左右。除此之外，企业可能还需要存放反馈信息和备用文件的空间，这样，一个标准的企业网站总共需要30～50MB的网站空间。当然，如果是从事网络相关服务的用户，可能有大量的内容要存放在网站空间中，这样就需要申请更大的空间。上一页下一页返回任务二：网站建设基础9.测试与发布上传网页制作完毕，最后要发布到Web服务器上，才能够让全世界的朋友观看。现在进行网站上传的工具有很多，可以采用Dreamweaver自带的站点管理上传文件，也可以采用专门的FTP软件上传。利用这些FTP工具，可以很方便地把网站发布到服务器上。网站上传以后，要在浏览器中打开自己的网站，并逐页逐个链接进行测试，发现问题，及时修改，然后再上传测试。10.网站的推广网页做好之后，还要不断地进行宣传，这样才能让更多的朋友认识它，以提高网站的访问率和知名度。网站推广的方法有很多，如到搜索引擎上注册、网站交换链接和添加广告链接等。上一页下一页返回任务二：网站建设基础网站推广是网站获得有效访问的重要步骤，合理而科学的推广计划能令企业网站收到期望的效果。网站推广作为电子商务服务的一个独立分支正显示出其巨大的魅力，并越来越引起企业的高度重视和关注。上一页返回任务三：使用PhotoshopCS3项目1：网站首页（一）一般的博客网站首页会包括标题与个人信息、导航条、博文等内容。下面利用PhotoshopCS3设计图1-3-1所示的网站首页，具体操作如下。【操作步骤】1.新建文件“新建”对话框如图1-3-2所示。2.图层解锁双击背景图层如图1-3-3所示，弹出图1-3-4所示的对话框，单击“确定”按钮就可以完成给背景图层解锁。3.绘制选区使用矩形选框工具绘制矩形区域如图1-3-5所示。下一页返回任务三：使用PhotoshopCS34.渐变填充（1）新建图层1，单击渐变工具图标，如图1-3-6所示，弹出“渐变编辑器”对话框，如图1-3-7所示，设置色标值如图1-3-8和图1-3-9所示。（2）在图层1的选区中进行渐变色填充如图1-3-10所示。5.单行选区和颜色填充新建图层2，使用单行选框工具如图1-3-11所示，绘制一行虚线选框，并填充颜色如图1-3-12所示，按组合键Alt+Del填充选区的颜色（使用前景色填充），效果如图1-3-13所示。上一页下一页返回任务三：使用PhotoshopCS3项目2：网站首页（二）【操作步骤】1.路径、描边、羽化、从选区中减去（1）使用矩形选框工具，羽化值设置为1px，绘制一个矩形选区。新建一个图层3，然后对选区进行渐变填充，渐变颜色的色标按图1-3-28和1-3-29所示进行设置，填充效果如图1-3-30所示，按Ctrl键+图层3的图层预览框，可以使图层3中的元素载入选区，然后对选区执行从选区中减去命令，如图1-3-31所示，执行效果如图1-3-32所示，对剩余选区填充渐变填充色中的左色标颜色，如图1-3-33所示。最后使用圆角矩形工具绘制矩形，如图1-3-34所示，把路径载入选区如图1-3-35所示，并选择菜单中“编辑”→“描边”命令，如图1-3-36所示。上一页下一页返回任务三：使用PhotoshopCS32.复制图层按组合键Ctrl+J复制图层3，并使用移动工具把复制的图层移动到适合的位置，如图1-3-37所示。3.文字工具选择横排文字工具，并在图层上单击，自动生成文字图层4如图1-3-38所示。在图层4上输入文字，在文字工具栏上设置适合的数据如图1-3-39所示，并将文字调整到适合的位置，如图1-3-40所示。项目3：网站首页（三）【操作步骤】1.自由变换文字“个人中心”下面的矩形不够长，通过图层面板的眼睛可以测试出，需要将图层3副本3拉长，就是按组合键Ctrl+T来完成“自由变换”命令，上一页下一页返回任务三：使用PhotoshopCS3也可以选择菜单“编辑”→“自由变换”命令完成同样的操作，现在图层上的矩形处出现了一个有八个控制点的框，只要拖动控制点就可以把矩形拉长如图1-3-48所示，大小适合了以后按Enter键结束操作。2.链接图层为了方便操作要把文字图层和四个矩形块图层链接起来，选中文字图层然后按住Shift键选中图层3，即可选中这5个图层了，然后单击“链接图层”按钮，如图1-3-49所示，这5个图层右边都出现了锁链图标，表示这些图层被链接了，现在可以一起拖动文字和矩形块到任意位置了。3.图形工具（1）使用圆角矩形工具绘制一个矩形路径，然后把路径载入选区。新建图层4，在图层4上给路径描边如图1-3-50所示，上一页下一页返回任务三：使用PhotoshopCS3然后使用矩形选框工具选中矩形下边如图1-3-51所示，按Delete键删除矩形框的下边，把图层2那条直线的相应位置也用同样的方法删除一段如图1-3-52所示，这样就像矩形框与直线相连的效果了。（2）使用文字工具输入文字如图1-3-53所示，当需要使输入的文字显示出不同颜色的时候只要选中相应的文字然后在工具栏的颜色板选中想要的颜色即可，输入的文字可以按Enter键实现换行，当鼠标在文字附近呈现实心箭头和四方向箭头形状的时候实现文字移动操作。4.合并图层（1）新建图层5，使用直线工具，在工具栏进行设置如下图1-3-54所示。在图层5上绘制直线段，并且再复制2个图层5（按组合键Ctrl+J），把它们摆到适当的位置如图1-3-55所示，最后把图层5和两个副本合并，按组合键Ctrl+E。上一页下一页返回任务三：使用PhotoshopCS3（2）使用矩形工具的路径方式，在画布偏左的位置绘制一个矩形路径。新建图层6，并执行路径描边命令，描边宽度为1px，作为博客的个人信息栏如图1-3-56所示。（3）新建图层7，使用矩形选框工具绘制矩形选区，然后使用渐变工具填充该区域，使用三个色标的渐变来填充，如图1-3-57所示，三色标分别为#9bc7b6、#9ac5b2、#8ab9a7，最后选择菜单“编辑”→“描边”命令给矩形描边，完成图层7的操作。5.图层样式（1）使用椭圆选框工具绘制椭圆选区，羽化值设置为12。新建图层8，在图层8上进行填充，颜色为#d1a0b3，按组合键Alt+Delete，效果如图1-3-58所示，然后使用矩形选框工具选中不需要的部分将其删除并把剩余的半椭圆移动到适当的位置。按组合键Ctrl+T完成图形的自由变换调整。上一页下一页返回任务三：使用PhotoshopCS3在图层8右击选择“混合选项”命令，弹出图层样式对话框，从中设置数据为外发光，发光颜色为#d1a0b3，不透明度59%，范围50%，如图1-3-59所示，按组合键Ctrl+D取消选区，完成图层8的操作。（2）将图层6和图层7进行链接，然后复制这两个链接好的图层，放在画布右侧用于放置博文内容，用自由变换命令改变图形大小，再把图层8进行复制，然后放在右边。（3）使用文字工具输入文字，如图1-3-62所示。（4）打开一张博客人物图片，使用移动工具直接把打开的图片全部移动到前面做好的首页图片中成为图层9，给照片描边，描边宽度为2px，效果如图1-3-63所示。上一页下一页返回任务三：使用PhotoshopCS3项目4：按钮的制作【操作步骤】1.制作按钮新建图层10，使用矩形选框工具绘制矩形区域，使用渐变工具进行渐变填充，设置左色标为#ebebeb，中间色标为#dadada，右色标为#ebebeb，填充效果如图1-3-81所示。新建图层11，把矩形选区上移左移以后进行描边，颜色为#cccccc，位置为居外，复制图层11并向下向右移动，然后把图层载入选区，填充颜色为#a9a9a9，效果如图1-3-82所示。把图层10和图层11以及它的副本合并，按组合键Ctrl+E或使用菜单“图层”→“向下合并”命令。至此，按钮制作完毕。然后复制多个放在需要的位置，并写上需要的文字，如图1-3-83所示。上一页下一页返回任务三：使用PhotoshopCS32.绘制虚线（1）新建图层11并使用画笔工具选择圆点型画笔，在画笔工具栏上单击“切换画笔调板”按钮，如图1-3-84所示，弹出“画笔调板”对话框，如图1-3-85所示进行设置，然后就可以绘制圆点虚线了。（2）打开新浪博客的图标，给背景层解锁，使用魔棒工具选中空白处然后按Delete键删除白色部分，只剩下文字和图标如图1-3-86所示，使用移动工具把图层放到我们制作的首页图片上，会自动生成图层12。3.制作折角效果（1）使用钢笔工具绘制一个三角形路径，将路径载入选区，新建图层13，使用渐变工具左色标为#cecfca，右色标为#7c7c7c，填充效果如图1-3-87所示。上一页下一页返回任务三：使用PhotoshopCS3在“路径”面板选择刚刚绘制的路径然后使用菜单“编辑”→“变换”→“水平翻转”命令，把三角形路径翻转，再按组合键Ctrl+T旋转角度，使两个三角形斜边对齐，如图1-3-88所示。使用钢笔工具中的转换点工具调整路径，如图1-3-89所示，然后将路径载入选区后使用渐变填充，左色标为#f1f1f1，右色标为#909090，最后描边，效果如图1-3-90所示。（2）制作“登录”和“搜索”按钮，新建图层15，先制作“登录”按钮，绘制矩形选区，填充#8694d5颜色，此按钮的制作方法和步骤（1）的方法一样。“搜索”按钮制作时，先绘制矩形选区，填充#dbd8e9颜色，描边颜色设置#a09eab。效果如图1-3-91所示。4.图层组创建组1用于放置导航条，把导航条相关的图层都拖动到组1下面，如图1-3-92所示。上一页下一页返回任务三：使用PhotoshopCS3创建组2用于放置博客个人信息框的内容，创建组3用于放置博文，创建组4用于放置登录部分，把这些组都上锁，以防误操作，整理后的图层面板如图1-3-93所示。5.切片首页制作完毕后开始切片，使用切片工具对首页进行切片，如图1-3-94所示，然后将切片保存，使用菜单“文件”→“存储为Web和设备所用格式”命令，保存为GIF格式，这些保存好的切片可以直接导入Dreamweaver或Flash中使用。上一页返回任务四：使用DreamweaverCS3DreamweaverCS3是业界领先的Web制作工具，使用该工具可以高效地设计、开发和维护网站。利用DreamweaverCS3中的可视化编辑功能，可以快速地创建网页而不需要编写任何代码，这对于网页制作者来说，其工作变得很轻松。文本是网页中最基本和最常用的元素，也是网页信息传播的重要载体。学会在网页中使用文本和设置文本格式对于网页设计人员来说是至关重要的。项目1：网站首页【操作步骤】1.创建和管理站点在使用Dreamweaver制作网页前，最好先定义一个站点，这是为了更好地利用站点对文件进行管理，尽可能地减少错误，如路径错误和链接错误。新手在做网页时，往往一个文件放在这里，另一个文件放在那里，或者所有文件都放在同一个文件夹内，从而使结构显得很乱。下一页返回任务四：使用DreamweaverCS3这里建议建立一个总的文件夹用于存放网站的所有文件，再在总文件夹内建立几个文件夹，将文件分类，如图片放在images文件夹内，HTML文件放在根目录下。如果站点比较大，文件比较多，可以先按栏目分类，然后在栏目里再进行细分。2.创建本地站点（1）打开“管理站点”对话框的方法。①在刚刚打开的Dreamweaver初始界面中选择“Dreamweaver站点”命令，如图1-4-1所示，弹出“管理站点”对话框，如图1-4-2所示。②选择菜单“站点”→“管理站点”命令，弹出“管理站点”对话框，在对话框中单击“新建”按钮，在弹出的对话框中选择“站点”命令，弹出对话框如图1-4-3所示。③在“文件”面板的站点下拉菜单中选择“管理站点”命令，如图1-4-4所示，弹出对话框。上一页下一页返回任务四：使用DreamweaverCS3（2）在弹出的“未命名站点定义”对话框中，显示的是“高级”选项卡，设置“站点名称”为“博客”；设置“本地根文件夹”为你想设置的路径，如图1-4-5所示，然后单击“确定”按钮就完成一个新站点的建立，如图1-4-6所示。3.创建文件“文件”面板的站点处右击，在弹出的快捷菜单中选择“新建文件”命令，如图1-4-7所示，把新文件命名为index.html，如图1-4-8所示，双击文件就可以在工作区自动打开文件。4.添加表格、拆分表格单击“常用”面板的表格按钮如图1-4-9所示，弹出“表格”对话框对其进行设置，如图1-4-10所示。选中表格第一行右击，从弹出快捷菜单中选择“表格”→“拆分单元格”命令，如图1-4-11所示，弹出拆分单元格对话框对其进行设置，如图1-4-12所示。上一页下一页返回任务四：使用DreamweaverCS35.在表格中插入图片、背景在单元格中插入背景图片：在工作区下方的属性面板中选中表格的第一行第一个格，在表格属性面板上单击背景项右边的文件夹按钮，如图1-4-13所示，弹出“选择图片源文件”对话框，选择需要插入的图片，并且把单元格的宽和高设置成图片的宽和高，如图1-4-14所示。这样就能完整地显示图片了，设置好的效果如图1-4-15所示。6.在表格中嵌入表格（1）在表格的第4行插入一个2行3列的新表格，属性选项区如图1-4-16所示，插入需要的图片，如果需要设置图片的对齐方式，可以选中图片然后在“属性”面板的对齐下拉菜单选择相应的对齐方式，如图1-4-17所示。如果图片所在表格的对齐方式需要改变，可以选中图片所在表格，然后在“属性”面板设置对齐方式如图1-4-18所示，此行效果如图1-4-19所示，上一页下一页返回任务四：使用DreamweaverCS3如果嵌入的表格跟原始表格贴得太紧不容易选中，可以在嵌入表格中右击，在弹出的快捷菜单中选择“表格”→“扩展表格模式”命令，如图1-4-20所示，这样操作起来就方便多了，操作好了以后仍然用同样的操作使表格恢复常态。（2）现在表格的行不够用了，需要添加行，选中整个表格，在“属性”面板的行属性修改如图1-4-21所示。（3）在变动后的表格第5行中插入一个1行4列的表格，表格左侧第1列插入个人资料的图片，第3列可以被拆分成很多行用于放置博文。（4）阿牛博客首页制作完毕后，给首页命名一个标题，如图1-4-22所示，最后效果如图1-4-23所示。上一页下一页返回任务四：使用DreamweaverCS3项目2：添加背景音乐【操作步骤】通过代码提示，可以在代码视图中插入代码。在输入某些字符时，将显示一个列表，列出完成条目所需要的选项。（1）在使用代码之前，首先选择菜单“编辑”→“首选参数”命令，弹出“首选参数”对话框，在“分类”列表中选择“代码提示”选项，将“首选参数”对话框中的所有复选框选中，并将“延迟”选项右侧的指针移动至最左端，设置为“0”s，如图1-4-32所示。（2）打开网页，在“代码”视图方式下，找到标签<body>，并在其后面输入“<”以显示标签列表，输入“<”时会自动弹出一个列表框，向下滚动该列表框并双击bgsound插入该标签，如图1-4-33所示。（3）在bgsound后面按空格键显示列表框，从中选择src标签，如图1-4-34所示，这个属性用来设置背景音乐文件的路径。上一页下一页返回任务四：使用DreamweaverCS3（4）在src右下角出现“浏览”标签，如图1-4-35所示，单击它后弹出“选择文件”对话框，从中选择一个需要的背景音乐。（5）在src选过音乐文件后，按空格键，弹出列表框，从中选择loop标签，如图1-4-45所示，在其后出现“-1”选项，最后输入“>”完成，保存文件后，浏览就能听到背景音乐了。上一页返回任务五：使用Photoshop制作banner特效项目5：发散效果【效果说明】本项目制作的是图像的发散效果，这种效果在做图像特效和网页banner中常会用到，如图1-5-1所示，下面要做的就是图1-5-2所示的效果。【创作要点】本项目主要使用“模糊滤镜”中的“动感模糊”、“径向模糊”、“表面模糊”，还有橡皮擦工具、调整图层等来完成制作。【操作步骤】（1）新建一个1024×300像素的文件，打开一张树林的图片移动到此文件中，形成图层1，按组合键Ctrl+T调节树林图层的大小，按组合键Ctrl+J复制图层，并使用菜单“编辑”→“变换”→“水平翻转”命令，如图1-5-3所示。下一页返回任务五：使用Photoshop制作banner特效因为树林不够长所以在不失去树林长宽比例的情况下把树林图层复制并翻转，可以拼接图案，这个方法是在Photoshop中简单又常用的技巧。（2）使用橡皮擦工具擦除两边的树林，橡皮擦设置如图1-5-4所示，橡皮擦工具的流量设置为16%，可以控制擦除的力度，树林效果如图1-5-5所示。把这两半树林图层按组合键Ctrl+J复制以备后用，为了不影响操作，先将副本图层的眼睛先关闭，放到图层面板的最下面。（3）将原树林图层分别执行“模糊滤镜”中的“动感模糊”和“径向模糊”命令，对于左右两边的树林可以使用不同的参数设置如图1-5-6和图1-5-7所示，效果如图1-5-8所示。通常情况下很难把参数一次就设置得非常合适，那么就可以先把滤镜的参数设置得稍小一些，然后反复多次使用，能达到同样的效果。刚刚使用过的滤镜，如果想要增强效果再次使用，只需按组合键Ctrl+F就可以。上一页下一页返回任务五：使用Photoshop制作banner特效（4）把刚才准备好的树林副本放到图层面板的最上面一层，如图1-5-9所示。对这层树林副本执行“模糊滤镜”中的“表面模糊”命令，弹出“表面模糊”对话框，从中设置半径15，阈值50，效果如图1-5-10所示。（5）添加调整图层“色相/饱和度”参数设置如图1-5-11所示，最终效果如图1-5-12所示。调整图层比直接使用菜单“图像”→“色相/饱和度”命令灵活性更强，可以随时调整更改参数设置，以便得到不同的效果，与菜单中的命令的区别在于调整图层对于它下面的所有图层都有影响，不只作用于某一个图层。项目6：发光的树叶【效果说明】在周迅的博客上有发光树叶效果的banner，如图1-5-13所示。今天我们也来做一个这样效果的banner，如图1-5-14所示。上一页下一页返回任务五：使用Photoshop制作banner特效【创作要点】本项目使用了Photoshop的色相/饱和度、图层样式、曲线、“查找边缘”滤镜等技术。【操作步骤】（1）新建一个文件，移入一个树叶的图层，给背景图层填充背景色为#d0e1aa，如图1-5-15所示。（2）现在树叶颜色比较暗，可以添加一个调整“色相/饱和度”的图层，参数设置如图1-5-16所示，效果如图1-5-17所示。（3）把树叶图层复制几个，以便制作不同效果的树叶，将其中一个树叶图层的图层样式设置为如下图1-5-18所示，效果如图1-5-19所示。上一页下一页返回任务五：使用Photoshop制作banner特效（4）另外一个树叶可以把图层样式设置成如图1-5-20和图1-5-21所示的内容，如果选择菜单“图像”→“调整”→“曲线”命令，可以得到图1-5-22所示这样的树叶。（5）对第三种树叶选择菜单“滤镜”→“风格化”→“查找边缘”命令，如图1-5-23所示，然后再设置图层样式如图1-5-24和图1-5-25所示。（6）这样可以制作多种不同效果的树叶，再布置一下它们的位置就可以得到图1-5-14的效果了。项目7：banner特效——褶皱和折叠效果【效果说明】本项目以一个实际的博客为例，如图1-5-26所示，制作了折叠效果和褶皱效果，如图1-5-27所示。上一页下一页返回任务五：使用Photoshop制作banner特效【创作要点】本项目使用了Photoshop中的通道技术、“调整”中的“曲线”技术、“滤镜”中的“渲染”技术和风格化技术以及图层样式的灵活运用方法。【操作步骤】（1）打开一幅雷锋的图片移入新建的图像文件中，按组合键Ctrl+T适当缩放移入图片的大小。（2）进入通道面板，单击新建的Alpha1通道，选择矩形选框工具，绘制一个矩形，选择渐变工具，使用黑、白线性渐变，按住Shift拖曳，如图1-5-28所示，再建一个通道Alpha2，使用相反的渐变，如图1-5-29所示。（3）把Alpha1通道载入选区，然后回到图层面板，按组合键Ctrl+M执行曲线命令，设置如图1-5-30所示，效果如图1-5-31所示。上一页下一页返回任务五：使用Photoshop制作banner特效把Alpha2通道载入选区，然后回到图层面板，按组合键Ctrl+M执行曲线命令，设置如图1-5-32所示，效果如图1-5-33所示，这样折叠效果就做好了。（4）现在开始制作褶皱效果，按D键使色板为默认的黑白色板，在背景图层上选择菜单“滤镜”→“渲染”→“云彩”命令填充图层，如图1-5-34所示，接下来，选择菜单“滤镜”→“渲染”→“分层云彩”命令，如图1-5-35所示，可以用按组合键Ctrl+F多执行几次，直到图像较为均匀为止。（5）现在来为图像添加一些立体效果。选择菜单“滤镜”→“风格化”→“浮雕效果”命令，将角度设为-45°，高度为1像素就够了，数量设到500％。这样简单的滤镜效果会使图像呈现出逼真的纸纹效果，如图1-5-36所示。如果觉得纸纹太深可以使用“高斯模糊”命令，将其设置为1，就可以了。上一页下一页返回任务五：使用Photoshop制作banner特效（6）把其他层放在背景层之上，图层样式为叠加，至此，褶皱和折叠效果就制作好了。项目8：banner特效——水珠效果【效果说明】本项目要制作的是水珠效果的脚丫印记，这个做法不仅可以用于本实例项目中，水滴露珠的效果也可以用这样的方法制作的，本项目是一个实际的博客使用的图像效果，如图1-5-37所示。【创作要点】本项目主要使用了Photoshop的钢笔工具、变换、“球面化”滤镜、“高斯模糊”滤镜、图层样式、羽化选区、椭圆选区工具来完成的。上一页下一页返回任务五：使用Photoshop制作banner特效【操作步骤】（1）新建一个图像文件，填充背景图层颜色为#9db5bf。（2）使用钢笔工具绘制一个脚掌的基本形状，如图1-5-38所示，然后使用转换点工具调节路径的弧度，如图1-5-39所示，然后把路径载入选区按组合键Ctrl+J将选取区内图像复制到新层，即图层1。（3）选择菜单“滤镜”→“扭曲”→“球面化”命令，如图1-5-40所示和菜单“滤镜”→“模糊”→“高斯模糊”命令，如图1-5-41所示。（4）双击图层1弹出“图层样式”对话框，参数设置如图1-5-42所示，然后把图层1载入选区，把选区羽化如图1-5-43所示。新建图层2，在图层2给选区填充黑色并把图层2放到图层1的下面，稍微移动一些，作为图层1的阴影，如图1-5-44所示。上一页下一页返回任务五：使用Photoshop制作banner特效（5）使用钢笔工具在脚心位置绘制一个区域，如图1-5-45所示，然后把路径载入选区。新建图层3，使用渐变填充工具在图层3进行渐变填充，色板使用从白色到透明的，效果如图1-5-46所示。使用椭圆选区工具绘制一个椭圆区域，羽化值为2。新建图层4，仍然使用刚才的渐变填充方法在图层4上填充，在图层面板上给图层4的不透明度调成31%，如图1-5-47所示。（6）新建组，把脚丫的这四个图层都放到这个组1中，给组1起名为“脚掌”。（7）脚趾的制作，用椭圆选区工具绘制椭圆，按组合键Ctrl+J将选区内图像复制到新层，即图层5。（8）对图层5进行步骤3和步骤4的操作，对图层样式参数进行调整，如图1-5-48所示，此步骤操作效果如图1-5-49所示。上一页下一页返回任务五：使用Photoshop制作banner特效（9）在脚趾上绘制一个小些的椭圆区域，操作如步骤5，得到的效果如图1-5-50所示，把脚趾的这几个图层放到组2中，把组2命名为“脚趾”，并把“脚趾”组复制4个，然后选择菜单“编辑”→“变换”→“扭曲”命令把几个脚趾调整到适当的位置，如图1-5-51所示，把五个脚趾图层合并起来。（10）一只脚丫做好以后把脚掌和脚趾图层放在一个新的组中，然后复制一个完整的脚丫，对这个复制的脚丫选择菜单“编辑”→“变换”→“垂直翻转”命令，如图1-5-52所示，再执行菜单“编辑”→“变换”命令，如图1-5-53所示。项目9：banner特效——文雅怀旧风格【效果说明】本项目制作的是文雅怀旧风格的banner，如图1-5-54所示。上一页下一页返回任务五：使用Photoshop制作banner特效【创作要点】本项目的重点是对于多个图像元素的组合，操作过程中主要使用了磁性套索工具、移动工具、色相/饱和度、变形工具、魔棒工具、切换画笔调板来完成的。【操作步骤】（1）新建一个1024×160像素的图像，打开一张键盘的素材图片如图1-5-55所示，使用矩形选区工具选取需要的一部分，使用移动工具把选取的部分移动到新建的图像中，生成图层1，按组合键Ctrl+T对图层1旋转角度，并放到合适的位置，如图1-5-56所示，这时需要把不必要的边去掉，使用魔术棒工具选中想删除的部分，按Delete键将其删除，得到效果如图1-5-57所示。（2）打开一张咖啡的素材图片，使用磁性套索工具圈选咖啡杯，如图1-5-58所示。上一页下一页返回任务五：使用Photoshop制作banner特效然后选择菜单“选择”→“修改”→“羽化选区”命令，弹出“羽化”对话框，将羽化值设为2。把咖啡杯移动到正在制作的图像中，按组合键Ctrl+T调整大小，再执行水平翻转命令，效果如图1-5-59所示。（3）打开一张树藤的图片，移入正在制作的图像中，选择菜单“编辑”→“变换”→“扭曲”命令，如图1-5-60所示，同此法把书本图片也移入进来，调整图层间的上下位置，如图1-5-61所示。（4）输入文字“东方早报·上海书评”，参数设置如图1-5-62所示。输入文字“MyBlog”，参数设置如图1-5-63所示。（5）给图像的背景层填充颜色#d1c2ab，选择工具箱的画笔工具并调整“切换画笔调板”的参数，设置如图1-5-64所示，绘制效果如图1-5-65所示。选择“斜切”命令把绘制的线条扭曲如图1-5-66所示，上一页下一页返回任务五：使用Photoshop制作banner特效然后对线条图层选择菜单“滤镜”→“画笔描边”→“喷溅”命令，参数设置如图1-5-67所示，效果如图1-5-68所示。（6）下面调整整体图像的色调，新建“色相/饱和度”调整图层，参数设置如图1-5-69所示，效果如图1-5-70所示。根据需要使用加深工具给树藤的图层加深。选择菜单“图像”→“调整”→“色相/饱和度”命令给键盘图层提高亮度。最终效果如图1-5-71所示。上一页返回图1-1-11

DreamweaverCS3工作界面返回图1-1-12

FlashCS3的工作界面返回图1-1-13

PhotoshopCS3的工作界面返回图1-1-17“国”字型布局返回图1-1-18“厂”字型布局返回图1-1-19上下“框架”型布局返回图1-1-20“封面”型布局返回图1-1-21

Flash型布局返回图1-2-5模板网页返回图1-2-7新闻发布系统返回图1-2-8购物系统界面返回图1-2-9

CNNIC网站首页返回图1-3-1网站首页返回图1-3-2“新建”对话框返回图1-3-3背景图层返回图1-3-4给背景图层解锁返回图1-3-5绘制矩形区域返回图1-3-6选择渐变工具返回

图1-3-7“渐变编辑器”对话框返回图1-3-8“选择色标颜色”对话框返回图1-3-9设置色标值返回图1-3-10渐变填充返回图1-3-11使用单行选框工具返回图1-3-12填充颜色返回图1-3-13填充后的效果返回图1-3-28“选择色标颜色”对话框返回图1-3-29设置色标颜色返回

图1-3-30填充效果返回

图1-3-31从选区减去命令返回

图1-3-32执行效果返回

图1-3-33填充渐变色返回

图1-3-34绘制矩形返回

图1-3-35载入选区返回

图1-3-36描边命令返回

图