无需懂代码！教你PS+DW打造精美排版！

1丶不想要规规矩矩的排版布局方式？

2丶想在详情描述里插入类似以下带有热点超链接的推荐模块图？

（可点击进入1-5副小图商品页面，实现更高的客单价）

使用工具：photoshop cs5丶dreamweaver cs5

PS操作步骤：

1丶用PS打开你已经做好的整体效果图,开始切片。

2丶用切片工具，把上图切成5个小图（具体情况根据个人需要）。

3丶文件-储存为Web和设备所用格式-储存

4.点储存之后，出现一个保存对话框，在格式选项卡上选择“HTML和图像”--保存

5丶点保存后，桌面将生成一个images的文件夹和一个HTML网页（打开images文件夹，看到有5张商品图和一张“分隔符”图）。

6丶把这6张图上传到淘宝图片空间商，包括分隔符图片。

7丶右键刚才保存的HTML页面---打开方式----记事本----复制包括<table> </table>这对标签之间的所有代码。

8丶打开需要装修的淘宝装修页面，在你需要插入该不规则布局的地方插入该代码。（点

<。。。>源码按钮，进入源码输入页面，粘贴刚才复制的代码）

9丶到图片空间复制图片地址，然后到源码界面替换src里面的图片地址。

10丶把所有的图片地址替换后，点《。。。》源码按钮，返回图形界面，左键点一张图片---点编辑---出现图片的编辑界面----在“链接网址”上填上该宝贝的详情页面链接。

OK！完事！！！

DW操作步骤：

1丶打开Dreamweaver，新建HTML新页面----插入--图像（或者快捷键Ctl+Alt+I）

2丶左键点击图片---在软件最底部会出现图片属性-----点左下角多边形热点工具

3丶点了多边形热点工具后，在你需要设置超链接的区域点4个点围起该区域，在链接地址栏填上链接。

4丶设置其他热点（如上操作）。

5丶文件-另存为

6丶右键HTML文件---打开方式--记事本---复制代码..............................(其余操作类似上述PS法)

结尾：貌似写得有点乱！只是写给那些不懂代码的人，欢迎吐槽！！希望能帮助到人。