用Fireworks製作簡潔清爽的網站

來源:互聯網
上載者:User
  網路的已經成為人們日常生活中的一部分,就像生活中房子,大部分人也想擁有自己網路空間,如果把自己的房子設計的漂亮大方呢?下面我們就以一個簡潔清爽的頁面為例來教大家如何設計一個好網頁。

  1. 啟動Fireworks,建立一個大小為180*200像素的畫布,設定畫布顏色為 #EFEFEF。

  2. 在工具列中選取矩形工具,繪製一個154* 183的矩形,在屬性面板中設定這個矩形的填充色為#A9B1BE,描邊設定為1像素的柔化,顏色為#677387,如圖所示。

  3. 利用矩形工具繪製一個寬 152,高 19 的矩形,在屬性偵測器中設定描邊為無,填充類別改為線性, 修改線性填充的顏色樣本,第一個顏色樣本的顏色為#E6FFFF,然後單擊漸層色階下面的地區,新增 一個新的顏色樣本,顏色為 #A4BECF,最後一個顏色樣本為 #FFFFFF,具體設定如圖所示:

  回到畫布上,調整一下漸層方向,現在你的圖看起來應該像是下圖那樣。 

  4. 以步驟 3 同樣的方式製作下面的矩形。

  選中下邊的矩形,在屬性偵測器的效果菜單中,選擇“陰影和光暈”>“投影”,為矩形添加一個陰影製作效果, 具體參數如圖所示。  

  5.使用直線工具畫出兩條長為153的線段,顏色為 #677387,描邊種類為1 像素柔化,分別放在上方矩形的下邊及下方矩形的上邊。

  6. 加入標題列的文字,字型為 elektr_02_5,大小為 10,不消除鋸齒,加入內容區的文字,字型為 04b03b,大小為 8,不消除鋸齒,   

  7. 在幀面板,單擊“建立/重製幀”按紐,新增一幀。返回到第一幀,按“Ctrl”+“A”全選中畫布上的所有對象,按“Ctrl” +“C” 複製,然後到第二幀,按 “Ctrl” +“V” 粘貼,然後按住SHIFT鍵不放,選擇將幀二上的 HOME、FIREWORKS、DREAMWEAVER 文字,往上及往左各位移 1 個像素,這是要製造當滑鼠移到文字上時,使其產生位移的效果。

  8. 回到第一幀,選擇工具列上的切片工具,將文字鏈結的區切割出來。   

  然後切換到指標工具,單擊 HOME 的切片,在彈出的菜單中選擇“添加映像交換行為…”,在彈出的交換映像對話方塊中,選擇相對應的切片,單擊確定。  

  用同樣的方法,分別製作 FIREWORKS、DREAMWEAVER 交換映像的行為。

  提示:你可以先切換到預覽視圖,將滑鼠移到鏈結上察看效果。

  9. 綜合以上各步驟,將可以將整個網頁版型製作完成,最終效果如圖所示。   

  這個頁面是我喜歡的類型,感覺清清爽爽的,希望您也會喜歡。 點擊這裡下載源檔案

相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。