网页设计与制作 第5章利用Dreamweaver MX制作网页.ppt

《网页设计与制作 第5章利用Dreamweaver MX制作网页.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作 第5章利用Dreamweaver MX制作网页.ppt（86页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 通过本章学习，应该掌握以下内容：通过本章学习，应该掌握以下内容：Dreamweaver MX的基本操作的基本操作利用利用Dreamweaver MX站点管理站点管理利用利用Dreamweaver MX创建网页的基本对象创建网页的基本对象第第5章章 利用利用Dreamweaver MX制作网页制作网页 DreamweaverDreamweaver是是MacromediaMacromedia公公司司的的出出品品的的一一款款“所所见见即即所所得得”的的网网页页编编辑辑工工具具。与与FrontPageFrontPage不不同同，DreamweaverDreamweaver采采用用的的是是MacMac

2、机机浮浮动动面面版版的的设设计计风风格格，对对于于初初学学者者来来说说可可能能会会感感到到不不适适应应。一一旦旦习习惯惯了了其其操操作作方方式式后后，就就会会发发现现DreamweaverDreamweaver的的直直观性与高效性是观性与高效性是FrontPageFrontPage所无法比拟的。所无法比拟的。5.1 5.1 Dreamweaver MX基本操作基本操作 5.1.1 Dreamweaver MX的界面的界面 1Dreamweaver MX的界面的界面 菜单栏菜单栏工具栏工具栏文档文档窗口窗口浮动面板浮动面板站点面板站点面板属性属性面板面板浮动浮动面板组面板组插入插入面板面板 （1

3、 1）菜单栏）菜单栏 菜菜单单栏栏提提供供了了所所有有的的菜菜单单命命令令，是是提提供供软软件件最最完完整功能的方式。整功能的方式。（2 2）工具栏）工具栏 工工具具栏栏提提供供了了常常用用命命令令的的快快捷捷启启动动方方式式，例例如如可可以使用工具栏中的以使用工具栏中的“标题标题”框方便地设置网页的标题。框方便地设置网页的标题。（3 3）插入面板）插入面板 插插入入面面板板是是DreamweaverDreamweaver MXMX中中新新添添的的部部件件，其其实实就就是是DreamweaverDreamweaver 4 4中中的的对对象象面面板板，在在其其中中包包含含一一些些用于创建不同类型

4、对象的按钮。用于创建不同类型对象的按钮。（4 4）浮动面板）浮动面板 浮浮动动面面板板是是一一种种方方便便操操作作的的界界面面方方式式，使使用用者者可可以随时获得特定功能。以随时获得特定功能。（5 5）文档窗口）文档窗口 文文档档窗窗口口是是显显示示用用户户所所编编辑辑文文档档的的地地方方，显显示示结结果与文档在浏览器中显示的结果基本相同。果与文档在浏览器中显示的结果基本相同。（6 6）属性面板）属性面板 属属性性面面板板上上显显示示的的是是被被选选取取对对象象或或文文本本的的各各种种属属性性，在在属属性性面面板板上上还还可可以以检检查查和和编编辑辑当当前前选选定定页页面面元元素的属性。素的属

5、性。2.Dreamweaver的视图的视图 单单击击工工具具栏栏上上的的视视图图切切换换按按钮钮 ，即即显显示示设设计计视视图图；使使用用工工具具栏栏中中的的按按钮钮 ，则则可可以以很很方方便便地地切切换换到到代代码码视视图图，以以便便查查看看当当前前编编辑辑网网页页的的HTMLHTML源源代代码码；如如果果需需要要同同时时查查看看代代码码视视图图和和设设计计视视图图，可可以以单单击击工工具具栏栏上上的的显显示示代代码码和和设设计计按按钮钮 ，此此时时DreamweaverDreamweaver将将同同时时在在窗窗口口中中显显示示代代码码视视图图和和设设计计视视图。图。（1）代码视图与设计视图

6、）代码视图与设计视图 （2）文档窗口）文档窗口 文档窗口是显示用户所编辑文档的地方，显示结文档窗口是显示用户所编辑文档的地方，显示结果与文档在浏览器中显示的结果基本相同。文档窗果与文档在浏览器中显示的结果基本相同。文档窗口的标题栏显示页面标题，圆括号内显示的是文件口的标题栏显示页面标题，圆括号内显示的是文件名，如果文档有未保存的部分，则还会出现一个星名，如果文档有未保存的部分，则还会出现一个星号。号。控制被选文本或对象的标记符出现在文档窗底部控制被选文本或对象的标记符出现在文档窗底部左边的标记符选择器上。单击这些标记符可以准确左边的标记符选择器上。单击这些标记符可以准确地选取标记符及其控制的内

7、容。地选取标记符及其控制的内容。单击窗口大小下拉菜单，用户可以将文档窗口的单击窗口大小下拉菜单，用户可以将文档窗口的大小设为预设值或自定义值。大小设为预设值或自定义值。（3）插入面板）插入面板 选择选择“窗口窗口”|“插入插入”命令，出现插入面板，命令，出现插入面板，如图如图5-5所示。在插入面板上包含了多种不同类型所示。在插入面板上包含了多种不同类型的按钮，用于在文档中创建不同类型的对象。默认的按钮，用于在文档中创建不同类型的对象。默认情况下，插入面板中显示的是情况下，插入面板中显示的是“常用常用”工具组中的工具组中的工具图标。单击插入面板上的对象类型标签，会打工具图标。单击插入面板上的对象

8、类型标签，会打开相应的插入面板，显示插入面板上所包含对象的开相应的插入面板，显示插入面板上所包含对象的类型。类型。图图5-5 文档窗口文档窗口5.1.2 Dreamweaver MX文件操作文件操作 Dreamweaver MX可可以以打打开开多多种种格格式式的的文文件件，它它们们的的扩扩展展名名分分别别是是html、shtml、asp、js、dwt、xml、1h、as、css等。等。（1）直接打开文件）直接打开文件 选择选择“文件文件”|“打开打开”命令，则会打开命令，则会打开“打开打开”对话框。用户在文件名框里选择需要打开的文对话框。用户在文件名框里选择需要打开的文件，并单击件，并单击“打

9、开打开”按钮，即可打开该文件。按钮，即可打开该文件。1文件的打开文件的打开 （2）打开库文件）打开库文件 在框架网页中，选择在框架网页中，选择“文件文件”|“在框架中打开在框架中打开”命令，则会打开命令，则会打开“选择选择HTML文件文件”对话框，对话框，如图如图5-7所示。在此方式下只能打开以所示。在此方式下只能打开以HTML为扩为扩展名的文件。展名的文件。在在Dreamweaver MX中创建新的网页文件，有中创建新的网页文件，有以下以下3种方法：种方法：启动启动Dreamweaver MX，即可直接创建一个新，即可直接创建一个新的网页文件，等候编辑。的网页文件，等候编辑。如果如果Drea

10、mweaver MX已经启动，要创建新网已经启动，要创建新网页，可以选择页，可以选择“文件文件”|“新建新建”命令，打开命令，打开“新新建文档建文档”对话框。从该对话框中选择一种需要创建对话框。从该对话框中选择一种需要创建的文件格式，然后单击的文件格式，然后单击“创建创建”按钮即可。按钮即可。2.文件的新建文件的新建 如果要基于模板创建文档，则可以通过选择如果要基于模板创建文档，则可以通过选择“文件文件”|“新建新建”命令，在出现的命令，在出现的“新建文档新建文档”对对话框中单击话框中单击“模板模板”标签，该对话框变为标签，该对话框变为“从模板从模板新建新建”对话框，如图对话框，如图5-9所示

11、。然后从该对话框左所示。然后从该对话框左边的列表框中选择模板所在的站点，再在右边的模边的列表框中选择模板所在的站点，再在右边的模板列表中选择一个模板，用户还可以通过预览区域板列表中选择一个模板，用户还可以通过预览区域预先浏览所选择模板的样式，看看是否符合自己的预先浏览所选择模板的样式，看看是否符合自己的要求。选择需要使用的模板后，单击要求。选择需要使用的模板后，单击“创建创建”按钮，按钮，即可基于模板创建新文档。即可基于模板创建新文档。如果同时打开了多个如果同时打开了多个Dreamweaver MX窗口，而窗口，而保存的目的只是为了保存文件，则切换到要保存的保存的目的只是为了保存文件，则切换到

12、要保存的文档所在的窗口，然后选择文档所在的窗口，然后选择“文件文件”|“保存保存”命命令。令。如果所需要保存的网页文件中带有框架文件，而如果所需要保存的网页文件中带有框架文件，而保存的目的是保存该网页文件中所有的文件，则应保存的目的是保存该网页文件中所有的文件，则应该选择该选择“文件文件”|“保存全部保存全部”命令。命令。如果希望将一个网页文档以模板的形式保存。首如果希望将一个网页文档以模板的形式保存。首先切换到要保存的文档所在的窗口，然后选择先切换到要保存的文档所在的窗口，然后选择“文文件件”|“另存为模板另存为模板”命令。命令。3.保存网页文件保存网页文件 在在Dreamweaver MX

13、的的编编辑辑窗窗口口，选选择择“窗窗口口”|“站点站点”菜单，即可打开菜单，即可打开站点面板站点面板。在在站站点点面面板板中中，用用户户可可以以选选择择菜菜单单“站站点点”|“新新建建站站点点”命命令令创创建建新新站站点点，也也可可以以使使用用“站点站点”|“编辑站点编辑站点”命令编辑已有的站点。命令编辑已有的站点。5.2 5.2 站点管理站点管理 5.2.1 定义站点定义站点 1.站点面板站点面板 Dreamweaver MX的站点面板的站点面板 返返 回回 在在Dreamweaver MX中创建站点的方法有两种中创建站点的方法有两种:（1）通过站点定义向导创建站点）通过站点定义向导创建站点

14、 在在编编辑辑窗窗口口或或站站点点面面板板选选择择命命令令菜菜单单“站站点点”|“新新建建站站点点”选选项项，弹弹出出“站站点点定定义义”对对话话框框1 1，选选择择“基基本本”选选项项卡卡，然然后后,按按照照提提示示进进行行选选项项设置设置.2.创建站点创建站点 （2）直接定义站点）直接定义站点 在在编编辑辑窗窗口口或或站站点点面面板板选选择择命命令令菜菜单单“站站点点”|“新新建建站站点点”选选项项，弹弹出出“站站点点定定义义”对对话话框框1 1，选选择择“高高级级”选选项项卡卡，然然后后,按按照照提提示示进进行行选选项项设置设置.如果要打开站点，可执行如下操作之一：如果要打开站点，可执行

15、如下操作之一：（1 1）选选择择菜菜单单栏栏“站站点点”|“站站点点文文件件”命命令令，即即可可在在站站点点面面板板中中打打开开当当前前编编辑辑文文件件所所在在的的本本地地站站点点，同时在文档窗口中可以进行该站点文档的编辑操作。同时在文档窗口中可以进行该站点文档的编辑操作。（2 2）在在站站点点面面板板中中打打开开工工具具栏栏的的“站站点点”下下拉拉列列表表框框，选选择择需需要要打打开开的的站站点点，文文件件窗窗口口中中即即会会显显示示该该站点文件夹和文件信息。站点文件夹和文件信息。5.2.2 站点的基本操作站点的基本操作 1打开站点打开站点 若若要要复复制制当当前前站站点点，可可以以使使用用

16、文文档档窗窗口口或或站站点点面面板板中中“站站点点”菜菜单单的的“编编辑辑站站点点”命命令令，打打开开“编编辑辑站站点点”对对话话框框。选选中中要要复复制制的的站站点点名名称称，单单击击“复制复制”按钮即可对当前站点进行复制操作。按钮即可对当前站点进行复制操作。执执行行复复制制站站点点操操作作后后，系系统统会会自自动动复复制制一一个个所所选选择择的的站站点点，并并且且会会为为复复制制的的站站点点加加上上一一个个“拷拷贝贝”字样的站点名称。字样的站点名称。2.复制站点复制站点 如如果果要要更更改改当当前前站站点点设设置置，比比如如对对站站点点进进行行修修改改站站点点名名称称、设设置置参参数数选选

17、项项等等编编辑辑操操作作，可可以以利利用用上上面面的的方方法法打打开开“编编辑辑站站点点”对对话话框框，选选中中一一个个站站点点后后单单击击“编编辑辑”按按钮钮，即即可可打打开开该该“站站点点定定义义为为”对话框，选择对话框，选择“高级高级”选项卡进行站点编辑。选项卡进行站点编辑。3编辑站点编辑站点 在在Dreamweaver MX中中删删除除一一个个站站点点非非常常容容易易，在在弹弹出出的的“编编辑辑站站点点”对对话话框框中中，单单击击“删删除除”按按钮就可以删除选中的站点。钮就可以删除选中的站点。4删除站点删除站点 注注意意：此此删删除除操操作作并并未未真真正正删删除除站站点点文文件件夹夹

18、和和其其中中的的内内容容，而而只只是是无无法法再再用用Dreamweaver管管理理该该文文件件夹夹而而已已。如如果果需需要要再再次次用用Dreamweaver管管理理该该文文件件夹夹，只只要要用用新新建建站站点点的的方方式式再再次次将将该该文文件件夹夹指指定定为为站站点点根目录即可。根目录即可。页页面面布布局局是是进进行行网网页页设设计计最最基基本本最最重重要要的的工工作作之之一一。Dreamweaver MX提提供供了了一一个个布布局局工工具具布局视图。使用这个工具，页面布局变得轻松快捷。布局视图。使用这个工具，页面布局变得轻松快捷。5.3 创建网页的基本要素创建网页的基本要素 5.3.1

19、 网页布局及属性设置网页布局及属性设置 1页面的布局页面的布局 在创建文档前，或创建文档后还需要对页面的属在创建文档前，或创建文档后还需要对页面的属性进行必要设置，设定一些影响整个网页的参数。性进行必要设置，设定一些影响整个网页的参数。设置页面属性的方法如下：设置页面属性的方法如下：选择选择“修改修改”|“页面属性页面属性”命令，出现命令，出现“页面属页面属性性”对话框，在该对话框中对页面的属性进行设置。对话框，在该对话框中对页面的属性进行设置。2设置页面属性设置页面属性 1 1）换行）换行 （1 1）自自动动换换行行：在在输输入入文文字字时时，若若某某一一行行的的长长度度超超过过了了Drea

20、mweaverDreamweaver MXMX窗窗口口的的显显示示范范围围，文文字字将将自自动动换换到到下下一行。一行。（2 2）利利用用“EnterEnter”换换行行：在在输输入入文文字字后后按按“EnterEnter”键，文字成段，且上下段之间空一行。键，文字成段，且上下段之间空一行。（3 3）利利用用“Shift+EnterShift+Enter”键键换换行行：如如果果想想要要将将文文字字手手动动 换换 行行，中中 间间 又又 不不 能能 出出 现现 空空 白白 行行，可可 以以 按按“Shift+EnterShift+Enter”键。键。5.3.2 在网页中插入文本在网页中插入文本

21、1编辑文本编辑文本 DreamweaverDreamweaver MXMX中中，在在文文本本开开始始处处按按空空格格键键是是不不会会输输入入空空格格的的，在在文文字字之之间间按按空空格格键键可可以以输输入入半半个个空空格格。如如果果要要在在网网页页中中输输入入空空格格，可可以以采采用用如如下下三三种种方方法：法：（1 1）按按住住“Ctrl+ShiftCtrl+Shift”键键，按按一一次次空空格格键键，键键入半个空格。入半个空格。（2 2）将将输输入入法法由由半半角角状状态态切切换换到到在在全全角角状状态态，按按一次空格键，键入一个空格。一次空格键，键入一个空格。（3 3）将将编编辑辑窗窗口

22、口切切换换到到代代码码视视图图，在在要要输输入入空空格格的的地地方方输输入入代代码码 nbsp;，输输入入一一组组 nbsp;代代码码，产产生生半个空格。半个空格。2）输入空格）输入空格 有有时时为为了了内内容容的的需需要要，要要在在网网页页中中插插入入一一些些键键盘盘上上没没有有的的特特殊殊字字符符，在在DreamweaverDreamweaver MXMX中中，这这些些特特殊殊字字符符不不仅仅可可以以通通过过“插插入入”菜菜单单下下的的“特特殊殊字字符符”命命令来插入，还可以通过插入令来插入，还可以通过插入“字符字符”面板来直接插入。面板来直接插入。3）插入特殊的字符）插入

23、特殊的字符 在在网网页页中中加加入入适适当当的的注注释释文文字字，可可以以为为日日后后修修改改、管管理理网网页页提提供供方方便便。由由于于批批注注只只有有在在编编辑辑网网页页时时或或查查看看原原代代码码时时才才能能看看到到，所所以以不不必必担担心心批批注注文文字字会会破破坏坏版面。版面。将将光光标标移移到到想想要要插插入入的的注注释释地地方方，然然后后在在插插入入“常常用用”面面板板中中单单击击“注注释释”按按钮钮，或或选选择择“插插入入”|“|“文文本本对对象象”|“|“注注释释”命命令令，弹弹出出“注注释释”对对话话框，再单击框，再单击“确定确定”按钮即可。按钮即可。4）加入注释文字）加入

24、注释文字 5）插入水平线）插入水平线 在页面中插入水平线的方法如下：在页面中插入水平线的方法如下：首首先先确确定定插插入入水水平平线线的的位位置置，然然后后单单击击插插入入面面板板上上“常常用用”选选项项卡卡中中的的按按钮钮 ，或或选选择择“插插入入”|“水平线水平线”菜单命令，则可在页面中插入了一条水平线。菜单命令，则可在页面中插入了一条水平线。选选中中水水平平线线，打打开开水水平平线线属属性性面面板板，可可以以设设置置水水平线的属性。平线的属性。如如果果要要在在文文档档中中查查找找或或替替找找某某个个文文字字，可可利利用用Dreamweaver MX提提供供的的查查找找和和替替换换功功能能

25、。选选择择“编编辑辑”|“查查找找和和替替换换”命命令令，打打开开“查查找找和和替替换换”对话框。在该对话框中进行查找和替换操作。对话框。在该对话框中进行查找和替换操作。2.查找查找/替换文本的内容替换文本的内容 在在Dreamweaver MX中中设设置置文文本本格格式式可可以以通通过过属属性性面面板板，类类似似于于Microsoft Word中中对对文文本本的的属属性性设设置置，包包括括段段落落的的格格式式、字字体体、字字号号、字字的的颜颜色色、字字体体加加粗粗/倾倾斜斜、对对齐齐方方式式（左左对对齐齐/居居中中/右右对对齐齐）、文字所链接的路径或、文字所链接的路径或URL等。等。3.设置

26、文本格式设置文本格式 4.添加和删除中文字体添加和删除中文字体 在在Dreamweaver MX英英文文版版中中，默默认认状状态态只只有有西西文文的的字字体体可可供供选选择择，要要使使用用中中文文字字体体可可以以事事先先将将计计算算机机里里的的中中文文字字体体添添加加到到Dreamweaver MX的的字字体体列列表中。表中。在在Dreamweaver中中插插入入图图像像非非常常简简单单，具具体体操操作作步骤如下：步骤如下：（1）打开网页，将光标移到将要插入图像的位置。）打开网页，将光标移到将要插入图像的位置。（2）用用下下列列3种种方方法法中中的的任任意意一一种种方方法法，打打开开“选选择择

27、图像源图像源”对话框，对话框，如图所示如图所示。在插入在插入“常用常用”面板中，单击插入图像按钮。面板中，单击插入图像按钮。直直接接拖拖曳曳插插入入“常常用用”面面板板中中的的插插入入图图像像按按钮钮至至页页面的光标处。面的光标处。选选择择Dreamweaver MX主主菜菜单单中中的的“插插入入”|“图图像像”命令。命令。5.3.3 使用图像使用图像 1插入图像插入图像“选择图像源选择图像源”对话框对话框 返返 回回（3）在在对对话话框框中中选选择择查查找找图图像像文文件件的的路路径径，选选中中“预预览览图图像像”复复选选框框，选选定定图图像像的的预预览览图图就就显显示示在在对对话话框的右侧

28、。框的右侧。（4）如如果果文文件件存存放放在在网网站站的的目目录录中中，那那么么将将“相相对对于于”下拉列表调整到下拉列表调整到“文档文档”项。项。（5）然后单击）然后单击“确认确认”按钮，图像就插入到网页中了。按钮，图像就插入到网页中了。在在文文档档中中插插入入图图像像后后，用用鼠鼠标标单单击击图图像像，图图像像四四周周出出现现可可编编辑辑的的缩缩放放手手柄柄，说说明明该该图图像像被被选选定定。这这时时属性面板中显示出关于图像的属性信息，如图所示。属性面板中显示出关于图像的属性信息，如图所示。2图像属性参数图像属性参数 图图像像属属性性面面板板的的左左上上方方有有一一个个缩缩略略图图，它它的

29、的右右边边是是“图图像像”字字样样，“图图像像”的的右右边边是是当当前前文文件件大大小小，下下方方的空格可以键入名称，以便将来使用时好调用该文件。的空格可以键入名称，以便将来使用时好调用该文件。改改变变图图像像的的尺尺寸寸大大小小，可可以以通通过过在在属属性性面面板板中中的的“宽宽”和和“高高”文文本本框框中中直直接接输输入入数数值值来来改改变变图图像像的的尺尺寸寸大大小小，当当在在网网页页中中需需要要精精确确地地定定位位元元素素时时，这这种种方方法法可可以以帮帮助助设设计计者者达达到到预预想想的的效效果果。不不过过这这种种方方法法有有一一个个弊弊端端，如如果果数数值值输输入入不不当当，可可能

30、能造造成成图图像像在在浏浏览览器器中中无无法法正正常常显显示示。此此外外，还还可可以以通通过过拖拖放放图图像像四四周的缩放边框来改变图像的尺寸。周的缩放边框来改变图像的尺寸。3改变图像的尺寸改变图像的尺寸 Dreamweaver中中调调整整图图像像位位置置的的方方法法很很简简单单，简简述如下：述如下：（1）选中页面中要编辑的图像；）选中页面中要编辑的图像；（2）打打开开图图像像属属性性面面板板中中的的“对对齐齐”下下拉拉列列表表，在在列表中选择需要的选项。列表中选择需要的选项。4调整图像在网页中的相对位置调整图像在网页中的相对位置 Dreamweaver MX中设置背景图像的方法如下：中设置背

31、景图像的方法如下：（1）选择主菜单中的）选择主菜单中的“修改修改”|“页面属性页面属性”命令，命令，打开打开“页面属性页面属性”对话框。对话框。（2）单击）单击“背景图像背景图像”右边的右边的“浏览浏览”按钮，打开按钮，打开“选定图像源文件选定图像源文件”对话框。对话框。（3）选择一幅图像后，单击）选择一幅图像后，单击“确认确认”按钮，所选择按钮，所选择的图像作为网页背景图像。的图像作为网页背景图像。不管图像的尺寸多大，一旦将其设置为背景图像，不管图像的尺寸多大，一旦将其设置为背景图像，Dreamweaver自动将其重复拼接，铺满整个背景区。自动将其重复拼接，铺满整个背景区。5设置图像背景设置

32、图像背景 在在浏浏览览网网页页时时，可可能能会会遇遇到到下下列列情情况况。当当图图像像不不能被浏览器正常显示时，图像区变成了空白区域。能被浏览器正常显示时，图像区变成了空白区域。利利用用Dreamweaver中中为为图图像像加加文文字字说说明明的的功功能能，可可使使网网页页中中的的图图像像在在不不能能被被浏浏览览器器正正常常显显示示时时，以以说说明文字代替，以帮助访问者了解图像的信息。明文字代替，以帮助访问者了解图像的信息。6.在在Dreamweaver MX中巧妙地处理图像中巧妙地处理图像 1）给图像加文字说明）给图像加文字说明2）制作低分辨率图像）制作低分辨率图像 低低分分辨辨率率图图像像

33、是是相相对对于于高高分分辨辨率率图图像像而而言言的的，高高分分辨辨率率图图像像一一般般指指的的是是图图像像的的色色彩彩丰丰富富逼逼真真、压压缩缩比比较较小小的的图图像像，这这种种图图像像文文件件容容量量比比较较大大，浏浏览览器器要要费费很很长长时时间间来来下下载载。而而低低分分辨辨率率图图像像包包含含的的色色彩彩少少、压压缩缩比比较较大大，所所以以这这种种图图像像文文件件容容量量较较小小，能能够够较较快快地地被被浏浏览览器器下下载载。因因此此经经常常要要为为高高质质量量、大大尺尺寸寸的的图图像像制制作作一一个个副副本本，这这个个副副本本图图像像采采用用的的是是较较低低的的分分辨辨率率，从而减小

34、了文件的大小，缩短了图像的下载时间。从而减小了文件的大小，缩短了图像的下载时间。3）为图像添加热点）为图像添加热点 热热点点即即图图像像上上不不可可见见的的区区域域，该该区区域域分分配配了了一一个个超超链链接接。为为图图像像添添加加热热点点就就是是在在图图像像上上划划分分区区域域，从从而设定图像上制作超链接的范围。而设定图像上制作超链接的范围。在在Dreamweaver中为图像添加热点的方法为：中为图像添加热点的方法为：（1）选选定定图图像像，打打开开图图像像属属性性面面板板，选选择择设设置置热热点点按按钮钮，单单击击鼠鼠标标左左键键并并拖拖动动，在在图图像像中中设设置置热热点点形形状。状。（

35、2）在属性面板中设置热点的超链接。）在属性面板中设置热点的超链接。（1）创建）创建Flash按钮按钮 Flash按钮是按钮是Dreamweaver MX自带的自带的Flash效效果，可果，可 以实现一些动态的按钮效果，其制作方以实现一些动态的按钮效果，其制作方法如下：法如下：将光标定位到要插入将光标定位到要插入Flash按钮的位置。按钮的位置。单击插入单击插入“媒体媒体”面板上的按钮，打开面板上的按钮，打开“插入插入Flash按钮按钮”对话框。对话框。在该对话框中设置相应的选项，单击在该对话框中设置相应的选项，单击“确确定定”按钮，完成按钮，完成Flash按钮的创建。按钮的创建。7.使用多媒体

36、对象使用多媒体对象 （2）创建）创建Flash文本文本 Flash文本是与文本是与Flash按钮类似的一种动态效果，当按钮类似的一种动态效果，当鼠标指针悬停在鼠标指针悬停在Flash文本上时，该文字可以显示为文本上时，该文字可以显示为其他颜色。制作其他颜色。制作Flash文本的步骤如下：文本的步骤如下：将光标定位到要插入将光标定位到要插入Flash文本的位置。文本的位置。单击插入单击插入“媒体媒体”面板上的按钮，打开面板上的按钮，打开“插入插入Flash文本文本”对话框。对话框。在该对话框中设置相应的选项，单击在该对话框中设置相应的选项，单击“确定确定”按按钮，完成钮，完成Flash文本的创建

37、。文本的创建。（3）插入）插入Flash动画动画 如果要在网页中插入用如果要在网页中插入用Flash制作好的动画，可以制作好的动画，可以进行如下操作：进行如下操作：将光标定位到要插入将光标定位到要插入Flash动画的位置。动画的位置。单击插入单击插入“媒体媒体”面板或插入面板或插入“常用常用”面板上面板上的按钮，在打开的按钮，在打开“选择文件选择文件”对话框中选择要插入的对话框中选择要插入的Flash动画即可。动画即可。（4）插入）插入Fireworks制作的图像制作的图像 利用利用Fireworks可以制作多种适用于网页的图像效可以制作多种适用于网页的图像效果，例如分割的反转图、弹出式菜单等

38、。制作完成这果，例如分割的反转图、弹出式菜单等。制作完成这些效果后，要将其插入到网页中，才可以使其成为网些效果后，要将其插入到网页中，才可以使其成为网页的一部分。插入页的一部分。插入Fireworks制作的图像的步骤如下：制作的图像的步骤如下：将光标定位到要插入将光标定位到要插入Fireworks图像的位置。图像的位置。单击插入单击插入“常用常用”面板上的按钮，打开面板上的按钮，打开“插入插入Fireworks HTML”对话框。对话框。单击单击“浏览浏览”按钮选择要插入的按钮选择要插入的HTML文件。文件。5.3.4 使用表格使用表格 1创建表格创建表格 利利用用Dreamweaver MX

39、创创建建新新表表格格时时，首首先先打打开开插插入入“常常用用”面面板板，然然后后可可以以通通过过下下列列四四种种方方式式中中的的任任意一种：意一种：（1）在插入）在插入“常用常用”面板上，单击插入表格按钮面板上，单击插入表格按钮 。（2）通过主窗口的菜单）通过主窗口的菜单“插入插入”|“表格表格”命令。命令。（3）使用快捷组合键）使用快捷组合键“Ctrl+Alt+T”。（4）在在插插入入“常常用用”面面板板上上，拖拖动动表表格格 按按钮钮到到主主窗窗口的工作区中。口的工作区中。1)创建新表格创建新表格（1）如果要选择整个表格，可进行如下的操作之一：）如果要选择整个表格，可进行如下的操作之一：将

40、将光光标标置置于于表表格格中中的的某某个个单单元元格格中中，选选择择“修修改改”|“表格表格”|“选择表格选择表格”命令。命令。将将光光标标置置于于表表格格中中的的某某个个单单元元格格中中，再再按按两两次次组组合合键键“Ctrl+A”。将将光光标标置置于于表表格格中中的的某某个个单单元元格格中中，单单击击鼠鼠标标右右键键，在在弹弹出出的的快快捷捷菜菜单单中中选选择择“表表格格”|“选选择择表表格格”命命令。令。将将光光标标置置于于表表格格的的尾尾部部（在在表表格格的的同同一一行行，但但不不在在表表格之内），向左拖动鼠标。格之内），向左拖动鼠标。单击表格的边线。单击表格的边线。2）选择表格）选择

41、表格（2）选择单个单元格的方法有以下几种：）选择单个单元格的方法有以下几种：将将光光标标置置于于所所要要选选择择的的单单元元格格中中，按按一一次次组组合合键键“Ctrl+A”。将光标置于所要选择的单元格中，向右拖动鼠标。将光标置于所要选择的单元格中，向右拖动鼠标。将将光光标标置置于于所所要要选选择择的的单单元元格格中中，选选择择“编编辑辑”|“全选全选”命令。命令。按按住住Ctrl键键，单单击击所所要要选选择择的的单单元元格格，再再单单击击一一次次则则取消对单元格的选择。取消对单元格的选择。（3）选择多个单元格的方法有以下几种：）选择多个单元格的方法有以下几种：按住按住Ctrl键，单击所要选择

42、的所有单元格。键，单击所要选择的所有单元格。将光标置于单元格中，拖动鼠标，选择多个单元格。将光标置于单元格中，拖动鼠标，选择多个单元格。如如果果要要选选择择整整行行，将将光光标标置置于于该该行行的的左左边边缘缘，当当光光标变成标变成图标时单击鼠标左键。图标时单击鼠标左键。如如果果要要选选择择整整列列，将将光光标标置置于于该该列列的的上上边边缘缘，当当光光标变成标变成图标时单击鼠标左键。图标时单击鼠标左键。（4）选择的全部单元格的方法有以下几种：）选择的全部单元格的方法有以下几种：将将光光标标置置于于第第1个个单单元元格格中中，并并拖拖动动鼠鼠标标至至最最后后一一个个单元格。单元格。将将光光标标

43、置置于于第第1个个单单元元格格中中，按按住住Shift键键，再再单单击击最最后一个单元格。后一个单元格。将将光光标标置置于于第第1行行的的左左边边缘缘，当当光光标标变变成成图图标标时时，向下拖动鼠标至最后一行。向下拖动鼠标至最后一行。将将光光标标置置于于第第1列列的的上上边边缘缘，当当光光标标变变成成图图标标时时，向右拖动鼠标至最后一列。向右拖动鼠标至最后一列。（1）在在现现有有的的表表格格中中插插入入单单元元行行，可可以以选选择择以以下下的的操操作之一：作之一：将将光光标标移移到到要要插插入入单单元元行行的的下下一一行行，选选择择“修修改改”|“表格表格”|“插入行插入行”命令。命令。将将光

44、光标标移移到到要要插插入入单单元元行行的的下下一一行行，按按组组合合键键“Ctrl+M”。将将光光标标移移到到要要插插入入单单元元行行的的下下一一行行，单单击击鼠鼠标标右右键键，在弹出的快捷菜单中选择在弹出的快捷菜单中选择“表格表格”|“插入行插入行”命令。命令。3)添加添加/删除行列删除行列（2）在在现现有有的的表表格格中中插插入入单单元元列列，可可以以选选择择以以上上的的操操作之一：作之一：将将光光标标移移到到在在插插入入单单元元列列的的右右边边一一列列，选选择择“修修改改”|“表格表格”|“插入列插入列”命令。命令。将将光光标标移移到到要要插插入入单单元元列列的的右右边边一一列列，按按组

45、组合合键键“Ctrl+Shift+A”。将将光光标标移移到到要要插插入入单单元元列列的的右右边边一一列列，单单击击鼠鼠标标右右键键，在在弹弹出出的的快快捷捷菜菜单单中中选选择择“表表格格”|“插插入入列列”命令。命令。（3）如如果果想想在在现现有有的的表表格格中中添添加加多多行行或或多多列列，可可执执行行以下操作：以下操作：首首先先将将光光标标移移到到要要插插入入行行或或列列附附近近的的单单元元格格中中，单单击击鼠鼠标标右右键键，在在弹弹出出的的下下拉拉菜菜单单中中选选择择“表表格格”|“插插入入行行或或列列”命命令令，或或是是选选择择“修修改改”|“表表格格”|“插插入入行行或或列列”命命令

46、令，将将弹弹出出如如图图4-5所所示示的的“插插入入行行或或列列”对对话话框框。在在此此对对话话框框中中进进行行相相关关的的设设置置，然然后后单单击击“确确定定”按按钮钮，设设置置的的多多列列或或多多行行将将插插入入到到页面中。页面中。（4）删除整行）删除整行/整列，可以采用下列办法之一：整列，可以采用下列办法之一：先先选选择择欲欲删删除除的的整整行行或或整整列列，直直接接按按Del键键，即即可可删删除。除。先先将将光光标标移移到到要要删删除除的的行行或或列列中中，选选择择“修修改改”|“表格表格”|“删除行删除行”或或“删除列删除列”命令。命令。将将光光标标移移到到要要删删除除的的行行或或列

47、列中中，单单击击鼠鼠标标右右键键，在在弹弹出出的的快快捷捷菜菜单单中中选选择择“表表格格”|“删删除除行行”或或“删删除列除列”命令。命令。4）导入表格数据文件）导入表格数据文件 在在DreamweaverDreamweaver MXMX中中，利利用用插插入入列列表表数数据据命命令令可可以以很很容容易易把把表表格格数数据据加加入入到到网网页页中中。在在插插入入外外部部数数据据前前，首首先先要要将将表表格格数数据据文文件件转转换换成成 .txt.txt（文文本本文文件件）格格式式，并并且且该该文文件件中中的的数数据据要要带带有有分分隔隔符符，如如逗逗号号、分号、冒号等。分号、冒号等。要加入外部数

48、据，选择如下的任何一种操作：要加入外部数据，选择如下的任何一种操作：（1 1）选择）选择“文件文件”|“导入导入”|“表格式数据表格式数据”命令。命令。（2 2）选选择择“插插入入”|“表表格格对对象象”|“导导入入表表格格式式数数据据”命令。命令。（3 3）单单击击插插入入“常常用用”面面板板上上的的“表表格格数数据据”按按钮钮 。（1）设置表格的宽度及高度）设置表格的宽度及高度 在在Dreamweaver MX中中，修修改改表表格格的的大大小小有有以以下下两种方法。两种方法。通过鼠标拖曳法可以粗略地调整表格的大小。通过鼠标拖曳法可以粗略地调整表格的大小。通通过过“表表格格属属性性”对对话话

49、框框可可以以精精确确地地调调整整表表格格的的大大小。小。在在创创建建表表格格时时，可可以以通通过过表表格格对对话话框框来来设设置置表表格格的的宽宽度度，但但无无法法设设置置表表格格的的高高度度，如如果果要要设设置置表表格格的的高度，可以通过表格属性面板来确定。高度，可以通过表格属性面板来确定。2编辑表格编辑表格（2）合并）合并/拆分单元格拆分单元格 1）合并单元格）合并单元格 首首先先在在表表格格中中选选择择需需合合并并的的单单元元格格，属属性性面面板板变变成单元格属性面板，然后选择下列操作之一：成单元格属性面板，然后选择下列操作之一：选择选择“修改修改”|“表格表格”|“合并单元格合并单元格

50、”命令。命令。单单击击鼠鼠标标右右键键，在在弹弹出出的的快快捷捷菜菜单单中中选选择择“表表格格”|“合并单元格合并单元格”命令。命令。按组合键按组合键“Ctrl+Alt+M”。单击单元格属性面板上的合并单元格图标单击单元格属性面板上的合并单元格图标 。2）拆分单元格）拆分单元格 首首先先在在表表格格中中选选择择需需拆拆分分的的单单元元格格，选选择择下下列列任任何一种操作：何一种操作：选择选择“修改修改”|“表格表格”|“拆分单元格拆分单元格”命令。命令。单单击击鼠鼠标标右右键键，在在弹弹出出的的下下拉拉菜菜单单中中选选择择“表表格格”|“拆分单元格拆分单元格”命令。命令。按组合键按组合键“Ct