零基础入门指南，手把手教你用DW制作简单网页

本文是一份专为零基础初学者打造的Dreamweaver（DW）入门指南，详细介绍了如何使用DW软件制作简单的网站和网页，通过本指南，初学者可以快速掌握网页制作的基本流程，包括软件界面的认识、基本HTML和CSS代码的运用，以及页面的布局与排版，无论你是学生还是网页设计新手，都能跟随本教程轻松上手，快速制作出属于自己的第一个简单网页，开启网页设计的探索之旅。

很多初学者在刚接触网页设计时，都会问一个问题：如何用dw制作简单网站？Adobe Dreamweaver（简称DW）作为一款老牌的“所见即所得”网页编辑器，非常非常适合新手用来入门，它既提供了可视化的操作界面，又能让你看到底层的代码逻辑,我们就来手把手教大家用DW制作一个属于自己的简单网页。

准备工作

在开始之前，请确保你的电脑上已经安装了Adobe Dreamweaver软件，你可以去Adobe官网下载试用版或正式版，安装完成后，打开软件,我们就可以开始了。

第一步：新建HTML文档

1. 打开DW软件，在欢迎界面的左侧点击“新建”。
2. 在弹出的文档类型列表中，选择“HTML”，这时，文档类型（DocType）通常默认为HTML5，这是目前最标准的网页格式，直接点击“创建”即可。
3. 此时你会看到一个空白页面，右上角有“代码”、“拆分”和“设计/实时视图”三个选项，建议新手点击“拆分”视图，这样左边能看代码，右边能看实际的网页效果,非常直观。

第二步：修改网页标题

在“代码”视图的最上方，你会看到一对标签 <title>无标题文档</title>。 这里的文字会显示在浏览器的标签页上，你可以把它改成你网站的名字，比如改成 <title>我的第一个个人网站</title>。

第三步：添加网页内容（可视化操作）

现在是如何用dw制作简单网站的核心环节——添加内容，在右侧的“设计/实时视图”中,你可以像在Word里打字一样直接输入内容。

1. ：输入“欢迎来到我的网站”，然后在下方找到“属性”面板（如果没找到，可以在顶部菜单栏点击“窗口”->“属性”调出），在属性面板的“格式”下拉菜单中，选择“标题1”（H1）,这行字就会变大变粗。
2. 输入正文段落：换行输入一段介绍性的文字，在属性面板中保持格式为“段落”（P）。
3. 插入图片：将光标放在你想插入图片的位置，点击顶部菜单栏的“插入”->“Image”（图片），在弹出的窗口中选择本地的图片文件，如果图片不在你的网站文件夹内，DW会提示你将其复制进去，点击确定即可，选中图片后,在属性面板还能调整图片的宽度和高度。
4. 添加超链接：输入一行文字，了解更多”，用鼠标选中这几个字，在属性面板的“链接”输入框中，输入你想跳转的网址（https://www.baidu.com），然后回车,这行文字就变成蓝色带下划线的超链接了。

第四步：简单的CSS美化

只有HTML的网页看起来比较朴素,我们可以用DW快速添加一点CSS样式来美化。

1. 选中刚才的大标题（H1），在属性面板右侧点击“CSS”选项卡。
2. 在“目标规则”中选择“新CSS规则”，点击“编辑规则”。
3. 在弹出的对话框中，可以设置字体颜色、背景色、字体大小等，将颜色设为深蓝色，点击“确定”，你会看到代码视图里自动生成了 <style> 标签,而右侧的大标题已经变色了。

第五步：保存与预览

1. 网页制作完成后，一定要保存，按 Ctrl+S（Mac系统为 Cmd+S），选择一个位置保存为 index.html，建议新建一个文件夹专门存放这个网站的所有文件（包括html和图片）,方便以后管理。
2. 预览效果：点击DW顶部工具栏的地球图标，或者按 F12 键，DW会自动调用你电脑上的默认浏览器,展示你刚刚制作的网页。

看到浏览器里呈现出自己做的网页，是不是很有成就感？通过上述步骤，相信你对如何用dw制作简单网站已经有了清晰的认识，DW的强大之处远不止于此，随着你不断学习HTML和CSS知识，你可以利用DW写出更复杂的代码，制作出更加精美、专业的网站,快去动手试试吧！