网页设计如何实现图片效果_网页制作是如何实现图片切换的

1、网页设计div+css中怎么从图1来实现图2的效果的代码

没有看到代码,但是看图片,应该只将文本对齐方式由右对齐改为左对齐即可.即:
text-align:left;

2、网页设计中怎么让一张图片填充满整个画面求代码

1、如果楼主只是将其当做一张图片显示，可以通过css控制，如img{width:100%;height:100%;}.
否则需要将其作为网页背景的话可以试试如下方法：
2、如果这张图片为背景图片由于背景图片不具有伸缩性，只能通过别的方法绕着解决，在ie中可以用<body
style="filter:progid:dximagetransform.microsoft.alphaimageloader(src='1.jpg',sizingmethod='scale')">，实现背景拉伸铺满整个浏览器，但其它的浏览器不支持。
这时可以拐个弯，设置两层div，底层div当做背景使用，放置一张图片即可。
<div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;"><img src="1.jpg" width="100%" height="100%"/></div>
再将网页内容放置到第二层上<div id="content">页面内容</content>
3、网页背景图片默认情况下是重复平铺满整个页面。上面2方法是要求图片不重复，但又得占满浏览器所采用的方法。

3、dreamweaver网页制作中，怎样实现图片的走马灯效果

打开 Dreamweaver
新建 HTML 文档；
修改标题为"跑马灯"
保存为 index.html 文件。

首先，编写跑马灯部分的静态 HTML 代码，把图片排列起来
在 <body> 和 </body> 标签中添加以下代码：
<div>
　<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<li><img src="img/6.jpg" /></li>
<li><img src="img/7.jpg" /></li>
　</ul>
</div>

给上一步的 HTML 代码中的 div 标签增加 class 属性，如下：
　<div class="con">
编写跑马灯部分的 CSS 样式代码，代码放在 <head> 和 </head> 标签中，如下：
<style type="text/css">
　ul{list-style:none; padding:0; margin:0;}
　.con{ width:1105px; height:225px; overflow:hidden; border:2px solid #666; margin:10px auto 0 auto; padding:5px 0 0 5px;}
　.con ul li{ float:left; margin:0 5px 10px 0;}
　.con ul li img{ display:block; width:209px; height:209px; padding:2px; border:1px solid #ccc;}
</style>

引入 JQuery 库
　<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
引入 Marquee 插件
　<script type="text/javascript" src="marquee2.js"></script>
代码放在 </body> 标签前，如图：

给 div 增加 marquee 类
　<div class="con marquee">
保存文件，在浏览器中打开，就可以看到图片开始滚动了。

图片默认的滚动方向是“向上滚动”
如果要修改图片滚动的方向，可以给 div 指定 direction 属性，属性值可以取：
　up 上
　down 下
　left 左
　right 右

4、谁知道网页制作中图片怎样实现幻灯效果?

http://www.irishc.com 网站下面的那个幻灯片吗

这个网站下面的幻灯片的代码是
<embed ID="focus_flash" src="http://image2.sina.com.cn/bj/zonghe/pixviewer.swf" wmode="opaque" bgcolor="#FDD248"FlashVars="pics=图片地址1|图片地址2|图片地址3|图片地址4|图片地址5&links=文章地址1|文章地址2|文章地址3|文章地址4|文章地址5&texts=文章名字1|文章名字2|文章名字3|文章名字4|文章名字5&borderwidth=180&borderheight=180&textheight=20" menu="false" quality="high" width="180" height="200" "sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/ascgetflashplayer" />

代码说明：

图片地址，就是你图片或者文章配图的图片地址。
文章地址，如果图片地址1你用的是这一篇文章的图片，那就把这篇文章的地址粘贴在这里。
文章名字，就是这篇文章的名字。

width="180" height="200" 是幻灯片的尺寸，可以自行调节。
bgcolor="#FDD248" 是背景颜色，可以参考我的文章里的颜色设置。
textheight=20 是文字区域高度，可以自行调节。

不要陋掉哦

5、如何在网页制作中将图片设置为滚动

1、素材的准备。为了更好的表现网站的风格和特色，具备一些更富表现力和吸引力的图片是必不可少的；

2、在电脑上找到并且打开Dreamweaver8，重新建立一个网页文件，并且把网页文件保存，且命名为“index.html"文件；

3、在完成网页文件保存和命名为“index.html"文件以后，切换至代码编辑界面，输入相应的程序代码；

4、新建一CSS样式表文件，并将该文件保存到与“index.html”相同的目录下，文件名称为“MyStyle.css"；

5、在样式表文件"MyStyle.css”文件的完成以后，打开样式表文件"MyStyle.css”文件输入相应的程序代码；

6、在网页文件"index.html"中添加对该样式表的引用：“<link rel="stylesheet" type="text/css" href="MyStyle.css">”，同时新建一个JS文件，并将该文件另存为“MoveEffect.js"；

7、在JS文件”MoveEffect.js“文件建立完成以后，同样打开JS文件”MoveEffect.js“文件输入程序的代码；

8、完成上述程序运行以后，在主页文件"index.html”中添加对该“MoveEffect.js”文件的引用，“<script type="text/javascript" src="MoveEffect.js"></script>”，打开“index.html”网页文件即可。

6、html网页设计里面怎么平铺背景图片

html网页设计里面平铺背景图片的代码如下：
<html>
<body>
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%">
<img src="pictures/background.jpg" width="100%" height="100%"/>
</div>
</body>
</html>
网页背景默认是平铺整个屏幕的，可能有以下原因导致不能平铺：

1、图片不够大，又background属性不能拉伸图片；
2、只能用个div，把其z-index值设为负，并使这个div大小为整个body大小，在div里用<img> ；
3、body的background属性去掉，要不然会被遮住。

7、网页效果图怎么制作？

　平面广告和网站页面设计的宗旨就是吸引眼球，符合平面视觉冲击特点，如何设计一款有特色、另类能吸引眼球的作品是摆在平面设计人员和photoshop爱好者面前的难题

现在以一款网页平面设计效果图为实例，讲解网页设计方面的创意知识，从网页效果图布局创意、颜色选择，裁减效果图和制作网页特效等方面来学习。下面我们就一起来学习吧。

首先声明一下，这款网页效果图在得到朋友许可后拿来制作教程实例，切勿抄袭和用做其他用途。先看效果图0。

一、创意设计思路

一个网站在制作前需要确定网站风格、网站主题、和主色调，在没有确切的方案之前，最好不要贸然动手制作，不然最后的结果很可能是以失败而告终。

笔者决定从关键字"路行""独自行走"加上是暗色系的要求上下手，敲定颜色采用沙漠黄，沙漠很容易让人联想到孤单；板式确定为户外广告的样式沙漠黄配合生锈的广告牌。符合"颓废""艰辛路途"主题。

二、网站效果图及LOGO的制作。

1、LOGO的样式采用的是图形和字符的组合。汉字LOGO的字体不是下载的字体，是笔者用钢笔工具画出来的字体。如图1和1-1。

　钢笔工具勾勒出图1的行走的人样式，填充红色，然后调整混合模式"斜面和浮雕"选择浮雕效果、雕刻清晰、深度1、方向上、大小2，其他默认。这LOGO 的创意是，一个人在崎岖不平的路上坚持自己的方向，配合网站的英文加中文名字，构成一个形象LOGO，刚好"路"字和"行"字采用红色，突出了路行。

文字LOGO笔者用钢笔工具勾画出字的各个部件，然后拼接在一起，这里只给出"路"字的方法，"行"字方法如同。[next]

2、制作布局参考图。如图2

　3、根据布局效果图，新建文件大小1000X765，填充黑色。布局中的"显示区域"为广告牌是要挂到墙上的，使用"石头材质"放置在页面最上方来制作石板墙；使用"锈迹皮革材质"制作"显示区域""LOGO"区域的边框（注：一些材质的制作方法省略，平时可自行制作也可去图片站下载保存，用的时候方便），将LOGO区域的边框复制一层，调整不透明度为60%放置到LOGO曾下方，这样大体的框架就完成了。如图3和3-1。

（图5）

（图6）

4、找来一张沙漠公路的图片，把这张图片进行聚焦处理。点图4示例的按扭进入"以快速蒙版编辑模式"，选择渐变，渐变模式为"径向渐变"在图中间向两边拉，屏幕会出现一团红色；然后再点"以标准模式编辑"画面会出现一个圆圈选择区域，按"DELETE"删除即可。如图4和图4-1。

（图7）

（图8）

　5、在"路"图片上方新建一层，按住CTRL+"路"图层，单击新建的图层，填充颜色4E341B，调整为暗系沙漠黄。如图5。

（图9）

制作文字LOGO牌。找来图5-1中的灰色材质，在"LOGO边框"下面新建一层，然后在其之上新建一层，放置沙漠图片，将其混合模式修改为"颜色"然后打开一开始制

8、网页设计中如何实现图片的自动切换，好想动画效果似的，但不是插入的视频，如下图所示

试试这个图片轮播
有12345数字一起切换
有小图大图一起切换
里面有教程和源码

9、网页设计中怎么实现图片旋转

css3 的transform属性允许我们旋转、缩放和移动元素。可以通过给它传递一个 rotate(度数) 值来旋转一个元素，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点为元素的中心。

CSS代码如下：

.rotate{

-ms-transform:rotate(90deg); /* IE 9 */

-moz-transform:rotate(90deg); /* Firefox */

-webkit-transform:rotate(90deg); /* Safari and Chrome */

-o-transform:rotate(90deg); /* Opera */

}

浏览器支持：Firefox 4+、Oprea 10+、Safari 3.1+、Chrome 8+、IE 9+

10、网页制作是如何实现图片切换的？

新建项目文件夹如下图所示

编写index.html文件，代码如下：

<html>

<head>

<title>

lunbo

</title>

</script>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

编写style.css文件，代码如下：

*{ margin:0px; text-decoration:none;}

body{margin-top:50px;}

#container{width:600px; height:400px; position:relative;border:3px solid #333;overflow: hidden; margin:0 auto;}

#list{width:4200px; height:400px; position:absolute; z-index:1;}

#list img{float:left;}

#buttons{position:absolute; height:10px; width:100px; z-index:2; bottom:20px; left:250px;}

#buttons span{cursor:pointer;/*假超链接样式*/ float:left; border:1px solid #fff; width:10px; height:10px; border-radius:10px; background:#333; margin-right:5px;}

#buttons .on{background:orangered;}

.arrow{cursor:pointer; display:none; line-height:39px; text-align:center; font-size:36px;

font-weight:bold; width:40px; height:40px; position:absolute; z-index:2; top:180px;

background-color: RGBA(0,0,0,.3); color:#fff;}

.arrow:hover{background-color:RGBA(0,0,0,.7);}

#container:hover .arrow{display:block;}

#prev{left:20px;}

#next{right:20px;}

编写control.js文件代码如下

window.onload=function(){

var container=document.getElementById('container');

var list=document.getElementById('list');

var buttons=document.getElementById('buttons').getElementsByTagName('span');

var pre=document.getElementById('prev');

var next=document.getElementById('next');

var index=1;

var animated=false;

var timer;

function showButton(){

for(var i=0;i<buttons.length;i++){

if(buttons[i].className=='on'){

buttons[i].className='';

break;

}

buttons[index-1].className="on";

}

function animate(offset){

animated=true;

var newleft=parseInt(list.style.left)+offset;

var time=300;//位移总时间

var interval=10;//位移间隔时间

var speed=offset/(time/interval);//每一次的位移量

function go(){

if((speed<0&&parseInt(list.style.left)>newleft)||(speed>0&&parseInt(list.style. left)<newleft)){

list.style.left=parseInt(list.style.left)+speed+'px';

setTimeout(go,interval);

}

else{

animated=false;

list.style.left=newleft+'px';

if(newleft>-600){

list.style.left=-3000+'px';

}

if(newleft<-3000){

list.style.left=-600+'px';

}

go();

}

function play(){

timer=setInterval(function(){

next.onclick();

},3000);

}

function stop(){

clearInterval(timer);

}

next.onclick=function(){

if(index==5){

index=1;

}

else{

index+=1;

}

showButton();

if(animated==false){

animate(-600);

}

pre.onclick=function(){

if(index==1){

index=5;

}

else{

index-=1;

}

showButton();

if(animated==false){

animate(600);

}

for(var i=0;i<buttons.length;i++){

buttons[i].onclick=function(){

if(this.className=='on'){

return;

}

var myIndex=parseInt(this.getAttribute('index'));

var offset=-600*(myIndex-index);

index=myIndex;

showButton();

if(animated==false){

animate(offset);

}

container.onmouseover=stop;

container.onmouseout=play;

play();

}

images文件的图片截图如下

运行效果截图如下：

导航:首页 > 万维百科 > 网页设计如何实现图片效果

网页设计如何实现图片效果

与网页设计如何实现图片效果相关的知识