使用Adobe Dreamweaver（简称DW）制作网站是一个结合可视化设计和代码编辑的过程，适合不同水平的开发者，以下是详细步骤，从前期准备到最终发布的完整流程，帮助零基础用户快速上手。
前期规划与素材准备
在开始制作网站前,需明确网站主题和功能，企业官网需包含首页、关于我们、服务项目、联系方式等页面；个人博客则需文章列表、详情页、分类标签等，确定结构后，收集必要素材，包括文字内容、图片（建议使用JPG/PNG格式，尺寸优化以加快加载速度）、视频（MP4格式兼容性较好）等，并将素材按类别整理到文件夹中（如“images”“videos”），便于后期调用。
创建本地站点
本地站点是DW管理网站文件的核心,确保所有页面和资源统一存储。
- 打开DW,点击顶部菜单“站点”→“新建站点”。
- 在弹出的对话框中,填写站点名称（如“我的企业官网”），选择本地站点文件夹路径（建议选择非系统盘，如“D:\website”）。
- 若需连接远程服务器（如后续上传网站到服务器），可在“服务器”选项卡中设置FTP信息；若仅本地测试，可跳过此步。
- 点击“保存”，DW将生成站点管理面板，右侧显示本地文件列表，左侧可切换“文件”“FTP”“性能”等视图。
设计页面布局
创建HTML页面
在站点管理面板中,右键点击“站点根目录”→“新建文件”，命名为“index.html”（首页默认文件名），双击打开文件，DW默认提供“代码”“拆分”“设计”三种视图模式：
- 代码视图：直接编写HTML/CSS/JS代码，适合熟练开发者；
- 设计视图：可视化拖拽元素，类似Word操作，适合新手；
- 拆分视图：左侧代码、右侧设计，实时同步，推荐使用。
使用表格或DIV布局
早期网站常用表格布局,但现代网页更推荐使用DIV+CSS（层叠样式表），灵活性更高。
- 表格布局：点击“插入”→“表格”，设置行数、列数（如首页布局可分3行：header、main、footer），在单元格内添加文字或图片。
- DIV布局：通过“插入”→“布局对象”→“Div标签”创建容器，再通过CSS定位样式，创建一个“header” Div，在设计视图中拖拽调整大小，双击进入编辑，输入网站标题。
添加基础元素
- 文字：直接输入或粘贴，通过属性面板设置字体、大小、颜色（如标题用“微软雅黑 24px 黑色”，正文用“宋体 16px 灰色”）。
- 图片：点击“插入”→“图像”，选择本地图片文件，在属性面板中调整宽高（建议锁定宽高比，避免变形）、添加替代文本（提升SEO）。
- 链接：选中文字或图片，在属性面板的“链接”框中输入目标地址（如“about.html”），或选择“链接到”→“文件”选择本地页面。
使用CSS美化页面
CSS负责网站的视觉呈现,可通过“CSS设计器”面板快速管理样式。
- 创建CSS文件：在站点管理面板中右键→“新建文件”，命名为“style.css”，双击打开，在代码视图首行输入
/* 全局样式 */。 - 链接CSS到HTML：返回“index.html”，点击“插入”→“HTML”→“链接到外部样式表”，选择“style.css”。
- 定义样式：
- 全局样式：在CSS文件中设置body默认字体、背景色（如
body { font-family: "微软雅黑"; background-color: #f5f5f5; }）； - 类选择器：为特定元素添加类（如选中header Div，在属性面板“类”框中输入“header”），在CSS中定义样式（如
.header { background-color: #333; height: 80px; text-align: center; line-height: 80px; color: white; }）； - ID选择器：唯一标识元素（如“#main { width: 1200px; margin: 0 auto; }`），用于布局定位。
- 全局样式：在CSS文件中设置body默认字体、背景色（如
- 响应式设计：通过媒体查询适配不同设备，如添加
@media screen and (max-width: 768px) { .header { height: 60px; font-size: 14px; } }，使手机端显示更友好。
添加交互功能
若需动态效果（如轮播图、表单验证），可使用JavaScript或DW内置行为。
- 轮播图：下载jQuery插件（如swiper），将JS和CSS文件引入HTML，通过DW“插入”→“jQuery内容”→“滑动器”添加，或手动编写HTML结构（如
<div class="swiper"><div class="swiper-wrapper">...<div class="swiper-slide">图片1</div>...</div></div>），在CSS中设置样式，JS中调用插件。 - 表单：点击“插入”→“表单”，添加输入框（文本/邮箱）、文本域、提交按钮等，在属性面板设置“表单ID”“动作”（提交到服务器地址）、“方法”（GET/POST）。
测试与优化
- 本地测试：按F12或在菜单点击“文件”→“在浏览器中预览”，检查页面布局、链接是否正常，图片是否显示。
- 兼容性测试：使用不同浏览器（Chrome、Firefox、Edge）打开，查看样式差异，通过CSS前缀（如
-webkit-）修复兼容问题。 - 性能优化：
- 图片压缩：使用“文件”→“优化”→“图像优化”，或通过第三方工具（如TinyPNG）减小体积；
- 代码压缩：删除CSS/JS中的空格和注释，减少文件大小；
- 清理冗余代码：DW提供“清理HTML/XHTML”功能（“命令”→“清理HTML”）。
上传网站到服务器
完成本地测试后,需将网站文件上传至远程服务器，实现公网访问。
- 在站点管理面板中,切换到“文件”视图，点击“站点”→“管理站点”，选择已创建的站点，点击“编辑”→“服务器”选项卡。
- 点击“添加新服务器”，填写服务器信息：
- 服务器名称（如“阿里云服务器”）；
- 连接方法：选择“FTP”；
- FTP地址：服务器提供的FTP地址（如“ftp.example.com”）；
- 用户名/密码：FTP账户信息；
- 根目录：服务器网站根目录（如“/public_html”）。
- 勾选“使用被动FTP”“测试连接”，点击“确定”。
- 返回站点管理面板,点击“连接”按钮，连接成功后，将本地文件列表中的文件拖拽到远程服务器列表，或右键选择“上传”，上传完成后，通过浏览器访问域名即可查看网站。
相关问答FAQs
Q1：DW制作的网站如何在手机端适配？
A：可通过响应式设计实现：1. 使用流式布局（如宽度设为百分比而非固定像素）；2. 在CSS中添加媒体查询（@media），针对不同屏幕尺寸调整样式（如手机端隐藏侧边栏、缩小字体）；3. 使用DW的“多屏幕预览”功能（“窗口”→“多屏幕预览”），实时查看不同设备效果。
Q2：DW中如何制作表单提交功能？
A：表单提交需后端支持，DW仅负责前端搭建，步骤：1. 插入表单元素（输入框、提交按钮等），设置“表单ID”（如“contactForm”）；2. 在“动作”框中填写后端接收脚本地址（如“submit.php”），选择“方法”为“POST”；3. 提交按钮需设置“类型”为“提交”；4. 后端需编写脚本（如PHP）处理表单数据，如if ($_SERVER["REQUEST_METHOD"] == "POST") { $name = $_POST['name']; // 处理数据 }，若暂无后端，可使用第三方表单工具（如Google表单）生成链接，替换“动作”框中的地址。
