1、4.1 表格的基本操作創建表格（1）打開“表格”對話框，如下圖：·選擇“插入記錄表格”命令。·選擇插入欄“常用”類別中的“表格”按鈕。·按Ctrl+Alt+T鍵。（2）設置表格的行數、列數、寬度和邊框等屬性后，單擊“確定”按鈕，即可創建一個表格。“表格”對話框·行和列：設置插入表格的行數和列數。·單元格邊距：指單元格內容和單元格邊框之間的距離，單位為像素。·單元格間距：指相鄰單元格之間的距離，單位為像素。·邊框：表格邊框線的寬度。表格寬度單位像素：表格的寬度是一個絕對值，大小不發生變化。百分比：表格的寬度是一個相對值，大小會

2、隨其父元素的改變而改變。提示表格寬度為百分比時，最外層表格的父元素為瀏覽器窗口，嵌套表格的父元素為其所在的單元格。創建表格時，如果沒有明確指定邊框粗細、單元格間距和單元格邊距的值，則大多數瀏覽器都按邊框粗細和單元格邊距為1、單元格間距為2來顯示表格。選擇表格元素選擇整個表格標簽選擇器中單擊<table>選擇“修改表格選擇表格”命令右單擊某個單元格，選擇“表格選擇表格”單擊表格的外邊框光標定位表格中，按兩次Ctrl+A快捷鍵選擇行直接用鼠標拖動單擊行中的某個單元格，在標簽選擇器中單擊<tr>鼠標指向表格行的左邊緣，指針變為“”時單擊選擇列直接用鼠標拖動鼠標指向列的上邊緣，

3、當鼠標指針變為“”時單擊推薦精選選擇列中的某個單元格，在“列標題”菜單中選擇“選擇列”命令選擇單個單元格按住Ctrl鍵在單元格內單擊將光標定位到單元格內，單擊標簽選擇器上的<td>將光標定位到單元格內，按Ctrl+A快捷鍵選擇連續單元格用鼠標從第一個單元格拖到最后一個單元格將光標定位到第一個單元格內，然后按住Shift鍵單擊最后一個單元格選擇不連續的多個單元格:按住Ctrl鍵單擊要選擇的單元格、行或列，再次單擊取消選擇。表格的基本操作（1）調整表格的大小鼠標指向控制柄呈雙向箭頭時拖動鼠標，即可調整整個表格的大小；也可用表格“屬性”面板精確指定表格的寬度和高度。提示當調整整個表格的大

4、小時，表格中所有單元格將按比例更改大小。如果表格的單元格指定了明確的寬度或高度，則調整表格大小將更改“文檔”窗口中單元格的可視大小，但不更改這些單元格指定的寬度和高度。（2）調整表格中行或列的大小·更改列寬度并保持整個表格的寬度不變 用鼠標拖動要更改列的右邊框，同時相鄰列的寬度也隨之更改，但整個表格的寬度沒有發生變化。 ·更改某個列的寬度并保持其它列的大小不變 按下Shift鍵，用鼠標拖動要更改列的右邊框，相鄰列的寬度不會改變，表格的總寬度將被更改，以容納正在調整的列。 ·調整行高 直接用鼠標拖動行的下邊框。（3）插入單行或單列·選中行或列，右單擊，在彈

5、出的快捷菜單中選擇“表格插入行”或“表格插入列”命令。·單擊某列的“列標題”菜單，選擇“左側插入列”或“右側插入列”。（4）插入多行或多列 選中行或列，右單擊，在彈出的快捷菜單中選擇“表格插入行或列”命令，彈出“插入行或列”對話框,如下圖所示。設置要插入的行（列）數及位置，單擊“確定”按鈕。推薦精選（5）刪除行或列 選中要刪除的行或列，右單擊在彈出的快捷菜單中選擇“表格刪除行”或“表格刪除列”命令。（6）合并單元格選擇相鄰的兩個或兩個以上的單元格 選擇“修改表格合并單元格”命令或按Ctrl+Alt+M快捷鍵或單擊屬性面板上的“合并單元格”按鈕。 （7）拆分單元格將光標定位到要拆分的單

6、元格中。執行下列操作之一，打開“拆分單元格”對話框。·選擇“修改表格拆分單元格”命令。·按Ctrl+Alt+S快捷鍵。·單擊屬性面板上的“拆分單元格”按鈕。設置要拆分的行數或列數，單擊“確定”按鈕。 （8）創建嵌套表格 嵌套表格是指在表格的單元格中插入新的表格。若要在表格單元格中插入嵌套表格，只需將光標定位到該單元格中，然后再插入表格即可。提示嵌套表格的寬度受所在單元格寬度的限制。在網頁表格中，表格嵌套層數不宜過多,否則會影響瀏覽速度。（9）使用“列標題”菜單 當選定表格或表格中有插入點，默認情況下，DreamweaverCS3會顯示表格寬度和每個表格列的列寬，寬

7、度旁邊是表格標題菜單與列標題菜單的箭頭，使用這些菜單可以快速選擇與表格相關的常用命令。推薦精選提示當頁面處于“設計”視圖時，如果創建表格后沒有看到表格寬度和標題菜單箭頭，可以選擇“查看可視化助理表格寬度”命令調出。4.2 設置表格屬性表格屬性的設置 單擊表格外邊框，選中整個表格，打開“表格”屬性面板。各選項的作用如下：·“表格Id”：表格的Id，用來輸入表格的名字。·“行”和“列”：用來指定表格中行、列的數目。·“寬”：以像素為單位或按百分比指定表格寬度。·“填充”：指單元格邊距,即單元格內容與邊框之間的距離。·“間距”：指單元格間距，即相鄰單

8、元格之間的像素數。·“對齊”：用于設置表格相對于同一段落中其他元素的顯示位置，包括“左對齊”、“右對齊”、“居中對齊”和“默認”4個選項。·“邊框”：指定表格邊框的寬度，單位為像素。·“背景圖像”：設置表格的背景圖像。·“背景顏色”：設置表格的背景顏色。·“清除列寬”按鈕：從表格中刪除所有明確指定的列寬。·“清除行高”按鈕：從表格中刪除所有明確指定的行高。·“將表格寬度轉換成像素”按鈕：將表格中每列的寬度設置為以像素為單位的當前寬度，同時將整個表格的寬度設置為以像素為單位的當前寬度。·“將表格寬度轉換成百分比”按鈕

9、：將表格中每列的寬度設置為按百分比表示的寬度，同時將整個表格的寬度設置為按百分比表示的寬度。單元格屬性的設置·“合并單元格”按鈕：將所選的單元格、行或列合并為一個單元格。只有當所選擇的區域為矩形時才可以合并這些單元格。·“拆分單元格”按鈕：將一個單元格拆分成多個單元格。一次只能拆分一個單元格，如果選擇的單元格多于一個，則此按鈕禁用。·“水平”和“垂直”列表框：設置單元格、行或列內容的水平對齊方式和垂直對齊方式。·“寬”和“高”：用來設置所選單元格的寬度和高度。·“不換行”復選框：如果選中了該復選框，當單元格內的數據超過單元的寬度時，單元格會自動

10、加寬來容納所有數據；如果沒有選中該復選框，則當單元格內的數據超過單元格的寬度時，自動換行。·“標題”復選框：可以將所選的單元格格式設置為表格標題單元格。默認情況下，表格標題單元格的內容為粗體且居中。推薦精選·“背景”和“背景顏色”：設置所選單元格、列或行的背景圖像和背景顏色。·“邊框”：設置單元格的邊框顏色。表格格式設置優先順序 提示在使用表格布局頁面時，首先需要對頁面中的各類元素作一個大致的規劃，事先構思好布局的草圖，這樣可以在創建表格時節省大量的時間。創建表格時，最外層表格寬度單位最好采用像素，內部嵌套表格寬度單位采用百分比。為防止瀏覽過程中出現水平方向的滾動

11、條，通常在800*600分辨率下，把表格寬度最大設置為778像素，在1024*768分辨率下最大設置為1002像素。為提高瀏覽速度，整個網頁不要放在一個表格里，表格的嵌套層次盡量要少。4.3 使用表格“布局”視圖表格三種視圖模式 視圖模式 特點標準模式 表格默認的視圖模式，表格及其內容的絕大部分操作適合在該模式下進行擴展表格模式 臨時向文檔中的所有表格添加單元格邊距和間距，并且增加表格的邊框可使編輯操作更加容易布局模式 主要用于繪制比較復雜的表格，可任意繪制布局表格和布局單元格表格布局模式 選擇“查看表格模式布局模式”命令切換到“布局”模式，如下圖所示。繪制布局表格 在“布局”模式下，單擊插入

12、欄“布局”類別中的“繪制布局表格”按鈕，在編輯窗口中拖動鼠標繪制表格。繪制布局單元格 單擊插入欄“布局”類別中的“布局單元格”按鈕，移動光標到要繪制單元格的位置，拖動鼠標繪制“布局單元格”。 如果要連續繪制多個布局單元格，只需在繪制過程中按下Ctrl鍵即可。推薦精選調整布局表格和布局單元格的大小 ·單擊布局表格的邊線選中布局表格，拖動布局表格的控制柄，即可改變布局表格的大小。·將鼠標指針移到布局單元格的藍色線條處，布局單元格的線條會變成紅色，此時單擊布局單元格的線條，即可選中布局單元格，拖動單元格的控制柄，即可改變單元格的大小。移動布局表格和布局單元格 選擇布局表格和布局單

13、元格后，用鼠標將其拖動到新的位置，也可按方向鍵移動，每按一次方向鍵，移動1個像素的距離，如果按住Shift鍵，每按一次方向鍵，移動10個像素的距離。提示布局表格繪制后，整個表格呈灰色顯示，不能在表格內插入圖像或輸入文本，要插入圖像或輸入文本，必須創建布局單元格。繪制布局表格時，可以在網頁的空白區域或其他布局表格內繪制布局表格。如果頁面已包含內容，則只能在現有內容的下方繪制新的布局表格。移動布局表格時，只有嵌套在其他表格中才可以移動。設置布局表格屬性 選中布局表格后，打開“布局表格”屬性面板。·“寬”選項區域：包括“固定”和“自動伸展”兩個單選按鈕。·“背景顏色”：用來設置布

14、局表格的背景顏色。·“填充”：用來設置各布局單元格中插入對象距邊線的距離。·“間距”：用來設置各布局單元格的間距。·“刪除所有間隔圖像”按鈕：它在添加間隔圖像后才會有效，單擊可刪除所有的間隔圖像。·“刪除嵌套”按鈕：單擊可刪除嵌套在布局表格內已選中的布局表格。設置布局單元格屬性選中布局單元格后，打開“布局單元格”屬性面板。 ·“水平”下拉列表框：用來設置布局單元格內對象在水平方向的對齊方式，包括“默認”、“左對齊”、“居中對齊”和“右對齊”4個選項。·“垂直”下拉列表框：用來設置布局單元格內對象在垂直方向的對齊方式，包括“默認”、“頂

15、端”、“中間”、“底部”和“基線”5個選項。·“不換行”復選框：選中該復選框后，可以取消外框線。推薦精選自動伸展和間隔圖像 “布局”模式中的表格列可以具有固定的寬度，或者其寬度可以自動擴展以盡可能大的填充瀏覽器窗口（自動伸展）。 自動伸展列：根據瀏覽器窗口的寬度自動進行調整。 間隔圖像（也叫做間隔 GIF）是透明的圖像，用來控制自動伸展表格中的間距。 當設置某列自動伸展時，Dreamweaver 將自動添加間隔圖像，除非指定不使用任何間隔圖像，也可以在每個列中手動插入和刪除間隔圖像。 在“布局”模式下，單擊單元格寬度右邊的箭頭，打開單元格菜單，可以進行間隔圖像的添加或刪除，設置列寬為

16、固定或自動伸展。 4.4 框架(集)的基本操作框架的基本概念 框架就是把瀏覽器窗口劃分為若干個區域，每個區域可以分別顯示不同的網頁內容。 框架的組成框架集:是一個HTML文件，定義了框架的數目、框架的大小和位置以及最初在每個框架中顯示的頁面的URL。單個框架:指瀏覽器窗口中的一個區域，它可以顯示與瀏覽器窗口的其他部分中所顯示內容無關的HTML文檔。創建框架集 （1）選擇“文件新建”命令，彈出“新建文檔”對話框，選擇“示例中的頁框架集”選項，在“示例頁”中選擇一種框架集。（2）單擊“創建”按鈕，彈出“框架標簽輔助功能屬性”對話框，保持默認設置，單擊“確定”按鈕。在當前文檔中創建框架集 在插入欄的

17、“布局”類別中，單擊“框架”按鈕的下拉箭頭，然后選擇預定義的框架集。選擇“插入記錄HTML框架”選項，在其子菜單中選擇預定義的框架集。提示框架集圖標提供應用于當前文檔的每個框架集的可視化表示形式。框架集圖標的藍色區域表示當前文檔，而白色區域表示將顯示其它文檔的框架。如果在已打開的文檔中，執行以上兩種操作，該文檔將自動插入到預定義框架集的藍色區域。在框架中插入HTML文件 （1）在框架中新建網頁文件 將光標定位到框架中，此時可以添加文本、圖像、表格等頁面元素，即創建一個新的網頁文件。（2）在框架中插入原有網頁文件推薦精選按下Alt鍵，單擊一個框架的內部選中該框架，單擊屬性面板 “源文件”后的“瀏

18、覽文件”按鈕，打開“選擇HTML文件”對話框。選擇要插入的網頁文件，單擊“確定”按鈕。“框架”面板選擇“窗口框架”命令，在面板組中打開“框架”面板，如下圖所示。 選擇框架和框架集 （1）在“框架”面板中選擇框架和框架集在“框架”面板中單擊框架集的最外邊框，將選中整個框架集。單擊次外邊框，將選中包含子框架的子框架集。單擊最內邊框或在框架內單擊，將選中相應框架。（2）在設計視圖中選擇框架和框架集單擊某個框架的邊框，可以選擇該框架所屬的框架集。按下Alt鍵的同時單擊某框架內部，可以選擇該框架。單擊框架的最外邊線可以選擇整個框架集。（3）選擇不同的框架或框架集Alt+“或”鍵 選擇下一個框架(集)Al

19、t+“”鍵 選擇父框架集Alt+“”鍵 選擇子框架（集）保存框架 （1）保存框架集 在“框架”面板或“文檔”窗口中選擇框架集，選擇“文件框架集另存為”或“文件保存框架頁”命令。（2）保存框架 將光標定位到要保存的框架中，單擊“文件保存框架”命令，輸入網頁文件名，單擊“保存”按鈕。推薦精選（3）同時保存框架集和框架 選擇“文件保存全部”命令，打開“另存為”對話框依次保存框架集和所有尚未保存過的框架。編輯框架 （1）在框架集中增加新框架將鼠標指針移到框架四周的邊緣或頂角處，鼠標呈雙向箭頭時，拖動鼠標在相應方向上增加新框架，如下圖所示。（2）調整框架的大小 拖動框架邊線，即可調整框架的大小。（3）拆

20、分框架 選中要拆分的框架，在按下Alt鍵的同時用鼠標拖動邊框拆分框架。（4）刪除框架 用鼠標拖動框架邊框到相鄰邊框，即可刪除相應框架。4.5設置框架(集)的屬性設置框架集屬性 選擇框架集后，打開“框架集”屬性面板，如下圖所示。 “邊框”：用于設置在瀏覽器中是否顯示框架邊框。“邊框寬度”：用來輸入邊框的寬度數值，其單位是像素。“邊框顏色”：用來設置邊框顏色，單擊下拉按鈕選取顏色，或在文本框中輸入顏色的十六進制代碼。“行列選定范圍”：用于選定要設置框架（集）。“值”：用于設置選中框架的寬度或高度。 推薦精選“單位”：用于設置“值”的單位，包括像素、百分比和相對。單位像素：輸入以像素為單位的數值，指

21、定選定列或行的大小。 百分比：指定選定列或行應相對于其框架集的總寬度或總高度的百分比 相對：在指定“像素”和“百分比”空間后，分配剩余的框架空間。 設置框架屬性 在“框架”面板中，單擊某框架的內部即可選中該框架，打開“框架”屬性面板，如下圖所示。 “框架名稱”：用于設置鏈接的“目標”屬性或腳本中引用該框架時所用的名稱。“源文件”：用于設置在該框架中顯示的網頁文件。“滾動”：用于設置是否顯示滾動條。“不能調整大小”：用于設置在瀏覽器中是否可以通過拖動框架邊框來調整框架大小。“邊框”：用于設置在瀏覽器中是否顯示框架邊框。“邊框顏色”：用于設置邊框顏色。“邊界寬度”：以像素為單位設置框架左邊框和內容

22、間的距離。“邊界高度”：以像素為單位設置框架上邊框和內容間的距離。框架中的鏈接 框架最常見的用途就是頁面導航。若要在一個框架中使用鏈接在另一個框架中打開目標文件，創建超鏈接時可通過“目標”屬性來指定打開目標文件的框架或窗口。（1）在“設計”視圖中，選擇文本或對象。 （2）在屬性面板的“鏈接”框中選擇要鏈接的目標文件。（3）在“目標”下拉列表中，選擇應顯示鏈接文檔的框架或窗口。框架鏈接中的“目標”屬性 _blank：在新的瀏覽器窗口中打開鏈接的文檔，同時保持當前窗口不變。 _parent：在顯示鏈接的框架的父框架集中打開鏈接的文檔，同時替換整個框架集。_self：在當前框架中打開鏈接，同時替換該

23、框架中的內容。 _top：在當前瀏覽器窗口中打開鏈接的文檔，同時替換所有框架。框架名稱：框架集中的每個框架的名稱也出現在該列表中，選擇一個框架名稱可以在該框架中打開鏈接的文檔。使用框架的優缺點 （1）優點訪問者的瀏覽器不需要為每個頁面重新加載與導航相關的圖形。 每個框架都可以有自己的滾動條，訪問者可獨立滾動這些框架。（2）缺點可能難以實現不同框架中各元素的精確對齊。對導航進行測試可能很耗時間。框架中加載的每個頁面的URL不顯示在瀏覽器中，因此訪問者可能難以將特定頁面設為書簽。推薦精選為不支持框架的瀏覽器提供內容 （1）選擇“修改框架集編輯無框架內容”命令。 （2）執行下列操作之一，編輯無框架內

24、容。 在“文檔”窗口中，像處理普通文檔一樣鍵入或插入內容。 選擇“窗口代碼檢查器”，將插入點放在noframes標簽內部的body標簽之間，然后鍵入內容的HTML代碼。（3）再次選擇“修改框架集編輯無框架內容”命令，返回到框架集文檔的普通視圖。4.6 AP Div的基本操作AP Div的含義 AP Div類似于Dreamweaver CS3中的層，可以把它視為一種用來插入各種網頁對象、可自由精確定位和容易控制的容器。 創建AP Div 單擊插入欄“布局”類別中的“繪制AP Div”按鈕，在文檔窗口中拖動鼠標繪制AP Div。拖動插入欄“布局”類別中的“繪制AP Div”按鈕到頁面。選擇“插入記

25、錄布局對象AP Div”命令，可以在頁面光標處創建一個默認屬性的AP Div。設置AP Div的默認屬性 選擇“編輯首選參數”命令，打開“首選參數”對話框，如下圖所示，在“分類”列表中選擇“AP元素”，在右邊設置AP Div的默認屬性值。選擇AP Div的方法 單擊AP Div的邊框線。在“AP元素”面板中單擊AP Div的名稱。單擊AP Div的內部，會在AP Div矩形的左上角產生一個控制柄圖標，單擊控制柄即可選中與它對應的AP Div。按下Shift鍵，分別單擊要選擇的各個AP Div的內部或邊框線，可以選中多個AP Div。推薦精選調整AP Div的大小 拖動AP Div的控制柄。在A

26、P Div的“屬性”面板中，輸入“寬度”和“高度”值。按住Ctrl鍵，同時使用方向鍵，將以1px為單位精確調整大小。按住Shift+Ctrl鍵，同時使用方向鍵，將以10px為單位調整大小。調整AP Div的位置 選中AP Div后使用鼠標拖動。選中AP Div后使用方向鍵一次可移動1個像素。選中AP Div后按住Shift鍵同時使用方向鍵一次可移動10個像素。在AP Div的“屬性”面板中，輸入“左”和“上”的值可精確定位AP Div的位置。對齊AP Div 選中多個AP Div，選擇“修改排列順序”命令，選擇其子菜單中的命令，即可獲得相應的對齊效果。4.7 設置AP Div的屬性“CSS-P

27、元素”：用于輸入AP Div的名稱。“左”和“上”：用于設置AP Div左上角相對于頁面左上角的水平距離和垂直距離，單位是像素。對于嵌套中的子AP Div，則相對于父AP Div。“寬”和“高”：用于設置AP Div的大小，單位默認為像素。“Z軸”：用于確定AP Div在Z軸上的位置，即層疊順序。“可見性”:default：表示默認，其可見性由瀏覽器決定，大多數瀏覽器會繼承該AP Div的父AP Div的可見性。inherit：繼承父AP Div的可見性。visible：顯示AP Div和其內對象。hidden：隱藏AP Div和其內對象。“溢出”:visible：AP Div高度自動增加，以

28、容納超出的內容。hidden：超出的內容隱藏。scroll：不管是否超出，都顯示滾動條。auto：自動識別是否顯示滾動條。“剪輯”：用于確定AP Div的可見區域。“背景圖像”：用于確定AP Div的背景圖像。“背景顏色”：用于確定AP Div的背景顏色。4.8 AP Div在排版中的應用推薦精選“AP元素”面板選擇“窗口AP元素”命令或按F2鍵均可打開“AP元素”面板。改變AP Div的層疊順序AP Div可以重疊在一起，要改變其層疊順序，可使用以下方法： 選中AP Div，在屬性面板的“Z軸”框中直接輸入Z值。 在“AP元素”面板中，使用鼠標直接拖動AP Div到指定位置。 在“AP元素”

29、面板中，單擊AP Div的Z值，直接輸入新的Z值。提示Z軸的數值越大，AP Div的位置越靠上，Z軸的值可以是正數，也可以是負數，但不能為小數。設置AP Div的可見性選中AP Div，在屬性面板的“可見性”列表中選擇可見性屬性。在“AP元素”面板中，通過單擊眼睛圖標進行設置，如下圖所示。創建嵌套AP Div創建嵌套AP Div可使用以下方法： 在“首選參數”對話框“AP元素”類別中，勾選“嵌套”復選框，再將插入點置于一個AP Div中繪制一個AP Div。 如果沒有勾選“嵌套”屬性，則需要按住Alt鍵在現有AP Div中繪制一個AP Div。 在“AP元素”面板中,按住Ctrl鍵拖動一個AP

30、 Div的名稱到另一個AP Div的名稱上,即將拖動的AP Div插入到另一個AP Div中。推薦精選提示創建嵌套AP Div后，選定父AP Div后，子AP Div也會被選定；在移動或復制父AP Div時，子AP Div也會隨之被移動或復制；刪除父AP Div，子AP Div也將一并被刪除。子AP Div的任何操作不會影響父AP Div。表格與AP Div的相互轉換（1）AP Div轉換為表格 選擇“修改轉換將AP Div轉換為表格”命令，彈出“將AP Div轉換為表格”對話框，設置后，單擊“確定”按鈕。（2）表格轉換為AP Div 選擇“修改轉換將表格轉換為AP Div”命令，彈出“將表格

31、轉換為AP Div”對話框，設置后，單擊“確定”按鈕。 4.9 模板的建立創建模板創建模板的方法有兩種，一是將原有頁面轉存為模板文件，另一種是新建一個模板文件。（1）新建一個模板文件 選擇“文件新建文檔”命令，打開“新建文檔”對話框，依次選擇“空白頁HTML模板”，單擊“創建”按鈕。（2）把現有文檔轉存為模板打開要轉存為模板的網頁文件。選擇“文件另存為模板”或“插入記錄模板創建模板”命令，彈出“另存模板”對話框，如下圖所示。選擇一個用來保存模板的站點，在“另存為”文本框中輸入模板名稱，單擊“保存”按鈕。推薦精選提示Dreamweaver CS3將模板文件以擴展名 .dwt 保存到站點本地根目錄的Templates文件夾中。如果該Templates文件夾在站點中尚不存在，Dreamweaver CS3將在保存新建模板時自動創建該文件夾。可編輯區域的建立與取消模板被創建后，所有的區域為鎖定區域，若要使用模板創建網頁，必須設置可編輯區域。（1）在模板文檔中，選擇要設置為可編輯區域的文本或內容，或將光標定位到要插入可編輯區域的地方。（2）按Ctrl+Alt+V快捷鍵或選擇“插入記錄模