Dreamweaver 网页设计项目教程：创建你的第一个个人作品集网站
第一部分：项目准备与基础设置
在开始编写代码之前，做好准备工作至关重要,这能让你后续的开发过程更加顺畅。
（图片来源网络，侵删）
项目目标： 创建一个包含“首页”、“关于我”和“作品集”三个页面的简单个人作品集网站。
最终效果预览：
- 响应式布局,在电脑和手机上都能良好显示。
- 清晰的导航栏。
- 包含个人介绍、作品展示和联系信息。
步骤 1：创建本地项目文件夹
在你的电脑上创建一个专门用于这个项目的文件夹,这有助于管理所有网站相关的文件。
- 在你的电脑（D 盘或桌面）创建一个新文件夹，命名为
my-portfolio。 - 在
my-portfolio文件夹内，再创建几个子文件夹：images：存放所有图片文件。css：存放样式表文件。js：存放 JavaScript 文件（本项目暂时用不到，但养成好习惯）。
文件结构示例：
（图片来源网络，侵删）
my-portfolio/
├── css/
├── images/
├── js/
└── (网页文件将放在这里)步骤 2：在 Dreamweaver 中定义站点
“定义站点”是 Dreamweaver 中最核心的步骤之一，它告诉 Dreamweaver 你的网站文件存放在哪里，这样它才能正确地管理文件路径、预览网页和上传服务器。
- 打开 Adobe Dreamweaver。
- 点击顶部菜单栏的 站点 -> 新建站点。
- 在弹出的窗口中，选择 “基本” 选项卡，然后点击 “下一步”。
- 编辑文件：
- 站点名称：输入一个你喜欢的名字，
我的作品集。 - 本地站点文件夹：点击文件夹图标，浏览并选择你刚刚创建的
my-portfolio文件夹，点击 “选择”。
- 站点名称：输入一个你喜欢的名字，
- 连接到远程服务器（可选）：
- 如果你现在只是想在本地制作，选择 “无”，然后点击 “下一步”。
- 如果你有服务器，可以在这里配置 FTP 等信息。
- 共享文件：
- 同样选择 “无”，点击 “下一步”。
- 检查信息无误后，点击 “完成”。
恭喜！ 你已经在 Dreamweaver 中成功定义了一个站点，Dreamweaver 的 “文件” 面板会显示你 my-portfolio 文件夹的内容,并且会自动同步你创建的子文件夹。
第二部分：构建网站结构与首页
现在我们开始创建网站的第一个页面：首页。
步骤 3：创建首页文件
- 在 Dreamweaver 的 “文件” 面板中，右键点击
my-portfolio根目录。 - 选择 “新建文件”。
- 将这个新文件重命名为
index.html。注意： 网站首页必须命名为index.html或index.htm,这样浏览器才能自动识别并打开它。
步骤 4：设置页面标题和默认语言
- 在 “文件” 面板中双击打开
index.html。 - 在文档窗口的顶部，找到 输入框，输入 “首页 - 我的个人作品集”会显示在浏览器标签页上。
- 切换到 “代码” 视图（或直接在 “设计” 视图的 “属性” 面板中）。
- 在
<html>标签内，找到lang属性，确保它设置为zh-CN(代表简体中文)。
<html lang="zh-CN">
步骤 5：搭建首页基本结构
我们将使用 HTML5 的语义化标签来构建页面结构，这有助于 SEO 和代码可读性。
（图片来源网络，侵删）
- 在 “代码” 视图中，将
index.html的内容替换为以下基本结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">首页 - 我的个人作品集</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>我的名字</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="portfolio.html">作品集</a></li>
</ul>
</nav>
</header>
<main>
<section id="hero">
<h2>欢迎来到我的世界</h2>
<p>我是一名充满热情的网页设计师</p>
<a href="#portfolio">查看我的作品</a>
</section>
</main>
<footer>
<p>© 2025 我的个人作品集. All rights reserved.</p>
</footer>
</body>
</html>
代码解释：
<!DOCTYPE html>：声明文档类型为 HTML5。<head>：包含页面的元信息，如标题、字符编码、引入的 CSS 文件等。<meta charset="UTF-8">：确保页面能正确显示中文等特殊字符。<meta name="viewport"...>：响应式设计的核心！ 它告诉浏览器如何控制页面的尺寸和缩放。<link rel="stylesheet" href="css/style.css">：引入我们稍后要创建的 CSS 样式表。<body>：页面的可见内容。<header>：页眉,通常包含网站标题和主导航。<nav>：导航区域。<main>：页面的主要内容。<section>：文档中的一个独立区块，我们用它来放置“英雄区域”。<footer>：页脚,通常包含版权信息。
第三部分：设计页面样式
现在我们的页面只有骨架，看起来很朴素，我们使用 CSS 来美化它。
步骤 6：创建并链接 CSS 文件
- 在 “文件” 面板中，确保
css文件夹存在，如果不存在,右键点击根目录创建。 - 在
css文件夹上右键，选择 “新建文件”，命名为style.css。 - 双击打开
style.css，输入以下 CSS 代码,我们一步步来解释。
/* style.css */
/* --- 全局样式和重置 --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
}
a {
text-decoration: none;
color: #0066cc;
}
/* --- 布局容器 --- */
.container {
width: 90%;
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}
/* --- 页眉 --- */
header {
background: #333;
color: #fff;
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 100;
}
header h1 {
float: left;
}
header nav ul {
float: right;
list-style: none;
}
header nav ul li {
display: inline;
margin-left: 20px;
}
header nav ul li a {
color: #fff;
}
header nav ul li a:hover {
color: #ddd;
}
/* --- 主要内容 --- */
main {
padding: 2rem 0;
}
/* --- 英雄区域 --- */
#hero {
text-align: center;
padding: 4rem 0;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../images/hero-bg.jpg') no-repeat center center/cover;
color: #fff;
border-radius: 8px;
margin-bottom: 2rem;
}
#hero h2 {
font-size: 2.5rem;
margin 
