|
Dreamweaver 4.0技巧十二招
對(duì)想要在可視化的環(huán)境下制作復(fù)雜網(wǎng)頁(yè)的專業(yè)網(wǎng)頁(yè)制作者來(lái)說(shuō)，Dreamweaver 已經(jīng)漸漸在網(wǎng)頁(yè)編輯工具市場(chǎng)中展露頭角，成為專業(yè)人士編寫網(wǎng)頁(yè)的最佳選擇。以目前的情況來(lái)說(shuō)，Dreamweaver 內(nèi)建的功能可說(shuō)是越作越多、越作越豐富、齊備。在這里我要向大家介紹的4.0版本中的一些應(yīng)用小技巧。
1. 讓網(wǎng)頁(yè)頁(yè)面更有彈性
有些網(wǎng)頁(yè)開發(fā)者稱以下要介紹的這種技巧為 liquid，我在這兒則把這種技巧叫做是 stretchy（彈性延伸的技巧）。這是一種技巧，可在訪客瀏覽器窗口大小改變時(shí)也隨之調(diào)整網(wǎng)頁(yè)頁(yè)面大小，因此若是窗口過(guò)大就不會(huì)有空白處、窗口過(guò)小邊緣就不會(huì)跑出上下移動(dòng)的拉Bar。其實(shí)大多數(shù)簡(jiǎn)單的網(wǎng)頁(yè)會(huì)自己隨著瀏覽器窗口大小來(lái)調(diào)整頁(yè)面大小，但是若是網(wǎng)頁(yè)里用到很多不同的框框及表格，網(wǎng)頁(yè)頁(yè)面大小就很難自動(dòng)彈性地調(diào)整。通常網(wǎng)頁(yè)設(shè)計(jì)者會(huì)用混合運(yùn)用固定欄寬的框框，和 GIF 圖檔作為間隔， 來(lái)設(shè)計(jì)網(wǎng)頁(yè)頁(yè)面，這樣一來(lái)不論是用 Internet Explorer 或是用，頁(yè)面大小都會(huì)固定而不會(huì)跑掉。用 Dreamweaver 4.0 可以輕而易舉的設(shè)計(jì)出會(huì)自動(dòng)彈性調(diào)整的網(wǎng)頁(yè)。要怎么做呢？
用工具面版（Object palette）上的按鈕開啟網(wǎng)頁(yè)，并且轉(zhuǎn)換到 格式檢視（ Layout view）。這時(shí)可以看到文字方塊的列寬， 每一列的方框上方中間還有一個(gè)小小的下拉式箭頭 ，選擇想要設(shè)定彈性顯示的列上方的小箭頭，接著選擇「將列設(shè)為彈性顯示」（ Make Column Autostretch）。 （設(shè)定自動(dòng)調(diào)整列寬以一列為限）這時(shí)該列方框上方就會(huì)出現(xiàn)一條波浪形的線，而不是原本表示列寬的數(shù)字。 Dreamweaver 會(huì)自動(dòng)制作出固定版面的空格圖文件，這個(gè)空白圖文件是以列上方的兩個(gè)長(zhǎng)條形的空白表格表示，如此版面會(huì)自動(dòng)被填充，才會(huì)完成彈性版面設(shè)定。（在第一次增加空白圖文件時(shí)會(huì)跳出一個(gè)對(duì)話框問(wèn)你是否要使用內(nèi)建圖檔，為求效果，我建議你讓 Dreamweaver 自動(dòng)產(chǎn)生一個(gè)，不然就不用使用空白圖文件來(lái)填充版面。）
2. 創(chuàng)造個(gè)性化調(diào)色盤
Dreamweaver 4.0 新的 Assets panel（屬性控制面板）是一種可以在編輯網(wǎng)站時(shí)根據(jù)檔案型態(tài)，例如圖片、樣板等來(lái)管理檔案的新工具，當(dāng)你定義新站臺(tái)時(shí)（選擇Site · New Site），所有類型的組件會(huì)自動(dòng)增加到 Asset panel 里的適當(dāng)表框中。這個(gè)加入新的Assets panel屬性控制面版里也有顏色框，儲(chǔ)存你網(wǎng)站里所用到的所有色彩，包含文字的顏色、背景的顏色，以及連結(jié)的顏色等。這是一個(gè)為使用者量身定做的網(wǎng)站導(dǎo)向顏色盤。只要激活 Assets panel （先選擇 Window · 再選擇 Assets），接著選擇左方那個(gè)小小的色彩滾動(dòng)條，就可以看到你網(wǎng)站里各式各樣的顏色選項(xiàng)。當(dāng)然你可以將這些顏色拉到某些特定選取的文字中。甚至當(dāng)你選擇某種顏色時(shí)，畫面上會(huì)出現(xiàn)這種顏色的十六進(jìn)制值的色彩濃淡度，和三色對(duì)應(yīng)碼（RGB）。如果想將調(diào)色盤工具列縮小一點(diǎn)，甚至可以僅加入某些顏色到調(diào)色盤的收藏夾里。只需將選取的顏色反白、選擇窗口里一個(gè)叫做「添加到我的收藏夾」按鈕（最下方靠右的按鈕），就完成了。
3. 制作彈出式選單導(dǎo)覽系統(tǒng)
原本要制作彈出式選單導(dǎo)覽系統(tǒng)（Pop-up Menu Navigation System）要用到好一些 JavaScript 的語(yǔ)法技巧，但是若你裝了Dreamweaver/Fireworks Studio，輕輕松松即可快速辦到。首先在 Fireworks 里開始，選擇某個(gè)圖片， 然后在 Set Pop-Up Menu的對(duì)話框里選擇 Insert· Pop-Up Menu，你可以輸入項(xiàng)目（items）的名稱并選擇 Plus （加入）按鈕，來(lái)新增該項(xiàng)目。你可以繼續(xù)在跳出來(lái)的訊息框里進(jìn)行細(xì)項(xiàng)設(shè)定，例如設(shè)定該項(xiàng)目所要用的文字及連結(jié)，當(dāng)然也可以新增子選單、并重新安排下一層的設(shè)定。完成時(shí)，選擇 Next （下一步），繼續(xù)設(shè)定偏好值，例如顏色、字體等等。這時(shí)選單完成后，可以預(yù)覽 HTML 語(yǔ)法，也可預(yù)覽影像。再選擇 Finish （完成）。這時(shí)當(dāng)鼠標(biāo)移動(dòng)到原來(lái)的圖案時(shí)，會(huì)出現(xiàn)選單系統(tǒng)的內(nèi)容一覽。 接著將制作好的檔案匯出時(shí)， Fireworks 會(huì)自動(dòng)生產(chǎn)出所有 Dreamweaver 需要用到的 HTML、JavaScript，以及影像檔案。
4. 讓圖檔動(dòng)起來(lái)！
如果你同時(shí)安裝有 Dreamweaver/Fireworks Studio，這兩種產(chǎn)品搭配的完美程度將使你贊不絕口。即使你不是專業(yè)的圖檔設(shè)計(jì)者，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)也多多少少想把一些 GIF 圖片文件修改得活靈活現(xiàn)。Dreamweaver 可以讓你制作動(dòng)畫不求人喔！在標(biāo)準(zhǔn)窗口里選擇要進(jìn)行修改的圖片，然后在 Property Inspector 里選擇編輯鈕（Edit）。如果你安裝的 Dreamweaver里附有 Fireworks， Fireworks 就是 Dreamweaver 預(yù)設(shè)圖片編輯器，這時(shí)圖片就會(huì)自動(dòng)加載到 Fireworks。（若仔細(xì)看，各位會(huì)發(fā)現(xiàn) Fireworks 的畫面會(huì)出現(xiàn) Editing From Dreamweaver 這樣的文字和圖樣，指示你可以由Dreamweaver 里進(jìn)行圖片編輯。） 好了，現(xiàn)在在 Fireworks 里選擇要編輯的圖片，選擇 Modify ·Animate ·Animate Selection。 接下來(lái)完成 Animate dialog box 里的設(shè)定，選定動(dòng)畫的框架數(shù)，動(dòng)畫移動(dòng)的方向、透明度等等設(shè)定。你也可以選擇 Frames 工具列設(shè)定移動(dòng)速度，選擇 Object 面版來(lái)改變?cè)O(shè)定。要匯出檔案時(shí)，只要選擇 Optimize 工具列，在檔案類型的地方選擇 Animated GIF。完成以后，F(xiàn)ireworks 就會(huì)自動(dòng)將圖片以最佳化設(shè)定匯出，并且自動(dòng)將 GIF 圖檔更新，還會(huì)在 Dreamweaver 里將更新過(guò)的圖檔秀出來(lái)。選擇 File ·Preview in Browser，這樣就可以在瀏覽器里預(yù)覽剛剛制作完成的可愛圖檔！
5. 讓按鈕有閃動(dòng)效果
在 Dreamweaver中，不用有 Flash 程序，也可以制作有閃動(dòng)效果的 Flash 按鈕對(duì)象。 4.0 版內(nèi)建有好幾個(gè) Flash 按鈕對(duì)象，可以制作好幾個(gè)不同形式的按鈕。選擇 Insert ·Interactive Images ·Flash Button 就可看到有哪些內(nèi)建按鈕。在對(duì)話框內(nèi)甚至可以用鼠標(biāo)指到想要使用的按鈕形式，然后看看在瀏覽器里的效果如何。用鼠標(biāo)光標(biāo)把要用的按鈕形式選起來(lái)，再依序輸入?yún)?shù)，例如按鈕上的文字、字形、顏色、連結(jié)等，或是自定文件名稱。按 下OK。接下來(lái)就會(huì)有一個(gè) SWF 檔產(chǎn)生，檔案并會(huì)自動(dòng)置入你的網(wǎng)頁(yè)中。按一下這個(gè)做好的檔案，會(huì)看到 Property Inspector （屬性明細(xì)）中會(huì)秀出檔案的屬性。將檔案屬性秀出來(lái)時(shí)，如果擴(kuò)展檔案屬性明細(xì)表，會(huì)出現(xiàn) Play （播放）鈕，選擇之后可以不用開啟瀏覽器來(lái)預(yù)視按鈕的閃動(dòng)效果。
6. 制作流動(dòng)文字
在網(wǎng)頁(yè)中增加 流動(dòng)文字就像增加我剛剛介紹的 Flash 按鈕一樣簡(jiǎn)單。相同地，不用安裝 Flash，用 Dreamweaver 4.0 提供的新功能就可以輕松辦到。常用 HTML 語(yǔ)法寫網(wǎng)頁(yè)、沒(méi)有交互式媒體經(jīng)驗(yàn)的網(wǎng)頁(yè)制作者也可以輕松制作出小巧的 Flash 形式的流動(dòng)文字。根據(jù) Macromedia 表示，有97%的網(wǎng)絡(luò)使用者可以觀看有 Flash 效果的網(wǎng)頁(yè)，因此這項(xiàng)新功能可以在不添加兼容性麻煩的情況下為網(wǎng)頁(yè)增添一些瀏覽上與讀者的互動(dòng)性。選擇Insert ·Interactive Images ·Flash Text，再將偏好設(shè)定一一填入（例如要變更效果的文字、字形、字體顏色及字體大小等等）。
7. 更改鍵盤快速鍵
Dreamweaver 可讓使用者自定使用接口，這項(xiàng)設(shè)計(jì)十分有彈性。舉例來(lái)說(shuō)，使用者可以通過(guò)撰寫程序（programming）或自行增加對(duì)象（object）的方式來(lái)更改選單。不必功力高深，你就可以更改鍵盤快速鍵，因?yàn)?Dreamweaver 有一項(xiàng)叫做Keyboard Shortcut Editor的圖形接口，只要選擇 Edit ·Keyboard Shortcuts，對(duì)話框?qū)⒓虞d并列出可以更動(dòng)的快速鍵一覽表，讓你把快速鍵改成自己習(xí)慣用的設(shè)定值。要更動(dòng)快速鍵，只要使用現(xiàn)行設(shè)定（Current Set）和指令列（Command）的下拉選單，在現(xiàn)有的指令中找到想要更改的指令，接著選取目前的快速鍵，就會(huì)出現(xiàn)在快速鍵的列表中。另外，若要增加快速鍵設(shè)定，可以選擇 Plus 鈕、在鍵盤上敲入你想使用的新快速代表鍵，選擇變更（Change）即可。同時(shí)你也可以選取某快速鍵、選擇移除鍵（Minus ），就可以移除某個(gè)快速鍵。
8. 重新設(shè)定網(wǎng)站窗口（Site window）列寬
只要從 Site window 中選擇View ·File View Columns ，就可以自定檢視網(wǎng)站 （Site view）時(shí)列寬的大小及呈現(xiàn)方式。選取一列寬的名稱，使用上下箭頭重新調(diào)整，或不要勾選顯示字段（Show field）以隱藏該列。另外，選擇 Plus 鈕也可以新增列，并自創(chuàng)列名。此外，你也可以借著在下拉式選單中選擇現(xiàn)有的 note 來(lái)將列和 Design Note 產(chǎn)生關(guān)連。
9. 閱讀網(wǎng)頁(yè)原始檔
當(dāng)你開啟 O'Reilly Code Reference（Window ·Reference）來(lái)檢查屬性或是瀏覽器的兼容性時(shí)，預(yù)設(shè)的窗口會(huì)以細(xì)小的字型顯示出參考設(shè)定值。但是若你按下窗口右上方的右鍵鈕（就在關(guān)閉按鈕的下方），就會(huì)出現(xiàn)一排下拉式選單，可以在這邊選擇原始文件字體的大?。ㄐ⌒妥郑街行妥煮w以及大型字體）。選擇大型字體比較不會(huì)虐待眼睛，因?yàn)檫@樣你看 HTML 原始檔時(shí)就不用拿著放大鏡看屏幕了！
10. 新增 Flash 按鈕
在上面我已經(jīng)教你如何用20種預(yù)設(shè)的按鈕類型，來(lái)制作 Dreamweaver 里的 Flash 按鈕。這是不用另外安裝任何檔案或程序的方法。底下有另一種方法，就是安裝Fireworks buttons，這種擴(kuò)充功能和技巧五有相同效果。到 Exchange for Dreamweaver（Dreamweaver 擴(kuò)充功能交換中心） ，輸入"InstaGraphics Extensions for Dreamweaver" 的關(guān)鍵詞搜尋，然后再下載這個(gè) 577K 的檔案。轉(zhuǎn)換到 Dreamweaver，選擇 Commands ·Manage Extensions，再選擇 File ·Install Extension，就可以開始安裝。一旦重新激活 Dreamweaver，就有六個(gè)新奇有趣的按鈕型態(tài)，包括 Surfboard 及 Bulletbar 在內(nèi)， 這時(shí)只要使用 Insert ·Interactive Images ·Fireworks Button 指令，就可以制作出一個(gè)酷炫的按鈕。你也可以用 commands ·Convert Bullets To Images 及 Commands ·Convert Text To Images，上述兩種方法都可以自動(dòng)執(zhí)行 Fireworks。
11. 在網(wǎng)頁(yè)中加入「設(shè)定成收藏夾」功能
在 Exchange里搜尋，你就可以發(fā)現(xiàn) Add To Favorites的擴(kuò)充功能。這個(gè)小小的檔案才占 3K ，下載時(shí)間不會(huì)等太久，接著循相同步驟，由 Extension Manager加載 （Commands ·Manage Extensions, File ·Install Extension）。接著重新激活 Dreamweaver，這個(gè)新加載的擴(kuò)充檔案會(huì)在 Dreamweaver 里新增一項(xiàng)功能。如果你的中網(wǎng)頁(yè)加入這個(gè)「加入收藏夾」的功能，這樣一來(lái)網(wǎng)絡(luò)使用者逛到你的網(wǎng)站時(shí)，輕輕一按，就可以輕易地將你的網(wǎng)站加入他使用瀏覽器的收藏夾（或是個(gè)人書簽）。此外，你也可以自定收藏夾快捷方式名稱，以及收藏夾快捷方式名稱前中會(huì)出現(xiàn)的小圖標(biāo)（一般 IE 中收藏夾的快捷方式前面的小圖標(biāo)都是 IE 的默認(rèn)值，若你有自己設(shè)計(jì)的小圖標(biāo)，那就酷多了。注意啦，這項(xiàng)功能只支持用 IE 4.0以及更高版本的瀏覽器。只要選擇 Windows 選單里的Behavior 面版，再到 IE 功能下拉選單那兒選擇此項(xiàng)功能，即可輕松激活此酷炫功能。
12. 超酷的圖表
如果你想制作表格，還要自己花時(shí)間再逐字敲打網(wǎng)頁(yè)原始碼嗎？不需要了，已經(jīng)有現(xiàn)成的啦！到 Exchange下載 Form Builder extension，就有現(xiàn)成的表格，可讓你馬上復(fù)制包含像國(guó)家、性別、婚姻狀況、年齡層及其它目錄等的字段表格。到 Exchange下載這個(gè)小巧（只有11K） 的檔案，然后經(jīng)由 Extension Manager 安裝進(jìn)來(lái)（Commands ·Manage Extensions, File ·Install Extension）。然接著只要重新激活 Dreamweaver，選擇Insert ·FormBuilder，就會(huì)在（Insert· FormBuilder ）中發(fā)現(xiàn)擴(kuò)充檔。選擇了之后這時(shí)會(huì)有一個(gè)對(duì)話框出現(xiàn)，會(huì)秀出所有可以套用的格式選單。
|