Cha02 Dreamweaver CC的基本操作

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

Dreamweaver CC的基本 操作

图2.9 【站点设置对象】按钮
图2.10 【选择跟文件】对话框
2.3
管理站点内容
站点建立完成后，就需要对所建立的站点进行管理，下面介绍如何 对站点进行管理。
2.3.1
添加文件或文件夹
在文件面板中创建文件或文件夹的具体操作步骤如下： (1) 选择【窗口】|【文件】命令，打开【文件】面板，在【文件】面板中的空 白位置单击鼠标右键，在弹出的下拉菜单中选择【新建文件夹】或【新建 文件】命令，如图2.11所示。 (2) 继续单击鼠标右键，在弹出的菜单中选择【新建文件】命令，创建一个文件， 在 【文件】面板中效果如图2.12所示。
下面来介绍如何在网页中插入图像。 (1) 启动软件后，按Ctrl+O组合键，选择随书附带光盘中的CDROM\素材 \Cha02 \插图.html素材文件，然后单击【打开】按钮，如图2.37所示。 (2) 打开素材文件之后，将光标置于需要插入图片的位置，然后在菜单栏选 择【插入】|【图像】|【图像】02.jpg素材文件，然后单击【确定】按钮， 如图2.38所示。 (3) 使用同样的方法，在其它的单元格中插入图片，并进行预览，如图2.39 所示。
2.5.2
设置文本的属性
下面通过一个例子来介绍如何设置文本的属性。 (1) 启动软件后，按Ctrl+O组合键，弹出【打开】对话框，选择随书附带光盘 中的CDROM\素材\Cha02\古诗.html素材文件，单击【打开】按钮，如图2.21 所示。 (2) 打开素材文件之后，选择“春晓”字体，在【属性】面板中将字体设为 【方正大黑简体】，将【大小】设为36px，将【颜色】设为#666，并单击 【居中对齐】按钮，如图2.22所示。 (3) 然后选择“作者 唐 孟浩然”文字，在属性面板中将【字体】设为【方正 宋黑简体】，将【大小】设为24px，将字体颜色设为【#666】，并单击【右 对齐】按钮，如图2.23所示。
图2.21 选择素材文件
图2.22 设置字体的属性
图2.23 设置字体的属性
2.5.2
设置文本的属性
(4) 选择第一句诗句，在【属性】面板中将【字体】设为【方正宋黑简体】， 将【字体大小】设为24px，将【字体颜色】设为【#666】，并单击【居中对 齐】按钮，如图2.24所示。 (5) 使用同样的方法，设置最后一句诗句，完成后的效果如图2.25所示。 (6) 在【属性】面板中将【背景颜色】设为#FFCCCC，预览后的效果如图2.26所 示。
图2.4 属性面板
图2.5 浮动面板
2.1
Dreamweaver CC的工作界面
5. 插入面板 插入面板包含用于创建和插入对象的按钮。当鼠标移到一个按钮上时，会 出现一个工具提示，其中含有该按钮的名称。这些按钮被组织到几个类别中， 可以在插入面板的上方切换它们。当前文档包含服务器代码时，还会显示其他 类别。当启动Dreamweaver时，系统会打开上次使用的类别，【常用】插入面板 如图2.6所示。 6.【文件】面板 在次面板中可以管理组成站点的文件和文件夹，类似于Windows中的资源管 理器功能。 除以上介绍的面板外，Dreamweaver CS5还提供了许多面板、检查器窗口， 如【历史记录】面板和代码检查器。可以使用菜单中的【窗口】命令将隐藏的 面板打开。
提 示：
选择需要删除的文件夹或文件，按Delete键也可以将其删除。
图2.13 选择【删除】命令
图2.14 提示对话框
2.3.3
重命名文件或文件夹
在制作网页为了便于管理有时需要对创建的文件夹或文件进行重命 名，首先选择需要重命名的文件或文件夹，单击鼠标右键，在弹出的 快捷菜单中选择【编辑】|【重命名】命令，如图2.15所示。此时选择 的文件夹或文件名称处于可编辑状态，输入所需要的名称即可如图 2.16所示。 用户还可以使用F2键对所需要的文件夹或文件重命名。
图2.27 打开素材文件
图2.28 设置段落属性
2.5.3
设置段落格式
(3) 选择其它文本，在【HTML】属性组中，将【格式】设为【标题4】，然后单击 【内缩区块】按钮，如图2.29所示。 (4) 设置完成后，进行预览，如图2.30所示。
图2.29 设置属性
图2.30 完成后的效果
2.5.4
设置列表
图2.1 DreamweaverCC工作界面
图2.2 菜单栏
2.1
Dreamweaver CC的工作界面
2．文档窗口 文档窗口显示当前创建和编辑的网页文档。用户可以在设计视图、代码 视图、拆分视图中查看文档，如图2.3所示。 3. 【属性】面板 【属性】面板用于查看和编辑所选对象的各种属性。【属性】面板可以 检查和编辑当前选定页面元素的最常用属性。【属性】面板中的内容根据选 定元素的不同会有所不同，图2.4所示的是图片的【属性】面板。 4. 浮动面板 【属性】面板以外的其他面板可以统称为浮动面板，各浮动面板主要由 面板的特征命名，这些面板都浮动于编辑窗口之外。我们可以通过菜单栏中 的【窗口】命令来打开相应的面板，如图2.5所示。
创建空白网页的操作步骤如下。 (1) 启动软件后，在菜单栏选择【文件】|【新建】命令，如图2.17所示 (2) 随即弹出【新建文档】对话框，选择【空白页】|【HTML】|【无】，然后单 击【创建】按钮，这样就可以创建一个空白网页，如图2.18所示。
图2.17 选择【新建】命令
图2.18 【新建文档】对话框

2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8
Dreamweaver CC的工作界面 创建站点 管理站点内容 网页文档的基本操作 设置网页文本 为网页添加图像 设置超级链接 思考与练习
2.1
Dreamweaver CC的工作界面
Dreamweaver 是现在最流行的网页制作工具，使用 Dreamweaver CC 可以 轻而易举的制作出跨越平台限制和跨越浏览器限制的充满动感的网页，图 2.1为Dreamweaver CC工作界面。 1. 菜单栏 菜单栏显示的菜单包括文件、编辑、查看、插入、修改、格式、命令、 站点、窗口、帮助10个菜单项，如所示。
图2.7 选择【管理站点】命令
图2.8 单击【新建】按钮
2.2
创建站点
(3) 随即弹出【站点设置对象】对话框，在【站点名称】文本框中输入所需要的 名称，然后单击【本地站点文件夹】右侧的文件夹按钮，如图2.9所示。 (4) 随即弹出【选择跟文件夹】对话框，选择正确的路径及文件夹，然后单击 【选择文件夹】按钮，返回到【站点设置对象】对话框中单击【保存】按 钮，然后单击【完成】按钮即可如图2.10所示
图2.24 设置字体的属性
图2.25 设置属性后的效果
图2.26 预览后的效果
2.5.3
设置段落格式
对于比较长的文字，需要对其的段落格式进行设置，以达到想要的效果。 下面通过一个例子介绍如何设置段落格式。 (1) 启动软件后按 Ctrl+O 组合键，随即弹出【打开】对话框，选择随书附带光盘中 的CDROM\素材\Cha02\段落.html素材文件，然后单击【打开】按钮，如图2.27 所示。 (2) 打开素材文件后，选择【用人之道】文字，打开【属性】面板选择【HTML】选 项，单击【格式】右侧的下三角按钮，在弹出的下拉列表中选择【标题 1】， 然后单击【内缩区块】按钮，如图2.28所示。
图2.11 新建文件夹或文件
图2.12 新建文件夹
2.3.2
删除文件或文件夹
在制作网页的过程中有时候需要将多余的文件夹或文件删除，下面介绍如何删除 文件或文件夹。 (1) 打开【文件】面板，选择需要删除的文件夹或文件，单击鼠标右键，在弹出 的快捷菜单中选择【编辑】|【删除】命令，如图2.13所示。 (2) 随即弹出【提示】对话框，单击【是】按钮，这样就可以文件夹或文件删除， 如图2.14所示。
在网页中，从总体上分有两种类型的列表，一种是无序列表，即项目列表； 另一种是有序列表，即编号列表。列表可以将具有相似特性或带有某种顺序的 文本进行有规则的排列，列表常用在条款或列举等类型的文本中，使用列表方 式进行罗列可以使文本内容更加直观。 下面介绍如何设置列表。 (1) 启动软件后按 Ctrl+O 组合键，随即弹出【打开】对话框，选择随书附带光盘中 的CDROM\素材\Cha02\段落列表.html素材文件，然后单击【打开】按钮，如图 2.31所示。 (2) 将光标至于【不谈恋爱】文字的后侧，打开【属性】面板，选择【HTML】选型， 然后单击【项目列表】按钮，如图2.32所示。 (3) 使用同样的方法为其它标题添加列表，进行预览完成后的效果如图2.33所示。
图2.15 重命名文件夹
图2.16 可编辑状态
提 示：
无论是重命名还是移动文件，都应该在【文件】面板中进行。因为 【文件】面板有动态更新链接的功能，确保站点内部不会出现链接错 误。
2.4
网页文档的基本操作
2.4.1 创建空白网页
制作网页的前提是首先必须新建一个网页文档，下面主要介绍网页文档 的基本操作。
图2.6 【插入】面板
2.2
创建站点
站点是一组具有共享属性（如相关主题、类似的设计或共同目的）的 链接文档和资源。Dreamweaver是创建和管理站点的工具，使用它不仅可以 创建单独的文档，还可以创建完整的Web站点。 创建本地站点的步骤如下： (1) 在菜单栏选择【站点】|【管理站点】命令，随即弹出【管理站点】对话 框，如图2.7所示。 (2) 在弹出【管理站点】对话框中，单击【新建】按钮，如图2.8所示。