【正文】 mweaver與網(wǎng)絡(luò)課件 使用超鏈接的操作步驟如下： 1) 選擇框架中要建立超鏈接的文本或其它對象。 2) 在【屬性】面板的【鏈接】文本框中輸入要鏈接的網(wǎng)頁的 URL地址，也可以利用 和 圖標(biāo)選擇網(wǎng)頁文件。 3) 在【屬性】面板的【目標(biāo)】選項(xiàng)中選擇用于顯示鏈接網(wǎng)頁的目標(biāo)窗口或框架。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 3) 在【屬性】面板的【目標(biāo)】選項(xiàng)中選擇用于顯示鏈接網(wǎng)頁的目標(biāo)窗口或框架。 ■ 選擇“ _blank”選項(xiàng)，表示在新的瀏覽器窗口中打開鏈接的網(wǎng)頁。 ■ 選擇“ _parent”選項(xiàng)，表示在當(dāng)前框架的父級框架中打開鏈接網(wǎng)頁。 ■ 選擇“ _self”選項(xiàng)，表示在當(dāng)前框架中打開鏈接的網(wǎng)頁。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 選擇“ _top”選項(xiàng)，表示在當(dāng)前網(wǎng)頁的最頂層框架集中打開鏈接的網(wǎng)頁。 ■ 選擇“ mainFrame”選項(xiàng)，表示在主框架中打開鏈接的網(wǎng)頁。 ■ 選擇“ leftFrame”選項(xiàng)，表示在左框架中打開鏈接的網(wǎng)頁。 ■ 選擇“ topFrame”選項(xiàng)，表示在上面的框架中打開鏈接的網(wǎng)頁。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 使用 CSS+DIV CSS是層疊樣式表的簡稱，它是一組格式設(shè)置規(guī)則，用于控制網(wǎng)頁內(nèi)容的外觀。使用 CSS可以非常靈活地控制頁面的外觀，可以控制許多文本屬性，如字體、大小、粗體、下劃線、文本陰影等，還可以確保在多個瀏覽器中以更加一致的方式處理頁面外觀。除此之外， CSS還可以控制網(wǎng)頁中塊級別元素的格式與定位，這將涉及到 DIV標(biāo)簽。 DIV標(biāo)簽是用來定義網(wǎng)頁內(nèi)容中的邏輯區(qū)域的標(biāo)簽，使用 DIV標(biāo)簽可以將內(nèi)容居中、創(chuàng)建列效果、創(chuàng)建不同的顏色區(qū)域等，另外還可以絕對定位，這時(shí)的 DIV標(biāo)簽視為 AP元素。 AP Div元素與以前版本中的圖層有一定的相似性，可以用于絕對定位網(wǎng)頁元素。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 1．插入 AP Div AP元素通常是絕對定位的 Div標(biāo)簽，它是分配有絕對位置的 HTML網(wǎng)頁元素，在 Dreamweaver CS4中可以輕松地創(chuàng)建 AP Div。在網(wǎng)頁中插入 AP Div的操作比較簡單，只需在【插入】工具欄的【布局】標(biāo)簽中單擊 按鈕，然后按住鼠標(biāo)左鍵 (此時(shí)光標(biāo)變?yōu)椤?+”形狀 )在編輯窗口中拖曳即可。 另外，如果按住 按鈕將其拖曳到編輯窗口中，或者單擊菜單欄中的【插入】 \【布局對象】 \【 AP Div】命令，則可以在編輯窗口中插入固定大小的 AP元素。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 在創(chuàng)建的 AP Div中定位光標(biāo)，即可向其中添加網(wǎng)頁元素，如圖片、動畫、文本、表格等內(nèi)容。 默認(rèn)情況下， Dreamweaver 中不顯示 AP Div錨點(diǎn)。如果讀者希望創(chuàng)建 AP Div后能夠看到其錨點(diǎn)，可以單擊菜單欄中的【編輯】 \【首選參數(shù)】命令，在彈出的【首選參數(shù)】對話框的【分類】列表中單擊“不可見元素”選項(xiàng)，選擇其中的【 AP元素的錨點(diǎn)】復(fù)選框即可，如圖 562所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 562 【首選參數(shù)】對話框 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 2．操作 AP Div 在編輯窗口中創(chuàng)建了多個 AP Div后，只有新創(chuàng)建的 AP Div處于激活狀態(tài)：其左上角有一個控制柄，同時(shí)邊框呈藍(lán)色高亮顯示，如圖 563所示，而未被激活的 AP Div邊框?yàn)榛疑? 如果要對其它的 AP Div進(jìn)行操作，必須先激活它或使其處于選擇狀態(tài)：單擊 AP Div內(nèi)的任何位置，可以激活它；單擊 AP Div的邊框或錨點(diǎn) ，可以選擇 AP Div元素，被選擇的 AP Div邊框上含有八個控制點(diǎn)，如圖 564所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 563 激活狀態(tài)的 AP Div 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 564 被選擇的 AP Div 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 激活或選擇 AP Div后，可以對其進(jìn)行如下操作： ■ 激活 AP Div后，可以對其中的內(nèi)容進(jìn)行編輯操作。 ■ 選擇 AP Div后，按住控制柄 拖曳鼠標(biāo)，可以移動AP Div的位置。另外，利用鍵盤上的方向鍵也可以移動它：每按一次方向鍵，可以使其向相應(yīng)的方向移動一個像素；如果按住 Shift鍵的同時(shí)按方向鍵，每次可以移動一個網(wǎng)格單位。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 選擇 AP Div后，按住邊框上的控制點(diǎn)拖曳鼠標(biāo)，可以調(diào)整其大小。按住 Ctrl鍵的同時(shí)每按一次方向鍵，可以向相應(yīng)的方向調(diào)整一個像素；如果按住 Ctrl+Shift鍵的同時(shí)按方向鍵，則每次可以調(diào)整一個網(wǎng)格單位。 在 Dreamweaver CS4中，如果要對 AP Div實(shí)現(xiàn)精確定位，需要先在編輯窗口中顯示網(wǎng)格，然后移動 AP Div中的對象，使其對齊網(wǎng)格。單擊菜單欄中的【查看】 \【網(wǎng)格設(shè)置】命令，可以顯示或編輯網(wǎng)格，如圖 565所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 565 【網(wǎng)格設(shè)置】子菜單 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 選擇【顯示網(wǎng)格】命令，可以在編輯窗口中顯示網(wǎng)格。 ■ 選擇【靠齊到網(wǎng)格】命令，可以使要移動的 AP Div自動吸附到網(wǎng)格線上。 ■ 選擇【網(wǎng)格設(shè)置】命令，可以打開【網(wǎng)格設(shè)置】對話框，如圖 566所示。在該對話框中可以設(shè)置網(wǎng)格線的顏色、網(wǎng)格線的間隔大小以及網(wǎng)格線的顯示方式等選項(xiàng)。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 566 【網(wǎng)格設(shè)置】對話框 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 3．設(shè)置 AP Div的屬性 在編輯窗口中選擇了 AP Div以后，可以在【屬性】面板中設(shè)置其相關(guān)屬性，如圖 567所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 567 【屬性】面板 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 【 CSSP元素】：用于為選定的 AP元素指定一個 ID，便于程序調(diào)用。 ■ 【左】：用于定義 AP元素左邊框距窗口左邊的距離。如果嵌套，則指距父 AP元素左邊框的距離。 ■ 【上】：用于定義 AP元素上邊框距編輯窗口頂邊的距離。如果嵌套，則指距父 AP元素上邊框的距離。 ■ 【寬】和【高】：用于設(shè)置 AP元素的寬度和高度。 ■ 【 Z軸】：用于設(shè)置 AP元素在 Z軸上的疊放順序。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 【可見性】：用于設(shè)置 AP元素的顯示或隱藏狀態(tài)。選擇“ inherit(繼承 )”選項(xiàng)，當(dāng)前 AP元素使用父 AP元素的可見性屬性；選擇“ visible(可見 )”選項(xiàng)，則無論父 AP元素是否可見，當(dāng)前 AP元素都可見；選擇“ hidden(隱藏 )”選項(xiàng)，則無論父 AP元素是否可見，該 AP元素都隱藏；選擇“ default(默認(rèn) )”選項(xiàng)，則使用瀏覽器的默認(rèn)設(shè)置。 ■ 【背景圖像】：用于為 AP元素選擇一個背景圖像。 ■ 【背景顏色】：用于為 AP元素選擇一種背景顏色。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 【溢出】：用于設(shè)置 AP 元素的內(nèi)容溢出時(shí)的處理方式。選擇“ visible(可見溢出 )”選項(xiàng)時(shí)，當(dāng) AP元素中的內(nèi)容超出了范圍，將自動向右下方擴(kuò)展，使溢出的部分也可以在頁面中顯示；選擇“ hidden(隱藏溢出 )”選項(xiàng)時(shí)，則不改變AP元素的大小，并隱藏溢出部分；選擇“ scroll(滾動溢出 )”選項(xiàng)時(shí)，將保持 AP元素的大小不變，但出現(xiàn)水平和垂直滾動條；選擇“ auto(自動溢出 )”選項(xiàng)時(shí)，可以根據(jù) AP元素的內(nèi)容是否溢出自動顯示滾動條。當(dāng)內(nèi)容溢出時(shí)，將顯示滾動條，反之則不顯示。 ■ 【剪輯】：用于設(shè)置 AP元素的可見區(qū)域。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 4．【 AP元素】面板 利用系統(tǒng)提供的【 AP元素】面板，可以對 AP元素進(jìn)行管理，例如顯示或隱藏、改變疊放順序、刪除等。 單擊菜單欄中的【窗口】 \【 AP元素】命令，可以打開【 AP元素】面板，如圖 568所示。【 AP元素】面板中顯示了網(wǎng)頁中的所有 AP元素，面板中的 AP元素按照 Z值大小降序排列，其中， Z值大的排在面板的上方，嵌套的 AP元素顯示在父級的下方。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 568 【 AP元素】面板 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 在【 AP元素】面板中可以對 AP元素進(jìn)行如下操作： ■ 單擊【 AP元素】面板中的眼睛圖標(biāo)，可以顯示或隱藏 AP元素。 ■ 雙擊 AP元素的名稱，可以更改其名稱 (注意不要使用中文，否則可能會導(dǎo)致錯誤 )。 ■ 在【 AP元素】面板中選擇 AP元素，按下鍵盤上的Delete鍵，可以刪除 AP元素及其中的內(nèi)容。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 單擊 AP元素的 Z軸值，輸入新的 Z值，可以改變其疊放順序。 ■ 在【 AP元素】面板中按住 AP元素的名稱拖曳鼠標(biāo)，可以改變其位置。 ■ 如果按住 Ctrl鍵的同時(shí)將一個 AP元素拖曳到另一個 AP元素位置處，則可以將被拖曳的 AP元素變?yōu)樽蛹墶? 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 在網(wǎng)絡(luò)上，表單的應(yīng)用范圍非常廣泛，無論是電子商務(wù)、網(wǎng)上調(diào)查、網(wǎng)上報(bào)名、網(wǎng)上留言和收發(fā)電子郵件等，都是通過表單來操作的。使用表單，網(wǎng)絡(luò)可以接收用戶輸入的信息，從而更好地實(shí)現(xiàn)用戶與網(wǎng)絡(luò)的交互。 在 Dreamweaver CS4中，用戶可以通過單擊【插入】工具欄的【表單】標(biāo)簽中的各個按鈕將表單域和表單對象添加到頁面中，也可以單擊菜單欄中的【插入】 \【表單】命令，將表單域和表單對象添加到頁面中。如圖 569所示為【插入】工具欄的【表單】標(biāo)簽。 表 單 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 569 【表單】標(biāo)簽 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 對于表單中的每一個表單對象的作用、屬性以及使用方法，我們不再詳細(xì)介紹，在這里主要通過實(shí)例學(xué)習(xí)如何創(chuàng)建表單。 〖例 57〗 制作一個表單。 1) 將光標(biāo)定位在網(wǎng)頁中要創(chuàng)建表單的位置處。 2) 在【插入】工具欄中選擇【表單】標(biāo)簽，單擊其中 的按鈕，則頁面中將出現(xiàn)一個紅色的虛線框，表示在頁面中創(chuàng)建了一個表單域，如圖 570所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 570 創(chuàng)建的表單域 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 571 【屬性】面板 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 4) 確認(rèn)光標(biāo)位置在表單域內(nèi)，在【表單】標(biāo)簽中單擊按鈕，則彈出【輸入標(biāo)簽輔助功能屬性】對話框，如圖 572所示。 ■ 【 ID】：用于為表單對象指定一個 ID號。 ■ 【標(biāo)簽】：用于輸入表單對象的標(biāo)簽文本。 ■ 【樣式】：用于選擇表單對象的標(biāo)簽文本在 HTML中的書寫規(guī)則。 ■ 【位置】：用于設(shè)置標(biāo)簽文本的位置。 ■ 【訪問鍵】：用于設(shè)置在瀏覽器中選擇表單對象的快捷鍵。 ■ 【 Tab鍵索引】：用于為表單對象設(shè)置 Tab順序。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 572 【輸入標(biāo)簽輔助功能屬性】對話框 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 5) 根據(jù)需要設(shè)置好選項(xiàng)，如在【標(biāo)簽】中輸入“姓名”，然后單擊 按鈕，則在表單域中插入了文本域，如圖573所示。 6) 在【屬性】面板中設(shè)置文本域的屬性，如圖 574所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 573 插入的文本域 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 574 【屬性】面板 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 【文本域】：用于輸入文本域的名稱。 ■ 【字符寬度】：用于設(shè)置文本域的寬度，即文本域中最多能夠顯示的字符數(shù)。 ■ 【最多字符數(shù)】：用于設(shè)置文本域中最多能夠輸入的字符數(shù)。 ■ 【類型】：用于設(shè)置文本域的類型，選擇“單行”選項(xiàng)時(shí)，文本域?yàn)閱涡形谋究?；選擇“多行”選項(xiàng)時(shí)，文本