網頁輪播設計
㈠ 怎麼設計網頁banner
設計網頁banner的方法如下：
1、以文字為主
雖然現在網站的圖片大多都提倡圖文並茂，這樣能夠提高用戶體驗，但是我們現在看到很多網站上的圖片很多都是以圖片為主，這樣就是容易陷入一個誤區：banner圖只是為了用圖片的形式來展示網站的主要產品或者企業的總體形象。其實這樣的banner是很難能吸引到用戶的。因為有些用戶還是需要一定的文字來理解廣告中的內容的。如果是文字為主，做到言簡意賅，這樣的圖文並茂才能有利於提高點擊率。
2、不要出現價格信息
一般的消費者對於價格都是非常敏感的，除非是你的產品價格相比同行業的產品價格低出很多，很有價格上的優勢，否則不建議在banner上出現價格信息。因為價格一旦不是用戶心理能接受的，這個banner就會被用戶無視。
3、添加免費或者巨大優惠等字樣
根據眾多消費者的消費心理，他們對於那些物美價廉的產品都是非常熱衷的。對於企業網站的推廣和banner的設計也是這樣，在banner上添加免費或者巨大優惠等字樣也是能很有效地吸引到用戶。
4、設計帶有行為號召力
我們平時上網看到有些banner上會有個類似點擊的按鈕或者鏈接，潛意識會有著想點擊的念頭，可能會情不自禁地點擊進去。這種方法也能很好地提高點擊率。
㈡ 怎麼設計網頁banner
Banner規格尺寸大小不一，文件大小也有一定的限制，這就使得在設計上增加了許多障礙，顏色不能太豐富，否則會在文件大小的限制下失真，軟文不
能太多，否則會沒有重點，得不償失，怎麼在方寸間把握平衡，變得十分重要。接下來，我為大家總結累一些，如有鄙陋，請指正，萬分感謝。
第一部分：顏色
1．Banner與環境對比
試想如果在一個以淺色調為基準的網站上投放Banner，是不是從明度上拉開對比會很好的提高用戶的注意力呢(相反亦然)。
3．軟文（Slogan）
(1)俗話說得好「話不在多，精闢就行」當今炙手火熱的微博就是一個例子「140字概括你要說的」，Slogan也是一樣。
(2)要言之有物，第一要抓住用戶的心裡，了解用戶的想法很重要。第二我們要推給用戶什麼，用戶對什麼感興趣。下面舉個例子：
Slogan只有四個字，終於來了，白色iphone4吊足了apple迷門近兩年的胃口，這四個字恐怕是他們最想聽到的。用戶從不會質疑apple的性
能，科技領先性及用戶體驗性，他們最想的恐怕就是擁有自己夢寐以求的白色iphone4。所以，apple的slogan簡約而不簡單。
㈢ 我想在網頁設計上弄圖片輪播的效果。求個代碼。
直接在網路上面搜一下
js特效，就有一大堆了。這里給你的代碼你也調試不了。
去那些js特效網可以直接調試。希望可以幫到你。
我的網站是
sb網
，你可以網路一下，借鑒。
㈣ 網頁藝術設計banner的製作技巧有哪些
簡單且完整的設計
當 Page和Sergey Brin向潛在投資者介紹他們的產品——「Google」的時候，他們將Adwords作為後備選擇——萬一他們不能獲取任何利潤的話。最後他們採用了後備計劃，同時我們也看到了他們的選擇是多麼明智。是什麼讓枯燥乏味的廣告得這么成功?與其他廣告不同的是，他們既沒有喚起瀏覽者的好奇心也沒有影響網頁的主流思想。事實上，其相反面是正確的。Adwords看起來像搜索結果的一部分，讓人們感覺這些廣告是由需而生的。這個簡單的設計不僅幫助Google提升了他們的搜索引擎同時也促進了Adwords廣告的發展，對此我們毫無疑問。
參與互動
Banner設計者會巧妙地運用一些類似Flash的工具設計一種可以邀請用於參與互動的banner。讓用戶參與互動的方法多種多樣。一些網站設計者利用一種在以前很流行的游戲元素設計banner。我們都知道pacman(吃豆人)這個很流行的游戲。我以前見過一個我最喜歡的banner就是讓pacman去「吃」美元。結果就是出現了一個很漂亮的標語要求你開儲蓄帳號，幫助你用固定的利率存錢。這個互動banner後面的目的很簡單就是讓用戶參與互動，然後當他們的意志不是很堅定的時候在恰當的時機向他們介紹銷售信息。
經過實踐證明這些互動banner是很有效果的。這樣的banner的最大的缺點就是大部分網站管理者不允許在他們的網站上使用。因為他會影響網頁內容。
㈤ 網頁設計中如何添加焦點切換輪播圖呢
參考代碼，還有一個js文件，留下郵箱發給你
html"><!DOCTYPEHTML>
<htmllang="en-US">
<head>
<metacharset="UTF-8">
<title>jQuery圖片放大變小切換代碼</title>
<scripttype="text/javascript"src="js/jquery.js"></script>
<scripttype="text/javascript"src="js/jquery.banner.js"></script>
<styletype="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180%Arial,Helvetica,sans-serif,"新宋體";}
.banner{width:100%;overflow:hidden;height:470px;position:relative}
.banList{position:absolute;left:50%;margin-left:-960px;height:470px}
.banListli{height:470px;opacity:0;position:absolute;transform:scale(0);transition:transform0.5sease0s,opacity1.5sease0s;z-index:1;}
.banListli.active{opacity:1;transform:scale(1);z-index:2;}
.fomW{position:absolute;bottom:20px;left:50%;height:20px;z-index:9;width:1000px;margin-left:-500px}
.jsNav{text-align:center;}
.jsNava{display:inline-block;background:#fff;width:15px;height:15px;border-radius:50%;margin:05px;}
.jsNava.current{background:#fc8f0f;cursor:pointer}
</style>
</head>
<body>
<divclass="banner">
<ulclass="banList">
<liclass="active"><ahref="http://sc.chinaz.com/"><imgsrc="images/img1.jpg"/></a></li>
<li><ahref="http://sc.chinaz.com/"><imgsrc="images/img2.jpg"/></a></li>
<li><ahref="http://sc.chinaz.com/"><imgsrc="images/img3.jpg"/></a></li>
</ul>
<divclass="fomW">
<divclass="jsNav">
<ahref="javascript:;"class="triggercurrent"></a>
<ahref="javascript:;"class="trigger"></a>
<ahref="javascript:;"class="trigger"></a>
</div>
</div>
</div>
<scripttype="text/javascript">
$(function(){
$(".banner").swBanner();
});
</script>
</body>
</html>
㈥ 怎麼進行網頁Banner設計
1、點擊才是王道
一般我們做的banner都是為了宣傳、推廣某個產品或新功能等，它本身就是引導用戶點擊參與的入口，我們目的就是要吸引用戶點擊。所以我們可以用不同形式和手法來表現，但相同處，通情達意，突出主題，富有樂趣，那它們則能讓瀏覽者產生興趣。
2、主題明確
在著手設計之前，設計師應該先與需求方溝通，並從中獲取需求方想要表達的主題和需要重點突出的點。然後在針對性地對廣告對象進行訴求，形象鮮明的展示所要表達的內容。不要放一些沒用的東西，除非你想趕走你的用戶。
3、與整個頁面相協調
當我們確定表達的主題之後，要在banner實際放置的環境中展開後續的設計工作。色彩搭配要明亮干凈，要與整個頁面相協調。不能為了使banner更加吸引用戶的眼球而大面積的使用一些濃重的顏色(特殊需求除外)。
4、順應用戶的瀏覽習慣
我們知道大多數的用戶在瀏覽網頁的時候都是從上到下，從左到右的瀏覽。為使banner更容易被用戶瀏覽,我們應該順應用戶這樣的瀏覽習慣，糟糕的設計會讓用戶無所適從，焦點到處都是。
5、文字的排列設計
由於是以文字為主體部分，背景其實就無關緊要了，大多數這樣的設計，我們都可以拿純色背景或者是風景、科幻類的壁紙，取其整體的部分作為你需要的設計背景，通常我在截取時都習慣選擇大部分能吸引眼球的圖案又或者是漸變漸現的純色部分。
關於怎麼進行網頁Banner設計，青藤小編就和您分享到這里了。如果您對頁面排版、網站設計、圖形處理等有濃厚的興趣，希望這篇文章可以對您有所幫助。如果您還想了解更多關於平面設計的素材及技巧等內容，可以點擊本站的其他文章進行學習。
㈦ 網頁設計dreamweaver中怎樣製作輪播廣告
輪播的話要麼結合flash來做那種輪播效果，要麼就是直接使用代碼編輯，網上有相關的代碼的，稍微修改即可使用，另外建站用開源的cms程序都有這個效果，自己根據需要替換圖片即可
㈧ 求指點網頁設計圖片輪播！
指點網頁設計圖片輪播這類文章，多查點兒資料，仿照格式，充實內容，就ok了。
㈨ 網頁設計中如何讓圖片輪播
網頁設計中讓圖片輪播，需要用到的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)
}
這樣是能實現輪播的。
㈩ 網頁怎樣做輪播圖
網頁設計中讓圖片輪播，需要用到的JS和比較好的div+css布局意識，主要還是需要了解left，top在css中的意思