在有些网站上，鼠标放在图片的不同区域上就会显示不同的图片，使用dreamweaver制作切图（即图片切换)的效果能够给用户带来更好的视觉体验。下面将介绍具体的Dreamweaver切图教程。

切图目的

图片的切换意味着网页设计者对整个网站的视觉效果的呈现，用户在使用切图功能的过程中能够感受到图片转换所带来的视觉新体验，在提升网站功能的同时也提升了用户体验。

切图步骤

第一步

用photoshop CS6软件将几张图片的大小调整为一样的。比如把三张图片都做成了200x268的大小。打开Dreamweaver，新建一个网页（笔者这里建立一个html类型的网页）。

第二步

按Ctrl+S保存新建的网页。点击菜单栏：插入-->表格。插入一个1行1列的表格。把鼠标指针放到表格中，单击菜单栏的:插入-->布局对象-->AP Div,插入一个AP Div。

第三步

把鼠标放到刚刚新建的AP Div里边，点击菜单栏的：插入-->图像，选择一张需要插入的图片。依次添加其他几个AP Div，并在里边插入图片。再接下来插入一个AP Div，然后再里边添加一个1行3列的表格。

第四步

鼠标指针放到表格第一个方框中，单击菜单栏：插入-->表单-->按钮。鼠标点中添加的按钮，然后再下方属性面板中，把值修改为1。

第五步

按照上述步骤依次为表格的第二个框、第三个框添加一个按钮，并把属性值改成2和3。

第六步

把几个AP Div移动到同一个区域。单击菜单栏：窗口-->行为，打开行为面板。鼠标点击第一个方框的按钮，点击标签检查器行为面板下方的+号，弹出的菜单中选择显示-隐藏元素。

第七步

把AP Div1设置成显示，AP Div2设置成隐藏，AP Div3设置成隐藏。AP Div4可以设置成显示，也可以不设置（默认显示）。点击行为面板左边的英文，在弹出的菜单中选择onFocus。

第八步

按照上面的步骤，依次把表格第二个方框、第三个方框的按钮设置好。并按F12在浏览器中查看切图效果。