dw怎么建站_dw新手教程

到页面，再拖一张图片进去，**DW会自动生成HTML标签与相对路径**。此时切换到“代码视图”，能看到干净的结构：

<div class="96f3-19a0-7e2e-016e box">
  <img src="images/banner.jpg" >
</div>

2. 快速写CSS的三种方法

• CSS设计器：可视化调颜色、边距，实时预览。
• Emmet缩写：敲.box>h2+p再按Tab，瞬间生成嵌套结构。
• 代码提示：敲“bo”就能弹出border、box-shadow等候选，回车即补全。

---

模板与库：批量改页面的黑科技

做企业官网时，导航栏与底部信息每个页面都要重复。**DW模板（Template）能把公共部分锁定**，只留“可编辑区域”给内容。 问答：模板改一处，全站如何同步？ 答：保存模板时，DW会弹出“更新所有页面”提示，一键完成，**再也不用手工复制粘贴**。

---

响应式预览：手机效果不用真机

点击底部“实时预览”图标，选择iPhone SE、iPad、桌面三种尺寸，**DW会调用Chromium内核即时渲染**。再配合媒体查询：

@media (max-width: 768px){
  .box{flex-direction: column;}
}

写好后直接刷新预览窗口，**手机竖屏效果立即可见**。

---

FTP一键上传：从本地到线上只需30秒

1. 在“站点设置-服务器”里填FTP信息，测试连接成功。
2. 回到主界面，点“上传”按钮，DW会把本地所有文件与远程比对，**只传改动过的文件**，速度飞快。
3. 上传完毕，右键文件选“在浏览器打开”，即可看到正式域名下的效果。

---

新手常见坑与解决方案

1. 图片不显示？

90%是因为路径错误。记住：站点根目录开始写路径，例如src="/images/logo.png"，而不是src="file:///C:/..."。

2. CSS改了没效果？

多半是浏览器缓存。按Ctrl+F5强刷，或在DW里按Ctrl+Alt+Shift+R清除缓存并重新加载。

3. 中文乱码？

确认三处编码一致： - DW首选项里默认编码UTF-8 - 页面头部有<meta charset="UTF-8"> - 服务器端也配置为UTF-8

---

进阶：用DW写第一个交互效果

在“行为”面板里，选中按钮，点击“+”号，选择“弹出信息”，输入“Hello DW”。DW会自动生成：

<button onclick="alert('Hello DW')">点我</button>

无需手写一行JavaScript，**可视化即可完成交互**。

---

写在最后：DW之后学什么？

DW只是起点，**真正上线还要懂域名解析、HTTPS、SEO基础**。建议把DW生成的静态页面上传到GitHub Pages练手，再逐步过渡到VSCode+Node.js的全栈路线。到那时，你会感谢DW曾帮你跨过最陡峭的入门坡道。