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