2024最新DW零基础建站教程及CA722航班回国经过

2026-08-12 22:00:49 146阅读

本文是一篇将技术教学与个人经历记录相结合的实用指南，文章主要分享了2024年最新的Dreamweaver（DW）网页制作教程，专为零基础初学者设计，手把手教你如何搭建第一个网页，该教程巧妙地以“CA722航班回国经过”为背景或实际案例进行网页内容的实操演示，读者不仅能快速掌握DW网页搭建的基础操作与步骤，还能同步了解该次回国航班的详细经过，兼顾了技术实用性与真实经历的记录意义。

在如今这个自媒体和数字化并行的时代,拥有一个属于自己的网站依然是展示个人品牌或企业形象的绝佳方式，提到网页制作，Adobe Dreamweaver（简称DW）作为一款老牌且经典的“所见即所得”网页制作软件，凭借其强大的代码提示功能和直观的可视化编辑界面，依然是很多初学者的首选工具。

如果你完全不懂代码,又想快速拥有一个网页，那么这篇dw做网站教程正是为你准备的，我们将分步骤教你如何从零开始，用DW搭建出你的第一个网页。

准备工作：安装软件与建立站点

在开始之前,请确保你的电脑上已经安装了Adobe Dreamweaver软件。

创建本地站点 做网站的第一步不是直接写代码，而是建一个“家”来存放你的网站文件。

打开DW软件,在顶部菜单栏选择“站点” -> “新建站点”。
在弹出的对话框中,为你的站点起个名字（MyFirstSite）。
在“本地站点文件夹”一栏，选择你电脑上的一个空文件夹（建议新建一个专用文件夹，如 D:\MyWebsite）。
点击“保存”，你的右下角“文件”面板中就会出现这个站点的目录结构。

第一步：新建HTML文档

HTML是网页的骨架,我们需要先建立一个HTML文件。

在DW菜单栏点击“文件” -> “新建”（快捷键Ctrl+N）。
在左侧选择“文档类型”为 HTML。
右侧选择“无” (None) 即可，点击“创建”。
此时屏幕上会出现一个代码视图,你可以点击软件顶部的“拆分”按钮，这样左边是代码，右边是可视化效果，非常方便初学者对照。
按 Ctrl+S 保存文件，命名为 index.html（index是网页默认的首页名称）。

第二步：认识基本结构并修改标题

在生成的代码中,你会看到基本的HTML结构，找到 <head> 标签内的 <title> 标签，将其修改为你网站的名字。

```会显示在浏览器的标签页上。
### 第三步：添加网页内容（正文与图片）
现在进入 `<body>` 标签内部，开始搭建我们能看到的内容。
**1. 添加大标题和段落**
在DW中，你既可以直接敲代码，也可以使用上方工具栏的“HTML”面板，为了学习，我们直接写代码：
```html
<body>
    <h1>欢迎来到我的个人网站</h1>
    <p>大家好，这是我用Dreamweaver制作的第一个网页，在这里我会分享我的生活与爱好。</p>
</body>

小提示：DW有强大的代码补全功能，你打出 <p 后按空格或Tab键，DW会自动帮你补全标签。

插入图片 在站点文件夹内新建一个 images 文件夹，把你想用的图片放进去，然后在段落下方插入图片：

<img src="images/myphoto.jpg" alt="我的照片">

代码中的 alt 属性是图片的描述，不仅有利于SEO，还能在图片加载失败时显示文字，是规范写法必须加上的。

第四步：使用CSS美化网页

只有HTML的网页是枯燥的黑白文字,我们需要CSS（层叠样式表）来给它穿上漂亮的衣服，DW内置了非常直观的CSS设计器。

创建CSS文件

按 Ctrl+N 新建一个文档，选择“CSS”，点击创建。
保存为 style.css，放在站点根目录下。

链接CSS文件 回到 index.html，在 <head> 标签内部输入以下代码，将HTML和CSS关联起来：

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

编写CSS样式 打开 style.css 文件，输入以下代码让网页变个样：

body {
    background-color: #f0f8ff; /* 设置背景为浅蓝色 */
    font-family: "Microsoft YaHei", sans-serif; /* 设置字体为微软雅黑 */
    text-align: center; /* 文字居中 */
    margin: 50px; /* 外边距 */
}
h1 {
    color: #2c3e50; /* 标题颜色 */
}
img {
    width: 300px; /* 图片宽度 */
    border-radius: 10px; /* 图片圆角 */
    box-shadow: 3px 3px 10px rgba(0,0,0,0.1); /* 添加阴影 */
}

保存所有文件,此时在DW的“设计”视图中，你应该已经能看到一个排版整洁、带背景色和圆角图片的漂亮网页了。