初学者可以使用Dreamweaver

<h1>Dreamweaver对初学者有好处</h1>
<blockquote>注册主机后，找到您的FTP信息，因为您需要下一步.</blockquote>
<h2>全面的Dreamweaver教程</h2>
从网站开发开始时，您可能已经听说过Wysiwyg（您看到的是您得到的）编辑. 建立一个没有编码知识的网站的诱惑听起来很吸引人，并可能导致您在互联网上寻找一个梦想威教程.
但是，当第一次使用Dreamweaver时，它可能令人生畏. 不用担心，本文将涵盖有关如何使用Dreamweaver创建网站的所有内容. 让我们开始使用Dreamweaver教程.
<h2>什么是Adobe Dreamweaver CC?</h2>
Adobe Dreamweaver CC是著名的网站建设者和部署工具，被认为是Wysiwyg和其他更常规的HTML编辑之间的完美执行. Macromedia首先开发了Dreamweaver，然后被Adobe Inc收购., 早在2005年.
Dreamweaver最初使用了永久许可，这是使用该软件的一次性付款.
Adobe Dreamweaver CC是一个集成的开发环境（IDE）软件，这意味着它为开发目的提供了全面的工具和支持. 使用创意云结构，您可以选择包括其他Adobe的创意软件来提高您的生产力.
Dreamweaver允许您使用拖放方法在视觉上构建和设计网站，该方法使您可以在设计师仪表板中移动元素. 您也可以像任何传统的代码编辑器一样使用它 – 仅使用文本编码，然后立即将网站上传到服务器.
您还将获得大量的学习材料和资源，以及一个专门的Adobe社区论坛，可帮助回答您对产品的任何问题. 它还支持15种不同语言的语言. 更重要的是，如果您正在寻找Dreamweaver教程，您会在网上找到很多.
这些功能将Dreamweaver定位为内容管理系统（CMS）和纯代码编辑器之间的混合物.
<h2>可区分的功能</h2>
作为Adobe创意生态系统的一部分，已经将Dreamweaver与其他基于视觉的代码编辑器区分开来. Dreamweaver可以使用只有Adobe才能提供的资产和特权. 尽管如此，这是两个最主要的特征：
<h3>初学者友好的视觉界面</h3>
Adobe Dreamweaver CC易于使用，但同时很难掌握. 您的网站仅与您的技能一样好. 含义，虽然该软件提供了许多Web开发功能，但具有基本或有限的知识，但您无法充分利用这些功能.
尽管如此，通过视觉编辑器，初学者可以开始构建网站. 有拖放功能可以在您的项目上插入HTML元素，您可以立即在网站上看到任何更改. 一个简单的Dreamweaver教程将帮助您入门.
它还可以帮助您了解您目前正在处理的元素的哪一部分. 与示例一样，当您单击标题时，它突出显示了编辑器中的相应代码.
<h3>强大的内置代码编辑器</h3>
Dreamweaver的另一个重要方面是强大的内置代码编辑器. 如果专业开发人员想在文本编辑器中编码，他们可以做到这一点. 它的一些关键功能包括：
<ul>
<li>语法突出显示. 为了帮助阅读代码更容易，它将突出显示不同的元素，例如变量，ID，类和其他元素</li>
<li>代码完成. 通过自动代码完成提高生产率. 例如，只需键入 IMG 并击中 标签 在键盘上插入</li>
<li>CSS文档. 每当您需要CSS属性的引用时，就会有一个快速文档功能，可以在代码编辑器中弹出相关信息</li>
</ul>
除此之外，其他重要功能还包括：
<ul>
<li>Bootstrap 4准备就绪. 最新版本的 html, CSS, 和 JavaScript开发响应式网站的框架</li>
<li>git支持. 执行所有常见 git 操作包括 推, 拉, 犯罪, 和 拿来 从您的Dreamweaver仪表板上</li>
<li>实时浏览器预览. 实时进行编辑时，请参见网站上的更改</li>
<li>创意云图书馆. 访问数据库中的颜色，图形和其他创意资产</li>
<li>铬嵌入式框架（CEF） 准备好. 帮助开发人员嵌入浏览器以在第三方应用程序中使用</li>
</ul>
<h3>没有什么是完美的</h3>
尽管如此，Adobe Dreamweaver CC也有缺点. 就像上面简短说过的那样，该软件与您的技能一样好. 因此，即使实时界面可以帮助初学者建立网站，您可能需要更多时间来创建一个非常精致的网站.
尽管提供了所有信息，Dreamweaver仍然有更陡峭的学习曲线. 您需要花费大量时间来完全掌握其所有功能. 因此，如果您希望阅读Dreamweaver教程并成为专业人士 – 您会感到失望.
此外，这是一项不便宜的付费服务. 因此，对于业余爱好者开发人员来说，Dreamweaver可能不是使用的最佳工具.
<h4>专家提示</h4>
如果您觉得Adobe Dreamweaver CC不是您的事，那么您并不孤单. 实际上，互联网上约33％的网站使用WordPress. 如果您在Hostinger上，那会更好，我们的1键安装功能将使您变得容易. 另外，您也可以使用我们的网站制造商轻松构建自己的网站.
<h2>Dreamweaver定价概述</h2>
作为基于订阅的软件，Dreamweaver为单个用户提供了一系列计划. 单个应用程序Plus的预付费计划 100GB 云存储, Adobe Portfolio, 字体, 和 火花 费用 $ 239.88 每年.
以及包括整个集合的全应用选项 20+ 创意软件，包括 Photoshop CC, 插画家CC, 和 Adobe XD CC 会花你的费用 $ 599.88 一年.
这是个人可用的完整计划：
不过，您也可以在免费试用期间使用Dreamweaver享受7天的品味. 只需下载该应用并通过您的电子邮件注册, Facebook 或者 谷歌 帐户.
让我们从基本的Dreamweaver教程开始，然后学习如何创建主页.
<h2>Dreamweaver教程：建立网站</h2>
<h3>1. 创建一个新网站</h3>
在您的Adobe Dreamweaver CC仪表板中，转到 网站 – >新网站 窗口将弹出.
第一步是命名您的网站并将其保存在一个文件夹中. 这有助于组织文件，并将上传过程更容易.
如果要在网站中包含图像，则可以通过导航到 高级设置 – >本地信息. 也应在您网站的文件夹中创建图像文件夹.
点击 节省 当你完成时.
<h3>2. 创建主页文件</h3>
目前您会得到一个空白的工作区. 但是，看看顶级面板，您的网站的文件应该在那里. 现在，我们将从头开始创建主页文件.
去 文件 – >新 并选择 新文档. 选择HTML作为文档类型，然后单击 创造. 给文档标题是可选的.
您将被指向工作空间，并有一个带有几行HTML代码的白页. 这实际上是您网站的现场视图. 将该HTML文件另存为 指数.html, 并将其放在网站的文件夹中.
<h3>3. 创建标头</h3>
我们将为网站创建标题. 这通常是您网站的徽标和名称.
单击白页或选择特定位置 编辑器上的元素. 转到右上方面板，然后单击 插入. 这将提供可以添加到页面的常见HTML元素列表.
搜索 标题 元素.
单击或拖放到您的工作区，它将添加到您的网站及其代码.
接下来，我们将标题变成标题 <h2>…</h2> 标签. 这是出于SEO的目的，并通知搜索引擎您的网站是什么. 在该部分中标记文本 插入 控制板. 搜索并单击 标题：H1.
之后，将文本更改为您网站的标题. 它必须是描述性和代表性的东西. 在这里，我们将使用“欢迎来到开发网站.透明
<h3>4. 添加家庭导航</h3>
要添加导航按钮，请按返回或输入来添加标头后的行. 现在去 插入 面板并搜索 导航 元素. 当您单击它时，窗口将弹出. 写 导航 当ID并单击 好的.
这将为编辑器添加导航元素. 当您在元素内容中时，请寻找 超链接 在里面 伙计T面板. 单击它并填写详细信息，如下：
重要的! 该链接将与您将在网站上浏览的页面对应. 目前，我们仅使用主题标签来填充空白.
完成后，单击 好的. 现在，这是一个可单击的主按钮，并且在编辑器上添加了更多代码行.
<h3>5. 添加网站描述</h3>
我们将插入一个次要标题，段落和几个项目符号.
导航代码后添加一条线，然后单击 标题：H2 和 段落 在里面 插入 控制板. 它将添加 和 在编辑器上标记. 填写您的内容.
现在要添加项目符号，在段落代码下方添加另一行. 去 插入 面板，单击 无序列表. 它应该添加 在编辑器上标记. 当您使用时，请单击 项目清单 在 这 插入面板，它会添加 在内部标记 标签.
关于html列表的事情，您必须手动添加几个标签，与您的观点数量一致. 我们的看起来像这样.
您本质上创建了基本的主页结构. 您还可以添加更多内容，例如表单，视频，图像等., 但这对入门者来说是可以的.
虽然目前看起来很沉闷，但我们将添加样式表使其更具吸引力.
<h3>6. 创建一个CSS文件</h3>
级联样式表（CSS）用于在HTML中进行风格化元素，并在开发人员创建网站时与它并驾齐驱. 将HTML视为身体结构，而CSS是使身体吸引人的美学部分.
现在，第一件事是给您的标题一个ID. 转到Dreamweaver面板的右下角，然后选择 dom 控制板. 您将在那里看到您网站的结构的概述.
点击 标题, 您会注意到它将标记为蓝色，标签和加号标签.
单击加号并输入 #header. 主题标签意味着我们将ID分配给该元素. 按返回或输入. 在即将到来的菜单中，选择一个来源： 创建一个新的CSS文件.
一个新窗口将弹出. 选择 浏览 并找到您网站的文件夹. 类型 风格.CSS 然后单击 节省. 然后，单击 好的.
您会注意到一个新的 风格.CSS 出现在代码编辑器上的实时视图和新链接元素的顶部.
对所有需要风格化的元素进行相同的操作. 这次，而不是创建新的CSS文件，而是将其保存在同一文件中 风格.CSS 您之前创建的文件.
现在，您已经准备好使用CSS选择器对其进行样式.
<h3>7. 为网站标题创建CSS选择器</h3>
我们将更改字体并将我们的网站标题与中心保持一致.
标记 H1 在DOM面板的标题下方. 然后选择 CSS设计师 从上面的面板.
点击 加号 就在 选择器. 它自动提出了一个类似的名称 #header H1, 并命中返回.
重要的! 这意味着您只针对名称的元素 H1 在 – 的里面 #header 元素. 这样，样式仅适用于书面文本（您的网站标题），而不适用于标题元素本身.
<h3>8. 更改标题字体</h3>
确保选择器指向 #header H1.
点击 特性 并取消选中 显示集 解锁 布局, 文本, 边界, 背景, 和 更多的 选项.
点击 文本 选项和悬停 字体系列 然后单击 默认字体. 它将为您提供很多选择.
另外， 管理字体 菜单将为您提供Adobe Edge Web字体数据库中的另一个选项范围.
单击您首选字体. 在这里，我们正在使用一个叫做 卡拉. 完成后，它将更改您的网站标题字体，并将必要的代码添加到 源代码 和 风格.CSS.
<h3>9. 将标题与中心保持一致</h3>
在里面 文本 选项，悬停 文本一致 然后单击 中心. 您会注意到发生的更改，并添加了其他代码 风格.CSS.
对您网站的内容进行所有必要的更改. 对于本教程，我们还添加了更多内容并为我们的网站设计了样式. 这是最后的外观：
<h2>使用Dreamweaver模板构建网站</h2>
您还可以在Dreamweaver中使用预制模板创建网站. 使用模板，您将领先一步，并获得优势，看看最终站点以及随后的代码的外观.
让我们通过另一个Dreamweaver教程，学习如何使用模板：
<h3>1. 选择模板</h3>
为此，去 文件 – >新. 选择 入门模板 – >基本布局. 我们将在本教程中使用单页. 点击 创造.
Dreamweaver几乎为您的网站创造了所有必要的结构和风格. 剩下的就是调整内容并根据您的需求调整样式.
在本教程中，我们只会进行基本更改，例如编辑网站的标题和描述，并更改网站背景颜色的某些部分.
<h3>2. 更改徽标和标题文字</h3>
要更改文本徽标，请单击 H4 .标识 在里面 dom 控制板. 它将突出显示编辑器上的代码行，将其更改为您想要的任何名称.
另外，您也可以双击实时视图中的徽标框并从那里更改文本. 对于网站标题和标语也要做同样的事情. 我们变成了这样的事情.
<h3>3. 更改标题背景颜色</h3>
要改变背景的颜色，请转到 .CSS 文件并查找标题元素. 在这种情况下，是 .英雄. 寻找背景色线，您会注意到某个神秘数字.
该数字实际上是HTML颜色代码. 每种颜色都有其自己的数字表示形式，您可以在官方网站上检查.
关于Dreamweaver的很酷的事情，您不必去其他地方来弄清楚颜色代码. 只需打开该数字，双击它，然后选择 快速编辑. 它会弹出一个彩色拾取器窗口，您可以从那里进行调整.
我们将我们的事物更改为这样.
当然，您还有一些工作要做. 您需要添加和样式调整内容. 本教程仅给出您可以使用模板进行的基本更改.
完成网站的调整后，您可以将其上传到服务器. 您将在一分钟内学习如何做.
<h2>在手机上预览您的网站</h2>
在移动时代，拥有一个响应式网站是必须的. 否则，您的许多访问者都会放弃该网站. 与Dreamweaver建立网站的一个很酷的功能之一是，您可以立即预览它在移动设备上的外观. 这是关于如何做的Dreamweaver教程：
去 实时预览 在工作空间的右下角. 打开手机上的浏览器并扫描条形码，或者手动键入URL.
重要的! 为此，您必须在Dreamweaver和移动设备上使用相同的Adobe ID. 还使用同一WiFi网络，并启用JavaScript和Cookie.
另外，您可以在Dreamweaver中使用内置的移动视图功能. 前往 Windows大小 菜单并选择您的设备选项.
您应该知道，模板主要是使移动设备友好的. 但是，如果您从头开始构建网站，情况并非如此.
为此，您必须在CSS代码中添加所谓的媒体查询，并相应地调整像素大小和屏幕百分比. 我们已经详细解释了如何创建响应式网站.
<h2>直播您的网站</h2>
构建网站后，您可以直接从Dreamweaver在线发布. 为此，您需要拥有的只是一个活跃的托管计划和FTP帐户. 这是关于如何做的Dreamweaver教程：
建立一个 ftp 与Dreamweaver的联系，去 网站 – >管理站点. 在下面的窗口中，选择您开发的网站，然后单击底部的铅笔图标. 一个新窗口将弹出. 去 服务器.
<h3>1. 创建新的FTP连接</h3>
点击 加 图标 服务器 窗口，它将显示FTP连接表格. 你需要填写.
如果您在Hostinger上，可以在HPANEL上找到FTP的详细信息. 去你 托管帐户 仪表板 -> FTP帐户. 如果您忘记了密码，请随时更改.
<h3>2. 填写连接详细信息</h3>
使用您之前找到的FTP地址，用户名和密码填写表格. 然后单击 测试. Dreamweaver会告诉您连接是否成功. 不要忘记点击 节省.
回到你 文件 面板，现在您可以启动与服务器的真实连接，以及 得到 并放 文件 和同步选项. 从这里，您可以将网站上传到服务器.
<h2>结论</h2>
huft，那是一个漫长的人. 您已经了解了与Dreamweaver创建网站的基础知识.
在此Dreamweaver教程中，您学习了如何从头开始创建站点，以及使用默认模板。预览移动设备并在服务器上发布网站.
<h4>建议阅读</h4>
作者
卢克曼是一个自称的社会科学家. 他对教育，技术以及介于两者之间的一切充满热情. 他想帮助建立高质量的教育系统. 在过去的四年中，他担任了社会研究员和博客大师，他将自己的技能借给了Hostinger的数字内容团队. 在空闲时间里，他喜欢阅读科学（不那么科学）的文学，并用一杯黑色阿拉伯咖啡作为同伴.
<h2>初学者可以使用Dreamweaver</h2>
自动解决方案可帮助您通过建议在输入时提出可能的匹配来快速缩小搜索结果.
显示结果
仅显示|而是搜索
你的意思：
<ul>
<li>全球社区 <ul>
<li>语言： <ul>
<li>德意志</li>
<li>英语</li>
<li>Español</li>
<li>弗朗索瓦人</li>
<li>葡萄牙</li>
</ul>
日本演讲者的专用社区
韩国演讲者的专用社区
<ul>
<li>家</li>
<li>Dreamweaver</li>
<li>讨论</li>
<li>Dreamweaver对初学者有好处?</li>
</ul>
<ul>
<li>家</li>
<li>Dreamweaver</li>
<li>讨论</li>
</ul>
Dreamweaver对初学者有好处?
/t5/dreamweaver-discussions/is-dreamweaver-for-for-for-for-be-for-for-be-for-for-inderners/td-p/11405611 9月2日，2020年9月2日，2020年
复制链接到剪贴板
我叫史蒂文·拉什（Steven Lash）圣地亚哥. 我已经有几年了，现在要重复使用此软件. 任何人都可以建议我最好的方法.
史蒂文·拉什圣地亚哥
社区准则
善良和尊重，归功于原始内容的来源，并在发布之前搜索重复项. 了解更多
3回答3
社区专家 ,
/t5/dreamweaver-discussions/is-dreamweaver-for-for-for-for-for-for-for-for-be-for-for-for-be-for-by-for-for-for-b/11405740＃M202978 9月2日，2020年9月2日，2020年
复制链接到剪贴板
DW假设用户对HTML，CSS和JavaScript具有相当不错的掌握（现在是Bootstrap的Ins and Outs），以充分利用它. 对于初学者来说，这是一个非常困难的计划，学习曲线非常陡峭.
如果您想学习如何制作网站，请不要从“选择软件”开始. 软件只能带您那么远，并且所有可用的东西都受到某种方式有限. 学习HTML及其如何与CSS一起工作将为您提供页面. JavaScript将允许您使页面“做某事”，稍后，一旦所有这些都在您的腰带下，诸如PHP之类的服务器端语言将帮助您创建动态，数据库驱动的网站.
社区准则
善良和尊重，归功于原始内容的来源，并在发布之前搜索重复项. 了解更多
/t5/dreamweaver-discussions/is-dreamweaver-for-for-for-for-for-for-be-for-be-for-be-for-be-for-for-be/11405790＃M202981 9月2日，2020年9月2日，2020年
复制链接到剪贴板
您的目标是什么? 您是否有兴趣从事Web开发职业或只是通过想要创建一个OFF网站而不太关心编码或您使用的软件创建的代码. 您想创建一个简单的静态网站还是使用数据库（Dynamic）的网站. 您是否要专门使用Dreamweaver，因为它可以对您可用，或者您对其他建议开放.
答案将以某种方式缩小最佳选择可能是什么.
社区准则
善良和尊重，归功于原始内容的来源，并在发布之前搜索重复项. 了解更多
社区专家 ,
/t5/dreamweaver-discussions/is-dreamweaver-for-for-for-for-for-for-be-for-be-for-for-for-be-for-by-for-b/11406234＃M205255 9月2日，2020年9月2日，2020年
复制链接到剪贴板
嗨，欢迎史蒂文,
<img src=”https://community.adobe.com/html/@8C49402E7CCBA3E49AAB58383AB509C6/emoticons/1f60d.png” alt=”：smiling_face_with_heart_eyes：” />
是锤子和凿子对初学者有益的? 可能不会. 但是，如果您想成为雕塑家，就必须从某个地方开始，对? 
Dreamweaver只是一个工具. 您使用工具的成功取决于您的技能和练习代码的意愿. 启动绝非易事. 但这可能是非常有益的. 请记住，工具不会构建网站；人们这样做. 因此，在打开Dreamweaver之前就可以学习所有您可以的一切.
阅读章节，完成代码练习，最后进行测验.
<UL>
<li>https：// www.W3Schools.com/html/默认.ASP</li>
<li>https：// www.W3Schools.com/html/html_responsive.ASP</li>
<li>https：// www.W3Schools.com/css/默认.ASP</li>
</UL>
产品用户和社区专家Nancy O’Shea Alt-Web设计与出版〜网络：印刷：图形：媒体
<h2>初学者可以使用Dreamweaver</h2>
Об этой странице
limыыы电函. stourpodin，ччю第. 祸?
listion listimout list. 寻找. 端эээ电电电讯.
Источником запросов может служить вредоносное ПО, подключаемые модули браузера или скрипт, настроенный на автоматических рассылку запросов. e lOmom /щÖ可Öщдоб敦激. 。. подробне. 
μ。执函，极.
<h2>简单的逐步做梦巫师教程 – 2023</h2>
您可以使用许多不同的工具和平台来构建您的网站. 有些比其他人更友好. 但是，无论您的经验水平如何.
如果您从未听说过Dreamweaver，这是Adobe的应用程序，该应用程序允许您设计，构建和部署网站.
即使您以前从未碰过任何代码.
在下面，您将学习如何开始Dreamweaver. 您将了解真正的wreadweaver是什么，什么使它脱颖而出，最后如何使用此工具创建第一个网站并将其上传到服务器.
<h2>什么是Dreamweaver</h2>
Dreamweaver是一个网站构建软件，已经存在了20多年. 它最初是由Macromedia开发的，然后是Adobe于2005年收购的. 该软件已经进行了多次迭代，现在已成为Adobe Creative Cloud Suite的一部分. 这意味着您需要购买每月订阅才能使用该软件.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/dreamweaver-website.png” />
简而言之，Dreamweaver是可让您构建，设计和发布网站的软件. 当您将其安装在PC或Mac上时，这是一个本机应用程序.
这是一个灵活的应用程序，您可以完全通过视觉编辑器或仅通过代码构建网站. 您也可以一起使用两者（只要您知道编码的基础知识），以了解彼此如何影响彼此.
它还支持构建任何类型的网站所需的多种语言，例如HTML，HTML5，CSS，PHP，JavaScript和JQuery. 您可以使用和编辑其他语言中的文件，但是代码支持功能将不可用.
<h3>推荐的网络托管</h3>
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/cloudways-hero.png” />
当涉及到HTML构建网站的网络托管时，Cloudways或Bluehost是您最好的选择.
<h2>Dreamweaver的主要特征</h2>
总体而言，Dreamweaver有助于简化设计和构建网站的过程. 虽然足够灵活地解决了初学者和高级市场.
这是使该工具脱颖而出的主要功能：
<h3>1. 易于使用的视觉接口</h3>
视觉接口编辑器可能是您刚开始时要使用的主要功能. 这类似于其他初学者建筑商在拖放功能方面提供的产品. 除了使用此构建器，您还将选择鼠标的元素.
这使得在创纪录的时间内建立网站的基础变得容易. 当您做这个Dreamweaver时，将自动为您创建必要的代码. 然后，您只需将这些文件上传到服务器，您的网站已准备就绪.
<h3>2. 内置代码编辑器</h3>
除了使用视觉编辑器完全构建网站的能力外，您还可以使用代码编辑器来构建您的网站或更改网站现有设计.
代码编辑器是初学者友好的，并且具有一些有用的功能来帮助您更快地编码并同时了解发生的事情. 这使得初学者可以看到代码和设计如何交互时有用.
当您编写代码时，您也会看到视觉侧面的变化. 因此，您不必预览您的网站即可查看所做的更改. 这一切都会自动发生!
另外，它具有诸如代码完成之类的功能，该功能将根据您当前的设计提出您当前编写的代码的建议. 另外，代码崩溃功能，该功能将在您当前不编辑时会压缩代码的一部分，以便您可以找到更快的速度.
<h3>3. 创意云套房的一部分</h3>
如果您已经熟悉Adobe产品，那么使用Dreamweaver会感到宾至如归. 即使命令将与所说的不同，像Photoshop这样的工具. 布局和界面均呈现一致性.
因此，如果您喜欢Adobe产品，并且已经在其余的创意套件中使用了工具，那么该建筑商可能是一项可靠的投资.
<h2>Adobe Dreamweaver的优缺点</h2>
Dreamweaver为您提供了很多可能性. 在这里分解所有功能几乎是不可能的. 但是，以下是Dreamweaver提供的一些独特优势，以及一些您可能想远离的原因并找到另一个网站构建器.
<h3>Dreamweaver专业人士</h3>
Dreamweaver是一种直观而灵活的工具，可以做很多事情. 以下是该软件可以为您提供的一些最大优势：
设备测试 使用Dreamweaver，您将拥有一个即时预览选项，可让您测试并查看您的网站在任何设备上的外观. 许多其他工具具有此功能. 但是，有了Dreamweaver，只需单击一次即可预览和调整您的网站.
简单的代码错误测试 当您调整代码或从头开始编写代码时，会有随着时间的推移积累的错误. 使用Dreamweaver，您可以快速找到并快速解决这些错误. 您不必猜测和故障排除您的网站错误，而是知道出了什么问题以及如何解决问题.
包括字体选择 设计您的网站可能很有趣. 尤其是当您开始调整诸如颜色，布局，字体选择等内容时. Dreamweaver在软件中构建了大量的字体选择. 这使得可以轻松找到标头和身体文字的完美字体.
捆绑的库存照片 如果您曾经在网上发布任何内容，您知道库存照片搜索可以花费多长时间. 而不是不必浏览各种股票照片网站，您可以在工具中进行此操作. 有很多选择，您可以找到满足您需求的完美照片.
界面个性化 当您第一次开始使用Dreamweaver时，您可能会被所有可用的所有不同工具和选项所淹没. 但是，您实际上可以通过更改首选项来简化网站构建器的外观和使用. 一旦知道自己使用什么和不使用什么，您就可以制作建造者的外观以适应您的需求.
<h3>Dreamweaver Cons</h3>
尽管如此，Dreamweaver并不完美. 如果您不愿意学习该软件的工作原理，那么使用其他解决方案可能会更好. 这是Dreamweaver的一些最大缺点：
陡峭的学习曲线
还有其他网站建设者解决方案，例如Squarespace，Wix和WordPress，这使得构建您的第一个网站变得非常容易. 创建一个基本网站并使用Dreamweaver在线并在线上并不难，但是创建一个可以做您想做的事情的网站将需要一些时间.
由于您从空白帆布开始，最终结果将取决于您自己的创造力和技能. 有些用户更喜欢这种情况，但其他用户则更喜欢一种更简单的解决方案，它绝对不需要编码技能. 您可以使用Dreamweaver做很多事情，许多经验丰富的开发人员更喜欢使用此软件来灵活性.
幸运的是，在线有很多教程，因此您可以快速提高技能. 但是，您需要花费一些时间和主动.
您的网站仅与您的技能一样好
下面您将学习如何创建一个非常简单和基本的网站. 您不需要任何编码技能才能开始. 但是，如果您想创建一个具有许多其他功能的网站，那么您需要对代码进行基本的熟悉和舒适度，以帮助您到达那里.
另外，如果事情破裂，那么您需要知道如何修复它们. 或至少进行故障排除，直到您可以解决问题.
使用Dreamweaver，您只受到对软件的了解和编码能力的限制. 您可以及时提高这些技能. 但是，如果您需要快速在网上获得网站，那么那里有更好的选择.
经常出现的订阅费（在托管之上）
要访问Dreamweaver，您需要支付每月订阅费. 对于那些建立多个网站或热爱软件的人来说，这一成本是不费吹灰之力的. 但是，如果您想在预算上建立一个网站，则可能需要找到更便宜的解决方案.
您不仅需要考虑软件本身的费用，还需要考虑您将支付的托管费用，以及您将支付的年度费用.
<h2>如何使用Dreamweaver从头开始构建网站</h2>
现在您了解了Dreamweaver的主要特征，该向他们展示行动了. 我们不会涵盖以下工具的所有功能，但足以为您提供坚实的基础来工作.
在我们跳入之前，重要的是要注意，如果您不想自己处理网站设计的各个方面，那么建议使用WordPress（例如WordPress）或其他网站构建器（.
话虽这么说，是时候跳入了! 请按照以下步骤创建并发布您的第一个Dreamweaver网站：
<h3>1. 选择您的计划并安装</h3>
您需要做的第一件事是购买和安装Dreamweaver软件. 因此，前往Adobe网站，然后选择适合您的计划.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/choose-your-plan.jpg” alt=”选择您的Dreamweaver计划” width=”842″ height=”489″ />
只是单个应用程序目前将花费您20美元.每月99. 同时，如果您想访问整个Creative Cloud Suite，您将支付$ 52.每月99. 企业，老师和学生也有折扣.
选择订阅后，下载Dreamweaver并按照出现的说明. 这是一个简单的过程，只需单击几下.
另外，如果您不想在大门上支付此软件，则可以选择为期7天的免费试用. 这将为您提供一些时间来使用该软件，以查看它是否适合您.
如果您已经在计算机上安装了Creative Cloud，则将其打开，请选择“应用”，然后从列表中选择Dreamweaver CC. 您可以选择免费试用或立即购买该软件.
<h3>2. 初始设置和演练</h3>
安装Dreamweaver后，软件将自动打开，您会看到一个看起来像下面的屏幕.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/intro-screen-one.jpg” alt=”介绍屏幕” width=”722″ height=”524″ />
接下来，选择说的选项 ‘不，我是新手’, 除非您使用了以下软件. 这将引导您完成设置Dreamweaver工作区的最初过程.
在下一个屏幕上，您可以选择最适合您工作流的选项. 由于这是您第一次使用Dreamweaver，请选择“标准工作区”选项.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/intro-screen-two.jpg” />
这将使您可以使用Visual Editor或代码来构建和自定义您的网站.
接下来，为编辑器选择配色方案. 这并不重要，所以只选择最喜欢的配色方案.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/intro-screen-three.jpg” />
在下一个屏幕上，您可以选择是否要从示例站点，空白模板开始或观看一些教程.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/intro-screen-four.jpg” />
在本教程的这一部分中，我们将使用“使用新文件夹或现有文件夹”，但是如果您选择“使用示例文件”选项，您将拥有一个基本的站点基础，看起来像下图.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/basic-template-view.jpg” />
有些人可能想从基本模板开始，因为它不那么令人生畏. 但是，对于那些想继续从头开始构建网站并学习该工具的来源和外出的人，本教程的这一部分适合您.
如果您想使用一个启动模板来构建您的网站，而不是从头开始创建网站，而是跳到教程的下一部分.
<h3>3. 创建一个新网站</h3>
从头开始构建新网站 网站>新网站. 它应该看起来像下面的屏幕：
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/create-a-new-site.jpg” />
在这里，您需要给您的网站一个名字，并指定保存网站文件的位置. 确保您指定一个文件夹，其中所有网络项目都可以使组织（然后将其上传到您的服务器），这将变得容易得多。.
接下来，您需要创建一个图像文件夹. 此图像文件夹应位于您网站的文件夹中.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/images-folder.jpg” />
单击“高级设置”，然后在选项的下拉列表中选择“本地信息”. 在这里，您将在片刻之前选择您创建的图像文件夹. 然后，单击“保存”，您可以开始构建网站.
<h3>4. 创建您的第一页</h3>
我们要创建的第一页将是您的主页.
要执行此选择文件> new，然后从“文档类型”列表中选择HTML. 然后，命名文件索引.html. 这将有助于您的网站结构正确.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/new-html-page.jpg” />
现在您应该有一个像下图的空白窗口. 这就是您的网站当前的样子! 您还会看到Dreamweaver也创建了一些初始的HTML.
<h3>5. 创建您的网站标题</h3>
我们要做的第一件事就是创建您的网站标题. 这是您网站的最高部分，通常包括您的徽标或网站名称.
要执行此操作，请单击页面的顶部（您还将在底部的“代码”部分中突出显示的元素）.
然后，单击右上角的“插入”，然后选择“标题”选项. 您可能必须向下滚动一点才能找到该选项. 这里的所有选择都是您可以添加到网站的不同的HTML元素.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/site-header-1024×487.jpg” />
这将插入一个标题块中的页面，因此您可以将其自定义为您的喜好.
接下来，我们将向此标头元素添加H1标签. 这对于SEO目的很重要，并让搜索引擎知道您的网站的意义.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/header-to-h1-1024×520.jpg” />
要执行此操作，请在编辑器的“代码”部分中突出显示标题文本. 然后，在下拉框中选择“标题”和H1.
<h3>6. 样式的页面标题</h3>
使用您的标题创建，是时候给它一些样式了. 您可能不想使用基本样式，因为它会使您的网站看起来很古老.
我们将通过CSS进行这些更改. 通常，您网站的所有样式和显示元素都将通过此文件来控制. 它将使您能够做诸如更改字体大小，创建某些站点元素的宽度和尺寸之类的事情，还有更多吨.
我们使用您的CSS文件要做的第一件事就是更改标头的外观. 但是首先，我们需要创建一个CSS文件.
要执行此操作，请单击标头，您会看到标头部分以蓝色突出显示. 单击“+”图标，然后在框中输入#header（这将为您的标题提供一个ID，这将使您可以自定义其外观）.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/header-css-file-1024×585.jpg” />
接下来，选择“创建新CSS文件”选项. 在弹出的框中，选择“浏览”，选择您之前创建的文件夹存储了所有网站的文件，然后将文件命名为“样式”.CSS”，然后单击“确定”.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/create-css-file.jpg” />
此文件是您所有设计更改的地方.
现在，使用您创建的CSS文件，我们将创建一个选择器. 这将使您可以在不更改整个标题的情况下更改标题文本.
导航到DOM编辑器（右下角），然后选择您创建的H1标签. 然后在右上角选择“ CSS设计师”.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/css-designer-select.jpg” />
接下来，单击“选择器”选项，该框应自动填充“ #header H1”. 按“ Enter”，您全部设置.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/css-selector-h1.jpg” />
现在，是时候更改您的字体了. 如果您不在CSS设计师菜单中. 然后有一个小盒子说“表演集”. 取消选中此框，您将解锁一些很酷的自定义选项.
随时可以随心所欲地玩这些选择. 您将能够做一些更改字体，字体样式，文本大小，对齐方式，添加边框等等的事情.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/header-change-font-1024×442.jpg” />
一旦您对标头的外观感到满意，下一步.
您也可以单击“样式”.CSS的文件位于屏幕顶部，以查看代码的外观.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/header-css-code-1024×571.jpg” />
<h3>7. 添加更多内容</h3>
您可能希望您的网站不仅仅是一个庞大的标题. 这是您可以在主页上添加和样式的不同文本元素的方式.
要将文本添加到您的页面上，请单击右上角的“插入”选项卡，然后选择“段落”. 如果您想在每个段落之间休息，则需要添加多个段落.
正如您在下图中注意到的那样，有多个段落，以及无序的列表，也就是子弹点. 如果要在页面中插入有序或无序的列表，请选择“无序列表”选项，然后单击“代码”部分中的标签. 最后，选择“列表项目”部分，并在两个标签之间添加该部分.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/add-site-content-1024×519.jpg” />
最后，我们要去添加一个标题，直到标题下方.
为此找到结尾的代码部分</header> , 然后按Enter并创建一个空间. 接下来，从右上方菜单中选择“标题”，然后从下拉框中选择H2.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/add-a-heading-1024×571.jpg” />
然后，您可以自定义标题文字，但是您认为合适.
<h3>8. 添加图像</h3>
借助您的标题和一些基本内容，是时候在您的网站上添加图像以将其涂抹起来. 幸运的是，使用随附的库存图像工具，找到正确的图像不应该太耗时.
您可以通过单击“ CC库”选项卡并搜索图像来使用内置的库存图库. 或者，您可以找到自己的图像并上传它们.
对于本教程，我们选择了以后的. 如果您正在使用Internet或您自己的收藏集中的图像，请确保将其添加到您之前创建的图像文件夹中. 然后，选择“插入”选项卡，然后选择“图像”.
在这里，您可以在计算机上找到图像，然后按“打开”.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/select-site-image.jpg” />
现在，该软件将自动将图像插入您的页面并添加正确的代码.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/add-image-to-site-1024×680.jpg” />
<h3>9. 预览您的网站</h3>
将网站的第一个版本放在一起后，该看看它的外观. Dreamweaver具有非常有用的内置预览功能. 这将使您在各种网络浏览器和移动设备中查看您的网站的外观.
这可以帮助您在决定进入下一步并将网站上传到服务器之前捕获任何明显的错误. 这也是一个实时预览，因此您对网站的任何更改都会自动显示.
为了预览网站的当前版本，您要做的就是单击右下角的预览按钮. 然后，您可以选择要预览网站的浏览器.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/preview-your-site-1024×370.jpg” />
您还可以通过拍摄QR代码的照片来查看您的网站在手机上的样子.
在决定在线发布之前，请确保查看网站的标准浏览器和移动版本.
一旦您对网站的外观感到满意，然后继续迈出最后一步.
<h3>10. 在线发布您的网站</h3>
借助您的基本网站，该将其上传到服务器的时候了. 这个过程非常简单明了，但是要做到这一点，您需要购买以前购买的托管. 如果您还没有这样做，请花一些时间浏览此列表，并注册您选择的托管提供商.
我们推荐Bluehost或Cloudways.
注册主机后，找到您的FTP信息，因为您需要下一步.
有了这样的照顾，您可以转到将网站上传到服务器的下一步.
要导航到网站>管理站点. 在出现的窗口中选择您的网站，然后单击左下角的铅笔图标.
接下来，在左侧选择“服务器”选项，然后单击“+”图标，这将允许您添加服务器信息.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/add-a-server.jpg” />
此窗口上的所有信息均由您的主机提供，除了“服务器名称”字段，这取决于您. 另外，请确保您包括服务器根目录和URL. 这将使之成为现实.
设置服务器信息后，单击“保存”，然后再次单击“保存”.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/server-information.jpg” />
现在，您要做的就是从左侧菜单上选择要上传的文件，然后单击看起来像右上角的插件的图标.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/connect-to-server.jpg” />
如果您正确输入了服务器信息，则DreamWeaver将连接到您的服务器并将网站的文件上传到指定的位置.
就是这样! 您已经成功创建并上传了您的第一个Dreamweaver网站.
如果您不想完全从头开始创建整个Dreamweaver网站，请继续阅读. 在下面，您将看到如何使用现有模板来简化网站构建过程.
<h2>如何使用Dreamweaver模板构建您的网站</h2>
如果以上所有内容看起来都很不知所措，那么您可能需要从网站模板开始.
通过使用一个预制模板之一，您将为自己一个启动，而不必从头开始创建所有内容，而可以添加或删除任何预构建的元素. 这也为您提供了查看最终设计和代码库的优势. 这可以帮助加快您的教育过程.
要执行此选择文件>新的文件，然后“启动模板”，“基本布局”，最后选择要构建的网站样式. 在这里，我们使用了“基本 – 多列”布局.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/site-template.jpg” />
您会看到此模板为您提供了很多工作.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/dreamweaver-template-1024×603.jpg” />
我们将做一些基本的事情，例如更改网站的名称和标题文字. 为此，我们将遵循类似于上述过程的过程. 要更改标题文本，只需单击标题元素并输入新文本.
更改字体选择
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/change-font-family-header-1024×576.jpg” />
您也可以对其他元素做同样的事情. 例如，您可以更改字体类型和大小. 将图像添加到现有的图像块和更多图像.
但是，在我们让您自定义自己喜欢的模板之前，您可以快速编辑标头背景的颜色.
您可以使用上述方法使用“ CSS设计师”选项调整颜色. 或者，您可以直接进入CSS文件.
为此，请注意此元素的DIV类，即“ primary_header”. 接下来，单击“多列板”.CSS的文件在页面顶部.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/locate-primary-header-element-1024×729.jpg” />
在这里找到“.primary_header”元素.
<img src=”https://makeawebsitehub.com/wp-content/uploads/2018/09/change-header-background-color-1024×706.jpg” />
当然，当您使用模板工作时，您可以做更多的事情，但是希望上面的变化可以让您了解您可以做什么.
对网站模板进行了必要的更改后，该将站点推向服务器的时候了. 只需遵循与上述步骤9和10的相同过程.
<h2>结束</h2>
如您所见，Dreamweaver是一个非常灵活的网站构建器. 借助易于使用用户界面和内置代码编辑器，您可以构建您想要的任何类型的网站. 由于这是一种通用的工具，因此一直是初学者使用的，一直到高级Web开发人员.
在上面，您学会了如何掌握Dreamweaver的基础知识并在线获取您的第一个网站. 在一篇博客文章中，几乎不可能涵盖Dreamweaver的各个方面，但是一旦您了解了基础知识，就可以继续您的教育. 如果您想进一步探索，Adobe网站上有一个大量的视频教程库，您可以探索.
但是，请记住，Dreamweaver并不是您可以用来建立网站的唯一工具. 实际上，存在使用WordPress并自定义初学者主题的更简单的方法.
但是，如果您确实决定使用Dreamweaver构建网站，希望您能有能力使您的网站启动并在尽可能少的时间内运行.
现在给你. 您是否使用Dreamweaver建立了您的网站? 您可以添加的任何很酷的技巧或骇客? 请在下面的评论中分享.
还可以查看我的Dreamweaver键盘快捷键，以加快您的网络构建任务.
<ul>
<li>生物</li>
<li>最新帖子</li>
</ul>
<h4>杰米·斯宾塞（Jamie Spencer）</h4>
我叫杰米·斯宾塞（Jamie Spencer）. 在厌倦了9-5的通勤且从未见过我的家人之后，我决定要进行一些更改并启动我的第一个博客. 从那以后，我推出了许多成功的利基博客，在出售了我的生存主义博客之后，我决定教别人如何做同样的事情.