什么是DW啊，是做網(wǎng)頁的是Dreamweaver這個(gè)軟件嗎？？？？剛開始學(xué)應(yīng)該學(xué)什么??？

一、輕松掌握網(wǎng)頁制作

--------------------------------------------------------------------------------

當(dāng)你在網(wǎng)上沖浪時(shí)，會(huì)欣賞到很多制作精美的網(wǎng)站，在羨慕的同時(shí)，你想親手制作網(wǎng)頁嗎？你想讓自己制作的網(wǎng)頁功能更強(qiáng)大嗎？好，那我們就一起學(xué)習(xí)Dreamweaver吧，這可是制作主頁的好工具呀！

你可能會(huì)說，我既不懂HTML，也沒進(jìn)行過程序設(shè)計(jì)，能學(xué)會(huì)嗎？告訴你，一點(diǎn)兒都沒問題，Dreamweaver是可視化的網(wǎng)頁制作工具，很容易上手，可以讓你輕松地制作出自己的網(wǎng)頁。

慢著慢著，先告訴我什么是可視化？可視化的意思就是你在Dreamweaver中制作成什么樣，在瀏覽器中就能看到什么樣，也就是常說的“所見即所得”。

那還等什么，快跟我學(xué)吧！

1、第一次新鮮接觸

（1）什么是Dreamweaver

工欲善其事，必先利其器。Dreamweaver在多媒體方面頗有建樹的Macromedia公司推出的可視化網(wǎng)頁制作工具，它與Flash、Fireworks合在一起被稱為網(wǎng)頁制作三劍客，這三個(gè)軟件相輔相承，是制作網(wǎng)頁的最佳選擇。其中，Dreamweaver主要用來制作網(wǎng)頁文件，制作出來的網(wǎng)頁兼容性比較好，制作效率也很高，F(xiàn)lash用來制作精美的網(wǎng)頁動(dòng)畫，而Fireworks用來處理網(wǎng)頁中的圖形。

圖1 Dreamweaver啟動(dòng)畫面

Dreamweave字面意思為“夢(mèng)幻編織”，這一軟件有著不斷變化的豐富內(nèi)涵和經(jīng)久不衰的設(shè)計(jì)思維，它能充分展現(xiàn)你的創(chuàng)意，實(shí)現(xiàn)你的想法，鍛煉你的能力，使你成為真正的網(wǎng)頁設(shè)計(jì)大師。

好吧，未來的網(wǎng)頁設(shè)計(jì)大師們，讓我們一起在Dreamweaver的空間馳騁，在網(wǎng)上編織我們的夢(mèng)想吧！

、第一次新鮮接觸

（2）軟件界面介紹

現(xiàn)在我們啟動(dòng)DreamWeaver，來見識(shí)一下它的面貌。

在安裝Dreamweaver 3之后，它會(huì)自動(dòng)在Windows的“開始”菜單中創(chuàng)建程序組，打開“開始”菜單，選擇“程序->Macromedia Dreamweaver 3->Dreamweaver 3”命令，便可啟動(dòng)Dreamweaver（圖1）。軟件啟動(dòng)后，會(huì)新建一個(gè)空白的HTML文檔等候編輯。

圖1啟動(dòng)Dreamweaver 3

我們看一下它的界面（圖2）。上面是標(biāo)題欄，顯示出被編輯頁面的標(biāo)題，在括號(hào)內(nèi)顯示出文檔所在目錄及文件名，如果有星號(hào)出現(xiàn)則表示頁面中沒保存的改動(dòng)。標(biāo)題欄下面是菜單，里面列有軟件的功能列表，這與其它軟件沒什么兩樣。中間這一大塊空白地方是編輯區(qū)，我們就在這里制作網(wǎng)頁。

圖2 Dreamweaver界面介紹

窗口最下面由三部分組成，從左向右分別為標(biāo)簽選擇器（tag selector）、頁面信息和快速啟動(dòng)欄。最左面的是標(biāo)簽選擇器，可以用來顯示光標(biāo)所在位置或所選對(duì)象的層次結(jié)構(gòu)，在頁面中選定某個(gè)對(duì)象后，標(biāo)簽選擇器中會(huì)將選擇的標(biāo)簽加粗顯示，比如我們選中一個(gè)圖形，則<img>字樣會(huì)被加粗（圖3）。標(biāo)簽選擇器的用途很大，以后我們會(huì)經(jīng)常使用。

圖3標(biāo)簽選擇器圖4顯示和控制窗口的大小

底欄中間是一些頁面信息，第一項(xiàng)800×600，用于顯示和控制文檔窗口的大小，單擊旁邊的小箭頭，可以從列表中選擇窗口的尺寸（圖4）。

第二項(xiàng)7K/2sec，用于顯示和估計(jì)文檔的大小及下載這個(gè)頁面所需時(shí)間，包括所有與其相鏈接的圖片及Shockware電影。

底欄最右側(cè)的一排按鈕叫迷你發(fā)射器（Mini-Launcher）（圖5），其實(shí)就是打開常用窗口快捷工具欄，比如Site（站點(diǎn)管理器）、Library（庫管理）、CSS Styles（樣式編輯器）、Html Source（源代碼編輯器）等窗口。

圖5迷你發(fā)射器和“Launcher”面板

假設(shè)我們要調(diào)出HTML源代碼編輯器，可以在發(fā)射器上點(diǎn)最后一個(gè)按鈕，也可以按下F10鍵。按下Shift+F4，可以看到迷你發(fā)射器放大的樣子，叫做“Launcher”面板，點(diǎn)擊這里彈出相應(yīng)的窗口，我們以后會(huì)經(jīng)常用到。

DreamWeaver窗口中還有多個(gè)面板，這些浮動(dòng)面板中有一些常用功能的快捷方式，和PhotoShop很象，不要被這些面板嚇倒，真正用起來還是很方便的。

這是對(duì)象面板（即Object面板），如果頁面上看不到，可以按下Ctrl+F2鍵將其調(diào)出（圖6）。這個(gè)面板里集成了“Insert”主菜單中的命令，用于在網(wǎng)頁中插入圖形、表格等內(nèi)容?，F(xiàn)在看到的是“普通面板”，單擊面板上部“Common”旁的小三角，彈出一個(gè)菜單，可以切換到其它對(duì)象面板中，比如選擇“Frames”，就切換到框架面板中，里面提供了創(chuàng)建框架的快捷按鈕。

圖6對(duì)象面板及面板間的切換

這些圖標(biāo)都很直觀，相信你一眼就能看出來它是做什么的。如果不知道某個(gè)按鈕的功能，可以將光標(biāo)停在此按鈕上，這時(shí)就會(huì)出現(xiàn)提示信息，顯示其功能。

這是屬性面板（Properties），如果頁面上看不到，可以按下Ctrl+F3鍵將其調(diào)出。屬性面板主要用來設(shè)定元素的屬性。這個(gè)面板比較靈活，變化也很多，它隨著我們選擇對(duì)象的不同而不同。比如我們選擇了一幅圖片，那么屬性面板上將出現(xiàn)圖片的相應(yīng)屬性（圖7），如果我們選擇的是表格，它相應(yīng)的會(huì)變化成表格的相應(yīng)屬性。

圖7收縮時(shí)的屬性面板

屬性面板中有一個(gè)向下的小三角圖標(biāo)，單擊后將出現(xiàn)更多的擴(kuò)展屬性（圖8）。再次單擊小三角圖標(biāo)，將關(guān)閉擴(kuò)展屬性，恢復(fù)到最初狀態(tài)。

圖8擴(kuò)展后的屬性面板