说实话，现在还在死磕Dreamweaver（DW）的朋友，多半不是为了赶时髦，而是为了维护那些老掉牙的企业官网，或者是学校老师布置的作业。别笑，这行当里，能沉下心把静态页面切出来的，才是真功夫。很多人一听到“div+css”就头大，觉得不如Bootstrap快，但如果你连盒子模型都搞不明白，套框架也就是个高级搬运工。今天咱们不整那些虚头巴脑的理论，就聊聊怎么在DW里用div把页面搭起来，让你心里有底。
先别急着打开软件，脑子里得有个概念：网页就是一个个盒子堆出来的。div就是个空盒子，css是给盒子贴标签、定尺寸、涂颜色的。你在DW里打开新建的html文件，默认可能还带着些乱七八糟的代码，先删干净，留个干净的骨架。
第一步，搭建基础结构。在body标签里，先画个大盒子，class叫container，这相当于页面的主舞台。然后在这个大盒子里，再细分header（头部）、nav（导航）、main（主体内容）、footer（底部）。别嫌麻烦，这一步做扎实了，后面改样式才不会乱成一锅粥。我在DW里习惯用代码视图，敲起来比拖拽快得多，而且不容易出那种看不见的空格bug。
第二步，给盒子定尺寸和定位。这是新手最容易栽跟头的地方。很多兄弟喜欢直接用px写死宽度，比如width: 960px。这在以前显示器分辨率低的时候还行，现在手机横屏竖屏各种尺寸，你写死宽度，用户看着就得左右滑动，体验极差。这时候得用到百分比或者vw/vh单位。比如container宽度设成90%，左右margin设成auto，它就自动居中了。这里有个坑，就是box-sizing属性。默认是content-box，你设了padding，盒子实际宽度会变宽，容易把布局撑爆。在css里全局加上* { box-sizing: border-box; }，这招能省掉你一半的调试时间。
第三步，处理浮动和清除浮动。虽然现在流行flex布局，但在DW里处理一些老旧代码或者特定排版时，float还是避不开的。比如导航栏，几个li并排显示，你给它们加float: left。这时候你会发现，父容器nav的高度塌陷了，变成0了。这时候得在nav后面加个clearfix类，或者给nav加overflow: hidden。别觉得这是老黄历，很多外包项目里的代码就是这么写的，你不懂，接手就是灾难。
第四步，调试与预览。DW自带的预览功能有时候不准，特别是涉及到路径问题。建议装个本地服务器插件，或者直接用VS Code的Live Server插件配合DW一起用。你会发现，你在DW里改代码，浏览器那边实时刷新，这种即时反馈的感觉，比干盯着代码强多了。记得检查不同分辨率下的表现，特别是移动端。这时候div的media query（媒体查询）就派上用场了。
举个真实的例子，之前有个客户让我改个老站，导航栏在手机上一堆文字挤在一起。我检查代码，发现他们用了固定宽度的div，没做响应式处理。我直接把宽度改成100%，字体大小用rem单位，再加点padding，手机端瞬间清爽了。这不需要多高深的技术，就是基础扎实。
最后，别光看不练。找个简单的个人主页模板，试着从头用div+css写一遍。遇到bug别慌，右键检查元素，看看哪里溢出，哪里重叠。网页制作就是个细心活，差一个分号，整个页面就歪了。
如果你还在为布局头疼，或者搞不定那些顽固的css样式，不妨找个懂行的师傅带一带，少走很多弯路。毕竟，这行里，经验比理论值钱。有具体问题，随时来聊。
本文关键词：dw网页制作教程div
