web前端学习的辅助软件普遍有：设计方向是photoshop，页面代码方向是dreamweaver。在完成项目初始，要进行部分准备工作！
工具/原料
1
软件Dreamweaver cs5
2
软件photoshop cs5
方法/步骤
1
下载安装Dreamweaver cs5和photoshop cs5，安装好后打开photoshop
2
设计准备1--新建图像 新建图像 1400*3000分辨率 72颜色模式 RGB背景内容 白色 快捷键：Ctrl+N 新建图像 Ctrl+(+/-) 缩放画布Shift+Ctrl+S 存储图像 Ctrl+S 保存操作
3
设计准备2--新建参考线垂直参考线1 200px垂直参考线2 1200px操作完成后，出现2条垂直的蓝色参考线，参考线中间区域为1000px（设置参考线主要考虑到页面设计的主内容的大小），效果如下：
4
经典设计布局分配一般包括头部，导航，焦点图，主要内容，底部5部分
5
设计准备3--设计图层的规范基于经典设计，在图层面板里添加5个文件夹，分别命名是：头部，导航，焦点图，主要内容，底部设计准备完成！
6
打开Dreamweaver cs5,进行页面准备！
7
页面准备11 新建站点所在文件夹，在D盘根目录下新建文件夹ind06052 在ind0605中再新建css、images、js等3个文件夹 3 回到Dreamweaver中，在左上角有个文件菜单，点击新建，新建ind.html 4 用同样地方式，新建style.css文件，然后存储到css文件夹中5 选择本地站点文件夹为D盘新建的ind0605文件夹，站点名称为ind0605
8
页面准备2-html布局1 打开html文件，在代码
之间输入2 根据经典布局，书写5大模块div代码效果如下：9
DW代码准备完成
注意事项
1
图片和代码新建完成以后一定要及时存储
2
根据经典设计，ps的分组和div分组一定要提前准备