零基础到上线！Dreamweaver（DW）个人网站制作全攻略

2026-07-20 17:27:51 125阅读

本全攻略面向网站制作零基础用户，完整覆盖Dreamweaver（DW）从0规划到正式上线的全流程，兼顾可视化操作的便捷性与基础代码学习的实用性，攻略核心环节清晰：前期确定个人网站定位（如展示作品集、分享博客）与板块内容；中期依托DW内置站点管理新建项目，通过布局网格、响应式断点搭建适配多端的页面框架，填充文字、图片等多媒体元素，补全锚点跳转等基础交互，同步做浏览器兼容性调试；后期完成域名空间部署，即可发布个人网站雏形。

在数字化时代，拥有一个专属个人网站是展示自我、分享内容的绝佳方式，Adobe Dreamweaver（简称DW）作为一款兼具可视化设计与代码编辑的网页制作工具，对新手友好的同时也能满足专业需求，是制作个人网站的理想选择，下面就跟着步骤,一步步用DW打造你的专属网站吧！

前期准备：明确方向，收集素材

动手制作前,先做好规划能让后续工作更顺畅：

确定网站主题：你想做什么类型的个人网站？是简历展示、摄影作品集、技术博客还是兴趣分享？主题明确后,内容和风格就有了方向。
规划网站结构：画出简单的“网站地图”，比如常见的结构：首页 → 关于我 → 作品展示 → 联系方式,每个页面需要什么内容先列出来。
收集素材：准备文字内容（自我介绍、作品描述）、图片（个人照片、作品图、背景图）、图标（社交媒体图标等），并把这些素材统一放在一个文件夹里（比如命名为“mywebsite”）,方便后续管理。

在DW中创建你的第一个站点

DW的“站点管理”功能能帮你统一管理网站文件，避免路径出错,这是关键的第一步：

打开Dreamweaver，点击顶部菜单栏的【站点】→【新建站点】。
在弹出的窗口中：
- 站点名称：输入你的网站名字（我的个人网站”）,这个名字仅在DW中显示。
- 本地站点文件夹：点击文件夹图标，选择你刚才准备的“mywebsite”文件夹（素材都放这里），点击【选择】。
点击【保存】，站点就创建完成了！右侧的“文件”面板会显示你的站点文件夹。

新建HTML页面，搭建基础结构

HTML是网页的“骨架”,我们先从最简单的首页开始：

点击顶部菜单栏【文件】→【新建】，在弹出的窗口中选择【HTML】，文档类型选“HTML5”（现在主流标准），点击【创建】。
保存页面：点击【文件】→【保存】，文件名设为“index.html”（这是网站的默认首页，必须用这个名字），保存在“mywebsite”文件夹里。

现在你会看到DW的界面分为三部分：

左侧：文件面板（管理站点文件）；
中间：“设计视图”（可视化看页面效果）和“代码视图”（写代码的地方，可切换“拆分视图”同时看两者）；
右侧：CSS样式面板（后面美化会用到）。

用可视化工具布局页面（新手友好）

DW的“设计视图”能让你像拼积木一样搭建页面,不用先写复杂代码：

设置页面基本属性

点击【修改】→【页面属性】,在弹出的窗口中可以设置：

外观：页面背景颜色、字体大小和颜色；
链接：链接的默认颜色、点击后的颜色；编码：网页标题（小明的个人网站”，会显示在浏览器标签页）。

插入导航栏

导航栏是页面的“指路牌”,我们用Div标签来做：

点击【插入】→【Div】，在弹出的窗口中给Div起个类名（nav”），点击【确定】。
在Div里输入导航文字：“首页 | 关于我 | 作品展示 | 联系方式”。

插入个人简介和图片

再插入一个Div，类名设为“content”,用来放主要内容。
在“content”里输入自我介绍的文字。
插入图片：把光标放在想放图片的地方，点击【插入】→【图像】，选择你准备的个人照片，点击【确定】，如果图片太大，可以在“属性”面板（底部）调整宽度和高度。

插入底部信息

用CSS美化页面（让网站更漂亮）

CSS是网页的“外衣”，能让页面变好看,用DW的CSS样式面板很方便：

打开右侧的【CSS样式】面板，点击右下角的“新建CSS规则”按钮。
比如给导航栏“nav”设置样式：
- 选择器类型选“类”，选择器名称输入“.nav”，定义在“新建样式表文件”（方便后续管理），点击【确定】。
- 保存样式表为“style.css”（放在“mywebsite”文件夹）。
- 在弹出的样式设置窗口中：
  - 类型：设置字体为“微软雅黑”,大小16px；
  - 背景：设置背景颜色为浅蓝色；
  - 区块：文本居中；
  - 方框：设置内边距（padding）为10px,让文字不贴边。
- 点击【确定】,导航栏就有背景和居中效果了！
用同样的方法给“content”设置样式（比如宽度800px，居中显示），给图片设置圆角（在“边框”里选“圆角”）,慢慢调整直到你满意。

添加链接，让页面“动”起来

现在我们有了首页，再做一个“关于我”页面,然后用链接连起来：

新建HTML文件，保存为“about.html”,简单做个关于我的内容。
回到“index.html”，选中导航栏里的“关于我”文字。
在底部的“属性”面板里，点击“链接”旁边的文件夹图标，选择“about.html”，点击【确定】。
同理，给“首页”链接到“index.html”,其他页面也依次创建并链接。

如果想加外部链接（比如你的微博），选中文字后，在“链接”框里直接输入网址（https://weibo.com/xxx”），然后在“目标”里选“_blank”（这样点击会在新窗口打开）。

测试网站：检查效果和兼容性

制作完成后,一定要测试：

点击DW顶部的“地球”图标（在“设计视图”上方），选择一个浏览器（比如Chrome、Edge）预览页面。
检查所有链接能不能正常打开，图片有没有显示,文字排版有没有问题。
最好在不同浏览器里都试一下,确保兼容性。

上线网站：让别人看到你的作品

网站做好了，怎么让别人访问？需要两个东西：域名（xiaoming.com”）和服务器空间（存储网站文件的地方）。

购买域名和空间：可以在阿里云、腾讯云等平台购买,新手可以先选便宜的入门套餐。
用DW上传文件：
- 点击【站点】→【管理站点】，选中你的站点，点击【编辑】。
- 切换到【服务器】选项卡，点击“+”添加服务器：
  - 服务器名称：随便填（我的服务器”）；
  - 连接方法：选“FTP”；
  - FTP地址：输入空间商给你的FTP地址；
  - 用户名和密码：输入空间商给的账号密码；
  - 根目录：输入空间商指定的目录（public_html”）。
- 点击【测试】，连接成功后点击【保存】。
回到“文件”面板，点击“上传文件”按钮（向上的箭头），把所有文件上传到服务器，然后用域名访问,你的个人网站就上线啦！

写在最后

用DW制作个人网站并不难，关键是多动手练习，一开始可以做简单的页面，慢慢再学习HTML、CSS的更多知识，加入动画、表单等功能，希望这篇攻略能帮你开启网页制作的大门,打造出独一无二的个人网站！

如果在操作中遇到问题，也可以多看看DW的帮助文档或网上的教程，慢慢积累经验,你也能成为网页制作小达人！