dreamweaver网站制作教程-贝博恩创新科技网

Dreamweaver作为一款经典的网页设计与开发工具，凭借其可视化编辑功能和代码编写环境的结合，至今仍被许多开发者用于网站制作，本文将从基础操作到核心功能，详细解析Dreamweaver网站制作的完整流程,帮助初学者快速上手。

（图片来源网络，侵删）

准备工作：安装与界面熟悉

需安装Adobe Dreamweaver（建议选择CC版本，功能更全面），安装完成后，打开软件会显示“开始”页面，可选择“新建”创建项目，Dreamweaver的工作区主要由“文件”面板、“插入”面板、“属性检查器”和“文档”窗口组成：

站点是Dreamweaver的核心，所有文件需通过站点统一管理，点击“站点”→“新建站点”，弹出站点设置对话框：

完成后，“文件”面板会显示站点结构，建议创建标准文件夹分类，如images（存放图片）、css（样式表）、js（脚本）等,便于后期维护。

在“文件”面板右键点击站点根目录，选择“新建文件”，命名为index.html（首页默认文件名），双击打开后，在“设计”视图可直接输入文本，或通过“插入”面板添加元素（如标题、段落、图片）。

（图片来源网络，侵删）

表格是网页布局的基础工具，点击“插入”→“表格”，设置行数、列数及表格宽度（建议使用百分比或响应式单位），创建一个3列、2行的表格用于页面结构：

列1	列2	列3
导航栏	区	侧边栏
页脚	页脚	页脚

选中表格后，可在“属性检查器”调整边框、间距、背景色等属性。

Dreamweaver支持CSS可视化编辑，可通过“CSS设计器”面板创建样式。

为导航栏设置背景色：在.header样式中添加background-color: #333; color: #fff; padding: 10px;，导航栏文字即可变为白色背景、深色文字。

（图片来源网络，侵删）

选中文字或图片，在“属性检查器”的“链接”栏输入目标URL（如about.html），若为页面内锚点链接，先在目标位置插入“命名锚点”（“插入”→“命名锚点”），再链接到锚点名称（如#top）。

表单用于用户数据收集，点击“插入”→“表单”，插入表单域后，可添加文本框、密码框、提交按钮等：

为适配不同设备，需添加媒体查询，在style.css中写入：

@media screen and (max-width: 768px) {
    .table { display: block; }
    .header { font-size: 14px; }
}

Dreamweaver的“实时视图”可预览不同屏幕尺寸下的效果，点击“文档”窗口右下角的设备图标切换。

完成页面后，需在浏览器中预览效果，点击“文件”→“在浏览器中预览”→“预览在[浏览器名称]”，检查布局、链接、表单是否正常。

若已配置服务器，通过“文件”面板选中需上传的文件，点击“上传”按钮即可，上传后，需通过浏览器访问域名,确认网站可正常访问。