網(wǎng)頁制作培訓(xùn)：常見的網(wǎng)頁特效用法

來源：elsolbar.com 發(fā)布人：星星

2021-12-21 13:38:14|已瀏覽：196次

網(wǎng)頁制作培訓(xùn):常見的網(wǎng)頁特效用法

不少朋友經(jīng)常問我，你站上的網(wǎng)頁特效代碼該怎么用？為什么我將代碼插入到網(wǎng)頁里沒有效果呢？為什么我的特效沒有圖片？等等...其實(shí)對(duì)于大多數(shù)的網(wǎng)頁特效用起來還是非常簡(jiǎn)單的，下面我簡(jiǎn)要的說一下普遍性的特效代碼使用方法：

一、直接插入使用
對(duì)于大多數(shù)的網(wǎng)頁特效都是可以直接插入到網(wǎng)頁里使用的，舉個(gè)例子：比如我想在我的網(wǎng)頁里某個(gè)地方插入一個(gè)顯示當(dāng)前時(shí)間的效果，那么你可以在本站上搜索到時(shí)間的特效，比如我看到的代碼如下：
上面是顯示的一個(gè)當(dāng)前日期時(shí)間星期的效果，在上面這些代碼中主要的就是<script language="JavaScript">...</script> 這一段內(nèi)容了，其他的都可以不管，所以我只要把<script language="JavaScript">...</script>這里面的代碼復(fù)制到網(wǎng)頁里相應(yīng)的位置就可以了，這種情況是比較簡(jiǎn)單的。
二、含有圖片的特效
有不少朋友問我為什么我的特效沒有效果呢？也看不到圖片！
我們還是舉個(gè)例子來說吧，比如爬向鼠標(biāo)的好多螞蟻這個(gè)特效，首先我們可以確定這個(gè)特效是屬于第一種類型的就是直接將<script language="JavaScript">...</script>里的代碼插入網(wǎng)頁中就可以直接使用的，但是為什么預(yù)覽的時(shí)候看不到螞蟻呢？？？我們知道那些螞蟻實(shí)際上都是一些圖片，然后程序上讓這些圖片運(yùn)動(dòng)而已，所以你看不到圖片的原因是：你有沒有把圖片保存到自己的電腦上呢，我們從這個(gè)特效里的代碼可以看到下面的一段代碼：

這段代碼就是調(diào)用圖片的路徑和名稱，首先是在images文件夾下的，下面就是用到的所有圖片，你需要將這些圖片都要下載到自己的電腦上。怎么下載？比如我下載antdl.gif這個(gè)圖片我可以直接在網(wǎng)頁上另存為，也可以這樣[img]http://www.jscode.cn/JsCode/images/antdl.gif[/img] ，這里面的訣竅你自己體會(huì)吧。

把所有的圖片下載到電腦上后我們就要設(shè)置好這個(gè)特效使用的圖片的路徑，比如你這個(gè)網(wǎng)頁名字叫aa.htm 放在d:/web/myweb/aa.htm下面的，首先我們要在myweb這個(gè)文件夾下建立一個(gè)images文件夾，將那些圖片都放在這里面，這時(shí)候你再預(yù)覽肯定就有效果，當(dāng)然你也可以建立一個(gè)img文件夾或其他的隨便你，但是這時(shí)候代碼里的var dir = "images/";這個(gè)就要隨之修改，同理圖片的名字你也可以自己隨便定義，但是要保證代碼里的圖片跟實(shí)際路徑里的圖片名字對(duì)應(yīng)。

三、需要定義樣式的特效
這種情況在css效果里比較多，有好多朋友直接把body里的代碼復(fù)制過去了，可是忘記了head里可能還有個(gè)style沒有復(fù)制過去，這樣預(yù)覽的時(shí)候肯定沒有效果的。
還是舉例子，比如用CSS設(shè)計(jì)藝術(shù)字這個(gè)效果，我們可以看到這個(gè)代碼按照標(biāo)準(zhǔn)寫法應(yīng)該放在<head></head>之間的，在這個(gè)特效中寫的不夠規(guī)范但是不影響瀏覽效果，<style></style>里面的內(nèi)容就是定義了這個(gè)效果里所用到的樣式，我們可以看到一些基本的文字大小顏色等等屬性。所以沒有這個(gè)樣式控制，是看不到效果的。
四、需要頁面加載的特效
這種效果大家也經(jīng)常遇到，很多時(shí)候大家調(diào)試來調(diào)試去就是沒有效果，對(duì)照了所有的代碼確定沒有錯(cuò)誤，可是還是看不到效果，怎么回事？可能就是你沒有加載這個(gè)效果啦，什么意思？比如好多效果是代碼已經(jīng)寫好的函數(shù)放在頁面里，這時(shí)候別人打開網(wǎng)頁的時(shí)候，必須得加載這個(gè)函數(shù)才能啟動(dòng)這個(gè)效果。我們還是舉例子來說吧，看下面這個(gè)特效：
這個(gè)效果大家應(yīng)該看到過了吧沒看過的點(diǎn)擊：http://www.jscode.cn/JsHtml/Js690.htm 首先這個(gè)特效也是屬于第一種情況直接將代碼插入就可以使用的，同時(shí)他也用到了圖片，按照第二種方法保存圖片�？墒莾H僅完成這兩步是不夠的，仔細(xì)看這個(gè)代碼我們會(huì)發(fā)現(xiàn) body里多了一行代碼<body onLoad="Start()"> ，你是否漏掉了onLoad="Start()"這個(gè)呢？說到這里就行了至于這個(gè)屬性或函數(shù)怎么寫的就不需要了，在這里我僅僅是提醒大家不要忘記這個(gè)地方。
五、需要調(diào)用第三方文件的特效
這種情況一般是用在比較復(fù)雜的效果中，比如可控制的用FLASH控件實(shí)現(xiàn)的圖片漸顯JS效果這個(gè)就需要一個(gè)外部文件，緊緊把所有代碼復(fù)制過去是沒用的。對(duì)于像類似的需要調(diào)用其它文件的我都會(huì)說明出來的或者直接提供外部文件的下載地址，他可能是個(gè)flash也可能是htm網(wǎng)頁還有可能是是其它形式的函數(shù)庫之類的，比如類似的還有在時(shí)間特效里我整理的幾個(gè)彈出選擇日期效果的特效。當(dāng)然下載下來的文件也不是隨便放的，具體的使用方法和圖片是類似的，我們要找到代碼中調(diào)用這個(gè)文件的地方，然后看看是直接放在根目錄下還是需要放在某個(gè)文件夾下的。

上面我簡(jiǎn)要的說了一下特效的使用方法，緊緊是一些方法和小技巧，沒什么技術(shù)上的東西，所以有些專業(yè)術(shù)語我都可能盡量的普通化一點(diǎn)，當(dāng)然在做網(wǎng)頁的時(shí)候我們還會(huì)遇到其它的一些問題，希望大家能舉一反三。

本文由培訓(xùn)無憂網(wǎng)天琥教育專屬課程顧問老師整理發(fā)布，更多網(wǎng)頁制作相關(guān)課程請(qǐng)關(guān)注培訓(xùn)無憂網(wǎng)網(wǎng)頁制作培訓(xùn)或添加老師微信：15033336050

注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://elsolbar.com/news-id-8917.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注網(wǎng)頁制作頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050

相關(guān)新聞

相關(guān)新聞

免費(fèi) 申請(qǐng) 試聽

提交申請(qǐng)，《培訓(xùn)無憂網(wǎng)》課程顧問老師會(huì)一對(duì)一幫助你規(guī)劃更適合你的專業(yè)課程！