Windows案頭風格頁面製作點滴(1)

window|頁面 　　Windows案頭風格頁面的想法
　　 大約在一年半前，那時海娃剛學網頁製作不久，整天為辛苦做的網頁沒有人看而發愁時，正好開始使用一個抓圖的軟體，於是在床上想：為什麼不做一個案頭似的網頁呢？那晚由於這個新想法，我真的興奮了許久!這的確是一個很好的想法，很多網友在看到我的案頭網頁時說，他們也有這種想法，只是由於各種原因沒有做出來。

　　案頭網頁的特色
　　案頭風格的網頁做首頁或者導覽列比較好，因為它簡潔、直觀，當瀏覽者進入案頭就看到網頁有哪幾個部分內容。根據內容和欄目的多少，來確定案頭表徵圖的映像與多少，同樣，在菜單和工作列區，都可做新聞、資訊連結。

　　網頁的實現
　　當時有這個想法時，我還沒有接觸過css，javascript，只是用frontpage來做簡單的的網頁，懂很簡單的html。由於當時這種案頭風格的網頁是由一個抓圖軟體而想起的，所以，開始就用抓來的圖片加上熱點連結來實現，也沒有右鍵菜單。而下面的工作列則是用框架頁來實現。嚴格的說，那不叫做案頭風格的網頁，只能說是圖片。

　　對於有一定html、css、javascript基礎的網頁愛好者，實現這種案頭風格的網頁是不難的。案頭中的元素：表徵圖、菜單、對話方塊主要是用層的定位、顯示隱藏、拖動等來實現的。可以說，樣式表在實現案頭風格的起關鍵性作用！

　　由於案頭網頁比一般的網頁工作量大很多，為了使製作者更好的改進，瀏覽者更容易看懂源檔案，應將網頁各個部分進行拆分。從系統案頭來看，大體上有以下幾個部分：案頭表徵圖、開始菜單、工作列、右鍵菜單和對話方塊視窗。同樣網頁也分為這幾部分，我們可以先把各個部分完成後，再把它們組合在一起。　

　　主要製作工具：網頁製作Frontpage2000、抓圖HyperSnap-DX 4、影像處理工具、源檔案編輯工具Notepad。（這隻是我比較習慣的工具，大家可以根據自己的喜好選擇工具）
　　製作環境：Windows2000專業版、IE5.0。

　　具體細節表現：

　　菜單對與對話方塊的凸凹感：

　　我們天天看到的右鍵菜單、工作列和開始菜單，都有立體感，我們通過css來實現這種效果是很容易的。具體是通過border（邊框），在上下左右設定不同的顏色，以達到立體感的效果。以下面的例子說明：

　　樣式表：.up{border-right: #000000 2px solid; border-top: #FFFFFF 2px solid; border-left: #FFFFFF 2px solid; border-bottom: #000000 2px solid; background-color: #D8D8D0}

　　在要用立體感的層上加上class=up 例子：

　　要使層有凸出感，我們可以先選擇好層的背景，層的上、左邊框用比背景顏色淺一些，而層的下、右邊框用比背景深一些。同樣如果定義有凹進感的層，上、左邊要深，下、右邊要淺。邊框的寬度來改變立體感的強弱。像快速啟動欄處的凸出感不太強，1px就可以了。大家可以看一個沒有定義好樣式表的情形。

　　案頭表徵圖：
　　從表徵圖的要求與功能上來看，它應該可以拖動、雙擊開啟連結、表徵圖的外觀與連結的內容相關等。這樣要求我們來用每個層來定義一個表徵圖，表徵圖的拖動就是層的拖動和層的絕對位置。表徵圖圖片最好是透明的GIF圖片，大小與表徵圖大小一致32×32。我們可以用.ICO檔案來轉換成.GIF圖形，或者用抓圖軟體來抓取系統案頭的表徵圖。當然如果你的影像處理的水平不錯，你可以做好更好看的表徵圖。雙擊連結，我們可以通來onDblClick（雙擊）滑鼠事件來完成。柏拉圖標的實現，就是再一次對層的絕對位置。

　　菜單：
　　菜單每個項目同樣是用層。主要用到滑鼠的懸停(onmouseover)、滑鼠離開(onmouseout)來改變層的背景色，和菜單的隱藏與顯示。開功能表列的圖片用24×24大小的GIF圖片，菜單的下一級目錄菜單可以用16×16大小的。同一類菜單放在一個層中來定位。

　　開始菜單中的定位：
　　定位中通常用top:XX;left:XX;而開始菜單要用bottom:XX來定位，因為不管瀏覽器視窗的大小，菜單都在在最底處。開始菜單放在一個表格中，分為兩個儲存格，左邊放在網站標記圖片，右鍵放所有的功能表項目：關機、登出、協助……

　　下面以圖示的形式說明開始菜單的製作細節：

　　開始菜單的製作細節：
　　序號1處是一個圖片，放在單格中，將單格的背景設定為這個圖片上端的顏色，單格的定位為底邊對齊，這樣做的好處是為了使當菜單長度大於圖片時，不會出現顏色突變。用Frontpage和抓圖工具可以完成。思路是用一個漸層的色條作表格的背景，在上面寫是所要的文字，調整好文字的顏色、字型，然後抓圖，再通過FP裡面的映像工具來轉換角度。

　　序號2處是大小為24×24的GIF透明映像，可以抓系統功能表中的表徵圖。

　　序號3處是一段空隙，這裡不要用空格，可以用一段隱藏的文字元號來代替。這是一個例子：
-----

　　序號4處的箭頭是用的Webdings字型：4。背景色為深藍色，是因為滑鼠放在上面，通過滑鼠形為來動態改變菜單層的樣式表。例如： onMouseOver=this.className='over' onMouseOut=this.className='overout'

　　序號5處是用的水平線;為了使它更真實，要用樣式表來控制它的樣式，例如：
hr{width:95%;border: 1px inset #F0F0F0}

　　序號6處的空隙同樣不要用空格;我們可以用hspace(水平間距)、vspace(垂直間距)。在映像的定位中，要用絕對垂直置中（align="absmiddle"），不然文字會與映像下邊對齊;正常的表達：

工作列：

　　從圖片可以看出，工作列中映像是主要部分。

　　製作思路：把它們定位在一個表格中，每一個儲存格中放置一個圖片。這個大的表格定位在最底下，用上面提到的bottom，表格的寬度調用screen.width。用不同的樣式表來控制各個部分的凹凸外觀。用滑鼠的形為來動態改變調用已經定義好的樣式表。在快速啟動欄中，要用到滑鼠的over，out，down，up四個行為。例如：onMouseXX=this.className='XX'。快速啟動欄處的表徵圖大小為20×20，儲存格的寬度要大於24，因為太小了，當然懸停的時候，整個工作列可能會左右移動。

　　視窗與對話方塊：

　　對話方塊中有可以拖動的標題列，關閉視窗的關閉按鈕。拖動形為就是層的拖動，關閉對話方塊就是層的隱藏。為了使對話方塊視窗能在各種解析度下置中，我們可以調用screen.width、screen.height（窗幕的寬與高），例如：

　　style="position: absolute; top:expression((screen.height-150)/2); left:expression((screen.width-200)/2); width: 200; height: 150"

　　網頁主題變化：

　　現在很多網頁都有換膚的功能，這樣使網頁更加個人化。為了使案頭風格的網頁也有類似桌面主題的功能，我們可以使用改變樣式表檔案的連結：寫幾個有不周風格的樣式表，通過javascript來調用，達到改變主題的功能。

　　樣式表的連結讀法要改為：這裡的id=css中的css與上面javascript中的css.href中的css指的是同一個。請看一下幾個主題的效果（如圖）：

　　另一存改變樣式表的方法為改變className:
。大家可以點擊色彩按鈕看看效果：
鍵盤的操作：

　　為了使網頁更形象，我可以用鍵盤事件來進行網頁操作，如用鍵盤開啟開始菜單，Esc鍵隱藏對話方塊等等。這裡要用到了onkeydown;下面是一個例子：

　　當在當前頁斷行符號時，就會開啟網頁陶吧http://homepage.yesky.com，這裡的13代表斷行符號鍵。
　　將下面代碼存為htm檔案，就會顯示各個字母代碼的數字（IE瀏覽器適用）。

　　網頁進度條：

　　思路是根據源檔案下載的進程來實現的，把源檔案分為幾個部分，每隔一部分，加一段代碼，來動態改變一個圖片的長度.顯示出下載的進程和百分比。

困難和解決:

　　由於網頁代碼繁長，用到很多的小圖片與大量的javascript。網頁的更新維護將是一件很頭痛的事。

　　下面是一些解決的方法：
　　對於每個層的ID名稱的的命名，要根據層的內容。例如個人說明的層用 id="readme" 開始菜單 id="startmenu"等等。這樣是為了更好的對源檔案進行改進和最佳化。同一類層的z-index設定相同，誰在上，誰在下，都是要考慮的。

　　對於很多重複使用的一項代碼，我們可以用document.write來寫成javascript，像案頭表徵圖等，下面是一個例子：

function link(act，txt)
{document.write(" "+txt+"")}

　　如果網頁中有十處用到這個代碼，我們就要寫進十個上面粗體代碼長度，但通用javascript，我們就可以唯寫十個這樣的代碼：
，這樣使源檔案更清晰，更容易看。

　　把所用的到的funtion函數全部放在js檔案中，這樣不會使風頁檔案太大，而出現打不出的現象，同時也更好的管理。

　　不足

　　Windows案頭風格的網頁只能是個網頁，不能像windows系統一樣的功能強大，再加上現在瀏覽器的差異性，在不同的瀏覽器下看到的效果也是大相徑庭。

　　收穫和經驗

　　這個網頁網頁的實現過程，也是我認識瞭解css、javascript、html過程，是我水平進步的過程。從中也體驗到編改寫代碼的樂趣，有時候為了一個代碼要想很久，不能解決就到論壇求助，問題很快就解決了。如果大家有興趣，可以到我的網頁上下載源檔案。

　　要做出一個案頭風格的網頁，對於網頁初學者來，是有一定困難的。也許你對上面所提到的代碼很陌生，那也沒關係，只要你對網頁學習有興趣，認真學習網頁製作的基礎知識，相信不久你的手中會誕生出更有創意的網頁。