范例学Dreamweaver+Flash+Photoshop网页制作

　　本书属于《超越》系列图书之一。本书以Photoshop CS3、Dreamweaver 8和Flash 8为基础，介绍这3个软件在网站设计方面的应用。本书由8章组成，内容主要包括：Photoshop CS3基本概述和设计网页图形，Dreamweaver8概述和文本、图像、多媒体的插入及网页定位，Flash 8的工作界面、图形编辑、网站动画设计，以及最后的网站设计综合实例。本书的源文件及素材文件请到IT教育网www．itedu．corn．crl的相关下载专区下载。本书以让读者学有所依、学有所用为宗旨，采用任务驱动知识点讲解的方式，范例丰富、情景生动、图文并茂、内容翔实，可以带给读者独特而高效的学习体验。本书可作为大、中专院校和各类电脑培训班的培训教程，也是广大电脑初、中级用户和网站设计爱好者的首选工具书。未经许可，不得以任何方式复制或抄袭本书之部分或全部内容。

暂缺《范例学Dreamweaver+Flash+Photoshop网页制作》作者简介

第1章  网页设计软件基础 1
任务一  初识Dreamweaver 8 2
相关知识点：新特点、界面组成、工具箱的用法
Dreamweaver是美国Macromedia公司开发的集网页制作和管理网站于一身的所见即所得的网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
任务二  初识Flash 8 .5
相关知识点：Flash的优点、界面组成、主要工具的作用
Flash 8是Macromedia公司推出的一种优秀的矢量动画编辑软件，Flash 8是其最新版本。利用该软件制作的动画尺寸要比位图动画文件，如GIF动画尺寸小得多，用户不但可以在动画中加入声音，视频和位图图像，还可以制作交互式的影片或者具有完备功能的网站。Flash 8还有一个可贵之处，就是可以作为艺术家的数字化草稿板。它可以帮助那些不太精通艺术的商人们，将他们的想法图形化。Flash 8所输出的文件可以被高档的图形软件所接受，专业人员可以利用这些高档的图形软件，对其做进一步的加工和完善。这样，这些专业人员就不必再从原始草稿开始创作了。
任务三  认识Photoshop CS3 .11
相关知识点：图像格式、模式、界面组成、功能简介
Photoshop是Adobe公司的王牌产品，它是一款图像处理软件，在图形图像处理领域拥有毋庸置疑的权威。无论是平面广告 设计、室内装潢，还是处理个人照片，Photoshop都已经成为不可或缺的工具。同样在网页设计方面它也是设计师不可或缺的工具，它不仅可以应用在前期网页素材的准备和处理上，而且还被广泛应用在网页的布局和效果图设计上，并且在网页制作后期它还可以优化网页上的图像输出。所以对于网页设计师来说Photoshop是不可或缺的助手。
测试题 15
第2章  网页制作入门 17
任务一  创建商业网站的本地站点 18
相关知识点：安装、配置IIS服务器、建立虚拟目录
要学会网页制作，就必须了解怎么样创建商业网站的本地站点，以用来调试网站。那么什么是IIS？IIS是Internet信息服务（Internet Infomation Server）的缩写。它是一种Web服务，Gopher Server和FTP Server全部包容在里面。IIS意味着用户可以发布网页，并且有ASP（Active Server Pages）、Java、VBScript产生页面，以及一些扩展功能。在安装IIS之前，系统必须已经安装TCP/IP。查看系统是否安装了IIS服务的最简单办法是查看系统C盘下是否存在“Inetput”文件夹，如果存在则表示已经安装过IIS服务，无须再次安装；如果没有则表示该系统还未安装IIS服务。
任务二  创建Deamweaver 8站点 23
相关知识点：建立站点、站点的管理、文件的比较、站点地图
在Dreamweaver中，“站点”一词既表示Web站点，又表示属于Web站点的文档在本地的存储位置。在开始构建Web站点之前，需要建立站点文档的本地存储位置。Dreamweaver 站点可以组织与Web站点相关的所有文档，跟踪和维护链接，管理文件，共享文件及将站点文件传输到Web服务器。
任务三  制作简历网页 36
相关知识点：输入、编辑文本 插入图片 特殊字符
IIS站点已经创建完成，而且Dreamweaver 8站点也已经建立完成，下面就来制作我们的第一个网页。来开始我们的网页制作之旅。制作什么呢？现在越来越多的人将个人简历放到个人网站、博客上，以便联系。正好张三在最近正在找工作，那么就来制作一份个人简历网页，可是怎么做呢，张三什么都不懂。没关系，下面就和张三一起制作他的第一份简历网页。
测试题 47
第3章  使用Dreamweaver编辑网页 49
任务一  制作网页快乐少年班 50
相关知识点：CSS的导入和导出、CSS属性的设置、应用样式
本节将通过制作网页快乐少年班来向读者讲解CSS在Dreamweaver中的应用，通过本节的学习读者应该学会通过设置CSS的属性来改变网页背景、网页内容样式和字体格式等。
任务二  设计日记导航页 58
相关知识点：插入表格、样式设置、插入图片、级链接的设置与应用
所谓的超链接是指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。下面就来介绍在网页中怎么样设置和应用超级链接。
测试题 73
第4章  网页布局 75
任务一  设计商业网站 76
相关知识点：Flash的插入、对齐属性、布局页面
下面将结合以前所讲的内容来制作高科技企业的首页文件，读者应重点体会在这类网页设计中的布局风格和界面色彩搭配。
任务二  制作购物网站 95
相关知识点：表格CSS、表格的套用、网页的布局、设置页面元素
表格是在网页设计中用得最多的元素，大多数的网页都是使用表格来组织的。利用表格来组织网页内容，可以设计出布局合理、结构协调和美观匀称的网页。本节将通过表格的应用来制作公司主页。
测试题 113
第5章  网页中Flash元素的制作 115
任务一  用Flash设计时装节招帖 116
相关知识点：圆角矩形半径工具，分离、组合命令
Paris时装节一直是时尚节目的焦点，作为时装节的招帖自然要有个性，毕竟这里将聚焦全球的目光。此任务将讲解时装节招帖的制作方法，通过学习读者应该学会应用圆角矩形半径按钮、分离命令和组合命令来完成图形的绘制。
任务二  制作Flash动画“古韵” 126
相关知识点：遮罩、混色器\时间轴、创建补间动画
在Flash 8的作品中，常常看到很多炫目神奇的效果，而其中不少就是用最简单的“遮罩”完成的，如水波、万花筒、百叶窗、放大镜和望远镜，等等。那么怎么样才能实现遮罩效果呢？在Flash 8.0中没有一个专门的按钮来创建遮罩层，遮罩层其实是由普通图层转化的。你只要在要某个图层上单击鼠标右键，在弹出菜单中把“遮罩”前打个钩，该图层就会生成遮罩层，“层图标”就会从普通层图标变为遮罩层图标，系统会自动把遮罩层下面的一层关联为“被遮罩层”，如果你想关联更多层被遮罩，则只要把这些层拖到被遮罩层下面就行了。此外遮罩层中的图形对象在播放时是看不到的，遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，则可以将线条转化为“填充”。被遮罩层中的对象只能透过遮罩层中的对象被看到。在被遮罩层，可以使用按钮、影片剪辑、图形、位图、文字和线条。可以在遮罩层、被遮罩层中分别或同时使用形状补间动画、动作补间动画、引导线动画等动画手段，从而使遮罩动画变成一个可以施展无限想象力的创作空间。下面我们就通过实例来讲解怎么来实现遮罩效果。
任务三  制作网页中的透明按钮 135
相关知识点：掌握弱化填充边缘、工具栏 、混色器面板、直线工具
大家知道Flash在网页制作方面有着巨大的好处，不仅是表现在动画的制作上，在绘画方面也同样出色。与其他的图形软件相比，用Flash 绘图更像在纸上绘图。因为Flash 的绘图工具更随意一些。而用Flash 绘图又不同于在纸上绘图，Flash 可以识别所画的形状、平滑所画的曲线，使“随手涂鸦”变得整洁规范。去描一幅画好的图画是学习绘画最简单的方法。因为通过描图可以很快地找到绘画的感觉。通过本实例的学习，读者将体会到用Flash 绘图是何等容易。所以下面将通过绘制透明按钮，来使读者掌握基本绘图工具的使用方法和绘图常用命令。同时还传授一些绘图技巧，利用它们可使绘图作品显得更专业。
任务四  制作运动会标志动画 146
相关知识点：填充工具、放大、复制到网格、翻转帧、元件
运动会马上就要举行了，作为校园网Flash设计者的小王却不知道运动会标志怎么设计，运动会的标志既要美观，又要体现运动的流畅美，怎样才能做到这点呢？突然他想到了Flash。通过帧的应用和动作脚本的结合就可以很好地实现流畅变化的动画效果。本节将通过设计运动会标志动画来学习复制到网格命令和翻转帧命令等，同时对帧的应用应有初步了解，特别是关键帧和普通帧的插入，以及在动画中的应用。
测试题 163
第6章  Flash动画的制作 165
任务一  iPod宣传Flash的制作 166
相关知识点：填充变形工具、直接复制命令、混色器 、动作
作为一个动画工作者，可以决定在一个场景中发生什么，以及什么时候发生。现在谈一谈有关控制的问题。动画制作者可以让鸟儿飞、让卡通人物说话，甚至可以决定它们说什么，以及说的时候是否打光。本实例将以iPod的宣传Flash为例，通过应用椭圆、填充变形等工具来绘制时尚背景画。然后调用动作面板来插入脚本，以便通过鼠标单击来控制左右声道的转换，从而实现音乐与读者的交互。
任务二  设计数码相机的Flash展示 174
相关知识点：帧动画、Alpha值、动作面板、透明度
在Flash 8的作品中，常常看到很多连贯的镜头，我们称之为动画，它让我们感觉不到跳跃。从前些年的迪斯尼动画片到当前不可思议的用计算机制作的电影，我们已经陶醉于那种将美丽的画面和动作结合到一起的效果，尽管其中的许多动作在现实生活中并不会发生。本例将制作数码相机广告，通过改变每一帧的Alpha值来实现渐变的动画效果。

任务三  制作Flash服饰网页 186
相关知识点：关键帧、脚本语言、图层位置、页面布局
Flash 特别适用于创建通过 Internet 提供的内容，因为它的文件非常小。那么用Flash来建全站不是更好，理论上是这样的。然而事实上，现在只有极少数人掌握使用Flash建立全Flash站点的技术。因为它意味着更高的界面维护能力和开发者的网站架构能力，并且需要你有很好的语言基础。当然用Flash来建站带来的好处也异常明显，即全面的控制，无缝的导向跳转，更丰富的媒体内容，用户的流畅交互，跨平台和受客户端的支持，以及与其他Flash应用方案无缝连接集成等。下面将以实例服饰网页向读者讲解Flash网站的建设，让读者了解Flash网站的优点和建设技巧。
测试题 196
第7章  Photoshop在网页设计中的应用 199
任务一  设计MY HOME网页图标 200
相关知识点：建立图层、图层的命名、文字工具、前景色、背景色
没有做不到的，只有想不到的！”—这是Adobe为Photoshop进行产品宣传的广告标语。可见Photoshop不仅在图像处理上有实力，在绘图方面也同样卓越。而这恰恰是网页设计中所需要的，一个网站首先吸引读者的往往是其网页的图像效果，而这就需要好的图片效果来支撑。然而事实上很多时候都不可能有直接的素材，这就要求自己来设计。本节将利用Photoshop自带的工具，向大家展示Photoshop强大的自绘能力，下面将以设计椭圆图形—MY HOME为例，介绍在Photoshop中最常用的新建、保存、新建和保存图形设置的前景色和背景色、建立和调整选区、使用图层面板、使用图层样式和处理文字图层等的操作。
任务二  设计POPO动漫网的LOGO 208
相关知识点：合并图层、自由变换、蒙版的应用、编辑路径
标志、徽标和商标（LOGO）是现代经济的产物，它不同于古代的印记，现代标志承载着企业的无形资产，是企业综合信息传递的媒介。标志作为企业CIS战略的最主要部分，在企业形象传递过程中，是应用最广泛、出现频率最高，同时也是最关键的元素。企业强大的整体实力、完善的管理机制、优质的产品和服务，都被涵盖于标志中，通过不断的刺激和反复刻画，深深地留在群众心中。LOGO是与其他网站链接并让其他网站链接的标志和门户，所以在网页设计中LOGO的设计是至关重要的。而Photoshop的图像设计能力在这里体现出来，它不仅可以设计出普通LOGO而且我们利用其的渐变、填充和蒙版等命令来制作出各种各样的特效。下面就开始今天的实战练习。
任务三  制作“华章工坊”电影站点 214
相关知识点：参考线、滤镜、色调、对比度、填充渐变、自由变换
在网页设计中，Photoshop最重要的作用之一就是，我们可以通过Photoshop中自带的参考线等工具来布局和规划网页的页面效果，并应用Photoshop中的滤镜、蒙版来渲染网页效果，制作出绚丽的网页，同时应用切片等命令来输出高质量小体积的网页图片。本节将用Photoshop 进行网页的设计，通过已有素材并利用Photoshop中的滤镜、蒙版、自由变形等命令来进行网页的设计，同时读者应学会怎样利用参考线来进行网站的布局规划。在网站的设计上布局是基础，没有好的布局规划是不可能设计出好网页的。下面先介绍一些网页布局的基础知识。
测试题 229
第8章  网站设计综合案例 231
任务  设计美容类整站 232
相关知识点：站点的建立、网站规划、链接、一、二级页面的设计
美容是所有女士永恒的话题，也是最能吸引眼球和最需要创作力的地方，做这类网站前一般应考虑到此类站点的浏览者多为女性，所以这类网站一般要体现出女性美，给人一种柔和亲切的感觉。这类网页一帮多采用暖色调，以吸引浏览者。本节将应用以前学过的知识来建立站点IIS服务，并建立本地文件夹用来存放网站内容，再用网页制作软件制作美容类站点的一级页面和二级页面，并通过链接来架构整站。通过本节的学习读者将对建站技术有一个整体了解，主要的是读者应该对这类站点的布局和界面设计，以及在网页建设中Flash的美化作用有一个全面了解。