Dreamweaver如何快速上手HTML？-贝博恩创新科技网

Dreamweaver HTML 教程：从零开始创建你的第一个网站

第一部分：准备工作与界面概览

在开始之前,请确保你已经安装了 Adobe Dreamweaver，如果你还没有安装，可以从 Adobe 官网下载并安装试用版。

（图片来源网络，侵删）

启动 Dreamweaver 并创建新项目

打开 Dreamweaver，你会看到一个欢迎屏幕。
点击 “新建” -> “网站”，这会打开一个向导，帮助我们正确地设置项目。
在弹出的对话框中,选择 “基本” 选项卡，然后点击 “下一步”。
（图片来源网络，侵删）

定义站点信息

站点名称: 给你的网站起一个名字，我的第一个网站”，这个名字只在 Dreamweaver 内部使用，不会显示在网站上。
本地根文件夹: 这是最重要的一步！点击文件夹图标，选择一个你电脑上的空文件夹作为网站的根目录，创建一个名为 my-first-website 的文件夹，并选择它，Dreamweaver 会将你所有的网站文件都保存在这个文件夹里。
点击 “下一步”。

连接到远程服务器（可选）

如果你只是想在本地电脑上学习和测试,选择 “无” 即可，如果你想以后将网站上传到网络服务器（如阿里云、腾讯云等），可以在这里设置，但现在我们先跳过。点击 “下一步”。

查看总结信息

（图片来源网络，侵删）

确认信息无误后,点击 “完成”。

你的 Dreamweaver 界面已经准备好创建网页了。

第二部分：熟悉 Dreamweaver 的“三视图”工作区

Dreamweaver 最核心的功能就是它提供的三种视图模式，让你可以灵活地在代码和可视化设计之间切换。

代码视图: 显示完整的 HTML、CSS、JavaScript 代码，适合高级用户进行精细的代码编辑。
拆分视图: 这是初学者最推荐的视图！ 它将窗口分为上下两部分，上面是代码，下面是实时预览，这样你可以在修改代码的同时，立刻看到效果，非常适合学习和理解代码是如何工作的。
设计视图: 一个所见即所得的可视化编辑器，你可以像在 Word 里一样直接拖拽元素来设计页面，但对于初学者来说，过度依赖设计视图可能会让你忽略代码的本质，所以我们主要使用“拆分视图”。

如何切换视图：点击 Dreamweaver 顶部工具栏中的 “代码”、“拆分” 或 “设计” 按钮即可。

第三部分：创建你的第一个 HTML 页面

创建新 HTML 文件

在右侧的 “文件” 面板中，找到你刚刚创建的站点文件夹（my-first-website）。
右键点击该文件夹,选择 “新建文件”。
将这个新文件命名为 index.html。注意：index.html 是网站的默认首页，当访问者输入你的网站地址时，服务器会自动寻找这个文件。

编辑页面内容

确保你处于 “拆分视图”。

设置页面标题:
- 在代码视图中,找到 <title> 和 </title>
- 将它们之间的文字修改为“欢迎来到我的网站”。



添加主要内容:

在 <body> 和 </body> 标签之间，输入以下内容：

<h1>你好，Dreamweaver！</h1>
<p>这是我的第一个网页，我是一个段落，用于展示一些简单的文本。</p>


预览你的网页

按快捷键 F12，或者在菜单栏选择 “文件” -> “在浏览器中预览” -> “预览在 [你的默认浏览器]”。
你的浏览器会打开,显示你刚刚创建的网页，你应该能看到一个“你好，Dreamweaver！”的大标题和一个段落。

恭喜！你已经成功创建了你的第一个网页！

第四部分：常用工具与功能详解
“插入”面板
这个面板通常位于界面的右侧,是可视化设计的核心，它提供了各种 HTML 元素的快速插入按钮。

常用元素:
文本: 可以设置标题（H1-H6）、段落、列表等。
表格: 用于展示结构化数据。
图像: 点击后可以选择本地图片插入，Dreamweaver 会自动生成 <img>
Hyperlink (超链接): 选中一段文字或一张图片，点击此按钮，可以链接到其他页面、网站或邮箱。

Div Tags: 用于创建页面布局的容器块。



示例：插入一张图片

将光标放在 <body> 标签内。
在“插入”面板中，点击 “图像” 图标。
选择一张你准备好的图片（logo.png），并确保它也保存在你的 my-first-website 文件夹中。
Dreamweaver 会弹出对话框，你可以为图片添加替代文本（Alt Text），这对于网站的可访问性非常重要，填入后点击“确定”。

“属性”检查器
这个面板通常在界面的下方,是 Dreamweaver 的“控制中心”，当你选中页面上的任何一个元素（如图片、文字、Div）时，“属性”检查器就会显示该元素的所有可编辑属性。

示例：修改图片属性
在设计视图中,点击你刚刚插入的图片。
在下方的“属性”检查器中，你可以：
修改图片源: 点击“文件夹”图标，更换另一张图片。
修改宽度和高度: 直接输入数值调整图片大小。
添加边框: 在“边框”输入框中输入一个数值，给图片加上边框。
对齐方式: 设置图片与周围文字的对齐方式（左对齐、右对齐等）。





“CSS 设计器”面板
CSS (层叠样式表) 用于控制网页的样式，比如颜色、字体、布局等。“CSS 设计器”是 Dreamweaver 强大的可视化 CSS 编辑工具。

示例：给标题添加颜色
在设计视图中,选中 <h1>
打开右侧的 “CSS 设计器” 面板。

在 “选择器” 部分，会自动显示 h1。
在 “属性” 部分，找到 “颜色” 选项，点击色块，选择一个你喜欢的颜色。
回到代码视图,你会发现在 <head> 标签里，Dreamweaver 自动为你生成了 CSS 代码，<h1> 的文字颜色也变成了你选择的颜色。




第五部分：进阶技巧与最佳实践


使用“实时视图”:
在“拆分视图”中，设计视图区域旁边有一个 “实时视图” 按钮，点击它可以进入一个更接近真实浏览器的预览模式，并且可以在此模式下进行交互测试，比如点击链接、填写表单等。


管理资源:
在 “文件” 面板中，你可以清晰地看到网站的所有文件和文件夹，养成良好习惯，将图片、CSS 文件、JavaScript 文件分别放在不同的文件夹中（如 images, css, js），这样网站结构会更清晰。


代码提示与自动补全:
Dreamweaver 的代码编辑器非常智能，当你输入 HTML 标签时，它会自动为你闭合标签（输入 <p> 会自动生成 </p>），当你输入 CSS 属性时，它也会提供代码提示，大大提高了编码效率。


使用模板（可选）:
如果网站的多个页面有相同的头部和底部（比如导航栏和页脚），你可以创建一个模板，修改模板后，所有基于该模板的页面都会自动更新，这能极大地提高维护效率。



第六部分：总结与后续学习
通过本教程,你已经掌握了：

如何在 Dreamweaver 中创建和管理一个站点。
如何使用“拆分视图”进行高效的网页编辑。
如何创建基本的 HTML 结构（标题、段落、图片、链接）。
如何使用“属性”检查器和“CSS 设计器”来美化页面。

下一步可以学习什么？

深入学习 HTML: 学习更多标签，如 <div>, <span>, <ul>, <ol>, <table> 等，以及它们的作用。
精通 CSS: 学习盒模型、定位、浮动、Flexbox 和 Grid 等高级布局技术，这是网页设计的核心。
响应式设计: 学习如何使用媒体查询，让你的网站在不同尺寸的设备（手机、平板、电脑）上都能良好显示。
JavaScript 基础: 学习如何为网页添加交互功能，如表单验证、动态内容等。

Dreamweaver 是一个功能强大的工具，但它只是一个辅助，真正让你成为优秀开发者的，是对 HTML、CSS 和 JavaScript 的深刻理解，多练习，多看代码，你很快就能熟练掌握它！