導航:首頁 > 萬維百科 > 簡單網頁設計特效代碼

簡單網頁設計特效代碼

發布時間:2020-10-23 04:01:17

1、誰知道有哪些製作網頁特效的好軟體啊?

網站設計八步驟 由於目前所見即所得類型的工具越來越多,使用也越來越方便,所以製作網頁已經變成了一件輕松的工作,不像以前要手工編寫一行行的源代碼那樣。一般初學者經過短暫的學習就可以學會製作網頁,於是他們認為網頁製作非常簡單,就匆匆忙忙製作自己的網站,可是做出來之後與別人一比,才發現自己的網站非常粗糙,這是為什麼呢?常言道:「性急吃不了熱豆腐」。建立一個網站就像蓋一幢大樓一樣,它是一個系統工程,有自己特定的工作流程,你只有遵循這個步驟,按部就班地一步步來,才能設計出一個滿意的網站。 一、確定網站主題 網站主題就是你建立的網站所要包含的主要內容,一個網站必須要有一個明確的主題。特別是對於個人網站,你不可能像綜合網站那樣做得內容大而全,包羅萬象。你沒有這個能力,也沒這個精力,所以必須要找准一個自己最感興趣內容,做深、做透,辦出自己的特色,這樣才能給用戶留下深刻的印象。網站的主題無定則,只要是你感興趣的,任何內容都可以,但主題要鮮明,在你的主題范圍內內容做到大而全、精而深。 二、搜集材料 明確了網站的主題以後,你就要圍繞主題開始搜集材料了。常言道:「巧婦難為無米之炊」。要想讓自己的網站有血有肉,能夠吸引住用戶,你就要盡量搜集材料,搜集得材料越多,以後製作網站就越容易。材料既可以從圖書、報紙、光碟、多媒體上得來,也可以從互聯網上搜集,然後把搜集的材料去粗取精,去偽存真,作為自己製作網頁的素材。 三、規劃網站 一個網站設計得成功與否,很大程度上決定於設計者的規劃水平,規劃網站就像設計師設計大樓一樣,圖紙設計好了,才能建成一座漂亮的樓房。網站規劃包含的內容很多,如網站的結構、欄目的設置、網站的風格、顏色搭配、版面布局、文字圖片的運用等,你只有在製作網頁之前把這些方面都考慮到了,才能在製作時駕輕就熟,胸有成竹。也只有如此製作出來的網頁才能有個性、有特色,具有吸引力。如何規劃網站的每一項具體內容,我們在下面會有詳細介紹。 四、選擇合適的製作工具 盡管選擇什麼樣的工具並不會影響你設計網頁的好壞,但是一款功能強大、使用簡單的軟體往往可以起到事半功倍的效果。網頁製作涉及的工具比較多,首先就是網頁製作工具了,目前大多數網民選用的都是所見即所得的編輯工具,這其中的優秀者當然是Dreamweaver和Frontpage了,如果是初學者,Frontpage2000是首選。除此之外,還有圖片編輯工具,如Photoshop、Photoimpact等;動畫製作工具,如Flash、Cool 3d、Gif Animator等;還有網頁特效工具,如有聲有色等,網上有許多這方面的軟體,你可以根據需要靈活運用。 五、製作網頁 材料有了,工具也選好了,下面就需要按照規劃一步步地把自己的想法變成現實了,這是一個復雜而細致的過程,一定要按照先大後小、先簡單後復雜來進行製作。所謂先大後小,就是說在製作網頁時,先把大的結構設計好,然後再逐步完善小的結構設計。所謂先簡單後復雜,就是先設計出簡單的內容,然後再設計復雜的內容,以便出現問題時好修改。在製作網頁時要多靈活運用模板,這樣可以大大提高製作效率。 六、上傳測試 網頁製作完畢,最後要發布到Web伺服器上,才能夠讓全世界的朋友觀看,現在上傳的工具有很多,有些網頁製作工具本身就帶有FTP功能,利用這些FTP工具,你可以很方便地把網站發布到自己申請的主頁存放伺服器上。網站上傳以後,你要在瀏覽器中打開自己的網站,逐頁逐個鏈接的進行測試,發現問題,及時修改,然後再上傳測試。全部測試完畢就可以把你的網址告訴給朋友,讓他們來瀏覽。 七、推廣宣傳 網頁做好之後,還要不斷地進行宣傳,這樣才能讓更多的朋友認識它,提高網站的訪問率和知名度。推廣的方法有很多,例如到搜索引擎上注冊、與別的網站交換鏈接、加入廣告鏈等。 八、維護更新 網站要注意經常維護更新內容,保持內容的新鮮,不要一做好就放在那兒不變了,只有不斷地給它補充新的內容,才能夠吸引住瀏覽者 ★要想學做網頁,首先得了解製作網頁的工具。 製作網頁主要有以下一些工具 Frontpage:office自帶的一個工具,操作簡單,實用,學起來比較輕松,功能不咋地,我不太喜歡。 Dreamweaver:這是網頁三劍客之一,專門製作網頁的工具,可以自動將網頁生成代碼,是普通網頁製作者的首選工具,界面簡單,實用功能比較強大。建議初學者選用。 另外一個工具就是代碼編輯工具,例如寫字本、EditPlus等,這些工具主要編輯asp等動態網頁。 此外還有一些網路編程工具,javascript、java編輯器等。 網頁製作也是一個比較吃香的行業,要真正做一個好的網站,還必須有良好的設計功底。所以還得學很多邊緣性的軟體,例如photoshop、flash等。 大型的網站往往還需要資料庫的支持,所以還得懂資料庫。sql、甲骨文等。 總之,掌握好網頁製作,能獨立完成一個網站的製作工作,那就不要考慮吃飯問題。隨便混就好了! 祝你成功。 ★你可以結合 Dreamwaver 和 Photoshop 來製作網頁。 Dreamwaver 可以到這里下 30天試用版,不過要先登記一個免費帳號, http://www.macromedia.com/cfusion/tdrc/index.cfm?proct=dreamweaver ★在網上有這方面的教程 教程 http://www.nease.net/xhelp/ http://school.jz173.com/ (中國建站專家) 主頁和個人空間 http://home4u.china.com/ (中華網) http://www.35.com/yumingzc/yumingzc.asp 建議使用網頁製作三劍客Dreamweawer+Firework+Flash 或使用Frontpage

2、怎樣使用網頁設計模板和網頁特效代碼

使用網頁設計模板和網頁特效代碼,一般這種模版都會給一定提示,例如在什麼位置去插入,然後告訴通過一個什麼函數來調用,然後只需要在DW中打開模版,根據自己需要的地方,更改文字,或者是圖片就可以了。

3、誰有網頁特效製作的方法啊?

一.設置滾動字幕
設置標題文字「歡迎光臨童心童話網站」為交替滾動字幕。
方法一:添加代碼
<marquee behavior="alternate">歡迎光臨童心童話網</marquee>
嘗試scroll(滾動)和slide(滑動)兩種其它模式。
方法二:常用-標簽選擇器-HTML標簽-頁元素,選中marquee,在右側屬性中設置behavior和direction。

二.彈出信息對話框
1. 單擊「body」標簽未選中任何頁面元素,打開右側標簽檢查器中的【行為】面板,選擇【彈出信息】命令,彈出「彈出信息」對話框,在對話框中輸入「歡迎光臨童心童話網!」。
2.單擊【確定】按鈕返回。

三.設置狀態欄文本
1.單擊「body」標簽未選中任何頁面元素,打開【行為】面板,選擇【設置文本】級聯菜單下的【設置狀態欄文本】命令,彈出對話框。
2.在對話框中輸入「純真的年代,美麗的心情,夢想的樂園!」,單擊【確定】按鈕返回。
3.在【行為】面板控制事件中選擇onLoad事件。
4.保存文件,瀏覽網頁效果。

四.頁面上飛來飛去的小動畫
1.打開常用下拉列表,選擇「布局」—「描繪層」,拖出一個層對象,選中層,選擇「插入」—媒體—Flash,插入「donghua」Flash對象。
2.選中層對象,選擇【修改】菜單【時間軸】級聯菜單中的【錄制層路徑】命令,沿著要使動畫飄動的路徑拖動層對象。
3.在下方的時間軸面板上選中「自動播放」和「循環」復選框。
4.在瀏覽器中預覽,可看到層對象順著剛才拖動的路徑運動。

五.彈出式菜單(index.htm)
1.選中導航條中的「外國童話」,在鏈接中輸入「#」回車,設置空鏈接,打開【行為】面板,選擇【顯示彈出式菜單】命令,彈出「顯示彈出式菜單」對話框。對話框的【內容】選項卡,在【內容】選項卡的文本輸入框中輸入菜單項的名稱:格林童話,單擊菜單旁的 按鈕,添加菜單選項:安徒生童話、伊索寓言,單擊 按鈕,可以刪除不想要的菜單選項。鏈接欄可為菜單選項設置超級鏈接。
2.單擊【外觀】,顯示【外觀】選項卡,可在【外觀】選項卡中設置彈出式菜單的文字格式、一般狀態和滑鼠滑過狀態文本和單元格的顏色屬性等;單擊【高級】,顯示【高級】選項卡,可在此設置單元格的大小、間距、邊框等屬性;單擊【位置】,顯示【位置】選項卡,可在此設置相對於控制對象彈出式菜單顯示的位置。
3.設置完成,單擊【確定】按鈕返回。

六.彈出瀏覽器(播放flash)
1.新建一個基本頁,保存為ad.htm文件。
2.插入一個2行2列的表格,合並第一行,選擇「插入」—媒體—Flash,插入「sanxing」 三星顯示器廣告Flash對象。在屬性面板上為其命名「sanxing」。
3.在第二行2個單元格中分別插入b1、b2兩個圖片,設置居中。選中「播放」按鈕,打開【行為】面板,選擇【控制Shockwave或Flash】命令,在對話框中選擇「播放」單選鈕,單擊【確定】按鈕返回。在【行為】面板控制事件中選擇onClick事件。同樣設置「停止」按鈕。
4.保存文件,打開index,單擊「body」標簽,打開【行為】面板,選擇【打開瀏覽器窗口】彈出對話框。選中ad.htm,設置窗口大小為520*460,選中「調整大小手柄」。保存,在IE瀏覽器中瀏覽,用戶可以通過兩個按鈕控制動畫播放。

七.製作交換圖像
1.新建一個html文件。
2.設置1行8列表格,插入t1-t8八張圖片。滑鼠單擊選中圖像,分別在屬性面板上給圖像命名從左到右依次為t1~t8。
3.選中最左邊的圖像t1,打開【行為】面板,選擇【交換圖像】,在對話框中選中第1項「圖像」t1」」,單擊「設定原始檔為」欄右邊的【瀏覽】按鈕,在彈出的對話框中選擇圖像t2;選擇第2項「圖像」t2」」, 「設定原始檔為」 t3;……選擇第8項「圖像」t8」」,「設定原始檔為」 t1。單擊【確定】按鈕返回。
4.用同樣的方法為每一幅圖像設置【交換圖像】行為。比如選中圖像t2,在「交換圖像」對話框中設置「圖像」t1」」交換為t3,「圖像」t2」」交換為t4……。如此一來,可實現滑鼠經過圖像不斷向前移動的效果。其它圖像以此類推。
對設置交換圖像行為的一點補充說明:
使用交換圖像行為可以創建按鈕變換(滑鼠經過圖像效果)和其他圖像效果(如本例的一次變換多幅圖像)。交換圖像動作可以通過改變代碼中的圖像源文件屬性將一幅圖像變換為另外一幅圖像,因此,變換圖像的尺寸(寬度和高度)應該與初始圖像一致。

4、請高手寫個網頁製作的特效代碼,在線等,採納追加100分

就是這些代碼,如果你不滿意我倒找你100分!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" ></FCK:meta>
<title>超酷的旋轉圖片特效</title>
</head>
<body>
<style type="text/css">
body{background:black}
.point{position:absolute;height:120px;}
</style>
<script>

var r=200,dv=0.01,w=100,x=400;y=100,pn=8; //r半徑,dv偏移量,w圖片寬度,x菜單橫坐標,y菜單縱坐標,pn菜單圖片數量
var pi=Math.PI,d=pi/2;
var pd=Math.asin(w/2/r),ed=pi*2/pn,sm;//pd各個圖片的反正弦
function goR(){
var o=document.getElementById('imground');
var arrimg=o.getElementsByTagName('img');
for (var n=0;n<arrimg.length;n++){
arrimg[n].onmouseout=function(){sm=setInterval('roundMove()',50);} //滑鼠離開菜單後繼續轉動
arrimg[n].onmouseover=function(){clearInterval(sm)} //滑鼠移上菜單停止轉動
arrimg[n].onmousedown=function(){dv=dv*2} //滑鼠單擊菜單加快轉到速度
}
sm=setInterval('roundMove()',50);
}

function roundMove(){
var v=document.getElementById('imground');
var arrimg=v.getElementsByTagName('img');
var o,ta,strFilter;
for (var n=1;n<=pn;n++){
o=arrimg[n-1];
ta=Math.sin(d+ed*n);//獲得當前偏移量的正弦值

strFilter='';
if (ta<0){//正弦值對應為負弧度,即圖片旋轉到圓的背面
o.style.left=Math.cos(d+ed*n-pd)*r+x+'px'; //傳入當前圖片移動的橫坐標
}
else{//當圖片旋轉到圓的正面時
o.style.left=Math.cos(d+ed*n+pd)*r+x+'px';//傳入當前圖片移動的橫坐標

}

o.style.top=ta*10+5+y+'px'; //傳入當前圖片移動的縱坐標
o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*r+'px';
o.style.zIndex=parseInt(ta*10);

if (o.style.zIndex<0){//當圖片旋轉到居後的位置時翻轉圖片
strFilter='FlipH(enabled:true)';
}
else{ //當圖片旋轉到前面的位置時顯示圖片正面
strFilter='FlipH(enabled:false)';
}

if (ta<0){
ta=(ta+1)*80+20;
}else{
ta=100;
}

strFilter=strFilter+' alpha(opacity='+ta+')'; //透明效果(針對IE)
o.style.opacity=ta/100; //透明效果(針對非IE)
o.style.filter=strFilter; //在菜單圖片上加入濾鏡效果
}
d+=dv; //增加偏移值
}
</script>
<div id="imground">
<img class="point" src="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg"/>
<img class="point" src="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg"/>
<img class="point" src="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg"/>
<img class="point" src="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg"/>
<img class="point" src="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg"/>
<img class="point" src="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg"/>
<img class="point" src="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg"/>
<img class="point" src="http://img.lingd.net/attachments/date_201101/.gif" _fcksaverl="http://img.lingd.net/attachments/date_201101/.gif" _fcksaverl="http://img.lingd.net/attachments/date_201101/.gif"/>
</div>
<script language="javascript">goR();</script>
</body>
</html>

5、請教網頁設計高手滑鼠特效代碼代碼求大神幫助

滑鼠移上去就打開頁面: 第一步:把如下代碼加入<body>區域中 <SCRIPT Language="JavaScript">function winopen () {msg=open("update.htm","NewWindow","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=yes,width=400,height=260");}</SCRIPT> 第二步:把如下代碼加入<body>區域中 <a href="鏈接地址" onMouseOver="winopen(); return true;"><IMG SRC="shu.gif" border="0"></a> 自動跳轉的話這個度試看 <a href=" 鏈接地址" onMouseOver="指定頁面"><IMG SRC="shu.gif" border="0"></a> 不行的話加我Q吧 我這個只是理論的寫寫 沒實現過 你試試看吧

滿意請採納

6、剛學習網頁設計,在網上下了一些特效。但是不知道如何使用 插入這些代碼。謝謝

1.引用樣式文件css/wmiis.css
<link href="css/wmiis.css" type="text/css" rel="stylesheet" />

2.引用jquery的庫文件js/jquery.js

<script type="text/javascript" src="js/jquery.js"></script>

3.引用效果的具體js代碼文件js/lrtk.js復制至html文件中。

<script type="text/javascript" src="js/lrtk.js"></script>

4.將id為zSlider的div的內容復制到您的html文件

將需要加效果地方將id為zSlider的div的內容復制到您的html文件

然後預覽一下就可以看到了。

當然,你必須把wmiis.css,jquery.js,lrtk.js 這些文件放到你的文件對應文件夾中。

7、有沒有人知道網頁製作特效的代碼介紹的比較好的網站,推薦我看看!

http://www.helpor.net/
http://www.baron.com.cn/javascript/
http://js.wanxu.com/
http://www.dabaoku.com/texiao/
http://www.8695.com/netweb/
http://www.sgzld.com/life.htm
http://www.3lian.com/zl/3lian/3/
你自己選吧,裡面什麼都有

8、製作網頁特效應該建立一個怎麼樣的網業啊?萬分感謝``

看什麼特效了,用CSS 和HTML 能建立特效啊,不用動態的。

建立特效用基本頁(CSS+HTML)就可以了,這樣不設計模板和動態的問題,可以專注特效。
當然用模板(建立站點的時候用,學習特效不用)和動態頁(ASP JSP等,需編程序,復雜,一般用不著的)也可以

9、如何快速製作網頁特效

1.打開你需要的帶特效的網站,單擊菜單欄(上面)的查看-源文件.然後找到你需要的特效的代碼段(用dreamweaver軟體容易找些),復制~粘貼~改代碼(最好先了解javascript語言~否則比較麻煩)
2.先獲得你要變換圖片的控制項(用ById),然後寫個方法~在裡面寫個循環,或者用隨機數獲得圖片並且附給你要變圖片的控制項,(所有的圖片名必須有規律~比如1.jpg,2.jpg),最後在方法里寫個計時器setTimeOut(方法名,每過多少毫秒執行一次)
3這些東西必須要有JAVAscript的基礎~否則建議先學去

10、Dreamweaver使用,網頁特效代碼製作

首先用ps或者其他軟體將幾張圖片的大小p成一樣的。比如筆者把三張圖片都p成了200x268的大小。

2
打開Dreamweaver,新建一個網頁(筆者這里建立一個html類型的網頁)。

3
按Ctrl+S保存新建的網頁。

4
點擊菜單欄:插入-->表格。插入一個1行1列的表格。

5
把滑鼠指針放到表格中,單擊菜單欄的:插入-->布局對象-->AP Div,插入一個AP Div。

6
把滑鼠放到剛剛新建的AP Div里邊,點擊菜單欄的:插入-->圖像,選擇一張需要插入的圖片。

7
按上面的方法依次添加其他幾個AP Div,並在里邊插入圖片。

接下來插入一個AP Div,然後再里邊添加一個1行3列的表格。

滑鼠指針放到表格第一個方框中,單擊菜單欄:插入-->表單-->按鈕。操作如圖

滑鼠點中添加的按鈕,然後再下方屬性面板中,把值修改為1。

按照上述步驟依次為表格的第二個框、第三個框添加一個按鈕,並把屬性值改成2和3。如圖

把幾個AP Div移動到同一個區域。如下圖

單擊菜單欄:窗口-->行為,打開行為面板。

滑鼠點擊第一個方框的按鈕,點擊標簽檢查器行為面板下方的「+」號,彈出的菜單中選擇「顯示-隱藏元素」。

按照下圖所示,把AP Div1設置成顯示,AP Div2設置成隱藏,AP Div3設置成隱藏。AP Div4可以設置成顯示,也可以不設置(默認顯示)。

如圖,點擊行為面板左邊的英文,在彈出的菜單中選擇onFocus。

按照上面的步驟,依次把表格第二個方框、第三個方框的按鈕設置成如下圖所示。
這樣就做好了。按F12在瀏覽器中看看效果。

與簡單網頁設計特效代碼相關的知識