dreamweaver网页设计与制作

1. 新建站点并规划目录
   打开 Dreamweaver 后，先执行「站点」菜单中的「新建站点」，为项目命名并指定本地文件夹。站点文件夹内建议建立 images、css、js 等子目录，分别存放图片、样式表和脚本文件。这样做的目的是让 Dreamweaver 能正确识别相对路径，后续插入图片或链接外部 CSS 时不会出现路径错误。如果只是临时做一个单页，也可以跳过站点直接新建 HTML 文件，但正式制作网页时建议始终先建站点，方便管理多个页面和资源。
2. 用设计视图搭建页面布局
   新建 HTML 文件后，默认会进入设计视图。在设计视图中，可以直接输入文字、插入图片和表格，操作方式类似 Word。要搭建常见布局，可以点击「插入」面板中的「Div」按钮，插入多个区块并分别设置 ID 或类名，例如 header、nav、main、footer。然后通过「属性」面板为每个 Div 设置宽度、背景色和浮动等样式。设计视图适合快速搭建结构，但精确控制样式时，需要切换到代码视图手动编写 CSS。
3. 在代码视图中编写 HTML 和 CSS
   点击文档工具栏的「代码」按钮即可切换到代码视图。Dreamweaver 的代码视图提供语法高亮、代码提示和标签补全，输入 < 时会自动弹出标签列表，按回车即可补全。编写 CSS 时，可以新建一个外部样式表文件（.css），然后在 HTML 的 head 部分用 标签引入。例如在 css 文件夹中创建 style.css，然后在 中写 。代码视图和设计视图是实时同步的，修改代码后切回设计视图即可看到效果。
4. 插入图片、链接和多媒体
   在网页中插入图片时，点击「插入」菜单中的「图像」，选择本地图片文件，Dreamweaver 会自动生成相对路径并显示图片尺寸。插入超链接时，选中文字或图片，在「属性」面板的「链接」输入框中填写目标地址，可以填外部网址（如 https://example.com）或站内页面（如 about.html）。插入视频或音频时，可以使用「插入」菜单中的「HTML5 Video」或「Audio」选项，并设置源文件路径。所有资源文件都应放在站点目录内，否则预览时可能无法显示。
5. 预览、调试并发布网页
   完成页面制作后，按 F12 键可以在浏览器中预览效果。如果发现样式错乱，可以打开浏览器的开发者工具（按 F12）检查元素，查看 CSS 是否被正确应用。Dreamweaver 还提供「实时视图」，可以模拟浏览器环境，方便调试。发布网页时，如果已有服务器空间，可以使用「站点」菜单中的「管理站点」，配置远程服务器信息，然后点击「上传」按钮将文件同步到服务器。如果没有服务器，也可以将整个站点文件夹打包，交给托管服务商处理。

软件页面：Dreamweaver。