Cha02DreamweaverCC的基本操作详解

Dreamweaver基础技巧全面接触很多朋友使用Dreamweaver一段时间后，开始热衷于寻找各式各样的插件，追求各种各样的特效，而对于Dreamweaver中的基本功能反而不去深入研究，其实在Dreamweaver中有很多有用的技巧，如果你多加运用，不仅能提高效率，而且可以实现很多实用的效果。

今天我把工作中常用的一些技巧介绍给大家，希望对大家能有些用途，同时也希望能唤起大家深入研究的愿望。

我准备根据工作中的不同阶段分别介绍各种技巧。

一、规划阶段——站点窗口的技巧Dreamweavr的站点窗口常常被很多朋友忽视，其实利用站点窗口我们可以方便的完成很多任务。

下面我介绍几个实用的技巧。

1、快速添加站点导航。

使用站点窗口中的网站地图可以快速制作网站雏形，并可以方便的在个页面之间加入导航链接。

首先按如下图标打开站点地图窗口；选中index.htm文件；点击并拖动站点导航（Site Navigation）窗口中index.htm文件右上角的小圆圈，将它拖动到左边文件窗口中的某一个文件上，如下图所示；Dreamweaver会自动将mydesign.htm的链接加入到index.htm文件中，同样执行此操作并分别指向其他相关链接文件后，导航窗口如下图：此时打开index.htm文件，可以看到相应的连接文字和链接都已经添加好了，我们可以根据需要将他们合理的修改和组织。

如图：2、快速修改文件Title。

很多时候我们新建的文件往往忽视设定文件Title的内容，事后需要修改时，常常得打开每一个文件分别修改。

其实这个工作可以在站点窗口中方便的完成。

打开站点窗口View菜单下的Show Page Titles，可以使站点窗口中的文件显示出文件头，而不是原先的文件名。

默认的文件头是U ntitled Document我们可以分别两次点击，改变默认的文字为我们需要的文件头。

如图：3、快速生成站点地图。

有时我们需要制作一个包含当前站点所有文件结构的站点地图而找不到合适的方法。

Dreamweaver的基本使用介绍Dreamweaver是一种强大的网页开发工具，它提供了各种功能和工具，使开发者能够更轻松地设计、编写和管理网站。

本文将介绍Dreamweaver的基本使用方法，帮助初学者快速上手使用这个工具。

安装首先，您需要从Adobe官方网站下载并安装Dreamweaver。

安装过程与其他软件的安装类似，按照指示进行操作即可。

一旦安装完成，您就可以开始使用Dreamweaver了。

创建新项目在打开Dreamweaver后，您将看到一个欢迎界面。

要创建一个新项目，请按照以下步骤操作： 1. 点击左上角的“文件”菜单。

2. 选择“新建”。

3. 在弹出窗口中，选择“网站”选项。

4. 输入项目名称和保存位置。

5. 点击“下一步”按钮。

6. 选择您要使用的起始文件夹的类型（HTML、PHP等）。

7. 点击“完成”按钮。

现在，您已经成功创建了一个新的Dreamweaver项目。

编辑网页在Dreamweaver中，您可以使用所见即所得（WYSIWYG）编辑器来设计和编辑网页。

以下是一些基本的网页编辑功能和工具： - 工具栏：位于顶部的工具栏提供了常用的编辑和设计工具，例如选择、文本样式、图像插入等。

- 代码视图：如果您更喜欢直接编辑HTML代码，可以切换到代码视图。

在代码视图中，您可以手动编辑HTML和CSS代码。

- 面板：Dreamweaver提供了各种面板，用于管理项目文件、调整页面属性以及查看代码的相关提示和错误信息。

- 切分视图：您可以将编辑界面分为多个窗格，以同时查看设计视图和代码视图。

管理项目文件在Dreamweaver中管理项目文件非常容易。

您可以使用文件管理器面板浏览项目文件夹和文件，还可以执行一些常见的文件操作，如创建新文件、重命名和删除文件等。

预览和测试在您完成网页设计后，可以使用Dreamweaver的预览功能来查看网页的外观和布局。

点击工具栏上的“预览”按钮，Dreamweaver将在内置浏览器中打开您的网页。

快速上手使用Dreamweaver进行网站开发第一章：了解DreamweaverDreamweaver是一款由Adobe公司推出的可视化网页设计和开发工具，它通过图形化编辑界面和内建的代码编辑器，帮助用户轻松创建和管理网站。

本章将介绍Dreamweaver的基本功能和界面布局，帮助读者快速上手使用该工具。

首先，打开Dreamweaver后，你会看到一个分为多个区域的界面。

顶部是菜单栏，用于访问各个功能和选项。

紧接着是工具栏，提供常用的工具和命令按钮。

主编辑区域位于中间，用于编辑网页内容。

左侧是文件管理器，用于浏览和管理项目文件。

底部是状态栏，显示有关所选元素和编辑进程的信息。

第二章：创建网站在Dreamweaver中创建一个新的网站是开发的第一步。

点击菜单栏上的“文件”选项，选择“新建”来创建一个新的空白网页。

接下来，选择“网站”选项，填写网站名称、文件夹和首页等基本信息。

在创建网站时，你可以选择使用其他的预设模板，或者导入现有的网站文件。

Dreamweaver支持多种网页语言，如HTML、CSS、JavaScript等，因此可以根据需要选择合适的语言。

第三章：页面布局与设计在Dreamweaver中，可以使用所见即所得（WYSIWYG）的方式进行页面布局和设计。

可视化编辑区域提供了丰富的设计工具和选项，例如拖放元素、设置样式、编辑文本等。

在设计时，可以使用网格布局工具来快速调整元素的位置和大小。

通过网格布局工具，可以方便地将页面划分为多个区块，并将元素放置在不同的区块中，以实现更好的页面结构。

Dreamweaver还提供了丰富的样式和主题库，可以轻松应用各种风格和外观效果。

用户可以直接选择所需的样式，并进行自定义调整。

此外，还可以通过CSS编辑器来编辑和管理样式表。

第四章：添加交互和多媒体元素为了增加页面的交互性和吸引力，可以在Dreamweaver中添加各种交互和多媒体元素。

例如，可以插入图像、音频、视频等多媒体文件，并调整其尺寸、位置和播放属性。

DreamweaverCC零基础入门教程第一章 Dreamweaver软件介绍16分钟1.1 行业分析及关键词介绍本节课主要介绍Dreamweaver软件在不同行业的应用，了解Dreamweaver与html、css、w3c的区别。

9分钟1.2 Dreamweaver软件界面简介本节课主要让大家了解Dreamweaver软件界面以及各个面板的新功能，能够根据不同的项目自定义不同的界面。

14分钟1.3 创建站点开启网页之旅本节课主要通过实际的演示，教大家如何创建网页站点，了解创建站点的作用，能够在站点面板中配置站点信息。

第二章通过插入面板了解html结构27分钟2.1 标题标签和文本修饰标签的用法本节课主要讲解通过插入面板，了解常用的结构性元素，了解标签的创建以及标题标签和文本样式标签的书写方法及习惯。

31分钟2.2 区块标签和列表标签本节课主要为大家介绍区块标签和列表标签的书写方法及习惯，以及其他类型标签的属性和特征。

18分钟2.3 标签的属性及用法本节课主要介绍属性标签、文字标签和嵌套标签的书写方法和规范。

19分钟2.4 超级链接的创建及用法本节课主要讲解超级链接在网页中的重要意义，能够通过不同的方式创建超级链接，了解超级链接的不同属性的作用。

16分钟2.5 锚记链接的用法及作用本节课通过制作一个锚记链接的实例，让大家深刻了解锚记链接在网页中的作用。

24分钟2.6 在页面中插入图像本节课通过几个小案例的演示，让大家了解在网页中插入图像的方法，熟练使用多种方式在页面中加入不同的图像，了解图像的各个属性的作用。

13分钟2.7 热点地图和图片特效本节课的目的是让大家了解热点地图在网站的应用，通过实际案例，演示热点地图在网页中的应用。

16分钟2.8 插入媒体元素本节课主要讲解如何在页面中插入相应的媒体，通过不同的方法在页面中插入视频。

第三章使用表格做网页27分钟3.1 表格的应用介绍及创建本节课主要讲解表格在不同领域中的应用，通过本节课的学习，掌握如何创建一个表格，并了解表格的结构。

第1章Dreamweaver CC快速入门Dreamweaver已经成为业界最流行的静态网页制作与网站开发工具，其不仅支持“所见即所得”的设计方式，同时还辅以强大的程序开发功能，可以帮助不同层次的用户快速设计网页。

本章帮助用户快速了解Dreamweaver CC版本的新增功能，以及Dreamweaver的工作环境和网站建设等相关内容。

本章学习要点：了解网站与网页网站的设计及制作网页的概念了解Dreamweaver CCDreamweaver工作区了解文档视图了解【编码】工具栏创建网页文档网页的构成1.1 了解网站与网页翱翔在Internet中，会经常听到网站、网页等一些非常陌生的概念。

而这些概念在网页制作过程中，也是需要用户理解的。

1.1.1 认识网页网页（Web Page）是一个文件，它存放在世界某个角落的某一部计算机中，而这部计算机必须是与互联网相连的。

网页经由网址（URL）来识别与存取，是万维网中的一个“页”面，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。

网页要通过网页浏览器来阅读，如图1-1所示。

图1-1 网页页面文字与图片是构成一个网页的两个最基本的元素。

可以简单地理解为：文字，就是网页的内容，图片就是网页的美观。

除此之外，网页的元素还包括其他内容，常见的网页元素如下。

“文本文本是网页上最重要的信息载体与交流工具，网页中的主要信息一般都以文本形式为主。

“图像图像元素在网页中具有提供信息并展示直观形象的作用。

其中，静态图像在页面中可能是光栅图形或矢量图形，如JPEG或PNG。

而矢量格式通常包含有GIF和SVG动画。

“Flash动画动画在网页中的作用是有效地吸引访问者更多的注意。

“声音声音是多媒体和视频网页重要的组成部分。

“视频视频文件的采用使网页效果更加精彩且富有动感。

“ 表格 表格是在网页中用来控制页面信息的布局方式。

“ 导航栏 导航栏在网页中是一组超链接，其链接的目的端是网页中重要的页面。

图1-53　“修改”菜单 图1-54　“格式”菜单 图1-55　“命令”菜单“窗口”菜单：该菜单提供对Dreamweaver CC中的所有面板、检查器和窗口的访问，“窗口”菜单如图1-57
“帮助”菜单：该菜单提供对Dreamweaver CC文件的访问，包括如何使用Dreamweaver CC以及Dreamweaver 的支持与交流，并且包括各种代码的参考资料等，所示。

图1-56　“站点”菜单 图1-57　“窗口”菜单 图1-58　“帮助”菜单
1.6.3　“插入”面板
网页的内容虽然多种多样，但是都可以被称为对象，简单的对象有文字、图像和表格等，复杂的对象有导航条和程序等。

在Dreamweaver CC中改进了“插入”面板，对插入到网页中的元素进行了重新分类，提供了许多全新的网页元素，并移除了许多不实用的网页元素。

大部分的对象都可以通过“插入”面板插入到页面中，
在“插入”面板中可以看到，在“插入”面板的类别名称按钮旁有一个三角形的扩展按钮，单击该按钮，可以在弹出的菜单中选择相应的类别，即可切换到该类别，如图1-60所示。