很多新手刚入行建站，看着Dreamweaver和Photoshop这两个老牌软件，心里直打鼓。这篇内容不整虚的，直接告诉你怎么把这两个工具结合起来，做出能用的网站页面。别被那些复杂的代码吓跑，其实核心逻辑就那几样。
先说Photoshop，它是做图的，不是写代码的。很多人误区就是直接在PS里画整个网页，然后切图。这没错，但要注意图层管理。图层命名一定要规范，比如“导航栏”、“轮播图”、“页脚”，别搞一堆“图层1”、“图层2”，后期找起来能把你逼疯。导出图片的时候，尽量用PNG-24或者WebP格式，体积小有清晰，这对网站加载速度至关重要。
再来说Dreamweaver，这软件现在确实有点过时了，但它的可视化编辑功能对新手还是很友好的。打开DW，新建HTML文件，别急着写代码，先看看它的代码视图和设计视图。设计视图里你可以像拖积木一样拖拽元素，但记住，生成的代码往往很臃肿。建议你在设计视图里大概摆好位置，然后切到代码视图去精简。
做dw和ps的网站教学 过程中，最关键的环节是“切图”和“布局”。在PS里，用切片工具把设计稿切成小图，比如按钮、背景、图标。每个切片都要单独保存，文件名要和你在DW里用的ID或class对应上。比如按钮叫btn，那DW里的代码里也要尽量用btn，这样方便后期改样式。
在DW里，推荐使用DIV+CSS布局，而不是表格布局。表格布局是十年前的老黄历了，现在搜索引擎不喜欢，移动端也不适配。新建一个CSS文件，把样式写在这里，实现结构和表现分离。这样以后改颜色、改字体，不用去HTML里翻来翻去，效率翻倍。
很多新手在写代码时，喜欢用绝对定位（absolute）来固定元素位置。这看着挺直观，但一旦屏幕尺寸变了，页面就乱套了。要学会用相对定位（relative）和浮动（float），或者更现代的Flexbox布局。虽然DW自带的代码提示可能不够智能，但你可以手动输入这些属性。别怕麻烦，多敲几次代码，肌肉记忆形成了，速度自然就快了。
做dw和ps的网站教学 还有一个容易忽视的点，就是响应式设计。现在手机流量比电脑大，你的网站在手机上能看吗？在DW里，你可以预览不同屏幕尺寸下的效果。如果发现文字重叠、图片变形，那就回去调整CSS里的媒体查询（Media Query）。给不同的屏幕宽度设置不同的样式，让网站像水一样适应容器。
别指望DW能帮你解决所有问题。遇到搞不定的布局，直接去网上搜现成的CSS代码片段，复制过来改改就行。建站不是造轮子，是组装零件。重要的是理解原理，而不是死记硬背每一个标签。
最后，多动手练习。找个简单的企业官网模板，试着用PS画出设计稿，再用DW把它还原出来。遇到报错别慌，看看控制台提示，通常都是少写了分号或者引号没闭合。这种小问题，查一下就能解决。
做dw和ps的网站教学 并不是什么高深莫测的技术，它只是你表达创意的工具。工具再老，只要用得顺手，一样能做出好作品。别纠结软件版本，别纠结代码多优雅，能跑起来、能加载快、能兼容主流浏览器，就是好网站。
总结一下，PS负责美观，DW负责结构，CSS负责样式。三者配合，缺一不可。保持耐心，多试错，你也能成为建站高手。别等别人教你，自己先动起来，这才是最靠谱的学习路径。
