DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> 用 fireworks 打造自己的坐標[組圖]
用 fireworks 打造自己的坐標[組圖]
編輯:Fireworks基礎     

  有次看到別人的網頁上的橫坐標和縱坐標,著實是該頁面中的點晴之筆。開始我認為這可以用普通的無縫背景填充就可以辦到。直到有一天,我打算在一個網頁上用上這效果時,才猛然發覺,原來這種無縫填充還真有些技巧!而遠非我想象的那樣簡單。效果雖然做到了,但是憑良心說,為什麼要如此畫才能填充的如此精確,我還是不知道,最超碼原理上我還沒弄明白。只能說是瞎碰上了處理方法。現在就把咱這瞎碰上的方法拿出與大家共享。:)

  1、新建文件,Width=50pixels,Height=20pixels,背景色為透明(Transparent)

  2、用放大工具把編輯區放大到400倍。用工具箱中的矩形工具拖畫出一個寬為1象素(pixel),高為9象素的矩形。打開Info(信息)面板參照。然後把這矩形移動到X坐標為4,Y坐標為1的位置上。此時信息面板如下圖顯示。

 3、選中該矩形,Edit>Clone,然後按五次電腦鍵盤上的右方向鍵,(每按一次方向鍵,選中的物體就會向相應的方向移動一個象素。如果按住電腦鍵盤上的Shift鍵不放,再按方向鍵,則每按一次方向鍵,選中的物體會向相應的方向移動10個象素)。

  4、打開History(歷史)面板,裡面記錄了我們操作的每個步驟。按住Shift鍵,選中我們剛才操作過的最後六個步驟(即Clone,move.move.move.move.move),再按歷史面板最下面的Replay按鍵8次。這樣我們得到了如下示圖.

5、選中最後一個矩形(也就是最右邊的那個)。打開Info面板,在H欄中輸入數字20(把該矩形的高度設置為20),然後按鍵盤上的回車鍵,我們發現該矩形高度變成20象素了。(好多朋友在信息面板中設置好寬度和長度後,總是記不得按回車鍵,卻一個勁的抱怨說改變不了長度或高度。要記住這個功能哦:),它能給您帶來許多方便)。言歸正傳,把改變後的矩形移動到Y坐標置為0,X坐標置為49的位置。參照Info面板。

  6、我們再一個長為50象素,高為1象素的矩形,然後把它移動到X坐標值為0,Y坐標值為9的位置上。這個矩形將會用來做坐標線的底線。


  7、Ctrl+A,同時選中編輯區中的矩形,你希望你的坐標是什麼顏色呢??盡管填上你喜歡的顏色吧。我比較偏愛藍色,這裡我們就填上藍色吧:)。告一段落了,把這個文件保存起來。

  8、新建文件,Width=776,Height=20,一般在分辨率為800*600的顯示模式下,網頁的寬設為776象素為佳。背景色為透明。這裡為了顯示方便,我把寬度設為500。

  9、在編輯區拖畫出一個830*20的矩形,為什麼要寬度為830象素呢?等會你就知道了。別忘了打開Info面板參照,保證Y坐標中的置為0。打開Fill面板,打開填充樣式的下拉菜單,選中Pattern(圖案填充),在圖案選擇下拉菜單中,我們選中最後一項other,此時它會彈出一個對話框讓我們選擇文件,這時我們找到剛才保存的文件,點擊打開按鍵。此時效果如圖


  7、Ctrl+A,同時選中編輯區中的矩形,你希望你的坐標是什麼顏色呢??盡管填上你喜歡的顏色吧。我比較偏愛藍色,這裡我們就填上藍色吧:)。告一段落了,把這個文件保存起來。

  8、新建文件,Width=776,Height=20,一般在分辨率為800*600的顯示模式下,網頁的寬設為776象素為佳。背景色為透明。這裡為了顯示方便,我把寬度設為500。

  9、在編輯區拖畫出一個830*20的矩形,為什麼要寬度為830象素呢?等會你就知道了。別忘了打開Info面板參照,保證Y坐標中的置為0。打開Fill面板,打開填充樣式的下拉菜單,選中Pattern(圖案填充),在圖案選擇下拉菜單中,我們選中最後一項other,此時它會彈出一個對話框讓我們選擇文件,這時我們找到剛才保存的文件,點擊打開按鍵。此時效果如圖

10、我們可以看到,此時的圖最左邊的位置不對,因為把這個坐標圖放到網頁上,要求最左邊的刻度為0。怎麼辦呢?此時我們應感到慶幸,幸好我們繪出的是一個長度為830象素的矩形,我們只要把該矩形向左移動一點距離就行了,使最左邊的刻度值為0。沒忘了在相應的刻度值上標上數字。

  11、把它輸出吧,打開Optimize面板,記得要設置成透明圖象,把下面的Alpha Transparency選中。File>Export。

到此告一段落了,回顧前面做過的步驟,小刻度的高度為什麼要設置為9象素呢?因為小刻度的高度值最好不要大於編輯區高度的一半,不然最後的效果會有些失真。下面看一個示例。

  小刻度的高度設為12象素的效果

大家可以看到,如果小刻度設為大於編輯區高度的一半時,用它進行圖案填充,得到的是一個上下有點錯位的圖。

  橫坐標是畫出來了,可是縱坐標該如何畫呢?有種快捷的方法就是把橫坐標順時針旋轉90度。有時旋轉後的圖效果不太好,還是動手來畫一個縱坐標吧。

  方法和前面說過的相同,只不過把寬度設為20,高度設為50罷了,最後用來填充的圖案如下圖所示

  這裡不再多說了,大家動手試試吧。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved