| |||
| |||
2、圖形化的網(wǎng)頁 俗語說:一圖解千文!圖形的影響力往往勝過冗長的文字敘述。在設計網(wǎng)頁時,圖形不但可以表達一定的信息和意義,還可以表現(xiàn)出一個網(wǎng)站的風格和特色。 看到這個主頁了嗎?這就是圖形界面的主頁(圖1),整個畫面基本由圖形組成,鏈接也是加在圖上的,當鼠標停在上面時,圖形會發(fā)生一些變化。 圖1 點擊可看到瀏覽效果 你想知道這是如何完成的嗎?那我們就一起來做一下吧! (1)畫出你的主頁來 你是否羨慕一些網(wǎng)站的精彩布局和獨特的視覺效果? 別急,還有一個方法可以幫助你定位圖層,規(guī)劃網(wǎng)頁布局!你可以將主頁畫出來,然后在Dreamweaver中“臨摹”。 打開一個繪圖軟件,比如PhotoShop,把你想象中最美的網(wǎng)站布局畫出來,這其間既可以吸取其他網(wǎng)站的長處,也可以加入自己的構思和創(chuàng)意,畫好之后,把這幅圖存為JPG格式的文件,也可以存為GIF或PNG格式(圖2)。 圖2 用繪圖軟件做好的圖片(點擊放大) 在Dreamweaver中新建一個空文檔,按下Ctrl+J,調(diào)出“Page Properties”對話框(圖3)。 圖3 頁面屬性對話框 選擇“Tracing Image”輸入框右側的“Browse”按鈕,從對話框中選擇我們所畫的草稿圖,拖動“Image Transparency”滑動按鈕,調(diào)整草稿圖的透明度,將其調(diào)為50%,單擊“OK”,看,草稿圖在網(wǎng)頁中出現(xiàn)了(圖4),你可以在這個圖上建立表格或圖層,將畫出來的主頁做出來,相信你很快就會進入佳境的。 圖4 草稿圖在頁面中的顯示效果(點擊放大) 草稿圖不同的網(wǎng)頁的背景圖,它只是設計階段的輔助工具,在瀏覽時是看不到的,如果草稿圖的顏色太深,也可以調(diào)整它的透明度,以方便制作。 |
聯(lián)系客服