零基础保姆级教程，DW个人网站制作全攻略
本教程是一份专为零基础初学者打造的Dreamweaver（DW）个人网页制作全攻略，内容涵盖DW软件基础操作、HTML与CSS代码入门、页面排版布局、图文添加及超链接设置等核心步骤，通过手把手的保姆级指导，打破技术门槛，帮助小白快速掌握网站开发与上线发布流程，轻松实现从零到一搭建个性化个人网站的目标。
在如今这个数字化时代,拥有一个专属的个人网站不仅能作为精美的在线简历，还能用来分享生活点滴或打造个人品牌，对于初学者来说，Adobe Dreamweaver（简称DW）是一款非常友好的可视化网页编辑工具，它结合了“所见即所得”的便捷操作和代码编写的灵活性，我们就来分享一份详细的dw个人网站制作教程，手把手教你从零开始打造属于自己的网页。
准备工作
在开始制作之前,你需要做好以下准备：
- 安装软件： 下载并安装Adobe Dreamweaver软件（建议使用较新版本，如DW 2021或更高）。
- 规划网站结构： 在动手之前，先想好你的网站要放什么内容，一个基础的个人网站需要包含：首页（index.html）、关于我（about.html）、联系我（contact.html）等页面。
- 准备素材： 收集好你需要在网站上展示的个人照片、图标以及文案内容，并在电脑里新建一个名为“mywebsite”的文件夹，将素材放进去，方便管理。
在DW中新建站点
建立站点是使用DW的第一步,这能帮你更好地管理网页文件和图片资源。
- 打开DW软件,在顶部菜单栏选择“站点” -> “新建站点”。
- 在弹出的窗口中,为你的站点命名（我的个人网站”）。
- 在“本地站点文件夹”一栏，浏览并选择你刚刚在桌面上创建的“mywebsite”文件夹。
- 点击“保存”，你在右下角的“文件”面板中就能看到你的站点目录了。
创建并搭建HTML页面
新建首页文档
点击“文件” -> “新建”，选择文档类型为“HTML”，点击“创建”，将这个空白文档保存为 index.html 放在站点根目录下。
认识DW的工作区 DW的顶部有三种视图模式：代码视图、拆分视图和实时视图（设计视图），初学者建议使用“拆分视图”，这样左边能看到自动生成的代码，右边能直观地看到页面效果。
搭建基础结构
在实时视图中，你可以直接输入文字，尝试在页面顶部输入你的名字作为网站大标题，然后回车输入一句个性签名。
如果你切换到代码视图，会看到DW自动为你生成了 <h1> 和 <p> 等HTML标签。
使用CSS美化页面
纯HTML的网页非常简陋,我们需要CSS来给它“化妆”，在DW中，CSS样式的添加非常简单。
修改页面背景和字体 点击顶部菜单的“修改” -> “页面属性”，在弹出的窗口中，你可以轻松设置外观（CSS）：
- 外观：可以修改页面的背景颜色或背景图片。
- 页面字体：选择一个好看的字体（如微软雅黑）。
- 大小：设置正文字体大小（如16px）。
- 文本颜色：设置字体颜色。 设置完毕后点击“应用”，你会发现页面瞬间变好看了。
插入图片和DIV布局 为了让页面排版更规整，我们需要使用DIV容器。
- 在顶部菜单选择“插入” -> “Div”。
- 在弹出的窗口中,给Div设置一个ID或类（例如命名为
header），点击“确定”。 - 删除Div内的默认文字,然后在右侧的“插入”面板中，将你准备好的个人头像图片拖入Div中。
- 重复上述操作,再插入一个名为
content的Div，用来放置你的个人简介、技能列表等内容。
调整DIV样式
如果想让图片居中，或者让内容板块有边框，可以按 Shift+F11 打开“CSS设计器”面板，选中你刚刚创建的类（如 .content），在属性面板中设置 margin: 0 auto;（居中对齐），还可以添加内边距、背景色等，实现更精致的排版。
添加超链接与互动
一个网站不能只有单页,需要把各个页面串联起来。
- 选中页面顶部的“关于我”几个字。
- 在底部属性面板的“链接”框中，点击文件夹图标，选择你提前建好的
about.html文件。 - 按照同样的方法,为首页添加导航栏，链接到不同的子页面。
- 完成后,按
F12键，DW会自动在浏览器中打开网页，你可以点击链接测试跳转效果。
测试与发布上线
本机制作完成后,别忘了检查各个页面的文字是否有错别字，图片是否能正常显示，链接是否都能正确跳转。
如果你希望全世界都能访问你的网站,还需要购买一个域名和虚拟主机空间，DW自带FTP功能，你可以通过“站点” -> “管理站点” -> “服务器”选项，填入主机商提供的FTP地址、用户名和密码，然后直接点击“全部上传”，将本地文件一键部署到云端。
通过这篇dw个人网站制作教程，相信即使是零基础的小白，也能在几个小时内搭建出一个结构清晰、排版美观的个人网页，DW最大的优势在于它降低了前端开发的门槛，让你在可视化的操作中潜移默化地学习HTML和CSS代码，赶紧打开软件，开启你的建站之旅吧！随着练习的深入，你完全可以脱离教程，打造出更具个性化的专属网络空间。
