1、網頁設計 圖片輪顯的代碼
網頁設計圖片輪顯的代碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
<SCRIPT src="js/article.js"></SCRIPT>
<link href="css/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="312" border="0" align="center" cellpadding="0" cellspacing="0" class="solidbox">
<tr>
<td width="312" height="312" align="center"><TABLE border=0 align="center" cellPadding=0 cellSpacing=0>
<TBODY>
<TR>
<TD><DIV id=oTransContainer
style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); WIDTH: 220px; HEIGHT: 194px"><A
href="http://www.makewing.com/lanren/"
target=_blank><IMG id=oDIV1
style="DISPLAY: yes;"
height=300 src="images/01.jpg"
width=300 border=0></A><A
href="http://www.makewing.com/lanren/"
target=_blank><IMG id=oDIV2
style="DISPLAY: none;"
height=300 src="images/02.jpg"
width=300 border=0></A><A
href="http://www.makewing.com/lanren/"
target=_blank><IMG id=oDIV3
style="DISPLAY: none;"
height=300 src="images/03.jpg"
width=300 border=0></A><A
href="http://www.makewing.com/lanren/"
target=_blank><IMG id=oDIV4
style="DISPLAY: none;"
height=300 src="images/04.jpg"
width=300 border=0></A></DIV>
</TD>
</TR>
</TBODY>
</TABLE></td>
</tr>
<tr>
<td height="22" align="right" valign="top"><script>var MaxImg = 4; fnToggle();</script>
<TABLE cellSpacing=1 cellPadding=0 width=110
border=0>
<TBODY>
<TR>
<TD width=26><A href="javascript:toggleTo(1)"><IMG height=15
src="images/s_1.gif" width=17
border=0></A></TD>
<TD width=26><A href="javascript:toggleTo(2)"><IMG height=15
src="images/s_2.gif" width=17
border=0></A></TD>
<TD width=26><A href="javascript:toggleTo(3)"><IMG height=15
src="images/s_3.gif" width=17
border=0></A></TD>
<TD width=27><A href="javascript:toggleTo(4)"><IMG height=15
src="images/s_4.gif" width=17
border=0></A></TD>
</TR>
</TBODY>
</TABLE></td>
</tr>
</table>
</body>
</html>
CSS的代碼為：
td {font-size: 12px;}
.solidbox {
BORDER-TOP: #D7D7D7 1px solid;
BORDER-RIGHT: #D7D7D7 1px solid;
BORDER-BOTTOM: #D7D7D7 1px solid;
BORDER-LEFT: #D7D7D7 1px solid;
}
2、網頁設計圖片瀏覽模塊如何設計
||<style type="text/css">
.container, .container *{margin:0; padding:0;}
.container{width:408px; height:168px; overflow:hidden;position:relative;}
.slider{position:absolute;}
.slider li{ list-style:none;display:inline;}
.slider img{ width:408px; height:168px; display:block;}
.slider2{width:2000px;}
.slider2 li{float:left;}
.num{ position:absolute; right:5px; bottom:5px;}
.num li{
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
background-color: #fff;
}
.num li.on{
color: #fff;
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color: #FF7300;
font-weight: bold;
}
</style>
<div class="container" id="idTransformView">
<ul class="slider" id="idSlider">
<li><img src="images/01.jpg"/></li>
<li><img src="images/02.jpg"/></li>
<li><img src="images/03.jpg"/></li>
</ul>
<ul class="num" id="idNum">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<br />
<div class="container" id="idTransformView2">
<ul class="slider slider2" id="idSlider2">
<li><img src="images/01.jpg"/></li>
<li><img src="images/02.jpg"/></li>
<li><img src="images/03.jpg"/></li>
</ul>
<ul class="num" id="idNum2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div><br />
<p>
<script type="text/javascript">
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
var TransformView = Class.create();
TransformView.prototype = {
//容器對象,滑動對象,切換參數,切換數量
initialize: function(container, slider, parameter, count, options) {
if(parameter <= 0 || count <= 0) return;
var oContainer = $(container), oSlider = $(slider), oThis = this;
this.Index = 0;//當前索引
this._timer = null;//定時器
this._slider = oSlider;//滑動對象
this._parameter = parameter;//切換參數
this._count = count || 0;//切換數量
this._target = 0;//目標參數
this.SetOptions(options);
this.Up = !!this.options.Up;
this.Step = Math.abs(this.options.Step);
this.Time = Math.abs(this.options.Time);
this.Auto = !!this.options.Auto;
this.Pause = Math.abs(this.options.Pause);
this.onStart = this.options.onStart;
this.onFinish = this.options.onFinish;
oContainer.style.overflow = "hidden";
oContainer.style.position = "relative";
oSlider.style.position = "absolute";
oSlider.style.top = oSlider.style.left = 0;
},
//設置默認屬性
SetOptions: function(options) {
this.options = {//默認值
Up: true,//是否向上(否則向左)
Step: 5,//滑動變化率
Time: 10,//滑動延時
Auto: true,//是否自動轉換
Pause: 2000,//停頓時間(Auto為true時有效)
onStart: function(){},//開始轉換時執行
onFinish: function(){}//完成轉換時執行
};
Object.extend(this.options, options || {});
},
//開始切換設置
Start: function() {
if(this.Index < 0){
this.Index = this._count - 1;
} else if (this.Index >= this._count){ this.Index = 0; }
this._target = -1 * this._parameter * this.Index;
this.onStart();
this.Move();
},
//移動
Move: function() {
clearTimeout(this._timer);
var oThis = this, style = this.Up ? "top" : "left", iNow = parseInt(this._slider.style[style]) || 0, iStep = this.GetStep(this._target, iNow);
if (iStep != 0) {
this._slider.style[style] = (iNow + iStep) + "px";
this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);
} else {
this._slider.style[style] = this._target + "px";
this.onFinish();
if (this.Auto) { this._timer = setTimeout(function(){ oThis.Index++; oThis.Start(); }, this.Pause); }
}
},
//獲取步長
GetStep: function(iTarget, iNow) {
var iStep = (iTarget - iNow) / this.Step;
if (iStep == 0) return 0;
if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
return iStep;
},
//停止
Stop: function(iTarget, iNow) {
clearTimeout(this._timer);
this._slider.style[this.Up ? "top" : "left"] = this._target + "px";
}
};
window.onload=function(){
function Each(list, fun){
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};
var objs = $("idNum").getElementsByTagName("li");
var tv = new TransformView("idTransformView", "idSlider", 168, 3, {
onStart : function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) }//按鈕樣式
});
tv.Start();
Each(objs, function(o, i){
o.onmouseover = function(){
o.className = "on";
tv.Auto = false;
tv.Index = i;
tv.Start();
}
o.onmouseout = function(){
o.className = "";
tv.Auto = true;
tv.Start();
}
})
////////////////////////test2
var objs2 = $("idNum2").getElementsByTagName("li");
var tv2 = new TransformView("idTransformView2", "idSlider2", 408, 3, {
onStart: function(){ Each(objs2, function(o, i){ o.className = tv2.Index == i ? "on" : ""; }) },//按鈕樣式
Up: false
});
tv2.Start();
Each(objs2, function(o, i){
o.onmouseover = function(){
o.className = "on";
tv2.Auto = false;
tv2.Index = i;
tv2.Start();
}
o.onmouseout = function(){
o.className = "";
tv2.Auto = true;
tv2.Start();
}
})
$("idStop").onclick = function(){ tv2.Auto = false; tv2.Stop(); }
$("idStart").onclick = function(){ tv2.Auto = true; tv2.Start(); }
$("idNext").onclick = function(){ tv2.Index++; tv2.Start(); }
$("idPre").onclick = function(){ tv2.Index--;tv2.Start(); }
$("idFast").onclick = function(){ if(--tv2.Step <= 0){tv2.Step = 1;} }
$("idSlow").onclick = function(){ if(++tv2.Step >= 10){tv2.Step = 10;} }
$("idRece").onclick = function(){ tv2.Pause-=1000; if(tv2.Pause <= 0){tv2.Pause = 0;} }
$("idAdd").onclick = function(){ tv2.Pause+=1000; if(tv2.Pause >= 5000){tv2.Pause = 5000;} }
$("idReset").onclick = function(){
tv2.Step = Math.abs(tv2.options.Step);
tv2.Time = Math.abs(tv2.options.Time);
tv2.Auto = !!tv2.options.Auto;
tv2.Pause = Math.abs(tv2.options.Pause);
}
}
</script>
3、用PS做一個網頁設計圖
挺簡單的，現在fireworks中做下PSD圖，然後在DW中處理一下就行了
我也有現成的，加些分留個郵箱可以發給你。。。。
網站分為好多類型，像個人主頁、門戶、論壇等，你可以選擇其中的一個來做。。如果你是新手的話，那就做個個人主頁吧，比較自由，做成什麼樣的都可以。。。。
如果你的程序搞的比較好的話，那就做個論壇吧、
4、網頁設計圖是什麼
網頁設計圖就是要把網頁做成什麼樣子的一張圖，可以是手工在白紙上畫的，也可以是用電腦軟體製作的。效果多種多樣，根據不同的行業進行分析之後製作的。想知道怎麼樣，可以直接看別人的網站做出來是什麼樣的，再分析一下是否符合用戶需求，方便用戶瀏覽？
步驟是分析行業用戶需求，設計內容分布去滿足這些用戶的需求，畫出一張圖。
我覺得就這么簡單，雖然看起來不怎麼專業，但是能解決用戶的一些實際的問題了。
5、網店商品詳情頁主圖怎樣設計？
消費者通過商品搜索頁主圖進入商品詳情頁以後，展現在消費者眼前的就是商品詳情頁主圖，商品搜索頁主圖與商品詳情頁主圖中的首圖可以相同，也可以不同（商家可以通過後台設置為不同）。各類網路零售平台系統允許商家發布的主圖最多是5張，有些平台要求5張圖全部上傳，有些沒有嚴格的要求，但對於正規的商家來說，用於銷售的商品的5張主圖一般是要做全的，除了首圖以外，其他主圖的作用與首圖比相對要輕一些，但也是非常重要的。一般主圖需要展現商品各個視角的外觀，也可以用於展現同款但不同顏色的幾個商品圖。商品詳情頁主圖的設計與製作相對比較簡單，一般情況下不需要像搜索頁主圖一樣進行詳細的策劃與設計，製作方法一般為：
先啟動Photoshop軟體，打開選擇好的4張表現商品不同角度，或者表現商品同款不同色彩，或者展現商品組合的不同角度，或者展現商品特殊細節的圖片。
然後，執行「Ctrl」＋「N」新建一個圖像文件，文件大小設置為80000像素，解析度為72像素／英寸，色彩模式為RGB。
接下來，運用選擇工具選取商品所在的圖像，把選中的商品圖像移到創建的圖像文件中，並調整相應的角度與大小即可。
如果需要背景的可以新建一個圖層，放置合適的背景，就能完成商品主圖的設計了。
6、如何進行web頁面原型圖設計
最後半天心不在焉拖拖拽拽把各個部分都搭建好了，可是做出來的頁面慘不忍版睹，自己都沒勇氣打權開。晚上回家後和鄰居又討論了三個小時，最後熬夜把原型圖完成。雖然最後原型圖也沒有被採納，但是這次原型圖居然受到了表揚，領導說我的原型圖有了提升。今天就寫下這篇文章，為這段時間的工作做一個總結。原型設計前：①
7、網頁設計怎樣使圖片在網頁中任意的飄來飄去，例如廣告圖片之類的
那個要用到一個JS代碼。上面的連接地址和圖片可以自行更改！ <div id="codefans_net" style="position:absolute"> <!--鏈接地址--><a href=" http://www.soso.com/" target="_blank"> <!--圖片地址--><img src="/images.gif" width="160" height="95" border="0"> </a></div> <script> var x = 50,y = 60 var xin = true, yin = true var step = 1 var delay = 10 var obj=document.getElementById("codefans_net") function float() { var L=T=0 var R= document.body.clientWidth-obj.offsetWidth var B = document.body.clientHeight-obj.offsetHeight obj.style.left = x + document.body.scrollLeft obj.style.top = y + document.body.scrollTop x = x + step*(xin?1:-1) if (x < L) { xin = true; x = L} if (x > R){ xin = false; x = R} y = y + step*(yin?1:-1) if (y < T) { yin = true; y = T } if (y > B) { yin = false; y = B } } var itl= setInterval("float()", delay) obj.onmouseover=function(){clearInterval(itl)} obj.onmouseout=function(){itl=setInterval("float()", delay)} </script>
8、如何進行web頁面原型圖設計
簡單來說，產品經理進行頁面原型設計時，只需要把業務邏輯和交互邏輯講明白，不需要做得特別精美，而是要把握重點，把重心放在分析用戶需求、規劃產品功能上。之後交互設計師可以根據產品經理的原型圖進行設計。
從使用工具來看的話，產品經理在做原型時其實只需要Mockplus或摹客原型這樣的快速原型設計工具。只要提前想清楚主要的功能點和交互邏輯，使用工具內置的現成組件，十分鍾就能把原型做完。
交互設計師需要做的是根據產品經理繪制的原型版和相關產品文檔，繪制高保真原型，通常交互設計師會使用PS、sketch、XD之類的設計工具，在完成頁面設計後上傳到摹客等協作平台添加交互。完成後也可以直接發鏈接給其他成員審閱，這時候主要看的就是原型呈現的視覺效果了。