Dreamweaver 是一个功能强大的“所见即所得”（WYSIWYG）网页编辑器，它结合了可视化设计和代码编辑功能，非常适合初学者入门,也足够专业开发者使用。
（图片来源网络，侵删）
整个过程可以分为以下六个主要阶段：
第一阶段：规划与准备
在打开 Dreamweaver 之前,充分的规划是成功的关键。
-
明确网站目标与受众
- 目标： 这个网站是做什么的？是个人博客、企业官网、作品集还是电子商务网站？
- 受众： 你的目标用户是谁？他们需要什么信息？网站的风格应该是什么样的（专业、活泼、简约等）？
-
规划网站结构与内容
（图片来源网络，侵删）- 绘制网站地图： 用思维导图或简单的图表画出网站的主要页面和它们之间的层级关系。
- 首页 -> 关于我们 -> 服务项目 -> 新闻动态 -> 联系我们
- 列出页面内容： 为每个页面规划好需要包含的文本、图片、视频等内容。
- 绘制网站地图： 用思维导图或简单的图表画出网站的主要页面和它们之间的层级关系。
-
准备素材
- 撰写所有页面的文案。
- 收集资源： 准备好要用到的图片、Logo、图标、视频等文件。强烈建议在开始设计前，将这些素材统一整理到一个文件夹中,方便管理。
-
创建本地项目文件夹
- 在你的电脑上创建一个总文件夹，例如命名为
my-website。 - 在这个总文件夹里，创建子文件夹来分类存放不同类型的文件，这是保持网站文件井井有条的好习惯：
images: 存放所有图片。css: 存放样式表文件。js: 存放 JavaScript 文件。fonts: 存放字体文件。
- 在你的电脑上创建一个总文件夹，例如命名为
第二阶段：搭建 Dreamweaver 项目与基础页面
我们可以启动 Dreamweaver,开始创建网站的基础框架了。
-
创建一个新站点
（图片来源网络，侵删）- 这是最重要的一步，创建站点可以让你管理所有文件和链接，确保 Dreamweaver 能正确地预览和上传你的网站。
- 操作路径：
站点->新建站点。 - 在弹出的窗口中：
- 基本设置： 输入你的站点名称（如
My First Website），选择你之前创建的本地项目文件夹 (my-website)。 - 高级设置（可选）： 初学者可以先跳过，高级设置可以让你配置默认的图像文件夹、链接管理、服务器信息等。
- 基本设置： 输入你的站点名称（如
- 完成后，Dreamweaver 的“文件”面板会显示你站点的文件夹结构。
-
创建主页
- 在“文件”面板中，右键点击站点根目录 (
my-website)。 - 选择
新建文件，并将其重命名为index.html。注意： 主页必须命名为index.html（或index.htm）,这是网站的默认入口文件。
- 在“文件”面板中，右键点击站点根目录 (
-
设置页面属性
- 在 Dreamweaver 编辑器中打开
index.html。 - 在菜单栏选择
修改->页面属性。 - 在这里你可以设置：
- 网页标题，会显示在浏览器标签页上（非常重要，利于 SEO）。
- 字符编码： 通常选择
Unicode (UTF-8),以支持中文等多语言。 - 背景图像/颜色： 设置整个页面的背景。
- margins： 设置页面与浏览器窗口边缘的距离。
- 在 Dreamweaver 编辑器中打开
第三阶段：设计页面布局
这是网站设计的核心，我们使用 Dreamweaver 的强大功能来构建页面结构。
-
使用“插入”面板
- Dreamweaver 的“插入”面板提供了各种 HTML 元素的快捷按钮，如
<div>、<p>、<h1>、<img>、<table>等。 - 推荐使用
<div>标签配合 CSS 来布局,这是现代网页设计的标准做法。
- Dreamweaver 的“插入”面板提供了各种 HTML 元素的快捷按钮，如
-
使用“实时视图”和“快速编辑”模式
- 实时视图： 这是 Dreamweaver 的“所见即所得”模式，你可以像在浏览器中一样直接点击、输入和修改内容,非常直观。
- 快速编辑： 将鼠标悬停在“实时视图”的某个元素上，会出现一个紫色的小方块,点击它就可以快速跳转到对应的代码进行修改。
-
创建一个典型的页面布局
- 一个常见的网站布局包含：页眉、导航栏、主内容区、侧边栏 和页脚。
- 操作示例（创建页眉）：
- 将光标放在
index.html的<body>标签内。 - 在“插入”面板中，选择“常用”类别，点击“插入 Div 标签”。
- 在弹出的对话框中，ID 填入
header，然后点击“确定”。 - 切换到“实时视图”，你将看到一个空的
header区域，在其中插入你的 Logo 和导航菜单。
- 将光标放在
-
使用“CSS 设计器”面板
- 这个面板是 Dreamweaver 的核心，用于创建和管理 CSS 样式。
- 创建 CSS 规则：
- 在“CSS 设计器”面板中，点击 号创建一个新的源。
- 选择“创建新的 CSS 文件”，并将其命名为
style.css，Dreamweaver 会自动将这个文件链接到你的 HTML 页面中。 - 在“CSS 设计器”下方，点击 号选择“选择器”。
- 在 HTML 中选择你想要添加样式的元素（在代码视图中点击
<header>标签），然后回到“CSS 设计器”,你刚刚创建的选择器会自动填充。 - 在右侧的“属性”面板中，就可以为
#header设置宽度、高度、背景颜色、内边距等样式了。
第四阶段：填充内容与添加交互
布局完成后,开始向页面添加实际的内容和功能。
-
添加文本
- 直接在“实时视图”中输入文字，或从 Word 等文档中复制粘贴，Dreamweaver 会保留基本的格式。
- 使用“属性检查器”可以设置文本的格式（标题、段落）、字体、大小、颜色和对齐方式。
-
插入图片
- 将光标放在需要插入图片的位置。
- 在“插入”面板中点击“图像”按钮。
- 选择你的图片文件，Dreamweaver 会自动将图片复制到你之前设置的
images文件夹中，并在 HTML 中生成正确的<img>- 在“属性检查器”中，可以设置图片的替代文本（对 SEO 和无障碍访问很重要）、调整大小等。
-
创建超链接
- 选中要链接的文字或图片。
- 在“属性检查器”的“链接”框中输入目标地址。
- 外部链接：
http://www.example.com - 内部链接： 点击文件夹图标，选择网站内的其他页面（如
about.html）。 - 锚点链接： 链接到页面内的某个特定位置。
- 外部链接：
-
插入多媒体元素
- Dreamweaver 可以轻松插入 Flash、视频、音频等，目前主流方式是使用 HTML5 的
<video>和<audio>标签，Dreamweaver 也支持。
- Dreamweaver 可以轻松插入 Flash、视频、音频等，目前主流方式是使用 HTML5 的
第五阶段：测试与优化
在网站发布前，必须进行全面测试,确保它在不同环境下都能正常工作。
-
浏览器兼容性测试
- 实时视图并不能完全模拟所有浏览器，Dreamweaver 提供了“在浏览器中预览”功能。
- 操作路径：
文件->在浏览器中预览->选择浏览器。 - 至少要在 Chrome、Firefox、Edge 和 Safari 这几个主流浏览器中进行测试，检查布局、颜色、功能是否正常。
-
链接检查
- 操作路径：
站点->检查页面->检查链接。 - Dreamweaver 会扫描整个站点，并列出所有断开的链接,方便你修复。
- 操作路径：
-
响应式设计测试
- 如果你设计了响应式网站（能适应不同屏幕尺寸）,需要测试在不同设备上的显示效果。
- 操作路径： 在文档工具栏中，点击“响应式设计视图”按钮，可以模拟手机、平板等不同尺寸的屏幕。
第六阶段：发布与维护
最后一步,将你制作好的网站上传到互联网上。
-
获取 FTP 信息
- 从你的网站托管服务商（如阿里云、腾讯云、GoDaddy、Bluehost 等）获取以下信息：
- FTP 服务器地址
- FTP 用户名
- FTP 密码
- 网站根目录路径（通常是
public_html或www）
- 从你的网站托管服务商（如阿里云、腾讯云、GoDaddy、Bluehost 等）获取以下信息：
-
设置远程服务器
- 操作路径：
站点->管理站点-> 选择你的站点 ->编辑->服务器。 - 点击 号添加新服务器。
- 勾选“FTP”，然后填入你获取到的 FTP 信息。
- 保存设置。
- 操作路径：
-
上传网站
- 连接到远程服务器后，Dreamweaver 的“文件”面板会分为左右两部分：左边是你的本地文件,右边是远程服务器上的文件。
- 从左边选中所有文件和文件夹，直接拖到右边，或者右键点击选择“上传”。
- 等待上传完成,你的网站就可以通过域名访问了！
-
后续维护
网站上线后，你需要定期更新内容、检查链接、进行安全维护，Dreamweaver 的同步功能可以让你轻松地在本地和服务器之间同步文件。
总结与提示
- 代码与视图结合： 不要只依赖“实时视图”，在“代码视图”中查看和理解生成的 HTML 和 CSS 代码,是成为优秀网页开发者的必经之路。
- 善用快捷键： Dreamweaver 提供了大量快捷键,能极大提高你的工作效率。
- 学习基础： 即使使用 Dreamweaver，了解一些基础的 HTML 和 CSS 知识也会让你事半功倍,能更好地解决问题和实现创意。
- 利用模板： 如果多个页面有相似的布局，可以先创建一个模板，然后在其他页面中基于模板创建,修改模板时所有页面都会自动更新。
遵循以上步骤，你就可以使用 Dreamweaver 从零开始，系统地构建出一个功能完整、外观专业的网站,祝你成功！
