使用Dreamweaver（简称DW）新建网站是一个系统性的过程，涉及环境配置、文件管理、页面设计及本地测试等多个环节，以下是详细的操作步骤和注意事项,帮助用户从零开始掌握在DW中创建和管理网站的方法。
准备工作：安装与配置Dreamweaver
在开始新建网站前，需确保电脑已安装Dreamweaver软件（建议使用CC 2019及以上版本，以获得更好的兼容性和功能支持），安装完成后，首次启动DW时，会弹出“欢迎”界面，可选择“新建”或“打开项目”，若未弹出，可通过菜单栏“文件 > 新建”进入新建页面。
创建站点：定义网站根目录
站点是DW管理网站文件的核心，需明确网站的本地根目录（存储网站所有文件的文件夹），操作步骤如下：
- 打开站点管理器：通过菜单栏“站点 > 新建站点”，或启动DW后在欢迎界面选择“站点 > 新建站点”。
- 填写站点基本信息：在弹出的“站点设置对象”对话框中，切换到“站点”选项卡，输入站点名称（如“我的个人网站”），该名称仅用于DW内部识别，不影响网站实际显示。
- 设置本地站点文件夹：点击“本地站点文件夹”后的文件夹图标，选择电脑中的一个空文件夹或新建文件夹作为网站根目录（如“D:\MyWebsite”），建议使用英文或拼音命名，避免中文路径导致兼容性问题。
- 选择站点技术：在“站点”选项卡下方，可根据网站类型选择技术（如“HTML”“PHP”“ASP.NET”），若不确定，可选择“无”。
- 完成创建：点击“保存”按钮，站点创建成功，DW会在“文件”面板中显示该站点根目录,初始为空。
添加网站文件与文件夹
网站通常包含多个页面（如首页、关于我们、联系方式等）和资源（图片、CSS、JavaScript等），需合理规划文件结构。
- 创建文件夹：在“文件”面板中右键单击站点根目录，选择“新建文件夹”，分别创建“images”（存放图片）、“css”（存放样式表）、“js”（存放脚本）等文件夹，便于分类管理。
- 创建HTML页面：右键单击站点根目录，选择“新建文件”，将默认文件名“untitled.html”修改为“index.html”（网站首页文件名通常固定为index.html或default.html），同理，可创建“about.html”“contact.html”等页面。
- 文件命名规范：文件名需小写、不含空格（可用下划线“_”或短横线“-”替代），about_us.html”而非“About Us.html”,避免部分服务器因大小写或空格导致文件无法访问。
设计网页内容：使用DW可视化编辑器
DW支持“代码视图”“设计视图”和“实时视图”三种模式，可根据需求切换使用。
- 编辑首页内容：双击“文件”面板中的“index.html”，在编辑区打开页面，默认情况下，DW会生成HTML5基础结构（
<!DOCTYPE html>、<html>、<head>、<body>标签）。 - 添加文本与标题：在设计视图中，直接输入文本内容，选中后可在“属性”面板中设置字体、大小、颜色等；或通过“插入 > 标题”插入H1-H6标题（H1通常用于首页主标题，利于SEO）。
- 插入图片：将图片素材放入“images”文件夹后，在设计视图中右键选择“插入 > 图像”，或通过菜单栏“插入 > 图像”选择图片文件，插入后，可在“属性”面板中调整图片大小、替换文本（图片加载失败时显示）、添加链接等。
- 创建超链接：选中文字或图片，在“属性”面板的“链接”栏中输入目标文件名（如“about.html”）或外部URL（如“https://www.baidu.com”），还可设置链接打开方式（如“_blank”在新窗口打开）。
应用CSS样式：美化网页外观
CSS用于控制网页的视觉呈现，可通过DW内置的“CSS设计器”快速创建样式。
- 创建CSS文件：在“css”文件夹中右键单击，选择“新建文件”，命名为“style.css”。
- 链接CSS到HTML：打开HTML页面（如index.html），切换到“代码视图”，在
<head>标签内添加<link rel="stylesheet" href="css/style.css">；或通过菜单栏“插入 > CSS > 链接外部样式表”选择CSS文件。 - 设计CSS样式：在“CSS设计器”面板中，可创建“选择器”（如
.header控制页头样式）、“属性”（如background-color设置背景色、font-size设置字体大小），为页头设置红色背景和白色文字：.header { background-color: #ff0000; color: white; padding: 20px; text-align: center; } - 应用样式：在设计视图中选中页头元素，在“属性”面板的“类”下拉菜单中选择
.header，样式即可生效。
本地测试：预览网站效果
完成页面设计后，需在本地浏览器中测试网站功能与兼容性。
- 预览页面：在DW中打开HTML页面，按快捷键F12，或通过菜单栏“文件 > 在浏览器中预览”选择浏览器（如Chrome、Firefox）。
- 检查问题：重点测试超链接是否有效、图片是否正常显示、CSS样式是否符合预期，若发现问题，切换回DW编辑页面调整代码或样式，重新预览直至满意。
- 响应式测试：若需适配移动端，可通过DW的“实时视图”切换设备模拟器（如手机、平板），检查页面在不同屏幕尺寸下的显示效果，必要时使用CSS媒体查询（
@media）调整布局。
上传网站：部署到服务器
本地测试无误后，需将网站文件上传到远程服务器，实现网站上线。
- 配置远程服务器：在“站点设置对象”对话框中切换到“远程服务器”选项卡，点击“+”号选择服务器类型（如“FTP”“SFTP”），填写服务器地址、用户名、密码等信息，测试连接成功后保存。
- 上传文件：在“文件”面板中，单击“远程”视图，连接服务器后，选中本地站点文件，点击“上传”按钮（或拖拽文件到远程区域），上传完成后，通过浏览器访问服务器域名即可查看网站。
维护与更新：管理网站内容
网站上线后，需定期更新内容并维护文件结构。
- 编辑文件：在DW中打开本地站点文件，修改内容后保存，重新上传即可更新网站。
- 同步文件：若远程服务器有修改（如误删文件），可通过“文件”面板的“同步”功能，将本地文件与远程文件保持一致。
- 备份文件：定期备份本地站点文件夹和远程服务器文件，避免数据丢失。
表格：Dreamweaver新建网站关键步骤概览
| 步骤 | 注意事项 | |
|---|---|---|
| 创建站点 | 定义站点名称、本地根目录 | 避免中文路径，文件夹结构清晰 |
| 添加文件与文件夹 | 创建HTML页面、images/css/js文件夹 | 文件名小写、无空格，首页命名为index.html |
| 设计网页内容 | 使用设计视图编辑文本、图片，插入超链接 | 图片存入images文件夹，添加替换文本 |
| 应用CSS样式 | 创建外部CSS文件，链接到HTML，通过CSS设计器设置样式 | 使用类选择器便于复用，保持代码简洁 |
| 本地测试 | 按F12预览页面，检查链接、图片、样式 | 多浏览器测试，确保兼容性 |
| 上传网站 | 配置远程服务器（FTP/SFTP），上传本地文件 | 备份服务器信息，上传前确保本地测试无误 |
| 维护更新 | 定期编辑文件、同步远程、备份 | 备份重要数据，避免误操作 |
相关问答FAQs
问题1：Dreamweaver中创建网站时，提示“无法创建本地站点文件夹”，如何解决？
解答：该问题通常是由于文件夹路径包含中文、权限不足或文件夹被占用导致，可尝试以下方法：① 将站点文件夹路径改为英文（如“D:\MyWebsite”）；② 检查该文件夹是否有其他程序占用，关闭后重试；③ 右键单击目标文件夹，选择“属性 > 安全”，确保当前用户有“完全控制”权限；④ 若使用macOS系统，确保DW有访问该文件夹的权限（系统偏好设置 > 安全性与隐私 > 隐私 > 文件夹）。
问题2：在DW中设计的网页，本地预览正常，但上传到服务器后样式错乱，是什么原因？
解答：常见原因包括：① CSS文件路径错误（如相对路径未正确配置，导致服务器无法加载样式表），建议使用绝对路径（如/css/style.css）或确保CSS与HTML文件在正确的相对位置；② 服务器不支持某些CSS属性（如旧版IE不兼容flex布局），需检查服务器环境并调整CSS代码；③ 文件编码不一致（如HTML使用UTF-8，而CSS被保存为GBK），统一所有文件编码为UTF-8（可通过DW菜单栏“修改 > 页面属性 > 标题/编码”设置）。
