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

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

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

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

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

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

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

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

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

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

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

11、表框中的一種特例，它通常顯示為一行，單擊右側(cè)的箭頭，則展開下拉列表，允許進(jìn)行選擇，通常這種下拉列表稱為“下拉菜單”。17.7.5 17.7.5 插入跳轉(zhuǎn)菜單插入跳轉(zhuǎn)菜單跳轉(zhuǎn)菜單可建立URL與列表/菜單中選項(xiàng)之間的關(guān)聯(lián)。通過在列表中選擇一項(xiàng)，瀏覽器將跳轉(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的基本概念的基本概念所謂樣式就是層疊樣式表，用來控制一個(gè)文檔中的某一文本區(qū)域外觀的一組格式屬性。使用CSS能夠簡(jiǎn)化網(wǎng)頁代碼，加快下載顯示速度，也減少了需要上傳的代碼數(shù)量，大大減少了重復(fù)勞動(dòng)的工作量。樣式表是對(duì)HTML語法的一次重大革新。如今網(wǎng)頁的排版格式越來越復(fù)雜，很多效果需要通過CSS來實(shí)現(xiàn)，Adobe Dreamweaver CS5在CSS功能設(shè)計(jì)上做了很大的改進(jìn)。同HTML相比，使用CSS樣式表的好處除了在于它可以同時(shí)鏈接多個(gè)文檔之外，當(dāng)CSS樣式更新或修改后，所有應(yīng)用了該樣式表的文檔都會(huì)被自動(dòng)更新 。17.8.2 17.8

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

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