第5章网页制作工具Dreamweaver MX 2004基础.ppt

《第5章网页制作工具Dreamweaver MX 2004基础.ppt》由会员分享，可在线阅读，更多相关《第5章网页制作工具Dreamweaver MX 2004基础.ppt（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、5.1 5.1 DreamweaverDreamweaver MX 2004 MX 2004简介简介简介简介5.2 5.2 站点管理站点管理站点管理站点管理5.3 5.3 制作第一个网页制作第一个网页制作第一个网页制作第一个网页5.4 5.4 超链接超链接超链接超链接5.5 5.5 使用图像使用图像使用图像使用图像5.6 5.6 使用多媒体对象使用多媒体对象使用多媒体对象使用多媒体对象5.7 5.7 使用表格使用表格使用表格使用表格第第5章章 网页制作工具网页制作工具Dreamweaver MX 2004基础基础 利用利用利用利用DreamweaverDreamweaverDreamweave

2、rDreamweaver的可视化编辑功能，用户可以快速地创的可视化编辑功能，用户可以快速地创的可视化编辑功能，用户可以快速地创的可视化编辑功能，用户可以快速地创建页面而无需编写任何代码。在建页面而无需编写任何代码。在建页面而无需编写任何代码。在建页面而无需编写任何代码。在DreamweaverDreamweaverDreamweaverDreamweaver内可以直接对图内可以直接对图内可以直接对图内可以直接对图形编辑，把形编辑，把形编辑，把形编辑，把WordWordWordWord和和和和ExcelExcelExcelExcel文档复制和粘贴到文档复制和粘贴到文档复制和粘贴到文档复制和粘贴到

3、DreamweaverDreamweaverDreamweaverDreamweaver中，中，中，中，会保留字体、颜色、会保留字体、颜色、会保留字体、颜色、会保留字体、颜色、CSSCSSCSSCSS样式表信息。样式表信息。样式表信息。样式表信息。如果用户熟悉手工编写标记代码，如果用户熟悉手工编写标记代码，如果用户熟悉手工编写标记代码，如果用户熟悉手工编写标记代码，DreamweaverDreamweaverDreamweaverDreamweaver包括许多包括许多包括许多包括许多与编码相关的工具和功能，其使用将更加灵活。并且，借助与编码相关的工具和功能，其使用将更加灵活。并且，借助与编码相

4、关的工具和功能，其使用将更加灵活。并且，借助与编码相关的工具和功能，其使用将更加灵活。并且，借助DreamweaverDreamweaverDreamweaverDreamweaver还可以使用服务器语言（例如还可以使用服务器语言（例如还可以使用服务器语言（例如还可以使用服务器语言（例如ASPASPASPASP、ASP.NETASP.NETASP.NETASP.NET、ColdFusionColdFusionColdFusionColdFusion标记语言、标记语言、标记语言、标记语言、JSPJSPJSPJSP和和和和PHPPHPPHPPHP）生成支持动态数据库的生成支持动态数据库的生成支持动

5、态数据库的生成支持动态数据库的WebWebWebWeb应用程序。应用程序。应用程序。应用程序。目前，目前，目前，目前，DreamweaverDreamweaverDreamweaverDreamweaver的最新版本是的最新版本是的最新版本是的最新版本是DreamweaverDreamweaverDreamweaverDreamweaver MX 2004 MX 2004 MX 2004 MX 2004 v7.01v7.01v7.01v7.01，如果用户安装的是如果用户安装的是如果用户安装的是如果用户安装的是v7.0v7.0v7.0v7.0，一定要升级为一定要升级为一定要升级为一定要升级为v7

6、.01v7.01v7.01v7.01，否则否则否则否则有些功能将不能使用（如时间轴）。有些功能将不能使用（如时间轴）。有些功能将不能使用（如时间轴）。有些功能将不能使用（如时间轴）。5.1 5.1 DreamweaverDreamweaver MX 2004 MX 2004简介简介简介简介 1.1.启动启动DreamweaverDreamweaver MX 2004 MX 2004 安装好安装好安装好安装好DreamweaverDreamweaverDreamweaverDreamweaver MX MX MX MX 2004200420042004后，单击后，单击后，单击后，单击“开始开始开

7、始开始”“程程程程序序序序”“MacromediaMacromediaMacromediaMacromedia”“MacroMacroMacroMacromedia media media media DreamweaverDreamweaverDreamweaverDreamweaver MX 2004 MX 2004 MX 2004 MX 2004”命令。命令。命令。命令。DreamweaverDreamweaverDreamweaverDreamweaver MX 2004 MX 2004 MX 2004 MX 2004进进进进行一系列初始化过程后，首先行一系列初始化过程后，首先行一系列

8、初始化过程后，首先行一系列初始化过程后，首先显示显示显示显示“工作区设置工作区设置工作区设置工作区设置”对话框，对话框，对话框，对话框，如图如图如图如图5-15-15-15-1所示。由于要采用可视所示。由于要采用可视所示。由于要采用可视所示。由于要采用可视化方式设计网页，选中化方式设计网页，选中化方式设计网页，选中化方式设计网页，选中“设计设计设计设计者者者者”单选钮，单击单选钮，单击单选钮，单击单选钮，单击“确定确定确定确定”按按按按钮。钮。钮。钮。5.1 5.1 DreamweaverDreamweaver MX 2004 MX 2004简介简介简介简介5.1.1 5.1.1 5.1.1

9、5.1.1 DreamweaverDreamweaverDreamweaverDreamweaver MX 2004 MX 2004 MX 2004 MX 2004的启动和主工作区的启动和主工作区的启动和主工作区的启动和主工作区 图5-1 “工作区设置”对话框 2.2.DreamweaverDreamweaver MX 2004 MX 2004的工作区的工作区 DreamweaverDreamweaverDreamweaverDreamweaver MX 2004 MX 2004 MX 2004 MX 2004的设计工作区由插入工具栏、文的设计工作区由插入工具栏、文的设计工作区由插入工具栏、文

10、的设计工作区由插入工具栏、文档工具栏、文档窗口、属性面板和面板等部分组组成，如图档工具栏、文档窗口、属性面板和面板等部分组组成，如图档工具栏、文档窗口、属性面板和面板等部分组组成，如图档工具栏、文档窗口、属性面板和面板等部分组组成，如图5-35-35-35-3所示所示所示所示。5.1 5.1 DreamweaverDreamweaver MX 2004 MX 2004简介简介简介简介5.1.1 5.1.1 5.1.1 5.1.1 DreamweaverDreamweaverDreamweaverDreamweaver MX 2004 MX 2004 MX 2004 MX 2004的启动和主工作

11、区的启动和主工作区的启动和主工作区的启动和主工作区.组合面板活动面板内容插入工具栏文档工具栏文档编辑窗口属性面板图5-3 Dreamweaver MX 2004的工作区 1.常规参数设置 单击单击单击单击“编辑编辑编辑编辑”“首首首首选参数选参数选参数选参数”命令，或按命令，或按命令，或按命令，或按CtrlCtrlCtrlCtrl+U U U U组合键，组合键，组合键，组合键，打开打开打开打开“首选参数首选参数首选参数首选参数”对话框。对话框。对话框。对话框。选择选择选择选择“分类分类分类分类”列表中的列表中的列表中的列表中的“常规常规常规常规”选项，对话框右侧选项，对话框右侧选项，对话框右侧

12、选项，对话框右侧显示出相关的属性。其中显示出相关的属性。其中显示出相关的属性。其中显示出相关的属性。其中通常设置的属性有文档工通常设置的属性有文档工通常设置的属性有文档工通常设置的属性有文档工作区的切换和一些编辑选作区的切换和一些编辑选作区的切换和一些编辑选作区的切换和一些编辑选项。项。项。项。5.1 5.1 DreamweaverDreamweaver MX 2004 MX 2004简介简介简介简介5.1.2 5.1.2 5.1.2 5.1.2 DreamweaverDreamweaverDreamweaverDreamweaver MX 2004 MX 2004 MX 2004 MX 20

13、04的参数设置的参数设置的参数设置的参数设置 图5-12 常规参数设置 2.2.面板参数设置面板参数设置 DreamweaverDreamweaverDreamweaverDreamweaver中的面中的面中的面中的面板被组织到面板组中。面板被组织到面板组中。面板被组织到面板组中。面板被组织到面板组中。面板组中选定的面板显示为板组中选定的面板显示为板组中选定的面板显示为板组中选定的面板显示为一个选项卡。每个面板组一个选项卡。每个面板组一个选项卡。每个面板组一个选项卡。每个面板组都可以展开或折叠，并且都可以展开或折叠，并且都可以展开或折叠，并且都可以展开或折叠，并且可以和其它面板组停靠在可以和其

14、它面板组停靠在可以和其它面板组停靠在可以和其它面板组停靠在一起或取消停靠。面板组一起或取消停靠。面板组一起或取消停靠。面板组一起或取消停靠。面板组还可以停靠到集成的应用还可以停靠到集成的应用还可以停靠到集成的应用还可以停靠到集成的应用程序窗口中。这使得用户程序窗口中。这使得用户程序窗口中。这使得用户程序窗口中。这使得用户能够很容易地访问所需的能够很容易地访问所需的能够很容易地访问所需的能够很容易地访问所需的面板，而不会使工作区变面板，而不会使工作区变面板，而不会使工作区变面板，而不会使工作区变得混乱。得混乱。得混乱。得混乱。5.1 5.1 DreamweaverDreamweaver MX 2

15、004 MX 2004简介简介简介简介5.1.2 5.1.2 5.1.2 5.1.2 DreamweaverDreamweaverDreamweaverDreamweaver MX 2004 MX 2004 MX 2004 MX 2004的参数设置的参数设置的参数设置的参数设置 图5-13 面板参数设置 3.3.站点参数设置站点参数设置 选择选择选择选择“分类分类分类分类”列表列表列表列表中的中的中的中的“站点站点站点站点”选项，对选项，对选项，对选项，对话框右侧显示出相关的话框右侧显示出相关的话框右侧显示出相关的话框右侧显示出相关的属性，此对话框用于为属性，此对话框用于为属性，此对话框用于为

16、属性，此对话框用于为“文件文件文件文件”面板设置站点面板设置站点面板设置站点面板设置站点首选参数，如图首选参数，如图首选参数，如图首选参数，如图5-145-145-145-14所所所所示。示。示。示。5.1 5.1 DreamweaverDreamweaver MX 2004 MX 2004简介简介简介简介5.1.2 5.1.2 5.1.2 5.1.2 DreamweaverDreamweaverDreamweaverDreamweaver MX 2004 MX 2004 MX 2004 MX 2004的参数设置的参数设置的参数设置的参数设置 图5-14 站点参数设置 基于基于基于基于Inte

17、rnetInternetInternetInternet服务器的不可知特性，因此通常将存储于服务器的不可知特性，因此通常将存储于服务器的不可知特性，因此通常将存储于服务器的不可知特性，因此通常将存储于InternetInternetInternetInternet服务器上的站点和相关文档称作远端站点。服务器上的站点和相关文档称作远端站点。服务器上的站点和相关文档称作远端站点。服务器上的站点和相关文档称作远端站点。利用利用利用利用DreamweaverDreamweaverDreamweaverDreamweaver可以对位于可以对位于可以对位于可以对位于InternetInternetInte

18、rnetInternet服务器上的站点文档直接进服务器上的站点文档直接进服务器上的站点文档直接进服务器上的站点文档直接进行编辑和管理，但这在很多时候非常不便行编辑和管理，但这在很多时候非常不便行编辑和管理，但这在很多时候非常不便行编辑和管理，但这在很多时候非常不便。既然位于既然位于既然位于既然位于InternetInternetInternetInternet服务器上的站点仍是以文件和文件夹作服务器上的站点仍是以文件和文件夹作服务器上的站点仍是以文件和文件夹作服务器上的站点仍是以文件和文件夹作为基本要素的磁盘组织形式，那么能不能首先在本地计算机的为基本要素的磁盘组织形式，那么能不能首先在本地计

19、算机的为基本要素的磁盘组织形式，那么能不能首先在本地计算机的为基本要素的磁盘组织形式，那么能不能首先在本地计算机的磁盘上构建出整个网站的框架，编辑相应的文档，然后再将之磁盘上构建出整个网站的框架，编辑相应的文档，然后再将之磁盘上构建出整个网站的框架，编辑相应的文档，然后再将之磁盘上构建出整个网站的框架，编辑相应的文档，然后再将之放置到放置到放置到放置到InternetInternetInternetInternet服务器上呢服务器上呢服务器上呢服务器上呢?答案是可以的，这就是本地站点答案是可以的，这就是本地站点答案是可以的，这就是本地站点答案是可以的，这就是本地站点的概念。的概念。的概念。的概

20、念。利用利用利用利用DreamweaverDreamweaverDreamweaverDreamweaver，可以在本地计算机上创建出站点的框可以在本地计算机上创建出站点的框可以在本地计算机上创建出站点的框可以在本地计算机上创建出站点的框架，从整体上对站点全局进行把握。在站点设计完毕，可以利架，从整体上对站点全局进行把握。在站点设计完毕，可以利架，从整体上对站点全局进行把握。在站点设计完毕，可以利架，从整体上对站点全局进行把握。在站点设计完毕，可以利用各种上传工具，将本地站点上传到用各种上传工具，将本地站点上传到用各种上传工具，将本地站点上传到用各种上传工具，将本地站点上传到InternetI

21、nternetInternetInternet服务器上以形成服务器上以形成服务器上以形成服务器上以形成远端站点。远端站点。远端站点。远端站点。5.2 5.2 站点管理站点管理站点管理站点管理 5.2.1 5.2.1 本地站点和远端站点本地站点和远端站点本地站点和远端站点本地站点和远端站点 设计目标设计目标 建立一个本地站点，建立一个本地站点，建立一个本地站点，建立一个本地站点，定义站点名称和站点使用定义站点名称和站点使用定义站点名称和站点使用定义站点名称和站点使用的本地根文件夹以及默认的本地根文件夹以及默认的本地根文件夹以及默认的本地根文件夹以及默认的图像文件夹，为以后的的图像文件夹，为以后的

22、的图像文件夹，为以后的的图像文件夹，为以后的页面制作和管理打好基础。页面制作和管理打好基础。页面制作和管理打好基础。页面制作和管理打好基础。本实例定义站点的名称为本实例定义站点的名称为本实例定义站点的名称为本实例定义站点的名称为“SampleSampleSampleSample”，使用的本地使用的本地使用的本地使用的本地文件夹为文件夹为文件夹为文件夹为“D:D:D:D:mywebmywebmywebmyweb”，默认的图像文件夹为默认的图像文件夹为默认的图像文件夹为默认的图像文件夹为“D:D:D:D:mywebmywebmywebmywebimageimageimageimage”，站站站站点

23、的设置和结构如图点的设置和结构如图点的设置和结构如图点的设置和结构如图5-155-155-155-15所示。所示。所示。所示。5.2 5.2 站点管理站点管理站点管理站点管理 5.2.2 5.2.2 建立本地站点建立本地站点建立本地站点建立本地站点 图5-15 需要建立的站点结构 1.1.编辑站点编辑站点 在在在在DreamweaverDreamweaverDreamweaverDreamweaver中创建好本地站点后，如果需要，还可以中创建好本地站点后，如果需要，还可以中创建好本地站点后，如果需要，还可以中创建好本地站点后，如果需要，还可以对整个站点进行编辑操作。例如，编辑修改站点、复制站点

24、、对整个站点进行编辑操作。例如，编辑修改站点、复制站点、对整个站点进行编辑操作。例如，编辑修改站点、复制站点、对整个站点进行编辑操作。例如，编辑修改站点、复制站点、删除站点等。删除站点等。删除站点等。删除站点等。2.文件的基本操作 在在DreamweaverDreamweaver中，可以使用中，可以使用“文件文件”菜单来对单独的文菜单来对单独的文件进行管理。例如，执行件进行管理。例如，执行“新建新建”、“打开打开”、“保存保存”、“另存为另存为”等命令等命令 。3.指定站点首页 网站的门户就是首页，通常首页文件中总包含有若干指向网站的门户就是首页，通常首页文件中总包含有若干指向其他主要网页的超

25、链接，用户可以先为网站创建一个空白首其他主要网页的超链接，用户可以先为网站创建一个空白首页，然后编辑，并可以利用站点地图来查看网站中超链接的页，然后编辑，并可以利用站点地图来查看网站中超链接的情况。情况。5.2 5.2 站点管理站点管理站点管理站点管理 5.2.3 5.2.3 管理本地站点管理本地站点管理本地站点管理本地站点 设计目标设计目标 制作一个浅黄色制作一个浅黄色制作一个浅黄色制作一个浅黄色背景的网页，在页背景的网页，在页背景的网页，在页背景的网页，在页面上通过添加文字面上通过添加文字面上通过添加文字面上通过添加文字和水平线，展示一和水平线，展示一和水平线，展示一和水平线，展示一个旅游

26、文化网页的个旅游文化网页的个旅游文化网页的个旅游文化网页的宣传内容，并且在宣传内容，并且在宣传内容，并且在宣传内容，并且在页面的右下方显示页面的右下方显示页面的右下方显示页面的右下方显示出感谢信息和当前出感谢信息和当前出感谢信息和当前出感谢信息和当前日期，实例效果如日期，实例效果如日期，实例效果如日期，实例效果如图图图图5-285-285-285-28所示。所示。所示。所示。【例【例5-2】5.3 5.3 制作第一个网页制作第一个网页制作第一个网页制作第一个网页 5.3.1 5.3.1 制作网页的一般过程制作网页的一般过程制作网页的一般过程制作网页的一般过程 图5-28 实例效果 1.1.设置

27、网页标题设置网页标题 设置网页标题的方法设置网页标题的方法设置网页标题的方法设置网页标题的方法为：在文档窗口工具栏中为：在文档窗口工具栏中为：在文档窗口工具栏中为：在文档窗口工具栏中的的的的“标题标题标题标题”文本框内直接文本框内直接文本框内直接文本框内直接输入网页的标题文字；也输入网页的标题文字；也输入网页的标题文字；也输入网页的标题文字；也可以在文档窗口中选择可以在文档窗口中选择可以在文档窗口中选择可以在文档窗口中选择“修改修改修改修改”菜单中的菜单中的菜单中的菜单中的“页面属页面属页面属页面属性性性性”命令，或者按命令，或者按命令，或者按命令，或者按CtrlCtrlCtrlCtrl+J

28、J J J快捷键，快捷键，快捷键，快捷键，打开打开打开打开“页面属性页面属性页面属性页面属性”对话框，对话框，对话框，对话框，选择选择选择选择“标题标题标题标题/编码编码编码编码”分类，分类，分类，分类，在右侧的在右侧的在右侧的在右侧的“标题标题标题标题”文本框文本框文本框文本框内设置网页的标题，如图内设置网页的标题，如图内设置网页的标题，如图内设置网页的标题，如图5-425-425-425-42所示。所示。所示。所示。5.3 5.3 制作第一个网页制作第一个网页制作第一个网页制作第一个网页 5.3 2 5.3 2 设置页面属性设置页面属性设置页面属性设置页面属性图5-42 设置网页标题 2.

29、2.设置网页其他属性设置网页其他属性 如果需要设置网页的其如果需要设置网页的其如果需要设置网页的其如果需要设置网页的其他属性，可以打开他属性，可以打开他属性，可以打开他属性，可以打开“页面页面页面页面属性属性属性属性”对话框设置，对话对话框设置，对话对话框设置，对话对话框设置，对话框的功能分类如下：框的功能分类如下：框的功能分类如下：框的功能分类如下：(1)(1)(1)(1)外观外观外观外观 外观对话框主要设置外观对话框主要设置外观对话框主要设置外观对话框主要设置网页基本页面布局选项，网页基本页面布局选项，网页基本页面布局选项，网页基本页面布局选项，包括页面字体、大小、文包括页面字体、大小、文

30、包括页面字体、大小、文包括页面字体、大小、文本颜色、背景颜色、背景本颜色、背景颜色、背景本颜色、背景颜色、背景本颜色、背景颜色、背景图像、左边距、右边距、图像、左边距、右边距、图像、左边距、右边距、图像、左边距、右边距、上边距和下边距，如图上边距和下边距，如图上边距和下边距，如图上边距和下边距，如图5-5-5-5-43434343所示。所示。所示。所示。5.3 5.3 制作第一个网页制作第一个网页制作第一个网页制作第一个网页 5.3 2 5.3 2 设置页面属性设置页面属性设置页面属性设置页面属性图5-43 外观对话框 2.2.设置网页其他属性设置网页其他属性 (2)(2)(2)(2)链接链接

31、链接链接 网页中的链接就是以网页中的链接就是以网页中的链接就是以网页中的链接就是以文字或图像作为链接对象，文字或图像作为链接对象，文字或图像作为链接对象，文字或图像作为链接对象，然后指定一个要跳转的网然后指定一个要跳转的网然后指定一个要跳转的网然后指定一个要跳转的网页地址，当浏览者单击文页地址，当浏览者单击文页地址，当浏览者单击文页地址，当浏览者单击文字或其他对象时，浏览器字或其他对象时，浏览器字或其他对象时，浏览器字或其他对象时，浏览器跳转到指定的目标网页。跳转到指定的目标网页。跳转到指定的目标网页。跳转到指定的目标网页。链接对话框主要设置链接对话框主要设置链接对话框主要设置链接对话框主要设

32、置网页中超级链接的字体、网页中超级链接的字体、网页中超级链接的字体、网页中超级链接的字体、字体大小、各种链接颜色、字体大小、各种链接颜色、字体大小、各种链接颜色、字体大小、各种链接颜色、链接下划线的样式，如图链接下划线的样式，如图链接下划线的样式，如图链接下划线的样式，如图5-445-445-445-44所示所示所示所示。5.3 5.3 制作第一个网页制作第一个网页制作第一个网页制作第一个网页 5.3 2 5.3 2 设置页面属性设置页面属性设置页面属性设置页面属性 图5-44 链接对话框 2.2.设置网页其他属性设置网页其他属性 (3)(3)(3)(3)跟踪图像跟踪图像跟踪图像跟踪图像 跟踪

33、图像是放在跟踪图像是放在跟踪图像是放在跟踪图像是放在“文文文文档档档档”窗口背景中的窗口背景中的窗口背景中的窗口背景中的JPEGJPEGJPEGJPEG、GIFGIFGIFGIF或或或或PNGPNGPNGPNG图像。在跟踪图图像。在跟踪图图像。在跟踪图图像。在跟踪图像对话框中，可以隐藏图像对话框中，可以隐藏图像对话框中，可以隐藏图像对话框中，可以隐藏图像、设置图像的不透明度像、设置图像的不透明度像、设置图像的不透明度像、设置图像的不透明度和更改图像的位置，如图和更改图像的位置，如图和更改图像的位置，如图和更改图像的位置，如图5-455-455-455-45所示。所示。所示。所示。5.3 5.3

34、 制作第一个网页制作第一个网页制作第一个网页制作第一个网页 5.3.2 5.3.2 设置页面属性设置页面属性设置页面属性设置页面属性 图5-45 跟踪图像对话框 1.1.文本文本 文本的操作主要包括：输入文字、设置文字大小、设置字文本的操作主要包括：输入文字、设置文字大小、设置字文本的操作主要包括：输入文字、设置文字大小、设置字文本的操作主要包括：输入文字、设置文字大小、设置字体、设置文本颜色、设置文本对齐方式等。体、设置文本颜色、设置文本对齐方式等。体、设置文本颜色、设置文本对齐方式等。体、设置文本颜色、设置文本对齐方式等。2.插入日期 DreamweaverDreamweaverDream

35、weaverDreamweaver提供了一个方便的日期对象，该对象使用户提供了一个方便的日期对象，该对象使用户提供了一个方便的日期对象，该对象使用户提供了一个方便的日期对象，该对象使用户可以以任何喜欢的格式插入当前日期，还可以选择在每次保可以以任何喜欢的格式插入当前日期，还可以选择在每次保可以以任何喜欢的格式插入当前日期，还可以选择在每次保可以以任何喜欢的格式插入当前日期，还可以选择在每次保存文件时都自动更新该日期。存文件时都自动更新该日期。存文件时都自动更新该日期。存文件时都自动更新该日期。将插入点放置到要插入日期的位置，执行将插入点放置到要插入日期的位置，执行将插入点放置到要插入日期的位置

36、，执行将插入点放置到要插入日期的位置，执行“插入插入插入插入”“日日日日期期期期”命令，弹出命令，弹出命令，弹出命令，弹出“插入日期插入日期插入日期插入日期”对话框，选择一种日期格式。对话框，选择一种日期格式。对话框，选择一种日期格式。对话框，选择一种日期格式。设置完毕后，单击设置完毕后，单击设置完毕后，单击设置完毕后，单击“确定确定确定确定”按钮完成日期的插入。按钮完成日期的插入。按钮完成日期的插入。按钮完成日期的插入。5.3 5.3 制作第一个网页制作第一个网页制作第一个网页制作第一个网页 5.3.3 5.3.3 网页基本元素网页基本元素网页基本元素网页基本元素 1.1.超链接的分类超链接

37、的分类 根据超链接目标文件的不同，超链接可分为页面超链接、根据超链接目标文件的不同，超链接可分为页面超链接、根据超链接目标文件的不同，超链接可分为页面超链接、根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接、电子邮件超接链等；根据超链接单击对象的不锚点超链接、电子邮件超接链等；根据超链接单击对象的不锚点超链接、电子邮件超接链等；根据超链接单击对象的不锚点超链接、电子邮件超接链等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接、图像映射等。同，超链接可分为文字超链接、图像超链接、图像映射等。同，超链接可分为文字超链接、图像超链接、图像映射等。同，超链接可分为文字超链接、

38、图像超链接、图像映射等。2.2.路径路径 (1)(1)(1)(1)绝对路径绝对路径绝对路径绝对路径 绝对路径是包括服务器规范在内的完全路径（网页一般使绝对路径是包括服务器规范在内的完全路径（网页一般使绝对路径是包括服务器规范在内的完全路径（网页一般使绝对路径是包括服务器规范在内的完全路径（网页一般使用用用用http:/http:/http:/http:/）。）。）。）。(2)(2)(2)(2)根目录相对路径根目录相对路径根目录相对路径根目录相对路径 根目录相对路径是指从站点根文件夹到被链接文档经过的根目录相对路径是指从站点根文件夹到被链接文档经过的根目录相对路径是指从站点根文件夹到被链接文档经

39、过的根目录相对路径是指从站点根文件夹到被链接文档经过的路径。路径。路径。路径。(3)(3)(3)(3)文档目录相对路径文档目录相对路径文档目录相对路径文档目录相对路径 文档目录相对路径是指以当前文档所在位置为起点到被链文档目录相对路径是指以当前文档所在位置为起点到被链文档目录相对路径是指以当前文档所在位置为起点到被链文档目录相对路径是指以当前文档所在位置为起点到被链接文档经过的路径，这种方式适合于创建本地链接。接文档经过的路径，这种方式适合于创建本地链接。接文档经过的路径，这种方式适合于创建本地链接。接文档经过的路径，这种方式适合于创建本地链接。5.4 5.4 超链接超链接超链接超链接 5.4

40、.1 5.4.1 超级链接的基本概念超级链接的基本概念超级链接的基本概念超级链接的基本概念 设计目标设计目标 制作一个介绍中国四大制作一个介绍中国四大制作一个介绍中国四大制作一个介绍中国四大名著的页面，使用了锚点链名著的页面，使用了锚点链名著的页面，使用了锚点链名著的页面，使用了锚点链接、页面间链接和电子邮件接、页面间链接和电子邮件接、页面间链接和电子邮件接、页面间链接和电子邮件链接等技术。当用户单击主链接等技术。当用户单击主链接等技术。当用户单击主链接等技术。当用户单击主页面栏目中某个名著的链接页面栏目中某个名著的链接页面栏目中某个名著的链接页面栏目中某个名著的链接时，首先链接到本页面内该时

41、，首先链接到本页面内该时，首先链接到本页面内该时，首先链接到本页面内该作品的简介位置，如果用户作品的简介位置，如果用户作品的简介位置，如果用户作品的简介位置，如果用户需要查看详细内容，单击需要查看详细内容，单击需要查看详细内容，单击需要查看详细内容，单击“详细内容详细内容详细内容详细内容”链接，进入相应链接，进入相应链接，进入相应链接，进入相应的页面显示出详细的作品内的页面显示出详细的作品内的页面显示出详细的作品内的页面显示出详细的作品内容。实例效果如图容。实例效果如图容。实例效果如图容。实例效果如图5-505-505-505-50所示。所示。所示。所示。【例【例5-3】5.4 5.4 超链接

42、超链接超链接超链接 5.4.2 5.4.2 在在在在DreamweaverDreamweaver中设置超链接中设置超链接中设置超链接中设置超链接 图5-50 实例效果 设计目标设计目标 制作一个学校建筑的制作一个学校建筑的制作一个学校建筑的制作一个学校建筑的展示网页，通过学校校风展示网页，通过学校校风展示网页，通过学校校风展示网页，通过学校校风图像和循环滚动图像的展图像和循环滚动图像的展图像和循环滚动图像的展图像和循环滚动图像的展示，突出学校的建筑风格示，突出学校的建筑风格示，突出学校的建筑风格示，突出学校的建筑风格和特色。循环的图像支持和特色。循环的图像支持和特色。循环的图像支持和特色。循环

43、的图像支持超链接，并且鼠标移动到超链接，并且鼠标移动到超链接，并且鼠标移动到超链接，并且鼠标移动到图像上时，画面静止；鼠图像上时，画面静止；鼠图像上时，画面静止；鼠图像上时，画面静止；鼠标移出图像后，图像继续标移出图像后，图像继续标移出图像后，图像继续标移出图像后，图像继续滚动。在浏览器中的显示滚动。在浏览器中的显示滚动。在浏览器中的显示滚动。在浏览器中的显示效果如图效果如图效果如图效果如图5-625-625-625-62所示。所示。所示。所示。【例【例5-4】5.5 5.5 使用图像使用图像使用图像使用图像 5.5.1 5.5.1 插入图像插入图像插入图像插入图像 图5-62 实例效果 设计

44、目标设计目标 制作一个认识世界制作一个认识世界制作一个认识世界制作一个认识世界地图的网页，当用户将地图的网页，当用户将地图的网页，当用户将地图的网页，当用户将鼠标移至地图的不同组鼠标移至地图的不同组鼠标移至地图的不同组鼠标移至地图的不同组成部分时，显示出相应成部分时，显示出相应成部分时，显示出相应成部分时，显示出相应的说明文字，例如鼠标的说明文字，例如鼠标的说明文字，例如鼠标的说明文字，例如鼠标移到南美洲区域上时，移到南美洲区域上时，移到南美洲区域上时，移到南美洲区域上时，便会显示便会显示便会显示便会显示“南美洲南美洲南美洲南美洲”的的的的字样。单击地图图像的字样。单击地图图像的字样。单击地图

45、图像的字样。单击地图图像的不同组成部分时，打开不同组成部分时，打开不同组成部分时，打开不同组成部分时，打开相应的链接页面显示相相应的链接页面显示相相应的链接页面显示相相应的链接页面显示相应的简介，效果如图应的简介，效果如图应的简介，效果如图应的简介，效果如图5-5-5-5-71717171所示。所示。所示。所示。【例【例5-5】5.5 5.5 使用图像使用图像使用图像使用图像 5.5.2 5.5.2 图像映射图像映射图像映射图像映射 图5-71 实例效果 设计目标设计目标 制作一个翻转图像制作一个翻转图像制作一个翻转图像制作一个翻转图像的效果，原始图像是一的效果，原始图像是一的效果，原始图像是

46、一的效果，原始图像是一个幻想电脑的卡通人物。个幻想电脑的卡通人物。个幻想电脑的卡通人物。个幻想电脑的卡通人物。当鼠标经过图像时，图当鼠标经过图像时，图当鼠标经过图像时，图当鼠标经过图像时，图像变为一幅真正的电脑像变为一幅真正的电脑像变为一幅真正的电脑像变为一幅真正的电脑画面，而鼠标离开时，画面，而鼠标离开时，画面，而鼠标离开时，画面，而鼠标离开时，图像又恢复为原始图像。图像又恢复为原始图像。图像又恢复为原始图像。图像又恢复为原始图像。当单击图像时，链接到当单击图像时，链接到当单击图像时，链接到当单击图像时，链接到另外一个介绍电脑的页另外一个介绍电脑的页另外一个介绍电脑的页另外一个介绍电脑的页面

47、，效果如图面，效果如图面，效果如图面，效果如图5-765-765-765-76所示。所示。所示。所示。【例【例5-6】5.5 5.5 使用图像使用图像使用图像使用图像 5.5.3 5.5.3 制作鼠标经过图像制作鼠标经过图像制作鼠标经过图像制作鼠标经过图像 图5-76 实例效果 网页中的多媒体对象包括音频、视频、网页中的多媒体对象包括音频、视频、网页中的多媒体对象包括音频、视频、网页中的多媒体对象包括音频、视频、FlashFlashFlashFlash电影、电影、电影、电影、JavaJavaJavaJava小程序、小程序、小程序、小程序、ShockwaveShockwaveShockwaveS

48、hockwave电影和电影和电影和电影和ActiveXActiveXActiveXActiveX控件等对象。在网页中添加控件等对象。在网页中添加控件等对象。在网页中添加控件等对象。在网页中添加多媒体对象可以使制作出的网页有声有色。目前在网络上播放多媒体对象可以使制作出的网页有声有色。目前在网络上播放多媒体对象可以使制作出的网页有声有色。目前在网络上播放多媒体对象可以使制作出的网页有声有色。目前在网络上播放的音频和视频文件格式包括：的音频和视频文件格式包括：的音频和视频文件格式包括：的音频和视频文件格式包括：音频：主要包含音频：主要包含音频：主要包含音频：主要包含WavWavWavWav、Mid

49、iMidiMidiMidi、Mp3Mp3Mp3Mp3、AifAifAifAif和和和和RaRaRaRa等文件格式。等文件格式。等文件格式。等文件格式。视频：主要有视频：主要有视频：主要有视频：主要有RealMediaRealMediaRealMediaRealMedia、Windows Windows Windows Windows MedlaMedlaMedlaMedla、QuickTimeQuickTimeQuickTimeQuickTime三三三三种视频文件，其中种视频文件，其中种视频文件，其中种视频文件，其中RealMediaRealMediaRealMediaRealMedia和和和

50、和Windows MediaWindows MediaWindows MediaWindows Media格式是目前国内格式是目前国内格式是目前国内格式是目前国内比较广泛使用的。比较广泛使用的。比较广泛使用的。比较广泛使用的。设计目标设计目标 为前面章节中制作的校园建筑网页制作背景音乐。当页面为前面章节中制作的校园建筑网页制作背景音乐。当页面为前面章节中制作的校园建筑网页制作背景音乐。当页面为前面章节中制作的校园建筑网页制作背景音乐。当页面打开时，自动播放一首温馨的打开时，自动播放一首温馨的打开时，自动播放一首温馨的打开时，自动播放一首温馨的MidiMidiMidiMidi背景音乐，使用户感觉