windows桌面風(fēng)格頁面制作點滴(2)

1、Windows桌面風(fēng)格頁面制作點滴(2)我們天天都和windows打交道，Windows的桌面對我們來說已經(jīng)是熟得不能再熟了，但是朋友們是否見過Windows桌面風(fēng)格的網(wǎng)頁呢？這對我們來說倒很有幾分新鮮感。筆者曾經(jīng)嘗試著做過這樣一個Windows桌面風(fēng)格的網(wǎng)頁無憂視窗，大家不妨去感受一下，是不是有一些新奇的感覺？下面我以自己制作這個桌面網(wǎng)站的經(jīng)歷，給大家大略介紹一下Windows桌面風(fēng)格頁面的制作的點點滴滴，希望能起到一些拋磚引玉的作用

2、，幫助大家拓展思路。注：這里我們假定您已經(jīng)具備一些網(wǎng)頁制作的經(jīng)驗，文章將為大家著重介紹制作中的思路、重點、難點，文章中涉及的一些技術(shù)大家可以參考網(wǎng)頁陶吧中的相關(guān)內(nèi)容。Windows桌面風(fēng)格頁面的想法大約在一年半前，那時海娃剛學(xué)網(wǎng)頁制作不久，整天為辛苦做的網(wǎng)頁沒有人看而發(fā)愁時，正好開始使用一個抓圖的軟件，于是在床上想：為什么不做一個桌面似的網(wǎng)頁呢？那晚由于這個新想法，我真的興奮了許久!這的確是一個很好的想法，很多網(wǎng)友在看到我的桌面網(wǎng)頁時說

3、，他們也有這種想法，只是由于各種原因沒有做出來。桌面網(wǎng)頁的特色桌面風(fēng)格的網(wǎng)頁做首頁或者導(dǎo)航欄比較好，因為它簡潔、直觀，當(dāng)瀏覽者進入桌面就看到網(wǎng)頁有哪幾個部分內(nèi)容。根據(jù)內(nèi)容和欄目的多少，來確定桌面圖標的圖像與多少，同樣，在菜單和任務(wù)欄區(qū)，都可做新聞、信息鏈接。網(wǎng)頁的實現(xiàn)當(dāng)時有這個想法時，我還沒有接觸過css，javript，只是用frontpage來做簡單的的網(wǎng)頁，懂很簡單的html。由于當(dāng)時這種桌面風(fēng)格的網(wǎng)頁是由一個抓圖軟件而想起的，所

4、以，開始就用抓來的圖片加上熱點鏈接來實現(xiàn)，也沒有右鍵菜單。而下面的任務(wù)欄則是用框架網(wǎng)頁來實現(xiàn)。嚴格的說，那不叫做桌面風(fēng)格的網(wǎng)頁，只能說是圖片。對于有一定html、css、javript基礎(chǔ)的網(wǎng)頁愛好者，實現(xiàn)這種桌面風(fēng)格的網(wǎng)頁是不難的。桌面中的元素：圖標、菜單、對話框主要是用層的定位、顯示隱藏、拖動等來實現(xiàn)的?？梢哉f，樣式表在實現(xiàn)桌面風(fēng)格的起關(guān)鍵性作用！由于桌面網(wǎng)頁比一般的網(wǎng)頁工作量大很多，為了使制作者更好的改進，瀏覽者更容易看懂源文件，

5、應(yīng)將網(wǎng)頁各個部分進行拆分。從系統(tǒng)桌面來看，大體上有以下幾個部分：桌面圖標、開始菜單、任務(wù)欄、右鍵菜單和對話框窗口。同樣網(wǎng)頁也分為這幾部分，我們可以先把各個部分完成后，再把它們組合在一起。主要制作工具：網(wǎng)頁制作Frontpage2000、抓圖HyperSnapDX4、圖像處理工具、源文件編輯工具Notepad。（這只是我比較習(xí)慣的工具，大家可以根據(jù)自己的喜好選擇工具）制作環(huán)境：Windows2000專業(yè)版、IE5.0。具體細節(jié)表現(xiàn)：菜單對

6、與對話框的凸凹感：我們天天看到的右鍵菜單、任務(wù)欄和開始菜單，都有立體感，我們通過css來實現(xiàn)這種效果是很容易的。具體是通過bder（邊框），在上下左右設(shè)置不同的顏色，以達到立體感的效果。以下面的例子說明：樣式表：.upbderright:#0000002pxsolidbdertop:#FFFFFF2pxsolidbderleft:#FFFFFF2pxsolidbderbottom:#0000002pxsolidbackgroundcol

7、:#D8D8D0在要用立體感的層上加上class=up例子：要使層有凸出感，我們可以先選擇好層的背景，層的上、左邊框用比背景顏色淺一些，而層的下、右邊框用比背景深一些。同樣如果定義有凹進感的層，上、左邊要深，下、右邊要淺。邊框的寬度來改變立體感的強弱。像快速啟動欄處的凸出感不太強，1px就可以了。大家可以看一個沒有定義好樣式表的情形。桌面圖標：從圖標的要求與功能上來看，它應(yīng)該可以拖動、雙擊打開鏈接、圖標的外觀與鏈接的內(nèi)容相關(guān)等。這樣要求

8、我們來用每個層來定義一個圖標，圖標的拖動就是層的拖動和層的絕對定位。圖標圖片最好是透明的GIF圖片，大小與圖標大小一致3232。我們可以用.ICO文件來轉(zhuǎn)換成.GIF圖形，或者用抓圖軟件來抓取系統(tǒng)桌面的圖標。當(dāng)然如果你的圖像處理的水平不錯，你可以做好更好看的圖標。雙擊鏈接，我們可以通來onDblClick（雙擊）鼠標事件來完成。排列圖標的實現(xiàn)，就是再一次對層的絕對定位。菜單：菜單每個項目同樣是用層。主要用到鼠標的懸停(onmouseov

9、er)、鼠標離開(onmouseout)來改變層的背id=“startmenu“等等。這樣是為了更好的對源文件進行改進和優(yōu)化。同一類層的zindex設(shè)置相同，誰在上，誰在下，都是要考慮的。對于很多重復(fù)使用的一項代碼，我們可以用document.write來寫成javript，像桌面圖標等，下面是一個例子：functionlink(act，txt)document.write(““txt““)如果網(wǎng)頁中有十處用到這個代碼，我們就要寫進十個

10、上面粗體代碼長度，但通用javript，我們就可以只寫十個這樣的代碼：，這樣使源文件更清晰，更容易看。把所用的到的funtion函數(shù)全部放在js文件中，這樣不會使風(fēng)頁文件太大，而出現(xiàn)打不出的現(xiàn)象，同時也更好的管理。不足Windows桌面風(fēng)格的網(wǎng)頁只能是個網(wǎng)頁，不能像windows系統(tǒng)一樣的功能強大，再加上現(xiàn)在瀏覽器的差異性，在不同的瀏覽器下看到的效果也是大相徑庭。收獲和經(jīng)驗這個網(wǎng)頁網(wǎng)頁的實現(xiàn)過程，也是我認識了解css、javript、h