实验6.1 创建站点并掌握编辑网页的基本操作

一、实验目的

1.熟悉Dreamweaver 的工作环境

2.掌握使用Dreamweaver创建站点的基本步骤

3.掌握网页编辑的基本方法

二、实验要求

1.掌握使用Dreamweaver创建本地站点的基本步骤。

2.掌握使用Dreamweaver 编辑网页的基本方法，包括对网页标题、网页文档中的标题、无序列表、有序列表、超链接等设置。

三、实验内容和步骤

(1)．【任务】熟悉Dreamweaver CS6的工作环境

启动Dreamweaver CS6，可以看到如图1所示的Dreamweaver CS6的操作界面，它包括如下几个部分：标题栏、菜单栏、对象面板、标签选择栏、页面区域、属性检查器、面板组等。

图 SEQ 图 \* ARABIC 1 Dreamweaver CS6软件的界面

“文档”工具栏

包含按钮和弹出式菜单，它们提供各种“文档”窗口视图(如“设计”视图和“代码”视图)、各种查看选项和一些常用操作(如在浏览器中预览)。

“属性”面板

用于查看和更改所选对象或文本的各种属性。每种对象都具有不同的属性。

“插入”面板

包含用于将各种类型的“对象”(如图像、表格和水平线)插入到文档中的按钮。每个对象都是一段 HTML 代码，允许在插入它时设置不同的属性。例如，可以通过单击“插入”栏中的“表格”按钮插入一个表格。还可以不使用“插入”栏，而使用“插入”菜单插入对象。

通过拖动“插入”栏到Dreamweaver菜单的下部，并在出现一条蓝色的提示线时松手，可以把“插入”栏的形式变换为“插入”选项卡。

“文档”窗口

显示当前创建和编辑的文档。在Dreamweaver CS6中可以通过多种视图方式查看网页文件，这个特点和Word的多视图查看类似。Dreamweaver CS6有4种视图：代码、设计、拆分、实时视图。当关注文档的源代码或者需要编辑源代码时，可以使用代码视图。要实现类似Word的所见即所得功能，通过可视化的方式编辑网页，可以使用设计视图。如果要兼顾以上两点，可以选择拆分视图。在实时视图下，看到的页面与用浏览器查看的效果一样，这种视图是不能编辑文档的。

标签选择器

用于选择准确地选择网页上的元素。

CSS样式面板

CSS样式面板可以用来进行新建CSS规则、编辑CSS规则、删除CSS规则以及为网页附加外部样式表等操作。

“文件”面板

可以管理文件和文件夹，无论它们是 Dreamweaver 站点的一部分还是在远程服务器上。“文件”面板可以访问本地磁盘上的全部文件，非常类似于 Windows 资源管理器。

Dreamweaver还提供了其他面板窗口，例如“多屏预览”面板、“标签检查器”面板、“历史记录”面板灯。若要打开 Dreamweaver 各面板，请使用“窗口”菜单。

(2)．【任务】使用Dreamweaver建立站点

站点可以被看作一系列文档的组合，这些文档通过各种链接建立逻辑关联。为了方便管理网站文件，在使用Dreamweaver CS6设计网站文件之前，必须先要建立站点，以充分利用Dreamweaver CS6的功能。一旦建立了站点，网站的后期维护也会相对容易。当管理员修改某些站点文件时，Dreamweaver CS6会自动检索与被修改文件相关的文件，并提示管理员更新这些文件。

在C盘创建一个以自己的学号命名的文件夹。

选择“站点｜新建站点”命令，打开“站点设置对象未命名站点”对话框。

图 SEQ 图 \* ARABIC 2 站点设置对话框

或者选择“站点｜管理站点”命令，打开“管理站点”对话框，在对话框中单击“新建站点”按钮。

图 SEQ 图 \* ARABIC 3 管理站点对话框

在对话框中，通过“站点”标签设置站点名称和站点文件夹。站点名称设置为“我的网站”，“本地站点文件夹”通过点击 设置为C盘自己的学号对应文件夹。或者也可以直接输入。点击“保存”。

在Dreamweaver的“文件”面板中，可以看到一个空白的站点。

图 SEQ 图 \* ARABIC 4 “文件”面板中的空白站点

在站点上单击鼠标右键，会出现右键菜单，从中进行新建文件、新建文件夹、复制、粘贴等操作。通过“新建文件”，创建一个空白的站点主页文件“index.html”

图 SEQ 图 \* ARABIC 5 创建index.html

从站点的右键菜单选择“新建文件夹”，建立images、css、js文件夹，分别用来存放整个站点的图像文件、CSS样式表文件、JavaScript文件。

图 SEQ 图 \* ARABIC 6 创建站点通用文件夹

如果这时通过“资源管理器”观察C盘的站点文件夹，可以看到一致的文件和文件夹。

如果通过“资源管理器”来在站点文件夹下创建文件，那