系统下载、安装、激活,就到系统天地来!

所在位置: 首页 — 系统文章 — 软件教程

如何使用Dreamweaver cs6设计拼图游戏?

作者:系统天地 日期:2020-01-14

Dreamweaver cs6怎么设计拼图游戏?Dreamweaver是第一套针对专业网页设计师特别发展的视觉化网页开发工具,也是目前最新版本利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver cs6中想要将一幅画分割成几份在框内进行拼图游戏;当靠近真确的拼图时自动吸附,该怎么制作这个动画效果呢?下面我们就来看看详细的教程。

 

方法步骤:

1、在软件中新建一个页面点击创建

 

如何使用Dreamweaver设计拼图游戏?

 

2、点击-页面设置选择一张背景图片

 

如何使用Dreamweaver设计拼图游戏?

 

3、点击工具栏绘制边框

 

如何使用Dreamweaver设计拼图游戏?

 

4、选中边框-点击代码-重命名为bj-找到背景代码

 

如何使用Dreamweaver设计拼图游戏?

 

5、找到边框代码-删除默认样式颜色的边框代码

 

如何使用Dreamweaver设计拼图游戏?

 

6、选择输入边框样式和颜色代码

 

如何使用Dreamweaver设计拼图游戏?

如何使用Dreamweaver设计拼图游戏?

 

7、在绘制四个边框设置为透明色

 

如何使用Dreamweaver设计拼图游戏?

 

8、按下shift键一次点击选中4个边框点击-修改选项-排列顺序-设置宽度相同-在进行一次设置高度相同

 

如何使用Dreamweaver设计拼图游戏?

 

9、一次打开分割好的四张图片拖拽只边框1、2、3、4

 

如何使用Dreamweaver设计拼图游戏?

 

10、拉两条 辅助线竖线对齐250。横线对齐标尺150处然后拖动图片拼成一副完整的图片

 

如何使用Dreamweaver设计拼图游戏?

 

11、点击边框1开始设置-拖动AP元素-自动获取当前位置-距离20个像素自动吸附,一次用相同的方法设置完4个边框

 

如何使用Dreamweaver设计拼图游戏?

如何使用Dreamweaver设计拼图游戏?

 

12、打乱图片保存你就可以在浏览器中玩拼图了

 

如何使用Dreamweaver设计拼图游戏?

 

以上就是小编和大家分享的关于使用Dreamweaver cs6设计拼图游戏的具体操作步骤了,感兴趣用户可以跟着以上步骤试一试,希望以上教程可以帮到大家,关注系统天地精彩资讯教程不间断。