直播中
1. 讓網(wǎng)頁頁面更有彈性
有些網(wǎng)頁開發(fā)者稱以下要介紹的這種技巧為 liquid,我在這兒則把這種技巧叫做是 stretchy(彈性延伸的技巧)。這是一種技巧,可在訪客瀏覽器窗口大小改變時也隨之調(diào)整網(wǎng)頁頁面大小,因此若是窗口過大就不會有空白處、窗口過小邊緣就不會跑出上下移動的拉Bar。其實大多數(shù)簡單的網(wǎng)頁會自己隨著瀏覽器窗口大小來調(diào)整頁面大小,但是若是網(wǎng)頁里用到很多不同的框框及表格,網(wǎng)頁頁面大小就很難自動彈性地調(diào)整。通常網(wǎng)頁設(shè)計者會用混合運用固定欄寬的框框,和 GIF 圖檔作為間隔, 來設(shè)計網(wǎng)頁頁面,這樣一來不論是用 Internet Explorer 或是用,頁面大小都會固定而不會跑掉。用 Dreamweaver 4.0 可以輕而易舉的設(shè)計出會自動彈性調(diào)整的網(wǎng)頁。要怎么做呢?
用工具面版(Object palette)上的按鈕開啟網(wǎng)頁,并且轉(zhuǎn)換到 格式檢視( Layout view)。這時可以看到文字方塊的列寬, 每一列的方框上方中間還有一個小小的下拉式箭頭 ,選擇想要設(shè)定彈性顯示的列上方的小箭頭,接著選擇「將列設(shè)為彈性顯示」( Make Column Autostretch)。 (設(shè)定自動調(diào)整列寬以一列為限)這時該列方框上方就會出現(xiàn)一條波浪形的線,而不是原本表示列寬的數(shù)字。 Dreamweaver 會自動制作出固定版面的空格圖文件,這個空白圖文件是以列上方的兩個長條形的空白表格表示,如此版面會自動被填充,才會完成彈性版面設(shè)定。(在第一次增加空白圖文件時會跳出一個對話框問你是否要使用內(nèi)建圖檔,為求效果,我建議你讓 Dreamweaver 自動產(chǎn)生一個,不然就不用使用空白圖文件來填充版面。)
2. 創(chuàng)造個性化調(diào)色盤
Dreamweaver 4.0 新的 Assets panel(屬性控制面板)是一種可以在編輯網(wǎng)站時根據(jù)檔案型態(tài),例如圖片、樣板等來管理檔案的新工具,當(dāng)你定義新站臺時(選擇Site · New Site),所有類型的組件會自動增加到 Asset panel 里的適當(dāng)表框中。這個加入新的Assets panel屬性控制面版里也有顏色框,儲存你網(wǎng)站里所用到的所有色彩,包含文字的顏色、背景的顏色,以及連結(jié)的顏色等。這是一個為使用者量身定做的網(wǎng)站導(dǎo)向顏色盤。只要激活 Assets panel (先選擇 Window · 再選擇 Assets),接著選擇左方那個小小的色彩滾動條,就可以看到你網(wǎng)站里各式各樣的顏色選項。當(dāng)然你可以將這些顏色拉到某些特定選取的文字中。甚至當(dāng)你選擇某種顏色時,畫面上會出現(xiàn)這種顏色的十六進制值的色彩濃淡度,和三色對應(yīng)碼(RGB)。如果想將調(diào)色盤工具列縮小一點,甚至可以僅加入某些顏色到調(diào)色盤的收藏夾里。只需將選取的顏色反白、選擇窗口里一個叫做「添加到我的收藏夾」按鈕(最下方靠右的按鈕),就完成了。
3. 制作彈出式選單導(dǎo)覽系統(tǒng)
原本要制作彈出式選單導(dǎo)覽系統(tǒng)(Pop-up Menu Navigation System)要用到好一些 JavaScript 的語法技巧,但是若你裝了Dreamweaver/Fireworks Studio,輕輕松松即可快速辦到。首先在 Fireworks 里開始,選擇某個圖片, 然后在 Set Pop-Up Menu的對話框里選擇 Insert· Pop-Up Menu,你可以輸入項目(items)的名稱并選擇 Plus (加入)按鈕,來新增該項目。你可以繼續(xù)在跳出來的訊息框里進行細(xì)項設(shè)定,例如設(shè)定該項目所要用的文字及連結(jié),當(dāng)然也可以新增子選單、并重新安排下一層的設(shè)定。完成時,選擇 Next (下一步),繼續(xù)設(shè)定偏好值,例如顏色、字體等等。這時選單完成后,可以預(yù)覽 HTML 語法,也可預(yù)覽影像。再選擇 Finish (完成)。這時當(dāng)鼠標(biāo)移動到原來的圖案時,會出現(xiàn)選單系統(tǒng)的內(nèi)容一覽。 接著將制作好的檔案匯出時, Fireworks 會自動生產(chǎn)出所有 Dreamweaver 需要用到的 HTML、JavaScript,以及影像檔案。
4. 讓圖檔動起來!
如果你同時安裝有 Dreamweaver/Fireworks Studio,這兩種產(chǎn)品搭配的完美程度將使你贊不絕口。即使你不是專業(yè)的圖檔設(shè)計者,在設(shè)計網(wǎng)頁時也多多少少想把一些 GIF 圖片文件修改得活靈活現(xiàn)。Dreamweaver 可以讓你制作動畫不求人喔!在標(biāo)準(zhǔn)窗口里選擇要進行修改的圖片,然后在 Property Inspector 里選擇編輯鈕(Edit)。如果你安裝的 Dreamweaver里附有 Fireworks, Fireworks 就是 Dreamweaver 預(yù)設(shè)圖片編輯器,這時圖片就會自動加載到 Fireworks。(若仔細(xì)看,各位會發(fā)現(xiàn) Fireworks 的畫面會出現(xiàn) Editing From Dreamweaver 這樣的文字和圖樣,指示你可以由Dreamweaver 里進行圖片編輯。) 好了,現(xiàn)在在 Fireworks 里選擇要編輯的圖片,選擇 Modify ·Animate ·Animate Selection。 接下來完成 Animate dialog box 里的設(shè)定,選定動畫的框架數(shù),動畫移動的方向、透明度等等設(shè)定。你也可以選擇 Frames 工具列設(shè)定移動速度,選擇 Object 面版來改變設(shè)定。要匯出檔案時,只要選擇 Optimize 工具列,在檔案類型的地方選擇 Animated GIF。完成以后,F(xiàn)ireworks 就會自動將圖片以最佳化設(shè)定匯出,并且自動將 GIF 圖檔更新,還會在 Dreamweaver 里將更新過的圖檔秀出來。選擇 File ·Preview in Browser,這樣就可以在瀏覽器里預(yù)覽剛剛制作完成的可愛圖檔!
5. 讓按鈕有閃動效果
在 Dreamweaver中,不用有 Flash 程序,也可以制作有閃動效果的 Flash 按鈕對象。 4.0 版內(nèi)建有好幾個 Flash 按鈕對象,可以制作好幾個不同形式的按鈕。選擇 Insert ·Interactive Images ·Flash Button 就可看到有哪些內(nèi)建按鈕。在對話框內(nèi)甚至可以用鼠標(biāo)指到想要使用的按鈕形式,然后看看在瀏覽器里的效果如何。用鼠標(biāo)光標(biāo)把要用的按鈕形式選起來,再依序輸入?yún)?shù),例如按鈕上的文字、字形、顏色、連結(jié)等,或是自定文件名稱。按 下OK。接下來就會有一個 SWF 檔產(chǎn)生,檔案并會自動置入你的網(wǎng)頁中。按一下這個做好的檔案,會看到 Property Inspector (屬性明細(xì))中會秀出檔案的屬性。將檔案屬性秀出來時,如果擴展檔案屬性明細(xì)表,會出現(xiàn) Play (播放)鈕,選擇之后可以不用開啟瀏覽器來預(yù)視按鈕的閃動效果。
6. 制作流動文字
在網(wǎng)頁中增加 流動文字就像增加我剛剛介紹的 Flash 按鈕一樣簡單。相同地,不用安裝 Flash,用 Dreamweaver 4.0 提供的新功能就可以輕松辦到。常用 HTML 語法寫網(wǎng)頁、沒有交互式媒體經(jīng)驗的網(wǎng)頁制作者也可以輕松制作出小巧的 Flash 形式的流動文字。根據(jù) Macromedia 表示,有97%的網(wǎng)絡(luò)使用者可以觀看有 Flash 效果的網(wǎng)頁,因此這項新功能可以在不添加兼容性麻煩的情況下為網(wǎng)頁增添一些瀏覽上與讀者的互動性。選擇Insert ·Interactive Images ·Flash Text,再將偏好設(shè)定一一填入(例如要變更效果的文字、字形、字體顏色及字體大小等等)。