做站七年了，说实话，现在用DW（Dreamweaver）的人确实不多。大家都去搞WordPress，搞建站平台，甚至直接拖拽生成。但有些老项目，或者需要高度定制化的静态页面，DW依然是神器。很多新手怕它，觉得界面古老，操作反人类。其实只要你掌握了用dw做网站首页步骤，你会发现它比那些臃肿的后台要清爽得多。今天我不讲虚的，就讲怎么从零开始，把首页搭起来。
第一步，建文件，别偷懒。
很多人上来就打开DW，然后随便找个地方保存。大错特错。你必须在硬盘上先建一个文件夹，比如叫“my_homepage”。然后打开DW，文件->新建，选HTML，空白页。这时候，你会看到一堆代码。别慌，把那些注释全删了，只留最基本的骨架。这一步是为了让你心里有底，知道自己在写什么，而不是在改别人的模板。记住，路径一定要用相对路径，别用绝对路径，不然你换个电脑或者服务器，图片全裂开，那心态就崩了。
第二步，布局，用表格还是DIV？
这是个老生常谈的问题。如果你还要维护十年以上的老系统，可能得用table。但如果是新项目，听我的，用DIV+CSS。虽然刚开始写CSS有点痛苦，但后期维护简直爽翻。在DW里，你可以直接拖拽“层”或者“布局单元格”，但我建议手动敲代码。哪怕你复制粘贴别人的代码，也要一行行看。在body标签里，先写一个大的div叫container，控制整体宽度，比如960px或者1200px，居中显示。然后里面分header（头部），nav（导航），main（主体），footer（底部）。这种结构清晰，搜索引擎也喜欢。
第三步，填内容，图片处理。
这时候页面还是空的。你得把文案填进去，图片传上去。这里有个坑，DW自带的图片优化功能很弱。你直接拖进去一张4M的JPG，网站加载能卡死。所以在上传前，一定要用PS或者在线工具压缩图片。另外，DW里插入图片，记得加alt属性，这对SEO很重要。别小看这一步，很多新手为了省事，alt属性空着，结果百度蜘蛛爬取的时候一脸懵逼。还有，字体颜色别太刺眼，背景别太花哨，干净才是王道。
第四步，调试，别只看DW预览。
DW自带的浏览器预览功能，有时候显示正常，但在Chrome或者Edge里就乱码或者错位。这是因为DW的渲染引擎和现代浏览器不一样。所以，写完代码，一定要按F12或者Ctrl+S保存，然后右键用浏览器打开。这时候你会发现，导航栏可能没对齐，图片可能重叠。别急，回去改CSS。这一步最磨人，但也最能提升水平。你要学会用浏览器的开发者工具，检查元素，看哪里出了问题。
第五步，发布，测试链接。
首页做完了，怎么让别人看到？你得买域名，买空间，或者用GitHub Pages这种免费托管。用DW的FTP功能，或者直接用FileZilla上传文件。上传的时候，注意文件夹结构要和本地一致。上传完，别急着走，多刷新几次，看看图片有没有加载出来，链接有没有跳转错误。特别是移动端，一定要用手机看看效果。现在移动流量占比这么大，如果手机端体验差，那这首页等于白做。
其实，用dw做网站首页步骤的核心，不在于软件本身，而在于你的逻辑。代码是死的，人是活的。多写多练，别怕报错。报错信息虽然看着头疼，但那是你进步的阶梯。我见过太多人，稍微有点报错就放弃，最后只能去买现成的模板，改得四不像。不如自己从头来，哪怕慢一点，但每一行代码都刻在脑子里。
最后提醒一点，别迷信DW的新版本。其实DW CC 2020和CS6在核心功能上没太大区别。如果你电脑配置低，用老版本反而更流畅。关键是习惯。当你熟练掌握了用dw做网站首页步骤，你会发现，这种掌控感是其他工具给不了的。
本文关键词：用dw做网站首页步骤
