Dreamweaver怎么制作手风琴图片展示效果?

作者 : 发布时间: 2021-11-04 人阅读

Dreamweaver制作网页的时候,发现网页的浏览交互效果会使人感到爽心悦目的感觉,该怎么制作呢?下面我们就来看看Dreamweaver何展现手风琴图片的交互效果的教程。

1、打开Dreamweaver cc 2014软件,选择建立html界面,里面自动生成一些必要代码的代码格式,节省时间。

Dreamweaver怎么制作手风琴图片展示效果?(图1)

Dreamweaver怎么制作手风琴图片展示效果?(图2)

Dreamweaver怎么制作手风琴图片展示效果?(图3)

2、先保存代码到一个建好的文件夹里,里面的已有准备好的将要做效果的图片的文件夹。

Dreamweaver怎么制作手风琴图片展示效果?(图4)

Dreamweaver怎么制作手风琴图片展示效果?(图5)

3、在body标签内输入:

  • 图片
  • 图片
  • 图片
  • 图片
  • 图片
  • 图片

注意:src的文件路径的图片位置和图片命名都要一一对应

Dreamweaver怎么制作手风琴图片展示效果?(图12)

Dreamweaver怎么制作手风琴图片展示效果?(图13)

4、在body标签前面位置,输入:

输入完后,摁F12键,弹出页面,可以看到图片。

Dreamweaver怎么制作手风琴图片展示效果?(图14)

Dreamweaver怎么制作手风琴图片展示效果?(图15)

5、弹出页面后,鼠标移到图片上面左右移动,就可以看到图片滑动效果。

Dreamweaver怎么制作手风琴图片展示效果?(图16)

Dreamweaver怎么制作手风琴图片展示效果?(图17)

Dreamweaver怎么制作手风琴图片展示效果?(图18)

以上就是dw制作手风琴图片展示效果的教程,希望大家喜欢,请继续关注本站。

①本站所有成品淘宝购买需确认收货并好评后发货;
②所有作品如需修改需另加费用;
③所有作品没有任何人的姓名学校之类信息;
④请务必确认网页是您需要的,源码具有可复制性,所以无法退换!
⑤每份网页都可以更换内容,费用50元起,如需更换内容请联系客服!
dw网页设计 » Dreamweaver怎么制作手风琴图片展示效果?

千套DW网页成品 品质有保证

快速联系