别信那些花里胡哨的教程，我是怎么靠死磕dw做出第一个能看的网页框架的
本文关键词：如何用dw制作网页框架
说实话，现在谁还天天抱着DW不撒手啊？满大街都是WordPress、Typecho，连个傻瓜式拖拽建站都有。但我偏偏就吃这一套。为啥？因为心里踏实。那些可视化编辑器，换个模板全乱套，代码一坨屎，改都改不动。我是做了15年建站的老兵，见过太多客户花几千块做个网站，结果连个导航栏都调不平，最后只能找我救火。今天不扯那些虚头巴脑的理论，就聊聊怎么用DW这个老古董，硬生生搓出一个能用的网页框架。
很多人一上来就打开DW，对着空白文档发呆。这是大忌。你得先想清楚，这网站是干嘛的？卖货的？还是展示型的？框架不一样。我就拿最常见的“上下结构”来说，上面是头图加导航，中间是内容区，下面是版权信息。这个结构，90%的企业官网都用得上。
第一步，别急着写代码。拿张纸，画个草图。别笑，真有用。我在纸上画个框，标出哪里放Logo，哪里放菜单，哪里放轮播图。心里有数了，手指头才知道往哪敲。这时候打开DW，新建HTML文件。注意，别用那个什么“设计视图”，那玩意儿就是个摆设，除了让你觉得自己在做PPT，没有任何实际意义。直接切到“代码视图”。
这里有个坑，很多人喜欢直接手敲div。我劝你，除非你是大神，否则别这么干。DW有个神器叫“插入面板”，里面有个“布局”选项卡。别嫌它老旧，里面的“表格”或者“层”其实挺好用。不过现在主流是div+css。我在DW里通常会先写个最基础的骨架：
`html
`
别嫌这代码丑，这是地基。接下来是关键，如何用dw制作网页框架的核心就在于这里的CSS样式。很多人写CSS喜欢把所有样式都堆在一个文件里，结果改个颜色找半天。我建议，针对框架部分，单独建一个style.css。在DW里，可以通过“文档”菜单关联外部样式表。
这时候，你会遇到第一个头疼的问题：对齐。导航栏怎么居中？内容区怎么左右留白？别去记那些复杂的flex布局，虽然那是趋势，但对于老手来说，用margin: 0 auto; 配合固定宽度，最稳。我在DW里经常遇到一个问题，就是浏览器预览的时候，内容挤在左边。这时候，检查你的body标签，是不是忘了设padding或者margin。
还有一个细节，很多人忽略。就是语义化标签。别全用div，header用header，nav用nav，footer用footer。这不仅对SEO好，而且你在DW里看代码结构也清晰。我记得有次给客户改代码，满屏的div嵌套，我看了半天才找到导航栏在哪，差点没把键盘砸了。所以，结构清晰真的很重要。
说到这，不得不提DW的一个小毛病，有时候保存代码会卡死。别慌，先Ctrl+S，不行就重启。这软件虽然老，但稳定性还是有的。另外，预览的时候，别只用IE，现在主流是Chrome和Firefox。DW自带的预览功能有时候渲染不准，直接去浏览器里看才是王道。
最后，怎么测试你的框架好不好？找个手机，或者把浏览器窗口拉窄。看看导航栏会不会换行，内容会不会溢出。如果都正常，那这个框架就算成了。这个过程很枯燥，一遍遍调试，一遍遍看代码。但当你看到原本乱糟糟的代码，变成了一个整齐划一的框架时，那种成就感，是任何模板都给不了的。
总之，如何用dw制作网页框架，不在于你用了多高级的技巧，而在于你对结构的理解。别怕慢，基础打牢了，后面加内容、加特效，都是水到渠成的事。别听那些新人说DW过时了，工具只是工具，关键是用工具的人。我用了15年，依然觉得它顺手，这就够了。
