我们将创建一个现代、响应式的网页模板，使用 HTML5、CSS3 和一点 JavaScript，这个模板将包含头部、导航区、主内容区、侧边栏和页脚。
（图片来源网络，侵删）
第一步：理解网页模板的结构
一个标准的网页模板通常包含以下几个部分：
<!DOCTYPE html>: 声明文档类型,告诉浏览器这是一个HTML5文档。<html>: 根元素,包裹整个页面的内容。<head>: 包含页面的元数据，如标题、字符编码、链接到CSS文件、JavaScript文件等,这些内容不会直接显示在页面上。<body>: 包含页面上所有可见的内容，如文本、图片、链接、视频等。
第二步：完整的HTML模板代码
这是您可以直接复制并使用的完整HTML代码，它包含了基本的CSS样式（内嵌在<head>的<style>标签中）和一个简单的JavaScript交互。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的Dreamweaver网页模板</title>
<!-- 引入Google Fonts字体 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
/* --- 全局样式和重置 --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', 'Microsoft YaHei', sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 20px 0;
}
/* --- 头部样式 --- */
header {
background: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
}
header h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
header p {
font-size: 1.2rem;
color: #ccc;
}
/* --- 导航栏样式 --- */
nav {
background: #444;
overflow: hidden; /* 清除浮动 */
}
nav ul {
display: flex;
list-style: none;
justify-content: center;
}
nav ul li a {
display: block;
color: #fff;
text-decoration: none;
padding: 15px 20px;
transition: background-color 0.3s;
}
nav ul li a:hover {
background-color: #555;
}
/* --- 主要内容区域 --- */
.main-content {
display: flex;
gap: 20px; /* 元素之间的间距 */
}
.content {
flex: 3; /* 内容区域占据3份宽度 */
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.content h2 {
margin-bottom: 15px;
color: #333;
}
.content p {
margin-bottom: 15px;
}
/* --- 侧边栏样式 --- */
.sidebar {
flex: 1; /* 侧边栏占据1份宽度 */
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.sidebar h3 {
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid #eee;
}
.sidebar ul {
list-style: none;
}
.sidebar ul li a {
display: block;
padding: 8px 0;
color: #555;
text-decoration: none;
border-bottom: 1px solid #eee;
}
.sidebar ul li a:hover {
color: #333;
padding-left: 10px;
transition: all 0.3s ease;
}
/* --- 页脚样式 --- */
footer {
background: #333;
color: #fff;
text-align: center;
padding: 20px 0;
margin-top: 20px;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
.main-content {
flex-direction: column; /* 在小屏幕上垂直排列 */
}
nav ul {
flex-direction: column; /* 在小屏幕上垂直排列导航链接 */
text-align: center;
}
nav ul li a {
padding: 10px;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>我的网站</h1>
<p>欢迎来到我的个人空间</p>
</div>
</header>
<nav>
<div class="container">
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#portfolio">作品集</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</div>
</nav>
<div class="container main-content">
<main class="content">
<h2>欢迎来到我的博客</h2>
<p>这是一个使用Dreamweaver创建的响应式网页模板，您可以直接在Dreamweaver中打开这个HTML文件，然后切换到“实时视图”或“代码视图”进行编辑。</p>
<p>这个模板包含了网页的基本结构：头部、导航栏、主内容区、侧边栏和页脚，CSS样式已经内嵌，方便您快速开始。</p>
<p>您可以轻松地修改颜色、字体、布局和内容，如果您想创建多个页面（如“关于我”、“联系方式”），只需复制这个HTML文件，然后修改相应的内容即可。</p>
</main>
<aside class="sidebar">
<h3>关于我</h3>
<p>我是一名前端开发爱好者，喜欢创建美观且实用的网站。</p>
<h3>快速链接</h3>
<ul>
<li><a href="#">HTML教程</a></li>
<li><a href="#">CSS教程</a></li>
<li><a href="#">JavaScript教程</a></li>
<li><a href="#">Dreamweaver教程</a></li>
</ul>
</aside>
</div>
<footer>
<div class="container">
<p>© 2025 我的网站. 保留所有权利.</p>
</div>
</footer>
<!-- 可选：添加一些简单的JavaScript交互 -->
<script>
// 当页面加载完成时执行
document.addEventListener('DOMContentLoaded', function() {
// 获取所有导航链接
const navLinks = document.querySelectorAll('nav ul li a');
// 为每个链接添加点击事件
navLinks.forEach(link => {
link.addEventListener('click', function(event) {
// 在实际应用中，这里可以阻止默认跳转行为，实现单页应用效果
// event.preventDefault();
// 简单的反馈：点击后改变链接颜色
// setTimeout(() => {
// this.style.color = '#ffcc00';
// }, 100);
});
});
});
</script>
</body>
</html>
第三步：如何在Dreamweaver中使用这个模板
Dreamweaver最大的优势在于它集成了代码视图和实时视图,让您可以在编写代码的同时看到即时效果。
步骤 1：创建新文件
- 打开 Adobe Dreamweaver。
- 在欢迎屏幕，选择 “文件” > “新建”。
- 在弹出的对话框中，确保选择了 “基本页”，然后在右侧的 “页面类型” 列表中，选择 “HTML”。
- 点击 “创建”。
步骤 2：粘贴代码
- Dreamweaver会打开一个新的HTML文件。
- 删除自动生成的所有默认代码。
- 将上面提供的完整HTML模板代码全选并复制，然后粘贴到Dreamweaver的代码编辑器中。
步骤 3：切换视图进行编辑和预览
Dreamweaver提供了三种主要的视图模式：
（图片来源网络，侵删）
-
代码视图
- 功能：纯文本编辑器，显示和编辑HTML、CSS、JavaScript代码。
- 使用：在这里进行所有代码的修改，您可以修改
<title>标签里的网站名称，修改<h1>标签里的主标题，或者直接在<style>标签里修改CSS属性，比如将background-color: #333;改成background-color: #007bff;来改变头部颜色。
-
实时视图
- 功能：这是一个“所见即所得”的预览窗口，它会渲染您的代码,让您看到网页在浏览器中的大致外观。
- 使用：点击Dreamweaver顶部的 “实时视图” 按钮，您会看到一个静态的网页，但无法直接在上面编辑内容,这个视图非常适合快速检查布局和样式是否正确。
-
实时代码视图
- 功能：这是Dreamweaver的“杀手级”功能，它将代码视图和实时视图并排显示。
- 使用：点击 “实时代码视图” 按钮，您在左侧的代码视图中修改任何一处代码，右侧的实时视图会立即更新，让您能直观地看到修改的效果,这是学习和调试网页最高效的方式。
步骤 4：保存和预览
- 点击 “文件” > “保存”，将文件命名为
index.html。 - 按下快捷键
F12，Dreamweaver会调用您系统默认的浏览器来打开并预览这个网页，您可以在浏览器中测试所有功能，如点击链接、调整窗口大小查看响应式效果等。
第四步：如何基于这个模板创建新页面
网站通常有多个页面（如首页、关于我们、联系方式等）,最简单的方法就是基于这个模板创建。
（图片来源网络，侵删）
- 在Dreamweaver中，打开您刚刚创建的
index.html文件。 - 点击 “文件” > “另存为”。
- 将新文件命名为
about.html（或任何您想要的名称）。 - 打开新的
about.html文件，修改<main class="content">部分的内容，将其替换为“关于我们”页面的内容。 - 保存并预览。
这样，所有页面都共享相同的头部、导航、侧边栏和页脚，保证了网站风格的一致性,同时每个页面的内容又可以独立定制。
这份代码为您提供了一个功能完整、设计现代且响应式的网页模板，通过Dreamweaver的强大功能,您可以：
- 在代码视图中 精确控制每一行代码。
- 在实时视图中 快速预览最终效果。
- 在实时代码视图中 高效地进行学习和开发。
希望这份详细的指南能帮助您顺利开始您的Dreamweaver网页设计之旅！
