【正文】 er CS4中，表格除了可以使大量的信息資料有組織地排列起來以便管理外，還可以用于網(wǎng)頁布局，即將網(wǎng)頁中的元素放到表格的單元格中進(jìn)行網(wǎng)頁排版，因此它是控制頁面整體布局的重要工具。 ■ 【單元格間距】：用于設(shè)置表格中單元格之間的間距。 選擇表格、單元格的操作方法如下： ■ 將光標(biāo)指向表格邊框，單擊鼠標(biāo)，可以選擇整個(gè)表格。按住 Ctrl鍵的同時(shí)單擊其它單元格，可以選擇多個(gè)不連續(xù)的單元格。 4) 單擊 按鈕，即可拆分單元格，原單元格中的內(nèi)容將保留在拆分后的左上角單元格中。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 551 【插入行或列】對話框 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 選擇【刪除行】命令，可以刪除所選的一行單元格。 ■ 【寬】：用于設(shè)置表格的寬度，單位為“百分比”或“像素”。 ■ 單擊 按鈕，可以將表格寬度轉(zhuǎn)換為像素。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 553 Photoshop CS的幫助頁面 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 1．建立框架 建立框架的基本操作步驟如下： 1) 在【插入】工具欄中選擇【布局】標(biāo)簽，單擊其中的 按鈕，則彈出一個(gè)菜單，如圖 554所示。 ■ 在網(wǎng)頁中按住 Alt鍵單擊框架，可以選擇該框架，被選擇的框架在頁面中以虛線邊框表示。大多數(shù)瀏覽器的默認(rèn)設(shè)置為“是”，即顯示框架集邊框。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 560 【屬性】面板 (2) 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 【框架名稱】：用于定義所選框架的名稱，該名稱用于創(chuàng)建超鏈接。該顏色將覆蓋框架集的邊框顏色。該對話框中默認(rèn)的名稱為“ Untitled ”，提示用戶現(xiàn)在保存的是框架集文件。 3) 在【屬性】面板的【目標(biāo)】選項(xiàng)中選擇用于顯示鏈接網(wǎng)頁的目標(biāo)窗口或框架。 ■ 選擇“ topFrame”選項(xiàng)，表示在上面的框架中打開鏈接的網(wǎng)頁。 另外，如果按住 按鈕將其拖曳到編輯窗口中，或者單擊菜單欄中的【插入】 \【布局對象】 \【 AP Div】命令，則可以在編輯窗口中插入固定大小的 AP元素。另外，利用鍵盤上的方向鍵也可以移動它：每按一次方向鍵，可以使其向相應(yīng)的方向移動一個(gè)像素；如果按住 Shift鍵的同時(shí)按方向鍵，每次可以移動一個(gè)網(wǎng)格單位。在該對話框中可以設(shè)置網(wǎng)格線的顏色、網(wǎng)格線的間隔大小以及網(wǎng)格線的顯示方式等選項(xiàng)。 ■ 【 Z軸】：用于設(shè)置 AP元素在 Z軸上的疊放順序。 ■ 【剪輯】：用于設(shè)置 AP元素的可見區(qū)域。 ■ 在【 AP元素】面板中按住 AP元素的名稱拖曳鼠標(biāo)，可以改變其位置。 1) 將光標(biāo)定位在網(wǎng)頁中要創(chuàng)建表單的位置處。 ■ 【 Tab鍵索引】：用于為表單對象設(shè)置 Tab順序。 ■ 【類型】：用于設(shè)置文本域的類型，選擇“單行”選項(xiàng)時(shí)，文本域?yàn)閱涡形谋究?；選擇“多行”選項(xiàng)時(shí)，文本。 ■ 【位置】：用于設(shè)置標(biāo)簽文本的位置。 表 單 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 569 【表單】標(biāo)簽 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 對于表單中的每一個(gè)表單對象的作用、屬性以及使用方法，我們不再詳細(xì)介紹，在這里主要通過實(shí)例學(xué)習(xí)如何創(chuàng)建表單。 ■ 在【 AP元素】面板中選擇 AP元素，按下鍵盤上的Delete鍵，可以刪除 AP元素及其中的內(nèi)容。選擇“ 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)容是否溢出自動顯示滾動條。如果嵌套，則指距父 AP元素上邊框的距離。 ■ 選擇【靠齊到網(wǎng)格】命令，可以使要移動的 AP Div自動吸附到網(wǎng)格線上。 第 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)行編輯操作。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 1．插入 AP Div AP元素通常是絕對定位的 Div標(biāo)簽，它是分配有絕對位置的 HTML網(wǎng)頁元素，在 Dreamweaver CS4中可以輕松地創(chuàng)建 AP Div。 ■ 選擇“ mainFrame”選項(xiàng)，表示在主框架中打開鏈接的網(wǎng)頁。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 使用超鏈接的操作步驟如下： 1) 選擇框架中要建立超鏈接的文本或其它對象。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 561 【另存為】對話框 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 2) 在對話框中選擇保存 HTML文件的位置和文件的保存類型。選擇“是”選項(xiàng)時(shí)，將顯示框架的邊框；選擇“否”選項(xiàng)時(shí)，將隱藏框架的邊框；選擇“默認(rèn)”選項(xiàng)時(shí)，將顯示默認(rèn)的框架邊框。 ■ 【單位】：用于設(shè)置所選框架的尺寸單位，可以選擇“像素”、“百分比”或“相對”。 ■ 【邊框】：用于設(shè)置所選框架集邊框是否在瀏覽器窗口中顯示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 2．編輯框架 在網(wǎng)頁中插入框架之后，還可以進(jìn)行編輯操作，如選擇框架、修改框架、刪除框架、拆分框架等。框架集在瀏覽器中不顯示，它只是用于存儲框架的一個(gè)容器。 ■ 單擊 按鈕，可以取消單元格的寬度設(shè)置，使其寬度隨單元格的內(nèi)容自動縮放。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 552 【屬性】面板 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 【表格】：用于設(shè)置表格的名稱。 ■ 選擇【插入行或列】命令，則彈出【插入行或列】對話框，如圖 551所示。 2) 單擊【屬性】面板中的 按鈕，則彈出【拆分單元格】對話框，如圖 548所示。另外，單擊狀態(tài)欄上的 標(biāo)記，可以選擇光標(biāo)所在的一行單元格。當(dāng)然，用戶也可以從外部導(dǎo)入其它軟件編輯的表格，如 Excel電子表格等。 ■ 【 邊框粗細(xì) 】 ：用于設(shè)置表格的邊框?qū)挾取? ■ 單擊 按鈕，可以在編輯的頁面中播放 Flash動畫。 ■ 【垂直邊距】：用于設(shè)置 Flash動畫對象與周圍元素上下邊界的距離。 4) 單擊 按鈕，將位于站點(diǎn)文件夾之外的動畫復(fù)制到站點(diǎn)文件夾中后，則在網(wǎng)頁中插入了 Flash動畫，如圖 544所示。在其后面的下拉列表中可以選擇顯示目標(biāo)文檔的窗口。單擊其右上角的按鈕或按鈕，可以調(diào)整導(dǎo)航元件的排列順序。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 541 鼠標(biāo)經(jīng)過圖像的瀏覽效果 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 5．創(chuàng)建導(dǎo)航條 在網(wǎng)頁中，導(dǎo)航條的作用不可忽視，使用它可以在站點(diǎn)的網(wǎng)頁之間自由跳轉(zhuǎn)。 3) 在【插入】工具欄中選擇【常用】標(biāo)簽，單擊 右側(cè)的小箭頭，在打開的菜單中選擇【鼠標(biāo)經(jīng)過圖像】命令，則彈出【插入鼠標(biāo)經(jīng)過圖像】對話框，如圖 540所示。 ■ 在【鏈接】文本框中輸入要鏈接的目標(biāo)文檔的 URL地址。具體操作步驟如下： 1) 選擇網(wǎng)頁中要建立熱點(diǎn)超鏈接的圖像。為整個(gè)圖像建立鏈接的方法比較簡單，只需選擇要建立超鏈接的圖像，在【屬性】面板的【鏈接】文本框中輸入要鏈接的目標(biāo)文檔的 URL地址，或者利用 和 圖標(biāo)選擇要鏈接的目標(biāo)文檔即可。 ● 【水平邊距】：用于設(shè)置圖像與其周圍對象在水平方向的空白距離。在其下方的【 ID】文本框中可以為圖像文件命名，該名稱可以用于腳本的調(diào)用。提示所選的圖像文件不在站點(diǎn)中，發(fā)布時(shí)可能會出現(xiàn)錯誤。在 Dreamweaver中，既可以使用動態(tài)圖像，也可以使用靜態(tài)圖像，但無論使用哪種圖像，首先要考慮文件的大小，例如，使用靜態(tài)圖像時(shí)最好使用 GIF、 JPG或 PNG格式的圖像，因?yàn)檫@些圖像的體積相對較小。 4) 單擊對話框中的 按鈕，完成頁面屬性的設(shè)置，則為網(wǎng)頁設(shè)置了標(biāo)題欄文字與背景圖像，如圖 525所示。 ●分別單擊 按鈕，可以使光標(biāo)所在的段落或所選擇的段落實(shí)現(xiàn)左對齊、居中對齊、右對齊和兩端對齊。 ●單擊 按鈕，則打開【 CSS規(guī)則定義】對話框，用于設(shè)置 CSS的各項(xiàng)屬性；如果從【目標(biāo)規(guī)則】列表中選擇“新 CSS規(guī)則”選項(xiàng)，并單擊 按鈕，則可以新建CSS規(guī)則。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ●單擊 或 按鈕，可以使光標(biāo)所在的段落向右或向左縮進(jìn)。 ●對于大量的文本，可以使用“復(fù)制 /粘貼”的方法將其它文件中的文本復(fù)制到當(dāng)前網(wǎng)頁中。 6) 在光標(biāo)位置處輸入網(wǎng)頁文件的名稱，如“ ”，按下 Enter鍵確認(rèn)，如圖 518所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 516 新建的網(wǎng)頁文件 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 3) 在光標(biāo)位置處輸入網(wǎng)頁的名稱，然后按下 Enter鍵確認(rèn)，則完成了網(wǎng)頁文件的添加。單擊菜單欄中的【窗口】 \【文件】命令，或者按下 F8鍵，可以打開【文件】面板。該對話框詢問用戶是否要使用服務(wù)器技術(shù)，選擇 【 否，我不想使用服務(wù)器技術(shù) 】 選項(xiàng)，表示該站點(diǎn)是一個(gè)靜態(tài)站點(diǎn)，沒有動態(tài)頁。創(chuàng)建站點(diǎn)的基本結(jié)構(gòu)時(shí)首先要建立空白的 站點(diǎn)，其次是添加網(wǎng)頁文件與站點(diǎn)文件夾。當(dāng)確定了站點(diǎn)主題、組織結(jié)構(gòu)以后，接下來的工作就是設(shè)計(jì)網(wǎng)頁版面，網(wǎng)頁作為一種視覺語言，應(yīng)十分注重其版式的設(shè)計(jì)，其中主要包括色彩、構(gòu)圖兩大方面的內(nèi)容，這完全取決于制作者的綜合水平，包括審美能力、設(shè)計(jì)能力、文字能力等多方面的素質(zhì)。 單擊【窗口】菜單下的相應(yīng)命令，可以打開或關(guān)閉面板。 另外， Dreamweaver CS4的狀態(tài)欄上新增了視圖控制工具，其中選取工具用于選擇頁面中的操作對象；手形工具 用于平移視圖；縮放工具 用于放大或縮小視圖顯示；而設(shè)置縮放比率選項(xiàng)框 可以通過確切的數(shù)值控制視圖的縮放。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 53 【插入】工具欄 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 【文檔】工具欄 【文檔】工具欄中包含了代碼視圖、拆分視圖、設(shè)計(jì)視圖、實(shí)時(shí)視圖、實(shí)時(shí)代碼、文檔標(biāo)題、文件管理、瀏覽器預(yù)覽、可視化選項(xiàng)等按鈕，如圖 54所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 Dreamweaver CS4提供了多種工作界面，以適合不同的工作人員。第 5章 Dreamweaver與網(wǎng)絡(luò)課件 Dreamweaver CS4 此章節(jié)均為 Dreamweaver CS4的學(xué)習(xí) 以便于教學(xué)及自學(xué)者使用 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 概述 Dreamweaver CS4的工作界面 建立教學(xué)站點(diǎn) 編輯教學(xué)網(wǎng)頁 網(wǎng)頁的布局方法 表單 教學(xué)站點(diǎn)的發(fā)布 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 多媒體 CAI課件的特點(diǎn)是集文本、圖形圖像、聲音、動畫及數(shù)字電影于一體，可謂聲光電并存、聲情畫并茂。它是一款所見即所得的網(wǎng)頁編輯工具，具有功能強(qiáng)大、界面簡潔、簡單實(shí)用等特點(diǎn)，是最好的網(wǎng)頁制作軟件，也是制作網(wǎng)絡(luò)課件的首選軟件。單擊【插入】工具欄中的對象按鈕或者將按鈕拖曳到編輯窗口內(nèi)，即可將相應(yīng)的對象添加到網(wǎng)頁文件中，并可在網(wǎng)頁中編輯添加的對象。狀態(tài)欄上還可以顯示當(dāng)前網(wǎng)頁的編輯窗口大小、當(dāng)前網(wǎng)頁文件的大小與網(wǎng)頁的傳輸速度，如圖 55所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 56 【屬性】面板 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 57 切換后的【屬性】面板 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 面板組 面板組是指組合在一起的面板集合，它為我們編輯網(wǎng)頁提供了既直觀又快速的操作方法，是設(shè)計(jì)制作網(wǎng)頁時(shí)不可缺少的工具。 建立教學(xué)站點(diǎn) 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 確定了站點(diǎn)主題以后，需要進(jìn)行站點(diǎn)