首頁 web前端 html教學 網頁製作中的小秘訣

網頁製作中的小秘訣

Dec 16, 2016 pm 02:17 PM
網頁製作

1、加入首頁影片動畫
只要把下面這段程式碼加入你的網頁中,就可以在首頁加入Windows影片動畫或其他RralMedia格式的影片動畫。
test.avi (40M位元組) 
在這段程式碼中,dynsrc的值為你的動畫檔案的名字,它應是以avi、ra、ram為後綴名的檔案;start的值一般為“fileopen”,這樣就可以使動畫自動播放;width和height的值分別是動畫播放時的畫面的寬度和高度(以像素為單位也可以百分比來表示);alt的值是對動畫檔案的非顯示說明;hspace是畫面離頁左邊的距離(以像素為單位);vspace是畫面離頁頂的距離(以像素為單位),在這裡大家可以把test.avi檔改成自己需要的影片檔。

2、讓超級連結自動變色 
大家知道,如果要讓網頁具有動態效果,一般要向網頁中插入動畫圖像或用java來設計一個動態效果;但由於動畫佔用的位元組數太多,而用Java來設計動態效果需要一定的設計基礎。下面筆者就提供一種方法,可以讓頁面上的超級連結在一直不停地進行變色,從而使自己的網頁看上去也動感十足。要達到這個效果,我們只要把下面的這段原始碼貼到網頁中的<head>與</head>之間就可以了。具體的原始碼如下: 

<script Language="Javascript"> 
<! - - Begin 
function initArray( ) { 
for ( var i = 0 ; i < initArray.arguments.length; i + + ) 
{this[i] = initArray.arguments[i];} 
this.length = initArray.arguments.length; 
} 
var colors = new initArray ("red","blue","green","black","purple","blue","tan","red");delay = .5; // seconds
link = 0 ; 
vlink = 0 ; 
function linkDance ( ) { 
link= (link + 1)%colors.length; 
vlink=(vlink+1)%colors.length; 
document.linkColor = colors[link]; 
document.vlinkColor = colors[vlink]; 
setTimeout("linkDance( )",delay*1000);} 
linkDance( ); 
// End - -> 
</script>
登入後複製

3、隨時改變網頁的線上背景圖象
我們通常看到的網頁背景圖像一般是靜態的,普通的訪客是無權自己更換網頁的背景圖案的,不知大家有沒有想過做出來的網頁可以讓訪客能自行改變背景圖片呢?如果大家有這個想法的話,下面的這段程式碼就能幫助我們輕鬆實現這樣的功能,我們所要做的就是把下面提供的源代碼拷貝然後貼在自己網頁中的HTML程式碼的合適位置就可以了。不敢說很有用,但用得好的話絕對是錦上添花。好了,一起先來看看程式碼好了。
<form> 
<select onChange="document.body.style.background=this.options[this.selectedIndex].value"> 
<option value="url('背景一的地址')" selected
<option value="url('背景一的地址')" selected
<option value="url(')背景一的位址種背景 
<option value="url('背景二的地址')"> 第二種背景 
<option value="url('背景三的地址')"> 第三種背景 
..... ..其它選擇格式如上...... 
</selected> 
</form> 
使用這段程式碼時,我們可以自己先選擇好或者製作好需要的背景,然後把各個背景圖像的網址替換上面程式碼中的背景位址,這樣我們就可以輕鬆實現隨機更改背景圖象了。

4、讓圖象與瀏覽視窗實現無縫接合 
我們在網頁中插入一幅圖象時,有時會發現該圖象與瀏覽器視窗邊框之間很難實現無縫接合,總是有點距離,看起來給人的感覺不太自然。那麼我們該透過什麼辦法才能實現圖象與瀏覽視窗的無縫接合,使圖像自然融入視窗背景之中呢?其實,插入的圖象之所以與瀏覽器的邊框有縫隙,這是因為我們沒有設定頁面邊距,解決無縫接合的辦法是在頁面的源代碼的<body> 標籤中加入以下源代碼: topmargin =“0" leftmargin=“0" 其中topmargin表示與瀏覽器視窗頂部距離,此時設定為0,圖象與瀏覽器視窗無縫接合。 leftmargin=「0"表示與瀏覽器視窗左邊距離為0。

5、使用略圖方式來顯示圖象 
如果我們的確需要在網頁中放置一個較大尺寸的圖象時,考慮到圖象傳輸速度相對較慢,為了能使訪客盡快知道圖象所代表的內容,我們不妨使用縮圖顯示的方法。即在顯示原圖之前,先提供一個分辨率較低、尺寸較小的圖象當作“low source”,使得瀏覽器可以快速地顯示,然後再漸漸地以高質量或者大尺寸的原圖來代替。如果使用者看到縮圖顯示的內容並不是自己想要的,可以無須等待,直接去存取另外的內容,從而提高了瀏覽的效率。實現縮圖顯示的具體方法是,在網頁的html來源檔案中加入以下程式碼: 
<img low width="x" height="y"> 
其中view.gif是原圖,preview.gif是縮圖,width是原圖的寬度,height是原圖的高度。 

6、建立一個站內的搜尋引擎 
隨著頁面內容的不斷增多,要快速準確地獲取網站之內的某個內容就變得越來越困難。為了能夠使訪客很快找到他們想要的信息,那麼就需要在站內建立一個搜尋引擎。要建立一個網站的搜尋引擎,我們可以直接連結到網站網路特區http://netzone. swatou. com/personal/, 點擊「申請網站引擎」 並填寫申請表,然後按照要求建立網站頁面資料庫即可。

7、讓背景音樂持續播放 
我們知道,當打開一個含有背景音樂的頁面時,我們就能聽到一段悠揚的樂聲,但是當我們用滑鼠點擊頁面中的連結或去訪問另外一個頁面時,正在播放的背景音樂就會突然停止,那麼我們有沒有辦法讓某個頁面的背景音樂持續不斷地播放下去呢? 答案是肯定的,其實,我們只要建立一個上下框架結構的網頁,把聲音檔案包含在下框架頁面內容裡,並把下框架的寬度設定為0個像素,而上框架裡是正常的頁面內容,由於下框架不佔用視窗的空間,這就相當於我們把含有聲音檔案的頁面當我們離開含有背景音樂的網頁頁面時,由於下框架頁面內容未變,所以聲音就能持續不斷地進行播放了。 

由於編輯原因,所有代碼的尖括號均為全角字符,應用時請換為半角。

 以上就是網頁製作中的小秘訣的內容,更多相關文章請關注PHP中文網(www.php.cn)! 

🎜🎜
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1665
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML:結構,CSS:樣式,JavaScript:行為 HTML:結構,CSS:樣式,JavaScript:行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML,CSS和JavaScript的未來:網絡開發趨勢 HTML,CSS和JavaScript的未來:網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML的未來:網絡設計的發展和趨勢 HTML的未來:網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript:比較概述 HTML與CSS vs. JavaScript:比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML:建立網頁的結構 HTML:建立網頁的結構 Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML與CSS和JavaScript:比較Web技術 HTML與CSS和JavaScript:比較Web技術 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTML:是編程語言還是其他? HTML:是編程語言還是其他? Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

See all articles