很多新手朋友问，现在都什么年代了，为什么还要用Dreamweaver做网站布局？其实，DW虽然老，但它对HTML和CSS的代码结构展示非常直观。对于想彻底搞懂网页底层逻辑的人来说，它是最好的老师。这篇教程不讲虚的，直接带你用DW从零搭建一个标准的响应式网站布局。
先说准备工作。别急着打开软件，先把你的素材准备好。你需要一张背景图，几个Logo，还有主要的文案内容。把这些文件放在一个新建的文件夹里，比如叫“my_site”。记住，图片路径一定要用相对路径，别用绝对路径，不然换电脑就全挂了。
打开Dreamweaver，新建一个HTML5文档。这一步很重要，很多老教程还在教用HTML4，现在必须用HTML5，语义化标签对SEO友好。在代码视图里，你会看到一堆标签。别怕，我们只需要关注body里面的内容。
接下来是核心部分：网站布局怎么用dw做。我推荐大家用“圣杯布局”或者“双飞翼布局”的简化版，也就是Flexbox布局。这是目前最主流、最稳定的方案。在head标签里，引入一段CSS代码。
这段代码看起来有点长，但拆开看很简单。container是总容器，限制最大宽度，让网页在大屏上不会太宽。header和footer是头部和底部，简单设置背景色。最关键是main部分，用了display: flex。这意味着里面的子元素会自动排成一行。sidebar是侧边栏，content是主内容区。
在body里，写对应的HTML结构。先写header，放个h1标题。然后写div class="main"，里面嵌套sidebar和content。这样结构就出来了。这时候切换到设计视图，你会发现页面已经初具雏形。
很多人纠结于用表格布局，那是十年前的老黄历了。现在绝对不要用table做布局，那是给搜索引擎看的灾难。用div加css，代码干净，加载快。
关于响应式，也就是手机适配。在CSS最后加一段媒体查询。
@media (max-width: 768px) {
.main { flex-direction: column; }
.sidebar { margin-right: 0; margin-bottom: 20px; }
}
这就搞定了。当屏幕宽度小于768像素时，flex-direction变成column，侧边栏就会跑到主内容上面，变成单列布局。这就是响应式的核心逻辑。
在DW里操作时，建议多切换代码视图和设计视图。代码视图让你看清标签嵌套，设计视图让你直观看到效果。如果遇到排版错乱，90%的情况是闭合标签没写对，或者margin/padding设冲突了。仔细检查闭合标签，用Ctrl+F查找闭合标签，能省很多时间。
还有一点，图片一定要加alt属性。这不仅是为了无障碍阅读，更是为了SEO。搜索引擎爬虫看不懂图片，它只看alt里的文字。所以，描述要准确，关键词要自然融入。
最后，发布前记得预览。在DW里按F12，用Chrome浏览器打开。检查链接是否跳转正确，图片是否加载出来。如果有问题，回到代码里微调。
做网站布局，心态要稳。别指望一键生成，那是模板公司的套路。自己动手写一遍代码，哪怕只是复制粘贴修改，你也能理解每一行代码的作用。当你真正掌握了网站布局怎么用dw做，你会发现，以后换任何建站工具，都是降维打击。
记住，代码洁癖不是毛病，是好习惯。缩进要整齐，注释要清晰。半年后你再看自己的代码，会感谢现在认真的你。别偷懒，一步步来，你也能做出专业的网站。
