windows桌面風格頁面制作點滴(1)

1、Windows桌面風格頁面制作點滴(1)Windows桌面風格頁面的想法大約在一年半前，那時海娃剛學(xué)網(wǎng)頁制作不久，整天為辛苦做的網(wǎng)頁沒有人看而發(fā)愁時，正好開始使用一個抓圖的軟件，于是在床上想：為什么不做一個桌面似的網(wǎng)頁呢？那晚由于這個新想法，我真的興奮了許久!這的確是一個很好的想法，很多網(wǎng)友在看到我的桌面網(wǎng)頁時說，他們也有這種想法，只是由于各種原因沒有做出來。桌面網(wǎng)頁的特色桌面風格的網(wǎng)頁做首頁或者導(dǎo)航欄比較好，因為它簡潔、直觀，當瀏覽者

2、進入桌面就看到網(wǎng)頁有哪幾個部分內(nèi)容。根據(jù)內(nèi)容和欄目的多少，來確定桌面圖標的圖像與多少，同樣，在菜單和任務(wù)欄區(qū)，都可做新聞、信息鏈接。網(wǎng)頁的實現(xiàn)當時有這個想法時，我還沒有接觸過css，javript，只是用frontpage來做簡單的的網(wǎng)頁，懂很簡單的html。由于當時這種桌面風格的網(wǎng)頁是由一個抓圖軟件而想起的，所以，開始就用抓來的圖片加上熱點鏈接來實現(xiàn)，也沒有右鍵菜單。而下面的任務(wù)欄則是用框架網(wǎng)頁來實現(xiàn)。嚴格的說，那不叫做桌面風格的網(wǎng)頁

3、，只能說是圖片。對于有一定html、css、javript基礎(chǔ)的網(wǎng)頁愛好者，實現(xiàn)這種桌面風格的網(wǎng)頁是不難的。桌面中的元素：圖標、菜單、對話框主要是用層的定位、顯示隱藏、拖動等來實現(xiàn)的?？梢哉f，樣式表在實現(xiàn)桌面風格的起關(guān)鍵性作用！由于桌面網(wǎng)頁比一般的網(wǎng)頁工作量大很多，為了使制作者更好的改進，瀏覽者更容易看懂源文件，應(yīng)將網(wǎng)頁各個部分進行拆分。從系統(tǒng)桌面來看，大體上有以下幾個部分：桌面圖標、開始菜單、任務(wù)欄、右鍵菜單和對話框窗口。同樣網(wǎng)頁也分

4、為這幾部分，我們可以先把各個部分完成后，再把它們組合在一起。主要制作工具：網(wǎng)頁制作Frontpage2000、抓圖HyperSnapDX4、圖像處理工具、源文件編輯工具Notepad。（這只是我比較習(xí)慣的工具，大家可以根據(jù)自己的喜好選擇工具）制作環(huán)境：Windows2000專業(yè)版、IE5.0。具體細節(jié)表現(xiàn)：菜單對與對話框的凸凹感：我們天天看到的右鍵菜單、任務(wù)欄和開始菜單，都有立體感，我們通過css來實現(xiàn)這種效果是很容易的。具體是通過bd

5、er（邊框），在上下左右設(shè)置不同的顏色，以達到立體感的效果。以下面的例子說明：樣式表：.upbderright:#0000002pxsolidbdertop:#FFFFFF2pxsolidbderleft:#FFFFFF2pxsolidbderbottom:#0000002pxsolidbackgroundcol:#D8D8D0在要用立體感的層上加上class=up例子：要使層有凸出感，我們可以先選擇好層的背景，層的上、左邊框用比背景顏

6、色淺一些，而層的下、右邊框用比背景深一些。同樣如果定義有凹進感的層，上、左邊要深，下、右邊要淺。邊框的寬度來改變立體感的強弱。像快速啟動欄處的凸出感不太強，1px就可以了。大家可以看一個沒有定義好樣式表的情形。桌面圖標：從圖標的要求與功能上來看，它應(yīng)該可以拖動、雙擊打開鏈接、圖標的外觀與鏈接的內(nèi)容相關(guān)等。這樣要求我們來用每個層來定義一個圖標，圖標的拖動就是層的拖動和層的絕對定位。圖標圖片最好是透明的GIF圖片，大小與圖標大小一致3232

7、。我們可以用.ICO文件來轉(zhuǎn)換成.GIF圖形，或者用抓圖軟件來抓取系統(tǒng)桌面的圖標。當然如果你的圖像處理的水平不錯，你可以做好更好看的圖標。雙擊鏈接，我們可以通來onDblClick（雙擊）鼠標事件來完成。排列圖標的實現(xiàn)，就是再一次對層的絕對定位。菜單：菜單每個項目同樣是用層。主要用到鼠標的懸停(onmouseover)、鼠標離開(onmouseout)來改變層的背景色，和菜單的隱藏與顯示。開菜單欄的圖片用2424大小的GIF圖片，菜單的

8、下一級目錄菜單可以用1616大小的。同一類菜單放在一個層中來定位。開始菜單中的定位：定位中通常用top:XXleft:XX而開始菜單要用bottom:XX來定位，因為不管瀏覽器窗口的大小，菜單都在在最底處。開始菜單放在一個表格中，分為兩個單元格，左邊放在網(wǎng)站標記圖片，右鍵放所有的菜單項目：關(guān)機、注銷、幫助……下面以圖示的形式說明開始菜單的制作細節(jié)：開始菜單的制作細節(jié)：序號1處是一個圖片，放在單格中，將單格的背景設(shè)置為這個圖片上端的顏色，

9、單格的定位為底邊對齊，這樣做的好處是為了使當菜單長度大于圖片時，不會出現(xiàn)顏色突變。用Frontpage和抓圖工具可以網(wǎng)頁，不能像windows系統(tǒng)一樣的功能強大，再加上現(xiàn)在瀏覽器的差異性，在不同的瀏覽器下看到的效果也是大相徑庭。收獲和經(jīng)驗這個網(wǎng)頁網(wǎng)頁的實現(xiàn)過程，也是我認識了解css、javript、html過程，是我水平進步的過程。從中也體驗到編改寫代碼的樂趣，有時候為了一個代碼要想很久，不能解決就到論壇求助，問題很快就解決了。如果大家