Dreamweaver CS5 教程：从零开始创建你的第一个网站
第一部分：准备工作与界面初识
在开始之前，请确保你已经安装好了 Adobe Dreamweaver CS5 软件。
（图片来源网络，侵删）
启动 Dreamweaver CS5
打开软件后，首先会弹出一个 “欢迎屏幕” (Welcome Screen),这个屏幕提供了几个快速选项：
- 新建: 创建一个新的 HTML、CSS、PHP 等文件。
- 主要功能: 打开最近使用的文件、从模板创建文件等。
- 教程: 提供一些内置的教程链接。
- 新建项目: 创建一个完整的网站项目。
对于初学者，我们选择 “新建”，然后选择 “HTML”，点击 “创建”,这将打开一个空白的新文档。
熟悉工作区界面
Dreamweaver CS5 的工作区非常灵活，你可以根据习惯调整布局，默认情况下,你会看到以下几个核心面板：
- 菜单栏: 位于顶部，包含所有命令，如“文件”、“编辑”、“插入”、“修改”等。
- 插入栏: 位于菜单栏下方，提供了各种元素的快捷插入按钮，如“常用”、“布局”、“表单”等。
- 文档工具栏: 位于文档窗口的顶部，包含视图切换按钮（代码、设计、实时视图）、标题设置、文件管理等功能。
- 文档窗口: 中间最大的区域,就是你正在编辑的网页内容。
- 面板组: 位于右侧和左侧，是 Dreamweaver 的核心控制区。
- 文件: 管理你网站的所有文件和文件夹。
- 属性检查器: 选中页面上的任何元素（如文字、图片、表格）,这里就会显示并允许你修改其属性。
- CSS 样式: 创建和管理 CSS 样式表,是美化的核心。
- 应用程序: 如果你使用动态语言（如 PHP）,这个面板会很有用。
第二部分：创建和管理你的第一个网站
在开始制作网页前，最好先定义一个“站点”，站点是一个 Dreamweaver 的管理概念，它会帮你管理所有相关文件的链接,避免链接错误。
（图片来源网络，侵删）
定义站点
- 点击菜单栏的 “站点” -> “新建站点”。
- 在弹出的对话框中，切换到 “高级” 选项卡（经典设置）。
- 本地信息:
- 站点名称: 给你的网站起个名字，我的第一个网站”。
- 本地根文件夹: 点击文件夹图标，选择一个你电脑上的空文件夹作为网站存放的根目录。（非常重要！） 你可以创建一个名为
MyFirstWebsite的文件夹。 - 默认图像文件夹: 可以不填，或者指定一个存放图片的子文件夹，
images。 - 链接相对于: 选择 “文档”，这是最安全的选择,可以保证文件移动后链接不会断。
- 点击 “确定”。
你的站点就定义好了，在右侧的 “文件” 面板中,你应该能看到你刚才设置的本地根文件夹。
创建站点首页
- 在 “文件” 面板中,右键点击你的站点根文件夹。
- 选择 “新建文件”。
- 将这个新文件命名为
index.html。注意： 网站首页必须命名为index.html(或index.htm,index.php等)。
第三部分：使用“设计”视图编辑网页内容
我们来编辑 index.html 文件，Dreamweaver 提供了多种视图，我们先使用最直观的 “设计” 视图。
- 在 文档工具栏 的 输入框中，输入你的网页标题，欢迎来到我的个人主页”,这个标题会显示在浏览器标签页上。
添加文本
-
直接在文档窗口中点击,然后输入文字。
你好，世界！ 这是我的第一个网页。
（图片来源网络，侵删） -
选中文字，在 “属性检查器” 中,你可以修改：
- 格式: 选择标题格式，如“标题 1”、“标题 2”。
- 字体: 选择字体。
- 大小: 选择字号。
- 颜色: 选择文字颜色。
- 粗体、斜体 等。
插入图片
- 在你的网站根文件夹下创建一个名为
images的文件夹，并放入一张你喜欢的图片（photo.jpg）。 - 将光标放在你想插入图片的位置。
- 点击 插入栏 的 “常用” 选项卡，然后点击 “图像” 图标。
- 在弹出的对话框中，选择你刚刚放入
images文件夹中的photo.jpg。 - 点击 “确定”,图片就被插入到页面中了。
- 选中图片，在 “属性检查器” 中，你可以修改图片的宽高、对齐方式等。
创建超链接
- 选中你想要做成链接的文字，点击这里访问我的博客”。
- 在 “属性检查器” 的 “链接” 输入框中，输入一个网址，
http://www.google.com。 - 你还可以在 “目标” 下拉菜单中选择
_blank,这样点击链接时会在一个新窗口中打开。
第四部分：使用“代码”视图和“实时视图”
切换视图
- 代码视图: 显示当前页面的纯 HTML、CSS、JavaScript 代码，你可以直接在这里编辑代码,适合有一定基础的用户。
- 设计视图: 所见即所得的编辑模式,适合初学者。
- 实时视图: 一个非编辑的可视化预览，效果和在浏览器中看到的一样，它比“设计”视图更准确地渲染页面。
你可以通过 文档工具栏 上的按钮在这三种视图之间切换。
简单了解代码
切换到 “代码” 视图,你会看到类似下面的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />欢迎来到我的个人主页</title>
</head>
<body>
<h1>你好，世界！</h1>
<p>这是我的第一个网页。</p>
<p><img src="images/photo.jpg" width="200" /></p>
<p><a href="http://www.google.com" target="_blank">点击这里访问我的博客</a></p>
</body>
</html>
<head>: 包含网页的元信息，如标题、字符编码、引入的 CSS 文件等。<body>: 包含网页的所有可见内容，如文字、图片、链接等。
虽然你现在不需要完全理解,但了解一下基本结构有助于你以后深入学习。
第五部分：使用 CSS 美化网页
使用内联样式（在属性检查器里设置）不是好习惯，最好的方法是使用 CSS (层叠样式表) 来统一控制网页的样式。
创建一个外部 CSS 文件
- 在 “文件” 面板中,右键点击你的站点根文件夹。
- 选择 “新建文件”。
- 将文件命名为
style.css。
链接 CSS 文件
- 打开你的
index.html文件。 - 切换到 “代码” 视图。
- 在
<head>标签内，添加以下代码：<link href="style.css" rel="stylesheet" type="text/css" />
- 保存
index.html文件。
使用“CSS 样式”面板添加样式
- 确保
index.html是当前编辑的文件。 - 打开右侧的 “CSS 样式” 面板。
- 点击面板下方的 “附加样式表” 按钮。
- 在弹出的对话框中，选择你刚刚创建的
style.css文件，点击 “确定”。
style.css
