网页制作图片

我给你举三个CSS的例子一、图片1、你可以用background来实现，也就是添加为层的背景。.middle{background:url(../images/head-bg.gif);}2、也可在层里直接添加图片进去，<div class="middle"><img src="images/middle.gif" width="173" height="198" /><p></p></div>二、文字文字就简单了，直接添加在<p></p>里面就行了，设置下<p>的css样式三、链接链接你可以链接图片或者文字1、链接图片<a href="#"><img src="images/middle.gif" width="173" height="198" border="0" /></a>2、链接文字<p><a href="#">链接文字</a>其他文字</p>

一下这串代码可以控制网页中插入的图片大小。（调节350和360控制)<p style="text-align: center; "> <img alt="" src="图片地址" style="width: 350px; height: 360px; " /></p>

给图片加上这句话 style="position:absolute;top:100px;left:300px;"top 是距上边的距离 left是距离左边的距离 同理 还有right bottom 当然 同时用2个就可以了 左上或者 右下

给导航栏最外围的div加样式 position:fixed;就可以了如果不明白可以参考我的站 www.tianchenhudong.com

样式表：<style>.img1{width:100px;height:50px;}</style><img src="图片路径" class="img1">行内样式是<img src="图片路径" style="width:100px;height:50px;">这样即可控制！

<style type="text/css">                        <!--                        #demo { overflow:hidden;                        background: #FFF;                        overflow:hidden;                        border: 1px dashed #CCC;                        width: 940px;                        }                        #demo img {                        border: 3px solid #F2F2F2;                        }                        #indemo {                        float: left;                        width: 800%;                        }                        #demo1 {                        float: left;                        }                        #demo2 {                        float: left;                        }                        -->                        </style>                        <div id="demo">                        <div id="indemo">                        <div id="demo1">                       <img src="images/teams/rehuo.jpg"/>                       <img src="images/teams/huren.jpg"/>                       <img src="images/teams/huojian.jpg"/>                       <img src="images/teams/maci.jpg"/>                       <img src="images/teams/kaierteren.jpg"/>                       <img src="images/teams/jueshi.jpg"/>                       <img src="images/teams/lanwang.jpg"/>                       <img src="images/teams/sll.jpg"/></div>                        <div id="demo2"></div>                        </div>                        </div>    <script>                        <!--                        var speed=10; //数字越速度越慢                        var tab=document.getElementById("demo");                        var tab1=document.getElementById("demo1");                        var tab2=document.getElementById("demo2");                        tab2.innerHTML=tab1.innerHTML;                        function Marquee(){                        if(tab2.offsetWidth-tab.scrollLeft<=0)                        tab.scrollLeft-=tab1.offsetWidth                        else{                        tab.scrollLeft++;                        }                        }                        var MyMar=setInterval(Marquee,speed);                        tab.onmouseover=function() {clearInterval(MyMar)};                        tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};                        -->                        </script>段代码左向右缝滚代码直接放放滚图片行记设置图片宽高面css面设置整图片滚区域宽度

在DreamWeaver中实现鼠标图片切换效果 可以使用 ‘鼠标经过图像’ 功能来实现也可以用CSS控制来实现。‘鼠标经过图像’ 功能简单明了。不需多讲，多试几次即可掌握。现在具体讲一下 CSS控制实现 图片切换效果！首先制作一个 ID为abc 的div 宽度50px; 高度50px; 在abc里面随便打一个字 设置一个空链接。然后定义 abc 宽度50px; 高度50px; a标签的块形式 代码如下：<style type="text/css"><!--#abc a {height: 50px;width: 50px;display: block;}--></style><!--注意上面才是CSS代码，下面是div--><div id="abc"><href="#">字体</a></div>然后设置 div的背景图片 比如图片名为 bj.gifCSS代码变为：<style type="text/css"><!--#abc a {background-image: url(bj.gif);height: 50px;width: 50px;display: block;}--></style>最后 设置鼠标经过的样式 比如 鼠标经过图片为 bjj.gifCSS代码 变为如下：<style type="text/css"><!--#abc a {background-image: url(bj.gif);height: 50px;width: 50px;display: block;}#abc a:hover {background-image: url(bjj.gif);}--></style>

用CSS可以实现你只要改变RevealTrans滤镜的“Transition"的值，就能获得不同的网页切换效果，是不是太方便了点？但很遗憾，要把RevealTrans滤镜用于网页中的某个对象就没有这么简单了，它必须借助于Javascript来调用其方法，才能实现，这就是说要动手编程序了。但也不是太难，下面我将通过一个制作动态字幕变换的例子来说明其使用方法。渐淡字幕变换效果 这个例子演示了利用Javascript程序控制Revealtrans滤镜来实现字幕逐渐淡出和渐进的效果，请看下面的效果图：< !--.mytrans { filter:revealTrans(Transition=12,Duration=2)}-- >< /style > 2、插入一个层，我们把层的“Layer ID”改为“div1”（可直接在层的属性面板上加入即可），并设置好层的背景和调整好层的大小，并把Revealtrans滤镜加载到到层上，这时你看到的层的标记代码是这样的：< div id="div1" style="position:absolute; width:680px; height:30px; z-index:37; background: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000" class="mytrans" >< /div > 3、在网页源代码的< head >与< /head >之间插入下面这段Javascript程序： < script language="JavaScript" > < !-- function HelpArray(len) { this.length=len; } // 建立一个数组，存放转换的内容。 HelpText=new HelpArray(5); HelpText[0]="在一个文档使用动态转换的滤镜（Revealtrans）其实是很容易的。"; HelpText[1]="首先，为对象的样式表单建立一个需要转换的“Revaltrans"滤镜，"; HelpText[2]="然后，使用“apply()"方法防止错误，"; HelpText[3]="现在，你可以改变任何你想改变的东西，"; HelpText[4]="最后，“play()"方法开始进行转换。"; ScriptText=new HelpArray(5); var i= -1; // 显示转换效果 function playHelp() { if (i==4) { i=0 ;} else { i++; } div1.filters[0].apply(); div1.innerText=HelpText[i]; div1.filters[0].play(); // 设置每段字幕演示的时间，以毫秒计。这里的时间要长于滤镜中的时间，以保证在转换结束后能停留一段时间。 // 以方便看清楚字幕内容。在本例中字幕演示的时间是6秒，滤镜中设置的转换时间是2秒。 mytimeout=setTimeout("playHelp()",6000); } -- > < /script > 4、在网页的源代码的< body >中加入这样一句代码：onload="playHelp()"。 到此，可以按F12看效果了，好象也不是太难。你若是想看看其它的转换效果，只要改变一下Revealtrans滤镜中的Transition参数值就行了，其它什么也不用改动，你瞧多方便！用它来作广告条我想效果不会差。比起动画来可瘦小多了。 当然Revealtrans滤镜同样也可以用于图片，效果也不错，但要改动一下Javascript程序。由于CSS还有一个动态滤镜是BlendTrans滤镜，用它做图片的淡入淡出效果相当不错，

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