教程概述
我们将创建一个包含以下核心元素的新闻网站首页：
（图片来源网络，侵删）
- 导航栏
- 主新闻轮播图
- 最新头条
- 新闻分类栏目
- 页脚
我们将使用 HTML5 作为结构，CSS3 进行样式设计，并会引入一些流行的前端框架（如 Bootstrap）来简化响应式布局的实现。
第一步：准备工作
-
安装软件:
- Adobe Dreamweaver: 确保你已经安装并激活了最新版本的 Dreamweaver。
- 浏览器: Chrome 或 Firefox，用于实时预览和调试。
-
创建项目文件夹:
- 在你的电脑上创建一个名为
news-website的文件夹。 - 在
news-website文件夹内，再创建几个子文件夹：images: 存放所有图片。css: 存放样式表文件。js: 存放 JavaScript 文件。
- 在你的电脑上创建一个名为
-
收集素材:
（图片来源网络，侵删）
第二步：创建站点
在 Dreamweaver 中设置一个本地站点，可以让你更好地管理文件和链接。
- 打开 Dreamweaver，点击顶部菜单栏的 站点 > 新建站点。
- 在弹出的窗口中,切换到 “站点” 选项卡。
- 站点名称: 输入
我的新闻网站(任意名称即可)。 - 站点文件夹: 点击文件夹图标，选择你刚刚创建的
news-website文件夹。 - 点击 “保存”。
你的文件面板会显示 news-website 文件夹，并且你在 Dreamweaver 中创建的所有文件都会自动保存在这个正确的位置。
第三步：搭建 HTML5 结构
我们将创建一个基础的 HTML5 页面。
- 在 Dreamweaver 中，点击 文件 > 新建。
- 在 “新建文档” 窗口中，选择 “HTML”，确保选择了 HTML5，然后点击 “创建”。
- Dreamweaver 会生成一个基础的 HTML5 模板，我们将修改它。
代码结构解析:
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的新闻网站 - 首页</title>
<!-- 引入 CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- 引入 JavaScript 文件 (建议放在 body 结束标签前) -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- 1. 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Logo 和品牌名 -->
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="Logo" height="30">
</a>
<!-- 汉堡菜单按钮 (移动端) -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 导航链接 -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">首页</a></li>
<li class="nav-item"><a class="nav-link" href="#">国内</a></li>
<li class="nav-item"><a class="nav-link" href="#">国际</a></li>
<li class="nav-item"><a class="nav-link" href="#">科技</a></li>
<li class="nav-item"><a class="nav-link" href="#">体育</a></li>
<li class="nav-item"><a class="nav-link" href="#">娱乐</a></li>
</ul>
</div>
</nav>
<!-- 2. 主轮播图 -->
<div id="mainCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#mainCarousel" data-slide-to="0" class="active"></li>
<li data-target="#mainCarousel" data-slide-to="1"></li>
<li data-target="#mainCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/slide1.jpg" alt="第一张轮播图">
<div class="carousel-caption d-none d-md-block">
<h5>重大突破：人工智能在医疗领域取得新进展</h5>
<p>科学家们利用最新的AI算法，成功提高了疾病诊断的准确率。</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/slide2.jpg" alt="第二张轮播图">
<div class="carousel-caption d-none d-md-block">
<h5>全球气候峰会达成历史性协议</h5>
<p>各国承诺在未来十年内大幅减少碳排放，共同应对气候变化挑战。</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/slide3.jpg" alt="第三张轮播图">
<div class="carousel-caption d-none d-md-block">
<h5>科技巨头发布新一代旗舰产品</h5>
<p>性能提升，设计革新，重新定义行业标准。</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#mainCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">上一个</span>
</a>
<a class="carousel-control-next" href="#mainCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">下一个</span>
</a>
</div>
<!-- 3. 新闻内容区域 -->
<div class="container my-4">
<div class="row">
<!-- 左侧主新闻区 -->
<div class="col-md-8">
<h2>最新头条</h2>
<hr>
<!-- 新闻列表 -->
<div class="news-item mb-4">
<div class="row">
<div class="col-md-5">
<img src="images/news1.jpg" class="img-fluid" alt="新闻图片">
</div>
<div class="col-md-7">
<h4>城市轨道交通网络再扩容，方便市民出行</h4>
<p class="text-muted">2025年10月27日 | 来源：城市日报</p>
<p>随着新线路的开通，我市轨道交通运营里程突破500公里，覆盖主要城区和人口密集区，预计将惠及超过300万市民的日常通勤...</p>
<a href="#" class="btn btn-primary">阅读更多</a>
</div>
</div>
</div>
<div class="news-item mb-4">
<div class="row">
<div class="col-md-5">
<img src="images/news2.jpg" class="img-fluid" alt="新闻图片">
</div>
<div class="col-md-7">
<h4>国际电影节开幕，多部华语片角逐大奖</h4>
<p class="text-muted">2025年10月26日 | 来源：娱乐周刊</p>
<p>为期十天的国际电影节今日盛大开幕，今年共有来自全球50个国家的200余部影片参展，其中5部华语片入围主竞赛单元...</p>
<a href="#" class="btn btn-primary">阅读更多</a>
</div>
</div>
</div>
</div>
<!-- 右侧边栏 -->
<div class="col-md-4">
<h3>热门话题</h3>
<hr>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<h6 class="mb-1">新能源汽车销量创新高</h6>
<small>讨论热度: 10万+</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<h6 class="mb-1">年轻人热衷“City Walk”</h6>
<small>讨论热度: 8万+</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<h6 class="mb-1">健康饮食新风尚</h6>
<small>讨论热度: 5万+</small>
</a>
</div>
<h3 class="mt-4">关注我们</h3>
<hr>
<p>扫描二维码关注我们的官方微信</p>
<img src="images/qrcode.png" class="img-fluid" alt="微信二维码">
</div>
</div>
</div>
<!-- 4. 页脚 -->
<footer class="bg-dark text-white text-center py-3">
<p>© 2025 我的新闻网站. 保留所有权利.</p>
</footer>
</body>
</html>
操作步骤:
- 将上面的代码复制到 Dreamweaver 的代码视图中。
- 将文件另存为
index.html(Dreamweaver 会自动将其保存在news-website根目录下)。
第四步：引入 Bootstrap 和添加自定义样式
我们的页面只有结构,非常简陋，我们使用 Bootstrap 来美化它，并添加自己的自定义样式。
-
下载 Bootstrap:
- 访问 getbootstrap.com。
- 点击 "Download" 下载 "Compiled CSS and JS" 版本。
- 解压下载的 ZIP 文件，找到
bootstrap.min.css和bootstrap.min.js，以及jquery.min.js(Bootstrap 的 JS 依赖 jQuery)。 - 将这三个文件分别复制到你的项目文件夹中的
css和js文件夹里。
-
创建自定义 CSS 文件:
- 在 Dreamweaver 中，新建一个文件，选择 CSS，命名为
style.css，并保存在css文件夹中。 - 在
index.html的<head>标签内，添加对style.css的引用（代码已在第三步中提供）。
- 在 Dreamweaver 中，新建一个文件，选择 CSS，命名为
-
添加自定义样式到
style.css:- 打开
css/style.css文件，添加以下代码来修改默认样式：
- 打开
/* 全局样式 */
body {
font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
background-color: #f4f4f4;
}
/* 导航栏样式 */
.navbar {
box-shadow: 0 2px 4px rgba(0,0,0,.1);
margin-bottom: 0; /* 移除导航栏的下边距，让轮播图紧贴 */
}
/* 轮播图样式 */
.carousel {
margin-bottom: 2rem;
}
.carousel-caption {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 5px;
padding: 10px;
}
/* 新闻列表样式 */
.news-item img {
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0,0,0,.1);
}
.news-item h4 {
color: #333;
font-weight: bold;
}
.news-item p {
color: #777;
}
.news-item .btn-primary {
background-color: #007bff;
border-color: #007bff;
}
.news-item .btn-primary:hover {
background-color: #0056b3;
border-color: #0056b3;
}
/* 页脚样式 */
footer {
margin-top: 2rem;
}
第五步：添加图片和内容
- 准备图片: 将你之前准备的
logo.png,slide1.jpg,slide2.jpg,slide3.jpg,news1.jpg,news2.jpg,qrcode.png等图片文件放入images文件夹。 - 更新路径: 检查
index.html中所有src="..."和href="..."的路径，确保它们指向正确的文件，Dreamweaver 的文件面板通常会帮你自动处理这些链接。 - : 在
index.html中，将示例新闻标题、正文等替换为你自己的内容。
第六步：预览和测试
-
实时预览: 在 Dreamweaver 的设计视图中，你应该能看到一个基本成型的网页，点击右上角的 “实时视图” 按钮，可以像在浏览器中一样查看效果。
-
在浏览器中打开: 最准确的测试方式是直接在浏览器中打开。
- 在文件面板中右键点击
index.html。 - 选择 “在浏览器中打开”。
- 分别用 Chrome 和 Firefox 打开，检查显示是否一致。
- 在文件面板中右键点击
-
测试响应式布局:
- 关键步骤！ 在 Chrome 浏览器中，按
F12键打开开发者工具。 - 点击开发者工具左上角的设备模拟器图标（一个手机和平板的图标）。
- 你可以在下拉菜单中选择不同的设备尺寸（如 iPhone, iPad, Desktop），或者拖动屏幕宽度滑块来模拟不同大小的屏幕。
- 观察导航栏是否会变成汉堡菜单,内容是否会堆叠，如果一切正常，说明你的响应式布局已经生效。
- 关键步骤！ 在 Chrome 浏览器中，按
第七步：进阶技巧与后续工作
恭喜！你已经用 DW 创建了一个功能完整的新闻网页首页，以下是一些可以继续深入的方向：
-
创建子页面:
- 创建
news-detail.html用于显示单篇新闻的详细内容。 - 创建
about.html用于“关于我们”页面。 - 在所有页面中保持导航栏和页脚的一致性,你可以将它们分别做成独立的 HTML 片段，然后通过 Dreamweaver 的 “模板” 功能或 “库” 功能来复用，避免重复劳动。
- 创建
-
优化 SEO (搜索引擎优化):
- 在
<head>中添加<meta name="description" content="...">和<meta name="keywords" content="...">。 - 为图片添加有意义的
alt属性（你已经做了）。 - 使用语义化的 HTML5 标签，如
<header>,<footer>,<article>,<section>。
- 在
-
添加交互效果:
- 使用 jQuery 或原生 JavaScript 为新闻列表项添加“悬停放大”效果。
- 实现“返回顶部”按钮。
- 添加一个“加载更多”的新闻列表功能。
-
连接后端 (高级):
- 目前所有内容都是静态的,要让网站真正“活”起来，你需要学习服务器端语言（如 PHP, Node.js, Python）和数据库（如 MySQL）。
- Dreamweaver 提供了对 PHP 和数据库的很好支持，你可以使用它来创建动态页面，从数据库中读取新闻内容。
本教程带你走完了使用 Dreamweaver 制作一个响应式新闻网站首页的全过程，核心要点是：
- 规划好文件结构。
- 利用 Bootstrap 快速搭建响应式布局。
- 通过自定义 CSS 文件实现个性化设计。
- 善用浏览器开发者工具进行测试和调试。
Dreamweaver 的可视化编辑器对于初学者非常友好，而代码视图则让你能深入理解底层逻辑，希望这份教程对你有帮助！
