Windows案頭風格頁面製作點滴

window|頁面 具體細節表現：

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

　　我們天天看到的右鍵菜單、工作列和開始菜單，都有立體感，我們通過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 例子：<div class=up style=".."></div>

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

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

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

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

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

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

　　我們天天看到的右鍵菜單、工作列和開始菜單，都有立體感，我們通過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 例子：<div class=up style=".."></div>

　　要使層有凸出感，我們可以先選擇好層的背景，層的上、左邊框用比背景顏色淺一些，而層的下、右邊框用比背景深一些。同樣如果定義有凹進感的層，上、左邊要深，下、右邊要淺。邊框的寬度來改變立體感的強弱。像快速啟動欄處的凸出感不太強，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處是一段空隙，這裡不要用空格，可以用一段隱藏的文字元號來代替。這是一個例子：
<span style="visibility: hidden">-----</span>

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

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

　　序號6處的空隙同樣不要用空格;我們可以用hspace(水平間距)、vspace(垂直間距)。在映像的定位中，要用絕對垂直置中（align="absmiddle"），不然文字會與映像下邊對齊;正常的表達：
<img src="http://edu.cnzz.cn/NewsInfo/*.gif" align="absmiddle" width="24" height="24" hspace="6" vspace="1">

　　製作思路：把它們定位在一個表格中，每一個儲存格中放置一個圖片。這個大的表格定位在最底下，用上面提到的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來調用，達到改變主題的功能。
<script Language="javascript">
function changecss(tt)
{
css.href=tt;//tt是樣式表檔案的路徑
}
</script>

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

　　另一存改變樣式表的方法為改變className:
<SCRIPT>function c(css){id.className=css;}</SCRIPT>。大家可以點擊色彩按鈕看看效果：

困難和解決:

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

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

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

function link(act，txt)
{document.write("<div class=link onMouseOver=this.className='overlink' onMouseOut=this.className='link' style='padding-left:16;padding-top:1;padding-bottom:1' >"+txt+"</div>")}

　　如果網頁中有十處用到這個代碼，我們就要寫進十個上面粗體代碼長度，但通用javascript，我們就可以唯寫十個這樣的代碼：
<script>link('pop('id.htm')'，'連結之一')</script>，這樣使源檔案更清晰，更容易看。

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

　　不足

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

　　收穫和經驗

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

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