|
具體細節(jié)表現(xiàn)：
菜單對與對話框的凸凹感：
我們天天看到的右鍵菜單、任務欄和開始菜單，都有立體感，我們通過css來實現(xiàn)這種效果是很容易的。具體是通過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圖形，或者用抓圖軟件來抓取系統(tǒng)桌面的圖標。當然如果你的圖像處理的水平不錯，你可以做好更好看的圖標。雙擊鏈接，我們可以通來onDblClick（雙擊）鼠標事件來完成。排列圖標的實現(xiàn)，就是再一次對層的絕對定位。
菜單：
菜單每個項目同樣是用層。主要用到鼠標的懸停(onmouseover)、鼠標離開(onmouseout)來改變層的背景色，和菜單的隱藏與顯示。開菜單欄的圖片用24×24大小的GIF圖片，菜單的下一級目錄菜單可以用16×16大小的。同一類菜單放在一個層中來定位。
開始菜單中的定位：
定位中通常用top:XX;left:XX;而開始菜單要用bottom:XX來定位，因為不管瀏覽器窗口的大小，菜單都在在最底處。開始菜單放在一個表格中，分為兩個單元格，左邊放在網(wǎng)站標記圖片，右鍵放所有的菜單項目：關機、注銷、幫助……
下面以圖示的形式說明開始菜單的制作細節(jié)：
開始菜單的制作細節(jié)：
序號1處是一個圖片，放在單格中，將單格的背景設置為這個圖片上端的顏色，單格的定位為底邊對齊，這樣做的好處是為了使當菜單長度大于圖片時，不會出現(xiàn)顏色突變。用Frontpage和抓圖工具可以完成。思路是用一個漸變的色條作表格的背景，在上面寫是所要的文字，調整好文字的顏色、字體，然后抓圖，再通過FP里面的圖像工具來轉換角度。
序號2處是大小為24×24的GIF透明圖像，可以抓系統(tǒng)菜單中的圖標。
序號3處是一段空隙，這里不要用空格，可以用一段隱藏的文字符號來代替。這是一個例子：
<span style="visibility: hidden">-----</span>
序號4處的箭頭是用的Webdings字體：<font face="Webdings">4</font>。背景色為深藍色，是因為鼠標放在上面，通過鼠標形為來動態(tài)改變菜單層的樣式表。例如： onMouseOver=this.className='over' onMouseOut=this.className='overout'
序號5處是用的水平線;為了使它更真實，要用樣式表來控制它的樣式，例如：
hr{width:95%;border: 1px inset #F0F0F0}
序號6處的空隙同樣不要用空格;我們可以用hspace(水平間距)、vspace(垂直間距)。在圖像的定位中，要用絕對垂直居中（align="absmiddle"），不然文字會與圖像下邊對齊;正常的表達：
<img src="*.gif" align="absmiddle" width="24" height="24" hspace="6" vspace="1">
出處：無憂視窗
責任編輯：藍色
上一頁 Windows桌面風格頁面的想法 下一頁 任務欄
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 
第 2 頁 具體細節(jié)表現(xiàn)
