如何用dreamweaver制作网页：分步实操流程

如何用dreamweaver制作网页，完整操作分为建立本地站点、新建HTML文档、可视化添加页面元素、CSS美化样式、本地测试、FTP上传六个环节，适合零基础学习静态网页的学员、制作企业简易宣传页的设计人员；本方法仅适用于纯HTML+CSS静态页面，不适合开发React、Vue等前端框架项目，同时电脑需要满足AdobeDreamweaver官方硬件配置，内存至少4GB才能保证预览不卡顿。

如何用dreamweaver制作网页：第一步搭建站点目录

你打开软件后不要直接新建文件，先点击顶部菜单栏的站点，选择新建站点，填写站点名称，再选定电脑本地空白文件夹作为站点根目录。

在根目录里手动创建三个子文件夹，images存放所有图片素材，css存放样式文件，js存放脚本文件，所有网页文件直接放在根目录下，能避免后续出现图片链接失效的问题。

如何用dreamweaver制作网页：第二步新建空白网页文档

点击文件菜单，选择新建，在文档类型里选择HTML，布局选择无，文档编码统一设置为UTF-8，点击创建生成空白网页。

页面顶部的文档标题，直接在软件上方的标题输入框填写，文字会显示在浏览器标签栏，不要只在代码内修改。

如何用dreamweaver制作网页：第三步插入文字与图片等页面内容

你可以切换到设计视图，直接在空白页面输入文字；选中文字后，下方属性面板可以修改字体、字号、颜色、对齐方式，软件会自动生成对应HTML代码。

插入图片时点击插入栏里的图像按钮，选中images文件夹里的图片，软件会自动把图片路径转为相对路径，不会出现本地能打开、上传后图片无法显示的情况。

插入超链接时，选中文字，在属性面板的链接栏填写目标网页文件名，站内页面只写文件名，外部网页要填写完整网址。

如何用dreamweaver制作网页：第四步用CSS设置网页样式

打开CSS样式面板，点击新建CSS规则，选择仅对该文档，设置文字、背景、边框等样式，软件会自动把样式代码写入head标签内。

如果页面较多，建议新建外部CSS文件保存到css文件夹，通过链接样式表把样式引入网页，修改一次CSS文件，所有关联页面会同步更新样式，大幅提升维护效率。

如何用dreamweaver制作网页：第五步预览与修正网页错误

按下F12键调用默认浏览器预览页面，检查排版错乱、图片缺失、链接打不开等问题，回到软件内修改内容与路径。

你可以切换到代码视图核对HTML结构，软件自带代码高亮提示，标签未闭合时会给出提醒，减少语法错误。

如何用dreamweaver制作网页：第六步上传网页到远程服务器

打开站点设置，切换到服务器选项，点击加号新增FTP服务器，填写主机地址、账号、密码，设置远程站点文件夹。

连接成功后，在文件面板选中全部网页与素材文件夹，点击上传按钮，把本地文件同步到服务器空间，完成网页上线。

做好站点文件夹管理，是降低网页链接故障的核心手段。