首頁(yè) > 設計 > 軟件應用 > 正文

Dreamweaver 簡(jiǎn)介

2018-10-16 21:05:32
字體:
來(lái)源:轉載
供稿:網(wǎng)友

Dreamweaver是由Macromedia公司出品的所見(jiàn)即所得式網(wǎng)頁(yè)編輯器,它同Microsoft出品的FrontPage一同被稱(chēng)為網(wǎng)頁(yè)設計的兩大利器。至于說(shuō)這兩種軟件孰優(yōu)孰劣,那就是仁者見(jiàn)仁、智者見(jiàn)智了,我在這里也不好評論。但是根據我的觀(guān)察,專(zhuān)業(yè)的網(wǎng)頁(yè)制作人員似乎使用Dreamweaver的更多一些,大家明白我的意思了吧:)

  現在Dreamweaver的最新版本是3.0。與以前的版本相比,Dreamweaver 3.0增加了許多全新的功能,如History、MetaNotes、HTML Style、Quick Tag Editor等。此外,Dreamweaver 3.0對一些新的技術(shù)如DHTML,JAVA也有了更好的支持。靈活的運用Dreamweave的各項功能,我們能創(chuàng )造出令人眼花繚亂的動(dòng)態(tài)網(wǎng)頁(yè)。下面,我將制作通過(guò)一個(gè)實(shí)例,帶領(lǐng)大家熟悉Dreamweaver的各項功能。

  首先,讓我們制作一個(gè)普通的圖文并茂的網(wǎng)頁(yè)(其實(shí)也就是有文字、有圖片就行了)。想大家這點(diǎn)還會(huì )做吧,我就不講了。什么?你不會(huì )!其實(shí)很簡(jiǎn)單了,就跟使word一樣,直接往上敲字就行了,貼圖片用Insert -> Image就行了。

  現在,我們就擁有了一個(gè)最簡(jiǎn)單的網(wǎng)頁(yè)了。雖然它還是十分的簡(jiǎn)陋,但我們已經(jīng)走出了網(wǎng)頁(yè)設計的第一步。大家所做的第一個(gè)網(wǎng)頁(yè)也應該和這個(gè)差不多吧。接下來(lái),我們將在這個(gè)網(wǎng)頁(yè)的基礎上增加其它的內容,使它看起來(lái)漂亮一些。

  我們在做網(wǎng)頁(yè)的時(shí)候,是不是覺(jué)得排版十分的麻煩呢?為了對齊一篇文章或者一幅圖,我們往往要調整好多次。其實(shí)我們利用表格,就可以輕松的排版了。選擇Insert -> Table,彈出一個(gè)對話(huà)框。(如圖1)

  輸入你想要的表格行數和列數。最重要的一點(diǎn)是要在Border處填0,這樣表格的邊框寬度將為0,換句話(huà)說(shuō),就是表格的邊框是隱藏不可見(jiàn)的。這樣,Dreamweaver生成了一個(gè)缺省大小的表格。我們調整表格的寬度和高度,并將一部分單元合并,使表格適應我們的要求。(如圖2)

  接著(zhù),我們就可以在表格中填上我們想要的東西,而它們的位置都被限定在了表格單元里。因此,排版的困難也就迎刃而解了。讓我們看一下排版后的效果吧,是不是比較好看?(如圖3)

  然而,雖然使用表格來(lái)進(jìn)行排版比較方便,但它還有一定的不便之處:我們要事先把整個(gè)的頁(yè)面設計畫(huà)出來(lái),然后統一的對表格位置進(jìn)行安排;此外,當我們對頁(yè)面布局不滿(mǎn)意時(shí),進(jìn)行調整也是一件非常麻煩的工作。我們知道使用層能夠更方便、精確地定位頁(yè)面元素。所以,我們可以利用層來(lái)進(jìn)行排版。對于不支持使用層的較低版本的瀏覽器,我們可以利用Dreamweaver提供的轉換工具,先用層來(lái)快速創(chuàng )建復雜頁(yè)面布局,然后再把層布局轉換成表格布局。需要時(shí),也可以在層和表格之間來(lái)回轉換,以調整布局和優(yōu)化頁(yè)面設計。

    讓我們用層來(lái)重新設計我們的頁(yè)面。選擇Insert ->Layer創(chuàng )建三個(gè)層,然后將它們拖到合適的位置,并在其中插入相應的內容。另外,因為表格單元不能重疊,所以,Dreamweaver 不能把重疊的層轉換為表格。如果計劃把一個(gè)文檔中的層轉換為表格,以便與低版本(3.0及其以下版本)瀏覽器兼容,就要在建立、移動(dòng)層和調整層大小時(shí)防止層發(fā)生重疊。我們可以選擇View -> Prevent Layer Overlaps來(lái)防止層的重疊。但有時(shí)候這一選項也不大管用,還需要我們手動(dòng)把重疊的層分開(kāi)。這可能是Dreamweaver的小Bug吧。(如圖4)

  如上圖所示,我們用層設計好了的一個(gè)頁(yè)面布局。接著(zhù)我們將它轉換為表格。選擇Modify -> Layout Mode -> Convert Layers to Table,彈出一個(gè)對話(huà)框。(如圖5)

  對話(huà)框中各選項的作用說(shuō)明如下:
Most Accurate(最精確):為每一層建立一個(gè)表格單元,以及為保持層與層之間的間隔必須的附加單元格。
Smallest: Collapse Empty Cells(最小:壓縮空單元格):指定如果幾個(gè)層被定位在指定像素數之內,這些層的邊緣應該對齊。選擇本項生成的表格的空行、空列最少。
Use Transparent GIFs(使用透明的GIF圖像):用透明GIF圖像填充表格的最后一行。這樣可以確保表格在所有瀏覽器中的顯示相同。如果選擇本項,將不可能通過(guò)拖曳生成的表格的列來(lái)改變表格的大小。不選本項時(shí),轉換成的表格中不包含透明GIF圖像,但在不同的瀏覽器中,它的外觀(guān)可能稍有不同。
Center on Page(在頁(yè)面上居中):使生成的表格在頁(yè)面上居中對齊。如果不選本項,表格左對齊。
Prevent Layer Overlaps(防止層重疊):選擇本項可防止層重疊。
Show Layer Palette(顯示層面板):選擇本項,轉換完成后顯示層面板。
Show Grid(顯示網(wǎng)格):選擇本項,在轉換完成后顯示網(wǎng)格。
Snap To Grid(吸附到網(wǎng)格):選擇本項,啟用吸附到網(wǎng)格功能。

  單擊OK,我們就將層布局頁(yè)面轉換為了表布局頁(yè)面。一般來(lái)說(shuō),Dreamweaver轉換出的表格有一些誤差,還需要我們自己手動(dòng)調節一下。(如圖6)

  怎么樣,效果還不錯吧。如果你需要把表格轉換為層,就選擇Modify -> Layout Mode -> Convert Tables To Layers,過(guò)程很簡(jiǎn)單,我這里就不再說(shuō)了。

  我們利用層的特性,還可以制作出各種各樣的動(dòng)態(tài)網(wǎng)頁(yè)特效。下面我將給大家講解一個(gè)利用層做出來(lái)的網(wǎng)頁(yè)特效:讓圖像動(dòng)起來(lái)。我們在瀏覽網(wǎng)頁(yè)時(shí),經(jīng)常會(huì )發(fā)現有的網(wǎng)頁(yè)上的圖形會(huì )沿著(zhù)一條路徑移動(dòng)。這其實(shí)是最簡(jiǎn)單的DHTML特效,我們利用Dreamweaver可以輕易的做出這種效果。下面,我們就讓網(wǎng)頁(yè)上那個(gè)可愛(ài)的小獅子動(dòng)起來(lái)吧。

  創(chuàng )建一個(gè)層Layer1,把它移動(dòng)到合適的位置,然后把小獅子頭拖進(jìn)層里面。接著(zhù),我們再創(chuàng )建一個(gè)層Layer2,在層里面填幾句話(huà),然后把層的背景顏色定為白色。(如圖7)

  選擇第一個(gè)層,然后選擇Modify -> Timeline -> Add Object to Timeline,彈出時(shí)間線(xiàn)面板。時(shí)間線(xiàn)面板表示層在時(shí)間上的屬性。拖動(dòng)時(shí)間線(xiàn)上的關(guān)鍵幀記號,可以改變關(guān)鍵幀的位置。我們把結束幀的位置放到第20幀處。對另一個(gè)層我們也進(jìn)行一樣的處理。(如圖8)

  確定在Layer1的時(shí)間線(xiàn)被選定的情況下,將幀數指示條移到第15幀處,選擇Modify -> Timeline -> Add Keyframe,在這個(gè)位置增加一個(gè)關(guān)鍵幀。同樣的,對Layer2也作一樣的處理。(如圖9)

  現在,我們?yōu)閮蓚€(gè)層都創(chuàng )建了時(shí)間線(xiàn),在每個(gè)時(shí)間線(xiàn)上有三個(gè)關(guān)鍵幀。接下來(lái),我們就可以定義層在關(guān)鍵幀的位置了。在Layer1的時(shí)間線(xiàn)第一幀的位置點(diǎn)一下,然后拖動(dòng)層左上角的把手,把它放在你滿(mǎn)意的位置。對Layer1的另外兩個(gè)關(guān)鍵幀,我們也作一樣的處理,將層放在合適的位置。對于Layer2,我們使它始終與Layer1重疊。當這些都做好之后,我們就可以在窗口之中看見(jiàn)層移動(dòng)的路徑了。(如圖10)

  接著(zhù),選擇處于第一幀位置的Layer2,將它的可視屬性改為Hidden(在屬性面板之中的vis選項)。因為瀏覽器默認的層的可視屬性是可見(jiàn)的,所以我們就不用定義其他位置的層的屬性了。這樣,我們就使Layer2 在第1到14幀時(shí)隱藏起來(lái),在第15到20幀時(shí)顯示出來(lái)。

  好了,現在我們已經(jīng)建立好了一個(gè)動(dòng)態(tài)網(wǎng)頁(yè)的例子。我們可以按住時(shí)間線(xiàn)面板上的播放按鈕,預覽頁(yè)面的動(dòng)畫(huà)效果。如果要在瀏覽器中看到你做的效果,最好把時(shí)間線(xiàn)面板上的Autoplay和Loop選項選中,這樣動(dòng)態(tài)效果可以在頁(yè)面調用時(shí)自動(dòng)開(kāi)始循環(huán)播放。怎么樣,按F12在瀏覽器中看一看我們自己做的動(dòng)態(tài)效果吧。這只會(huì )說(shuō)話(huà)的小獅子可不可愛(ài)?

  現在,我們的小獅子雖然可以說(shuō)話(huà),但也只不過(guò)是顯示一段文字而已。你想不想讓它真的開(kāi)口說(shuō)話(huà)呢?只要利用Dreamweaver提供的Behaviors功能,我們就可以輕易的實(shí)現這個(gè)效果了。

  一個(gè)Behaviors實(shí)際是一個(gè)javascript元素,它使對象可以進(jìn)行交互。Behaviors是事件和動(dòng)作的組合。當你添加一個(gè)Behaviors時(shí),你要確定掛鉤在一個(gè)事件上的一個(gè)動(dòng)作。

  首先,讓我們來(lái)熟悉一下行為面板。選擇Window -> Behaviors,打開(kāi)行為面板。其中的加號和減號按鈕用于增加和刪除行為;Event For列表框允許我們選擇不同的瀏覽器,Dreamweaver將根據我們的選擇從行為列表中剔除你從這個(gè)列表選擇的瀏覽器不能辨認的事件。下面的Event和Action列表則列出了你所定義在當前對象上的事件和行為。(如圖11)

  單擊加號按鈕會(huì )彈出一個(gè)行為列表,當前可以使用的行為用黑色字體顯示,不能使用的行為則用灰色字體顯示。下面我為大家簡(jiǎn)單介紹一下這些行為的功能。(如圖12)
Call javascript:調用一個(gè)寫(xiě)好的javascript函數或者一行javascript語(yǔ)句
Change Property:改變對象的屬性
Check Browser:檢查訪(fǎng)問(wèn)者的瀏覽器類(lèi)型,根據返回的結果顯示不同的頁(yè)面
Check Plugin:檢查訪(fǎng)問(wèn)者是否安裝了指定的插件,根據返回的結果顯示不同的頁(yè)面
Control Shockwave or Flash:控制Shockwave或者Flash文件的播放狀況
Drag Layer:使訪(fǎng)問(wèn)者可以移動(dòng)層,用于創(chuàng )建可移動(dòng)的頁(yè)面元素
Go To URL:在當前窗口或指定的框架里打開(kāi)新的頁(yè)面,它還可以同時(shí)改變兩個(gè)或兩個(gè)以上的框架的內容 Jump Menu:當你使用Insert -> Form Object ->&

本文作者:
發(fā)表評論 共有條評論
用戶(hù)名: 密碼:
驗證碼: 匿名發(fā)表