Cha02DreamweaverCC的基本操作详解课件.ppt

1、第第2 2章章 Dreamweaver CCDreamweaver CC的基本的基本操作操作（时间：（时间：2 2次课，次课，4 4学时）学时）本章主要介绍本章主要介绍Dreamweaver CC的一些基本操作，的一些基本操作，只有掌握基本操作在以后制作网页时才可以得心应手。只有掌握基本操作在以后制作网页时才可以得心应手。第第2 2章章 Dreamweaver CCDreamweaver CC的基本的基本操作操作第第2 2章章 Dreamweaver CCDreamweaver CC的基本的基本操作操作n2.1 Dreamweaver CC2.1 Dreamweaver CC的工作界面的工作界

2、面n2.2 2.2 创建站点创建站点n2.3 2.3 管理站点内容管理站点内容n2.4 2.4 网页文档的基本操作网页文档的基本操作n2.5 2.5 设置网页文本设置网页文本n2.6 2.6 为网页添加图像为网页添加图像n2.7 2.7 设置超级链接设置超级链接n2.8 2.8 思考与练习思考与练习2.1 Dreamweaver CC2.1 Dreamweaver CC的工作界面的工作界面 Dreamweaver Dreamweaver是现在最流行的网页制作工具，使用是现在最流行的网页制作工具，使用Dreamweaver CCDreamweaver CC可以可以轻而易举的制作出跨越平台限制和跨

3、越浏览器限制的充满动感的网页，图轻而易举的制作出跨越平台限制和跨越浏览器限制的充满动感的网页，图2.12.1为为Dreamweaver CCDreamweaver CC工作界面。工作界面。1.1.菜单栏菜单栏 菜单栏显示的菜单包括文件、编辑、查看、插入、修改、格式、命令、菜单栏显示的菜单包括文件、编辑、查看、插入、修改、格式、命令、站点、窗口、帮助站点、窗口、帮助1010个菜单项，如所示。个菜单项，如所示。图图2.1 DreamweaverCC2.1 DreamweaverCC工作界面工作界面 图图2.2 2.2 菜单栏菜单栏2.1 Dreamweaver CC2.1 Dreamweaver

4、CC的工作界面的工作界面2 2文档窗口文档窗口 文档窗口显示当前创建和编辑的网页文档。用户可以在设计视图、代码文档窗口显示当前创建和编辑的网页文档。用户可以在设计视图、代码视图、拆分视图中查看文档，如图视图、拆分视图中查看文档，如图2.32.3所示。所示。3.3.【属性【属性】面板】面板 【属性【属性】面板用于查看和编辑所选对象的各种属性。】面板用于查看和编辑所选对象的各种属性。【属性【属性】面板可以】面板可以检查和编辑当前选定页面元素的最常用属性。检查和编辑当前选定页面元素的最常用属性。【属性【属性】面板中的内容根据选】面板中的内容根据选定元素的不同会有所不同，图定元素的不同会有所不同，图2

5、.42.4所示的是图片的所示的是图片的【属性【属性】面板。】面板。4.4.浮动面板浮动面板 【属性【属性】面板以外的其他面板可以统称为浮动面板，各浮动面板主要由】面板以外的其他面板可以统称为浮动面板，各浮动面板主要由面板的特征命名，这些面板都浮动于编辑窗口之外。我们可以通过菜单栏中面板的特征命名，这些面板都浮动于编辑窗口之外。我们可以通过菜单栏中的的【窗口【窗口】命令来打开相应的面板，如图】命令来打开相应的面板，如图2.52.5所示。所示。图图2.4 2.4 属性面板属性面板 图图2.5 2.5 浮动面板浮动面板 2.1 Dreamweaver CC2.1 Dreamweaver CC的工作界

6、面的工作界面5.5.插入面板插入面板 插入面板包含用于创建和插入对象的按钮。当鼠标移到一个按钮上时，会插入面板包含用于创建和插入对象的按钮。当鼠标移到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。这些按钮被组织到几个类别中，出现一个工具提示，其中含有该按钮的名称。这些按钮被组织到几个类别中，可以在插入面板的上方切换它们。当前文档包含服务器代码时，还会显示其他可以在插入面板的上方切换它们。当前文档包含服务器代码时，还会显示其他类别。当启动类别。当启动DreamweaverDreamweaver时，系统会打开上次使用的类别，时，系统会打开上次使用的类别，【常用【常用】插入面板】插入面板如

7、图如图2.62.6所示。所示。6.6.【文件【文件】面板】面板 在次面板中可以管理组成站点的文件和文件夹，类似于在次面板中可以管理组成站点的文件和文件夹，类似于WindowsWindows中的资源管中的资源管理器功能。理器功能。除以上介绍的面板外，除以上介绍的面板外，Dreamweaver CS5Dreamweaver CS5还提供了许多面板、检查器窗口，还提供了许多面板、检查器窗口，如如【历史记录【历史记录】面板和代码检查器。可以使用菜单中的】面板和代码检查器。可以使用菜单中的【窗口【窗口】命令将隐藏的】命令将隐藏的面板打开。面板打开。图图2.6 2.6 【插入】面板【插入】面板 2.2 2

8、.2 创建站点创建站点(1)(1)在菜单栏选择在菜单栏选择【站点【站点】|【管理站点【管理站点】命令，随即弹出】命令，随即弹出【管理站点【管理站点】对话】对话框，如图框，如图2.72.7所示。所示。(2)(2)在弹出在弹出【管理站点【管理站点】对话框中，单击】对话框中，单击【新建【新建】按钮，如图】按钮，如图2.82.8所示。所示。图图2.7 2.7 选择【管理站点】命令选择【管理站点】命令 图图2.8 2.8 单击【新建】按钮单击【新建】按钮 站点是一组具有共享属性（如相关主题、类似的设计或共同目的）的站点是一组具有共享属性（如相关主题、类似的设计或共同目的）的链接文档和资源。链接文档和资源

9、。DreamweaverDreamweaver是创建和管理站点的工具，使用它不仅可以是创建和管理站点的工具，使用它不仅可以创建单独的文档，还可以创建完整的创建单独的文档，还可以创建完整的WebWeb站点。站点。创建本地站点的步骤如下：创建本地站点的步骤如下：2.2 2.2 创建站点创建站点(3)(3)随即弹出随即弹出【站点设置对象【站点设置对象】对话框，在】对话框，在【站点名称【站点名称】文本框中输入所需要的】文本框中输入所需要的名称，然后单击名称，然后单击【本地站点文件夹【本地站点文件夹】右侧的文件夹按钮，如图】右侧的文件夹按钮，如图2.92.9所示。所示。(4)(4)随即弹出随即弹出【选择

10、跟文件夹【选择跟文件夹】对话框，选择正确的路径及文件夹，然后单击】对话框，选择正确的路径及文件夹，然后单击【选择文件夹【选择文件夹】按钮，返回到】按钮，返回到【站点设置对象【站点设置对象】对话框中单击】对话框中单击【保存【保存】按】按钮，然后单击钮，然后单击【完成【完成】按钮即可如图】按钮即可如图2.102.10所示所示图图2.9 2.9 【站点设置对象】按钮【站点设置对象】按钮 图图2.10 2.10 【选择跟文件】对话框【选择跟文件】对话框 2.3 2.3 管理站点内容管理站点内容 站点建立完成后，就需要对所建立的站点进行管理，下面介绍如何对站点建立完成后，就需要对所建立的站点进行管理，下

11、面介绍如何对站点进行管理。站点进行管理。2.3.1 2.3.1 添加文件或文件夹添加文件或文件夹在文件面板中创建文件或文件夹的具体操作步骤如下：在文件面板中创建文件或文件夹的具体操作步骤如下：(1)(1)选择选择【窗口【窗口】|【文件【文件】命令，打开】命令，打开【文件【文件】面板，在】面板，在【文件【文件】面板中的空】面板中的空白位置单击鼠标右键，在弹出的下拉菜单中选择白位置单击鼠标右键，在弹出的下拉菜单中选择【新建文件夹【新建文件夹】或】或【新建【新建文件文件】命令，如图】命令，如图2.112.11所示。所示。(2)(2)继续单击鼠标右键，在弹出的菜单中选择继续单击鼠标右键，在弹出的菜单中

12、选择【新建文件【新建文件】命令，创建一个文件，】命令，创建一个文件，在在 【文件【文件】面板中效果如图】面板中效果如图2.122.12所示。所示。图图2.11 2.11 新建文件夹或文件新建文件夹或文件 图图2.12 2.12 新建文件夹新建文件夹 2.3.2 2.3.2 删除文件或文件夹删除文件或文件夹在制作网页的过程中有时候需要将多余的文件夹或文件删除，下面介绍如何删除在制作网页的过程中有时候需要将多余的文件夹或文件删除，下面介绍如何删除文件或文件夹。文件或文件夹。(1)(1)打开打开【文件【文件】面板，选择需要删除的文件夹或文件，单击鼠标右键，在弹出】面板，选择需要删除的文件夹或文件，单

13、击鼠标右键，在弹出的快捷菜单中选择的快捷菜单中选择【编辑【编辑】|【删除【删除】命令，如图】命令，如图2.132.13所示。所示。(2)(2)随即弹出随即弹出【提示【提示】对话框，单击】对话框，单击【是【是】按钮，这样就可以文件夹或文件删除，】按钮，这样就可以文件夹或文件删除，如图如图2.142.14所示。所示。提提 示：示：选择需要删除的文件夹或文件，按选择需要删除的文件夹或文件，按DeleteDelete键也可以将其删除。键也可以将其删除。图图2.13 2.13 选择【删除】命令选择【删除】命令 图图2.14 2.14 提示对话框提示对话框 2.3.3 2.3.3 重命名文件或文件夹重命名

14、文件或文件夹 在制作网页为了便于管理有时需要对创建的文件夹或文件进行重命在制作网页为了便于管理有时需要对创建的文件夹或文件进行重命名，首先选择需要重命名的文件或文件夹，单击鼠标右键，在弹出的快名，首先选择需要重命名的文件或文件夹，单击鼠标右键，在弹出的快捷菜单中选择捷菜单中选择【编辑【编辑】|【重命名【重命名】命令，如图】命令，如图2.152.15所示。此时选择的所示。此时选择的文件夹或文件名称处于可编辑状态，输入所需要的名称即可如图文件夹或文件名称处于可编辑状态，输入所需要的名称即可如图2.162.16所示。所示。用户还可以使用用户还可以使用F2F2键对所需要的文件夹或文件重命名。键对所需要

15、的文件夹或文件重命名。提提 示：示：无论是重命名还是移动文件，都应该在无论是重命名还是移动文件，都应该在【文件【文件】面板中进行。因为】面板中进行。因为【文件【文件】面板有动态更新链接的功能，确保站点内部不会出现链接错误。】面板有动态更新链接的功能，确保站点内部不会出现链接错误。图图2.15 2.15 重命名文件夹重命名文件夹 图图2.16 2.16 可编辑状态可编辑状态 2.4 2.4 网页文档的基本操作网页文档的基本操作 制作网页的前提是首先必须新建一个网页文档，下面主要介绍网页文档的制作网页的前提是首先必须新建一个网页文档，下面主要介绍网页文档的基本操作。基本操作。2.4.1 2.4.1

16、 创建空白网页创建空白网页创建空白网页的操作步骤如下。创建空白网页的操作步骤如下。(1)(1)启动软件后，在菜单栏选择启动软件后，在菜单栏选择【文件【文件】|【新建【新建】命令，如图】命令，如图2.172.17所示所示(2)(2)随即弹出随即弹出【新建文档【新建文档】对话框，选择】对话框，选择【空白页【空白页】|【HTMLHTML】|【无【无】，然后单】，然后单击击【创建【创建】按钮，这样就可以创建一个空白网页，如图】按钮，这样就可以创建一个空白网页，如图2.182.18所示。所示。图图2.17 2.17 选择【新建】命令选择【新建】命令 图图2.18 2.18 【新建文档】对话框【新建文档】

17、对话框 提提 示：示：在在Dreamweaver CCDreamweaver CC欢迎界面中，单击欢迎界面中，单击【新建【新建】栏下】栏下【HTMLHTML】选项可以直】选项可以直接创建空白网页。接创建空白网页。2.4.2 2.4.2 打开网页文档打开网页文档 打开文档可以通过选择菜单栏中的命令进行打开，选择菜单栏中的打开文档可以通过选择菜单栏中的命令进行打开，选择菜单栏中的【文件【文件】|【打开【打开】命令，在弹出的】命令，在弹出的【打开【打开】对话框中选择需要打开文档的路径，选中】对话框中选择需要打开文档的路径，选中文件，然后单击文件，然后单击【打开【打开】按钮，如图】按钮，如图2.192

18、.19所示。所示。如果被打开的文档是在站点中的文件，打开时可以在如果被打开的文档是在站点中的文件，打开时可以在【文件【文件】面板中双击】面板中双击文件将其打开，或是选中需要打开的文档，单击鼠标右键，在弹出的下拉菜单文件将其打开，或是选中需要打开的文档，单击鼠标右键，在弹出的下拉菜单中选择中选择【打开【打开】命令，如图】命令，如图2.202.20所示。所示。图图2.19 2.19 选择【打开】命令选择【打开】命令 图图2.20 2.20 选择【打开】命令选择【打开】命令 2.5 2.5 设置网页文本设置网页文本 网页文本在网页中起了很重要的作用，很多信息都是有文本形式传给网页文本在网页中起了很重

19、要的作用，很多信息都是有文本形式传给读者的。读者的。2.5.1 2.5.1 为网页输入文本为网页输入文本 在网页中输入文本的方式有两种：在网页中输入文本的方式有两种：直接在文档中输入，即选择需要插入文本内容的位置，直接输入文本直接在文档中输入，即选择需要插入文本内容的位置，直接输入文本内容。内容。复制现有文本到网页，即通过复制别处相关的文本内容，切换到复制现有文本到网页，即通过复制别处相关的文本内容，切换到DreamweaverDreamweaver文档中，在需要插入文本内容的位置选择菜单栏中文档中，在需要插入文本内容的位置选择菜单栏中【编辑【编辑】|【粘贴【粘贴】命令，或是单击鼠标右键，在弹

20、出的下拉菜单中选择】命令，或是单击鼠标右键，在弹出的下拉菜单中选择【粘贴【粘贴】命】命令，也可使用令，也可使用Ctrl+VCtrl+V组合键插入复制的文本内容。组合键插入复制的文本内容。2.5.2 2.5.2 设置文本的属性设置文本的属性下面通过一个例子来介绍如何设置文本的属性。下面通过一个例子来介绍如何设置文本的属性。(1)(1)启动软件后，按启动软件后，按Ctrl+OCtrl+O组合键，弹出组合键，弹出【打开【打开】对话框，选择随书附带光盘】对话框，选择随书附带光盘中的中的CDROMCDROM素材素材Cha02Cha02古诗古诗.html.html素材文件，单击素材文件，单击【打开【打开】

21、按钮，如图】按钮，如图2.212.21所示。所示。(2)(2)打开素材文件之后，选择打开素材文件之后，选择“春晓春晓”字体，在字体，在【属性【属性】面板中将字体设为】面板中将字体设为【方正大黑简体【方正大黑简体】，将】，将【大小【大小】设为】设为36px36px，将，将【颜色【颜色】设为】设为#666#666，并单击，并单击【居中对齐【居中对齐】按钮，如图】按钮，如图2.222.22所示。所示。(3)(3)然后选择然后选择“作者作者 唐唐 孟浩然孟浩然”文字，在属性面板中将文字，在属性面板中将【字体【字体】设为】设为【方正【方正宋黑简体宋黑简体】，将】，将【大小【大小】设为】设为24px24p

22、x，将字体颜色设为，将字体颜色设为【#666#666】，并单击】，并单击【右【右对齐对齐】按钮，如图】按钮，如图2.232.23所示。所示。图图2.21 2.21 选择素材文件选择素材文件 图图2.22 2.22 设置字体的属性设置字体的属性 图图2.23 2.23 设置字体的属性设置字体的属性 2.5.2 2.5.2 设置文本的属性设置文本的属性(4)(4)选择第一句诗句，在选择第一句诗句，在【属性【属性】面板中将】面板中将【字体【字体】设为】设为【方正宋黑简体【方正宋黑简体】，】，将将【字体大小【字体大小】设为】设为24px24px，将，将【字体颜色【字体颜色】设为】设为【#666#666

23、】，并单击】，并单击【居中对【居中对齐齐】按钮，如图】按钮，如图2.242.24所示。所示。(5)(5)使用同样的方法，设置最后一句诗句，完成后的效果如图使用同样的方法，设置最后一句诗句，完成后的效果如图2.252.25所示。所示。(6)(6)在在【属性【属性】面板中将】面板中将【背景颜色【背景颜色】设为】设为#FFCCCC#FFCCCC，预览后的效果如图，预览后的效果如图2.262.26所所示。示。图图2.24 2.24 设置字体的属性设置字体的属性 图图2.25 2.25 设置属性后的效果设置属性后的效果 图图2.26 2.26 预览后的效果预览后的效果 2.5.3 2.5.3 设置段落格

24、式设置段落格式 对于比较长的文字，需要对其的段落格式进行设置，以达到想要的效果。对于比较长的文字，需要对其的段落格式进行设置，以达到想要的效果。下面通过一个例子介绍如何设置段落格式。下面通过一个例子介绍如何设置段落格式。(1)(1)启动软件后按启动软件后按Ctrl+OCtrl+O组合键，随即弹出【打开】对话框，选择随书附带光盘中组合键，随即弹出【打开】对话框，选择随书附带光盘中的的CDROMCDROM素材素材Cha02Cha02段落段落.html.html素材文件，然后单击【打开】按钮，如图素材文件，然后单击【打开】按钮，如图2.272.27所示。所示。(2)(2)打开素材文件后，选择【用人之

25、道】文字，打开【属性】面板选择【打开素材文件后，选择【用人之道】文字，打开【属性】面板选择【HTMLHTML】选】选项，单击【格式】右侧的下三角按钮，在弹出的下拉列表中选择【标题项，单击【格式】右侧的下三角按钮，在弹出的下拉列表中选择【标题1 1】，】，然后单击【内缩区块】按钮，如图然后单击【内缩区块】按钮，如图2.282.28所示。所示。图图2.27 2.27 打开素材文件打开素材文件 图图2.28 2.28 设置段落属性设置段落属性 2.5.3 2.5.3 设置段落格式设置段落格式(3)(3)选择其它文本，在选择其它文本，在【HTMLHTML】属性组中，将】属性组中，将【格式【格式】设为】

26、设为【标题【标题4 4】，然后单击】，然后单击【内缩区块【内缩区块】按钮，如图】按钮，如图2.292.29所示。所示。(4)(4)设置完成后，进行预览，如图设置完成后，进行预览，如图2.302.30所示。所示。图图2.29 2.29 设置属性设置属性 图图2.30 2.30 完成后的效果完成后的效果 2.5.4 2.5.4 设置列表设置列表 在网页中，从总体上分有两种类型的列表，一种是无序列表，即项目列表；在网页中，从总体上分有两种类型的列表，一种是无序列表，即项目列表；另一种是有序列表，即编号列表。列表可以将具有相似特性或带有某种顺序的另一种是有序列表，即编号列表。列表可以将具有相似特性或带

27、有某种顺序的文本进行有规则的排列，列表常用在条款或列举等类型的文本中，使用列表方文本进行有规则的排列，列表常用在条款或列举等类型的文本中，使用列表方式进行罗列可以使文本内容更加直观。式进行罗列可以使文本内容更加直观。下面介绍如何设置列表。下面介绍如何设置列表。(1)(1)启动软件后按启动软件后按Ctrl+OCtrl+O组合键，随即弹出组合键，随即弹出【打开【打开】对话框，选择随书附带光盘中】对话框，选择随书附带光盘中的的CDROMCDROM素材素材Cha02Cha02段落列表段落列表.html.html素材文件，然后单击素材文件，然后单击【打开【打开】按钮，如图】按钮，如图2.312.31所示

28、。所示。(2)(2)将光标至于将光标至于【不谈恋爱【不谈恋爱】文字的后侧，打开】文字的后侧，打开【属性【属性】面板，选择】面板，选择【HTMLHTML】选型，】选型，然后单击然后单击【项目列表【项目列表】按钮，如图】按钮，如图2.322.32所示。所示。(3)(3)使用同样的方法为其它标题添加列表，进行预览完成后的效果如图使用同样的方法为其它标题添加列表，进行预览完成后的效果如图2.332.33所示。所示。图图2.32 2.32 打开素材文件打开素材文件 图图2.32 2.32 单击【项目列表】按钮单击【项目列表】按钮 图图2.33 2.33 完成后的效果完成后的效果 2.5.5 2.5.5

29、设置特殊字符设置特殊字符 在制作网页的过程中有时会用到许多特殊的字符，如在制作网页的过程中有时会用到许多特殊的字符，如【版权符号【版权符号】【注册商标符号【注册商标符号】等，此时】等，此时DreamweaverDreamweaver软件提供了去多特殊的字符，下面软件提供了去多特殊的字符，下面介绍如何插入特殊字符。介绍如何插入特殊字符。(1)(1)首先打开首先打开【插入【插入】面板，选择】面板，选择【常用【常用】|【字符【字符】命令，如图】命令，如图2.342.34所示。所示。(2)(2)在弹出的下拉列表中选择需要的字符，如果列表中没有想要的字符，还可在弹出的下拉列表中选择需要的字符，如果列表中

30、没有想要的字符，还可以单击以单击【其它字符【其它字符】按钮，如图】按钮，如图2.352.35所示。所示。(3)(3)随即弹出随即弹出【插入其他字符【插入其他字符】对话框，选择需要的字符，然后单击】对话框，选择需要的字符，然后单击【确定【确定】按钮，如图按钮，如图2.362.36所示。所示。图图2.34 2.34 【插入】面板【插入】面板 图图2.35 2.35 选择【其它字符】命令选择【其它字符】命令 图图2.36 2.36 【插入其他字符】对话框【插入其他字符】对话框 2.6 2.6 为网页添加图像为网页添加图像 一个网页不只是单纯有文字组成，其中还包括一些漂亮的插图、图标一个网页不只是单纯

31、有文字组成，其中还包括一些漂亮的插图、图标等，使网页的内容更加丰富多彩，网页中图像的格式通常有等，使网页的内容更加丰富多彩，网页中图像的格式通常有3 3种，即种，即GIFGIF、JPEGJPEG和和PNGPNG。目前大多数浏览器都支持。目前大多数浏览器都支持GIFGIF和和JPEGJPEG格式。格式。2.6.1 2.6.1 插入图像插入图像下面来介绍如何在网页中插入图像。下面来介绍如何在网页中插入图像。(1)(1)启动软件后，按启动软件后，按Ctrl+OCtrl+O组合键，选择随书附带光盘中的组合键，选择随书附带光盘中的CDROMCDROM素材素材Cha02 Cha02 插图插图.html.h

32、tml素材文件，然后单击素材文件，然后单击【打开【打开】按钮，如图】按钮，如图2.372.37所示。所示。(2)(2)打开素材文件之后，将光标置于需要插入图片的位置，然后在菜单栏选打开素材文件之后，将光标置于需要插入图片的位置，然后在菜单栏选择择【插入【插入】|【图像【图像】|【图像【图像】02.jpg02.jpg素材文件，然后单击素材文件，然后单击【确定【确定】按钮，】按钮，如图如图2.382.38所示。所示。(3)(3)使用同样的方法，在其它的单元格中插入图片，并进行预览，如图使用同样的方法，在其它的单元格中插入图片，并进行预览，如图2.392.39所示。所示。图图2.37 2.37 插入

33、图像插入图像 图图2.38 2.38 选择图片选择图片 图图2.39 2.39 完成后的效果完成后的效果 2.6.2 2.6.2 鼠标经过图像鼠标经过图像下面介绍鼠标经过图像的制作方法。下面介绍鼠标经过图像的制作方法。(1)(1)启动软件后，按启动软件后，按Ctrl+OCtrl+O组合键，选择随书附带光盘中的组合键，选择随书附带光盘中的CDROMCDROM素材素材Cha02 Cha02 插图插图1.html1.html素材文件，然后单击素材文件，然后单击【打开【打开】按钮，如图】按钮，如图2.402.40所示。所示。(2)(2)打开素材文件后，将光标置于第一个表格内，在菜单栏选择打开素材文件后

34、，将光标置于第一个表格内，在菜单栏选择【插入【插入】|【图【图象象】|【鼠标经过图像【鼠标经过图像】命令，如图】命令，如图2.412.41所示所示图图2.40 2.40 打开素材文件打开素材文件 图图2.41 2.41 选择【鼠标经过图像】命令选择【鼠标经过图像】命令 2.6.2 2.6.2 鼠标经过图像鼠标经过图像(3)(3)随即弹出【插入鼠标经过图像】对话框，在该对话框中可以设置【原始图随即弹出【插入鼠标经过图像】对话框，在该对话框中可以设置【原始图像】和【鼠标经过时的图像】，单击【原始图像】右侧的浏览按钮，选择随像】和【鼠标经过时的图像】，单击【原始图像】右侧的浏览按钮，选择随书附带光盘

35、中书附带光盘中CDROMCDROM素材素材Cha02 Image01.jpgCha02 Image01.jpg素材文件，然后单击【鼠标素材文件，然后单击【鼠标经过图像】右侧的浏览按钮，选择随书附带光盘中经过图像】右侧的浏览按钮，选择随书附带光盘中CDROMCDROM素材素材Cha02 Cha02 Image05.jpgImage05.jpg素材文件，然后单击【确定】按钮，如图素材文件，然后单击【确定】按钮，如图2.422.42所示。所示。(4)(4)设置完成后，按设置完成后，按F12F12键进行预览，完成后的效果如图键进行预览，完成后的效果如图2.432.43所示。所示。图图2.42 2.42

36、 选择图片选择图片 图图2.43 2.43 完成后的效果完成后的效果 2.6.3 2.6.3 添加背景图像添加背景图像下面介绍如何为网页添加背景图像，其操作方法如下。下面介绍如何为网页添加背景图像，其操作方法如下。(1)(1)启动软件后，按启动软件后，按Ctrl+OCtrl+O组合键，选择随书附带光盘中的组合键，选择随书附带光盘中的CDROMCDROM素材素材Cha02 Cha02 插图插图3.html3.html素材文件，然后单击素材文件，然后单击【打开【打开】按钮，如图】按钮，如图2.442.44所示。所示。(2)(2)打开素材文件后，打开打开素材文件后，打开【属性【属性】面板，单击】面板

37、，单击【页面属性【页面属性】按钮，如图】按钮，如图2.452.45所所示。示。(3)(3)随即弹出随即弹出【页面属性【页面属性】对话框，选择】对话框，选择【分类【分类】组中的】组中的【外观（【外观（CSSCSS）】，然后】，然后单击单击【背景图像【背景图像】右侧的】右侧的【浏览【浏览】按钮，随即弹出】按钮，随即弹出【选择图像源文件【选择图像源文件】对话框，】对话框，选择随书附带光盘中选择随书附带光盘中CDROMCDROM素材素材Cha02 Image06.jpgCha02 Image06.jpg素材文件，然后单击素材文件，然后单击【确定【确定】按钮，返回到】按钮，返回到【页面属性【页面属性】对

38、话框，单击】对话框，单击【确定【确定】按钮，如图】按钮，如图2.462.46所所示。示。(4)(4)按按F12F12键预览效果，完成后的效果如图键预览效果，完成后的效果如图2.472.47所示。所示。图图2.44 2.44 选择素材文件选择素材文件 图图2.45 2.45 单击【页面属性】按钮单击【页面属性】按钮 图图2.46 2.46 【页面属性】对话框【页面属性】对话框 2.47 2.47 完成后的效果完成后的效果2.7 2.7 设置超级链接设置超级链接 超级链接是网页中最重要、最基本的元素之一。每个网站实际上都超级链接是网页中最重要、最基本的元素之一。每个网站实际上都是由很多网页组成的，

39、这些网页都是通过超级链接的形式关联在一起的。是由很多网页组成的，这些网页都是通过超级链接的形式关联在一起的。超级链接的作用是在因特网上建立一个位置到另一个位置的链接。超级超级链接的作用是在因特网上建立一个位置到另一个位置的链接。超级链接由源地址文件和目标地址文件构成，当访问者单击超级链接时，浏链接由源地址文件和目标地址文件构成，当访问者单击超级链接时，浏览器会自动从相应的目的网址检索网页并显示在浏览器中。如果目标地览器会自动从相应的目的网址检索网页并显示在浏览器中。如果目标地址不是在网页而是其他类型的文件，浏览器会自动调用本机上的相关程址不是在网页而是其他类型的文件，浏览器会自动调用本机上的相

40、关程序打开所要访问的文件。序打开所要访问的文件。在网页中的链接按照链接路径的不同可分为在网页中的链接按照链接路径的不同可分为3 3种形式：绝对路径、相种形式：绝对路径、相对路径和根目录路径。对路径和根目录路径。这些路径都是网页中的统一资源定位，只不过后两种路径将这些路径都是网页中的统一资源定位，只不过后两种路径将URLURL的通的通信协议和主机名省略了，后两种路径必须有参照物，一种以文档为参照信协议和主机名省略了，后两种路径必须有参照物，一种以文档为参照物，另一种是以站点的根目录为参照物，而第一种就不需要有参照物，物，另一种是以站点的根目录为参照物，而第一种就不需要有参照物，它是最完整的路径，

41、也是标准的它是最完整的路径，也是标准的URLURL。2.7.1 2.7.1 文本和图像链接文本和图像链接下面介绍文本和图像的链接下面介绍文本和图像的链接(1)启动软件后，按启动软件后，按Ctrl+O组合键，选择随书附带光盘中的组合键，选择随书附带光盘中的CDROM素材素材Cha02 插图插图3.html素材文件，然后单击素材文件，然后单击【打开【打开】按钮，如图】按钮，如图2.48所示所示(2)选择文字选择文字【作品【作品01】，在】，在【属性【属性】面板中】面板中【链接【链接】文本框中输入连接的地址】文本框中输入连接的地址或名称，也可直接单击或名称，也可直接单击【链接【链接】文本框后面的】文

42、本框后面的【浏览文件【浏览文件】按钮按钮，如图，如图2.49所示。所示。图图2.48 2.48 【打开】对话框【打开】对话框 图图2.49 2.49 选择文本选择文本 2.7.1 2.7.1 文本和图像链接文本和图像链接(3)在在【选择文件【选择文件】对话框中选择】对话框中选择【链接【链接.html】文件，然后单击】文件，然后单击【确定【确定】按钮，】按钮，如图如图2.50所示。所示。(4)在在【属性【属性】面板中将】面板中将【目标【目标】设置为】设置为【_blank】，如图】，如图2.51所示。所示。(5)保存网页文档，按保存网页文档，按F12键在浏览器中浏览效果，如图键在浏览器中浏览效果，

43、如图2.52所示。所示。图图2.50 2.50 【选择文件】对话框【选择文件】对话框 图图2.51 2.51 选择选择【_blank_blank】图图2.52 2.52 浏览效果浏览效果2.7.2 E-2.7.2 E-mailmail链接链接创建电子邮件链接的具体操作步骤如下：创建电子邮件链接的具体操作步骤如下：(1)(1)启动启动Dreamweaver CS5Dreamweaver CS5软件，打开随书附带光盘中的软件，打开随书附带光盘中的CDROMCha02E-maillCDROMCha02E-maill链接链接.html.html文件，如图文件，如图2.532.53所示。所示。(2)(2

44、)选择要创建电子邮件链接的文本，在选择要创建电子邮件链接的文本，在【插入【插入】面板中选择】面板中选择【常用【常用】面板，】面板，单击单击【电子邮件链接【电子邮件链接】按钮按钮 ，打开，打开【电子邮件链接【电子邮件链接】对话框，在】对话框，在【文本【文本】文本框中输入文本框中输入【】，在】，在【E-MailE-Mail】文本框中输入】文本框中输入【mailto:mailto:】，如图】，如图2.542.54所示。所示。图图2.53 2.53 【打开】文本框【打开】文本框 图图2.54 2.54 【电子邮件链接】对话框【电子邮件链接】对话框 2.7.2 E-2.7.2 E-mailmail链接链

45、接(3)(3)单击单击【确定【确定】按钮即可插入电子邮件链接，如图】按钮即可插入电子邮件链接，如图2.552.55所示。所示。(4)(4)保存网页文档，按保存网页文档，按F12F12键在浏览器中浏览效果。当单击电子邮件链接时，即可键在浏览器中浏览效果。当单击电子邮件链接时，即可打开电脑中的邮件客户端软件编写邮件，如图打开电脑中的邮件客户端软件编写邮件，如图2.562.56所示。所示。图图2.55 2.55 插入电子邮件链接后的效果插入电子邮件链接后的效果 图图2.56 2.56 在浏览器中浏览效果在浏览器中浏览效果 2.7.3 2.7.3 锚记链接锚记链接创建锚记链接的具体操作步骤如下：创建锚

46、记链接的具体操作步骤如下：(1)(1)启动启动Dreamweaver CCDreamweaver CC软件，打开随书附带光盘中的软件，打开随书附带光盘中的CDROMCha02CDROMCha02锚记链锚记链接接.html.html文件，如图文件，如图2.572.57所示。所示。(2)(2)将光标放置在第一行文字的前面，在将光标放置在第一行文字的前面，在【属性【属性】面板中，将】面板中，将IDID设置为设置为1 1，如图，如图2.582.58所示。所示。图图2.57 2.57 打开素材文件打开素材文件 图图2.58 2.58 设置设置ID ID 2.7.3 2.7.3 锚记链接锚记链接(3)(3

47、)在文档底部选择文字在文档底部选择文字【返回顶部【返回顶部】，在】，在【属性【属性】面板中】面板中【链接【链接】文本框中输入】文本框中输入文本文本#1#1，按，按EnterEnter键确认，如图键确认，如图2.592.59所示。所示。(4)(4)将文档保存，按将文档保存，按F12F12键在浏览器中预览效果。键在浏览器中预览效果。图图2.59 2.59 设置链接设置链接 图图2.60 2.60 预览效果预览效果 2.7.4 2.7.4 空链接空链接 用于向页面上的对象或文本附加行为时，通常使用设置空链接的方法来实用于向页面上的对象或文本附加行为时，通常使用设置空链接的方法来实现。空连接是未指派的

48、链接。空链接的创建方法如下所示：现。空连接是未指派的链接。空链接的创建方法如下所示：(1)(1)启动启动Dreamweaver CCDreamweaver CC软件，打开随书附带光盘中的软件，打开随书附带光盘中的CDROMCha02CDROMCha02空链接空链接.html.html文件，单击【打开】按钮将其打开，如图文件，单击【打开】按钮将其打开，如图2.612.61所示。所示。(2)(2)选择第一行文字【欧洲绘画】，在【属性】面板中【链接】文本框中输入文本选择第一行文字【欧洲绘画】，在【属性】面板中【链接】文本框中输入文本【#】，如图】，如图2.622.62所示。所示。(3)(3)保存网页

49、文档，按保存网页文档，按F12F12键在浏览器中预览效果，如图键在浏览器中预览效果，如图2.632.63所示。所示。图图2.61 2.61 打开素材文件打开素材文件 图图2.62 2.62 设置空链接设置空链接 图图2.63 2.63 在浏览器中预览效果在浏览器中预览效果 2.7.5 2.7.5 下载链接下载链接 如果超级链接指向的不是一个网页文件，而是其他文件，例如如果超级链接指向的不是一个网页文件，而是其他文件，例如RAR、MP3、EXE文件等，单击链接时就会下载文件，这就是下载链接。它通常在文件等，单击链接时就会下载文件，这就是下载链接。它通常在网站中提供资料下载。设置下载链接的具体操作

50、步骤如下：网站中提供资料下载。设置下载链接的具体操作步骤如下：(1)启动启动Dreamweaver CC软件，打开随书附带光盘中的软件，打开随书附带光盘中的CDROMCha02下载链下载链接接.html文件，如图文件，如图2.64所示。所示。(2)选择文字【作品选择文字【作品01】，在【属性】面板中，单击【链接】文本框右侧的【浏】，在【属性】面板中，单击【链接】文本框右侧的【浏览文件】览文件】按钮，打开【选择文件】对话框，选择【下载链接按钮，打开【选择文件】对话框，选择【下载链接.rar】，设置】，设置如图如图2.65所示，然后单击【确定】按钮。所示，然后单击【确定】按钮。(3)单击【确定】按