DW如何制作自己网站？新手必看步骤？-菜鸟科技网

第一步：准备工作（心态和工具）

心态调整：DW 是一个工具，它不能“一键生成”一个完美的网站，它需要你投入时间和精力去学习、设计和填充内容，把它想象成一个强大的画布和画笔，而不是一个魔法棒。
软件安装：确保你已经安装了 Adobe Dreamweaver，如果是试用版，请注意时间限制。
网站规划：在打开 DW 之前，先在脑子里或纸上规划好你的网站：
- 网站主题：是个人博客、作品集、公司官网还是其他？
- 主要页面：首页、关于我、联系方式、文章列表等。
- 你打算放哪些文字、图片、视频？
- 风格：你希望网站是什么感觉？（简洁、活泼、专业等）

第二步：创建和管理本地站点

这是最关键的一步！在 DW 中，所有工作都应该在“站点”中进行，这能 DW 管理你的所有文件、图片和链接，避免很多错误。

（图片来源网络，侵删）

打开站点管理器：
- 启动 Dreamweaver。
- 在顶部菜单栏选择 站点 -> 新建站点...。
设置站点名称：
- 在弹出的窗口中,输入你的网站名称，我的第一个网站”，这个名字只是你在 DW 内部识别用的，不会显示在浏览器里。
- 点击“高级设置”旁边的箭头，展开更多选项。
指定本地站点文件夹：
- 在“高级设置”中，选择“本地站点文件夹”。
- 点击文件夹图标,在电脑上选择一个空文件夹作为你的网站根目录。强烈建议不要使用中文或特殊符号命名这个文件夹，D:\MyWebsite 或 C:\Users\YourName\Documents\MySite。
- 点击“选择”。
连接到服务器（可选，初学者可跳过）：
（图片来源网络，侵删）
- 如果你现在只是想在本地制作和预览网站,可以跳过服务器设置，等网站制作完成，需要上传到网络时，再回来设置 FTP 或其他服务器信息。
- 点击“保存”。

DW 的右侧会出现一个 “文件” 面板，这里就是你网站的资源管理器，你所有的 HTML、CSS、图片等文件都应该放在这里。

第三步：创建网站的基本结构

一个标准的网站至少需要三个文件：index.html (首页)、style.css (样式表) 和一个文件夹 images (存放图片)。

创建首页 index.html：
- 在右侧的“文件”面板中，右键点击空白处。
- 选择 新建 -> HTML。
- DW 会自动创建一个 index.html 文件，并打开它，这个文件名是默认的，当用户访问你的域名时，服务器会自动寻找并打开这个文件。
创建样式表 style.css：
（图片来源网络，侵删）
- 同样在“文件”面板中，右键点击空白处。
- 选择 新建 -> CSS。
- 文件命名为 style.css，然后按回车。
- DW 会自动将这个 CSS 文件链接到你的 index.html 中，你可以打开 index.html 的代码视图，在 <head> 标签里看到类似 <link rel="stylesheet" href="style.css"> 的代码。
创建图片文件夹 images：
- 在“文件”面板中，右键点击空白处。
- 选择 新建 -> 文件夹。
- 将文件夹命名为 images。
将图片放入文件夹：
- 将你网站需要用到的所有图片复制到刚刚创建的 images 文件夹中，这样组织文件，方便管理和上传。

第四步：开始设计和编辑页面

现在你可以开始制作首页了,DW 提供了多种视图，你可以根据自己的习惯选择。

可视化设计（推荐新手）

切换到实时视图：
- 在 DW 的顶部工具栏，确保你选择的是 “实时视图”，这就像一个所见即所得的编辑器。
使用“插入”面板：
- 在右侧,找到“插入”面板，你可以在这里拖拽各种元素到页面上，如：
  - 布局：可以插入 div 容器、表格等。div 是最常用的布局容器。
  - 常用：可以插入图片、表格、水平线等。
  - 文本：可以插入标题、段落、列表等。
：
- 直接点击页面上的文字进行修改,就像在 Word 里一样。
- 点击“插入”面板中的“图像”图标，选择 images 文件夹里的图片即可插入。

直接编写代码（推荐进阶）

切换到代码视图：
- 点击顶部的 “代码” 视图，你会看到 HTML 和 CSS 代码。
- DW 有非常强大的代码提示功能，当你输入 < 时，它会提示可用的标签；输入 CSS 属性时，也会给出建议。

编写 HTML 结构：

一个基本的 HTML 结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的网站首页</title>
<!-- 这里链接了你的CSS文件 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
    <h1>欢迎来到我的网站</h1>
</header>
<main>
    <p>这是我的第一段文字。</p>
    <img src="images/my-photo.jpg" alt="我的照片">
</main>
<footer>
    <p>&copy; 2025 我的所有权利</p>
</footer>
</body>
</html>

你可以直接在这里修改代码。

编写 CSS 样式：

切换到 style.css 文件（可以在“文件”面板中点击）。

为 HTML 元素添加样式，让页面变好看：

body {
font-family: "Microsoft YaHei", sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
main {
background-color: white;
padding: 20px;
border-radius: 5px;
}
img {
max-width: 100%; /* 让图片自适应宽度 */
height: auto;
}
footer {
text-align: center;
margin-top: 20px;
color: #777;
}

最佳实践——实时视图 + 代码视图

这是最推荐的方式！

在 “实时视图” 中拖拽元素、输入文字，看到大致布局。
切换到 “拆分” 视图，左侧是代码，右侧是实时效果。
当你想精确调整某个元素的样式时,在实时视图中右键点击该元素，选择 “检查”。
这会打开一个“检查器”面板，你可以直接在这里修改 CSS 属性，DW 会自动把代码更新到你的 style.css 文件中，这是最高效的学习和设计方式！

第五步：预览和测试

在浏览器中预览：
- 按快捷键 F12，或者点击 DW 右上角的 “在浏览器中预览” 图标。
- 选择一个浏览器（如 Chrome、Firefox），你的网站就会在新窗口中打开。这是检查最终效果的唯一标准，因为 DW 的实时视图可能和浏览器有细微差别。
测试不同设备：

在“实时视图”的左下角，有一个设备图标，点击它可以选择不同的手机、平板尺寸进行预览，检查你的网站在移动设备上是否正常显示（响应式设计）。

第六步：创建其他页面

复制首页：在“文件”面板中，右键点击 index.html，选择“编辑” -> “复制文件”，然后重命名为 about.html（关于页面）。
：打开 about.html，只修改页面独有的内容，比如标题和正文部分，共享的头部、底部和样式可以保持不变。
创建链接：回到 index.html，选中“关于我”这几个字，在底部的“属性”面板中，找到“链接”一栏，点击文件夹图标，选择 about.html 即可创建页面间的超链接。

第七步：上传网站到服务器

当你对本地网站满意后,就需要将它发布到互联网上，让其他人可以访问。

获取服务器信息：你需要从你的网站托管服务商（如阿里云、腾讯云、GoDaddy、Bluehost 等）获取 FTP 信息：
- FTP 主机地址 (e.g., ftp.yourdomain.com)
- 用户名
- 密码
- 根目录 (通常是 public_html 或 www)
在 DW 中设置远程服务器：
- 打开 站点 -> 管理站点...。
- 选择你的网站,点击“编辑”。
- 切换到“服务器”选项卡，点击“+”号添加一个新服务器。
- 方法：选择 FTP。
- FTP 地址：填入你的 FTP 主机地址。
- 用户名和密码：填入你的凭据。
- 根目录：填入 public_html 或 www。
- 勾选“使用 Passive FTP”和“使用 IPv6 传输”（通常建议勾选）。
- 点击“测试”连接，成功后保存。
上传文件：
- 回到 DW 的主界面，在右侧的“文件”面板中，点击右上角的“连接到远程服务器”图标（像一个插头）。
- 连接成功后,你会看到本地文件（左侧）和远程服务器文件（右侧）。
- 选中本地站点中的所有文件和文件夹,然后点击 “上传” 箭头。
- 等待上传完成,你的网站就正式上线了！

总结与建议

多看多练：DW 功能强大，多尝试不同的工具和视图。
学习基础：虽然 DW 可以可视化，但懂一点 HTML 和 CSS 能让你走得更远，利用 DW 的代码提示是学习的好方法。
善用检查器：右键“检查”是排查样式问题的利器。
保持耐心：制作网站是一个循序渐进的过程，享受创造的乐趣！

祝你用 Dreamweaver 制作出属于自己的精彩网站！

DW如何制作自己网站？新手必看步骤？

第一步：准备工作（心态和工具）

第二步：创建和管理本地站点

第三步：创建网站的基本结构