close

[轉貼自]http://www.helzone.com/vbb/showthread.php?t=49810


DreamWeaver超級技巧

1. 用Dreamweaver 4.0輕鬆設計會自動彈性調整的網頁
首先需要保證的是你的頁面內容採用了表格的格式,然後開啟你要編輯的頁面,按「Ctrl+F6」或是選單「View→TableView→Layout?View」轉換到佈局視圖。這時可以看到單元格的列寬,在列寬數字的旁邊還有一個小小的下拉式箭頭,點擊你要設定彈性顯示的列上方的小箭頭,接著選取「將列設為彈性顯示」(Make Column Autostretch)。該列方框上方就會出現一條波浪形的線,而不是剛才表示列寬的數字。完成後你的頁面就變成了一個具有彈性的頁面了。此外,需要注意頁面中不要有尺寸過大的圖片。
**********************************************************
**********************************************************
2. 用Dreamweaver 4.0製作有閃動效果的Flash按鈕
選取選單Insert→Interactive?Images→Flash?Button就可看到有哪些內嵌按鈕。在跳出的對話框裡,你可以在「Style」清單裡選取自己想要的按鈕型態,在預覽(Sample)視窗裡可以看到這種型態的效果如何。選取好之後,在「Button?Text」視窗輸入按鈕上面的文字,在「Font」視窗選取字型,在「Size」視窗輸入文字的大小,在「Link」視窗輸入連結的目的,在「Target」視窗選取連結開啟的模式,在「BgColor」選取按鈕背景彩色,在「Save?As」視窗輸入儲存的檔案名。完成這些後,按下「OK」按鈕,你就完成了一個Flash按鈕啦。這個按鈕還會自動插入你的網頁中,然後在Dreamweaver編輯視窗選中你剛才製作的按鈕,屬性視窗就會顯示出這個按鈕的屬性,點選上面的「Play」按鈕,你就可直接在編輯視窗預覽這個按鈕的閃動效果。需要注意的是Dreamweaver?4.0的這個功能不支援中文字型。
**********************************************************
**********************************************************
3. 在Dreamweaver 4.0中自訂鍵盤快捷鍵
選取選單「Edit→Keyboard?Shortcuts」,在對話框中會列出目前已經啟用的以及可以變更的快捷鍵一覽表,你可以在這裡把快捷鍵改成自己習慣用的。若果要變更快捷鍵,首先要選取你要變更的指令,接著選取目前的快捷鍵,這個快捷鍵就會出現在「Shortcuts」清單中,然後在「Press Key」視窗輸入你想要使用的快捷鍵,然後點擊「Change」按鈕變更即可完畢。你還可以利用「+」、「-」按鈕增加或是刪除目前的快捷鍵。
**********************************************************
**********************************************************
4. 讓Dreamweaver?4.0和Fireworks整合
若果你的電腦裡同時安裝了Dreamweaver/Fireworks,那麼你就可以使用Dreamweaver?4.0提供的整合Fireworks的功能。利用這個功能你可以把你的GIF圖片修改得更加動人,輕鬆地實現動畫效果。在Dreamweaver編輯視窗選取好你要修改的GIF圖片,然後在圖片屬性視窗點選「編輯(Edit)」按鈕,這時系統會自動啟動Fireworks軟體編輯這個圖片。仔細看,你會發現Fireworks的圖片編輯視窗已出現Editing?From?Dreamweaver這樣的文字和圖樣,也就是說這個圖片是為Dreamweaver頁面進行圖片編輯的。現在我們在Fireworks裡選取要編輯的圖片,選取選單「Modify→Animate→Animate?Selection」。在跳出的視窗裡設定動畫的屬性:選定動畫的畫面數、動畫移動的方向、透明度等等。然後把修改好的檔案匯出即可。這樣,在Dreamweaver編輯視窗會自動更新剛才修改好的檔案,使你的頁面圖片動起來。
**********************************************************
**********************************************************
5. 巧用網站報告器
在Dreamweaver?4.0里提供了一個網站報告器,利用這個網站報告器可以幫助你在你的網站眾多檔案中快速找到和修復錯誤。點選選單「Site→Reports」即可啟動報告器,選取你要檢查的項目,然後點選「Run」按鈕即可查出你網站上的一般問題。你也可以自己編寫報告器來查出網站上的一些特殊問題 (一般問題通常是一些文字丟失或文件未命名) 。
**********************************************************
**********************************************************
6. 快速還原多次動作
在製作頁面時,我們可能需要不停地修改頁面,有時還要還原過去的動作,我們可以使用「Edit」選單裡的「Undo」指令,可是這個指令每次只能還原一次,若果我們需要還原多次動作,那就要不停地「Undo」,實在太煩。在Dreamweaver?4.0里提供了一個History視窗,可以讓我們輕鬆地還原多次動作。在「Windows」選單裡選取「History」即可開啟這個歷史視窗。在這個視窗把你每一次的動作都保留下來了,利用視窗左邊那個滑動指標,就可以不停地還原,還可以還原每一次動作,內含已經存盤的。而且還可以把這個歷史紀錄儲存下來共享。
**********************************************************
**********************************************************
7. 隱藏浮動面板
開啟Dreamweaver,給人的第一印象是一堆浮動面板,往往弄得你眼花繚亂,雖然它可以拖開,但畢竟佔據著本來就很有限的螢幕,若把它關閉了,等一下用它時又要去開啟。其實你只要按一下F4鍵,所有浮動面板都不見,再按F4他們又都重現於螢幕上了。
**********************************************************
**********************************************************
8. 快速預覽網頁
初學Dreamweaver,往往找不到預覽選單,不得不另外啟動IE瀏覽器來預覽網頁的實際效果。其實Dreamweaver的預覽選單放到File選單下了,要預覽正在編輯的網頁,按F12鍵就可以了,方便得很呢!而且還可設定在不同的瀏覽器中預覽,在File選單下的Preview in Browser中選取Edit Browser List就可選取不同的瀏覽器進行預覽。以測試你的網頁對不同瀏覽器的適應性。
**********************************************************
**********************************************************
9. 在HTML檢示窗中顯示行號和自動換行
雖然Dreamweaver的Behaviors是一個java<I>script</I>小程式的巨集,許多實現特殊網頁效果的java<I>script</I>程式都不用動手寫程式,但有時需要編寫一點小程式時,顯示程式行號顯得尤為必要,特別是在程式發生錯誤時,往往都有是提示在「XX行有錯誤」,若一行一行地去數行號不僅太累而且還容易數錯,在FrontPage中老是為數錯行號而煩惱。在Dreamweaver中可方便了,只要在HTML源代碼檢視器視窗中,選中「Line Numbers」(行號)復選框,則會在源代碼檢視器視窗中對每條HTML語句自動顯示行號,一目瞭然。同樣有時一行代碼較長,只要在HTML源代碼檢視器視窗中,選中「Warp」(自動換行)復選框,則會啟用視窗的自動換行特性,過長的代碼會自動從視窗的邊緣繞回。
**********************************************************
**********************************************************
10. 如何獲得彩色的十六進位代碼
在設計網頁時,有時要用到16進位的彩色代碼,以前經常為這事頭痛,在Dreamweaver中只要按屬性面板上「bg」邊上小方框右下角的小三角形,在跳出的彩色板上,滑鼠指到哪兒,馬上就能顯示出相應彩色的16進位代碼,真方便。
**********************************************************
**********************************************************
11. 製作背景音樂
在Dreamweaver中插入背景音樂是非常容易實現的,這裡介紹兩種方法,由大家選取。
(1)在頁面不顯眼的地方插入一空層 ,並在層內放入一個ActivX物件 ,按兩下該對象,在開啟的對話框中選取一個MIDI音樂檔案,然後在層物件屬性面板中設定其可視性為「Hidden」,儲存變動後按F12預覽網頁,聽聽是否有音樂聲。
(2)另一種方法是利用Dreamweaver的「Behaviors」行為編輯器 ,點選「+」按鈕,選取其中「Play Sound」選項,在跳出的對話框中選取一個音樂檔案即可。自己動手試一試吧!
**********************************************************
**********************************************************
12. 讓背景圖不捲動
與FrontPage不同,Dreamweaver中插入的背景圖是會隨文字捲動的。有的時候我們需要製作固定的背景圖,怎麼辦呢?先定義一張背景圖,按「F10」開啟HTML源檔案,找到定義背景圖片的語句,例如background=〞images/background.JPG〞,在它的後面空一格加上一句bgproperties=〞fixed〞。預覽一下,是不是有點小小的成就感。
**********************************************************
**********************************************************
13. 定義大小不變的文字
為什麼別人網頁上的文字那麼漂亮,不管你怎麼按瀏覽器字型按鈕上的大小,他們的字型尺寸都不會發生變化。其實他們使用了網頁中的「CSS」型態表技術,在Dreamweaver中要實現這一功能是非常簡單的。首先按「F7」或是選取「視窗」選單中的「型態表」選項開啟型態表編輯器,在視窗中點選滑鼠右鍵選取「新增」,在跳出的對話框中輸入需要定義的型態表名稱,按「確定」,然後在清單中選取第一項「類型」,並給具體的文字屬性定義參數(一般來說文字的大小在800×600的螢幕中選取10.5較為適宜),按「確定」後,定義好的型態表就出現了。選取網頁編輯窗中的文字,點選新的型態表名,可以看到選中的文字發生的變化。預覽一下,試試定義的文字字型尺寸還會不會隨瀏覽器的選取字型大小而改變。
**********************************************************
**********************************************************
14. 插入Flash動畫
Macromedia公司的Flash動畫因其具有交互性、傳輸速度快等特點,已逐漸成為網頁製作的一項新武器,若果你的網頁上能插入一段Flash動畫,那麼一定會使你的作品增色不少。在Dreamweaver中插入Flash製作的SWF格式動畫十分容易,點選物件工具列上的Flash徽標或點選的「媒體」下的「Flash」,就可以開啟選取SWF動畫檔案的對話框了,選好檔案後可在其屬性面板中設定播放的參數,即大功告成。
**********************************************************
**********************************************************
15. 讓表格給網頁留白
在Dreamweaver的新網頁上輸入文字時,預設格式是頂天立地的,十分不美觀。要避免這一缺憾其實很簡單,只要大家用好表格工具就行了。具體做法是:在新頁面上插入一張齊中對齊的表格,為了能夠使表格方便控制,最好設定奇數列,並且數值不要太大。這樣在單元格內輸入的文字就被限制在一個可以隨意調整寬度的區域內,就不愁文字不聽使喚了。
**********************************************************
**********************************************************
16. 改變狀態列提示文字
一般情況下,當瀏覽器裝入一個頁面時,在其狀態列上顯示的是該頁面的位址名稱,十分呆板。你有沒有想過給瀏覽器的狀態列增加一點個性呢?若果有的話,那麼請按照以下的步驟,定制自己喜歡的文字吧!首先開啟「Behaviors」行為編輯窗,點選「+」按鈕,選取「Set Text Set」下的「Text Of Status Bar」選項,然後在方框中輸入自己的文字,例如「歡迎來到我的主頁」等,點選「確定」即可。
**********************************************************
**********************************************************
17. 整合的文字代碼編輯器
可視化網頁編輯軟體的最大不便之處就是很難對源代碼進行編輯,更別說java<I>script</I>了;不過Dreamweaver?將使你處理代碼變得異常輕鬆。這個內建的文字代碼編輯器主要的新功能是:自動縮排(可以一次選取多行進行縮排),?還可以進行符號的檢驗,若果在編寫代碼忘了一個「」,它將給出提示。在工具表中的下拉選單會列出目前網頁中所有自訂java<I>script</I>函數,可讓你在網頁原代碼中自由跳轉,「原始碼導航工具」可以讓專業人士方便地處理java<I>script</I>函數,在文字代碼編輯器中輸入java<I>script</I>代碼,系統將用不同的彩色來顯示。
**********************************************************
**********************************************************
18. 在Dreamweaver中輸入多個空格
我們平時輸入的空格是半角字元,在Dreamweaver中只能輸入一個,要想輸入多個空格只要輸入全角空格就可以了。輸入全角空格的方法是:開啟中文輸入法,按Shift+Space切換到全角狀態。這時你輸入的空格就是全角空格了。
**********************************************************
**********************************************************
19. 解決Dreamweaver的BUG之一
在Dreamweaver 3.0中行為面板(Behavior inspector)中,「Events for」下拉選單項無法開啟。這樣一來,很多特技效果形同虛設,根本沒法製作。其實這應該算Dreamweaver 3.0和中文Windows98不相容的一個地方吧,在英文Windows98中就沒有這個問題。而實際上這個選單還是可以開啟的,只不過是不能正確顯示罷了。在選中下拉選單後,我們可以用上下鍵來選取我們想要用的瀏覽器。
**********************************************************
**********************************************************
20. 用Dreamweaver 3.0的模版製作網頁,設定行為(Behavior)
在使用範本(Template)做出來的網頁中不能新增行為。這是因為新增行為需要在HTML檔案的Head部分之中插入java<I>script</I>,而使用了Template後,HTML檔案的Head部分會被「封鎖」住。若果要在使用範本生成的網頁中套用行為,你就需要事先在範本中定義好行為,然後把它定義為範本的可編輯區域。隨後,你就可以在網頁中變更這個行為了。但這也只限於變更行為的觸發事件(events)和動作(actions)的具體內容,而不能變更動作的類型。
**********************************************************
**********************************************************
21. 給文字施加行為(Behavior),製作動態文字特效
在Dreamweaver中普通的文字是以字元為單位的,不能作為對象,即一些非常有用的java<I>script</I>事件不能賦予文字。因為文字不像圖片和其他控件有具體的「標示」,所以文字與很多特效失之交臂。為了給文字加入特效,只有把文字做成超連結來處理。這樣文字就成為了對象,可以施加行為了。但是這樣又帶來了一些不需要的超連結屬性,比如下劃線,以及hover、visited等彩色變化。 要想單純為文字加入特效,可以先把所想設定的文字做成超連結,然後再在它的上面加入行為,最後我們再把超連結轉變為普通文字。具體的步驟如下:
選中你想編輯的文字,在連結目的框裡隨便填入幾個字元。選中這個連結,點選視窗(Windows)→行為(Behaviors),跳出行為面板。按下「+」加入你想要的行為,如play sound等。開啟Dreamweaver的超文字編輯器,找到這個連結,把<a>改為<font>,把</a>改為</font>。最後把「href=...」刪掉。儲存此頁。按F12預覽一下。效果還不錯吧!
**********************************************************
**********************************************************
22. 精確定位網頁中各個元素的位置
精確定位網頁中各個元素的位置有兩種方法:使用表格或層。使用表格是目前比較通用的做法,具體方法是:先在網頁中建立一個表格,注意表格的邊框寬度應為0。然後再把各個元素按照你的要求放在各個表格單元之中。仔細調整表格單元的大小以及表格邊框的位置,這時在表格單元中的元素也會隨之移動位置。這樣你就可以比較精確地定位網頁中各個元素的位置了。使用表格的優點是通用,幾乎各個版本的瀏覽器可以致支援表格。它的缺點是使用起來比較麻煩,需要仔細進行調整,而且定位不十分精確。層在網頁中可以隨意放置,因此我們可以使用層來進行精確定位。使用方法是,在網頁中插入一個層,然後把你想要定位的元素放在層裡,接著我們就可以把層放到所想要任何位置了。此外,你還可以借助標尺和網格進行精確的定位。因為層只在最新的瀏覽器中被支援,所以為了相容舊的瀏覽器,我們可以把層轉變為表格。方法是選取「修改(Modify)→版面佈局模式(Layout Mode) →把層轉化成表格(convert layers to table)」即可。注意這時的層不能有重疊,我們可以在插入層之前選取「檢視(view) →防止層交錯(prevent layer overlaps)」來避免層的重疊。一般來說轉換後的頁面可能會有一些變化,還需要我們手動進行調整。最後有一點要注意,在進行表格和層的相互轉換時,最好不要在一個頁面中同時使用層與表格,那樣可能會把你的頁面弄得一團糟
23. 改變瀏覽者的滑鼠形狀
這是通過編輯型態表來實現的。具體方法是:選取「文字(text)→定制型態(CSS Style)→編輯型態表(Edit Style Sheet)」,跳出編輯型態表視窗,在其中選取「新增(new)」。接著選取「建立一個定制的型態(Make custom style)」,給這個型態表起名,點選確定。編輯該型態表,選取延伸項(extension),在右邊的游標項(Cursor)中選取要出現的指標效果即可。
**********************************************************
**********************************************************
24. 去掉超連結文字之下的下劃線
這一效果是通過編輯型態表來實現的。具體方法是:「點擊文字(text)→定制型態(CSS Style)→編輯型態表(Edit Style Sheet)」,出現編輯型態表視窗,選取「新增(new)」。接著選取重定義HTML標示(Redefine HTML Tag),並在下面的標示(Tag)選單中選取a。編輯該型態表,選取類型(type),在右邊的裝飾(decoration)中選中無(none )即可。
**********************************************************
**********************************************************
25. 製作一個跟著頁面走的圖像
這一效果是通過java<I>script</I>實現的。一般來說完成這樣一個效果需要一定的寫程式能力,但現在我們可以通過Dreamweaver的外掛輕易地實現。你可以到http://www.computerinfo.com.cn/class...��可以了。
**********************************************************
**********************************************************
26. 製作滑鼠移上去後有變化的動態選單
所謂動態選單其實是兩幅圖,一幅是滑鼠不放在上面所顯示的,另一副是滑鼠移上去所顯示的。我們可以利用Dreamweaver提供的行為之中的swap image來實現這個效果。首先插入一副圖片,用滑鼠點選它,在屬性面版的連線欄內輸入要連線的網頁。然後開啟行為面板添,點擊「+」號,選取swap image。接著出現一個視窗,要你選取滑鼠移上去後所顯示的圖片,在此選取第二副圖片,點擊「確定」。好了,效果完成了,多簡單。
**********************************************************
**********************************************************
27. 用Dreamweaver製作出一個類似於下拉選單的效果
製作一個類似於下拉選單的效果需要用到層的隱藏和顯示特性。具體的方法是:在頁面中插入一個單行多列的表格,作為你的選單條。表格的列數由選單選項的多少決定。插入一個層,在層中輸入第一個下拉選單的內容,並把這個層移動到表格第一列的下面。同理,對其他選單項也作如上的動作,插入相應的層。把所有層的顯示屬性(vis)改為隱藏(Hidden)。
選取表格的第一個單元,點選視窗(Windows)→行為(Behaviors),跳出行為面板。按下「+」加入行為Show-Hide layers,並將第一個層(Layer1)屬性改為顯示(Show),其他層的屬性改為隱藏(Hide)。接著在行為面板中編輯這個行為,將它的觸發事件(events)改為<I>onMouse</I>over。這樣,當滑鼠移動到第一個表格單元之上時,第一個下拉選單就會顯示出來。接著再加入一個行為Show-Hide layers,並將所有層的屬性改為隱藏。接著在行為面板中編輯這個行為,將它的觸發事件(events)改為<I>onMouse</I>out。這樣當滑鼠從第一個表格單元之上移開時,第一個下拉選單就會隱藏起來。對其他的選單項重複上述動作。但要注意設定「選單二」時,第二層顯示,其他層隱藏;設定「選單三」時,第三層顯示,其他層隱藏;依此類推下去。好了,做好了,按F12看看吧。
**********************************************************
**********************************************************
28. 輕鬆製作下載檔案
用Dreamweaver其實很簡單,把要讓瀏覽者下載的檔案名寫上,然後拖曳滑鼠選取這段文字,在文字的屬性面板上「Link」的屬性輸入框中寫上檔案名就行了。注意:若被下載的檔案與該網頁不在同一目錄下,則檔案名必須包括相對路徑,否則在下載時將提示找不到檔案。
**********************************************************
**********************************************************
29. 利用Dreamweaver的書籤製作跳轉連結
利用Dreamweaver的書籤我們可以實現這個功能。具體方法是:將游標移到你想跳轉到的地方,選取選單中的「插入(Insert)→書籤(Name Anchor)」,輸入書籤的名稱。接下來,在你想呼叫連結的連結目的框中填入「#書籤名稱」,這樣一個頁面內的跳轉連結就做好了。在這裡,若果我們在書籤名稱前填入網頁的名稱,就會跳轉到其他頁面中的書籤處。 比如說我們在Link處填入「index.htm#top」,當瀏覽者點擊這個連結時就會跳轉到index頁面中的top書籤處。
**********************************************************
**********************************************************
30. 去掉圖片和表格接觸地方的空隙
要使圖片和表格接觸的地方不留空隙,僅在表格屬性面板上把外框線(border)設為0是不行的,還需要在表格的屬性面板上把單元格的兩個屬性設為0(即cellspacing="0"和cellpadding="0")。
**********************************************************
**********************************************************
31. 用TracingImage幫助定位網頁中各元素的位置
TracingImage是Dreamweaver一個非常有效的功能,它容許使用者在網頁中將原來的圖案設計作為輔助的背景。這麼一來,使用者就可以非常方便地定位文字、圖像、表格、層等網頁元素在該頁面中的位置了。TracingImage的具體使用是這樣的:首先使用各種繪圖軟體作出一個想像中的網頁排版格局圖,然後將此圖儲存為網路圖像格式(內含gif、jpg、jpeg和png)。用Dreamweaver開啟你所編輯的網頁,在頁面的空白區點選右鍵,選取「Page Properties...」,然後在跳出的對話框中的Tracing Image項中輸入剛才建立的網頁排版格局圖所在位置。再在Image Transparen中設定TracingImage的透明度,OK。這樣你就可以在目前網頁中方便地定位各個網頁元素的位置了。使用了TracingImage的網頁在用Dreamweaver編輯時不會再顯示背景圖案,但當使用瀏覽器瀏覽時正好相反,TracingImage不見了,所見的就是經由編輯的網頁(當然能夠顯示背景圖案)。
**********************************************************
**********************************************************
32. 關於「Convert Table widths to Pixels」和「Convert Table widths to Percent」
「Convert Table widths to Pixels」和「Convert Table widths to Percent」是Dreamweaver兩個設定表格寬度的重要功能。當你開啟一個帶有表格的網頁時,在狀態列中點中〈table〉標籤,在隨後顯示出的表格屬性工具面板中就能看到這兩個按鈕了。顧名思義「Convert Table widths to Pixels」就是將表格中所有單元的寬度以像素表示,而「Convert Table widths to Percent」是將表格中所有單元的寬度以百分比表示。仔細想想他們的作用,若果將一個表格的寬度全以像素表示,但瀏覽視窗被放大時,表格就不會隨之放大單元格的寬度。而使用了「Convert Table widths to Percent」後能夠使你在640×480解析度下建立的100%寬的表格在更高的解析度下依舊保持100%的寬度。所以活用這兩個功能可以使網頁排版事半功倍。
**********************************************************
**********************************************************
33. 呼叫Style而不致使網頁原代碼混亂不堪
呼叫Style的方法很多,你可以點選右鍵選取Custon Style來呼叫Style規範,也可以在狀態列中的元素清單上點選右鍵來呼叫Style。雖然不同的方法達到的效果看似一樣,但實際上產生的HTML代碼則完全不同。比如用Custon Style來呼叫Style規範,在網頁代碼中就生成一個〈span〉標籤,這樣標籤一多就會使檔案十分臃腫而且影響瀏覽器的解析速度,所以我建議盡量使用狀態列中的元素清單來呼叫Style。還有一個小技巧,若果你要使用一個Style定義某表格單元中的所有文字,只要在〈td〉標籤中呼叫Style就行了,而不需要在一個個定義〈p〉標籤。注意這個方法不適用於〈table〉標籤,因為在〈table〉標籤中用Style定義的文字格式會被Netscape忽略。
**********************************************************
**********************************************************
34. 使用定制視窗功能測試網頁在不同解析度下的效果
誰都不希望看見自己辛辛苦苦做的網頁在不同的解析度下面目全非,所以測試網頁在不同解析度下的瀏覽效果是網頁製作中很重要的一步。我們可以在Dreamweaver的動作界面中的狀態列中間,選取需要的解析度來調節視窗大小,從而實現在不同解析度下測試網頁效果。
**********************************************************
**********************************************************
35. 上傳網站時無需使用第三方FTP軟體
Dreamweaver中融入了FTP功能,而且為網站上傳作了最佳化。我們可以做一個簡單的比較,當你使用一般的FTP軟體上傳網站時,是不是都按近端機上的網站目錄在伺服器中新增目錄,然後再一個個檔案上傳。這種做法實在沒錯,但由於近端機中的網站目錄中並不是每個檔案都被網頁呼叫(比如在建網頁時留下的備份檔案),所以篩選檔案的繁重工作量只有使用者自己知道。但使用Dreamweaver上傳網頁就可以方便得多,由於FTP功能在幕後為使用者進行了許多必要的工作,所以使用者只要將網站地圖內關聯的HTML檔案上傳,Dreamweaver就會自動將與此HTML檔案關聯的所有其他近端檔案一併上傳(如圖像、ZIP檔案、FLASH檔案甚至是各種REAL檔案)。使用Dreamweaver內帶的FTP功能的具體做法是:編輯已經定義過的SITE,在「Site Definition for...」面板中選取「Web Server Info」。若果網頁是通過FTP模式上傳的話,將「Server Access」設為FTP,在FTP Host中添入FTP伺服器的位址,在Host Directory中添入遠端登入目錄,在Login中添入使用者名,再填好Password。經由了以上的設定,就可以在Site面板中按Connect按鈕,當Dreamweaver成功連入伺服器後,Connect按鈕會自動變為Disconnect,並且在一旁亮起一個小綠燈。接著要做的事就是在要上傳的HTML檔案上點選右鍵,選取「Put」即可。當此HTML檔案上傳成功後,狀態條中將顯示Put Depanding File,說明Dreamweaver正在上傳這個HTML檔案所呼叫的其他近端檔案。不僅如此,Dreamweaver還可以直接下載伺服器上的檔案進行修改,方法麼,只要使試試Put旁的Get按鈕就明白了。
**********************************************************
**********************************************************
36. 實現用滑鼠指向連結時出現下劃線的效果
有些網頁的連結,原先沒有下劃線,你把滑鼠指向連結處,才會出現下劃線,滑鼠移掉下劃線就又沒有了。這種效果其實可以用層疊型態表(CSS)來實現,在Dreamweaver中編輯層疊型態表不用編寫代碼,具體動作方法如下:
(1)在快速啟動欄中點擊層疊型態表按鈕(就是把滑鼠放上去顯示「show css styles」的那個按鈕),在跳出的CSS Styles面板上按兩下(none);
(2)此時,可看到跳出的Edit Style Sheet 面板,在該面板上按New按鈕;
(3)再在跳出的New Style 面板上點取Redefine HTML Tag(重新定義HTML標示)再在Tag中選取「a」(超級連結標示)標示後按OK按鈕;(4)這時可看到跳出的Style dehinition for a 的對話框,在此對話框中可以設定超級連結的許多屬性,你可以按你的意願設定,但我們這裡主要是要去掉那討厭的下劃線,所以我們在decoration 屬性中選取「none」,這樣就把下劃線去掉了;然後我們再選取彩色為:#339966。按OK按鈕返回到Edit Style Sheet 面板;
(5)在Edit Style Sheet 面板上再按New按鈕;
(6)在跳出的New Style 面板上點取Use CSS Selector ,再在該面板上的selector選取框中選取「a:hover」(定義當滑鼠在超級連結上時連結的屬性),按OK按鈕;
(7)在跳出的Style dehinition for a:hover 的對話框中,我們在decoration 屬性中選取「underline」,這樣就把下劃線又加上了;然後我們再選取彩色為:#FF3300。按OK按鈕返回到Edit Style Sheet 面板;
(8)在Edit Style Sheet 面板上再按Don按鈕,至此所有設定結束,你在Dreamweaver的源代碼檢視窗中將看到在<head>與</head>之間如下所示的代碼:
<style type="text/css">
<!--
a { color: #339966; text-decoration: none}
a:hover { color: #FF3300; text-decoration: underline}
-→
</style>
37. 實現定義的超級連結文字彩色
文字超級連結的彩色(內含未被訪問的連結彩色、滑鼠的連結上的彩色、已被訪問過的連結彩色等等)可以用層疊型態表(CSS)定義,下面就介紹如何能隨心所欲地設定文字連結的彩色。
(1)超級連結的預設彩色是:未被訪問的超級連結是藍色、被訪問過的超級連結是紫色;
(2)要想使CSS定義的彩色起作用,在超級連結的文字的彩色屬性中什麼都不要填;
(3)若你已定義了文字的彩色,發現CSS中定義的超級連結彩色不起作用,你可以取消文字的彩色定義,或取消超級連結再重新定義一次,CSS定義的彩色就起作用了;
(4)超級連結上各種狀態下文字彩色的關係:一旦定義了被訪問過的連結的彩色(A: visited),則當連結被訪問過後,該連結的彩色不再改變,即定義滑鼠在超級連結上的彩色(a: hover)將不起作用了。若不定義被訪問過的連結的彩色(A: visited),則當滑鼠在超級連結上顯示a: hover 中定義的彩色,當滑鼠移開時顯示a 中定義的彩色。
從上述可以看出,文字連結的彩色實際上只能在兩種彩色之間變換,並沒有像有些文章中講的那樣可以在多種彩色之間變換,但由於用那兩種彩色可以任意,所以應該講彩色的選取範圍還是比較大的。
**********************************************************
**********************************************************
38.在Dreamweaver中把圖形放在最中間
點擊選取圖形,在圖形的屬性面板的右上角Align(對齊屬性)邊上有個下拉框,在下拉框中選取,則文字在圖片四周繞排。若是單獨圖片在中間,則在圖像面板上點取齊中屬性即可。
**********************************************************
**********************************************************
39.如何使用Behaviors 功能,而又不連結到任何地方去
選取要作為超級連結的元素(一幅圖片或一段文字),在屬性面板上的位址欄(Link)中不填寫任何連結位址,只加上一個「#」號,(引號不內含在內)。這樣即可以使用Behaviors 功能,而又不連結到任何地方去了。
**********************************************************
**********************************************************
40.實現在一張(較大)圖片上做出幾個不同的連結
在Dreamweaver中,這就是使用所謂的設定「圖像熱區域」。先選中圖像,然後在圖像屬性面板上有一個「Map」工具列,在其下方有三個淡藍色的工具圖示,即「矩形」、「圓形」或「多邊形」,你可以根據需要選取一個(用滑鼠點一下就行),再把滑鼠移圖像上,按下滑鼠左鍵,拖曳滑鼠就畫出了一塊淡藍色的區域(不用擔心這塊淡藍色區域會破壞你的圖像,在瀏覽器中是不顯示的),這時你在屬性面板上把需連結的網頁位址添上就行了。你需要幾個連結就畫幾塊區域,隨你的便。
**********************************************************
**********************************************************
41. 製作目錄樹
在總目錄的前方有一個「+",一按這個「+",即可顯示其下子目錄,「+"即變成「-",一按「-",即可隱藏其下子目錄,就像在資源管理器中一樣,這需要做二個頁面,一個頁面寫上總目錄,一個頁面寫上子目錄。把總目錄的頁面上的「+」號設定成超級連結,在「Link」欄中添上子目錄頁面的位址。把子目錄的頁面上的「-」號設定成超級連結,在「Link」欄中添上總目錄頁面的位址。具體效果可看一看Dreamweaver的幫助文件,在這幫助文件裡也是按一下總目錄,跳出子目錄,按下子目錄上的總目錄則返回到總目錄,只是沒用「+」、「-」表示而已。你再看一下該文件的源代碼就一目瞭然了。
**********************************************************
**********************************************************
42. 在Dreamweaver中輕鬆設定行間距
用層疊型態表(CSS)來實現,在Dreamweaver中編輯層疊型態表不用編寫代碼,具體動作方法如下:
(1)在快速啟動欄中點擊層疊型態表按鈕(就是把滑鼠放上去顯示「show css styles」的那個按鈕),在跳出的CSS Styles面板上按兩下(none);
(2)此時,可看到跳出的Edit Style Sheet 面板,在該面板上按New按鈕;
(3)再在跳出的New Style 面板上點取Redefine HTML Tag(重新定義HTML標示),再在Tag中選取「body」標示後按OK按鈕;
(4)這時可看到跳出的Style dehinition for body 的對話框,在此對話框中可以設定「body」標示的許多屬性,你可以按你的意願設定,但我們這裡主要是要設定行距,所以我們在line屬性輸入框中填上行距的像素點數,現在流行的九號字,行距一般用12,按OK按鈕返回到Edit Style Sheet 面板,此時已把「body」的行距設定好了;
(5)由於「body」中定義的行距對表格不起作用,所以我們再在Edit Style Sheet 面板上再按New按鈕;
(6)再在跳出的New Style 面板上點取Redefine HTML Tag(重新定義HTML標示)再在Tag中選取「td」標示後按OK按鈕;
(7)在跳出的Style dehinition for td 的對話框中設定td的行距,按OK按鈕返回到Edit Style Sheet 面板;
(8)在Edit Style Sheet 面板上再按Don按鈕,至此所有設定結束,你在Dreamweaver的源代碼檢視窗中將看到在與之間如下所示的代碼:<style type="text/css">
<!--
body { line-height: 12pt; font-size: 9pt}
td { font-size: 9pt; line-height: 12pt}
-→
</style>
有了這段代碼,你在該網頁上的所有文字的行距都確定好了,若不滿意,可修改設定。

43. 如何設計能使瀏覽者在瀏覽時對網頁字型大小的設定不起作用
用CSS層疊型態表對字型進行強制性控制(像素)。
**********************************************************
**********************************************************
44. 實現網頁每過五分鐘刷新一次的效果
在Dreamweaver的功能面板上選取「head」功能群組面板,在這面板上點擊「Refresh」功能圖示,在跳出的「Insert refresh」對話框中,在「Delay」中輸入要刷新的間隔時間,以秒計,例:隔五分鐘刷新一次,則輸入300即可。再在該對話框上選取「Refresh This Document」(刷新目前視窗),按OK,大功告成。當你再次瀏覽該網頁時,它將自動地隔五分鐘刷新一次。
**********************************************************
**********************************************************
45. 解決用IE預覽標準的連結網頁,上傳到網站卻看不見的現象
把網頁的所有檔案名統一成小寫(或大寫),再上傳就行了。因為很多伺服器使用的是UNIX動作系統,它對大小寫是很敏感的,也就是說大寫的檔案名和小寫檔案名它認為是兩個檔案,你在上傳時必須注意大小寫。另外要注意:超級連結要使用相對路徑,不要用絕對路徑,也不要用中文檔案名。
**********************************************************
**********************************************************
46. 製作新開一個視窗開啟網頁的超級連結(即原來的網頁不被覆蓋)
在Dreamweaver中,在該連結的屬性面板上把「target(目的)」設定為「_blank」即可。
**********************************************************
**********************************************************
47. 隱藏不必要的標籤
當使用者在網頁中插入了不可見的元素時,Dreamweaver會自動在頁面上加入一個與之相應的元素標籤,以便於使用者選取不可見元素。但這並不全是件好事,比如你在一個有很多層的頁面中的第一行便插入一個表格,就會發現由於首行排序了太多的層元素標籤而使得表格自動退到了頁面的第二行,雖然在瀏覽時並不影響效果,但這確確實實會阻礙你的工作。所以當你覺得某個元素標籤礙手礙腳時,就索性將之屏蔽掉。方法是按Ctrl+U開啟Preferences面板,在Category中選中Invisibel Elements,在面板的右邊將會出現所有的元素標籤。只要將你討厭的元素標籤前的勾去掉,以後它就保證不會再出現了。
**********************************************************
**********************************************************
48. 解決表格緊貼左上方的問題
對這個問題有幾種解決方法。
(1)按下Ctrl+J,跳出Page Properties,將Left、 Top、 Margin Width、 Margin Height 全部設為0。
(2)把下面一段代碼加到你的<body>中:topmargin="0" leftmargin="0" ,這個方法只適用於IE。
(3)加入下面代碼:<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" >,這個方法適用於Netscape
**********************************************************
**********************************************************
49. 在Dreamweaver中將圖設為透明alpha設定
<html>
<head>
<title>css</title>
<<I>meta</I> http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type=text/css>
.pic{filter:alpha(opacity=50)}
</style>
</head>
<body bgcolor="#FFFF00" text="#000000">
<img src="0008.jpg" width="303" height="385" class="pic">
</body>
</html>
**********************************************************
**********************************************************
50. 設定表格虛線
(1)作一個1X2的圖,半黑半白,再利用表格做成線。
(2)在css裡面設:在css面板裡新增一個style,選取「redefine HTML Tag」,再在下拉選單裡選「table」,在接下來的面板裡,category裡選取border。在border裡,將top、left、right、bottom都設成1像素,彩色設成你將來想要的邊框的彩色。到style下拉選單裡選取dashed就可以了,只是所有的表格都會用虛線做邊框了。
(3)若果你只想讓某一個表格邊框是虛線的話就在html裡設。在表格的html裡加上這個:
style="BORDER-LEFT: #000000 1PX DASHED; BORDER-RIGHT: #000000 1PX DASHED; BORDER-TOP: #000000 1PX DASHED; BORDER-BOTTOM: #000000 1PX DASHED"。彩色是十六位代碼,你可以自己設。方法2、3只能在IE瀏覽器裡用,到了Netscape裡一點用處都沒有,除非你用做好的底圖填充。
**********************************************************
**********************************************************
51. 在Dreamweaver中使插入的FLASH透明
選中插入的swf檔案,開啟原代碼視窗,在</object>前輸入<param name="wmode">
**********************************************************
**********************************************************
52. Dreamweaver4中設定表格亮邊框和暗邊框
做一個像素寬度有彩色的表格線
(1)將表格邊框 border設定為0,Cell space設定為0,Cell padding設定為0。
(2)開啟型態面板新增一個型態。選取Border設定邊框屬性 。
(3)選中整張表格套用這個型態即可。
**********************************************************
**********************************************************
53. 隱藏表格的分隔線
<table border rules=cols cellspacing=0 align=left> 可以隱藏橫印的分隔線
<table border rules=rows cellspacing=0 align=right>可以隱藏直印的分隔線
<table border rules=none cellspacing=0 align=center>可以隱藏橫印和直印的分隔線
**********************************************************
**********************************************************
54. 如何選取被遮蓋或隱藏的層
當層被重疊使用時,大層會把小層遮蓋住;當選取了層的隱藏屬性,該層就看不見了。當你想對這些層動作時,怎麼辦?按F11鍵顯示層面板,所有層號均在上面,要哪層選取哪層就行了。
**********************************************************
**********************************************************
55. 在層(或表格中)上編輯文字時自動換行
層在用Dreamweaver設計網頁時被大量採用,但當你在層上輸入大段文字時發現不會自動換行,無論你怎樣設定層的寬度均無濟於事,當然你可以用按「SHIFT+ENTER」來換行。但是這樣當你調整層的寬度時又不得不一個一個地去刪除它,再又在另一位置加上它,其實有三種方法可以解決這個問題:
(1)在層疊式樣表*.CSS中「DIV」的式樣定義中加上字型的定義;
(2)在網頁源代碼的層定義中加上字型的定義;
(3)選取該段文字,在文字的屬性面板上定義字型。
上述三種方法任選一種都行,但以第一種較好,因為只要改動一次,此後只要是呼叫該層疊式樣表的網頁中的所有層都有能自動換行了,豈不是一勞永逸。表格同樣存在上述問題,解決方法相同,只是在層疊式樣表中在「TD」的式樣定義中加上字型的定義。
**********************************************************
**********************************************************
56. 在Dreamweaver中輸入上下標
若果只是要上下標的話,可以用<SUB></SUB>和<SUP></SUP>。 手動加進去就可以了。
**********************************************************
**********************************************************
57. 去掉連結的下劃線
將以下代碼加入<head> </head>之間
<style type="text/css">
<!--
a:link{text-decoration:none}
a:hover{text-decoration:none}
a:visited{text-decoration:none}
-→
</style>


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 chyuanyiin 的頭像
    chyuanyiin

    PCTOP 銓尹行銷顧問有限公司 CHYUANYIIN 的談天說地溫馨小窩

    chyuanyiin 發表在 痞客邦 留言(0) 人氣()