第一部分：项目规划与构思 (动笔之前)

在打开 Dreamweaver 之前，先花点时间规划你的作业,这会让整个过程更顺畅。

dreamweaver制作网页作业
（图片来源网络，侵删）

确定主题

选择一个你感兴趣的主题,这样制作过程会更有趣。

  • 个人介绍网站：展示你的兴趣爱好、技能、照片等。
  • 电影/书籍介绍网站：介绍你最喜欢的几部电影或书籍，包含简介、海报、评分等。
  • 美食博客：分享你的拿手菜或喜欢的餐厅，包含食谱、图片、制作步骤。
  • 旅行日记：记录一次旅行经历,配上照片和游记。
  • 校园活动宣传页：为某个社团或活动制作一个宣传网站。

本次作业示例： 我们将以一个“我的个人作品集”为主题来展开讲解。

设计布局 (草图)

在纸上或使用设计软件（如 Figma, Sketch, 甚至画图工具）简单画出网页的布局,一个简单的布局通常包括：

  • 页眉和导航菜单。
  • 区域，关于我”、“我的作品”、“联系方式”等。
  • 页脚：版权信息、社交媒体链接等。

示例布局草图：

dreamweaver制作网页作业
（图片来源网络，侵删）
+--------------------------------------------------+
|              [我的个人作品集] [首页] [ [作品] [联系] |
+--------------------------------------------------+
|                                                  |
|           欢迎来到我的世界！                      |
|           我是一名前端开发爱好者...              |
|                                                  |
+--------------------------------------------------+
|                                                  |
|   [作品1]  |  [作品2]  |  [作品3]                |
|   <img>    |  <img>    |  <img>                 |
|   项目A    |  项目B    |  项目C                 |
|                                                  |
+--------------------------------------------------+
|                                                  |
|  © 2025 我的作品集. All Rights Reserved.         |
+--------------------------------------------------+

收集素材

准备好你需要用到的所有文件：

  • 图片：你的照片、作品截图、图标等，建议使用 .jpg 或 .png 格式。
  • 文本：你的自我介绍、作品描述、联系方式等。
  • 其他：你可能需要的图标字体（如 Font Awesome）或小图标。

第二部分：Dreamweaver 制作核心流程

步骤 1：创建和管理站点

这是最关键的一步！在 Dreamweaver 中，必须先创建一个站点，它可以帮助你管理所有文件和链接,避免文件路径错误。

  1. 打开 Dreamweaver，点击顶部菜单 站点 -> 新建站点。
  2. 在弹出的窗口中，给你的站点起个名字，MyPortfolio。
  3. 在“本地站点文件夹”中，选择一个你电脑上的空文件夹，用于存放所有网站文件，Dreamweaver 会自动在此文件夹下创建一个 images 文件夹,建议你把所有图片都放进去。
  4. 点击“保存”,站点就创建好了。

步骤 2：创建主页文件

  1. 在右侧的“文件”面板中,右键点击你的站点名称。
  2. 选择 新建文件。
  3. 将新文件命名为 index.html,这是网站的默认主页。

步骤 3：设置页面属性

  1. 在 Dreamweaver 的设计视图中,点击页面空白处。
  2. 在下方的“属性”检查器中，找到“页面属性”按钮并点击。
  3. 在这里你可以设置：
    • 我的个人作品集 (这个标题会显示在浏览器标签页上)。
    • 背景图像：选择一张你喜欢的背景图。
    • 文本颜色、链接颜色等。

步骤 4：构建网页结构 (使用 HTML5 语义化标签)

切换到“代码”视图，或者使用“实时”视图，我们来编写 HTML 结构。

  1. 页眉

    dreamweaver制作网页作业
    （图片来源网络，侵删）
    <header>
  <h1>我的个人作品集</h1>
  <nav>
    <a href="index.html">首页</a> |
    <a href="about.html">关于我</a> |
    <a href="works.html">我的作品</a> |
    <a href="contact.html">联系我</a>
  </nav>
</header>

  2. 主体

    <main>
  <section id="hero">
    <h2>欢迎来到我的世界！</h2>
    <p>我是一名充满激情的前端开发爱好者，热爱创造美观且实用的网页。</p>
  </section>
  <section id="portfolio">
    <h3>精选作品</h3>
    <div class="work-item">
      <img src="images/work1.jpg" alt="项目A截图">
      <h4>项目A：响应式企业官网</h4>
      <p>使用 HTML5 和 CSS3 构建的现代化企业官网。</p>
    </div>
    <!-- 更多作品... -->
  </section>
</main>

  3. 页脚

    <footer>
  <p>&copy; 2025 我的作品集. All Rights Reserved.</p>
</footer>

步骤 5：美化网页 (使用 CSS)

现在我们的网页只有结构，还很朴素，接下来用 CSS 来美化它。

  1. 创建 CSS 文件：在“文件”面板中，右键点击站点，选择 新建 -> CSS 文件，命名为 style.css。

  2. 链接 CSS 文件：在 index.html 的 <head> 标签内，添加以下代码来链接你的 CSS 文件。

    <link rel="stylesheet" href="style.css">

  3. 编写 CSS 样式：打开 style.css 文件,开始编写样式。

    /* 全局样式 */
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  background-color: #f4f4f4;
  color: #333;
}
/* 页眉样式 */
header {
  background-color: #333;
  color: #fff;
  padding: 1rem;
  text-align: center;
}
nav a {
  color: #fff;
  text-decoration: none;
  margin: 0 15px;
}
nav a:hover {
  text-decoration: underline;
}
/* 主体内容样式 */
main {
  padding: 2rem;
  max-width: 1200px;
  margin: auto;
}
#hero {
  text-align: center;
  padding: 3rem 0;
}
/* 作品集样式 */
#portfolio {
  display: flex; /* 使用 Flexbox 布局 */
  flex-wrap: wrap;
  justify-content: space-around;
}
.work-item {
  width: 30%;
  margin-bottom: 2rem;
  background: #fff;
  padding: 1rem;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.work-item img {
  max-width: 100%;
  height: auto;
}
/* 页脚样式 */
footer {
  text-align: center;
  padding: 1rem;
  background-color: #333;
  color: #fff;
  margin-top: 2rem;
}

步骤 6：添加交互与内容

  1. 插入图片：在设计视图中，将光标放在 <img> 标签内，然后在“属性”检查器的“源文件”框中点击文件夹图标,选择你的图片文件。
  2. 编辑文本：直接在设计视图中点击文本进行修改。
  3. 添加表单 (联系我”页面)：
    • 创建一个新文件 contact.html。
    • 在 <main> 标签内添加表单代码：
      <form action="mailto:your-email@example.com" method="post" enctype="text/plain">
  <p>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name">
  </p>
  <p>
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email">
  </p>
  <p>
    <label for="message">留言:</label>
    <textarea id="message" name="message" rows="5"></textarea>
  </p>
  <p>
    <input type="submit" value="发送">
  </p>
</form>
    • 注意：mailto: 方式比较简单，但用户体验不佳，更专业的做法是使用服务器端脚本（如 PHP）,但这超出了静态网页作业的范畴。

第三部分：预览、测试与发布

步骤 7：预览和测试

  1. 实时预览：在 Dreamweaver 的顶部工具栏，有一个“实时”视图,可以边写代码边看效果。
  2. 在浏览器中预览：按 F12 键，可以在默认浏览器中打开并预览你的网页,这是最真实的预览方式。
  3. 测试：检查所有链接是否正常工作，图片是否都显示出来了，文字排版是否美观，尝试在不同尺寸的浏览器窗口中查看你的网页（响应式设计的初步体验）。

步骤 8：发布作业 (如何提交)

你的作业不是给老师看一堆代码,而是看最终的效果。

  1. 打包文件夹：在电脑上找到你创建的站点文件夹（MyPortfolio）。
  2. 复制整个文件夹：将这个 MyPortfolio 文件夹完整地复制一份。
  3. 压缩：将复制出来的文件夹压缩成一个 .zip 文件。
  4. 提交：将这个 .zip 文件提交给你的老师。

为什么这样做？

  • 保持文件结构：老师解压后，文件路径和链接关系都保持完整，可以直接打开 index.html 查看效果。
  • 方便老师批改：老师不需要手动去创建站点和整理文件。

第四部分：作业加分项与技巧

想让你的作业脱颖而出？可以尝试以下几点：

  1. 响应式设计：学习使用 媒体查询，让你的网页在手机、平板和电脑上都能良好显示，这是现代网页开发的必备技能。
    /* 示例：在小屏幕上改变作品集布局 */
@media (max-width: 768px) {
  .work-item {
    width: 45%; /* 在平板上变为两列 */
  }
}
@media (max-width: 480px) {
  .work-item {
    width: 100%; /* 在手机上变为单列 */
  }
}
  2. 使用 Bootstrap 或 Foundation：这些是流行的 CSS 框架，可以让你快速构建出专业、美观且响应式的布局,大大提高效率。
  3. 添加 CSS 动画：使用 transition 和 transform 为按钮、图片添加简单的悬停效果或动画,让页面更生动。
  4. 使用 JavaScript：添加一些简单的交互，比如一个点击后显示/隐藏内容的区域,或者一个简单的图片轮播。
  5. 代码整洁：保持 HTML 和 CSS 代码的缩进清晰，注释清楚,这体现了你的专业素养。

制作一个 Dreamweaver 网页作业，本质上就是“规划 -> 搭建结构 -> 美化 -> 测试 -> 提交”的完整流程。

  • HTML 是网页的骨架。
  • CSS 是网页的外貌和服装。
  • 站点管理 是保证项目井然有序的基础。

从一个小项目开始，逐步添加功能和细节，你一定能完成一份非常出色的网页作业！祝你制作顺利！