三沣开发知识 购物 网址 游戏 小说 歌词 地图 快照 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 开发 租车 短信 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题
autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml
html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> Dreamweaver教程 -> dreamweaver cs5怎么给网页制作图片的挤压效果? -> 正文阅读
 

[Dreamweaver教程]dreamweaver cs5怎么给网页制作图片的挤压效果?

dreamweaver cs5怎么给网页制作图片的挤压效果? dreamweaver cs5怎么给网页制作图片的挤压效果?想使用dw给网页制作图片显示出来是挤压效果的样式,该怎么设计呢?下面我们就来看看详细的教程,需要的朋友可以参考下
在网页中图片的效果多种多样,今天本人在此制作一种图片的挤压效果,同时将制作过程和截图分享出来,供大家参考使用。本效果当点击图片时图片将从左上角消失,希望对大家有所帮助和启发。
软件名称: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>定义一种类。

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、测试效果,在浏览器中出现的界面中,点击任意一张图片,查看挤压效果的变化。


相关推荐:
DW怎么设置滚动字幕?
dreamweaver中怎么将文字放到图片上?
dreamweaver中怎么交互图像? dw制作鼠标经过图像换图的教程
  Dreamweaver教程 最新文章
Dreamweaver怎么添加字体? dw更换字体的教程
dreamweaver制作网页详细步骤(设计网站首页
Dreamweaver怎么给代码添加注释?
Dreamweaver单选按钮怎么出一道单选题?
Dreamweaver文字怎么添加多个不同的阴影?
Dreamweaver怎么制作一个开场动画效果的网页
dw如何插入flash动画?dw插入flash动画方法
Dreamweaver制作网页技巧20则
Dreamweaver CS5 破解激活方法
制作网页 详解Dreamweaver13个技巧
上一篇文章      下一篇文章      查看所有文章
加:2016-12-06 03:02:33  更:2017-05-14 04:39:50 
 
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2017年12日历
2017-12-18 22:52:57
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库