大學(xué)計(jì)算機(jī)基礎(chǔ)課件第7章

1、大學(xué)計(jì)算機(jī)基礎(chǔ)教程人民郵電出版社第7章 網(wǎng)頁制作Dreamweaver CS3Dreamweaver CS3概述創(chuàng)建和管理站點(diǎn)7編輯網(wǎng)頁創(chuàng)建超鏈接層疊樣式表CSS庫和模板的應(yīng)用網(wǎng)站設(shè)計(jì)7.1 Dreamweaver CS3概述Dreamweaver CS3的工作界面 插入工具欄 文檔工具欄 文檔窗口 屬性面板 面板組 用于查看和設(shè)置當(dāng)前所選對象的屬性 單擊面板組的標(biāo)簽名或三角按鈕可展開/折疊該面板 7.2 創(chuàng)建和管理站點(diǎn)建立的網(wǎng)頁條理性、結(jié)構(gòu)性一定要合理，建立一個文件夾用于存放網(wǎng)站的所有文件，再在文件夾內(nèi)創(chuàng)建多個子文件夾，將文件分類，如圖片文件放在images文件夾內(nèi)，聲音文件存放在sound

2、s文件夾內(nèi)等。 1、 創(chuàng)建本地站點(diǎn) （1）利用向?qū)?chuàng)建本地站點(diǎn) 執(zhí)行“站點(diǎn)”|“管理站點(diǎn)”命令， 打開如圖所示的對話框 7.2 創(chuàng)建和管理站點(diǎn)（2）利用高級選項(xiàng)創(chuàng)建本地站點(diǎn) 執(zhí)行“站點(diǎn)”|“新建站點(diǎn)”命令，打開如下所示對話框 在“本地信息”選項(xiàng)中輸入相關(guān)信息后單擊確定按鈕，完成本地站點(diǎn)的創(chuàng)建。7.2 創(chuàng)建和管理站點(diǎn)2、新建和保存網(wǎng)頁（1）新建：選擇“文件”|“新建”命令，打開如圖所示的新建文檔對話框 7.2 創(chuàng)建和管理站點(diǎn)空白頁：用于創(chuàng)建包含預(yù)設(shè)計(jì)CSS布局的頁面，或者先創(chuàng)建一個完全空白的頁，然后創(chuàng)建自己的布局。空模板：可以使用“新建文檔”對話框來創(chuàng)建 Dreamweaver 模板。默認(rèn)情況下

3、，模板將保存在站點(diǎn)的 Templates 文件夾中。模板中的頁：可以選擇、預(yù)覽文檔并通過現(xiàn)有模板創(chuàng)建新的文檔。使用“新建文檔”對話框從 Dreamweaver 定義的任何站點(diǎn)中選擇模板，也可以使用“資源”面板從現(xiàn)有模板創(chuàng)建新的文檔。示例中的頁：Dreamweaver 附帶了幾種以專業(yè)水準(zhǔn)開發(fā)的頁面布局和設(shè)計(jì)元素文件?？梢曰谶@些示例文件開始設(shè)計(jì)站點(diǎn)頁面。當(dāng)創(chuàng)建基于示例文件的文檔時(shí)，Dreamweaver 會創(chuàng)建文件的副本。其他：使用“新建文檔”對話框中的“其他”類別，可以創(chuàng)建可能需要在 Dreamweaver 中使用的各種類型的頁面，例如 C#、VBScript 和 純文本頁面。7.2 創(chuàng)建和

4、管理站點(diǎn)注：為了便于管理，站點(diǎn)中要對網(wǎng)頁和素材進(jìn)行分類管理，可以創(chuàng)建多個子文件夾。方法為在“文件”面板中右擊站點(diǎn)名稱，從彈出的快捷菜單中選擇“新建文件夾”命令（2）保存新文檔 執(zhí)行“文件”|“保存”命令 【例1】 在nynu站點(diǎn)下創(chuàng)建一個index.html網(wǎng)頁，創(chuàng)建 一個flash子文件夾。3、管理web站點(diǎn) 執(zhí)行“站點(diǎn)”|“管理站點(diǎn)”命令，打開“管理站點(diǎn)”對話框?qū)胝军c(diǎn)：單擊“導(dǎo)入”按鈕導(dǎo)出網(wǎng)站：選擇網(wǎng)站，單擊“導(dǎo)出”按鈕，打開“導(dǎo)出站點(diǎn)”對話框，其默認(rèn)的保存類型為“站點(diǎn)定義文件（*.ste）”。刪除站點(diǎn)：選擇要刪除的站點(diǎn)，單擊“刪除”按鈕上傳文件到遠(yuǎn)程或測試服務(wù)器 ：選擇上傳文件，單擊工

5、具欄中的“上傳文件”按鈕 7.3 編 輯 網(wǎng) 頁1、添加和設(shè)置文本對象 直接輸入文本；復(fù)制文檔內(nèi)容；導(dǎo)入外部文檔 注：硬換行按Enter鍵； 軟換行按Shift+Enter組合鍵。 設(shè)置文本屬性：選中文本對象后，屬性面板中會顯示出文本的相關(guān)信息，如圖 用于標(biāo)題級別的設(shè)置 設(shè)置文本的CSS樣式 文本顏色的設(shè)置 創(chuàng)建鏈接 7.3 編 輯 網(wǎng) 頁2、添加水平分隔線 執(zhí)行“插入記錄”|“HTML”|“水平線”命令 3、設(shè)置網(wǎng)頁屬性 7.3 編 輯 網(wǎng) 頁4、網(wǎng)頁中圖像的使用 常見的網(wǎng)頁圖像格式 ：GIF、JPEG、PNG格式等。(1)插入普通圖像 執(zhí)行“插入記錄”|“圖像”命令 (2) 插入圖像占位符

6、 選擇“插入記錄”|“圖像對象”|“圖像占位符”命令 (3) 插入鼠標(biāo)經(jīng)過圖像 選擇“插入記錄”|“圖像對象”|“鼠標(biāo)經(jīng)過圖像”命令 7.3 編 輯 網(wǎng) 頁“插入鼠標(biāo)經(jīng)過圖像”對話框 (4) 設(shè)置背景圖像 選擇“修改”| “頁面屬性”命令 7.3 編 輯 網(wǎng) 頁(5) 插入導(dǎo)航條 執(zhí)行“插入記錄”|“圖像對象”|“導(dǎo)航條”命令 7.3 編 輯 網(wǎng) 頁(6)圖像編輯 (7)創(chuàng)建圖像熱點(diǎn) blank：將鏈接文件載入到新窗口中。_parent：將鏈接文件載入到父框架集或包含該鏈接的框架中。_self：將鏈接文檔作為鏈接載入同一框架或窗口中，此項(xiàng)為默認(rèn)選項(xiàng)。_top：將鏈接文檔載入到整個瀏覽器并刪除所

7、有框架。7.3 編 輯 網(wǎng) 頁5、插入Flash對象 在“常用”工具欄中單擊“媒體”按鈕右側(cè)的三角按鈕，從彈出的菜單中選擇“Flash”命令 (1)插入Flash動畫 7.3 編 輯 網(wǎng) 頁(2)插入Flash按鈕 7.3 編 輯 網(wǎng) 頁(3)插入Flash文本對象 7.3 編 輯 網(wǎng) 頁6、在網(wǎng)頁中添加聲音鏈接到音頻文件 在屬性面板中單擊“鏈接”選項(xiàng)右側(cè)的文件夾圖標(biāo) (2) 添加背景音樂 可以通過內(nèi)置行為添加，也可以通過代碼提示添加 內(nèi)置行為添加：執(zhí)行“窗口”|“行為”命令，打開“行為”面板，如下圖所示，在面板中單擊“添加行為”按鈕，選擇“建議不再使用”|“播放聲音”命令 代碼：如。loop

8、=-1 代表循環(huán)播放。7.3 編 輯 網(wǎng) 頁7、表格的創(chuàng)建和使用 作用：顯示數(shù)據(jù) ；定位 ；排版布局 ；制作各種風(fēng)格特效表格。插入表格 “常用”工具欄中的“表格”按鈕 “插入記錄”|“表格”命令 7.3 編 輯 網(wǎng) 頁(2) 添加表格數(shù)據(jù) 選定單元格，直接輸入(3) 導(dǎo)入外部表格數(shù)據(jù)文件 “文件”|“導(dǎo)入”|“表格式數(shù)據(jù)”命令或 “插入記錄”|“表格對象”|“導(dǎo)入表格式數(shù)據(jù)”命令 7.3 編 輯 網(wǎng) 頁(4)編輯表格 選擇 選擇整個表格 ： 方法1：單擊表格的左上角、表格的頂緣或底緣的任何位置或者行或列的邊框。 方法2：單擊某個表格單元格，然后在“文檔”窗口左下角的標(biāo)簽選擇器中選擇 標(biāo)簽。 方

9、法3：單擊某個表格單元格，然后選擇“修改”|“表格”|“選擇表格”命令。選擇單個或多個行或列：定位鼠標(biāo)指針使其指向行的左邊緣或列的上邊緣，當(dāng)鼠標(biāo)指針變?yōu)檫x擇箭頭時(shí)，單擊以選擇單個行或列，或進(jìn)行拖動以選擇多個行或列。7.3 編 輯 網(wǎng) 頁選擇單個單元格： 方法1：單擊單元格，然后在“文檔”窗口左下角的標(biāo)簽 選擇器中選擇 標(biāo)簽。 方法2：按住 Ctrl 單擊該單元格。選擇一行或矩形的單元格塊： 方法1：從一個單元格拖到另一個單元格。 方法2：單擊一個單元格，接著按住 Shift鍵單擊另一個單元格。這兩個單元格定義的直線或矩形區(qū)域中的所有單元格都將被選中。選擇不連續(xù)的單元格： Ctrl鍵+單擊要選擇

10、的單元格、行或列 ，再次單擊會將其從選擇中刪除 7.3 編 輯 網(wǎng) 頁添加與刪除行列 調(diào)整表格大小 拖動表格四周的控點(diǎn) 調(diào)整行高和列寬 拖動邊框線 表格屬性面板 7.3 編 輯 網(wǎng) 頁合并/拆分單元格 合并：選擇后在屬性面板中單擊合并單元格按鈕 拆分：選擇后在屬性面板中單擊拆分單元格按鈕(5)格式化表格 屬性面板中設(shè)置(6) 利用表格進(jìn)行頁面布局 8、AP的創(chuàng)建和使用 AP（層）是CSS中的定位技術(shù) 創(chuàng)建普通AP Div “布局”工具欄中的“繪制AP div”按鈕 “插入記錄”|“布局對象”|“AP div”命令 7.3 編 輯 網(wǎng) 頁(2)創(chuàng)建嵌入式AP元素 在已存在的AP元素中 創(chuàng)建(3)

11、設(shè)置AP元素的屬性 在“屬性”面板中進(jìn)行相應(yīng)的設(shè)置 (4) AP Div的基本操作 選擇AP元素 移動AP元素 對齊AP元素 調(diào)整AP元素大小 顯示和隱藏 AP元素(5)將AP Div轉(zhuǎn)換為表格 執(zhí)行“修改”|“轉(zhuǎn)換”|“將AP Div轉(zhuǎn)換為表格”命令 7.3 編 輯 網(wǎng) 頁(6) 將表格轉(zhuǎn)換為AP Div 執(zhí)行“修改”|“轉(zhuǎn)換”|“將表格轉(zhuǎn)換為AP Div”命令9、表單的創(chuàng)建和使用 (1)表單元素 7.3 編 輯 網(wǎng) 頁(2)創(chuàng)建表單 “表單”工具欄中的“表單”按鈕， “插入記錄”|“表單”|“表單”命令 (3)設(shè)置表單屬性 (4)插入表單對象 (5)檢查表單 7.4 創(chuàng)建超鏈接 1、鏈接路

12、徑 絕對路徑：提供鏈接文檔的完整地址的路徑 例如http:/ ， 文檔相對路徑：針對當(dāng)前打開的網(wǎng)頁而言，省略掉當(dāng)前文檔和所鏈接文檔相同的絕對路徑部分，只提供不同部分。 站點(diǎn)根目錄相對路徑：針對當(dāng)前站點(diǎn)而言的，它描述的是從站點(diǎn)的根文件夾到當(dāng)前網(wǎng)頁或?qū)ο蟮穆窂?。2、內(nèi)部鏈接(1)為文字和圖像添加超鏈接 (2)設(shè)置文字超鏈接的屬性 7.4 創(chuàng)建超鏈接3、外部鏈接 在鏈接文本框中輸入需鏈接到的網(wǎng)址 如“http:/”。4、錨點(diǎn)鏈接 創(chuàng)建錨記 “常用”工具欄中的“命名錨記”按鈕 “插入記錄”|“命名錨記”命令 鏈接錨記 (1) 選擇要鏈接到錨記的文字或圖片，拖動屬性面板中的 “指向文件”圖標(biāo)到創(chuàng)建的錨

13、記上。 (2) 在屬性面板中的“鏈接”文本框中輸入“#錨記名稱”，如 “#top”。7.4 創(chuàng)建超鏈接5、下載文件鏈接 與為文字或圖片添加超鏈接的方法相同 6、電子郵件鏈接 “常用”工具欄中的“電子郵件鏈接”按鈕 7.5 層疊樣式表CSS 1、創(chuàng)建樣式 “文本”|“CSS樣式”|“新建”命令2、管理CSS樣式 “窗口”| “CSS樣式”命令 3、編輯CSS規(guī)則 4、鏈接或?qū)胪獠繕邮奖?CSS樣式”面板中，選擇“附加樣式表”按鈕 5、應(yīng)用自定義CSS樣式 6、刪除自定義CSS樣式 7.6 庫和模板的應(yīng)用 庫是一種存放整個站點(diǎn)中重復(fù)使用或頻繁更新的頁面元素(如圖像、文本和其他對象)的文件，這些元素被稱為庫項(xiàng)目。1、創(chuàng)建庫項(xiàng)目 “窗口”| “資源”命令 2、刪除庫項(xiàng)目 “庫”面板中的“刪除”按鈕 3、利用庫項(xiàng)目更新網(wǎng)站 “修改”|“庫”|“更新頁面”命令 7.6 庫和模板的應(yīng)用模板是一種特殊類型的文檔，可用于設(shè)計(jì)固定的頁面布局。在網(wǎng)頁中使用模板可以統(tǒng)一整個站點(diǎn)的頁面風(fēng)格。4、創(chuàng)建模板 “文件”|“另存為模板”命令 5、添加可編輯區(qū)域 “插入記錄”|“模板對象”|“可編輯區(qū)域”命令 6、可編輯標(biāo)記屬性 “修改”|“模板”|“令屬性可編輯”命令 7、利用模板創(chuàng)建文檔 “新建文檔”對話框中單擊左側(cè)“模板中的頁”標(biāo)簽，從“站點(diǎn)”列表框中選擇模板所在站點(diǎn)，從右側(cè)列表框