Dreamweaver CS5 完全新手指南：从零开始搭建你的第一个网站（附详细教程）
** 还在为复杂的代码头疼吗？Dreamweaver CS5 作为一款经典的网页设计与开发工具，以其“所见即所得”的可视化界面和强大的代码提示功能，曾是无数网页新手的启蒙老师，本文将为你提供一份详尽的 Dreamweaver CS5 新手教程，带你一步步掌握这款工具，从创建项目到上传网站，全程手把手教学,让你轻松开启网页设计之旅。
前言：为什么我们还在学习 Dreamweaver CS5？
在如今 Vue、React 框架和 VS Code 编辑器大行其道的时代，为什么还要提起一款“古老”的 Dreamweaver CS5？
答案很简单：它依然是入门网页设计最直观、最友好的工具之一。
对于初学者而言，直接面对一行行 HTML、CSS 代码无疑是劝退的，而 Dreamweaver CS5 提供了独特的 “设计视图” 和 “代码视图” 同步功能，让你在拖拽元素的同时，能实时看到对应的代码是如何生成的，这种“学习-实践-反馈”的闭环,是建立编程信心的绝佳方式。
本教程将带你重温经典，用最简单的方式,理解网页制作的核心逻辑。
准备工作：安装与启动你的 Dreamweaver CS5
在开始之前，请确保你已经成功安装了 Dreamweaver CS5 软件，安装完成后，启动它,你将看到一个简洁的欢迎界面。
- 新建项目： 点击“新建” -> “HTML”，创建一个空白 HTML 页面。
- 工作区布局： 建议初学者选择“设计器”布局，这个布局包含了我们最常用的面板：文件、插入、属性 和 CSS 样式。
第一步：创建你的第一个本地站点
“站点”是 Dreamweaver 的核心概念，它不是指一个已经上传到网上的网站，而是指在你的电脑上，用来存放网站所有文件（HTML、图片、CSS 等）的一个文件夹，创建站点能让你更好地管理文件,并方便地进行预览和上传。
- 在菜单栏中，选择 “站点” -> “新建站点”。
- 在弹出的对话框中，切换到 “高级” 选项卡（更直观）。
- 站点名称： 给你的网站起个名字，我的第一个网站”。
- 本地根文件夹： 点击文件夹图标，选择一个你电脑上的空文件夹，作为网站的根目录。（重要：请确保这个文件夹路径不包含中文或特殊符号）
- 默认图像文件夹：可以指定一个存放图片的子文件夹，
images。 - 点击“确定”,你的第一个本地站点就创建成功了！
第二步：页面结构搭建——认识 HTML 骨架
一个网页就像人体，有骨架（HTML）和皮囊（CSS）,我们先来搭建骨架。
-
在 “文件” 面板中，右键点击你的站点名称，选择 “新建文件”，将其命名为
index.html,这是网站的首页。
（图片来源网络，侵删） -
打开
index.html，你会看到 Dreamweaver 已经自动生成了基本的 HTML5 结构代码：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无标题文档</title> </head> <body> </body> </html><head>：存放页面的“元信息”，比如标题、字符编码、引入的 CSS 文件等。<body>：存放所有在浏览器中可见的内容，比如文字、图片、链接等。
-
在
<title>标签中修改页面标题，欢迎来到我的个人网站”。
第三步：添加内容与样式——从“设计视图”到“代码视图”
让我们在页面上添加一些内容。
-
添加文字：
- 将光标定位在 “设计视图” 的
<body>区域内。 - 直接输入文字，“你好，世界！这是我的第一个网页。”
- 切换到 “代码视图”，你会发现
<body>标签内自动多了一对<p>标签，这就是段落标签。<p>你好，世界！这是我的第一个网页。</p>
- 将光标定位在 “设计视图” 的
-
- 回到“设计视图”,选中你刚才输入的文字。
- 在 “属性” 面板中，将“格式”从“段落”改为“标题 1”，H1 是最重要的标题。
- 再次查看“代码视图”，
<p>标签变成了<h1>
-
添加图片：
- 在你的站点根文件夹下，新建一个名为
images的文件夹，并放入一张名为logo.png的图片。 - 在“设计视图”中,将光标放在你希望图片出现的位置。
- 打开 “插入” 面板，切换到“常用”类别，点击“图像”图标。
- 在弹出的对话框中，选择你刚刚放入的
logo.png图片，点击“确定”。 - 在“属性”面板中，你可以调整图片的宽高、对齐方式等。
- 在你的站点根文件夹下，新建一个名为
通过这个过程，你应该深刻理解了 Dreamweaver 的核心优势：可视化操作与代码的实时同步，你在设计视图做的任何操作，都会在代码视图中体现为标准的 HTML 代码。
第四步：美化页面——CSS 样式的入门
但看起来很朴素，我们用 CSS 来美化它。
-
创建 CSS 文件：
- 在 “文件” 面板中，右键点击站点，选择 “新建” -> “CSS 样式表”。
- 将文件命名为
style.css,并保存在站点根目录下。
-
链接 CSS 文件：
- 打开
index.html，切换到 “代码视图”。 - 在
<head>标签内部，添加以下代码来链接你的 CSS 文件：
<link rel="stylesheet" type="text/css" href="style.css" />
- 打开
-
使用 CSS 设计器面板：
- 打开
index.html，确保你处于“设计视图”。 - 在右侧的 “CSS 样式” 面板中，点击“附加样式表”按钮（像一个链条的图标）。
- 选择你刚刚创建的
style.css文件，点击“确定”。
- 打开
-
应用样式：
- 回到“设计视图”，选中你的
<h1>标题文字。 - 在 “CSS 样式” 面板中，点击“新建 CSS 规则”按钮。
- 在弹出的窗口中：
- 选择器类型： 选择“类”。
- 选择器名称： 输入
.my-title（注意类名前有一个点 ）。 - 规则定义： 选择“仅限该文档”。
- 点击“确定”，会弹出“CSS 规则定义”窗口，在这里你可以设置各种样式：
- 类型： 修改字体、大小、颜色、粗细。
- 背景： 设置背景颜色或图片。
- 区块： 设置文本对齐、行高。
- 方框： 设置外边距、内边距、宽高。
- 文字颜色改为蓝色，字体大小改为 36px。
- 设置好后，点击“确定”,你会发现标题样式立刻改变了。
- 回到“设计视图”，点击你的标题，在“属性”面板的“类”下拉菜单中，你就可以选择
.my-title来应用这个样式了。
- 回到“设计视图”，选中你的
第五步：预览与本地测试
一切就绪,让我们看看成果！
- 快捷键预览： 按
F12键，Dreamweaver 会自动调用你默认的浏览器来打开index.html。 - 检查效果： 在浏览器中，检查文字、图片、样式是否都显示正确,这是开发中至关重要的一步。
第六步：如何让你的网站上线（上传到服务器）
当你的网站在本地测试无误后，就可以上传到互联网上了，这需要 FTP（文件传输协议）
