怎么制作网页图片

网页设计中如何让图片轮播

网页设计中让图片轮播,需要用到的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)}这样是能实现轮播的。

网页设计中边框里的图片如何控制其大小?

  可以在css文件里设置图片的长宽及图片的浮动等各种特效。即用width、和height强制改变图片的大小。如:  .a{background:url(tupian.jpg);width=20px;height=20px;} 说明:.a是类选择器,调用时<标签名 class="类名">(这里类名为a),url里面是图片的位置及名称。width、height即强制改变的图片的大小。  还有一种方式是可以借助电脑的画图工具将图片的大小改成目标大小,然后保存后也可以直接调用图片。

网页制作怎么把图片居中

<div align="center"><img name="n08_r2_c1" src="images/08_r2_c1.jpg" border="0" alt="" /></div>

怎么把Dreamweaver制作好的网页转换成图片格式

Dreamweaver 不可以,但360浏览器可以 你用360打开,点文件--存储为图片,或者截图去!

如何用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;

制作网页时如何给图片设置热区链接

一、在Dreamweaver MX中为图片建立热区 1、启动Dreamweaver MX(其他版本请仿照操作),打开需要建立图片热区的网页文件,选中相应的图片,此时“属性”面板自动切换到“图片属性”状态(如图1)。 2、选中一种热区类型(如“椭圆”),然后在图片上拖来出一个热区来(参见图1) 注意:热区相当于是在图片上增加了一个图形层,象调整图片一样,可以通过鼠标调整热区的大小和位置。 3、在“链接”右边的方框中输入要链接的网址(如“ http://www.yesky.com ”);在“替代”后面的方框中输入一些说明字符(如“天极网”);按“目标”右边的下拉按钮,在随后出现的下拉列表中选择一种链接页面的打开方式(如需要让链接的页面在新窗口中打开,就选择“_blank”选项)。 注意:“替代”方框中输入的字符,在以后浏览网页时,当鼠标指向该热区时,在页面上会显示出该字符(如图2)。 4、重复上述2、3步的操作,在图片的不同部位建立多个热区。 在FrontPage2003中为图片建立热区 1、启动FrontPage2003,打开需要建立图片热区的网页文件。 2、执行“视图→工具栏→图片”命令,展开“图片”工具栏 3、选中一种热区类型(如“长方形”),然后在图片上拖来出一个热区,此时系统自动弹出“插入超链接”对话框 4、在“地址”栏上输入要链接的网址;点击“屏幕提示”按钮打开“设置屏幕超链接提示”对话框,输入一些说明字符 注意:此处的“屏幕提示”同Dreamweaver MX“替代”功能一样。 4、同理,重复上述3、4步的操作,可以在图片的不同部位建立多个热区。

制作网页时表格怎样用图片作背景

<table width="100" border="1" background="图片url"> <tr> <td> </td> </tr></table>

如何做网页图片的滑动效果

http://jingyan.baidu.com/article/e4511cf3122da32b845eafb3.html楼主你好,由于你的问题比较大,要跟你讲的东西太多,所以直接给你连接,你可以看到具体的操作步骤,。

网站怎么做图片轮播

有赏是什么赏呢。。。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毫秒执行一次AutoPlay()函数var p=1;//全局变量,存储当前播放的第几张图片var xdspan=document.getElementById("xd").getElementsByTagName("span");//获取xd下的所有span标签var xdspanlength=xdspan.length;//获取span标签的数量for(var i=0;i<xdspanlength;i++){ xdspan.item(i).onclick=function(){//通过for循环为所有span标签添加点击事件 for(var i=0;i<xdspanlength;i++){//通过for循环为所有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循环判断当前点击的是第几个小圆点,然后修改图片地址 document.getElementById("imgs").src='images/b'+(i+1)+'.jpg'; p=i+1;////全局变量,存储当前播放的第几张图片,以便从当前图片开始播放下一张图片 } } } }function AutoPlay(){//自动播放函数 if(p>=7){p=1;}//只有6张图片,当p大于等于7时就从第一张图片开始 for(var i=0;i<xdspanlength;i++){//通过for循环为所有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);}//当鼠标移入轮播区域时,停止自动播放document.getElementById("banner").onmouseout=function(){timer=setInterval("AutoPlay()",1300);}//当鼠标移出轮播区域时,继续自动播放</script></body></html>width:600px; height:300px对应的width是宽度  height是高度 自行调整即可

制作网页怎样把背景图片铺满

<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背景图片.根据你自己的情况进行修改就可以了

建站需求填写

采购需求填写

采购需求

采购产品:
联系人:
* 联系电话:
公司名称:
补充说明:
* 验证码:
提交