Dreamweaver 基础教程：从入门到创建你的第一个网页
第一部分：认识 Dreamweaver
Dreamweaver 是由 Adobe 公司开发的一款专业级网页设计和开发工具，它最大的特点是提供了 “实时视图” 和 “代码视图”，让你既能像使用 Word 一样可视化地设计网页，又能直接编写和修改代码，非常适合初学者入门和专业人士高效工作。
（图片来源网络，侵删）
第二部分：界面概览
启动 Dreamweaver 后，你会看到一个复杂的界面，别担心，我们先认识几个最重要的区域：
- 菜单栏：包含所有命令，如文件、编辑、查看、插入等。
- 工具栏：提供常用操作的快捷按钮，如保存、预览、切换视图等。
- 文件面板：通常位于右侧，用于管理你网站的所有文件和文件夹，就像 Windows 的资源管理器一样。
- 插入面板：包含各种可以插入到网页中的元素，如文本、图片、链接、表格等。
- 属性检查器：通常位于右下角，当选中页面上的某个元素（如一张图片或一段文字）时，这里会显示该元素的属性，并允许你直接修改，这是最常用的面板之一！
- 文档窗口：这是你设计和编辑网页的主区域，它有三种视图模式：
- 代码视图：显示和编辑 HTML、CSS、JavaScript 等源代码。
- 设计视图：一个所见即所得的编辑器，你可以直接在上面拖拽元素（注意：现代网页设计更推荐使用实时视图）。
- 实时视图：强烈推荐初学者使用！ 它能准确地渲染你的网页，同时允许你选中元素并在右侧的属性检查器中修改样式，是学习 CSS 的最佳方式。
第三部分：创建你的第一个网站项目
在开始制作网页前,最重要的一步是 “定义站点”，这相当于告诉 Dreamweaver 你所有网页文件的家在哪里，方便它管理文件路径和进行预览。
-
新建站点
- 点击菜单栏的
站点->新建站点。 - 在弹出的窗口中,切换到
站点选项卡。 - 站点名称：给你的项目起个名字，我的第一个网站”。
- 本地站点文件夹：点击文件夹图标，选择一个你电脑上的空文件夹作为网站根目录，在桌面创建一个名为
my-first-website的文件夹。 - 点击
保存。
- 点击菜单栏的
-
认识文件面板
（图片来源网络，侵删）- 右侧的“文件”面板应该显示了你刚刚创建的站点。
- 你可以创建新的文件夹（如
images用来放图片）和新的 HTML 文件。
第四部分：创建和保存你的第一个网页
-
新建 HTML 文件
- 在文件面板中,右键点击站点根目录 ->
新建文件。 - 将这个文件重命名为
index.html。注意： 首页文件通常命名为index.html。
- 在文件面板中,右键点击站点根目录 ->
-
设置页面标题
- 在文档窗口上方的“标题”输入框中，输入“欢迎来到我的网站”。
- 会显示在浏览器标签页上,非常重要。
-
保存文件
- 按
Ctrl + S(Windows) 或Cmd + S(Mac) 保存文件。
- 按
第五部分：添加网页内容
我们可以在 index.html 中添加内容了，我们切换到 实时视图，这样最直观。
（图片来源网络，侵删）
-
添加文本
- 直接在实时视图中点击,然后输入文字，“你好，世界！”。
- 选中文字,在 属性检查器 中可以修改字体、大小、颜色、对齐方式等。
-
插入图片
- 准备一张图片,
logo.png，把它拖放到你站点根目录下的images文件夹里。 - 将光标放在你想插入图片的位置。
- 点击菜单栏的
插入->图像，或者从“插入”面板中找到“图像”图标。 - 在弹出的窗口中,选择
images文件夹下的logo.png，点击“确定”。 - 选中插入的图片,在 属性检查器 中可以修改图片的宽度和高度、添加替换文本（对搜索引擎和屏幕阅读器很重要）、设置边框等。
- 准备一张图片,
-
创建超链接
- 选中一段文字或一张图片。
- 在 属性检查器 的“链接”输入框中，输入一个网址，
https://www.google.com。 - 在“目标”下拉菜单中，选择
_blank，这样点击链接时会在一个新标签页中打开。
第六部分：使用 CSS 美化网页（基础）
CSS (层叠样式表) 负责网页的“外观”，我们学习最基础的内联样式。
-
给文字添加颜色
- 在实时视图中选中一段文字。
- 在 属性检查器 中，找到“格式设置”或直接找到“CSS”选项卡。
- 点击“文本颜色”的小色块，选择一个你喜欢的颜色。
- Dreamweaver 会在代码中自动为你添加
<span style="color: #your-color-code;">这样的代码，这就是内联 CSS。
-
创建一个简单的 CSS 类
- 我们想给某个段落添加一个特殊的样式,比如红色文字和粗体。
- 在实时视图中选中那个段落。
- 在 属性检查器 的“类”下拉菜单中，选择“管理类” ->
新建。 - 在弹出的窗口中：
- 名称：输入一个有意义的名字，
.highlight（注意，类名通常以点 开头）。 - 规则定义：选择“仅限此文档”。
- 点击“确定”。
- 名称：输入一个有意义的名字，
- 在“CSS 设计器”面板（通常在右侧）中，会多出一个
.highlight的规则。 - 你可以设置
color（颜色）为红色，font-weight（字体粗细）为bold。 - 任何你想要应用这个样式的文字,只需选中它，然后在“类”下拉菜单中选择
highlight即可。
第七部分：预览和发布你的网站
-
本地预览
- 按
F12键，Dreamweaver 会用你的默认浏览器打开index.html文件。 - 你可以检查网页效果是否和预期一致。
- 按
-
上传到服务器（发布）
- 这一步需要你有一个虚拟主机（服务器空间）和 FTP 信息。
- 在“文件”面板中，点击右上角的“连接”按钮（看起来像一个插头）。
- 选择
站点->管理站点。 - 选择你的站点,点击“编辑”。
- 切换到
服务器选项卡，点击 号添加一个新的服务器。 - 填入你的 FTP 主机地址、用户名、密码等信息。
- 保存设置后,在文件面板中连接到服务器，然后就可以像在本地一样，将文件拖拽上传到服务器上了。
总结与进阶
恭喜你！你已经完成了 Dreamweaver 的基础入门，掌握了创建站点、添加内容、使用 CSS 美化和预览发布的基本流程。
接下来的学习方向：
- 深入学习 HTML 和 CSS：Dreamweaver 只是工具，核心是 HTML（网页结构）和 CSS（网页样式），建议找一些系统的教程学习它们。
- 使用“CSS 设计器”面板：尝试使用这个可视化面板来创建和管理 CSS 规则，它比手写代码更直观。
- 响应式设计：学习如何使用 Dreamweaver 的“媒体查询”功能，让你的网页能适应手机、平板和电脑等不同尺寸的屏幕。
- 模板和库：学习如何创建可重复使用的模板，以提高开发大型网站的效率。
Dreamweaver 是一个功能强大的工具，多加练习，你很快就能用它创建出漂亮的网站！
