1．确定你的目标

　　确定你的站点目标是什么，是当你创建一个Web站点时，应该慎重考虑的第一步。向你自己和你的客户提出一些关于站点的问题，看看你自己和大家对站点的期望是什么。通过创建这样一个站点你希望达到一个什么目的？写下你的站点目标，以便在你设计站点的整个过程中你都能清楚的记得它们。站点目标可以帮助你将注意力集中并瞄准到你的特别需要。

2．选择目标观众

　　在你确定了你通过创建你的网站达到什么目的后，你就需要确定你想让谁来访问你的站点了。这看起来像是一个蠢问题，因为大多数人都希望世界上每一个能上网的人都去访问他的站点。然而，创建一个世界上每个人都能使用的网站，是十分困难的，甚至可以说是不可能的，这正像没有一个航空公司能飞遍全球所有的航线一样。人们总是使用不同的浏览器，以不同的速度连接，并且可能没有安装某些插件。所有这些不可预期的因素都将对你的站点产生影响。这就是你需要确定一个目标观众的原因。 　　考虑那些可能被吸引到你的网站的人们，或你希望能够吸引的那些人群。你认为他们更多的在使用什么样的计算机，对他们来说主流的操作系统将是什么平台（Macintosh、Windows，或是Linux）？平均的连接速度是多少（56K调制解调器或ADSL）？他们通常使用什么样的浏览器，以及所使用的监视器的分辨率？你正在创建的站点是一个真正的Internet站点，还是一个公司内部或组织内部使用的Intranet（在Intranet中，通常每个人都使用相同的计算机操作系统和浏览器）？所有这些因素都将对你网站将以什么样的感觉呈现给用户产生巨大的影响。 　　一旦你确定了你的目标观众群，并确定了计算机的类型、连接速度，以及你的目标群体通常使用的浏览器等诸多因素，你就已经瞄准了你的设计目标。

　　例如：假如说你的目标观众是一个通常使用17英寸显示器的Windows操作系统的用户，并总是使用Internet Explorer 4.0或更高版本的浏览器。那么当你设计你的网页时，你就应该在一台Windows计算机上，在1024*768的分辨率下的Microsoft Internet Explorer浏览器中测试你的站点。尽管对你来说，你的用户中只会有极少数者在Macintosh平台上使用Netscape Navigator浏览器，但你也应该保证你的站点在那种情况下也能正常的工作，尽管可能不会达到非常好的视觉效果。

3．创建多浏览器兼容的站点

　　当你创建你的站点时，你应该意识到你的来宾们的浏览器可能是花样繁多的。要创建具有最大兼容性的站点，在设计时就要给出约束条件。

　　现在有超过两打的浏览器被使用，它们中大多数又已经不止发行了一个版本。就算你的目标只使用Netscape Navigator和Microsoft Internet Explorer，你也应意识到并不是每个人都在使用这些浏览器的最新版本。只要你的网站是在Web上的，迟早总会有某个使用Netscape Navigator 2.0或Lynx（仅支持文本）的人来到你的站点。

　　在某些情况下，你不需要创建跨浏览器兼容的站点。例如：如果你的站点只在你公司的内部网上可用，并且你知道公司的雇员使用的都是同一种浏览器。在这种情况下，你可以针对这种浏览器优化你的站点。同样，如果你正在创建的HTML内容将被发布到一张CD-ROM上，而且随同HTML内容一起还将发布一个浏览器，那么你可以假定你的用户都有权使用这个特别的浏览器。

　　但在大多数情形下，网站是为公共消费设计的，使你的网站可以被尽可能多的浏览器浏览是个不错的主意。挑选一个或两个主流的浏览器作为你的目标，以这些浏览器为目标设计你的站点，但偶尔也用其它的浏览器探索一下站点，以避免出现太夸张的不调和。

4．通常要考虑的问题

　　从布局、动画、多媒体内容，以及交互性上考虑，你的站点越复杂，它就越难以对多种浏览器兼容，例如并不是所有的浏览器都能运行JavaScript。不使用特殊字符的普通文本可以在所有的浏览器中很好的显示，但是如此这般的一个页面，同那些有着图像、布局，以及交互功能的复杂页面相比，就只有少得可怜的一点美学吸引力了。因此，在最大的效果设计和最大的兼容性设计之间找到一个平衡。

　　为那些最重要的页面设计多个版本是一种有效的方法。例如：通过为你的主页设计有框架和无框架的两个版本来获得好的效果，虽然你无法预测用户的浏览器是否可以正确的处理框架，但通过双版本的设计，你可以根据浏览器的能力自动地将来宾导向最适合他们的浏览器的页面版本。

5．使用行为来检测浏览器和插件

　　你能够使用行为来确定你的来宾正在使用哪个浏览器，以及确定他们是否在浏览器中安装了某个特别的插件。

　　检查浏览器—根据来宾的浏览器的名称和版本将不同的页面发送给用户。例如：如果他们使用Netscape Navigator 4.0或更新的版本的话，你可能希望来宾去往nnpage.htm；如果他们使用Microsoft Internet Explorer 4.0或更新的版本，让他们去往iepage.htm；如果他们使用其它种类的浏览器就让他们留在当前页上。

　　检查插件—根据来宾的浏览器是否安装了某个特别的插件将来宾导向不同的页面。例如：如果他们安装了Shockwave，将用户导向shockpage.htm；如果他们没有安装Shockwave，将他们导向noshockpage.htm页。

6．组织站点结构

　　建立一个站点通常所采用的方法是首先在你的本地硬盘上建立一个文件夹，其中包含了你的站点要用到的所有文件，同时你也将在这个文件夹中创建和编辑文档。接下来的就是你周期性地拷贝那些文件到你的Web服务器，并允许其他的人浏览你的站点。这种方法比直接在Web站点创建和编辑文件要好，因为这允许你在将你的网站暴露于众目睽睽之下前，先在本地站点上测试所做的一切改变。通过测试后，你可以在某个时刻神不知鬼不觉的将文件上传到你的Web服务器，完成一次完美的网站更新任务。

　　从一开始就精心的组织你的站点，能为你以后节省下大量的时间。如果你在开始创建文档的时候，没有考虑这些文档应该分别进入你的站点层级结构中的哪个文件夹中，那么最终你的工作将终结于一个巨大的、笨拙的、塞满了各种各样文件的文件夹，或是面对一种相关的文件，却分别坐落于半打以上的、有着相似名称的文件夹的局面而一筹莫展。

　　因此，你应当按类目分解你的站点。把相关的页放进同一个文件夹。例如，你的公司的新闻发布、联系信息，以及工作职位都可以放在同一个文件夹中，而将在线产品目录放在另一个文件夹中。在必要的地方使用子文件夹。

　　你要决定在哪儿存放诸如图像和声音这样的文件。组织存放你所有的图像是一件简单的事情。例如，将它们都存放在同一个地点，以便当你想要把一幅图像插入到某个页时，你知道在哪儿能找到它。设计者们有时将整个站点中使用的非HTML文件都存放在一个被称为资产（Asset）的文件夹中。这个文件夹可以包含一些有意义的子文件夹。例如：一个图像文件夹、一个Shockwave文件夹，以及一个声音文件夹。或者你也可能在你的站点上为每组相关的页面准备一个独立的资产文件夹，如果在这些页面组中没有太多的东西要共享的话。如(图)

　　保持你的本地站点和远端服务器上的站点有同样的结构，这种相同应该是严格意义上的一致。如果你是使用Dreamweaver创建站点，并且上传了每一样东西，Dreamweaver可以保证本地站点的结构将被精确的复制到远端站点。

7．创建你的设计外观

　　如果你在真正使用Dreamweaver开始开发工作之前，仔细的计划过你的设计和布局，那么你将在以后的开发中节省下大量的时间。对于不太大的工程，这个工作可以简单到只需在一张纸上绘制出你希望的你的站点的布局和外观模型。对于更复杂的工程，你可以使用Macromedia Freehand或Fireworks来绘制你的站点的布局和外观模型。在真正开始开发你的站点之前，绘制出你的站点布局和外观模型是一件非常重要的事情，你将在以后的整个开发过程中，沿着它来进行。

　　保持你的页面的布局和设计的一致性是十分重要的。当你的每一个页面都有一个不同的外观，每一页上的导航条都出现在不同的位置时，要想指望你的用户无困惑的在你的站点中游历将是不可能。

8．设计导航方案

　　规划的另一个需要费心的地方是导航。当你设计一个站点时，你应该考虑这样的一个问题—你想让你的来宾在你的站点有怎样的一个经历？

　　“你在这里！”—让来宾时刻都清楚他们此时正处于你的站点的什么位置是可以给你的用户带来安全感的，这也包括让来宾们清楚的知道如果他们希望的话，他们将如何回到你的顶层页面。

　　搜索和索引—这将使参观者比较容易的找到他们想要的任何信息。

　　反馈—如果网站上的东西出了问题，提供一个方法让来宾可以联络网站管理员（如果合适的话），以及来宾如何同公司或网站的有关人员联系（如果这是公司的业务所希望的话）。

　　设计你的站点导航的外观。你的站点的导航条应该在你的整个的站点中都保持一致，如果你在你的主页中将导航条放置在了页面的顶部，你应当试图使你的站点中的每一个页面中的导航条都保持在这个位置。

9．计划编制和资产搜集

　　一旦你确定了你的站点的设计和外观，你就可以开始创建和搜集需要的资产了。资产可以是任何你的站点中要用到的东西，例如图像、文本，Flash电影等等。在你开始你的开发工作之前，确信你已经搜集到了你所需要的所有资产，否则，你将不得不经常的为搜集一段文本或创建一个按钮而一次次中断你的开发。

　　Dreamweaver的模板和库允许你在不同的文档中重用页面布局和页面元素。但是同从开始就使用可重用的元素创建新的页面相比，把可重用的布局和元素应用于一套已存在的页面将更加困难。

　　使用模板—如果你的许多页面将使用一样的布局，那么你就应当为那种布局计划并设计一个模板。以后，你就可以基于这个模板来创建新页了，并且如果你决定要为所有这样的页改变布局的话，你可以简单地改变模板就达到目的了。模板在协作环境中能够得到最好的使用，它可以保证协作环境中的每个人都使用同样的页面布局。

　　使用库项目—库项目可以为协作环境以外的使用提供更大的灵活性。如果你希望可以重用某些元素（图像、文本等等），或者你需要频繁的更新许多贯穿于你的整个站点的元素，你应当将这些元素做成库项目。这样，当你在以后改变这些项目时，新版本将显示在所有使用了它的页面上。

二、关于设计笔记
　　你可以通过使用设计笔记对伴随文档的额外信息保持追踪。例如：图像的源文件名、文件状态的注释。

　　举个例子：如果你将某个文档从一个站点拷贝到了另一个站点，你可以为这个文档添加一个设计笔记，注明这个文档的原始文件在另外的站点目录中。以后，如果你更新了，或是别人更新了这个文档，你将知道你还需要更新这个文档的原始文档。

　　你也可以使用设计笔记对那些属于文档的，但却是敏感的、出于安全因素考虑不能放进文档中的信息保持跟踪。例如该文档的创建秘密、特别的价格等等。

　　设计笔记也常常用于与团队中其他成员进行有关开发中遇到的问题的交流。

　　在站点窗口中，一个被捆绑设计笔记的文件的Notes列中会有一个设计笔记图标。

1．使用设计笔记

　　你可以为你的站点中的每一个文件或模板创建一个设计笔记文件。

　　注意：如果你把设计笔记加到一个模板上，基于该模板的文档不会继承设计笔记。

　　你也可以为你的Applet小程序、ActiveX控件、图像、Flash电影文件、Shockwave对象，以及你的文档中的图像域创建设计笔记。

　　建立设计笔记的步骤如下：

1）选择Site > Define Sites，选择一个站点，然后点击Edit。

2）在左边的类目列表中，选择Design Notes。

● Maintain Design Notes（保持设计笔记）—选择该选项将启用设计笔记。

　　当Maintain Design Notes被选择时，你可以为你站点中的文件创建设计笔记。无论何时，当一个文件被拷贝、移动、重命名，或删除时，关联的设计笔记文件也被拷贝、移动、重命名，或删除。

● Upload Design Notes for Sharing（为共享上传设计笔记）—选择该选项将你的站点的设计笔记连同其它文档一起被上传。

　　当Upload Design Notes for Sharing被选择时，你可以和团队中的其它成员共享设计笔记。当你上传或下载一个文件时，Dreamweaver会自动地上传或下载关联的设计笔记文件。如果你只是独自一人工作，可以取消该选项以改善传输的速度。当该选择被取消时，设计笔记被保存在本地，不随文件上传。 3）单击OK。

　　为一个文档添加设计笔记的步骤如下：

1）在文档窗口中打开这个文档，然后选择File > Design Notes。

　　你也可以在站点窗口中选择文件，然后选择File > Design Notes。如果文件是驻留在一个远端站点上的，你必须首先Check Out或Get文件，然后在本地文件夹中选择它。

2）在Basic Info（基本信息）标签中，添加不同种类的笔记：

● 从Status下拉菜单中选择这个文档的状态。

● 在Notes文本域输入注释。

● 点击Notes文本域右上方的日期图标插入当前日期。

● 使每次该文件被打开时都显示设计笔记文件，选择Show When File Is Opened。

3）在All Info标签中，添加你认为可能对团队中的其它成员有用的关键字和值。例如：你可以添加一个命名为Developer的关键字，并以你的名字作为这个关键字的值，使团队中的其它成员可以知道这个文档是谁编写的。如(图)

　　要添加一个关键字/值对，点击“+”按钮。要删除一个关键字/值对，点击“-”。

　　注意：在添加任何关键字之前，务必要点击“+”按钮，否则，你会在不经意间覆盖原来设置的关键字。在Name域输入关键字的名字，在Value域为关键字的值。

4）单击OK保存设计笔记。 　　你创建的笔记文件被保存在与拥有该笔记的文件处于同一文件夹的名为_notes的子文件夹中。设计笔记文件的文件名和拥有它的文件的文件名一样，而扩展名为mno。

　　例如：如果文件名是book.htm，位于waterfall\book\，则为该文件创建的设计笔记文件名是book.htm.mno，位于waterfall\book\_notes\。

　　设计笔记文件实际上是一个文本文件，但其中含有一些简单的控制字符。可以用记事本打开它，但由于记事本不能解释这些控制字符，所以看起来比较难懂。你可以使用有控制字符解释能力的任何文本编辑器来打开它。例如使用写字板来打开它，写字板可以很好的解释这些控制字符。Dreamweaver自己也可以打开它。

　　注意：在设计笔记的国际化和兼容性方面，Dreamweaver始终做的不够好，即使是Dreamweaver 4也不例外，尽管Macromedia早已声称Dreamweaver支持双字节编码，但使用中你会发现Dreamweaver对双字节编码的处理能力显然还存在问题：

　　在使用设计笔记时，不要用中文来编写注释，也不要在关键字和值（这两者用于设计笔记的All Info标签）中使用中文。尽管你可以在这些域中输入中文，但可以输入并不等于可以再次将它打开，超过90%的情况下，Dreamweaver无法打开含有中文的设计笔记文件，相反它会显示一个警告消息，告诉你在为这个文件创建设计笔记前，你必须将这个文件在站点中保存，而且要启用这个站点的Maintain Design Notes。但实际上，你很清楚，你并没有犯这些低级错误。

　　要解决这个问题，唯一的出路就是不要在设计笔记中使用中文。但如果问题已经发生了，你可以简单的打开那个出问题的设计笔记文件，删除里面的中文，保存就可以了。

　　的确，在超过90%的情况下，Dreamweaver无法打开含有中文的设计笔记文件，但90%并不是100%，令人困惑的是，Dreamweaver的确可以处理为数不多的几个汉字。比如，它能看懂“需”、“图”、“日”等很少的几个汉字，但遗憾的是，Dreamweaver的汉语词汇量太少，你无法用这几个字组成任何有意义的话。希望Dreamweaver在其下一个版本中真正可以在双字节处理上有质的突破。

　　要为一个对象添加设计笔记：

1）从对象的上下文菜单中选择Design Notes。

2）重复为文档添加设计笔记的2至4步。

　　注意：对象的设计笔记文件被保存在对象的源文件所在文件夹下的_notes子文件夹中，而非引用它的页面所处的文件夹下的_notes子文件夹中。

　　要打开与一个文件关联的设计笔记，可以通过以下两种方法：

● 在站点窗口选择这个文件（或打开这个文件），然后选择File > Design Notes。

● 在站点窗口的Notes列，双击黄色的设计笔记图标。

　　要为文件指定一个没在Status下拉菜单中列出的状态：

1）打开文件或对象的Design Notes。

2）选择All Info标签。

3）单击“+”按钮。

4）在Name域中输入status。

5）在Value域中输入状态描述。

如果这里已经有一个值存在了，它将会被你所输入的新值替代。

6）选择Basic Info标签，可以注意到新的状态值已经显示在Status下拉菜单中了。

　　让人意犹未尽的是：同一时间里，你只能拥有一个新状态值，如果你想再输入一个新的状态值，你会发现你第一次输入的状态值被你第二次输入的状态值替代了。 　　禁用设计笔记的步骤如下：

1）选择Site > Define Sites。

2）在Define Sites对话框中选择需要的站点，然后点击Edit。

3）在站点定义对话框中左边的类目中选择Design Notes。

4）取消选择Maintain Design Notes。

5）单击OK。

　　将出现一个对话框，询问你是否想删除所有存在的设计笔记文件。点击Yes，删除；点击No，保留。

　　如果只想在本地站点使用设计笔记：

1）选择Site > Define Sites。

2）在Define Sites对话框中选择需要的站点，然后点击Edit。

3）在站点定义对话框中左边的类目中选择Design Notes。

4）取消选择Upload Design Notes for Sharing（为共享上传设计笔记）。

5）单击OK。

　　此后，当你Check In或Put你的文件时，与文件关联的设计笔记文件就不会上传到远端站点了。

　　要删除与你的站点无关的设计笔记：

1）选择Site > Define Sites。

2）在Define Sites对话框中选择需要的站点，然后点击Edit。

3）在站点定义对话框中左边的类目中选择Design Notes。

4）点击Clean Up。Dreamweaver会提示你是否确信要删除不和你的站点中的任何一个文件相关联的设计笔记。 　　如果你使用Dreamweaver来删除一个被捆绑了设计笔记的文件，那么与这个文件相关的设计笔记会在文件被删除的同时也被删除，通常孤立设计笔记文件的存在仅仅当你在Dreamweaver以外进行文件的删除和重命名时才会发生。

　　注意：如果你在Maintain Design Notes被选择的情况下，点击Clean Up（清理）按钮，那么你站点中的所有设计笔记文件都将被删除。

2．在Fireworks和Dreamweaver中交流设计笔记

　　如果你用Fireworks 4.0打开一个图片，并以另一种格式将其输出。Fireworks会自动地将原始文件的名字保存进一个设计笔记文件中。例如：如果你在Fireworks中打开了waterfalllogo.png，并以waterfalllogo.gif输出。Fireworks会自动地创建一个名为waterfalllogo.gif.mno的设计笔记文件，将原始文件的绝对文件URL保存在其中。例如：waterfalllogo.gif的设计笔记将包含类似这样的一行：

fw_source = file:///C|/Sites/Waterfall/waterfalllogo.png

　　如果图像包含热点或翻转，这些项目的HTML源也会被加到设计笔记中。

　　当你在Dreamweaver中引入图像时，设计笔记文件也会随同图像文件一起自动地被拷贝进你的站点。当你在Dreamweaver中选择图像，并选择使用Fireworks编辑它时，Fireworks会打开原始文件以编辑。

三、关于Timeline的技巧
1．通过拖曳来创建复杂的路径

　　如果你要创建一个具有复杂路径的动画，通过记录下你拖曳层时的路径将比创建一个个单独的关键帧更有效率。

　　我将以下面的例子来说明如何通过拖曳一个路径来创建一个Timeline。

1）选择一个层。在这个例子中，层中含有一个工作室的Logo图像。

2）将层移动到动画的起始处。

3）选择Modify > Timeline > Record Path of Layer（记录层的路径）。

4）拖曳层的选择柄在页面上绘制你希望的动画运动路径，到达动画希望的停止位置时释放鼠标按钮。动画的运动路径在页面上被绘制记录下来。如(图)

　　与此同时，Dreamweaver会将一个动画条添加到Timeline中，并自动的设置所有必要的关键帧。

5）选择Autoplay复选框，按F12在浏览器中欣赏一下吧。

2．编辑Timeline

　　在定义了一个Timeline的基本组件后，根据需要就可以对其进行一些有用的编辑。例如增加或删除帧、改变动画的开始时间等等。

　　要编辑一个Timeline，你可以做下列事情：

● 要使动画持续的时间更长，或想让动画的改变更柔和一些，产生慢动作的效果。你可以拖曳动画条结束帧的标记到更远的帧位，在拖动的过程中，你将发现在动画条中的所有的关键帧的位置都在动态的改变（维持它们之间的相对位置不变）。

例如：要改变下面这个动画条的持续时间。

动画条的结束帧被拖动之前（共有25帧）。

动画条的结束帧被拖动之后（共有40帧）。

　　可以看到，动画的运动轨迹并没有因动画持续时间的延长而改变，因此你可以使用这种方法产生慢动作的效果。

　　如果只想拖曳结束帧，可以通过在拖曳结束帧时按住Ctrl键，来阻止其他关键帧的位置改变。

● 要让层更早或更迟些到达指定的关键帧的位置，可以将这个关键帧的标记向左或向右拖动。 ● 要改变一个动画的开始时间，你可以拖曳与这个动画有关的一个或多个动画条向左（开始的时间会更早）或向右（开始的时间会更晚）移动。

　　注意：要想拖曳整个动画条，你需要点击动画条中的非关键帧，然后拖曳这个非关键帧即可。另外，按住Shift键可一次选择多个动画条并可将它们一起拖曳。

例如：要改变下面这个动画条的开始时间。

动画的开始时间被改变之前。此时，动画从页面被装载时就开始播放。

　　动画的开始时间被改变之后。此时，动画的起始帧位为16帧，因为FPS中设置的数值为15帧，即让浏览器每秒播放15帧，因此，在动画条的开始时间被改变之后，动画大约将在页面已经被装载1秒钟之后才开始播放。

● 要想将整个动画的位置进行页面上的转移。你可以在Timeline面板中选择整个动画条，然后在页面上将对象（层）拖曳到你希望动画出现的地方，然后释放鼠标按钮。Dreamweaver会自动的调整所有关键帧的位置。要在Timeline中选择整个动画条只需在Timeline面板中点击动画条中的非关键帧即可。

● 要想在Timeline中增加或删除帧，选择Modify > Timeline > Add Frame（添加帧）或Modify > Timeline > Remove Frame（删除帧）。

● 要想在当前页被浏览器装载时，Timelines自动开始播放，选择Autoplay复选框。

● 要想当页面在一个浏览器中打开时，Timelines可以无限循环，选择Loop复选框。

3．用Timeline改变图像和层的特性

　　除可以用Timeline移动层外，你还可以使用Timeline来改变一幅图像的源文件及层的可见性、大小和堆叠顺序等特性。

　　要使用Timeline来改变图像和层的特性：

1) 在Timelines面板中，做下列之一：

● 从动画条中选择一个现存的、控制着要改变的对象的关键帧。 ● 要创建一个新的关键帧，在动画条中随意点击一帧，然后选择Modify > Timeline > Add Keyframe（添加关键帧）或按住Ctrl键点击一个帧。

2) 通过选择下列选项为对象定义新特性：

● 要改变一幅图像的源文件，在特性检查员中点击Src域右边的文件夹图标浏览并选择一个新图像。

　　从可以看出，从帧1到帧14显示的同一个图像（中文版图像），在帧15我改变了图像的源文件，图像在这时将改变，从帧15直到帧30都显示的是改变后的图像（English图像），同时我选择了Autoplay和Loop。因此，当页面装载后，你将发现每隔1秒两个图像就替换一次。

注意：在改变图像的源文件时应当使新图像的高度和宽度与原图像的一致，这样才不会发生原来图像的高度和宽度被改变的情况，当然如果这种改变正是你所希望的，就另当别论了。

● 要改变一个层的可见性，从特性检查员的Vis下拉菜单中选择inherit、visible或hidden。

● 要改变一个层的大小，在拖曳层的缩放柄或在特性检查员的W和H域中输入新值。

● 要改变一个层的堆叠顺序，在Z-Index域中输入新值，或使用层面板改变当前层的堆叠顺序。

3) 按住Play按钮预览一下动画吧。

4．拷贝和粘贴动画

　　一旦有了一个喜欢的动画片断，你就可以通过拷贝并将其粘贴到当前Timeline的其他区域，或同一文档中另外的Timeline，或不同文档中的Timeline中。你也可以一次拷贝并粘贴多个动画片断。

　　要拷贝或剪切并粘贴动画片断：

1) 单击一个动画条中的非关键帧以选择一个动画片断。要选择多个动画片断，点击时按住Shift键，或是在Timeline面板中任何地方单击一下，然后按Ctrl+A选择所有的动画片断。

2) 拷贝或剪切选择的片断。

3) 做下列之一：

● 将回放磁头移动到当前Timeline中的另一个帧位（希望动画片断被粘贴的地方）。 ● 从Timeline下拉菜单中选择另一个Timeline，然后在希望动画片断被粘贴的地方单击。

● 打开另一个文档或创建一个新文档，然后在Timeline面板中希望粘贴的地方单击。

4) 执行粘贴命令将拷贝或剪切的动画片断粘贴到Timeline中。

　　注意：用来控制同一个对象的动画条不能相互重叠，因为一个层不能在同一时刻出现在两个地方（一幅图像也不能在同一时刻有两个不同的源文件）。如果你正在粘贴的动画条将与另一个控制同一个对象的动画条重叠，Dreamweaver会自动地将粘贴的动画条转移到恰好可以不重叠的那帧。

　　但在这里有一个例外：当你将动画条粘贴到另一个Timeline时，即使控制同一个对象的动画条出现重叠，Dreamweaver也不会自动的转移这些重叠的动画条，因此这可能导致无法预料的结果。在这种情况下，你只能手工来修正。

当要粘贴动画片断到另外的文档中时，要记住以下两个原则：

● 如果你拷贝了一个层的动画片断，而新文档中含有一个与拷贝的层同名的层，在这种情况下当你进行动画片段粘贴时，Dreamweaver会在新文档中将动画特性应用于同名的那个层。

● 如果你拷贝了一个层的动画片断，而新文档中并不含有一个与拷贝的层同名的层，在这种情况下当你进行动画片段粘贴时，Dreamweaver会将原始层连同它的内容与动画片断一起粘贴到新文档中。要想将粘贴应用到新文档中另外的层，你可以从上下文菜单中选择Change Object（改变对象）或选择Modify > Timeline > Change Object，然后从弹出的对话框中选择需要的层。

5．重命名Timeline

　　要重命名在Timeline面板中显示的Timeline，做下列之一：

● 选择Modify > Timeline > Rename Timeline（重命名Timeline），然后在弹出的对话框中输入一个新名字。

● 直接在Timeline面板的Timeline下拉菜单中输入一个新名字。

　　注意：如果页面的源代码中含有你自己编写的对某个Timeline的引用，在你重命名这个Timeline后，会弹出一个警告框。

　　这个警告框告诉你要手动修改那些对原Timeline名字的引用，因为它们无法被自动更新。这是因为Dreamweaver无法动态跟踪页面上由你自己编写的代码中对Timeline名字的引用。当然，那些由Dreamweaver自动生成的代码中对Timeline名字的引用会被自动更新。

　　例如：下面的这行代码就是我自己编写的，这是对Timeline2的引用，当我将Timeline2的名字改为Timeline1时，这里的Timeline2不会自动的更新为Timeline1，我必须自己手动修改才行。

　　播放 这应该是Dreamweaver 3中就存在的一个问题。在Dreamweaver 3中，如果你对某个Timeline进行了重命名操作，那么对Dreamweaver来说，这个重命名的Timeline是一个全新的Timeline，Dreamweaver已经完全不记得几秒钟前它与这个Timeline还是个老相识。因此，一旦一个Timeline被重命名，你对这个Timeline所做的所有设置（比如所有捆绑在其上的行为）都将被丢弃，这经常会是灾难性的。

　　现在，虽然Dreamweaver 4已经比Dreamweaver 3在对Timeline的动态跟踪上前进了一大步，不会再乱丢东西了，但仍留有问题，希望在Dreamweaver 5中不会再出现这种情况。

6．Timelines的动画技巧

　　下列建议可以改善你的动画的性能，并使你创建动画的工作变得更加轻松：

　　● 要想产生在图像间切换的效果，应当使用显示及隐蔽层的技术，而不是频繁的改变图像的源文件。改变一幅图像的源文件常常会产生恼人的视觉延迟，因为新图像必须被下载。而一旦层中的图像都被下载后，通过显示和隐藏某些层，就可以达到很好的在图像间进行切换的效果，每个图像都会被立刻显示，不会产生视觉上的延迟，也不会因速度太慢而错过某些图像。

　　● 拉伸动画条来创建更为平滑的运动。如果动画的运动看起来太过凶猛，在两个位置间产生视觉上的弹跳，你就应当拉伸动画条的最后一帧，以便为完成大幅度的动作扩展出更多的帧。拉伸动画条将在运动的开始和结束点之间创建更多的数据点，但同时也会导致对象的运动变得缓慢，你可以试着增加每秒播放的帧数（FPS）来抵消这种慢动作效果。但应当清楚，大多数普通的系统中的浏览器播放动画的速度不会比每秒15帧更快。在不同系统中的不同的浏览器上测试动画以确定最好的设置。

　　● 不要试图让大的位图运动起来。的确，一个蠕动着的大位图可能确实蔚为壮观，但你的这个想法或许会让你的浏览者发疯。

　　总而言之，尽可能创建简单的动画，不要让你创建的动画的需求比用户的浏览器能提供的更多。因为浏览器总是会尽心尽力地播放动画中的每一帧，即使当系统性能下降到不能胜任这一工作时。

四、创建Web相册
Create Web Photo Album是Dreamweaver极富创意的表现，你可以使用这个功能让Fireworks处理一个全部都存放着图像的文件夹，为这个图像文件夹中的每一个图像都创建一个缩微图像和一个全尺寸的图像，然后使用Dreamweaver来创建一个Web页面，这个页面上包含了这些缩微图像（这些缩微图像被放置在这个页面的一个表格中），并通过这些缩微图像连接到全尺寸图像。使用这个功能你可以轻松的创建你的Web相册。Create Web Photo Album命令通过使用JavaScript从Dreamweaver内部来调用Fireworks，因此，要想使用此功能，你的机器中必须安装有Fireworks。

　　在你开始以前，首先将所有你要为其创建Web相册的图像放置到一个独立的文件夹中，但这个文件夹不需要在站点内部。 另外，确信图像文件的扩展名（即图像文件的格式）是Create Web Photo Album命令可以识别的。这些可识别的图像文件扩展名包括：gif、jpg、jpeg、png、psd、tif和tiff。扩展名无法被识别的那些图像文件不会被包含在Web相册中。

　　要创建一个Web相册：

1）选择Commands > Create Web Photo Album，出现Create Web Photo Album对话框。

　　2）在Photo Album Title（相册标题）域中为要创建的相册输入一个标题。这个标题将被显示在主相册页（包含缩微图像的页面）顶端的一个灰色的矩形区域中。

　　如果你愿意的话，你可以在Subheading Info（子标题信息）和Other Info（其他信息）文本域中输入额外的两行文本，它们将直接出现在相册标题的下面。

　　3）单击Source Images Folder（源图像文件夹）右边的Browse按钮选择文件夹，或直接在该文本域中输入文件夹的路径。这个文件夹中所有可以被识别的图像文件都将被包含到相册中。

　　4）单击Destination Folder（目的文件夹）右边的Browse按钮选择一个目的文件夹或者你也可以创建一个新的目的文件夹。在这个目的文件夹中将存放所有的输出图像和HTML文档。

　　注意：你选择的目的文件夹中不应当包含一个相册，如果你选择了一个已经包含了一个相册的文件夹，则如果新生成的图像文件与文件夹中的图像文件重名的话，就会覆盖掉以前的图像文件。

　　5）在Thumbnail Size（缩微图像大小）下拉菜单中为缩微图像选择一个大小。

　　图像将会按比例地创建相应的缩微图像，以适合在这里以像素指定的正方形大小。

　　6）要在每一个缩微图像的下面显示相应的全尺寸图像的名字，选择Show Filenames（显示文件名）复选框。

7）在Columns（列）中为显示这些缩微图像的表格指定一个列数。

8）在Thumbnail Format（缩微图像格式）下拉菜单中为缩微图像指定一种格式：

● GIF WebSnap 128—使用适合Web的128色调色板创建GIF格式的缩微图像。

● GIF WebSnap 256—使用适合Web的256色调色板创建GIF格式的缩微图像。

● JPEG-Better Quality—使用相对更高的画质和更大的文件大小来创建JPG格式的缩微图像。

● JPEG-Smaller File—使用相对较低的画质和更小的文件大小来创建JPG格式的缩微图像。

　　9）在Photo Format（相片格式）下拉菜单中为要创建的全尺寸图像指定一种格式。你的每一个原始图像都将以你在这里指定的格式创建一个相应的全尺寸图像。

　　你可以为你的全尺寸图像和缩微图像指定不同的格式。

　　注意：Create Web Photo Album命令不允许你将原始图像作为你的全尺寸图像，因为如果你的原始图像中含有除GIF和JPG以外的格式的话，这些格式的图像可能无法在所有的浏览器上被恰当的显示。另外，需要知道的是，如果你的原始图像是JPG格式，生成的全尺寸图像可能会具有比原始图像更大的文件大小或更低的图像画质。

　　10）在Scale（缩放）中为全尺寸图像选择一个缩放百分比。

　　将缩放百分比设置为100%将指定创建与原始图像同样大小的全尺寸图像。

　　注意：这个缩放百分比将作用于所有的原始图像，如果你的原始图像并非同样大小，设置成统一的百分比可能不能得到你希望的结果。

　　11）通过选择Create Navigation Page for Each Photo（为每一个相片创建导航页面）复选框可以为每个全尺寸图像创建一个单独的网页，并在页面上包含Back、Home和Next导航连接标签。如果你选择了这个选项，缩微图像将连接到导航页；如果你没有选择这个选项，缩微图像将直接连接到全尺寸图像。

　　当你做完所有的设置之后，你的Create Web Photo Album对话框看起来可能会是这样的。如(图)

　　12）单击OK。

　　Fireworks将启动（如果之前它还没有运行的话）并开始一个接着一个的创键缩微图像和全尺寸图像。如果你提供了很多图像文件，这个过程可能要持续数分钟。当Fireworks处理完后，Dreamweaver再次被激活，并为你创建包含缩微图像的页面。

　　13）当一个显示Album Created（相册已创建）的消息框弹出时，单击OK。在你的缩微图像页显示之前，你可能需要等待几秒钟。缩微图像将以文件名的字母顺序显示。

生成的主缩微图像页面。

　　在浏览器中运行时，点击其中的任何一个缩微图像将会把你带到相应的包含全尺寸图像的导航页面.