第17章 在Dreamweaver中編輯HTML網(wǎng)頁

1、Dreamweaver是一個可視化的網(wǎng)頁設(shè)計和網(wǎng)站管理工具。它提供了強大的設(shè)計工具，在不用書寫一行代碼的情況下，就能夠快速創(chuàng)建各種極具動態(tài)HTML特性的網(wǎng)頁。Dreamweaver是完全可定制的，用戶可以通過書寫JavaScript代碼為Dreamweaver創(chuàng)建新的行為和屬性面板，以增強Dreamweaver本身的功能。了解Dreamweaver的基本操作界面 掌握在網(wǎng)頁中使用文本 插入圖像 插入多媒體 掌握鏈接的設(shè)置 網(wǎng)頁的布局 掌握表單的使用 使用CSS樣式表 使用行為 Dreamweaver 的操作界面主要由標題欄、菜單欄、文檔窗口、屬性面板、插入欄以及浮動面板組成，如圖17.1所示。

2、文本是網(wǎng)頁中十分重要的部分，擔負著傳遞信息的重要作用。雖然圖像及多媒體效果在網(wǎng)頁中所占的比例越來越大，但是在一些大型網(wǎng)站中，文字的主導(dǎo)地位是無可替代的。這是因為文字所占的存儲空間非常小，這樣以文本為主體的頁面下載速度很快，可以最佳地利用網(wǎng)絡(luò)帶寬。在文檔中插入文本的具體操作步驟如下。17.2.1 17.2.1 插入文本插入文本在文檔中輸入文本后，如果對文本的樣式不滿意，可在【屬性】面板中設(shè)置文本的相關(guān)屬性。設(shè)置文本屬性的具體操作步驟如下。17.2.2 17.2.2 設(shè)置文本屬性設(shè)置文本屬性17.2.3 17.2.3 插入特殊字符插入特殊字符特殊字符一般不能從鍵盤上直接輸入，Dreamweaver

3、中提供了各種特殊字符和符號，其中特殊字符包括標準7位ASCII碼字符集以外的字符。在這里以插入版權(quán)符號為例講述插入特殊字符的方法，具體操作步驟如下。17.2.4 17.2.4 插入水平線插入水平線水平線在網(wǎng)頁文檔中經(jīng)常用到，它主要用于分隔文檔內(nèi)容，使文檔結(jié)構(gòu)清晰明了，合理使用水平線可以獲得非常好的效果。一篇內(nèi)容繁雜的文檔，如果合理放置水平線，會變得層次分明，易于閱讀。下面通過實例講述在網(wǎng)頁中插入水平線的效果，插入水平線的具體操作步驟如下。圖像和文字是網(wǎng)頁中最重要的兩個元素。一個高質(zhì)量的網(wǎng)頁是離不開圖像的，制作精良的圖像可以大大增強網(wǎng)頁的美觀性，使網(wǎng)頁更加生動多彩。在頁面中如何用漂亮的圖像來吸引

4、瀏覽者的視線是每個網(wǎng)站制作者都需要面對的問題。17.3.1 17.3.1 在網(wǎng)頁中插入圖像在網(wǎng)頁中插入圖像在網(wǎng)頁中插入圖像的具體操作步驟如下。17.3.2 17.3.2 設(shè)置圖像屬性設(shè)置圖像屬性僅僅將圖像直接插入到網(wǎng)頁中，并不能達到正確使用圖像的目的。只有了解了圖像的屬性以及如何設(shè)置、修改這些屬性，才能創(chuàng)建出圖文并茂的網(wǎng)頁。設(shè)置圖像屬性的具體操作步驟如下 。可以在【屬性】面板中編輯圖像，這里集合了一些常用的圖像編輯工具，其中從左往右依次如下。17.3.4 17.3.4 插入鼠標經(jīng)過圖像插入鼠標經(jīng)過圖像鼠標經(jīng)過圖像是一種在瀏覽器中查看并使鼠標指針移過它時發(fā)生變化的圖像。插入鼠標經(jīng)過圖像，必須準備

5、兩幅圖像：主圖像（當首次載入頁面時顯示的圖像）和次圖像（當鼠標指針移過主圖像時顯示的圖像）。鼠標經(jīng)過圖像中的這兩幅圖像應(yīng)大小相等，如果這兩幅圖像大小不同，Dreamweaver將自動調(diào)整第二幅圖像的大小以匹配第一幅圖像的屬性。插入鼠標經(jīng)過圖像的具體操作步驟如下。在使用Dreamweaver制作網(wǎng)頁時可以快速、方便地為網(wǎng)頁添加聲音、影片等多媒體內(nèi)容，使網(wǎng)頁更加生動。還可以插入和編輯多媒體文件和對象，這些文件和對象主要包括Flash類、Java Applet類、ActiveX控件類，以及各種音頻、視頻文件。隨著寬帶在線點播技術(shù)的發(fā)展，多媒體在網(wǎng)絡(luò)上得到了更廣泛的應(yīng)用，對網(wǎng)頁設(shè)計也提出了更高的要求，

6、再不是以前在網(wǎng)頁中制作多媒體效果時僅插入一些簡單的背景音樂和音效。插入Flash的具體操作步驟如下。17.4.2 17.4.2 打開瀏覽器窗口打開瀏覽器窗口使用【打開瀏覽器窗口】動作在打開當前網(wǎng)頁的同時，還可以再打開一個新的窗口。同時還可以編輯瀏覽窗口的大小、名稱、狀態(tài)欄菜單欄等屬性。打開瀏覽器窗口的具體操作步驟如下。17.4.3 17.4.3 插入插入JAVA APPLETJAVA APPLETJava Applet是一種鑲嵌在HTML網(wǎng)頁中，由支持Java的瀏覽器啟動運行的Java程序。插入Java Applet制作水中倒影的具體操作步驟如下 。每個網(wǎng)站實際上都是由眾多的網(wǎng)頁組成，網(wǎng)頁之間

7、通常都是通過超鏈接方式相互建立關(guān)聯(lián)。在Dreamweaver中，超鏈接的應(yīng)用范圍是很廣的，利用它不僅可以鏈接到其他頁面，還可以鏈接到其他圖像文件、多媒體文件等 。文字超鏈接是網(wǎng)頁中最常見的超鏈接，它能給瀏覽者很直觀的主題信息，對它所包含的信息一目了然。創(chuàng)建文字鏈接的具體操作步驟如下。可以將圖像作為鏈接的對象，使網(wǎng)頁更加美觀。建立圖像超鏈接與建立文本超鏈接的方法很相似。創(chuàng)建圖像鏈接的具體操作步驟如下。17.5.3 17.5.3 創(chuàng)建錨點鏈接創(chuàng)建錨點鏈接添加錨點鏈接就是創(chuàng)建命名錨記。錨點是一種定位的標記，可以在文檔中設(shè)置這種標記，并給該標記設(shè)置一個名稱，以便引用。創(chuàng)建錨點鏈接的具體操作步驟如下。本

8、節(jié)主要介紹制作網(wǎng)頁時的版式布局，Dreamweaver中布局網(wǎng)頁的常見工具是表格和Div。17.6.1 17.6.1 使用表格使用表格表格是網(wǎng)頁設(shè)計制作時不可缺少的重要元素。無論是用于對齊數(shù)據(jù)還是在頁面中對文本進行排版，表格都體現(xiàn)出強大的功能。它以簡潔明了和高效快捷的方式將數(shù)據(jù)、文本、圖像、表單等元素有序地顯示在頁面上，從而設(shè)計出版式漂亮的頁面。17.6.2 17.6.2 使用使用DIVDIVDIV是一種HTML頁面元素，可以理解為浮動在網(wǎng)頁上的一個頁面，它可以準確地定位到頁面上的任意位置，并可以規(guī)定它的大小，通過DIV可以對網(wǎng)頁進行精確定位。不僅如此，通過對DIV與行為的綜合使用，還可以創(chuàng)作

9、出賞心悅目的動作效果。使用表單可以制作簡單的交互式頁面，收集來自用戶的信息。表單是網(wǎng)站管理者與瀏覽者之間溝通的橋梁。收集、分析用戶的反饋意見，做出科學的、合理的決策，是一個網(wǎng)站成功的重要因素。有了表單，網(wǎng)站不僅是“信息提供者”，同時也是“信息收集者”。一個完整的表單有兩個重要的組成部分，一是頁面中進行描述的HTML代碼，二是服務(wù)器的應(yīng)用程序或客戶端腳本，用于分析處理用戶在表單中輸入的信息。17.7.1 17.7.1 插入表單插入表單表單可在文檔中定義一個表單區(qū)域，表單對象都是插入在這個表單區(qū)域中的。插入表單的具體操作步驟如下。17.7.2 17.7.2 插入文本域插入文本域文本域可用來接受任何

10、類型的字母、數(shù)據(jù)文本輸入內(nèi)容。文本域非常有用，大多數(shù)信息都可以以文本域的形式輸入。文本可以以單行或多行顯示，也可以以密碼的形式顯示，在這種情況下，輸入的文本將被替換為星號或項目符號。插入文本域的具體操作步驟如下。17.7.3 17.7.3 插入單選按鈕和復(fù)選框插入單選按鈕和復(fù)選框單選按鈕代表互相排斥的選擇，在單選按鈕組中選擇一個按鈕，就會取消選擇該組中的所有其他的按鈕。在復(fù)選框組中，可以同時選擇任意多個使用的選項。復(fù)選框可以單獨使用，也可成組使用。17.7.4 17.7.4 插入列表和菜單插入列表和菜單列表框可以以列表的方式顯示一組選項，根據(jù)設(shè)置的不同，可以在其中選擇一項或多項。下拉列表框是列

11、表框中的一種特例，它通常顯示為一行，單擊右側(cè)的箭頭，則展開下拉列表，允許進行選擇，通常這種下拉列表稱為“下拉菜單”。17.7.5 17.7.5 插入跳轉(zhuǎn)菜單插入跳轉(zhuǎn)菜單跳轉(zhuǎn)菜單可建立URL與列表/菜單中選項之間的關(guān)聯(lián)。通過在列表中選擇一項，瀏覽器將跳轉(zhuǎn)到指定的URL。插入跳轉(zhuǎn)菜單的具體操作方法如下。17.7.6 17.7.6 插入按鈕插入按鈕表單按鈕可控制表單操作，使用表單按鈕將輸入的表單數(shù)據(jù)提交到服務(wù)器或者重置該表單，還可以將其他已經(jīng)在腳本中定義的處理任務(wù)分配給按鈕。插入按鈕的具體操作步驟如下。CSS樣式是一組可以控制文本塊或文本區(qū)域外觀的格式屬性。使用樣式可以控制文檔的格式。使用外部樣式表

12、可以控制若干文檔的格式。17.8.1 CSS17.8.1 CSS的基本概念的基本概念所謂樣式就是層疊樣式表，用來控制一個文檔中的某一文本區(qū)域外觀的一組格式屬性。使用CSS能夠簡化網(wǎng)頁代碼，加快下載顯示速度，也減少了需要上傳的代碼數(shù)量，大大減少了重復(fù)勞動的工作量。樣式表是對HTML語法的一次重大革新。如今網(wǎng)頁的排版格式越來越復(fù)雜，很多效果需要通過CSS來實現(xiàn)，Adobe Dreamweaver CS5在CSS功能設(shè)計上做了很大的改進。同HTML相比，使用CSS樣式表的好處除了在于它可以同時鏈接多個文檔之外，當CSS樣式更新或修改后，所有應(yīng)用了該樣式表的文檔都會被自動更新 。17.8.2 17.8

13、.2 建立標簽樣式建立標簽樣式定義新的CSS的時候，會看到Dreamweaver提供的4種選擇方式：類樣式、標簽樣式ID和復(fù)核內(nèi)容樣式。17.8.3 17.8.3 建立類樣式建立類樣式類定義了一種通用的方式，所有應(yīng)用了該方式的元素在瀏覽器中都遵循該類定義的規(guī)則。類名稱必須以句點開頭，可以包含任何字母和數(shù)字組合（如.mycss）。如果沒有輸入開頭的句點，Dreamweaver將自動輸入。在【新建CSS規(guī)則】對話框的【選擇器類型】選項組中選擇【類】選項，在【選擇器名稱】中輸入名稱 。17.8.4 17.8.4 建立復(fù)合內(nèi)容樣式建立復(fù)合內(nèi)容樣式復(fù)合內(nèi)容樣式重新定義特定元素組合的格式，或其他CSS允許

14、的選擇器表單的格式（例如，每當h2標題出現(xiàn)在表格單元格內(nèi)時，就會應(yīng)用選擇器tdh2）。復(fù)合內(nèi)容樣式還可以重定義包含特定id屬性的標簽的格式（例如，由#myStyle定義的樣式可以應(yīng)用于所有包含屬性/值對id=myStyle的標簽）。利用CSS可以固定字體大小，使網(wǎng)頁中的文本始終不隨瀏覽器改變而發(fā)生變化，總是保持著原有的大小，CSS固定字體大小的效果如圖17.112所示，具體操作步驟如下。行為是用來動態(tài)響應(yīng)用戶操作、改變當前頁面效果或執(zhí)行特定任務(wù)的一種方法。使用行為可以使訪問者與網(wǎng)頁之間產(chǎn)生一種交互，以改變頁面或觸發(fā)任務(wù)。Dreamweaver中的行為是一個帶有面板對象設(shè)計思想的工具。它事實上是由預(yù)先編寫好的JavaScript代碼構(gòu)成。行為由事件和動作組成，在Dreamweaver中，事件是一個具有交互性的事物，也可以是一件具有某種自動化的事情。行為被規(guī)定為依附于訪問者頁面上的某個特定的元素，可以是一個文本或者一個圖像標記。行為有3個重要組成部分：對象、事件和動作。【設(shè)置狀態(tài)欄文本】動作用于在瀏覽器窗口底部左側(cè)