Adobe Dreamweaver 教程

Adobe Dreamweaver 是一款用于设计网页的软件。 这些 HTML 网页功能齐全。 该软件提供了一个 WYSIWYG，即所见即所得的界面，用于创建和编辑网页。 Adobe Dreamweaver 软件支持多种标记语言，如 HTML、XML、CSS 和 JavaScript。 它支持英语、西班牙语、法语、德语、日语、中文等....

Dreamweaver 最初由 Macromedia 开发，并于 1997 年发布。 2005 年，Adobe 收购了 Dreamweaver，并将其命名为 Adobe Dreamweaver。

Adobe Dreamweaver 的特点

1. 快速、灵活的编码。

由于简化的编码引擎，创建、编码和管理网站变得非常容易。 使用此软件，可以快速学习 HTML、CSS 和其他 Web 标准。 它加快了网站的开发速度。

2. 仅需几个步骤即可完成网站设置。

设置网站变得非常容易，并且可以非常快速地运行入门模板。 可以为电子邮件、关于页面、博客、电子商务页面、新闻通讯和作品集自定义模板。 为了阅读代码，可以使用代码着色和视觉提示来快速编辑和更新。

3. 在每个设备上动态显示。

使用 Adobe Dreamweaver 可以构建响应式网站，该网站可以适应任何屏幕尺寸。 这有助于预览站点和编辑，确保页面看起来和工作方式与您想要的方式相同。

以下是一些最新的更新

1. Windows 的多显示器支持

可以通过在多个监视器上显示网页来扩展工作区。

2. CEF 集成

最新版本的 Chromium Embedded Framework 与 Dreamweaver 集成。 因此，现在可以使用 HTML5 网站构建网页，并且可以显示元素、CSS 网格等等。

3. 重新设计的现代用户界面

为了自定义工作区，可以使用简化的、整洁的界面。 它显示了需要编码的工具。

4. Git 支持

使用 Git 支持可以轻松协作。 从 Git 面板，可以在 Dreamweaver 中管理所有源代码，并且可以执行所有常用操作

Adobe Dreamweaver CC 2019 中的新功能

1. CEF 更新

最新版本的 Chromium Embedded Framework 与 Dreamweaver 集成。 设计人员和开发人员可以构建网站并显示 Flexbox 元素、CSS 网格等等。

2. ES6 支持

为了快速列出类、方法、箭头函数和生成函数，Dreamweaver 支持 EcmaScript 6。 ES6 代码可用于处理最新的 JavaScript 更新。

3. JavaScript 重构

可以使用重命名和重构等功能来组织 JavaScript 代码。

以下是 Adobe Dreamweaver 的优点

1. 为了快速扫描，它可以突出显示代码。

它有助于确定 CSS、PHP、JavaScript 或 HTML 代码要放置在何处。 对于创建动态页面，此功能非常有用。

2. 帮助初学者理解网站的编码。

突出显示的代码颜色编码功能对初学者很有帮助，因为它可以显示特定命令可以为模板和页面做什么。 通过这种方式，学习过程变得非常容易。

3. 为用户提供代码建议。

对于初学者来说，这在编码时是一个非常重要的好处。 如果用户不确定如何处理图像、字体或颜色，那么 Adobe Dreamweaver 将直接使用代码中的下拉菜单自动填充建议。 选择适合您网站的选择并创建代码。 这很容易。

4. 用户需要切换屏幕。

用户可以看到程序的实时结果。 许多程序不允许在同一屏幕上实时查看页面的此功能。 在 Adobo Dreamweaver 中，编码和设计视图在同一屏幕上，顶部是设计视图，底部是编码区域。

5. 立即检查开发人员的代码。

对于初学者来说，在初始阶段构建正确且有效的代码非常重要。 当以传统方式完成编码时，可能会出现可访问性问题和代码中的错误。 Adobe Dreamweaver 会突出显示错误并显示所有问题，并检查所有可访问性。

6. 在内容创建中使用文字处理变体变得容易。

在 Microsoft Office 中，如果您想将文本加粗，只需按 Ctrl+B。 在 Adobe Dreamweaver 中，要将文本加粗，您需要突出显示文本，然后会出现一个文字处理器平视显示器，它可以帮助您快速更改突出显示的部分。

7. 在创建的站点中查找和替换项目变得容易。

在 Adobe Dreamweaver 中，用户可以使用查找和替换工具从内容、编码或任何特定标签中查找和替换项目。 如果发布任何新插件，都可以非常轻松地更新代码。 使用此功能，只需一秒钟即可更新数千页。

8. 开发人员可以像通过互联网站点一样通过文件进行标签切换。

Dreamweaver 中包含的功能使文件之间的切换变得非常容易。 使用此功能可以准备好访问多个菜单的文件。 这在模板和整体设计计划中都非常有益。

以下是 Adobe Dreamweaver 的缺点

1. 它不是基于浏览器的 IDE。

Adobe Dreamweaver 中的编码输出在浏览器中可能不同，因为浏览器会以不同的方式解释代码。 对于开发人员来说，这变成了一个巨大的劣势，因为它不会跨平台响应。

2. 需要花费大量时间来学习界面。

当您第一次开始使用 adobe Dreamweaver 时，您将获得数十个用于访问的项目。 根据您将打开的文件，可以在屏幕上看到 50 多种不同的东西。 对于初学者来说，开始编码会非常令人生畏。

3. 您所看到的并不一定总是您将得到的。

这是一个很大的缺点，因为此处的“设计”视图证明它不是基于浏览器的视图。 对于开发人员来说，放置项目变得困难。 100% 保证浏览器中的输出会非常令人失望。

4. 没有特定的自动编码选项。

Adobe Dreamweaver 旨在满足用户的需求。 因此，代码变得非常冗长。 在 adobe Dreamweaver 中，一行的验证需要 15-20 行代码。

5. 全局样式是一个主要问题。

如果开发人员想在旧版本的 Adobe Dreamweaver 中使用文本上的属性栏，它会将未定义且未设置样式的文档添加到编码中。 如果您想要许多数十个未定义的样式，那么它会为网站的样式设置创建一个问题。

6. 完成一行后按 Enter 键会影响大小。

通常，当我们完成一行后输入一行时，我们会按键盘上的 Enter 键。 在 Adobe Dreamweaver 中，当您正在编写一行时，并且在完成它之后，您按下 Enter 键，那么 Dreamweaver 会将其视为一个段落。 此外，文本将出现在图像周围。

7. 用户不熟悉的许多附加功能。

由于 adobe Dreamweaver 专为用户设计，以使其工作变得容易，但大多数用户发现存在许多他们从未使用的功能。

Adobe Dreamweaver 2019 的安装

步骤 1： 单击 adobe Dreamweaver 文件夹中的 setup。

步骤 2： 选择您喜欢的语言和位置。 默认情况下，语言为英语，位置为默认位置。

安装开始。

Dreamweaver 2019 已成功安装。

安装后首次启动 Adobe Dreamweaver

双击 Adobe Dreamweaver 2019 图标。 您将得到一个屏幕，您必须在其中选择任何一个选项。 如果您之前从未进行过编程，请选择“我是新手”，或者如果您之前进行过编程，则选择“我有”选项。

此后，对于设置向导，请选择任何一个工作区开发人员或标准工作区。

此后，为您的工作区选择任何一种颜色主题。

最后一步是选择如何开始。 存在三个选项：从示例文件开始，从新的或现有文件夹开始，或者通过观看教程开始。

开始使用 Adobe Dreamweaver 2019

双击 Adobe Dreamweaver 2019 图标。 您将获得该软件的 IDE。

要创建新文件，请单击右侧的“创建新文件？”按钮。

此后，将出现“新建文档”窗口。

要创建 HTML5 文档类型，请选择 HTML 并为文档指定标题。 您还可以附加已创建的 CSS 文件。 然后单击“创建”按钮。

将出现一个工作区。 工作区分为两个部分。 第一部分是预览即时编码。 第二部分用于编码。

默认情况下，工作区处于拆分模式。

在“代码”选项中，只能进行编码。 保存文件并在 chrome 中运行它。

或者通过单击“实时”选项可以查看输出。

使用 Dreamweaver IDE 设计网站

1. 要创建网站，第一步是创建一个新的站点页面。 为此，请按照以下步骤操作

i. 单击菜单栏中的“站点”。

ii. 单击“新建站点”。

iii. 将出现一个站点设置窗口。 给出站点名称和将创建此文件夹的位置。

注意： 最好将所有项目保存在一个文件夹中。

您也可以选择此站点来将您的项目与之关联。此选项提供版本控制，但您可以跳过此选项，因为它不是强制性的。然后单击“保存”按钮。

iv. 现在，再次从菜单栏中单击“站点”。在站点设置窗口的左侧，单击“高级设置”。 在此，单击“本地信息”。

v. 现在，单击文件夹图标选择默认图像文件夹。现在转到您为站点创建文件夹的文件夹，并创建一个新文件夹，将其命名为“images”，然后将其选择为您的默认图像文件夹。在此文件夹中，所有图像将由 Dreamweaver 自动保存。然后单击“保存”按钮。

1. 现在，在创建站点文件夹后，我们需要在该文件夹中创建一个主页文件。为此，请按照以下步骤操作

i. 单击菜单栏中的“文件”选项。

ii. 单击“新建文件”。

iii. 将出现一个新的文档窗口。默认情况下，HTML 被选择为 doctype。提供文件的标题，然后单击“创建”按钮。

单击“创建”按钮后，将出现工作区。

2. 现在，在网页上创建一个标题。以下是步骤

i. 单击位于工作区右侧的“插入”选项卡。

ii. 现在选择“插入”选项卡中的“标题”选项。

控件将自动将控制移动到网页上的 head 部分。

现在，您可以根据您的要求更改内容。

iii. 现在返回到“插入”选项卡，然后单击“标题”。

iv. 为标题选择 H1 标题。

3. 创建 CSS 文件

可以将 CSS 文件插入到 HTML 文档中。以下是创建 CSS 文件的步骤

i. 在 header 部分，单击蓝色框的 header 加号符号。

ii. 现在分配一个类或一个 Id 的名称，然后按 Enter 键。

iii. 将出现一个弹出窗口，

iv. 单击页面上的定义。

v. 现在单击“创建一个新的 CSS 文件”。

vi. 在“创建一个新的 CSS 文件”窗口中，浏览您站点的文件夹，并为 CSS 文件命名，然后单击“确定”按钮。

您可以看到 style.css 文件已出现在 header 上。

您还可以看到代码部分，其中在 head 部分定义了一个 style 标签，其中提到了我们创建的 Id，这被称为内部 CSS。 还有一个 link 标签，即

也插入了用于将 style.css 文件与 HTML 文件链接，这被称为外部 CSS。

5. 为页面标题创建 CSS 选择器

如果要更改字体并且还希望将其居中对齐，则需要创建一个 CSS 选择器。 选择器是页面中元素的名称，您可以在其中分配颜色、大小等属性。以下是创建 CSS 选择器的步骤

i. 在右下角的 DOM 视图中标记 H1 标题。

ii. 在其上方，单击“CSS 设计器”。

iii. 现在单击选择器的加号符号。您将获得为标题创建的 Id 或类，然后按 Enter 键。

6. 更改标题的字体。

由于我们已在上一步中创建了一个选择器，因此现在我们可以在其中分配属性。 以下是步骤

i. 单击“CSS 设计”，然后单击属性 + 图标。

ii. 现在单击 T 按钮。

iii. 单击字体系列，然后选择您选择的字体类型。

iv. 您还可以单击字体系列名称列表中的“管理字体”。

v. 选择字体，然后单击“完成”按钮。

vi. 选择字体后，再次单击字体系列，您将在那里看到您选择的字体的新链图标，单击它。

vii. 之后，您可以看到标题上出现了一个字体链接。

viii. 单击它。 您将看到字体已更改。

7. 将标题居中并更改字体大小

对于居中，对齐标题和更改字体大小，可以使用快速编辑选项。以下是步骤

i. 转到源代码，并将光标指向 <h1> 标记，然后右键单击它。您将获得一个列表。

ii. 现在，单击“快速编辑”选项。它将打开与该标记关联的 CSS。 现在，您可以输入以下属性，然后更改将出现。

font-size: 50px;
text-align: center;