怎么用dreamweaver制作网页：完整实操流程

怎么用dreamweaver制作网页，优先选择新建站点管理文件、拆分视图同步编辑代码与可视化界面，适合掌握基础HTML标签、想要快速搭建静态页面的学习者，不适合需要复杂后端交互、大规模企业级网站开发的场景，你可以先建立本地站点统一存放图片、css、html文件，避免路径错乱，再依次搭建页面结构、添加样式、插入素材、测试预览，最终导出文件上传到服务器。

dreamweaver站点建立

打开软件后点击站点菜单里的新建站点，站点名称填写便于识别的文字，本地站点文件夹选定电脑上单独新建的空文件夹，这个文件夹会存放网页全部资源，不要和其他文档混放。站点设置完成后，在文件面板内右键新建HTML文档，文档类型默认选择HTML5，编码设置为UTF-8，减少中文乱码的出现概率。不要直接在桌面零散保存网页文件，图片引用时容易出现相对路径失效，浏览器打开后图片无法正常加载。

站点是网页资源的统一容器。

dreamweaver页面结构编辑

切换到拆分视图，窗口上方显示代码，下方是可视化预览区域，修改任意一侧内容另一侧会同步更新。在代码区域body标签内部编写基础结构，用div划分头部、内容区、侧边栏、底部，可视化视图里可以直接拖动标尺辅助对齐元素，选中元素后在属性面板调整宽高、对齐方式。你也可以使用插入菜单里的结构标签，一键添加标题、段落、列表，软件自动生成对应的HTML代码，降低手写代码的工作量。

dreamweaver样式设置方式

样式分为行内样式、内部样式表、外部CSS文件三种，不同方式有对应的适用场景，对比信息如下。

新建外部CSS文件后保存到站点内单独的css文件夹，通过CSS设计器面板选择选择器，设置文字颜色、字号、边距、背景，改动会同步作用到所有引入这份样式表的网页，修改全站样式时效率更高。

dreamweaver素材插入与链接设置

点击插入菜单选择图像，从站点文件夹里选中图片文件，软件自动生成相对路径，不要引用站点以外位置的图片，上传服务器之后图片大概率丢失。选中文字或者图片，在属性面板的链接输入框填写地址，站内页面跳转填写本地html文件名，站外跳转填写完整网址，目标选项选_blank可以让链接在新浏览器标签打开。音频、视频素材同样从插入面板添加，素材文件全部归入站点内对应的文件夹。

所有素材必须放进站点目录。

dreamweaver网页预览与兼容性测试

按下F12快捷键调用默认浏览器预览页面，查看布局错位、图片不显示、链接失效等问题，返回软件内调整代码或者样式。软件自带实时视图功能，不用反复刷新浏览器，直接在软件窗口观察页面渲染效果。多准备两款主流浏览器分别打开网页，不同浏览器对部分CSS属性渲染存在差异，提前调整样式降低显示不一致的情况。

dreamweaver网页导出上传

页面调试完成，保存全部关联文件，把整个站点文件夹内的内容上传至虚拟主机或者云服务器的web根目录，不要只上传单独的html文件。你可以借助软件自带的FTP功能，在站点设置里填写服务商给到的FTP地址、账号、密码，连接成功后直接在文件面板上传文件，上传结束再次访问域名核对页面展示效果。

该方法的适用边界是静态网页开发，表单提交、数据库读写这类动态功能，dreamweaver自带工具支持程度有限，需要搭配PHP等后端语言单独开发。