提醒：本文最后更新于 2026-05-24 06:20，文中所关联的信息可能已发生改变，请知悉！
dreamweaver 软件是由美国 Macromedia 公司开发的一款网页编辑器。将鼠标放在图片的不同区域上就会显示不同的图片，使用 dreamweaver 制作切图的效果能够给用户带来更好的视觉体验。
编辑
切图简介
dreamweaver 软件是由美国 Macromedia 公司开发的一款集网页制作和网站管理功能于一体的网页编辑器。在有些网站上，鼠标放在图片的不同区域上就会显示不同的图片，使用 dreamweaver 制作切图（即图片切换 ) 的效果能够给用户带来更好的视觉体验。
切图目的
图片的切换意味着网页设计者对整个网站的视觉效果的呈现，用户在使用切图功能的过程中能够感受到图片转换所带来的视觉新体验，在提升网站功能的同时也提升了用户体验。
切图步骤
第一步
用 photoshop CS6 软件将几张图片的大小调整为一样的。比如把三张图片都做成了 200×268 的大小。打开 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 在浏览器中查看切图效果。
