第一部分：准备工作与规划

在打开 Dreamweaver 之前，先做好这些准备工作，会让整个过程事半功倍。

个人网站dw制作教程
（图片来源网络，侵删）

明确网站主题和内容

你的个人网站是做什么的？

  • 作品集/简历型：展示你的项目、技能、工作经历。
  • 个人博客/日记型：分享你的生活、学习心得、文章。
  • 兴趣爱好型：比如摄影、美食、旅行，展示你的作品和相关文章。 确定好网站要包含哪些主要页面，
  • 首页：网站的门户，欢迎访问者，展示核心信息。
  • 关于我：介绍你的个人背景、兴趣爱好等。
  • 作品集/博客：展示你的项目或文章列表。
  • 联系方式：提供你的邮箱、社交媒体链接等。

收集素材

准备好以下文件,并建立一个文件夹来管理它们。

  • 图片：你的头像、项目截图、文章配图等，建议先统一处理成合适的尺寸和格式（JPG 用于照片，PNG 用于透明背景图标）。
  • ：将“关于我”、“联系方式”等页面的文字内容准备好，可以先存到文本文档里。
  • Logo：如果你有，请准备好。

安装软件

确保你已经安装了 Adobe Dreamweaver，你可以通过 Adobe Creative Cloud 下载最新版本，对于初学者，“实时视图” 功能非常友好。

第二部分：创建和管理站点

这是 Dreamweaver 的核心操作。“站点” 是 DW 管理所有网站文件和链接的容器。

个人网站dw制作教程
（图片来源网络，侵删）

步骤 1：创建新站点

  1. 打开 Dreamweaver。
  2. 在启动界面,点击 “站点” -> “新建站点”。
  3. 在弹出的窗口中,你可以选择 “基本”（向导式）或 “高级”（手动设置），这里我们推荐使用 “基本” 模式，因为它更直观。

步骤 2：填写站点信息

  1. 站点名称：给你的网站起个名字，我的个人网站”或你的名字，这个名字只是你在 DW 内部使用的，不会显示在网站上。

  2. 本地站点文件夹：这是最重要的部分！点击文件夹图标，选择一个本地硬盘上的空文件夹作为你的网站根目录。所有网站文件（HTML、图片、CSS等）都必须保存在这个文件夹及其子文件夹中。 你可以创建一个名为 MyPersonalWebsite 的文件夹。

  3. 点击 “完成”，你的站点已经创建好了，DW 的右侧会出现 “文件” 面板，这里显示了你的站点结构。

步骤 3：规划站点文件夹结构

在“文件”面板中，右键点击站点根目录，创建几个子文件夹，让文件更有条理：

个人网站dw制作教程
（图片来源网络，侵删）
  • images：存放所有图片。
  • css：存放样式表文件。
  • js：存放 JavaScript 文件（暂时用不到，但先建好）。

现在你的站点结构应该看起来像这样：

MyPersonalWebsite/
├── css/
├── images/
└── index.html  (这是首页，DW 会自动创建)

第三部分：制作网站首页

首页是网站的“脸面”，我们通常从这里开始设计。

步骤 1：创建首页文件

  1. 在“文件”面板中，确保你选中了站点根目录 MyPersonalWebsite。
  2. 右键点击,选择 “新建文件”。
  3. 将新文件命名为 index.html。index.html 是约定俗成的首页文件名。

步骤 2：设置页面标题

index.html 的标题会显示在浏览器标签页上，对 SEO 和用户体验都很重要。

  1. 在 DW 顶部，找到 输入框。
  2. 输入你的网站标题,张三的个人网站 | 欢迎访问”。

步骤 3：选择视图和布局

DW 提供了多种视图：

  • 代码视图：直接编写 HTML, CSS, JavaScript 代码。
  • 拆分视图：（强烈推荐初学者使用） 上半部分显示代码，下半部分显示实时预览，你可以在预览区点击元素，代码区会自动定位到对应代码。
  • 实时视图：只显示最终效果，不能直接编辑，但可以实时查看。
  • 实时视图代码：在实时视图下高亮显示你正在编辑的代码。

我们使用 “拆分视图”。

步骤 4：构建页面结构（使用 HTML 标签）

一个简单的首页通常包含：头部、导航、主体内容、页脚。

  1. 在代码区，你会看到一些默认的 HTML 代码，光标放在 <body> 标签内。
  2. 使用 DW 的“插入”面板：在 DW 右侧，找到“插入”面板，切换到“常用”类别。
    • 插入 Div 标签：<div> 是一个通用的容器，用来划分页面区域。
      • 点击“插入 Div 标签”，在弹出的窗口中：
        • ID：给这个区域起个唯一的名字，header。
        • 类：可以留空，我们后面用 CSS 来定义样式。
      • 点击“确定”，代码区会插入 <div id="header"></div>。
      • 在 <div id="header">...</div> 中输入你的网站名称，<h1>欢迎来到我的网站</h1>。
    • 重复此操作，依次插入：
      • nav：导航栏，里面放 <a> 标签，如 <a href="index.html">首页</a>, <a href="about.html">关于我</a>。
      • main区，<h2>我的项目</h2> 和 <p>这里是我的项目简介...</p>。
      • footer：页脚，<p>&copy; 2025 我的名字</p>。

现在你的 HTML 结构应该大致是这样：

<body>
  <div id="header">
    <h1>欢迎来到我的网站</h1>
  </div>
  <div id="nav">
    <a href="index.html">首页</a> | <a href="about.html">关于我</a>
  </div>
  <div id="main">
    <h2>我的项目</h2>
    <p>这里是我的项目简介...</p>
  </div>
  <div id="footer">
    <p>&copy; 2025 我的名字</p>
  </div>
</body>

步骤 5：添加样式（使用 CSS）

现在页面很朴素,我们需要用 CSS 来美化它。

  1. 创建 CSS 文件：

    • 在“文件”面板中，右键点击 css 文件夹，选择 “新建文件”。
    • 将文件命名为 style.css。

  2. 链接 CSS 文件：

    • 打开 index.html 文件。
    • 在代码区的 <head> 标签内，添加以下代码来链接你的 CSS 文件：
      <link rel="stylesheet" href="css/style.css">

  3. 编写 CSS 规则：

    • 打开 css/style.css 文件。
    • 开始编写样式,让整个页面有背景色，内容居中，给 div 加上边距和背景色。
      /* 全局样式 */
body {
font-family: "Microsoft YaHei", sans-serif; /* 设置字体 */
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

    / 头部样式 /

    header {

    background-color: #333; color: white; text-align: center; padding: 20px; }

    / 导航栏样式 /

    nav {

    background-color: #444; text-align: center; padding: 10px; }

    nav a {

    color: white; text-decoration: none; margin: 0 15px; }

    nav a:hover {

    text-decoration: underline; }

    / 主体内容样式 /

    main {

    background-color: white; margin: 20px auto; padding: 20px; max-width: 800px; / 限制内容最大宽度 / box-shadow: 0 0 10px rgba(0,0,0,0.1); }

    / 页脚样式 /

    footer {

    background-color: #333; color: white; text-align: center; padding: 10px; margin-top: 20px; }

  4. 实时预览：回到 index.html 的“拆分视图”，你会看到随着你编写 CSS，下方的实时预览窗口在实时变化，这就是 DW 的强大之处！

步骤 6：添加图片

  1. 将你的头像图片（profile.jpg）放入 images 文件夹。
  2. 在 index.html 的 <div id="main"> 中，将光标放在合适位置。
  3. 使用“插入”面板 -> “图像”，选择 images/profile.jpg。
  4. 在弹出的窗口中,你可以为图片添加替代文本（对 SEO 和无障碍访问很重要），我的个人头像”。

第四部分：创建其他页面

创建其他页面（如 about.html）非常简单，因为我们已经有了 index.html 作为模板。

  1. 复制首页：在“文件”面板中，右键点击 index.html，选择 “编辑” -> “复制文件”。
  2. 重命名：将新复制的文件重命名为 about.html。
  3. ：打开 about.html，只修改主体内容部分，比如把“我的项目”改成“关于我”，并填入你的个人介绍。其他部分（头部、导航、页脚、CSS链接）保持不变！
  4. 更新链接：在 about.html 的导航栏 <nav> 中，确保“关于我”链接的 href 是 "about.html"，而“首页”链接的 href 是 "index.html"。

对每个新页面都重复此操作。

第五部分：测试与发布

测试

在发布前,务必在浏览器中测试你的网站。

  • 在 DW 中，点击工具栏上的 “在浏览器中预览” 按钮，选择你常用的浏览器（如 Chrome, Firefox）。
  • ：确保所有文字、图片都正确显示。
  • 检查链接：点击导航栏的每一个链接，确保它们都能跳转到正确的页面。
  • 检查响应式：尝试调整浏览器窗口的大小，看看页面布局是否会发生错乱（简单的 CSS 布局通常能适应）。

发布网站

要将你的网站放到互联网上,你需要一个 Web 服务器 和 FTP 信息，购买虚拟主机时会提供这些信息。

  1. 获取 FTP 信息：从你的虚拟主机服务商那里获取：

    • FTP 服务器地址
    • 用户名
    • 密码
    • Web 根目录路径（通常是 /public_html, /www 或 htdocs）

  2. 在 DW 中设置远程服务器：

    • 打开“站点” -> “管理站点”。
    • 选择你的站点,点击 “编辑”。
    • 切换到 “服务器” 选项卡，点击 添加一个新服务器。
    • 连接方法：选择 “FTP”。
    • FTP 地址：输入你的 FTP 服务器地址。
    • 用户名 和 密码：填入你的 FTP 凭据。
    • 根目录：填入你的 Web 根目录路径。
    • 勾选 “使用被动 FTP” 和 “使用 SFTP”（如果主机支持，后者更安全）。
    • 点击 “测试” 按钮，如果能连接成功，说明配置正确。
    • 点击 “保存”。

  3. 上传文件：

    • 回到 DW 主界面，在右侧“文件”面板的顶部，点击 “连接” 按钮（如果还没连接的话）。
    • 连接成功后,你会看到左侧是你的本地文件，右侧是远程服务器上的文件。
    • 选中你的本地站点文件夹（MyPersonalWebsite），点击右上角的 “上传” 按钮。
    • DW 会将所有文件上传到服务器，上传完成后，你的网站就可以通过域名访问了！

总结与进阶

  • 使用 DW 制作个人网站的核心流程是：建站 -> 做首页 -> 复制做其他页 -> 发布，DW 的“拆分视图”和“实时预览”功能让学习过程变得直观有趣。
  • 进阶学习：
    • 深入学习 CSS：尝试学习 Flexbox 或 Grid 布局，它们能让页面布局更灵活、更强大。
    • 使用 DW 的模板功能：可以创建一个包含所有公共元素（导航、页脚）的模板，然后基于模板创建新页面，效率更高。
    • 响应式设计：学习使用 CSS 媒体查询，让你的网站在不同设备（手机、平板、电脑）上都有良好的显示效果。

希望这份详细的教程能帮助你成功搭建自己的第一个个人网站！祝你玩得开心！