【正文】 絡(luò)課件 ■ 【邊框】：用于設(shè)置表格外邊框的寬度。 ■ 【寬】：用于設(shè)置表格的寬度，單位為“百分比”或“像素”。下面我們以選擇整個(gè)表格為例，講解表格的屬性設(shè)置。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 551 【插入行或列】對(duì)話框 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 選擇【刪除行】命令，可以刪除所選的一行單元格。 ■ 選擇【插入行】命令，可以在所選單元格的上方插入一行單元格。 4) 單擊 按鈕，即可拆分單元格，原單元格中的內(nèi)容將保留在拆分后的左上角單元格中。如圖 547所示為合并前后的效果對(duì)比。按住 Ctrl鍵的同時(shí)單擊其它單元格，可以選擇多個(gè)不連續(xù)的單元格。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 將光標(biāo)指向表格的左邊框，當(dāng)光標(biāo)變?yōu)樾螤顣r(shí)單擊鼠標(biāo)，可以選擇一行單元格。 選擇表格、單元格的操作方法如下： ■ 將光標(biāo)指向表格邊框，單擊鼠標(biāo)，可以選擇整個(gè)表格。 4) 單擊 按鈕，即可在網(wǎng)頁(yè)中插入表格，如圖 546所示。 ■ 【單元格間距】：用于設(shè)置表格中單元格之間的間距。 ■ 【行數(shù)】和【列】：用于設(shè)置插入表格的行數(shù)和列數(shù)。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 使用表格 在 Dreamweaver CS4中，表格除了可以使大量的信息資料有組織地排列起來(lái)以便管理外，還可以用于網(wǎng)頁(yè)布局，即將網(wǎng)頁(yè)中的元素放到表格的單元格中進(jìn)行網(wǎng)頁(yè)排版，因此它是控制頁(yè)面整體布局的重要工具。 ■ 【 Wmode(窗口模式 )】：為 SWF文件設(shè)置窗口模式的參數(shù)，以避免與 DHTML元素沖突，默認(rèn)值是不透明。 ■ 【品質(zhì)】：用于設(shè)置 Flash動(dòng)畫(huà)對(duì)象的播放質(zhì)量。 ■ 【循環(huán)】：選擇該復(fù)選框，可以在瀏覽器中循環(huán)播放 Flash動(dòng)畫(huà)。 ■ 【寬】和【高】：用于設(shè)置 Flash動(dòng)畫(huà)對(duì)象的寬度和高度，單位為像素。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 2) 在【插入】工具欄中選擇【常用】標(biāo)簽，單擊其中的 按鈕，在打開(kāi)的菜單中選擇【 SWF】命令，則彈出【選擇文件】對(duì)話框。 ■ 【插入】：用于選擇要插入的導(dǎo)航條的方式，可以選擇“水平”或“垂直”方式。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 【替換文本】：用于輸入鼠標(biāo)經(jīng)過(guò)圖像時(shí)的替代文本。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 【狀態(tài)圖像】：用于輸入一般狀態(tài)下要顯示的圖像的路徑和文件名。 ■ 【導(dǎo)航條元件】：用于顯示所有的導(dǎo)航元件。制作導(dǎo)航條之前，必須先制作每一個(gè)導(dǎo)航按鈕的四種狀態(tài)，準(zhǔn)備好了四種狀態(tài)的圖片以后，就可以向網(wǎng)頁(yè)中插入導(dǎo)航條了。 【按下時(shí)，前往的 URL】：用于為鼠標(biāo)經(jīng)過(guò)圖像建立超鏈接。 【圖像名稱(chēng)】：用于輸入圖像名稱(chēng)。 1) 在【文件】面板中雙擊要編輯的網(wǎng)頁(yè)將其打開(kāi)。 ■ 在【替換】文本框中輸入熱點(diǎn)的說(shuō)明性文字。 ■ 選擇工具 ，可以選擇并移動(dòng)建立的熱點(diǎn)。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 538 建立的熱區(qū) 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 選擇工具 后在圖像上拖曳鼠標(biāo)，可以建立矩形熱點(diǎn)。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 536 【選擇文件】對(duì)話框 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 537 為圖像建立鏈接 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 除此之外，在 Dreamweaver中也可以為圖像的某一部分建立超鏈接，瀏覽網(wǎng)頁(yè)時(shí)單擊該部分圖像可以打開(kāi)鏈接的目標(biāo)文檔。 1) 在【文件】面板中雙擊“ ”網(wǎng)頁(yè)文件將其打開(kāi)，然后插入三幅圖像，作為導(dǎo)航按鈕，如圖 535所示。 ● 【對(duì)齊】：用于設(shè)置圖像與其周?chē)鷮?duì)象之間的對(duì)齊方式。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ●【原始】：用于顯示圖像被載入之前預(yù)先載入的低品質(zhì)圖像的 URL地址，以便縮短用戶(hù)的等待時(shí)間。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ●【編輯】：這里提供了編輯圖像的功能，既可以在源程序中編輯圖像，也可以在圖像瀏覽器中優(yōu)化圖像。 ● 【源文件】：用于顯示該圖像文件的 URL地址。要設(shè)置圖像的屬性，首先要選擇網(wǎng)頁(yè)中的圖像，這時(shí)【屬性】面板將顯示圖像的屬性，如圖 534所示。 4) 單擊 按鈕，在彈出的【復(fù)制文件為】對(duì)話框中將所選圖像文件保存在當(dāng)前站點(diǎn)中。 2) 在【插入】工具欄中選擇【常用】標(biāo)簽，單擊其中的 按鈕，在彈出的 【 選擇圖像源文件 】對(duì)話框中選擇要插入的圖像文件，這里選擇一幅站點(diǎn)之外的圖像，如圖 530所示。如果在建站前期沒(méi)有將圖像規(guī)劃在站點(diǎn)之內(nèi)，插入圖像時(shí)將彈出一個(gè)提示框，如圖 529所示，提示用戶(hù)將圖像復(fù)制到站點(diǎn)中。 9) 在 【 屬性 】 面板中切換到 CSS屬性面板，設(shè)置文字的相關(guān)格式，也可以建立 CSS規(guī)則格式化文本。 6) 在 【 屬性 】 面板的 【 格式 】 列表中選擇“標(biāo)題 2”選項(xiàng)，設(shè)置網(wǎng)頁(yè)的標(biāo)題。 2) 在 【 屬性 】 面板中單擊 按鈕，在彈出的 【 頁(yè)面屬性 】 對(duì)話框中切換到 【 外觀 (HTML)】 分類(lèi)，如圖 523所示。值得注意的是，輸入文本時(shí)按下空格鍵并不能移動(dòng)文字，這是因?yàn)樵?HTML代碼中不能輸入多個(gè)空格。 ●單擊文本顏色塊 ，在彈出的顏色列表中可以選擇文本的顏色。 ● 【字體】：用于選擇所需的字體。 Dreamweaver CS4將 CSS屬性面板與 HTML屬性面板集成在一起，在【屬性】面板中單擊 按鈕，可以切換到CSS屬性面板，如圖 521所示?？梢栽谄浜竺娴奈谋究蛑休斎胍溄游臋n的路徑名稱(chēng)，也可以單擊右側(cè)的 圖標(biāo)，在彈出的對(duì)話框中選擇鏈接的文檔，或者按住 圖標(biāo)指向要鏈接的文檔建立超鏈接。 ●單擊 按鈕和 按鈕，可以將所選文本加粗和傾斜。選擇要編輯的文本，此時(shí)的【屬性】面板如圖 520所示，在這里可以設(shè)置文本的各種格式。輸入文本的方法如下： 編輯教學(xué)網(wǎng)頁(yè) 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ●在編輯窗口中輸入所需的文本。如圖 519所示為在每個(gè)文件夾中建立的網(wǎng)頁(yè)“ ”、“ ”和“ ”。 4) 根據(jù)“ kejian”站點(diǎn)的要求，用同樣的方法再新建三個(gè)文件夾，分別命名為“ Chinese”、“ English”和“ Geography”，用于存放關(guān)于語(yǔ)文、英語(yǔ)和地理等方面的內(nèi)容，如圖 517 所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 〖例 52〗 為 kejian站點(diǎn)添加內(nèi)容。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 在站點(diǎn)中添加網(wǎng)頁(yè)文件與文件夾的方法基本一致，操作步驟如下： 1) 在【文件】面板中單擊鼠標(biāo)右鍵，則彈出一個(gè)快捷菜 單。 現(xiàn)在我們已經(jīng)創(chuàng)建了一個(gè)教學(xué)站點(diǎn)，不過(guò)，目前為止這個(gè)站點(diǎn)還是空的，沒(méi)有實(shí)際內(nèi)容，因此必須向站點(diǎn)中添加相關(guān)的內(nèi)容。 7) 單擊 按鈕，則通過(guò)向?qū)Ы⒘艘粋€(gè)本地教學(xué)站點(diǎn)。該對(duì)話框 詢(xún)問(wèn)用戶(hù)如何使用文件，這里選擇第一個(gè)選項(xiàng)，然后在下面的文本框中指定一個(gè)文件夾，Dreamweaver將在其中存儲(chǔ)站點(diǎn)文件。第二個(gè)選項(xiàng)要求輸入站點(diǎn)的 地址，如果還沒(méi)有域名，可以暫時(shí)不填。這兩種創(chuàng)建站點(diǎn)的方法都是通過(guò)向?qū)瓿傻模浅Ｖ庇^。其次，為了更好地管理站點(diǎn)內(nèi)容，便于以后的站點(diǎn)更新與維護(hù)工作，需要在站點(diǎn)文件夾下分別建立用于存放站點(diǎn)文件和素材的子文件夾，如用于存放圖像、動(dòng)畫(huà)、應(yīng)用程序、插件等的文件夾，文件夾的命名最好與所存放的內(nèi)容相關(guān)，以便查找。例如，為了使教學(xué)站點(diǎn)具有生動(dòng)性、吸引性，達(dá)到生動(dòng)簡(jiǎn)潔、便于教學(xué)的目的，要求每一部分都要有內(nèi)容文字、相關(guān)圖像，甚至還要有動(dòng)畫(huà)、聲音等裝飾。我們首先要考慮站點(diǎn)的服務(wù)對(duì)象，確定主題內(nèi)容，同樣是介紹語(yǔ)文、歷史、地理等學(xué)科的站點(diǎn)，我們是側(cè)重課外輔導(dǎo)，還是側(cè)重考試指南？這就是主題問(wèn)題，只有確定了主題，才能有的放矢地進(jìn)行工作。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 58 打開(kāi)的面板組 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 單擊面板組中的標(biāo)簽，可以在不同的面板之間切換。 在【屬性】面板的右下角單擊三角形的切換按鈕，可以將【屬性】面板切換為常用屬性或全部屬性模式，如圖 57所示。在頁(yè)面中選擇不同的對(duì)象時(shí)，【屬性】面板中將顯示出不同對(duì)象的屬性。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 狀態(tài)欄 在 Dreamweaver CS4狀態(tài)欄中可以顯示當(dāng)前光標(biāo)所在位置的 HTML標(biāo)記，通過(guò)此標(biāo)記可以確定所編輯的網(wǎng)頁(yè)內(nèi)容。單擊 按鈕可以進(jìn)入代碼視圖，這是一個(gè)用于編寫(xiě)和編輯HTML、 JavaScript、服務(wù)器語(yǔ)言代碼 (如 ASP或 ColdFusion標(biāo)記語(yǔ)言 )以及其他類(lèi)型代碼的手工編碼環(huán)境。 單擊【插入】工具欄中的不同標(biāo)簽可以進(jìn)行切換，每一個(gè)標(biāo)簽中包括了若干的插入對(duì)象按鈕。 對(duì)于老用戶(hù)而言，如果不適應(yīng)這種工作界面，可以通過(guò)界面切換菜單進(jìn)行切換，選擇適合自己的界面模式。 制作網(wǎng)絡(luò)課件實(shí)質(zhì)上就是建立教學(xué)站點(diǎn)， Dreamweaver CS4是目前最流行的一款所見(jiàn)即所得的網(wǎng)站開(kāi)發(fā)與網(wǎng)頁(yè)制作軟件，在制作網(wǎng)絡(luò)課件方面具有獨(dú)到的優(yōu)勢(shì)。因?yàn)榫W(wǎng)絡(luò)傳輸速度的“瓶頸”嚴(yán)重制約了大體積的“信息文件”的傳播與發(fā)送。正因?yàn)槿绱?，課件的體積往往很大，這與網(wǎng)絡(luò)傳輸是相互矛盾的。目前可以用于制作網(wǎng)絡(luò)課件的工具很多，幾乎所有的網(wǎng)頁(yè)制作軟件都可以用于制作網(wǎng)絡(luò)課件，例如 FrontPage、 Dreamweaver等，本章主要介紹 Dreamweaver CS4的應(yīng)用技術(shù)。第一次安裝該軟件并啟動(dòng)后，出現(xiàn)的工作界面如圖 51所示，該工作界面稱(chēng)為“設(shè)計(jì)器”界面。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 【插入】工具欄 Dreamweaver CS4的【插入】工具欄中包含了 8個(gè)標(biāo)簽，分別為：常用、布局、表單、數(shù)據(jù)、 Spry、 InContext Editing、文本、收藏夾，如圖 53所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 54 【文檔】工具欄 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 【文檔】工具欄中的前三個(gè)按鈕用于切換視圖模式。在該視圖中， Dreamweaver中顯示的文檔處于可視化編輯狀態(tài)，頁(yè)面效果類(lèi)似于在瀏覽器中查看頁(yè)面時(shí)看到的內(nèi)容。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 55 狀態(tài)欄 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 【屬性】面板 【屬性】面板用于顯示或修改當(dāng)前所選對(duì)象的屬性。如圖 56所示為選擇表格時(shí)的【屬性】面板。當(dāng)我們打開(kāi)一個(gè)面板時(shí)，與其成組的面板會(huì)同時(shí)出現(xiàn)，如圖58所示。例如，要建立一個(gè)教學(xué)網(wǎng)站，該網(wǎng)站主要介紹語(yǔ)文、歷史、地理等學(xué)科的教學(xué)內(nèi)容。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 以上三項(xiàng)工作完成以后，接下來(lái)需要收集與整理站點(diǎn)素材，這是一項(xiàng)費(fèi)時(shí)費(fèi)力的工作，需要精心組織與籌備。通常情況下，首先根據(jù)站點(diǎn)結(jié)構(gòu)在本地計(jì)算機(jī)上建立一個(gè)站點(diǎn)文件夾，如在 C盤(pán)根目錄下建立一個(gè)文件夾作為站點(diǎn)文件夾，命名為“教學(xué)站點(diǎn)”，用于存放站點(diǎn)的所有文件。 1．創(chuàng)建站點(diǎn) Dreamweaver CS4提供了兩種創(chuàng)建站點(diǎn)的方法：一是在啟動(dòng) Dreamweaver時(shí)通過(guò)歡迎畫(huà)面創(chuàng)建；二是在 Dreamweaver工作環(huán)境下，單擊菜單欄中的【站點(diǎn)】 \【新建站點(diǎn)】命令。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 59 歡迎畫(huà)面 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 2) 單擊【 Dreamweaver站點(diǎn)】選項(xiàng)，則彈出【 …… 的站點(diǎn)定義為】對(duì)話框，在該對(duì)話框中有兩個(gè)標(biāo)簽，其中【基本】標(biāo)簽就是站點(diǎn)定義向?qū)?，第一個(gè)對(duì)話框如圖 510所示，這里有兩個(gè)選項(xiàng)，第一個(gè)選項(xiàng)要求輸入站點(diǎn)名稱(chēng)，以便在Dreamweaver中標(biāo)識(shí)該站點(diǎn)，這里輸入“ kejian”。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 511 第二個(gè)向?qū)?duì)話框 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 4) 單擊 按鈕，進(jìn)入站點(diǎn)定義向?qū)У牡谌齻€(gè)對(duì)話框，如圖 512所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 512 第三個(gè)向?qū)?duì)話框 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 513 第四個(gè)向?qū)?duì)