⑴ 怎样用DreamWeaver做动态图片特效
怎样用dreamweaver制作动态图片,操作如下:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
#div{height:200px;width:1200px;margin:0auto;margin-top:100px;border:1pxsolidred;overflow:hidden;position:relative}
li{list-style:none;float:left;}
#ul{position:absolute;left:0;}
img{vertical-align:middle}
</style>
</head>
<body>
<divid="div">
<ulid="ul">
<li><imgsrc="images/2.jpg"width="300"height="200"></li>
<li><imgsrc="images/3.jpg"width="300"height="200"></li>
<li><imgsrc="images/4.jpg"width="300"height="200"></li>
<li><imgsrc="images/5.jpg"width="300"height="200"></li>
</ul>
</div>
</div>
</body>
</html>
<scripttype="text/javascript">
/*functiongetId(id){
returndocument.getElementById(id);
}
functiongetTag(fatherTag,sonTag){
returnfatherTag.getElementsByTagName(sonTag);
}
varul=getId('ul');
varli=getTag(ul,'li');*/
/*----向右----*/
ul.innerHTML+=ul.innerHTML
ul.style.width='2400px';
varspeed=5
setInterval(move,60)
functionmove(){
if(ul.offsetLeft>0)
{ul.style.left='-1200px'}
/*elseif(ul.offsetLetf<-1200)
{ul.style.letf=0}/*----------上下移动添加次条件句----*/
ul.style.left=ul.offsetLeft+speed+'px'
}
/*---向左---
ul.innerHTML+=ul.innerHTML
ul.style.width='2400px';
varspeed=5
setInterval(move,60)
functionmove(){
if(ul.offsetLeft<-1200)
{ul.style.left=0}
/*elseif(ul.offsetLetf<-1200)
{ul.style.letf=0}*/
/*ul.style.left=ul.offsetLeft-speed+'px'
}
*/
</script>
⑵ 制作网页可以用什么软件
制作网页可以用如下软件:
1、Coolsite360。特点有可复制模板,更可任性DIY,无需编程,在线创建,自动适配桌面及移动端。
2、Adobe Dreamweaver。简称“DW”,中文名称 "梦想编织者",最初为美国MACROMEDIA公司开发,2005年被Adobe公司收购。
3、Flash。是由macromedia公司推出的交互式矢量图和 Web 动画的标准,由Adobe公司收购。做Flash动画的人被称之为闪客。
4、Fireworks。是由Macromedia推出的一款网页作图软件,软件可以加速 Web 设计与开发, 是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。
5、Frontpage。Frontpage,是微软公司出品的一款网页制作入门级软件。FrontPage使用方便简单,会用Word 就能做网页,因此相对Dreamweaver等软件更容易上手。
⑶ dreamweaver8怎么插入动态图片
网页中的动态图片是gif格式文件,Dreamweaver8中插入方法如下:
1、启动Dreamweaver,ctrl+n新建html文档;
2、点击插入菜单图像命令;
3、打开对话框选择要插入的gif文件,点击确定;
4、按ctrl+s保存文件,然后按F12打开浏览器预览即可。
⑷ dw8怎么插入图片后使两张图片自动轮播
打开dw软件后,新建一个网页工程文件。
⑸ 如何用Dreamweaver制作网页动态展示的图片
dw中可以用组图轮播的方式实现动态展示图片。
参考:在DW中插入一个图片,然后回车
重复步骤1直到所有图片添加完成
选择所有图片,格式菜单-〉列表-〉项目列表,制作一个图片列表
然后再插入一个div,id命名为“LunBoNum”,在div内写入代码如下:
<span class="CurrentNum">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
插入一个新id为“LunBo”的div,并包含如上全部内容,代码如下:
<div class="LunBo">
<ul>
<li class="CurrentPic"><img src="images/1.png" width="490" height="170"></li>
<li><img src="images/2.jpg" width="490" height="170"></li>
<li><img src="images/3.jpg" width="490" height="170"></li>
<li><img src="images/4.jpg" width="490" height="170"></li>
<li><img src="images/5.png" width="490" height="170"></li>
</ul>
<div class="LunBoNum">
<span class="CurrentNum">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
在网页的<head></head>代码间加入jQuery框架链接<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
编写JS代码如下
<script type="text/javascript" language="javascript">
var PicTotal = 5;// 当前图片总数
var CurrentIndex;// 当前鼠标点击图片索引
var ToDisplayPicNumber = 0;// 自动播放时的图片索引
$("div.LunBo div.LunBoNum span").click(DisplayPic);
function DisplayPic() {
// 测试是父亲的第几个儿子
CurrentIndex = $(this).index();
// 删除所有同级兄弟的类属性
$(this).parent().children().removeClass("CurrentNum")
// 为当前元素添加类
$(this).addClass("CurrentNum");
// 隐藏全部图片
var Pic = $(this).parent().parent().children("ul");
$(Pic).children().hide();
// 显示指定图片
$(Pic).children("li").eq(CurrentIndex).show();
}
function PicNumClick() {
$("div.LunBo div.LunBoNum span").eq(ToDisplayPicNumber).trigger("click");
ToDisplayPicNumber = (ToDisplayPicNumber + 1) % PicTotal;
setTimeout("PicNumClick()",1000);
}
setTimeout("PicNumClick()",1000);
</script>
链接CSS文件,文件内容如下
* {
margin: 0px;
padding: 0px;
font-size: 14px;
}
div.LunBo {
position: relative;
list-style-type: none;
height: 170px;
width: 490px;
}
div.LunBo ul li {
position: absolute;
height: 170px;
width: 490px;
left: 0px;
top: 0px;
display: none;
}
div.LunBo ul li.CurrentPic {
display: block;
}
div.LunBo div.LunBoNum {
position: absolute;
left: 374px;
bottom: 11px;
width: 83px;
text-align: right;
background-color: #999;
padding-left: 10px;
}
div.LunBo div.LunBoNum span {
height: 20px;
width: 15px;
display: block;
line-height: 20px;
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
float: left;
cursor: pointer;
}
div.LunBo div.LunBoNum span.CurrentNum {
background-color: #3F6;