如何DreamweaverCS5压缩网页中的图像

在网页中,图片的效果是多种多样的。今天我制作了一张挤压效果图,并分享了制作过程和截图,供大家参考。

软件名称:Adobe Dreamweaver CS5简体中文绿色特别版软件大小:86mb更新时间:2012-06-06

1, start Dreamweaver CS5, execute the file - new command, select HTML in the newly created new document dialog box, and click the Create button.


2,输入标题中的文本内容以获得压缩效果,然后输入下面的代码



。TP {宽度:55%;保证金:汽车;身高:430px;}

# TP1 {宽度:48%;高度:200px;浮动:左;margin-left: 10px;边距:10px;}

定义一种。


3、创建体层div设置class属性为TP,然后建立四个DIV DIV的第一层,和ID属性设置为TP1,代码














4,选择第一个div,执行插入图像命令,在弹出选择源对话框中找到图片的位置,单击确认按钮,并将图片导入到图层中。


5,选择图片,在属性窗口中执行Ctrl + F3组合键,在属性窗口中,将图片的宽度设置为96%,高度为100%。


6、重复步骤4, 5分别放入其他三张图片中,并调整其大小,使整体布局美观。


7、选择第一张图片点击右侧的行为面板,点击面板上的+号,从下拉菜单中选择效果-挤压命令。


8、选择目标元素divldquo,top1,然后点击确认按钮在挤压对话框,这是第一张图片的挤出效应。


9,重复步骤7, 8,分别后,剩下的三图片集挤压的影响,在设计面板中查看更改代码的自动生成。语言:zh-cn;MSO bidi语言:ar-sa>挤压命令。


10、保存网页,按F12键弹出保存更改的提示信息,找到一个合适的位置,点击保存,然后在浏览器中显示刚才设置的内容。


11、测试结果,在浏览器中出现在界面上,点击任意图片查看挤压效果的变化。



相关建议:

DW是如何设置滚动字幕的

如何在Dreamweaver中把文字放在图片上

如何在Dreamweaver中与图像数据仓库进行交互,通过图像来制作鼠标图像的教程