dreamweaver cs5怎么给网页制作图片的挤压效果?
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
在网页中图片的效果多种多样，今天本人在此制作一种图片的挤压效果，同时将制作过程和截图分享出来，供大家参考使用。本效果当点击图片时图片将从左上角消失，希望对大家有所帮助和启发。
1、启动dreamweaver cs5，执行文件-新建命令，在弹出的新建文档对话框中选择html，点击创建按钮。
2、在标题<title>中输入文字内容为挤压效果，接着在下面输入代码
<style <style type="text/css">
.tp{ width:55%; margin:auto; height:430px;}
#tp1{width:48%;height:200px; float:left; margin-left:10px; margin-top:10px;}
</style>定义一种类。
3、在body中创建一个层div并设置class属性为tp，接着在第一层div中新建四个div，id属性设置为tp1，代码为
<div>
<div id="tp1"></div>
<div id="tp1"></div>
<div id="tp1"></div>
<div id="tp1"></div>
</div>
4、选择第一div，执行插入-图像命令，在弹出的选择图像源文件对话框中找到图片所存放的位置点击确定按钮，将图片导入到层中。
5、选择图片，执行ctrl+f3组合键调出属性窗口，在属性窗口中设置图片宽度为96%，高度为100%。
6、重复步骤4、5分别导入另外三张图片，并调整其大小，使整体布局美观。
7、选择第一张图片点击右边的行为面板，在该面板中点击“+“号，从下拉菜单中选择效果-挤压命令。
8、在弹出的挤压对话框中选择目标元素为div“top1”，然后接着点击确定按钮，这时就为第一张图片设置的挤压效果。
9、重复步骤7、8，分别为剩下的三张图片设置挤压效果后，在设计面板中查看自动生成代码的变化。 -language:ZH-CN; mso-bidi-language:AR-SA'>挤压命令。
10、保存网页，按f12键弹出“将改动保存到”提示信息，找到一个合适的位置点击是进行保存即可，这时会在浏览器中展示刚才设置的内容。
11、测试效果，在浏览器中出现的界面中，点击任意一张图片，查看挤压效果的变化。
相关推荐：
dreamweaver中怎么交互图像? dw制作鼠标经过图像换图的教程
相关文章
- dreamweaver怎么做一个简单的网站？想做一个简单的网站，该怎么制作呢？今天我们就来卡看dreamweaver制作网站的一个步骤，感兴趣的朋友可以进来参考一下，需要的朋友可以参2016-05-16
Dreamweaver设置页面属性后采用HTML格式怎么办?
Dreamweaver设置页面属性后采用HTML格式怎么办？用Dreamweaver设计了网页，设置页面属性以后，本来想用css格式的，现在变成了HTML格式，该怎么办呢？下面我们来看看详细的2016-04-27- dreamweaver中怎么将文字放到图片上？dreamweaver中如果想让背景图片上带一些文字，比较有意境，该怎么做呢？下面我们就来看看dw在图片上写文字的教程，需要的朋友可以参考2016-04-22
Dreamweaver CS6制作一个新闻网页首页的实例教程
Dreamweaver CS6制作网页很方便，为了方便学习我们我们举了一个实际的例子，使用Dreamweaver CS6做了一个简单的网页，非常简单，适合新手学习，需要的朋友可以参考2016-04-20怎么格式化html代码? Dreamweaver格式化html代码的技巧
怎么格式化html代码？Dreamweaver编辑网页的时候，发现代码格式很乱，看起来很费劲，该怎么一键格式化呢？下面我们就来看看Dreamweaver格式化html代码的技巧，需要的朋友可2016-03-31- Dreamweaver怎么进行批量文件搜索指定内容？Dreamweaver中的文件很多，想要查找文件很不容易，该怎么才能快速的进行批量查找文件的？下面我们来看看Dreamweaver文本查找功2016-03-30
Dreamweaver中怎么让html网页中的table边框细线显示?
Dreamweaver中怎么让html网页中的table边框细线显示？Dreamweaver中插入表格默认是宽边框的，看上去很难看，该怎么将边框设置成细线呢？请看下文详细介绍，需要的朋友可以2016-03-10- 文本行为，就是网页中的文本有行为，用的最多的又状态栏文本和文本域文本，尤其是文本域文本是最常用到的，那么Dreamweaver怎么添加文本?怎么设置文本？下面小编就为大家详2016-03-07
- 这篇教程主要是向程序员之家的朋友分享Dreamweaver浏览器测试方法，教程真的很不错，很值得大家学习，推荐过来，一起来学习吧2016-03-06
- Dreamweaver编辑网页预览的时候显示乱码该怎么办？Dreamweaver做网站的时候，网页出现了乱码，无论是预览还是发布出来都是乱码，出现这个状况我们需要在网页编码里面加上声2016-03-03
最新评论