简单的分步Dreamweaver教程– 2022

您可以使用大量不同的工具和平台来构建网站。 有些比其他人更适合初学者。 但是，无论您的经验水平如何，您都可以找到最适合您需求的网站构建器。

如果您从未听说过Dreamweaver，那么它是Adobe的一个应用程序，可让您设计，构建和部署网站。

即使您一生中从未接触过任何代码，也可以通过直观的可视界面使Dreamweaver为您工作。

下面，您将学习如何开始使用Dreamweaver。 您将了解Dreamweaver的真正含义，使其脱颖而出，最后了解如何使用此工具创建第一个网站并将其上传到服务器。

什么是Dreamweaver

Dreamweaver是一个网站构建软件，已有20多年的历史了。 它最初由Macromedia开发，然后于2005年被Adobe收购。该软件经历了多次迭代，现已成为Adobe Creative Cloud套件的一部分。 这意味着您需要购买每月订阅才能使用该软件。

简而言之，Dreamweaver是使您可以构建，设计和发布网站的软件。 当您将其安装在PC或Mac上时，它是本机应用程序。

这是一个灵活的应用程序，您可以完全通过可视化编辑器或仅通过代码来构建网站。 您也可以将两者结合使用（前提是您了解编码的基础知识），以了解两者之间的相互影响。

它还支持构建任何类型的网站（例如HTML，HTML5，CSS，PHP，Javascript和jQuery）所需的多种语言。 您可以使用和编辑其他语言的文件，但是代码支持功能将不可用。

Dreamweaver的主要功能

总体而言，Dreamweaver有助于简化设计和构建网站的过程。 同时具有足够的灵活性以应对市场的初级和高级市场。

以下是使该工具脱颖而出的主要功能：

1.易于使用的可视界面

视觉界面编辑器可能是刚入门时将要使用的主要功能。 就拖放功能而言，它与其他初学者一样。 除使用此构建器外，您将使用鼠标选择元素。

这样可以轻松地在创纪录的时间内建立网站的基础。 在执行此操作时，Dreamweaver将自动为您创建必要的代码。 然后，您只需将这些文件上传到您的服务器，您的网站就可以投入使用了。

2.内置代码编辑器

除了完全使用可视化编辑器构建站点的功能之外，您还可以使用代码编辑器构建站点或更改站点的现有设计。

代码编辑器对新手友好，并具有一些有用的功能，可帮助您更快地编写代码并了解正在发生的事情。 这对于初学者来说很有用，可以了解在放置网站的不同元素时代码和设计是如何交互的。

在编写代码时，您还将看到外观方面的变化。 因此，您无需预览站点即可查看所做的更改。 这一切都是自动发生的！

此外，它还具有代码完成等功能，可根据您当前的设计为您当前正在编写的代码提供建议。 另外，它具有代码折叠功能，当您当前不进行编辑时，它将压缩部分代码，以便您可以更快地找到所需的内容。

3.部分Creative Cloud Suite

如果您已经熟悉Adobe产品，那么使用Dreamweaver会让您感到宾至如归。 即使命令与说的不同，也可以使用Photoshop之类的工具。 布局和接口在整个方面都具有一致性。

因此，如果您喜欢Adobe产品并且已经在其创意套件的其余部分中使用了工具，那么此构建器可能是一笔不小的投资。

Adobe Dreamweaver的优缺点

Dreamweaver为您提供了很多可能性。 在这里分解它的所有功能几乎是不可能的。 但是，这里有Dreamweaver提供的一些独特优势，以及您可能想离开并找到其他网站构建器的一些原因。

Dreamweaver的优点

Dreamweaver是一种直观且灵活的工具，可以正确执行许多操作。 以下是此软件可以为您提供的一些最大优点：

设备测试使用Dreamweaver，您将拥有一个即时预览选项，可用于测试并查看您的网站在任何设备上的外观。 许多其他工具都具有此功能。 但是，使用Dreamweaver，只需单击一下即可快速预览和调整您的网站。

简单的代码错误测试当您调整代码或从头开始编写代码时，随着时间的流逝会积累一些错误。 使用Dreamweaver，您可以快速找到并修复这些错误。 您无需猜测站点并对其进行故障排除，就可以知道问题出在哪里以及如何解决。

随附的字体选择设计您的网站可能会很有趣。 尤其是当您开始调整颜色，布局，字体选择等内容时。 Dreamweaver在软件中内置了大量字体选择。 这样可以轻松地为标题和正文找到理想的字体。

捆绑库存照片如果您曾经在网上发布过任何内容，则可以知道搜索图片需要花费多长时间。 您无需在各种库存图片网站上进行搜索，就可以在该工具内直接进行搜索。 有大量的选择，您将能够找到满足您需求的完美照片。

界面个性化当您第一次开始使用Dreamweaver时，可能会被所有可用的不同工具和选项所淹没。 但是，您实际上可以通过更改首选项来简化网站构建器的外观和使用。 一旦知道了使用什么和不使用什么，就可以根据自己的需要来调整构建器的外观。

Dreamweaver的缺点

不过，Dreamweaver并不完美。 如果您不愿意学习该软件的工作原理，那么使用其他解决方案可能会更好。 这是Dreamweaver的一些最大缺点：

更陡的学习曲线

还有其他站点构建器解决方案，例如Squarespace，Wix和WordPress，这使构建第一个网站变得异常容易。 创建一个基本站点并使用Dreamweaver使其联机并不难，但是创建一个可以完全满足您需要的站点将需要一些时间。

由于您从一块空白画布开始，最终结果将取决于您自己的创造力和技能。 一些用户更喜欢这种方式，但是其他用户则更喜欢一种绝对不需要编码技能的简单解决方案。 您可以使用Dreamweaver进行很多操作，并且许多有经验的开发人员更喜欢使用此软件来提供其灵活性。

幸运的是，在线提供了大量教程，因此您可以快速提高自己的技能。 但是，您将需要一些时间和主动权。

您的网站仅取决于您的技能

下面您将学习如何创建一个非常简单和基本的网站。 您不需要任何编码技能即可上手，只需具备掌握您所做工作的基础知识的能力即可。 但是，如果您要创建一个具有许多其他功能的网站，则需要基本熟悉并且对代码的舒适程度有所帮助，以帮助您到达那里。

另外，如果出现问题，那么您将需要知道如何解决它们。 或者至少进行故障排除，直到可以解决问题。

使用Dreamweaver，您仅会受到软件知识和编码能力的限制。 您可以及时发展这些技能。 但是，如果您需要使网站快速联机，则可以找到更好的选择。

定期订阅费（托管之外）

要访问Dreamweaver，您需要每月支付订阅费。 对于那些正在建立多个站点或喜欢该软件的人来说，这笔费用是轻而易举的。 但是，如果您试图以预算建立站点，则可能希望找到一种更便宜的解决方案。

您不仅要考虑软件本身的成本，还要考虑托管的月租费以及域名的年费。

如何使用Dreamweaver从头开始构建网站

现在您已经了解了Dreamweaver的主要功能，是时候展示它们的实际应用了。 我们不会在下面介绍该工具的所有功能，但足以为您提供扎实的基础。

在开始之前，请务必注意，如果您不想自己处理网站设计的各个方面，那么建议使用对初学者友好的CMS，例如WordPress，或其他网站构建器。

话虽这么说，是时候该加入了！ 请按照以下步骤创建和发布您的第一个Dreamweaver网站：

1.选择您的计划并安装

您需要做的第一件事是购买并安装Dreamweaver软件。 因此，转到Adobe网站，然后选择适合您的计划。

目前，仅单个应用每月就要花费20.99美元。 同时，如果您想访问整个Creative Cloud套件，则每月需要支付52.99美元。 也为企业，老师和学生提供折扣。

选择订阅后，下载Dreamweaver并按照随后的说明进行操作。 这是一个简单的过程，只需点击几下即可。

另外，如果您不想立即付费购买此软件，则可以选择7天免费试用。 这将为您提供一些时间来试用该软件，以查看它是否适合您。

如果您已经在计算机上安装了Creative Cloud，则将其打开，选择“应用程序”，然后从列表中选择Dreamweaver CC。 您可以选择免费试用或立即购买该软件。

2.初始设置和演练

安装Dreamweaver后，该软件将自动打开，您将看到一个类似于以下屏幕的屏幕。

接下来，除非您使用了以下软件，否则请选择“否，我是新手”选项。 这将引导您完成设置Dreamweaver工作区的初始过程。

在下一个屏幕上，您将能够选择最适合您的工作流程的选项。 由于这是您第一次使用Dreamweaver，因此请选择“标准工作区”选项。

这将允许您使用可视化编辑器或代码来构建和定制站点。

接下来，为您的编辑器选择配色方案。 这不是超级重要，因此只需选择最喜欢的配色方案即可。

在下一个屏幕上，您可以选择是否要从示例站点，空白模板开始或观看一些教程。

在本教程的这一部分中，我们将使用“从新文件夹或现有文件夹开始”，但是，如果选择“从示例文件开始”，您将拥有一个基础的网站基础，看起来像下图。

有些人可能希望从基本模板开始，因为它不太令人生畏。 但是对于那些想要继续从头开始构建站点并学习此工具的来龙去脉的人，那么本教程的这一部分适合您。

如果要使用其中一个入门模板来构建您的网站，而不是从头开始创建，请跳到本教程的下一部分。

3.创建一个新站点

要从头开始构建新站点，请导航至Site> New Site 。 它看起来应该像下面的屏幕：

在这里，您将要为您的网站命名，并指定保存网站文件的位置。 确保指定一个文件夹，在该文件夹中您将拥有所有的Web项目，因为这将使组织（以及以后上传到服务器）更加容易。

接下来，您将要创建一个images文件夹，该文件夹中将包含您站点的所有图像。 该图像文件夹应位于您站点的文件夹中。

单击“高级设置”，然后在选项的下拉列表中选择“本地信息”。 在这里，您将选择您刚才创建的images文件夹。 然后，点击“保存”，您就可以开始构建您的网站了。

4.创建您的首页

我们要创建的第一页将是您的主页。

为此，请选择“文件”>“新建”，然后从“文档类型”列表中选择HTML。 然后，将文件命名为index.html。 这将有助于给您的网站适当的结构。

现在您应该有一个空白窗口，如下图所示。 这就是您的网站目前的样子！ 您还将看到Dreamweaver也创建了一些初始HTML。

5.创建您的网站标题

我们要做的第一件事是创建您的网站标题。 这是您网站的顶部，通常包括您的徽标或网站名称。

为此，请单击页面顶部（您还将在底部的代码部分中看到突出显示的<body>元素）。

然后，单击右上角的“插入”，然后选择“标题”选项。 您可能需要向下滚动一点才能找到该选项。 这里的所有选择都是可以添加到站点的不同HTML元素。

这会将标头块插入您的页面，因此您可以根据自己的喜好对其进行自定义。

接下来，我们将向该标头元素添加一个H1标签。 这对于SEO来说很重要，并让搜索引擎知道您的网站内容。

为此，在编辑器的代码部分中突出显示标题文本。 然后，在下拉框中选择“标题”和H1。

6.设置页面标题的样式

创建标题后，就该给它一些样式了。 您可能不想使用基本样式，因为它会使您的网站看起来很古老。

我们将使用CSS进行这些更改。 通常，您将使用此文件控制网站的所有样式和显示元素。 它使您能够执行诸如更改字体大小，为某些站点元素创建宽度和尺寸等操作。

我们要处理CSS文件的第一件事是更改标题的外观。 但是首先，我们需要创建一个CSS文件。

为此，请单击标题，您将看到标题部分以蓝色突出显示。 单击“ +”图标，然后在框中输入#header（这将为您的标题提供一个ID，可让您自定义其外观）。

接下来，选择“创建新的CSS文件”选项。 在弹出的框中，选择“浏览”，选择您先前创建的文件夹，其中存储了所有站点文件，然后将其命名为“ style.css”，然后单击“确定”。

该文件是您进行所有设计更改的地方。

现在，随着CSS文件的创建，我们将创建一个选择器。 这将使您可以更改标题文本，而无需更改整个标题。

为此，导航到DOM编辑器（右下角），然后选择您创建的H1标签。 然后在右上角选择“ CSS Designer”。

接下来，单击“选择器”选项，该框应自动填写“ #header h1”。 按“ Enter”，一切就绪。

现在，该更改字体了。 如果您仍不在CSS Designer菜单中，请再次单击该选项卡，然后选择刚刚创建的“ #header h1”。 然后有一个小盒子，上面写着“ Show Set”。 取消选中此框，您将解锁一些很酷的自定义选项。

随意尝试这些选项。 您将能够执行诸如更改字体，字体样式，文本大小，对齐方式，添加边框等操作。

对标头的外观满意后，请继续下一步。

您也可以单击屏幕顶部的'style.css'文件，以查看代码的外观。

7.添加更多内容

您可能希望您的网站不仅仅是一个庞大的标题。 这是在首页上添加和设置不同文本元素样式的方法。

要在页面上添加文本，请点击右上角的“插入”标签，然后选择“段落”。 如果要在每个段落之间使用换行符，则需要添加多个段落。

您会在下面的图片中注意到，有多个段落，以及一个无序列表，也就是要点。 如果要在页面中插入有序列表或无序列表，请选择“无序列表”选项，然后单击代码部分中的<ul> </ ul>标记。 最后，选择“列表项”部分，并将其添加到两个标签之间。

最后，我们将在页面顶部标题的正下方添加一个标题。

为此，请找到以</ header>结尾的代码部分，然后按Enter键并创建一个空格。 接下来，从右上方菜单中选择“标题”，然后从下拉框中选择H2。

然后，您可以自定义标题文本，但您认为合适。

8.添加图片

有了标题和一些基本内容之后，就可以在网站上添加图片了。 幸运的是，使用随附的库存图像工具，找到合适的图像不会太耗时。

您可以通过单击“ CC库”选项卡并搜索图像来使用内置的图库。 或者，您可以找到自己的图像并将其上传。

对于本教程，我们选择了后者。 如果您使用的是来自互联网或自己收藏的图像，请确保将其添加到您之前创建的图像文件夹中。 然后，选择“插入”标签，然后选择“图像”。

在这里，您可以在计算机上找到图像，然后按“打开”。

现在，该软件将自动将图像插入您的页面并添加适当的代码。

9.预览您的网站

整理好网站的第一个版本后，就该看看它的外观了。 Dreamweaver具有非常有用的内置预览功能。 这样，您可以在各种Web浏览器和移动设备上查看网站的外观。

这可以帮助您发现所有明显的错误，然后再决定下一步，然后将网站上传到服务器。 这也是实时预览，因此您对网站所做的任何更改都会自动显示。

要预览您网站的当前版本，只需单击右下角的预览按钮。 然后，您可以选择要在哪个浏览器中预览网站。

您还可以通过拍摄QR码图片，在手机上查看网站的外观。

在决定在线发布网站之前，请确保同时检查了网站的标准浏览器和移动版本。

对网站的外观满意后，请继续执行最后一步。

10.在线发布您的网站

完成基本站点后，就可以将其上传到服务器了。 这个过程非常简单明了，但是要做到这一点，您需要事先购买托管服务。 如果您尚未执行此操作，请花一些时间浏览此列表，然后注册选择的托管服务提供商。

我们建议使用Bluehost或Cloudways。

注册主机后，找到您的FTP信息，因为下一步需要此信息。

完成这些工作后，您可以进入将网站实际上传到服务器的下一步。

为此，请导航至“站点”>“管理站点”。 在出现的窗口中，选择您的站点，然后单击左下角的铅笔图标。

接下来，选择左侧的“服务器”选项，然后单击“ +”图标，这将允许您添加服务器信息。

该窗口上的所有信息均由您的主机提供，由“服务器名”字段决定，具体取决于您。 另外，请确保您包括服务器根目录和URL。 这样，您就可以在Dreamweaver中包含实际有效的站点范围链接。

设置服务器信息后，单击“保存”，然后再次单击“保存”。

现在，您所要做的就是从左侧菜单中选择要上传的文件，然后点击右上角看起来像插头的图标。

如果正确输入服务器信息，则Dreamweaver将连接到服务器并将站点的文件上传到指定位置。

而已！ 您已经成功创建并上传了第一个Dreamweaver网站。

如果您不想完全从头开始创建整个Dreamweaver站点，请继续阅读。 在下面，您将看到如何使用预先存在的模板来简化网站构建过程。

如何使用Dreamweaver模板来构建您的网站

如果以上所有内容似乎都让人不知所措，那么您可能想从网站模板开始。

通过使用其中一个预制模板，您将获得一个良好的开端，而不必从头开始创建所有内容，而只需添加或删除任何预制元素。 这还为您提供了查看最终设计和代码库外观的优势。 这可以帮助加快您的教育过程。

为此，选择“文件”>“新建”，然后选择“入门模板”，“基本布局”，最后选择要构建的网站样式。 在这里，我们采用了“基本-多列”布局。

您会发现此模板为您提供了很多工作要做。

我们将做一些基本的事情，例如更改网站名称和标题文本。 为此，我们将遵循与上述过程类似的过程。 要更改标题文本，只需单击标题元素，然后输入新文本。

要更改字体，请选择代码的<h1 class =“ title>部分。 然后在右侧单击“属性”旁边的“ +”按钮。 在这里，您可以通过选择看起来像大写字母“ T”的文本选项来更改字体。

您也可以对其他元素执行相同的操作。 例如，您可以更改字体类型和大小。 将图像添加到预先存在的图像块等中。

但是，在我们让您根据自己的喜好自定义此模板之前，这里介绍了如何快速编辑标题背景的颜色。

您可以使用“ CSS设计器”选项采用上述方法来调整颜色。 或者，您可以直接进入CSS文件。

为此，请注意此元素的div类，即“ primary_header”。 接下来，单击页面顶部的'multiColumnTemplate.css'文件。

找到“ .primary_header”元素后，即可在此处更改标题背景颜色。

当然，使用模板时您可以做很多事情，但是希望上面的更改可以使您对可以做的事情有所了解。

对网站模板进行必要的更改后，就可以将网站推送到服务器上了。 只需执行与上述步骤9和10相同的过程即可。

收盘时

如您所见，Dreamweaver是一个非常灵活的网站构建器。 凭借易于使用的用户界面和内置的代码编辑器，您可以构建所需的任何类型的网站。 由于它是一种多功能工具，因此初学者一直使用它，直到高级Web开发人员。

在上面，您学习了如何掌握Dreamweaver的基础知识，并使自己的第一个网站在线。 在一篇博客文章中几乎不可能涵盖Dreamweaver的各个方面，但是一旦您了解了基础知识，就可以继续学习了。 如果您想进一步探索，可以在Adobe网站上找到大量的视频教程库。

但是，请记住，Dreamweaver不是您可以用来构建网站的唯一工具。 实际上，存在使用WordPress并自定义初学者友好主题的更简单方法。

但是，如果您决定使用Dreamweaver来构建网站，则希望您有更多的能力来使您的网站在尽可能短的时间内启动并运行。

现在交给您。 您是否使用Dreamweaver来构建您的网站？ 您可以添加任何很棒的提示或技巧吗？ 请在下面的评论中分享。

另外，请查看我的Dreamweaver键盘快捷键，以加快您的网站构建任务。

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。如若转载，请注明出处:http://www.botadmin.cn/sylc/10959.html