dreamweaver技巧

 
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. 讓DreamweaverMX4.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是一個javascript小程序的巨集,許多實現特殊網頁效果的javascript程序都不用動手編程,但有時需要編寫一點小程序時,顯示程序行號顯得尤爲必要,特別是在程序發生錯誤時,往往都有是提示在“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. 整合的文本代碼編輯器

  可視化網頁編輯軟件的最大不便之處就是很難對源代碼進行編輯,更別說JavaScript了;不過Dreamweaver?將使你處理代碼變得異常輕鬆。這個內建的文本代碼編輯器主要的新功能是:自動縮排(可以一次選取多行進行縮排),?還可以進行符號的檢測,如果在編寫代碼忘了一個“”,它將給出提示。在工具表中的下拉菜單會列出當前網頁中所有自定義JavaScript函數,可讓你在網頁原代碼中自由跳轉,“原始碼導航工具”可以讓專業人士方便地處理JavaScript函數,在文本代碼編輯器中輸入JavaScript代碼,系統將用不同的顏色來顯示。

  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部分之中插入JavaScript,而使用了Template後,HTML文件的Head部分會被“封鎖”住。如果要在使用模板生成的網頁中應用行爲,你就需要事先在模板中定義好行爲,然後把它定義爲模板的可編輯區域。隨後,你就可以在網頁中更改這個行爲了。但這也只限於更改行爲的觸發事件(events)和動作(actions)的具體內容,而不能更改動作的類型。

    21. 給文字施加行爲(Behavior),製作動態文字特效

    在Dreamweaver中普通的文字是以字符爲單位的,不能作爲對象,即一些非常有用的JavaScript事件不能賦予文字。因爲文字不像圖片和其他控件有具體的“標記”,所以文字與很多特效失之交臂。爲了給文字添加特效,只有把文字做成超鏈接來處理。這樣文字就成爲了對象,可以施加行爲了。但是這樣又帶來了一些不需要的超鏈接屬性,比如下劃線,以及hover、visited等顏色變化。 要想單純爲文字添加特效,可以先把所想設置的文字做成超鏈接,然後再在它的上面添加行爲,最後我們再把超鏈接轉變爲普通文字。具體的步驟如下:

  選中你想編輯的文字,在鏈接目標框裏隨便填入幾個字符。選中這個鏈接,單擊窗口(Windows)→行爲(Behaviors),彈出行爲面板。按下“+”添加你想要的行爲,如play sound等。打開Dreamweaver的超文本編輯器,找到這個鏈接,把改爲,把改爲。最後把“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. 製作一個跟着頁面走的圖像

  這一效果是通過JavaScript實現的。一般來說完成這樣一個效果需要一定的編程能力,但現在我們可以通過Dreamweaver的插件輕易地實現。插件的安裝方法:解壓縮後拷貝到Dreamweaver下的文件夾Configuration\Objects內的一個新建文件夾裏面即可。重新啓動Dreamweaver之後,我們就可以在對象面板之中找到新安裝的插件了。點擊插件的圖標,在彈出的對話框中填入圖像的存放地址以及圖像的顯示位置就可以了。

   26. 製作鼠標移上去後有變化的動態菜單

  所謂動態菜單其實是兩幅圖,一幅是鼠標不放在上面所顯示的,另一副是鼠標移上去所顯示的。我們可以利用Dreamweaver提供的行爲之中的swap image來實現這個效果。首先插入一副圖片,用鼠標單擊它,在屬性面版的連接欄內輸入要連接的網頁。然後打開行爲面板添,點擊“+”號,選擇swap image。接着出現一個窗口,要你選擇鼠標移上去後所顯示的圖片,在此選擇第二副圖片,點擊“確定”。好了,效果完成了,多簡單。

  27. 用Dreamweaver製作出一個類似於下拉菜單的效果

  製作一個類似於下拉菜單的效果需要用到層的隱藏和顯示特性。具體的方法是:在頁面中插入一個單行多列的表格,作爲你的菜單條。表格的列數由菜單選項的多少決定。插入一個層,在層中輸入第一個下拉菜單的內容,並把這個層移動到表格第一列的下面。同理,對其他菜單項也作如上的操作,插入相應的層。把所有層的顯示屬性(vis)改爲隱藏(Hidden)。

    選擇表格的第一個單元,單擊窗口(Windows)→行爲(Behaviors),彈出行爲面板。按下“+”添加行爲Show-Hide layers,並將第一個層(Layer1)屬性改爲顯示(Show),其他層的屬性改爲隱藏(Hide)。接着在行爲面板中編輯這個行爲,將它的觸發事件(events)改爲onMouseover。這樣,當鼠標移動到第一個表格單元之上時,第一個下拉菜單就會顯示出來。接着再添加一個行爲Show-Hide layers,並將所有層的屬性改爲隱藏。接着在行爲面板中編輯這個行爲,將它的觸發事件(events)改爲onMouseout。這樣當鼠標從第一個表格單元之上移開時,第一個下拉菜單就會隱藏起來。對其他的菜單項重複上述操作。但要注意設置“菜單二”時,第二層顯示,其他層隱藏;設置“菜單三”時,第三層顯示,其他層隱藏;依此類推下去。好了,做好了,按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按鈕,至此所有設置結束。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章