dreamweaver cs5如何给网页页面制做照片的挤压实际

2021-01-20 19:42 jianzhan

在网页页面中照片的实际效果多种多样多样,今日自己在此制做1种照片的挤压实际效果,另外将制做全过程和截图共享出来,供大伙儿参照应用。本实际效果当点一下照片时照片将从左上角消退,期待对大伙儿有一定的协助和启迪。

手机软件名字:
Adobe Dreamweaver CS5 简体汉语翠绿色版
手机软件尺寸:
86MB
升级時间:
2012-06-06马上免费下载

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>界定1类型。

3、在body中建立1个层div并设定class特性为tp,接着在第1层div中新建4个div,id特性设定为tp1,编码为

<div>

<div id="tp1"></div>

<div id="tp1"></div>

<div id="tp1"></div>

<div id="tp1"></div>

</div>

4、挑选第1div,实行插进-图象指令,在弹出的挑选图象源文档会话框中寻找照片所储放的部位点一下明确按钮,将照片导入到层中。

5、挑选照片,实行ctrl+f3组成键调出特性对话框,在特性对话框中设定照片宽度为96%,高宽比为100%。

6、反复流程4、5各自导入此外3张照片,并调剂其尺寸,使总体合理布局美观大方。

7、挑选第1张照片点一下右侧的个人行为面板,在该面板中点一下“+“号,从往下拉菜单中挑选实际效果-挤压指令。

8、在弹出的挤压会话框选中择总体目标元素为div“top1”,随后接着点一下明确按钮,这时候就为第1张照片设定的挤压实际效果。

9、反复流程7、8,各自为剩余的3张照片设定挤压实际效果后,在设计方案面板中查询全自动转化成编码的转变。 -language:ZH-CN; mso-bidi-language:AR-SA'>挤压指令

10、储存网页页面,按f12键弹出“将修改储存到”提醒信息内容,寻找1个适合的部位点一下是开展储存便可,这时候会在访问器中展现刚刚设定的內容。

11、检测实际效果,在访问器中出現的页面中,点一下随意1张照片,查询挤压实际效果的转变。

有关强烈推荐:

DW如何设定翻转字幕?

dreamweaver中如何将文本放到照片上?

dreamweaver中如何互动图象? dw制做电脑鼠标历经图象换图的实例教程