windows桌面風(fēng)格頁(yè)面制作點(diǎn)滴(2)

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

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

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

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

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

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

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

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

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

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