怎么制作網(wǎng)頁圖片
提問問題
列表
-
網(wǎng)頁設計中如何讓圖片輪播
查看答案>>
-
網(wǎng)頁設計中邊框里的圖片如何控制其大???
查看答案>>
-
網(wǎng)頁制作怎么把圖片居中
查看答案>>
-
怎么把Dreamweaver制作好的網(wǎng)頁轉換成圖片格式
查看答案>>
-
如何用Dreamweaver制作網(wǎng)頁動態(tài)展示的圖片?
查看答案>>
-
制作網(wǎng)頁時如何給圖片設置熱區(qū)鏈接
查看答案>>
-
制作網(wǎng)頁時表格怎樣用圖片作背景
查看答案>>
-
如何做網(wǎng)頁圖片的滑動效果
查看答案>>
-
網(wǎng)站怎么做圖片輪播
查看答案>>
-
制作網(wǎng)頁怎樣把背景圖片鋪滿
查看答案>>
網(wǎng)頁設計中如何讓圖片輪播
網(wǎng)頁設計中讓圖片輪播,需要用到的JS和比較好的div+css布局意識,主要還是需要了解left,top在css中的意思,這里我提交一段我以前寫的代碼; html中的代碼:<div id="box"> <div id="woZaiHouDun" class='hide' > <a id="btnLeft" href='javascript:void(0);'> </a> <a id="btnRight" href='javascript:void(0);'> </a> <ul> <li><img width="400" height="260" src="./images/scholl/1.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/2.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/3.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/1.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/2.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/3.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/1.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/2.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/3.jpg"/></li> </ul> </div>js中的代碼:ar t=null;function woZaiHouDun(){ var oUl = document.getElementById('woZaiHouDun').getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); oUl.innerHTML += oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth*aLi.length + 'px'; var oBtnLeft = document.getElementById('btnLeft'); var oBtnRight = document.getElementById('btnRight'); var iTarget = 0; var ispeed = -3; oBtnLeft.onclick = function(){ ispeed = 3; } oBtnRight.onclick = function(){ ispeed = -3; } t=setInterval(function(){ iTarget = oUl.offsetLeft -ispeed; if( iTarget < - oUl.offsetWidth/2){ oUl.style.left =0 +'px'; iTarget = oUl.offsetLeft -ispeed; } if( iTarget > 0){ oUl.style.left =- oUl.offsetWidth/2 +'px'; iTarget = oUl.offsetLeft -ispeed; } oUl.style.left =iTarget +'px'; },30)}這樣是能實現(xiàn)輪播的。
網(wǎng)頁設計中邊框里的圖片如何控制其大???
可以在css文件里設置圖片的長寬及圖片的浮動等各種特效。即用width、和height強制改變圖片的大小。如: .a{background:url(tupian.jpg);width=20px;height=20px;} 說明:.a是類選擇器,調(diào)用時<標簽名 class="類名">(這里類名為a),url里面是圖片的位置及名稱。width、height即強制改變的圖片的大小?! ∵€有一種方式是可以借助電腦的畫圖工具將圖片的大小改成目標大小,然后保存后也可以直接調(diào)用圖片。
網(wǎng)頁制作怎么把圖片居中
<div align="center"><img name="n08_r2_c1" src="images/08_r2_c1.jpg" border="0" alt="" /></div>
如何用Dreamweaver制作網(wǎng)頁動態(tài)展示的圖片?
dw中可以用組圖輪播的方式實現(xiàn)動態(tài)展示圖片。參考:在DW中插入一個圖片,然后回車重復步驟1直到所有圖片添加完成選擇所有圖片,格式菜單-〉列表-〉項目列表,制作一個圖片列表然后再插入一個div,id命名為“LunBoNum”,在div內(nèi)寫入代碼如下:<span class="CurrentNum">1</span><span>2</span><span>3</span><span>4</span><span>5</span>插入一個新id為“LunBo”的div,并包含如上全部內(nèi)容,代碼如下:<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>在網(wǎng)頁的<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;// 當前圖片總數(shù)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文件,文件內(nèi)容如下* {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;
制作網(wǎng)頁時如何給圖片設置熱區(qū)鏈接
一、在Dreamweaver MX中為圖片建立熱區(qū) 1、啟動Dreamweaver MX(其他版本請仿照操作),打開需要建立圖片熱區(qū)的網(wǎng)頁文件,選中相應的圖片,此時“屬性”面板自動切換到“圖片屬性”狀態(tài)(如圖1)。 2、選中一種熱區(qū)類型(如“橢圓”),然后在圖片上拖來出一個熱區(qū)來(參見圖1) 注意:熱區(qū)相當于是在圖片上增加了一個圖形層,象調(diào)整圖片一樣,可以通過鼠標調(diào)整熱區(qū)的大小和位置。 3、在“鏈接”右邊的方框中輸入要鏈接的網(wǎng)址(如“ http://www.yesky.com ”);在“替代”后面的方框中輸入一些說明字符(如“天極網(wǎng)”);按“目標”右邊的下拉按鈕,在隨后出現(xiàn)的下拉列表中選擇一種鏈接頁面的打開方式(如需要讓鏈接的頁面在新窗口中打開,就選擇“_blank”選項)。 注意:“替代”方框中輸入的字符,在以后瀏覽網(wǎng)頁時,當鼠標指向該熱區(qū)時,在頁面上會顯示出該字符(如圖2)。 4、重復上述2、3步的操作,在圖片的不同部位建立多個熱區(qū)。 在FrontPage2003中為圖片建立熱區(qū) 1、啟動FrontPage2003,打開需要建立圖片熱區(qū)的網(wǎng)頁文件。 2、執(zhí)行“視圖→工具欄→圖片”命令,展開“圖片”工具欄 3、選中一種熱區(qū)類型(如“長方形”),然后在圖片上拖來出一個熱區(qū),此時系統(tǒng)自動彈出“插入超鏈接”對話框 4、在“地址”欄上輸入要鏈接的網(wǎng)址;點擊“屏幕提示”按鈕打開“設置屏幕超鏈接提示”對話框,輸入一些說明字符 注意:此處的“屏幕提示”同Dreamweaver MX“替代”功能一樣。 4、同理,重復上述3、4步的操作,可以在圖片的不同部位建立多個熱區(qū)。
制作網(wǎng)頁時表格怎樣用圖片作背景
<table width="100" border="1" background="圖片url"> <tr> <td> </td> </tr></table>
如何做網(wǎng)頁圖片的滑動效果
http://jingyan.baidu.com/article/e4511cf3122da32b845eafb3.html樓主你好,由于你的問題比較大,要跟你講的東西太多,所以直接給你連接,你可以看到具體的操作步驟,。
網(wǎng)站怎么做圖片輪播
有賞是什么賞呢。。。6000財富值也就10塊錢而已O(∩_∩)O~重要位置都給你做好了代碼解釋 非常完善<!doctype html><html><head><meta charset="utf-8"><title>簡單的自動播放</title><style>body{ margin:0px; padding:0px;}#banner{ margin:auto; width:600px; height:300px; border:1px solid #ddd; position:relative;}#banner img{ width:100%; height:100%;}#xd{ position:absolute; right:0px; bottom:0px;}#xd span{display:block; float:left; margin-right:10px; margin-bottom:10px; cursor:pointer;}#xd span:hover{color:#069;}.xd1{color:#eee;}.xd2{color:#069;}#foot{ text-align:center; font-size:14px;}</style></head><body><div id="banner"><img id="imgs" src="images/b1.jpg"><div id="xd"><span class="xd2">●</span><span class="xd1">●</span><span class="xd1">●</span><span class="xd1">●</span><span class="xd1">●</span><span class="xd1">●</span></div></div><div id="foot"><a href="http://www.boaer.com">柏艾爾</a></div><script>var timer=setInterval("AutoPlay()",1300);//全局變量,定義定時器,每隔1300毫秒執(zhí)行一次AutoPlay()函數(shù)var p=1;//全局變量,存儲當前播放的第幾張圖片var xdspan=document.getElementById("xd").getElementsByTagName("span");//獲取xd下的所有span標簽var xdspanlength=xdspan.length;//獲取span標簽的數(shù)量for(var i=0;i<xdspanlength;i++){ xdspan.item(i).onclick=function(){//通過for循環(huán)為所有span標簽添加點擊事件 for(var i=0;i<xdspanlength;i++){//通過for循環(huán)為所有span標簽設置class="xd1" xdspan.item(i).className="xd1"; } this.className="xd2";//設置點擊的span標簽class="xd2" for(var i=0;i<xdspanlength;i++){ if(xdspan.item(i).className=="xd2"){//通過for循環(huán)判斷當前點擊的是第幾個小圓點,然后修改圖片地址 document.getElementById("imgs").src='images/b'+(i+1)+'.jpg'; p=i+1;////全局變量,存儲當前播放的第幾張圖片,以便從當前圖片開始播放下一張圖片 } } } }function AutoPlay(){//自動播放函數(shù) if(p>=7){p=1;}//只有6張圖片,當p大于等于7時就從第一張圖片開始 for(var i=0;i<xdspanlength;i++){//通過for循環(huán)為所有span標簽設置class="xd1" xdspan.item(i).className="xd1"; } xdspan.item(p-1).className="xd2";//設置當前播放的span標簽class="xd2" document.getElementById("imgs").src='images/b'+p+'.jpg';//修改圖片地址 p++; }document.getElementById("banner").onmouseover=function(){clearInterval(timer);}//當鼠標移入輪播區(qū)域時,停止自動播放document.getElementById("banner").onmouseout=function(){timer=setInterval("AutoPlay()",1300);}//當鼠標移出輪播區(qū)域時,繼續(xù)自動播放</script></body></html>width:600px; height:300px對應的width是寬度 height是高度 自行調(diào)整即可
制作網(wǎng)頁怎樣把背景圖片鋪滿
<body style="background:url(../images/body_bg.jpg) repeat ">把這句替換你的頁面中的<body>意思是整個頁面都設置body_bg.jpg這張圖片作為背景圖片并全屏平鋪.若只想往左邊平鋪的話呢.則把里面的repeat替換成repeat-x,若只想往下平鋪呢,則把repeat替換成repear-y
為什么用了你的代碼后 背景圖片沒了? 全是白的
(images/body_bg.jpg)注意此處的路徑.看是根目錄images文件下的body_bg.jpg背景圖片.根據(jù)你自己的情況進行修改就可以了