Dreamweaver 网页设计项目教程：打造你的个人作品集网站
项目概述与准备工作
项目目标 我们将创建一个包含以下页面的个人作品集网站：
（图片来源网络，侵删）
- 首页: 包含个人简介、最新作品展示和联系方式。
- 作品集页面: 以网格形式展示所有项目,并可以点击查看详情。
- 关于我页面: 详细的个人介绍、技能和经历。
- 联系我页面: 包含一个简单的联系表单。
准备工作
- 软件安装: 确保你已经安装了 Adobe Dreamweaver（推荐 CC 2025 或更高版本）。
- 素材准备:
- 图片: 准备一张你的个人照片、几张代表作品的项目截图或设计稿。
- 文本: 准备好各页面的文字内容，如个人介绍、项目描述等。
- 图标: 准备一些社交媒体图标（可以从 Flaticon 等网站下载）。
- 项目文件夹结构:
在你的电脑上创建一个主文件夹，
MyPortfolio，在MyPortfolio内部，创建以下子文件夹，保持良好的文件组织习惯至关重要：MyPortfolio/ ├── assets/ // 存放所有资源 │ ├── images/ // 图片 │ ├── icons/ // 图标 │ └── css/ // 样式表文件 ├── index.html // 首页 ├── portfolio.html // 作品集页面 ├── about.html // 关于我页面 ├── contact.html // 联系我页面 └── style.css // 主样式表
Dreamweaver 核心工作区介绍
打开 Dreamweaver，你会看到其现代化的工作区,我们需要重点关注三个面板：
- 文件: 左侧面板,用于管理你的项目文件和文件夹。
- 插入: 右侧面板，方便地插入各种HTML元素（如文本、图片、链接等）。
- 属性: 底部或右侧面板，用于修改选中元素的属性（如图片的源文件、文本的样式等）。
重要设置：
- 在 文件 面板中，右键点击
MyPortfolio文件夹，选择 “作为站点管理”，这会定义你的本地站点，让 Dreamweaver 能够正确管理文件路径。 - 在菜单栏选择 “编辑” > “首选项”，在 “常规” 选项卡中，确保 “使用 CSS 而非 HTML 标签” 被选中,这是现代网页设计的标准。
步骤一：搭建网站框架与全局样式
所有页面共享相同的头部（网站标题、导航栏）和底部（版权信息）,我们先把这部分框架和全局样式做好。
（图片来源网络，侵删）
创建 style.css
在 文件 面板中，右键点击 css 文件夹，选择 “新建文件”，命名为 style.css,然后双击打开它。
编写基础CSS
在 style.css 中，我们首先设置一些全局样式，如重置浏览器默认样式、设置字体、背景色等。
/* style.css */
/* 1. 全局重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 2. 基础样式 */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
}
.container {
width: 80%;
max-width: 1100px;
margin: auto;
overflow: hidden;
padding: 0 2rem;
}
/* 3. 导航栏样式 */
.main-nav {
background: #333;
color: #fff;
padding: 1rem 0;
}
.main-nav .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.main-nav .logo {
font-size: 1.5rem;
font-weight: bold;
}
.main-nav ul {
display: flex;
list-style: none;
}
.main-nav ul li a {
color: #fff;
text-decoration: none;
padding: 0.75rem 1rem;
transition: background-color 0.3s;
}
.main-nav ul li a:hover {
background-color: #555;
}
/* 4. 页脚样式 */
.main-footer {
background: #333;
color: #fff;
text-align: center;
padding: 1rem 0;
margin-top: 2rem;
}
/* 5. 内容区域样式 */
.main-content {
padding: 2rem 0;
}
创建 index.html 并应用框架
-
在 文件 面板中，双击
index.html打开它。
（图片来源网络，侵删） -
在 插入 面板中，切换到 “常用” 或 “结构” 类别，点击
<html>按钮，Dreamweaver 会生成一个完整的HTML5结构。 -
在
<title>标签中输入你的网站标题，如我的作品集。 -
在
<head>标签内,链接我们刚刚创建的CSS文件：<link rel="stylesheet" href="assets/css/style.css">
-
在
<body>标签内，根据CSS样式,构建导航栏和页脚的HTML结构：<!-- 导航栏 --> <nav class="main-nav"> <div class="container"> <div class="logo">我的作品集</div> <ul> <li><a href="index.html">首页</a></li> <li><a href="portfolio.html">作品集</a></li> <li><a href="about.html">关于我</a></li> <li><a href="contact.html">联系我</a></li> </ul> </div> </nav> <!-- 页面主体内容 --> <main class="main-content"> <div class="container"> <!-- 这里将放置首页的具体内容 --> <h1>欢迎来到我的网站</h1> <p>这里是我的个人作品集，展示我的项目与技能。</p> </div> </main> <!-- 页脚 --> <footer class="main-footer"> <div class="container"> <p>© 2025 我的作品集. 保留所有权利.</p> </div> </footer> -
按
F12键，在浏览器中预览你的第一个页面,你应该能看到一个带有黑色导航栏和灰色背景的页面框架。
步骤二：完成首页内容
现在我们来填充首页的具体内容。
-
添加图片:
- 将你的个人照片放入
assets/images文件夹。 - 在Dreamweaver的设计视图中，将光标放在
<h1>标签下方。 - 从 插入 面板中选择 “图像”,或直接拖拽图片文件到设计视图中。
- 在弹出的窗口中,选择你的个人照片。
- 在 属性 面板中，为图片设置一个
ID，profile-img，并设置alt文本（对SEO和无障碍访问非常重要）。
- 将你的个人照片放入
-
更新CSS以适应新内容: 在
style.css中添加以下样式,来美化首页布局和图片：/* 首页特定样式 */ #profile-img { max-width: 200px; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,0.2); margin: 1rem 0; } .hero { text-align: center; padding: 3rem 0; } -
更新HTML结构: 修改首页的
<main>部分，使其应用新的hero类：<main class="main-content"> <div class="container"> <section class="hero"> <img src="assets/images/profile.jpg" alt="我的个人照片" id="profile-img"> <h1>你好，我是[你的名字]</h1> <p>一名充满激情的网页设计师 / 前端开发者</p> </section> </div> </main>你的首页应该看起来更美观了。
步骤三：创建其他页面
这是 Dreamweaver 的一个强大功能：库项目 和 模板，我们可以用它们来快速创建其他页面,并确保它们与首页保持一致。
将导航栏和页脚设为可重用部件
- 在
index.html中，选中整个导航栏的HTML代码（从<nav>到</nav>）。 - 右键点击选中的代码，选择 “创建” > “库项目”，将其命名为
navigation。 - 同样地，选中页脚的HTML代码，创建一个名为
footer的库项目。 - 在 文件 面板的 “资源” 选项卡中,你可以看到这两个新建的库项目。
使用库项目创建新页面
- 在 文件 面板中，右键点击
portfolio.html，选择 “设计” 打开它。 - 将光标放在
<body>标签的起始位置。 - 打开 资源 面板，将
navigation库项目拖拽到<body>中。 - 将光标放在
</main>标签之后，将footer库项目拖拽进来。 - 对
about.html和contact.html重复此操作。
修改页面标题
分别打开每个新文件，在 代码 视图中修改 <title> 标签内的文本，使其与页面内容相符（<title>作品集 - 我的作品集</title>）。
填充页面内容
为每个页面添加独特的内容，就像我们为首页所做的那样，在 portfolio.html 中,你可以创建一个作品网格。
步骤四：添加交互与动态内容（进阶）
创建作品集详情页
- 在
portfolio.html中，为每个作品创建一个链接，指向一个不存在的页面，project1.html。<a href="project1.html">查看项目详情</a>
- 创建
project1.html，并像之前一样,使用库项目添加导航栏和页脚。 - 在这个新页面中，你可以展示该项目的详细图片、描述和技术栈。
添加联系表单
- 打开
contact.html。 - 将光标放在内容区域。
- 从 插入 面板的 “表单” 类别中，依次插入：
- 表单: 一个大的容器。
- 文本域: 用于姓名。
- 文本区域: 用于留言内容。
- 按钮: 用于提交。
- 在 属性 面板中，为每个表单元素设置
id和name。 - 为了让表单能够发送邮件，你需要服务器端脚本（如PHP、ASP.NET）的支持，Dreamweaver 可以帮助你创建这些脚本（在 “插入” > “表单” 中有相关选项）,但这通常需要你拥有一个支持的服务器环境。
步骤五：测试、发布与维护
测试
- 跨浏览器测试: 在不同的浏览器（Chrome, Firefox, Edge, Safari）中打开你的网站,确保显示效果一致。
- 链接检查: 在Dreamweaver中，选择 “站点” > “检查页面” > “检查链接”,可以快速发现断掉的链接。
- 实时视图: Dreamweaver的 “实时视图” 可以让你在编码的同时看到一个近似浏览器的预览,非常方便。
发布（上传到服务器）
- 你需要一个虚拟主机服务器和FTP信息（主机地址、用户名、密码）。
- 在Dreamweaver中，选择 “站点” > “管理站点”**。
- 选择你的站点，点击 “编辑”。
- 在 “服务器” 选项卡中，点击 号添加一个新的FTP服务器。
- 输入你的FTP信息，并设置 “Web URL” 为你的网站域名。
- 完成后，在 文件 面板中，你会看到一个云状的“连接”图标，点击它连接到服务器,然后就可以直接拖拽文件进行上传和同步了。
维护
- 设计器模式: 如果你不太懂代码，可以使用 “设计器模式”，它提供了一个类似Word的所见即所得编辑器，让你可以像在PPT里一样拖拽元素、修改样式。
- 代码视图: 对于更精细的控制，“代码视图” 是你的不二之选，你可以直接编写和修改HTML、CSS和JavaScript代码。
- 实时视图: 结合使用 “代码视图” 和 “实时视图”，你可以一边修改代码，一边立即看到效果,这是最高效的调试方式。
总结与学习路径
通过这个项目,你已经掌握了使用Dreamweaver进行网页设计的完整流程：
- 规划与准备: 定义项目、准备素材、组织文件。
- 基础构建: 设置站点、创建HTML骨架、编写CSS样式。
- 内容填充: 使用设计视图和插入面板添加文本、图片等内容。
- 效率提升: 使用库项目和模板快速创建和维护多页面网站。
- 交互与发布: 添加链接、表单等交互元素,并最终将网站发布到服务器。
后续学习建议:
- 深入学习CSS: 掌握 Flexbox 和 Grid 布局，它们能让你创建更复杂、更灵活的页面布局。
- JavaScript入门: 学习基础的JavaScript，可以为你的网站添加更多动态效果，如轮播图、表单验证等。
- 响应式设计: 学习使用媒体查询，让你的网站能够在手机、平板和电脑上都有良好的显示效果。
- CMS集成: 尝试使用Dreamweaver集成WordPress等内容管理系统,这会让你能够更轻松地管理网站内容。
Dreamweaver 是一个功能强大的工具，它既适合初学者通过可视化界面快速入门，也适合专业人士通过高效的代码环境进行深度开发,祝你学习愉快！
