您現(xiàn)在的位置： > 技術(shù)沙龍 > WEB開發(fā) > DreamWeaver > Dreamweaver基礎(chǔ)教程和制作技巧
- 相關(guān)軟件
>Dreamweaver基礎(chǔ)教程和制作技巧 創(chuàng)建者：webmaster 更新時間：2005-07-02 00:52
一、有關(guān)網(wǎng)頁的基本知識
1、在制作網(wǎng)頁之前，首先需要了解一些與網(wǎng)頁有關(guān)的知識。
在Internet的飛速發(fā)展，WWW（英文全名為World wide Web，中文稱“萬維網(wǎng)”）是一個不容忽視的角色，它是由Internet上的信息服務(wù)器連成的網(wǎng)絡(luò)，可以顯示文字、圖片、聲音等交互性超媒體對象，并可以讓普通人方便地訪問。
URL（英文全名這Uniform Resource Locator，中文稱“統(tǒng)一資源定位器”），URL好比Internet的門牌號碼，它可以幫助用戶在Internet的信息海洋中定位到所需要的資料。在網(wǎng)上的每一個文件都有一個用URL來標識的地址，它的結(jié)構(gòu)也可以理解為DOS中的目錄結(jié)構(gòu)。例如：http://www.163.net/myweb/mfxx.htm（此網(wǎng)址為假設(shè)）。其中http是超文本傳輸協(xié)議，即盤符；www.163.net是站點名，即根目錄；myweb是子目錄；mfxx.html是文件名。
協(xié)議（Protocol）是關(guān)于信息格式及信息交換規(guī)則的正式描述。在信息技術(shù)中，協(xié)議就是一些特殊的規(guī)則集合，它被通信的接收方和發(fā)送方認可，接收到的信息和發(fā)送的信息均以這種規(guī)則加以解釋。在網(wǎng)絡(luò)的各層中存在著許多協(xié)議，它是定義通過網(wǎng)絡(luò)進行通信的規(guī)則，接收方的發(fā)送方同層的協(xié)議必須一致，否則一方將無法識別另一方發(fā)出的信息，以這種規(guī)則規(guī)定雙方完成信息在計算機之間的傳送過程。協(xié)議就好比每個國家都有自己特定的交流準則和交流方式，在Internet上，它統(tǒng)一了人們在網(wǎng)上的交流方式。HTTP協(xié)議（英文全名為Hypertext Transfer Protocol，中文稱“超文本傳輸協(xié)議”）它是用來在Internet上傳送超文本的傳送協(xié)議。它是運行在TCP/IP協(xié)議族之上的HTTP應(yīng)用協(xié)議，它可以使瀏覽器更加高效，使網(wǎng)絡(luò)傳輸減少。任何服務(wù)器除了包括HTML文件以外，還有一個HTTP駐留程序，用于響應(yīng)用用戶請求。您的瀏覽器是HTTP客戶，向服務(wù)器發(fā)送請求，當瀏覽器中輸入了一個開始文件或點擊了一個超級鏈接時，瀏覽器就向服務(wù)器發(fā)送了HTTP請求，此請求被送往由IP地址指定的URL。駐留程序接收到請求，在進行必要的操作后回送所要求的文件。其實您只要記住它是專門為World Wide Web設(shè)計的協(xié)議就行了。
網(wǎng)頁是WWW的基本文檔，它是用HTML（Hypertext Markup Laguage即超文本標識語言）編寫的。HTML語言嚴格來說并不是煩人的編程語言，其實它只是一些能讓瀏覽器看懂的標記，當網(wǎng)頁中包含正常文本和HTML語言標記時，瀏覽器會“翻譯”由這些HTML語言標記提供的網(wǎng)頁結(jié)構(gòu)、外觀和內(nèi)容的信息，從而將網(wǎng)頁按設(shè)計者的要求顯示出來，而不是顯示一堆奇怪的標記。您現(xiàn)在所看到的這個頁面就是網(wǎng)頁了。
超文本（Hypertext）是把一些信息根據(jù)需要連接起來的信息管理技術(shù)，人們可以通過一個文本的鏈指針打開另一個相關(guān)的文本。只要用鼠標點一下文本中通常帶下劃線的條目，便可獲得相關(guān)的信息。我們通常所說的網(wǎng)站或網(wǎng)頁，就是由一個或多個超文本組成的，而我們進入網(wǎng)站首先看到的那一頁稱首頁或主頁（HomePage）。網(wǎng)頁的出色之處在于能夠把超鏈接（Hyperlink）嵌入網(wǎng)頁中，這使用戶能夠從一個網(wǎng)頁站點方便地轉(zhuǎn)移到另一個相關(guān)的網(wǎng)頁站點。它可以指向其他網(wǎng)頁、文、多媒體文件、圖像甚至程序。超鏈接是內(nèi)嵌在文本或都圖像中的，文本超鏈接在游覽器中通常是帶下劃線，而圖像超鏈接是看不到的，但如果用戶的鼠標碰到它，鼠標的指標通常會變成手指狀（文本超鏈接也是如此）。
2、網(wǎng)頁制作的基本設(shè)計思路
要設(shè)計出一個精美的網(wǎng)站前期工作是必不可少的。一個網(wǎng)頁的成功與否，很重要的一個因素在于它的構(gòu)思，好的創(chuàng)意及豐富詳實的內(nèi)容才能夠讓您的網(wǎng)頁充滿勃勃生機。
1、 網(wǎng)頁的選題
在制作自己的網(wǎng)頁之前，首先要確定自己網(wǎng)頁的內(nèi)容。個人網(wǎng)頁的設(shè)計內(nèi)容可以從自己的專業(yè)或興趣愛好多做些考慮。例如自己在計算機、書法、繪畫等方面有獨到的工夫，可以此專題做為網(wǎng)頁的內(nèi)容。但網(wǎng)頁涉及的內(nèi)容切勿過廣，這樣雖然內(nèi)容比較豐富，但往往涉及各個方面的內(nèi)容會比較膚淺。
2、 網(wǎng)頁的組織結(jié)構(gòu)
網(wǎng)頁的選題確定好以后，接下來就要確立網(wǎng)站的總體結(jié)構(gòu)了?？傮w結(jié)構(gòu)的確立至關(guān)重要，它是網(wǎng)站設(shè)計能否成功的關(guān)鍵所在。如果我們對網(wǎng)站的總體結(jié)構(gòu)了如指掌，設(shè)計起來就會得心應(yīng)手，游刃有余，但是如果網(wǎng)站的總體結(jié)構(gòu)比較混亂，在設(shè)計的過程中也就會顛三倒四，無法將自己的想法表達出來，這樣的網(wǎng)站一般不會很成功。一般網(wǎng)頁的組織結(jié)構(gòu)是采用樹形結(jié)構(gòu)。
3、 資料的收集與整理
在對自己未來的網(wǎng)頁有了一個初步的構(gòu)思后，還需要有豐富的內(nèi)容去充實。網(wǎng)頁的基本組成元素有三個：文字內(nèi)容、圖片和超級鏈接。而Internet的最迷人之處在于它信息的極大豐富，如果你的網(wǎng)而只有漂亮的外觀而實質(zhì)內(nèi)容很少，那么就不會有多少人在你的網(wǎng)頁中停留。要注意的一點是，網(wǎng)站的內(nèi)容必需合法。
4、 選擇網(wǎng)頁的設(shè)計方法
要建立一個網(wǎng)站，要選擇用何種方法來實現(xiàn)它。現(xiàn)在，能夠用來設(shè)計網(wǎng)站的方法有很多，可以使用HTML語言來編輯，也可以使用網(wǎng)頁制作工具（如：ProntPage）來設(shè)計網(wǎng)站。對于一個初學(xué)者來說，建議您使用所見即所得的網(wǎng)頁制作工具來設(shè)計出網(wǎng)站的框架，然后再用Java和JavaScriptT等編輯語言來對網(wǎng)站進行修飾。
5、 設(shè)計網(wǎng)頁要注意的問題
（1）網(wǎng)頁的標題要簡潔，明確。
（2）在文本要使用水平線，以分割不同部分。
（3）對重點段落要強調(diào)顯示。
（4）網(wǎng)頁中插入的圖片要盡量的小。
（5）圖形要附加文字說明，以便關(guān)閉圖象時查看。
（6）網(wǎng)頁中引用的資料及商標（或圖標），不能侵犯版權(quán)。
二、建站造頁篇
? 千里之行，始于足下。在做網(wǎng)頁之前第一步就是要學(xué)會做網(wǎng)站。作為一個網(wǎng)站，里面有很多的圖片、網(wǎng)頁文件甚至Flash動畫，如果不進行管理歸檔，分散在硬盤的各個地方就無法進行網(wǎng)頁發(fā)布了。因此建網(wǎng)站就是在硬盤上建立一個目錄，將所有的網(wǎng)頁和相關(guān)的文件都放在里面以便進行網(wǎng)頁的制作和管理。
??下面我們就來用Dreamweaver 3建立一個網(wǎng)站。
??啟動Dreamweaver
??進入Dreamweaver，一般首先會進入頁面編輯器。在頁面編輯器中，選擇菜單Site-〉Newsite。系統(tǒng)彈出站點定義對話框。
??下面我們需要做這幾步工作：
Site name：填上網(wǎng)站的名稱。名稱沒有規(guī)定，您可以填入您想要的名稱。
Local Root：站點本地目錄。在這個地方，您必須給您的網(wǎng)站在硬盤上指定一個目錄。以后所有的網(wǎng)頁文件就都放在該目錄里面。相當于造房子先選地址一樣。單擊黃色文件夾，系統(tǒng)彈出對話框。
? 可以選擇目錄。選好目錄以后按“打開”，再按“保存”即可。如果沒有建立過目錄，也沒關(guān)系。在這個對話框中一樣可以建立。只要再對話框中按右鍵選擇“新建文件夾”馬上可以建立目錄了。
選中Refresh Local File List Automatically選項：自動刷新本地文件列表。這個功能有了以后，當你往網(wǎng)站的目錄中復(fù)制文件的時候，網(wǎng)站文件列表會自動的刷新。為了方便起見我們選擇。
選中Cache：選項。Cache不少讀者肯定不會陌生，就是“緩存”。這個選項非常有用，他可以自動跟蹤網(wǎng)站內(nèi)的文件鏈接情況。當你的文件改名、移動、刪除以后。原來指向這個文件的鏈接會段掉。有了Cache就可以及時發(fā)現(xiàn)問題，并加以糾正。
??OK，所有的工作都完了。一個空白的網(wǎng)站就做好了。
??下面我們來仔細觀察站點管理器。網(wǎng)站內(nèi)所有的文件都會顯示在管理器的右側(cè)。怎么樣看上去是不是有點象windows的資源管理器?。看蠹铱梢园l(fā)現(xiàn)一點，就是這里的“根目錄”就是先前我們選擇的目錄。這是因為相對于要做的網(wǎng)站而言，所有文件都是放在這個目錄里面的。所以這個目錄就是網(wǎng)站的根目錄。
??做網(wǎng)頁的時候會用到很多的圖片，把所有的圖片文件都歸檔在一個目錄里這是一種比較好的習(xí)慣。下面我們在站內(nèi)先建立一個“images”目錄用于存放圖片文件。在站點管理器右側(cè)空白處，單擊右鍵彈出菜單。選擇New Folder新建目錄，輸入目錄名即可。
??一個網(wǎng)站建立好以后，下次啟動Dreamweaver時。會自動打開這個網(wǎng)站，那么您所做的每一個文件都保存在這個站內(nèi)。如果您建立了很多網(wǎng)站的話就要確保您要的網(wǎng)站是否打開了?？梢栽陧撁婢庉嬈髦羞x擇打開的網(wǎng)站。使用菜單Site->Open site。
??如何快速進入站點管理器呢？我們可以用快速啟動欄。在快速啟動欄中第一個按鈕就可以快速切換到站點管理器。在頁面編輯器的右下腳，也有一個袖珍的啟動欄?？梢酝瑯硬僮?。
??好，本次教程我們主要學(xué)習(xí)了怎樣制作一個站點。一個站點，簡單的說就是搭一個網(wǎng)站的架子。所有的網(wǎng)頁和相關(guān)的文件都必須放在站內(nèi)。網(wǎng)站所在的目錄就是網(wǎng)站的根目錄。大家可能覺得有些枯燥吧？沒關(guān)系，有了這些基礎(chǔ)，下一次我們就可以進入到正式的網(wǎng)頁制作中來了。
??和大家探討了怎樣用Dreamweaver 制作一個網(wǎng)站，現(xiàn)在來實際制作一張簡單的網(wǎng)頁。? 先對這個頁面進行一下分析：
網(wǎng)頁的標題欄有“機器貓的小窩”字樣
網(wǎng)頁中的“機器貓的小窩”標題是一張Gif圖片
左下角的機器貓是一張gif圖片
當中是一段文字，設(shè)置了文字的字型和顏色
網(wǎng)頁背景用圖片制作
先啟動Dreamweaver3，確保你已經(jīng)用站點管理器建立好了一個網(wǎng)站，并且打開了這個網(wǎng)站。
??1、插入標題圖片
?? 進入頁面編輯器。在對象面板中單擊按鈕。（如果對象面板看不見，可以按Ctrl+F2打開面板）系統(tǒng)彈出插入圖片對話框。在硬盤中找到這個圖片。選中后，對話框右側(cè)會看到這個圖片的預(yù)覽圖。按“Select”按鈕確定。
??系統(tǒng)彈出一個信息框，大致意思是說要求插入圖片后保存網(wǎng)頁。按OK確定。
??接下來的對話框提示大家，這個圖片不在站點目錄內(nèi)，當前的站點目錄是“D:\5dmedia”是否要將這個圖片文件復(fù)制到站點內(nèi)。還記得我們上一期反復(fù)強調(diào)的重點么？和網(wǎng)站相關(guān)的所有文件都必須放在站內(nèi)！如果不這樣做，會導(dǎo)致發(fā)布網(wǎng)頁時候圖片“失蹤”。所以，理所當然。我們選擇“是”。
??系統(tǒng)彈出復(fù)制文件“Copy file as”對話框。我們?yōu)榱宋募芾淼姆奖悖堰@個圖片放在“images”目錄下面。（注：這個目錄是為了方面自己建立的。您也可以直接把圖片放在站點根目錄，或者隨便什么站內(nèi)的目錄中）。直接按“保存”即可。注意文件名不能用中文，否則要出現(xiàn)一些意想不到的情況。
??一個標題圖片就插入完畢了。接下來要讓標題圖片居中安放。單擊圖片，在屬性面板中（如果面板不出現(xiàn)，按Ctrl+F3打開）。選擇面板中的居中按鈕將圖片居中。（如果面板中看不見這個按鈕，是因為面板沒有展開?？梢园疵姘逵蚁陆堑陌粹o展開面板）。
??知道了這張網(wǎng)頁的結(jié)構(gòu)以后我們就來可以制作了。
? 2、插入機器貓圖片插入文字
??回車換一行，按照上面的步驟插入機器貓圖片。這張圖片要求不用居中。如果圖片繼承上面的格式居中?？梢酝ㄟ^屬性面板中的按鈕讓其居左安放。
??接著我們開始按照上面的樣例輸入文字。大家會發(fā)現(xiàn)文字并沒有按照期望的那樣排在圖片周圍。而是出現(xiàn)在圖片的下方。這是因為沒有設(shè)置圖片的對齊方式。
??單擊機器貓圖片，在屬性面板中。Align對齊方式選擇Left（圖片出現(xiàn)在文字的左邊）。圖片的周圍會出現(xiàn)一個黃色的標記。這是Dreamweaver專用的對齊符號。不會影響任何顯示和效果。
??文字就都按照我們期望的方式和圖片對齊了。下面我們來設(shè)置文字的格式。選中第一第二行文字。在屬性面板中將Format字體格式設(shè)置成為Heading 3標題三號。并選中“B”將字體變粗。
??選中第三行，在屬性面板中將Format字體格式設(shè)置為Heading 2標題二號。選中“I”將字體變斜。設(shè)置“機器貓”的顏色。首先選中這三個字，在屬性面板中，單擊顏色盒，在彈出的顏色盒中用吸管吸取顏色即可。同樣設(shè)置其他后面文字的顏色。
??最后的三行文字我們想讓他們前面帶有項目符號的小圓點。單擊屬性面板中的按鈕。選中的文字就帶有列表符號了。
3、設(shè)置網(wǎng)頁的標題和背景圖片
??選擇菜單Modify->Page Properties。系統(tǒng)彈出Page Properties頁面屬性對話框。在Title域中輸入標題文字“機器貓的小窩”在Background Image處單擊Browse按鈕，系統(tǒng)彈出圖片選擇對話框。選中背景圖片，如果圖片在站外將其保存在站內(nèi)。
??按“OK”關(guān)閉對話框。網(wǎng)頁的標題和背景圖片設(shè)置完畢。
?? 在頁面編輯器中按F12預(yù)覽網(wǎng)頁效果。嗯？怎么凡是圖片的地方都是一個叉呢？原因很簡單在前面插入圖片的時候要求我們將網(wǎng)頁文件存盤。選擇File->Save。網(wǎng)站中的第一頁(也就是首頁)，我們通常存盤取名為index.html。重新預(yù)覽，網(wǎng)頁的效果就出現(xiàn)了。
??小結(jié)：在今天的教程中我們制作了一張完整的網(wǎng)頁。實際上對于三大部分進行了操作。
??文字：可以設(shè)置文字的格式。首先選中文字，然后在屬性面板中可以使用Format域設(shè)置文字的格式，還可以設(shè)置文字加粗加斜的樣式和文字的顏色。列表分為有序和無序列表今天我們使用的是無序列表即圓點項目符號。文本可以設(shè)置對齊方式分別是左、中、右。
??插入圖片可以通過對象面板來實現(xiàn)。插入圖片要注意一定要保存在網(wǎng)站內(nèi)，這樣才能保證圖片的正確顯示。圖片也象文字一樣有對齊方式。另外圖片有Align對齊方式，這種對齊方式指圖片和文字怎樣對齊。
??設(shè)置頁面屬性，我們操作了兩個地方。其一設(shè)置網(wǎng)頁的標題。這會在瀏覽器的標題欄中顯示出來。還可以制定背景圖片。網(wǎng)頁的背景圖片是一張小圖片，他在網(wǎng)頁中重復(fù)貼，充滿整個網(wǎng)頁。
??最后是預(yù)覽。預(yù)覽用于觀察網(wǎng)頁在瀏覽器中的實際效果。直接按F12就可以預(yù)覽。如果出現(xiàn)圖片不出現(xiàn)的情況，要先將網(wǎng)頁存盤觀看效果。
三、頁面之間的超級連接
? 網(wǎng)站肯定有很多的頁面，如果頁面之間彼此是獨立的。那么網(wǎng)頁就好比是孤島。為了建立起網(wǎng)頁之間的聯(lián)系我們必須使用超級鏈接。為什么說它是超級鏈接呢？他什么都能鏈，連網(wǎng)頁，連下載文件，連網(wǎng)站地址、郵件地址……。下面我們就來談?wù)勗鯓釉诰W(wǎng)頁中指做超級鏈接。
在網(wǎng)頁中，最多見的就是這種超級鏈接。在網(wǎng)頁中，單擊了某些圖片或者有下劃線就會跳轉(zhuǎn)到相應(yīng)的網(wǎng)頁中去。好了我們下面開始制作。
??1、在網(wǎng)頁中選中要做超級鏈接的文字或者圖片。
??2、在屬性面板中單擊黃色文件夾，選中相應(yīng)的網(wǎng)頁文件。就OK了。做好超級鏈接的文字下面會有藍色的下劃線。
??3、預(yù)覽網(wǎng)頁。光標移到超級鏈接的地方就會變成手型。
??提示：你也可以手工在鏈接域中輸入地址。給圖片加上超級鏈接的方法和文字完全相同。在Frontpage中制作過超級鏈接的圖片會有藍色的邊框，那是因為Border屬性沒有設(shè)置成為0的緣故。在Dreamweaver中超級鏈接的圖片邊框Border屬性自動設(shè)置為0所以不會有藍色邊框出現(xiàn)。要想看到邊框可以把圖像的邊框Border屬性設(shè)置成為非0就可以看到邊框了。
??如果超級鏈接指向的不是一個網(wǎng)頁文件。而是其他文件例如zip文件等等，單擊鏈接的時候就會下載文件。
??超級鏈接也可以直接指向地址而不是一個文件，那么單擊鏈接直接跳轉(zhuǎn)到相應(yīng)的地址。例如，在鏈接域里寫上http://www.fm365.com/。那么，單擊鏈接就可以跳轉(zhuǎn)到相應(yīng)的網(wǎng)站。
四、郵件地址的超級連接 ?
在網(wǎng)頁制作中，還經(jīng)常看到這樣的一些超級鏈接。單擊了以后，會彈出郵件發(fā)送程序，連聯(lián)系人的地址也已經(jīng)寫好了。這也是一種超級鏈接。在Dreamweaver 3之前的版本，做一個郵件地址鏈接比較麻煩需要手動的寫。在Dreamweaver 3中新增了一個插入郵件地址的對象。在對象面板中單擊這個對象，系統(tǒng)彈出對話框。在對話框Text域中填上相應(yīng)的文字。E-Mail中填上地址。OK一個連接就做好了。
??提示：還可以選中圖片或者文字，直接在地址欄中填寫“mailto：郵件地址”就可以了。
??除了上面的寫法，還可以有更加復(fù)雜的參數(shù)。參數(shù)之間用問號分隔。
??Subject=郵件的標題
??CC=抄送郵件地址
??BCC=暗送郵件地址
??Body=正文內(nèi)容
??這些都是可以指定的例如下面的樣子。單擊以后的效果為 ? mailto:rudolf@sina.com?Subjec=biaoti&CC=rudolf@a.com&BCC=rudolf@21cn.com&body=這是我的意見
五、書簽錨點的制作
??前面所介紹的超級鏈接單擊以后會直接跳轉(zhuǎn)到相應(yīng)的頁面。如果想在同一個頁面里面進行跳轉(zhuǎn)，或者直接跳轉(zhuǎn)到別的頁面的某一個地方那該如何制作呢，這就需要用到一個小東西叫做錨點（Anchor）在以前的Frontpage中叫做書簽（Bookmark）。錨點概念很形象，在某一個地方拋錨，然后超級鏈接指向錨，單擊鏈接就可以跳轉(zhuǎn)過去。下面我們來做一個簡單例子。假設(shè)一個網(wǎng)頁中有這樣的一本象書的頁面。
??想要完成這樣的功能，單擊目錄就會跳轉(zhuǎn)到相應(yīng)的章節(jié)。首先要在章節(jié)的頭上安放一個錨點。然后將目錄中的文字做上超級鏈接指向錨點就可以了。下面step by step 開始。
??1、將光標定位在第一章開頭的飛狐外傳前面
??2、選擇菜單Insert->Nanmed Anchor 插入錨點。系統(tǒng)彈出插入對話框。輸入相應(yīng)的錨點名稱。注意不能使用中文作為名字。
??3、單擊“OK”結(jié)束錨點的制作。頁面中出現(xiàn)一個錨點的標記。這個標記只是頁面中用于標記錨點的，在正式瀏覽網(wǎng)頁的時候不會出現(xiàn)。
??4、接下來我們會使用一個瞄準器來制作指向錨點的鏈結(jié)。選中文字，在屬性面板中拖拽瞄準器到錨點上面，就可以了。
??5、按F12預(yù)覽網(wǎng)頁效果就做好了。
??注意觀察指向錨點的超級鏈接，在屬性面板中這種連接指向的地址是#開頭后面加上一個錨點的名稱。例如上面例子中的超級鏈接地址指向的就是#chapter1。若是想要將鏈接指向某一頁中的某一個地方可以在鏈結(jié)域中輸入XXXX.htm#XXX就是某頁的某書簽。
六、制作圖片上的超級鏈接Imagemap
??注意，我們這里所說的Imagemap是指在一張圖片上實現(xiàn)多個局部區(qū)域指向不同的網(wǎng)頁鏈接。比如一張世界地圖的照片，單擊了不同的州跳轉(zhuǎn)到不同的網(wǎng)頁。這張圖片就是一個imagemap，可點的區(qū)域就是熱區(qū)。下面我們就來制作一個簡單的例子，來體會制作方法。
? 1、首先插入一張圖片。
? 2、單擊圖片，用展開的屬性面板上的繪圖工具在畫面上繪制熱區(qū)。并且選擇相應(yīng)的文件。
? 3、預(yù)覽網(wǎng)頁就可以看到效果。
??提示：對于復(fù)雜的熱區(qū)圖形我們可以直接選擇多邊形工具來進行描畫。其中Alt域是用來填寫說明文字的。填寫了說明文字以后，光標移上熱區(qū)就會顯示出相應(yīng)的說明文字。
七、網(wǎng)頁制作技巧
（一）、靈活運用DREAMWEAVER的SITE功能
在DREAMWEAVER中，有一個SITE菜單，利用它可以實現(xiàn)對網(wǎng)站設(shè)計階段的管理。有了它，可以大大減少在網(wǎng)站開發(fā)階段的維護工作量。下面我們具體看看它的一些功能：
1、利用Site更改文件名
在制作網(wǎng)站的過程中往往需要更改文件名，但是，這些文件名可能是某些超級連接所鏈接的對象。如果我們按照常規(guī)的方法去更改文件名，不僅工作量大，而且有可能由于工作的疏忽而造成某些鏈接找不到相應(yīng)的鏈接對象，從而影響到網(wǎng)站的形象。利用dreamweaver的site功能可以大大簡化這一工作。
點擊site菜單下的open site命令，選擇要打開的site名。這里我們選擇hongen site。這時dreamweaver便會彈出一個site的操作窗口，如要將jiqiao001.html改為jiqiao003.html，我們便選中jiqiao001.html文件，然后按F2鍵，遍可以為jiqiao001.html更名，輸入新的文件名后，dreamweaver會彈出一個對話框如圖所示：
提示是否需要對整個site文件進行更新(update)，選擇yes，系統(tǒng)便會自動的更改與該文件相關(guān)的所有鏈接 。
2、利用site查找鏈接錯誤和檢查瀏覽器支持程度
在開發(fā)建設(shè)網(wǎng)站的過程中，如果我們的頁面越來越多，則鏈接出錯的可能性會很大，單憑我們?nèi)肆θz查這些鏈接顯然是特別麻煩的，而且有些隱蔽的鏈接我們也不會一一點擊，有沒有自動檢查鏈接錯誤的功能呢？其實Dreamwaver為我們提供了一個很好的鏈接檢查器，讓它幫我們檢查不但速度快而且準確，為何不試一試呢？
點擊“File”菜單下“Check Links”項(快捷鍵為Shift+F8),Dreamwaver便開始檢查當前Site下的所有連接，如果發(fā)現(xiàn)了鏈接的錯誤則會在彈出的“Link Checker”對話框中列出鏈接錯誤所在的頁面，接下來我們要做的只是記下出錯頁面，然后打開頁面修改錯誤，既快又方便。
由于我們制作的網(wǎng)頁上傳后，并不能知道網(wǎng)友使用何種瀏覽器，而我們應(yīng)用在網(wǎng)頁制作中的有些技巧，并不是所有的瀏覽器都能支持的，也就是說別人也許看不到網(wǎng)頁應(yīng)有的效果，甚至是一團糟，所以我們必須保證自己的網(wǎng)頁被主流的瀏覽器所支持。Dreamwaver提供了這樣一個功能，即檢查目標瀏覽器，我們在Site中選中要測試的文件，然后在“File”菜單中找到“Check Target browser”并單擊，這時會彈出一個對話框。
我們一般選擇“IE 4.0”和“Netscape4.0”檢查即可，如果檢查結(jié)果發(fā)現(xiàn)有瀏覽器不支持的地方，我們在測試結(jié)果窗口中能夠看到是哪個語句有問題，我們只須做相應(yīng)的修改即可。
（二）、使用Dreamweaver工具加入CSS碼
在頁面中加入CSS碼，改變頁面的顯示，但是對于不動CSS語法規(guī)則的人來說，使用Dreamweaver同樣能加入CSS碼來改變顯示，這兒有兩個小例子。
1、改變鏈接顯示。
通常頁面的文字鏈接顯示會自動加上下劃線，這樣看起來比較清晰，讓閱讀這一看就知道這里有鏈接，但是整個頁面的美觀度有損。在Dreamweaver中只要設(shè)定Styles就可以輕易的加入CSS碼，改變鏈接顯示。
具體制作如下：
（1）選擇菜單“Windows”下的子菜單“styles”，打開“Styles”對話框，點擊對話框底部的按鍵“StyleSheet……”，彈出“Edit Style Sheet”對話框；
（2）在“Edit Style Sheet”對話框中選擇“New”按鍵；彈出如下對話框
如上圖紅線所圈的圖示選擇，然后選擇確定，彈出對話框“Styler defination for a：link”，在其中設(shè)定Text-decoration為none；
同上設(shè)定a：visted的Text-decoration為none；
以上述步驟設(shè)定a：hoverText-decoration為underline；
打開該頁面的Html文檔，可以發(fā)現(xiàn)在文件頭有如下代碼：
<style type="text/css"><!-
a:link(text-decoration:none)
a:visted(text-decoration:none)
a:hover(text-decoration:underline)
-></style>
這樣你可以不必了解有關(guān)CSS的各項規(guī)則語法，就可以輕松加入CSS碼，而在頁面中的鏈接處文字就不會有下劃線出現(xiàn)，但當鼠標移到其上時會有下劃線出現(xiàn)。你還可以用這種方法設(shè)定鏈接處文字的顏色、文字背景等，增加頁面的美觀度。
2、創(chuàng)建自己喜愛的字體
你一定會發(fā)現(xiàn)，一般頁面中的default字體往往是12pt的宋體，顯得有些大大咧咧，不夠細膩，同時過大的字體會讓文章占用過多的篇幅，怎么辦，教你一招。同上面的（1）、（2）步驟，打開“New style”對話框，所不同的是這次我們選擇“Make Custome Styler（class）”，在下面的文本輸入框中輸入：“?useFont”，選擇確定，彈出對話框“Styler defination for?useFont”，在其中設(shè)定字體為宋體，字體大小為9points，然后選擇確定，我們可以看到在Styles窗口中出現(xiàn)了“userFont”的選項；在需要使用該字體的段落，再在“Styles”窗口中選擇“userFont”即可。這個字體就是你在我的頁面上看到的，是不是覺得細膩多了，頁面也顯得文氣多了？
（三）、利用BEHAVIORS創(chuàng)建動態(tài)網(wǎng)頁
1、在WINDOWS菜單上選擇BEHAVIORS或直接按F8鍵就會彈出Behaviors浮動面板。
2、選中您想加上action的元素，比如說一個按鈕，或者一個超級連接，或一個div，然后點擊behaviors浮動面板上的“+”按鈕，則會彈出一個菜單，然后選擇您想要的action，再設(shè)置相應(yīng)的參數(shù),確認后您就會看到behaviors浮動面板中列出了您剛設(shè)置的action。注意它有兩列，一列顯示的是當發(fā)生什么事件時執(zhí)行該動作，另一列即為動作的名稱。您可能會注意到，它的缺省的事件都是“onClick”，我想這在很多情況下不是您想要的，所以您還需要修改該動作執(zhí)行的條件。方法是先選中該條action，然后點擊出現(xiàn)的黑色小三角形，選擇列出的事件。dreamweaver可以使您毫不費力的生成動態(tài)網(wǎng)頁。
下面，我們以幾個例子來說明如何使用。
例一：打開新窗口
1、建一個按鈕或者一個超級連接。
2、選中該按鈕或者該超級連接。
3、點擊behaviors浮動面板上的“+”。選擇“open browser windows”。
4、設(shè)定要打開的url及窗口的式樣。
或者，也可為超連接加上一段javascript代碼，如：
<a href=”javascript:window.open(‘url’,’標題’,’width=x,height=y’)”>超連接文字</a>
例二：可拖動的層
1、創(chuàng)建一個層。
2、選中該層。
3、點擊behaviors浮動面板上的“+“。選擇“drag layer”。
4、選擇要設(shè)置成可拖動的層的名字及相關(guān)屬性。
注意：該action只適用于IE4.0及以上版本。如果您的behaviors浮動面板上的Events For為"4.0 Browsers"，則該action是不可選的。如果您一定要使用它，請將Event For改為"IE 4.0"。
例三：顯示狀態(tài)欄信息
1、選定您想設(shè)定顯示幫助信息的元素。
2、選擇action“display status message”。
3、填入您想顯示的內(nèi)容并確定。
注意事項：
1、利用action應(yīng)以不影響網(wǎng)頁瀏覽的正常速度和不妨礙瀏覽者閱讀為前提。
2、注意不同瀏覽器的兼容性。
（四）、實現(xiàn)有立體感的表格邊框
請看下面的例子，這是一個具有立體感的左邊條。這個表格給人很精致的感覺，如果把它放在網(wǎng)頁的一側(cè)，做為你的網(wǎng)站的導(dǎo)航，一定回會為你的網(wǎng)頁增色不少。好，下面我們一起看看怎樣用表格實現(xiàn)這樣的效果。
如果你用Dreamwaver實現(xiàn)起來十分簡單：
1、我們先來插入一個表單：選擇“Insert”－>“Table”，在彈出的對話框中設(shè)置為7行1列，設(shè)置寬度為125 Pixels，然后點擊確定；
2、選擇“Windows”菜單，點擊“Properties”項，“調(diào)出“Properties(屬性)”窗口；
3、將鼠標在剛才插入的表格中點一下，然后按下“Ctrl+A”,選中整個表格，這時屬性框中顯示的是表格的屬性；
4、修改表格屬性：
把“CellPad”設(shè)為1，“CellSpace”設(shè)為0，邊框?qū)挾取癇order”設(shè)為1，將亮邊框“Light Brdr”設(shè)為較深的顏色(比背景色要深)，將暗邊框“Dark Brdr”設(shè)為白色，最后設(shè)置背景色為“#FF66CC”以完成設(shè)置。
（五）、中文網(wǎng)頁制作中段落縮進的方法
在利用Dreamweaver制作有關(guān)文檔資料內(nèi)容的網(wǎng)頁時，如果是英文書寫格式，段落一般不縮進（不支持半角空格）；如果需要縮進往往需要人為的加入兩個中文全角空格，才能夠顯示出位置縮進效果。
除了上面所說的外，還有下面幾種方法，可以值得一試，現(xiàn)介紹如下：
1、預(yù)格式(PRE)
用預(yù)格式編寫的源文件，在顯示時照源文件中的排版字樣顯示，空行和空格都能很清楚地區(qū)別開來。如源文件為：
<pre>－－預(yù)格式顯示……</pre>
網(wǎng)頁就會按照你預(yù)先設(shè)置好的顯示方式顯示，即在“預(yù)格式顯示”的前面就會空兩個漢字的位置。
2、插入點圖或透明圖形
點圖是指圖片中只有一個或幾個像素點，用肉眼看不出來。當我們在段落開頭插入這樣一個點圖，并用HSPACE和VSPACE屬性來調(diào)整點圖的左右和上下的空格，以達到段落縮進。
同樣可以插入一個透明圖形，這種方式用IMG的WIDTH和HEIGHT屬性調(diào)整圖形大小，以達到縮進。
插入圖形的方法，需要我們掌握好HSPACE和VSPACE大小的尺度，使之剛好留出兩個漢字的位置，這樣才比較美觀。
3、插入沒有邊框和內(nèi)容的表格
這種方式與上述的插入圖形方式類似，該表格沒有邊框和內(nèi)容，是空表格。用TABLE的WIDTH和HEIGHT屬性調(diào)整表格大小適合縮進的需要。
利用表格來定位一般來說比較可靠，我常常就采用這種方式來對比較復(fù)雜的頁面進行定位。不過這種方法有一個問題，就是可能是頁面的源文件變大。因此也不見得是格式控制的首選。
4、插入特殊的空格字符“＆nbsp”
“＆nbsp”代表非顯示空格字符。插入若干個“＆nbsp”字符，中間用分號(；)或者空格隔開，也可以實現(xiàn)中文段落縮進。不過在Netscape 3.01中只能寫小寫字母，而在IE中大小寫都可以。
這四種方法主要是針對利用HTML的語言編寫網(wǎng)頁而言。在一些網(wǎng)頁制作工具，如網(wǎng)景瀏覽器中有專門加入空格的工具條，也可以完成段落縮進。
5、 插入幾個與背景相同的文字，也可以實現(xiàn)中文段落縮進。
（六）、如何去掉主頁超鏈接的下劃線
在訪問一個頁面的時候，我們會發(fā)現(xiàn)，當鼠標移動到具有超級連接的文字上的時候，有的會產(chǎn)生相應(yīng)的下劃線。然而有些網(wǎng)頁卻沒有。主頁超鏈接的下劃線是如何去掉的呢？
更簡單的方法是我們在<HEAD>...</HEAD>之間插入下面的代碼
<style><!--
a {text-decoration:none}
a:hover {color: red;text-decoration:none}
--!></style>
下面我們在看一看效果，試著將鼠標移動到下面的超級鏈接上去，是不是超級鏈接不會產(chǎn)生下劃線了。
（七）、如何制作HTML字幕動畫效果
我們在瀏覽網(wǎng)頁的時候，有時會看到網(wǎng)頁中有些文字會循環(huán)往復(fù)的移動。這種動畫效果是如何制作的呢？這里我們就來看一看。
當然我們可以利用flash或者采用Gif動畫來實現(xiàn)，但是這種方式往往占用的空間比較大，而且不如HTML標記來得那么簡單。這個標記就是Marquee標記，中文翻譯為“跑馬燈”。IE3.0以上版本的瀏覽器中支持這個HTML標記，而NetScape則不支持。因此我們在設(shè)計網(wǎng)頁的時候需要考慮這個問題。
Marquee標記的基本語法結(jié)構(gòu)如下所示 ：
<MARQUEE ALIGN=″alignment″ BEHAVIOR=″type″ BGCOLOR=″color″ DIRECTI ON=″direction″ SCROLLAMOUNT=″n″ SCROLLDELAY=″n″ LOOP=″n″WIDTH=″x″ HEIGHT=″y″ HSPACE=″x″ VSPACE=″y″>洪恩在線，12億中國人的網(wǎng)上大學(xué)</MARQUEE>
其中ALIGN可以用來指定滾動字幕與左右文字的對齊方式，它的值可以有top、middle、bottom等；
BEHAVIOR用來指定滾動字幕的滾動方式，它的屬性值有scroll、slide和alternate三個，scroll表示滾動字幕內(nèi)容向同一方向重復(fù)滾動，slide表示滾動字幕內(nèi)容從一端向另一端滾動并在另一端停止，alternate表示滾動字幕內(nèi)容在兩端之間來回往復(fù)滾動；
DIRECTION指定滾動字幕的滾動方向，它的屬性值有l(wèi)eft和right兩個，分別表示滾 動字幕由右向左和由左向右滾動；SCROLLAMOUNT用來設(shè)置多次滾動之間的間隔距離，其 單位是pixels（像素）；
SCROLLING用來指定滾動字幕滾動一次所需要的時間，單位是ms（千分之一秒）， 其值的大小將直接影響滾動字幕的滾動速度；
LOOP屬性是用來指定滾動字幕的滾動次數(shù) 的，當它的值為“－1”時，滾動字幕將連續(xù)滾動直到瀏覽器載入下一個頁面；
HSPACE和 VSPACE則分別用來指定滾動字幕與其上一級頁面在水平方向和豎直方向上的距離。
下面我們看一看跑馬燈的效果。(注意：這種跑馬燈的效果只在Internet Explorer中能看到，Netscape不支持marquee標記)
（八）、超級鏈接時如何設(shè)定目標窗口
目標窗口是頁面鏈接所指內(nèi)容顯示的窗口，也就是當你單擊了頁面某一個鏈接后，該鏈接所指的內(nèi)容在那個窗口顯示。大多數(shù)情況下，我們無需關(guān)心它，因為一般都是在同一窗口顯示。但是有時我們需要彈出一個新的窗口，而不是替代原來的窗口，怎么辦呢？很簡單，這里我們只要在超級鏈接的源代碼target屬性就可以了。
下面我們就看一看TARGET屬性：TARGET是鏈接標簽的屬性，它的作用就是指定目標窗口，TARGET有以下幾個值：
_self-將鏈接指向的內(nèi)容裝載到當前頁的窗口或框架中；
_top-完全取代當前頁面的所有框架；
_blank-為鏈接指向的內(nèi)容打開一個新的窗口
_parent-把鏈接指向的內(nèi)容裝入當前頁〈FRAMESET〉父窗口中
下面這段代碼，便會使超級鏈接產(chǎn)生一個新的窗口：
<a href="www.aweb.com.cn" target="_blank">洪恩在線</a>。
（九）、如何使圖片與瀏覽器窗口無縫接合
大家有時候發(fā)現(xiàn)想把一幅圖片與瀏覽器窗口邊框無縫接合很難，總會有點距離。這是因為你沒有設(shè)置頁面邊距，在你的頁面<BODY>中加入以下代碼：
topmargin="0" leftmargin="0"
topmargin為與瀏覽器窗口頂部距離，此時為0，圖片與瀏覽器窗口無縫接合。
leftmargin="0"為與瀏覽器窗口左邊距離，此時為0。
（十）、如何讓下拉式菜單中的鏈接來打開一個新的窗口
先把下拉式菜單設(shè)置好，如：
<form method="POST" ><select name="D1" size="1">
<option value="http://member.netease.com/~tiatnao/">田濤站點</option>
<option value="http://webfaq.126.com/">網(wǎng)頁制作常見問題解答</option>
</select><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset"
name="B2"></p></form>
然后把<select name="D1" size="1">改為
<select onChange="javascript:window.open(this.options[this.selectedIndex].value)" > 即可。
十一、添加水平線：
按水平線按鈕 或選擇Tags > Horizontal Rule (CTRL+SHIFT+H)。 在水平線標記編輯器里，選居中對齊，設(shè)置顏色為黑色。80%寬度。按 Apply。 使用<HR> 插入一個水平線。你可以設(shè)置水平線的對齊、顏色、厚度、寬度?！?lt;HR ALIGN="CENTER" WIDTH="80%" COLOR="BLACK" NOSHADE>”寬度相對于頁面而言。你也可以使用絕對的像素值。加上 NOSHADE 使之成為一條實線，而沒有陰影。
十二、為什么Dreamweaver表格里的背景預(yù)覽不出來
這要看背景圖是設(shè)在<tr>里還是設(shè)在<td>里，設(shè)在<td>里時背景圖就可以顯示了。這個好象應(yīng)該是IE的問題。
十三、調(diào)查表單以Email形式發(fā)送
先在頁面上作一個調(diào)查表單，再將<form>標簽內(nèi)的代碼改為下面形式：
<form name="testform" method="post" action="mailto:abc@sina.com?subject=調(diào)查信息" enctype="text/plain"> 相關(guān)文章
本頁查看次數(shù):