Cha02DreamweaverCC的基本操作详解课件

1、第2章 Dreamweaver CC的基本操作（时间：2次课，4学时） 本章主要介绍Dreamweaver CC的一些基本操作，只有掌握基本操作在以后制作网页时才可以得心应手。第2章 Dreamweaver CC的基本操作第2章 Dreamweaver CC的基本操作2.1 Dreamweaver CC的工作界面2.2 创建站点2.3 管理站点内容2.4 网页文档的基本操作2.5 设置网页文本2.6 为网页添加图像2.7 设置超级链接2.8 思考与练习2.1 Dreamweaver CC的工作界面 Dreamweaver是现在最流行的网页制作工具，使用Dreamweaver CC可以轻而易举的

2、制作出跨越平台限制和跨越浏览器限制的充满动感的网页，图2.1为Dreamweaver CC工作界面。1. 菜单栏 菜单栏显示的菜单包括文件、编辑、查看、插入、修改、格式、命令、站点、窗口、帮助10个菜单项，如所示。图2.1 DreamweaverCC工作界面 图2.2 菜单栏2.1 Dreamweaver CC的工作界面2文档窗口 文档窗口显示当前创建和编辑的网页文档。用户可以在设计视图、代码视图、拆分视图中查看文档，如图2.3所示。3. 【属性】面板 【属性】面板用于查看和编辑所选对象的各种属性。【属性】面板可以检查和编辑当前选定页面元素的最常用属性。【属性】面板中的内容根据选定元素的不同会

3、有所不同，图2.4所示的是图片的【属性】面板。4. 浮动面板 【属性】面板以外的其他面板可以统称为浮动面板，各浮动面板主要由面板的特征命名，这些面板都浮动于编辑窗口之外。我们可以通过菜单栏中的【窗口】命令来打开相应的面板，如图2.5所示。图2.4 属性面板 图2.5 浮动面板 2.1 Dreamweaver CC的工作界面5. 插入面板 插入面板包含用于创建和插入对象的按钮。当鼠标移到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。这些按钮被组织到几个类别中，可以在插入面板的上方切换它们。当前文档包含服务器代码时，还会显示其他类别。当启动Dreamweaver时，系统会打开上次使用的类

4、别，【常用】插入面板如图2.6所示。6.【文件】面板 在次面板中可以管理组成站点的文件和文件夹，类似于Windows中的资源管理器功能。 除以上介绍的面板外，Dreamweaver CS5还提供了许多面板、检查器窗口，如【历史记录】面板和代码检查器。可以使用菜单中的【窗口】命令将隐藏的面板打开。图2.6 【插入】面板 2.2 创建站点(1) 在菜单栏选择【站点】|【管理站点】命令，随即弹出【管理站点】对话框，如图2.7所示。(2) 在弹出【管理站点】对话框中，单击【新建】按钮，如图2.8所示。图2.7 选择【管理站点】命令 图2.8 单击【新建】按钮 站点是一组具有共享属性（如相关主题、类似的

5、设计或共同目的）的链接文档和资源。Dreamweaver是创建和管理站点的工具，使用它不仅可以创建单独的文档，还可以创建完整的Web站点。 创建本地站点的步骤如下：2.2 创建站点(3) 随即弹出【站点设置对象】对话框，在【站点名称】文本框中输入所需要的名称，然后单击【本地站点文件夹】右侧的文件夹按钮，如图2.9所示。(4) 随即弹出【选择跟文件夹】对话框，选择正确的路径及文件夹，然后单击【选择文件夹】按钮，返回到【站点设置对象】对话框中单击【保存】按钮，然后单击【完成】按钮即可如图2.10所示图2.9 【站点设置对象】按钮 图2.10 【选择跟文件】对话框 2.3 管理站点内容 站点建立完成

6、后，就需要对所建立的站点进行管理，下面介绍如何对站点进行管理。2.3.1 添加文件或文件夹在文件面板中创建文件或文件夹的具体操作步骤如下：(1) 选择【窗口】|【文件】命令，打开【文件】面板，在【文件】面板中的空白位置单击鼠标右键，在弹出的下拉菜单中选择【新建文件夹】或【新建文件】命令，如图2.11所示。(2) 继续单击鼠标右键，在弹出的菜单中选择【新建文件】命令，创建一个文件，在 【文件】面板中效果如图2.12所示。图2.11 新建文件夹或文件 图2.12 新建文件夹 2.3.2 删除文件或文件夹在制作网页的过程中有时候需要将多余的文件夹或文件删除，下面介绍如何删除文件或文件夹。(1) 打开

7、【文件】面板，选择需要删除的文件夹或文件，单击鼠标右键，在弹出的快捷菜单中选择【编辑】|【删除】命令，如图2.13所示。(2) 随即弹出【提示】对话框，单击【是】按钮，这样就可以文件夹或文件删除，如图2.14所示。提 示： 选择需要删除的文件夹或文件，按Delete键也可以将其删除。图2.13 选择【删除】命令 图2.14 提示对话框 2.3.3 重命名文件或文件夹 在制作网页为了便于管理有时需要对创建的文件夹或文件进行重命名，首先选择需要重命名的文件或文件夹，单击鼠标右键，在弹出的快捷菜单中选择【编辑】|【重命名】命令，如图2.15所示。此时选择的文件夹或文件名称处于可编辑状态，输入所需要的

8、名称即可如图2.16所示。 用户还可以使用F2键对所需要的文件夹或文件重命名。提 示： 无论是重命名还是移动文件，都应该在【文件】面板中进行。因为【文件】面板有动态更新链接的功能，确保站点内部不会出现链接错误。图2.15 重命名文件夹 图2.16 可编辑状态 2.4 网页文档的基本操作 制作网页的前提是首先必须新建一个网页文档，下面主要介绍网页文档的基本操作。2.4.1 创建空白网页创建空白网页的操作步骤如下。(1) 启动软件后，在菜单栏选择【文件】|【新建】命令，如图2.17所示(2) 随即弹出【新建文档】对话框，选择【空白页】|【HTML】|【无】，然后单击【创建】按钮，这样就可以创建一个

9、空白网页，如图2.18所示。图2.17 选择【新建】命令 图2.18 【新建文档】对话框 提 示： 在Dreamweaver CC欢迎界面中，单击【新建】栏下【HTML】选项可以直接创建空白网页。2.4.2 打开网页文档 打开文档可以通过选择菜单栏中的命令进行打开，选择菜单栏中的【文件】|【打开】命令，在弹出的【打开】对话框中选择需要打开文档的路径，选中文件，然后单击【打开】按钮，如图2.19所示。 如果被打开的文档是在站点中的文件，打开时可以在【文件】面板中双击文件将其打开，或是选中需要打开的文档，单击鼠标右键，在弹出的下拉菜单中选择【打开】命令，如图2.20所示。图2.19 选择【打开】命

10、令 图2.20 选择【打开】命令 2.5 设置网页文本 网页文本在网页中起了很重要的作用，很多信息都是有文本形式传给读者的。2.5.1 为网页输入文本 在网页中输入文本的方式有两种： 直接在文档中输入，即选择需要插入文本内容的位置，直接输入文本内容。 复制现有文本到网页，即通过复制别处相关的文本内容，切换到Dreamweaver文档中，在需要插入文本内容的位置选择菜单栏中【编辑】|【粘贴】命令，或是单击鼠标右键，在弹出的下拉菜单中选择【粘贴】命令，也可使用Ctrl+V组合键插入复制的文本内容。2.5.2 设置文本的属性下面通过一个例子来介绍如何设置文本的属性。(1) 启动软件后，按Ctrl+O

11、组合键，弹出【打开】对话框，选择随书附带光盘中的CDROM素材Cha02古诗.html素材文件，单击【打开】按钮，如图2.21所示。(2) 打开素材文件之后，选择“春晓”字体，在【属性】面板中将字体设为【方正大黑简体】，将【大小】设为36px，将【颜色】设为#666，并单击【居中对齐】按钮，如图2.22所示。(3) 然后选择“作者 唐 孟浩然”文字，在属性面板中将【字体】设为【方正宋黑简体】，将【大小】设为24px，将字体颜色设为【#666】，并单击【右对齐】按钮，如图2.23所示。 图2.21 选择素材文件 图2.22 设置字体的属性 图2.23 设置字体的属性 2.5.2 设置文本的属性(

12、4) 选择第一句诗句，在【属性】面板中将【字体】设为【方正宋黑简体】，将【字体大小】设为24px，将【字体颜色】设为【#666】，并单击【居中对齐】按钮，如图2.24所示。(5) 使用同样的方法，设置最后一句诗句，完成后的效果如图2.25所示。(6) 在【属性】面板中将【背景颜色】设为#FFCCCC，预览后的效果如图2.26所示。图2.24 设置字体的属性 图2.25 设置属性后的效果 图2.26 预览后的效果 2.5.3 设置段落格式 对于比较长的文字，需要对其的段落格式进行设置，以达到想要的效果。下面通过一个例子介绍如何设置段落格式。(1) 启动软件后按Ctrl+O组合键，随即弹出【打开】

13、对话框，选择随书附带光盘中的CDROM素材Cha02段落.html素材文件，然后单击【打开】按钮，如图2.27所示。(2) 打开素材文件后，选择【用人之道】文字，打开【属性】面板选择【HTML】选项，单击【格式】右侧的下三角按钮，在弹出的下拉列表中选择【标题1】，然后单击【内缩区块】按钮，如图2.28所示。图2.27 打开素材文件 图2.28 设置段落属性 2.5.3 设置段落格式(3) 选择其它文本，在【HTML】属性组中，将【格式】设为【标题4】，然后单击【内缩区块】按钮，如图2.29所示。(4) 设置完成后，进行预览，如图2.30所示。图2.29 设置属性 图2.30 完成后的效果 2.

14、5.4 设置列表 在网页中，从总体上分有两种类型的列表，一种是无序列表，即项目列表；另一种是有序列表，即编号列表。列表可以将具有相似特性或带有某种顺序的文本进行有规则的排列，列表常用在条款或列举等类型的文本中，使用列表方式进行罗列可以使文本内容更加直观。下面介绍如何设置列表。(1) 启动软件后按Ctrl+O组合键，随即弹出【打开】对话框，选择随书附带光盘中的CDROM素材Cha02段落列表.html素材文件，然后单击【打开】按钮，如图2.31所示。(2) 将光标至于【不谈恋爱】文字的后侧，打开【属性】面板，选择【HTML】选型，然后单击【项目列表】按钮，如图2.32所示。(3) 使用同样的方法

15、为其它标题添加列表，进行预览完成后的效果如图2.33所示。图2.32 打开素材文件 图2.32 单击【项目列表】按钮 图2.33 完成后的效果 2.5.5 设置特殊字符 在制作网页的过程中有时会用到许多特殊的字符，如【版权符号】【注册商标符号】等，此时Dreamweaver软件提供了去多特殊的字符，下面介绍如何插入特殊字符。(1) 首先打开【插入】面板，选择【常用】|【字符】命令，如图2.34所示。(2) 在弹出的下拉列表中选择需要的字符，如果列表中没有想要的字符，还可以单击【其它字符】按钮，如图2.35所示。(3) 随即弹出【插入其他字符】对话框，选择需要的字符，然后单击【确定】按钮，如图2

16、.36所示。图2.34 【插入】面板 图2.35 选择【其它字符】命令 图2.36 【插入其他字符】对话框 2.6 为网页添加图像 一个网页不只是单纯有文字组成，其中还包括一些漂亮的插图、图标等，使网页的内容更加丰富多彩，网页中图像的格式通常有3种，即GIF、JPEG和PNG。目前大多数浏览器都支持GIF和JPEG格式。2.6.1 插入图像下面来介绍如何在网页中插入图像。(1) 启动软件后，按Ctrl+O组合键，选择随书附带光盘中的CDROM素材Cha02 插图.html素材文件，然后单击【打开】按钮，如图2.37所示。(2) 打开素材文件之后，将光标置于需要插入图片的位置，然后在菜单栏选择【

17、插入】|【图像】|【图像】02.jpg素材文件，然后单击【确定】按钮，如图2.38所示。(3) 使用同样的方法，在其它的单元格中插入图片，并进行预览，如图2.39所示。图2.37 插入图像 图2.38 选择图片 图2.39 完成后的效果 2.6.2 鼠标经过图像下面介绍鼠标经过图像的制作方法。(1) 启动软件后，按Ctrl+O组合键，选择随书附带光盘中的CDROM素材Cha02 插图1.html素材文件，然后单击【打开】按钮，如图2.40所示。(2) 打开素材文件后，将光标置于第一个表格内，在菜单栏选择【插入】|【图象】|【鼠标经过图像】命令，如图2.41所示图2.40 打开素材文件 图2.4

18、1 选择【鼠标经过图像】命令 2.6.2 鼠标经过图像(3) 随即弹出【插入鼠标经过图像】对话框，在该对话框中可以设置【原始图像】和【鼠标经过时的图像】，单击【原始图像】右侧的浏览按钮，选择随书附带光盘中CDROM素材Cha02 Image01.jpg素材文件，然后单击【鼠标经过图像】右侧的浏览按钮，选择随书附带光盘中CDROM素材Cha02 Image05.jpg素材文件，然后单击【确定】按钮，如图2.42所示。(4) 设置完成后，按F12键进行预览，完成后的效果如图2.43所示。图2.42 选择图片 图2.43 完成后的效果 2.6.3 添加背景图像下面介绍如何为网页添加背景图像，其操作方

19、法如下。(1) 启动软件后，按Ctrl+O组合键，选择随书附带光盘中的CDROM素材Cha02 插图3.html素材文件，然后单击【打开】按钮，如图2.44所示。(2) 打开素材文件后，打开【属性】面板，单击【页面属性】按钮，如图2.45所示。(3) 随即弹出【页面属性】对话框，选择【分类】组中的【外观（CSS）】，然后单击【背景图像】右侧的【浏览】按钮，随即弹出【选择图像源文件】对话框，选择随书附带光盘中CDROM素材Cha02 Image06.jpg素材文件，然后单击【确定】按钮，返回到【页面属性】对话框，单击【确定】按钮，如图2.46所示。(4) 按F12键预览效果，完成后的效果如图2.

20、47所示。图2.44 选择素材文件 图2.45 单击【页面属性】按钮 图2.46 【页面属性】对话框 2.47 完成后的效果2.7 设置超级链接 超级链接是网页中最重要、最基本的元素之一。每个网站实际上都是由很多网页组成的，这些网页都是通过超级链接的形式关联在一起的。超级链接的作用是在因特网上建立一个位置到另一个位置的链接。超级链接由源地址文件和目标地址文件构成，当访问者单击超级链接时，浏览器会自动从相应的目的网址检索网页并显示在浏览器中。如果目标地址不是在网页而是其他类型的文件，浏览器会自动调用本机上的相关程序打开所要访问的文件。 在网页中的链接按照链接路径的不同可分为3种形式：绝对路径、相

21、对路径和根目录路径。 这些路径都是网页中的统一资源定位，只不过后两种路径将URL的通信协议和主机名省略了，后两种路径必须有参照物，一种以文档为参照物，另一种是以站点的根目录为参照物，而第一种就不需要有参照物，它是最完整的路径，也是标准的URL。2.7.1 文本和图像链接下面介绍文本和图像的链接(1) 启动软件后，按Ctrl+O组合键，选择随书附带光盘中的CDROM素材Cha02 插图3.html素材文件，然后单击【打开】按钮，如图2.48所示(2) 选择文字【作品01】，在【属性】面板中【链接】文本框中输入连接的地址或名称，也可直接单击【链接】文本框后面的【浏览文件】 按钮 ，如图2.49所示

22、。图2.48 【打开】对话框 图2.49 选择文本 2.7.1 文本和图像链接(3) 在【选择文件】对话框中选择【链接.html】文件，然后单击【确定】按钮，如图2.50所示。(4) 在【属性】面板中将【目标】设置为【_blank】，如图2.51所示。(5) 保存网页文档，按F12键在浏览器中浏览效果，如图2.52所示。图2.50 【选择文件】对话框 图2.51 选择【_blank】 图2.52 浏览效果2.7.2 E-mail链接创建电子邮件链接的具体操作步骤如下：(1) 启动Dreamweaver CS5软件，打开随书附带光盘中的CDROMCha02E-maill链接.html文件，如图2

23、.53所示。(2) 选择要创建电子邮件链接的文本，在【插入】面板中选择【常用】面板，单击【电子邮件链接】 按钮 ，打开【电子邮件链接】对话框，在【文本】文本框中输入【】，在【E-Mail】文本框中输入【mailto: 】，如图2.54所示。图2.53 【打开】文本框 图2.54 【电子邮件链接】对话框 2.7.2 E-mail链接(3) 单击【确定】按钮即可插入电子邮件链接，如图2.55所示。(4) 保存网页文档，按F12键在浏览器中浏览效果。当单击电子邮件链接时，即可打开电脑中的邮件客户端软件编写邮件，如图2.56所示。图2.55 插入电子邮件链接后的效果 图2.56 在浏览器中浏览效果 2.7.3 锚记链接创建锚记链接的具体操作步骤如下：(1) 启动Dreamweaver CC软件，打开随书附带光盘中的CDROMCha02锚记链接.html文件，如图2.57所示。(2) 将光标放置在第一行文字的前面，在【属性】面板中，将ID设置为1，如图2.58所示。图2.57 打开素材文件 图2.58 设置ID 2.7.3 锚记链接(3) 在文档底部选