⑴ 怎樣用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;