图片网页设计

给装图片的div一张背景图，比如下面代码：div{background:url(图片路径) no-repeat;background-size:100%;}背景图片百分百显示，no-repeat意思是不重复显示

在你要定义的DIV CSS中加入这个属性 BACKGROUND: url(1.jpg) repeat; URL后面括号是，是图片在站内的路径， REPEAT 意思是重复 如果换成 repeat-x 或repeat-y 意思分别是横向重复，和纵向重复，DW网页制作有CSS可视化的属性调整窗口，很方便新手，如有不懂在补充问题

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

Photoshop制作网页效果图的几个注意点：第一点：新建文件尺寸大小； 制作网页效果图，首先就是要新建文件，那么要建多大的合适呢？这可不是随便乱定的，一般我们是要根据目前绝大部分显示器的最佳分辨率来定。在比较早些时候，17英寸为主流显示器，最佳分辨率为1024*768，所以考虑到网页在显示器上能有最好的显示效果，一般都定在1003px以下（这个数据是由显示器最宽1024px减去浏览器右侧滚动条宽21px和到1003px）。如果你的网页超过这个尺寸，那当网页即使最大化显示的时候，内容也不能完全呈现，底部就会显示水平滚动条，这样会影响用户体验！ 目前来说19英寸分辨率达到1280以上的宽屏显示器已经成为主流，因此现在很多网页都开始做得更宽，比如可以做成1200px宽的，但为了能让1024分辨率下都能有好显示，建议还是定为1003px以下，比如960，980都是合适的。如果不确定应该设置多少合适，可以打开参考网站，看看他们是设置多少。 如何查看别人的网页尺寸呢？很简单，使用截图工具把网页截下完整的宽度后使用Photoshop用选区工具框选宽度就能在信息面板里显示出来了！ 第二点：字体与字号； 字体方面，在浏览器里显示的字体是调用操作系统里的，因为绝大部分操作系统都有宋体、黑体、微软雅黑、Arial、Tahoma这几种字体，所以在网页效果制作时，尽量使用这些字体，如果不使用这些字体，那到在把网页效果图做成网页的时候就没法做出这种字体效果了；如果非要使用其他字体，那么在做成网页的时候只能以图片的形式来显示出来，不过考虑到图片文件都偏大，会让网页打开速度降低，所以尽量不要以这种形式显示。 第三点：关于颜色； 不同的操作系统会有不一样的调色标准，因在Web上就有定义了一个安全色表，以期能让符合这个色表定义的颜色，在不同显示设备上都能有同样的显示效果。不过对于不是对色彩十分严谨的网页效果来说，不需要这么严格执行，所以关于颜色，我们直接使用Photoshop里默认的颜色就可以了，当然，如果你所设计的网页对于色彩十分看中，那请认真按照Web安全色标准设计。 第四点：网页效果图里填充的内容； 在制作网页效果的时候，很多地方要填充文字内容，这个时候有些初学者为了方便操作，直接把同样的内容复制使用，最后整个网页上看起来就会显得怪怪的。这里大家在填充内容的时候，最好是使用不一样的信息，或者干脆直接从其他网页上截取内容填充。第五点：要注重细节处理； 因为你制作出来的效果图，最终是做为网页的制作依据，因此在效果图上，每个模块的间距都要精确到像素、文字摆放的位置等也要准确到位。 第六点：保存的图片格式； 效果图制作好后，建议保存成png格式。不要存jpg格式，因为这个格式对图片压缩比较大，会丢失细节。

你用PS做出来的是图片，并不是网页，图片是多大，就显示多大，居中显示是在代码里实现的。如果你想让图片居中，可以这样做：假如你的分辨率是1440*900，，而普通的网页页面宽度大部分都是960（PX）。所以你想让图片居中就很简单了，在1440*900的画布上，左右分别拉两条辅助线：左边一条在240px，右边一条在1200px那里，在两条辅助线中间的区域，刚好就是在1440分辨率下的居中显示。所以看你的分辨率，再设置你的网页设计图的大小，现在主流的分辨率是1440*，而页的宽度大部分是960（你可以百度一下为什么这是大部分网站会采取的尺寸）满屏需要代码标签属性width：100%来实现，看上面的回答貌似都是说代码类的，所以你自己看看自己是要代码类的居中还是要图片类的居中。代码上的居中更简单，一般采用的是div的magin居中。不过这不属于你的问题范畴，这里就不说了。 其实不是图片居中的问题，是我做的那个页面打开在浏览器上只显示了3/5显示器就全部显示出来了。其实我也说不清楚。反正打开就是我图片那样儿~我像素的800*1000这样的。如果是需要后面的编程的人完成的那就没有什么问题了。我就怕是我像素设置不大所以做出来的就是往左边偏移然后3/5显示器就能全部看到了，很难看的哈~~ 你保存也是jpg或者png格式给别人看，psd格式只能在ps里面看而已。给到客户或者其他要看的人，人家也不会专门开个浏览器来看。如果想要在浏览器居中，那也只能像我说的，选个主流的图片规格，然后再辅助线当中设计，就可以了。没有一个网站可以满足所有的分辨率。 其实我是PS做HTML格式，再到 Dreamweaver 加工。呼，略懂了，<img src="images/index.jpg" width="100%" height="200%" alt=""> 拿记事本改了像素成百分比那就在浏览器显示得差不多了。原来这个在网页显示的问题不关我们平面的问题哈，我还以为像素设置小了就显示得这样了呢。哇，这个中好多东西学呢，好多分工哦~呼，谢谢你啊~

第一种：不要给文字标签加属性。给img{vertical-align: middle;}一个属性即可。第二种：img标签向左浮动，给文字加一个标签（例如span），然后设置文字标签为块状，并设置上(内/外)边距。span{ display:inline-block; margin-top:4px; margin-top：4px;} 内边距，外边据均可，最好是内边距。第三种：给文字加个标签（例如span），同时控制这两个标签浮动。并给文字加行高，其值为图片高度值。如：img{float:left;} span{ float:left; line-height:40px;} (若图片的高度为40px)

在dw里的时候，图片在文字上方。在图片的<img>里写 float:left; <img src="a.jpg" style="float:left;" />

这位朋友这个很简单;方法如下：在<body></body>添加以下代码，<table> <tr> <td><img src="../img/00_05.jpg" /></td> </tr> </table><div>我爱你</div>在<head></head>里添加： <style type="text/css"> table{border-style:outset;} div{ position:absolute; top:100px; left:100px;} img{ width:200px; height:200px;} </style>原理就是把文字设置在一个DIV层中用绝对定位使这个层显示在图片的某个位置即可。（图片路径自己填写即可），希望采纳。

图片的分辨率在不同的地方是不一样的 网页设计为72DPI 写真为152 2楼说的都对