網頁設計圖片怎麼切_網頁設計html圖片切換怎麼做到的

1、請問網頁設計中怎麼固定一個頁面或者切好的圖片的寬呢？

圖片可以外面套用div然後給div寬高。也可以直接給圖片加上寬高。

2、這張圖怎麼切啊，要製作網頁的話，是先把它全切下來作為背景圖片

用PS搞
其實這張圖很簡單就只有2組圖案還是一樣的。你保留右上的圖案，其他的全部用橡皮擦擦掉，再框選復制一組到左下差不多一樣的位置即可
還不會Q我教你或直接讓我做好發你都行

3、網頁製作是如何實現圖片切換的？

新建項目文件夾如下圖所示

編寫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文件的圖片截圖如下

運行效果截圖如下：

4、在網頁製作是如何實現圖片切換

在DreamWeaver中實現滑鼠圖片切換效果可以使用『滑鼠經過圖像』功能來實現
也可以用CSS控制來實現。
『滑鼠經過圖像』功能簡單明了。不需多講，多試幾次即可掌握。
現在具體講一下 CSS控制實現圖片切換效果！
首先製作一個 ID為abc 的div 寬度50px; 高度50px; 在abc裡面隨便打一個字設置一個空鏈接。

然後定義 abc 寬度50px; 高度50px; a標簽的塊形式代碼如下：
<style type="text/css">

</style>

<div id="abc"><href="#">字體</a></div>
然後設置 div的背景圖片比如圖片名為 bj.gif
CSS代碼變為：
<style type="text/css">

</style>
最後設置滑鼠經過的樣式比如滑鼠經過圖片為 bjj.gif
CSS代碼變為如下：
<style type="text/css">

</style>

5、UI 中網頁設計切圖怎麼切

PxCook，目前我還沒用上Mac，所以也不知道傳說中的Sketch到底多神奇。PxCook在Windows上標注還比較順手，雖然它還附帶切圖功能，但是比較雞肋，不推薦用它切圖。
切圖工具：
Cutterman 一款PS的插件，切圖非常方便，但不支持綠色免安裝版本PS，而且對PS版本要求比較高，針對CS 6的已經不維護更新了。推薦安裝官方完整版PS cc，然後自行破解。官網上有安裝使用教程，自己研究下吧，因為我也是最近才開始接觸這款插件。
Part 2 Photoshop
現在常用的幾種設計尺寸
1. 640*960 4時代的尺寸，剛接觸APP設計用的是這個尺寸，擬物盛行的時代(現在用這個尺寸設計的應該比較少了吧)；
2. 640*1136 5/5S/5C，IPhone更新，咱們設計也得跟著與時俱進(應該還有人用這個設計尺寸)，進入扁平的時代了；
3. 750*1334 6 目前我做設計稿的設計尺寸，IPhone6的尺寸，向下可以適配4，5，向上可以適配6 plus；我記得IP6推出後，我問總監應該用什麼尺寸設計，他說用IP6的吧，好適配，切出來就是@2x了，改一改上下都能照顧到。

6、網頁設計怎麼切圖

你用什麼軟體設計的就用什麼軟體來裁切圖，我用的是photoshop進行設計，也是用這個來進行的切圖；
切圖保存格式最好、最常用的是gif和jpg。色彩要求不多的情況下，比如說小圖標，就用gif。如果色彩比較豐富，gif就不夠用了，就要保存成jpg。至於png，一般情況下不要用，一個是佔用空間大，再是在不同的瀏覽器下瀏覽，會出現灰色背景，祝你好運！

7、網頁設計html圖片切換怎麼做到的？

圖片切換要用到JAVASCRIPT技術了，不知道樓主學了沒，但是javascript做起來會比較困難，用jquery來做就會簡單很多，裡面封裝了許多方法

8、網頁製作中如何切割圖片？

其實，你有點沒有理解到.就是其實只要切割之後,導入DREAMWEAVER中，自動就以切片為單位變成表格了.所以，先切再導入,而不是先做表,再切.
如果你先做表,那就只能按照表格,調整圖片大小.
這是兩種不同方法，不要混淆.

9、頁面設計頁面製作這種背景的頁面怎麼切圖的啊。。。主要是背景怎麼整的。。。

目前我無法判斷你那些圖片帶鏈接，所以只能大概的給你講一下（目前文字部分我先不管），具體我拿第三張來講給你吧。

首先，把所有要做鏈接的圖層都隱藏掉，剩下的層，就可以用來切圖，整體背景是藍色，所以css搞定就行。

其次，背景有一張整體的背景圖，這個需要全部單獨切下來，圖片上面不要帶任何其他元素，就只是這張單獨的圖片就好，布局的時候引用為背景！

然後，剩下的就是主體部分，上面的播放視頻和文字我就不講了，簡單，底部的汽車促銷圖片也切一張大圖就好，也簡單。

最後，就剩下最難搞的中間部分，大概想了一下，2種方法實現，如下：
1、切成整張大圖，需要做鏈接的地方，畫上不規則熱區就好了！這種比較簡單些。
2、圖片什麼樣，就切成什麼樣，每張小圖都單獨切出來（注意：要做成png格式保存，背景設置為透明），然後寫html的時候，用css畫出等大的不規則圖形，吧圖片當做背景加進去，然後用css絕對定位一下，如有鏈接加鏈接，完美實現！

備註：css畫不規則圖形，網上可以搜到教程，看一看就差不多，不難！

至於其他幾張圖，比較簡單，簡單說一下第二張，第二張的其實如果想簡單實現，那就除文字和純背景色外，整張切，然後有鏈接的地方加熱點就好，想做復雜一點，就可以用到我所說的css畫不規則圖形，純色的三個縱橫條，不用切，css畫出來，添加背景色，然後絕對定位就好，其他的該切多大就切多大，然後用css絕對定位，設置好z-index的關系，就ok了！

之前做過很多這樣的網站，這都是經驗之談，完全能實現，要有問題再問我！完全純手打啊~~

導航:首頁 > 萬維百科 > 網頁設計圖片怎麼切

網頁設計圖片怎麼切

與網頁設計圖片怎麼切相關的知識