Dreamweaver 网站建设完整步骤
整个过程可以分为五个主要阶段：
（图片来源网络，侵删）
- 规划与准备阶段
- 创建与管理站点阶段
- 设计与开发阶段
- 测试与优化阶段
- 发布与维护阶段
第一阶段：规划与准备
在打开 Dreamweaver 之前，清晰的规划是成功的关键。
-
确定网站目标与受众
- 目标： 网站是用来做什么的？（展示作品、销售产品、发布博客、提供服务？）
- 受众： 你的网站是给谁看的？（客户、学生、特定兴趣群体？）这决定了网站的风格和内容。
-
规划网站结构
- 绘制网站地图： 用树状图或列表规划出网站的所有页面和它们之间的层级关系。
- 首页
- 关于我们
- 团队介绍
- 公司历史
- 产品服务
- 产品 A
- 产品 B
- 联系我们
- 文件命名： 为所有页面和文件夹想好清晰、简洁的英文名称。
about-us.html而不是guanyuwomen.html，这有助于 SEO 和代码可读性。
- 绘制网站地图： 用树状图或列表规划出网站的所有页面和它们之间的层级关系。
-
收集与整理资源
（图片来源网络，侵删）- 准备好所有文字、图片、视频等素材。
- 图片： 使用图像处理软件（如 Photoshop）优化图片大小和格式，以提高网站加载速度。
- 素材存放： 创建一个本地文件夹，用来存放所有网站相关的文件，如
my-website。
第二阶段：创建与管理站点
这是在 Dreamweaver 中正式开始工作的第一步，也是最关键的一步，Dreamweaver 的“站点”功能可以管理所有文件，避免链接错误。
-
打开 Dreamweaver，创建新站点
- 启动 Dreamweaver。
- 在欢迎屏幕,点击 “站点” -> “新建站点”。
- 或者,在顶部菜单栏选择 “站点” -> “新建站点”。
-
填写站点信息
- 站点名称： 给你的站点起一个名字（如“我的公司官网”），这个名字只显示在 Dreamweaver 中，不会出现在网站上。
- 本地站点文件夹： 点击文件夹图标，选择你之前在第一阶段中创建的那个本地文件夹（如
my-website）。这是告诉 Dreamweaver 你网站所有文件存放的位置。
-
设置高级设置（可选但推荐）
- 在创建向导中,你可以切换到“高级设置”标签。
- “本地信息”：
- 默认图像文件夹： 指定一个专门存放图片的子文件夹（如
images），这样插入图片时默认路径就对了。 - 默认链接管理： 勾选“相对于文档”，这样创建的链接是相对路径，便于网站移动。
- 默认图像文件夹： 指定一个专门存放图片的子文件夹（如
- “服务器”：
- 这是连接到远程服务器的设置,用于上传和发布网站。
- 点击 号，选择服务器类型（通常是 FTP）。
- 填写你的主机名、FTP 用户名、密码等信息，这些信息由你的网站空间提供商提供。
- 设置完成后,Dreamweaver 就能帮你把本地文件同步到服务器上。
-
检查文件面板
- 创建完成后,右侧的 “文件” 面板会显示你的站点结构。
- 你可以在这里创建新的文件夹（如
css,js,images）和 HTML 页面，右键点击即可进行新建、重命名、删除等操作。
第三阶段：设计与开发
现在可以开始创建网页了,Dreamweaver 提供了多种视图，你可以根据需要切换。
-
创建首页
- 在“文件”面板中，右键点击站点根目录，选择 “新建文件”，将其命名为
index.html，这是网站的默认首页。
- 在“文件”面板中，右键点击站点根目录，选择 “新建文件”，将其命名为
-
选择工作视图
- Dreamweaver 有三种核心视图，位于文档窗口的右上角：
- “实时视图” (Live View)：所见即所得的预览模式，可以看到最终效果，但不能直接编辑代码。
- “代码视图” (Code View)：纯代码编辑模式，适合高级开发者精确控制。
- “拆分视图” (Split View)：强烈推荐初学者使用！ 它将窗口分为上下两部分，上面是代码，下面是实时预览，你在代码里改一点，预览里就能立刻看到变化，学习效果极佳。
- Dreamweaver 有三种核心视图，位于文档窗口的右上角：
-
使用“插入”面板添加内容
- 左侧的 “插入” 面板提供了各种常用元素的快捷按钮。
- 布局：可以插入
div容器、表格、列表等来构建页面结构。 - 常用：插入图像、超链接、表格、按钮等。
- 表单：插入表单元素，如文本框、下拉菜单、提交按钮，用于创建用户交互。
- 媒体：插入视频、音频、Flash 等。
-
应用 CSS 样式
- 创建 CSS 文件：在“文件”面板中新建一个
css文件夹，然后在其中创建一个style.css文件。 - 链接 CSS：在
index.html的代码视图中，找到<head>标签内，添加以下代码：<link rel="stylesheet" href="css/style.css">
- 应用样式：
- “CSS 设计器”面板：在右侧面板中打开“CSS 设计器”，你可以在这里直观地创建、选择和编辑 CSS 规则（如颜色、字体、边距、布局等）。
- 实时编辑：在拆分视图中，选中页面上的某个元素（如一个标题），在“CSS 设计器”中修改它的样式，代码和预览会实时更新。
- 创建 CSS 文件：在“文件”面板中新建一个
第四阶段：测试与优化
在网站发布前,必须进行全面的测试，确保它在不同设备和浏览器上都能正常显示。
-
在浏览器中预览
- 使用 Dreamweaver 顶部工具栏的 “在浏览器中预览” 按钮（地球图标），可以快速在 Chrome、Firefox、Edge 等主流浏览器中打开并测试网站。
- 关键点： 务必在不同的浏览器上测试！ 因为不同浏览器对 CSS 和 HTML 的解析可能存在差异。
-
检查链接
- Dreamweaver 可以自动检查站点内的所有链接，找出断掉的链接。
- 在顶部菜单选择 “站点” -> “检查链接” -> “整个本地站点”。
-
检查响应式设计
- 如果你的网站是响应式的（应该都是），需要测试在不同屏幕尺寸下的表现。
- 在 “实时视图” 中，点击视图左下角的 “设备” 图标，可以切换到不同设备的预览模式（如手机、平板）。
-
性能优化
- 检查图片是否过大,确保已进行压缩。
- 检查 CSS 和 JavaScript 文件是否可以合并或压缩，以减少加载时间。
第五阶段：发布与维护
网站开发完成,现在需要把它放到互联网上供人访问。
-
上传网站文件
- 确保你在第二阶段已经配置好了服务器信息。
- 在 “文件” 面板中，确保你正在查看的是“远程”视图（而不是“本地”）。
- 选择本地站点中的所有文件和文件夹,然后点击右上角的 “上传” 按钮（向上的箭头），Dreamweaver 会将所有文件同步到你的服务器上。
-
维护网站
- 同步文件：当你在本地修改了文件后，只需在“文件”面板中选择修改的文件，点击“同步”或“上传”即可更新到服务器。
- 获取文件：如果你想下载服务器上的文件进行编辑，可以使用“获取”功能。
专业建议与技巧
- 善用模板：如果你有多个页面需要相同的布局（如页头、页脚），可以创建一个模板，修改模板后，所有基于该模板的页面都可以一键更新。
- 利用“快速编辑”：在“实时视图”中，将鼠标悬停在某个元素上，会出现一个小的编辑图标，点击它可以直接修改该元素的 HTML 或 CSS，非常方便。
- 学习基础代码：Dreamweaver 是强大的工具，但不要完全依赖它，花点时间学习 HTML 和 CSS 的基础知识，会让你更理解网站的工作原理，并能解决更复杂的问题。
- 版本控制：对于大型项目，可以考虑使用 Git 等版本控制系统来管理代码，Dreamweaver 也支持 Git 集成。
遵循以上步骤,你就可以使用 Dreamweaver 从零开始，系统、高效地构建一个功能完善的网站，祝你成功！
