dw 网页设计怎么做 Dreamweaver 建站实操教程

dw 网页设计怎么做，核心就是使用 Dreamweaver 这款可视化网页编辑软件，结合可视化拖拽和手写代码两种方式，完成站点搭建页面排版代码编写预览调试最后发布上线，dw 支持 html css javascript 基础网页开发，它的优势是可以一边可视化操作一边查看源代码，适合新手学习网页基础，之所以很多初学者选择 dw 做网页设计，是因为它不需要完全记忆全部代码标签，软件自带代码提示标签补全功能，但是现在网页标准持续更新，新版网页更多使用响应式布局，做项目之前要先理清站点结构，素材分类，页面逻辑，不要直接新建单个 html 文件盲目排版，很容易出现路径错乱图片丢失的问题，下面按照完整项目流程详细讲解 dw 网页设计全部操作。

前期准备

详细操作步骤

第一步 新建本地站点，打开 dw，找到站点菜单，选择新建站点，填写站点名称，选择本地根文件夹，这个文件夹就是整个网页项目总目录，后续所有页面素材全部放在这个文件夹里面，这一步是 dw 网页设计最关键的基础，做好之后所有相对路径才不会出错。

第二步 建立内部文件夹，在站点根目录里面新建 images 文件夹存放图片，新建 css 文件夹存放样式表，新建 pages 文件夹存放二级子页面，保持目录整洁，后期维护方便。

第三步 新建首页文件，在站点面板右键，新建文件，命名为 index.html，这个就是网站首页，双击打开页面，进入编辑界面，界面分为设计视图代码视图拆分视图，拆分视图可以同时看到代码和可视化页面。

第四步 编写页面基础结构，在代码视图写入 html 基础骨架，包含 head 头部标签，body 主体标签，head 里面写入页面标题 meta 编码声明，防止中文打开出现乱码。

第五步 页面排版布局，早期 dw 常用表格布局，现在推荐 div 加 css 布局，可以插入 div 容器，设置宽高边距浮动，也可以使用可视化插入菜单，插入文字图片导航栏，插入图片的时候选择相对路径，不要使用绝对路径，不然上传服务器图片会失效。

第六步 引入 css 样式，新建外部 css 文件，在 html 页面 link 标签引入 css，在 css 里面设置字体颜色背景导航样式，实现页面美化，dw 自带 css 设计器面板，可以可视化设置样式参数，不用手动全部手写代码。

第七步 添加交互功能，可以插入超链接，表单，按钮，也可以写入简单 javascript 代码，实现点击切换弹窗等基础交互，dw 自带行为面板，可以添加简单行为，不需要手写 js。

第八步 预览测试，按 f12 调用浏览器预览，检查文字图片导航是否正常，测试链接跳转，检查不同分辨率下页面是否错位，发现问题回到 dw 修改代码或者可视化元素。

第九步 站点检查，使用 dw 自带的检查站点功能，检查断链，无效图片，错误标签，修正所有报错项目。

第十步 上传发布，购买域名和空间，在 dw 里面设置远程服务器信息，使用 ftp 连接，把本地站点全部文件上传到服务器，上传完成之后通过域名访问网页。

布局方式对比

常见问题处理

第一 打开网页中文乱码，原因是编码没有设置成 utf8，在页面 head 标签添加 meta charset=utf8。

第二 图片不显示，绝大多数是路径错误，图片没有放在站点文件夹，或者使用绝对路径，改成相对路径即可。

第三 保存之后预览页面没有更新，是浏览器缓存，清除缓存或者强制刷新页面。

第四 上传服务器之后页面错位，本地测试正常，一般是 css 路径错误，服务器区分大小写，文件名大小写要保持一致。

【常见问题】

问题 1 dw 网页设计怎么做才能避免图片丢失

回答 1 dw 网页设计怎么做的重点第一步就是先建立本地站点，把图片统一放进站点内 images 文件夹，插入图片全部使用相对路径，不要使用电脑本地绝对路径，这样预览和上传服务器都不会出现图片丢失。

问题 2 dw 网页设计怎么做响应式页面

回答 1 dw 网页设计怎么做响应式页面，可以在新版 dw 里面使用 bootstrap 框架，新建 bootstrap 文档，利用栅格系统设置列宽，页面会自动适配电脑平板手机不同屏幕尺寸。

问题 3 dw 网页设计怎么做超链接跳转

回答 1 dw 网页设计怎么做超链接，选中文字或者图片，在属性面板链接栏填写目标页面文件名，也可以直接拖动指向站点里面的 html 文件，保存之后按 f12 预览测试跳转效果。

问题 4 dw 网页设计做完之后怎么发布上线

回答 1 dw 网页设计做完之后，在 dw 站点设置里面填写 ftp 远程主机账号密码，连接服务器，把整个站点文件上传，绑定域名解析到服务器，就可以通过公网访问做好的网页。

【免责申明】

本教程为 dw 网页设计基础实操参考，Dreamweaver 软件版本不同菜单界面会存在差异，网页代码标准持续更新，本内容不保证所有新版浏览器完全兼容，操作过程如果误删文件代码报错，相关损失自行承担，涉及商业网站还需要遵守域名备案相关法规。