说实话，我现在看到还有人拿着Dreamweaver（简称DW）当宝贝，心里其实是挺复杂的。一方面觉得这软件确实老了点，界面丑得像个上个世纪的产物；但另一方面，我又不得不承认，对于新手小白来说，想快速理解HTML结构，DW依然是个不错的“拐杖”。今天我不讲那些虚头巴脑的理论，就聊聊我是怎么通过用dw做一个简单的网页，从而真正搞懂前端逻辑的。

很多新手一上来就打开DW，然后对着空白的代码区发呆，或者更惨的是，直接去点那个“设计”视图，以为拖拖拽拽就能搞定一切。我当初也是这么过来的，结果做出来的网页在浏览器里打开，样式全乱，图片全裂，心态直接崩盘。后来我悟了，DW只是个编辑器，核心还是代码。

首先，别一上来就写复杂的大项目。我第一次尝试用dw做一个简单的网页时，目标定得太高，想做个带导航栏、轮播图、侧边栏的完整首页，结果连CSS都没写对，HTML标签嵌套都搞错了。后来我学乖了，先做一个只有标题、一段文字和一张图片的极简页面。

第一步，新建文件。打开DW，选择“文件”->“新建”，一定要选“HTML”，别选别的。这时候你会看到一个代码编辑区。这时候千万别急着点“设计”视图，虽然那个视图看着像Word一样方便，但它生成的代码垃圾多得让你怀疑人生。你要习惯看代码。

第二步，写骨架。在标签里，先写个

，写上“我的第一个网页”，再写个

，随便输点废话，比如“今天天气真不错，适合摸鱼”。然后插入一张图片，用标签。这时候，你会发现DW的代码提示功能虽然烂，但偶尔也能帮上忙，比如你输入

第三步，加样式。这是最让人头疼的地方。很多人喜欢直接在DW里找“属性”面板去改颜色、字体大小。我告诉你，这方法能行，但效率极低，而且一旦代码量大了，你就根本找不到哪行CSS是哪个标签用的。正确的做法是，在里写