網(wǎng)頁(yè)制作技術(shù)教程 第2章 網(wǎng)頁(yè)制作.ppt

第2章網(wǎng)頁(yè)制作 本章教學(xué)目的 掌握頁(yè)面的整體控制和頭部?jī)?nèi)容設(shè)置的方法 熟練掌握在網(wǎng)頁(yè)中輸入 設(shè)置標(biāo)題和正文文字的方法 掌握在網(wǎng)頁(yè)中嵌入圖像 聲音 多媒體信息的方法 掌握建立各種形式超級(jí)鏈接的方法 熟練掌握網(wǎng)頁(yè)頁(yè)面布局的各種方法 掌握制作表單的方法 掌握在網(wǎng)頁(yè)中添加CSS的方法 掌握網(wǎng)頁(yè)特效的制作方法 掌握模板和庫(kù)的使用方法 掌握行為的使用方法 目錄 第一講文檔及文本操作第二講圖像及超級(jí)鏈接第三講媒體及表格第四講框架及圖層第五講表單 模板和庫(kù)第六講CSS樣式第七講行為 第一講文檔及文本操作 教學(xué)內(nèi)容 1新建空白文檔網(wǎng)頁(yè)2設(shè)置頁(yè)面屬性3保存文檔4文本的輸入及格式5列表 水平線等其他元素6在網(wǎng)頁(yè)中插入文件頭部?jī)?nèi)容 教學(xué)重點(diǎn)和難點(diǎn) 網(wǎng)頁(yè)文件的建立 頁(yè)面屬性的設(shè)置 網(wǎng)頁(yè)中文本等元素的輸入以及文件頭部?jī)?nèi)容的設(shè)置 文檔及文本操作 2 1文檔操作2 1 1新建空白文檔網(wǎng)頁(yè)2 1 2設(shè)置頁(yè)面屬性2 1 3保存文檔2 2文本操作2 2 1在網(wǎng)頁(yè)中輸入文本2 2 2設(shè)置文本屬性2 2 3文本換行2 2 4插入特殊字符和在字符之間添加空格2 2 5使用列表2 2 6在網(wǎng)頁(yè)中插入文件頭部?jī)?nèi)容2 2 7插入水平線和時(shí)間 2 1 1新建空白文檔網(wǎng)頁(yè) 新建一個(gè)網(wǎng)頁(yè)文檔有兩種方法 1 如果您的Dreamweaver運(yùn)行后顯示起始頁(yè) 則在起始頁(yè)中直接選擇 創(chuàng)建新項(xiàng)目 下的HTML選項(xiàng) 2 如果您的Dreamweaver運(yùn)行后不顯示起始頁(yè) 則選擇 文件 新建 命令 彈出 新建文檔 對(duì)話框 通過(guò)該對(duì)話框完成新建 任務(wù)2 1 1 新建空白文檔網(wǎng)頁(yè) 操作要求 在站點(diǎn)根目錄 D root 下建立一個(gè)名為index html的網(wǎng)頁(yè) 操作步驟 1 啟動(dòng)Dreamweaver后 在文件面板中選擇 站點(diǎn) 我的站點(diǎn) 如圖1所示 單擊文件面板中的按鈕 在 文件 的級(jí)聯(lián)菜單中選擇 新建文件 選項(xiàng) 如圖2所示 任務(wù)2 1 1 新建空白文檔網(wǎng)頁(yè) 圖1 圖2 任務(wù)2 1 1 新建空白文檔網(wǎng)頁(yè) 2 在文件面板的 站點(diǎn) 我的站點(diǎn) D root 文件夾中出現(xiàn)了一個(gè)新文件 名稱為untitled html 如圖3所示 將其重命名為index html 如圖4所示 3 在文件面板中 雙擊index html即可在Dreamweaver的文檔窗口中打開(kāi)該網(wǎng)頁(yè) 對(duì)其進(jìn)行編輯修改 任務(wù)2 1 1 新建空白文檔網(wǎng)頁(yè) 圖3 圖4 2 1 2設(shè)置頁(yè)面屬性 在制作網(wǎng)頁(yè)時(shí) 還需要對(duì)影響整個(gè)頁(yè)面的參數(shù)進(jìn)行必要的設(shè)置 選擇 修改 頁(yè)面屬性 命令 彈出 頁(yè)面屬性 對(duì)話框 如圖5所示 1 設(shè)置外觀2 設(shè)置鏈接3 設(shè)置標(biāo)題4 設(shè)置標(biāo)題和編碼5 設(shè)置跟蹤圖像 圖5 任務(wù)2 1 2 頁(yè)面屬性設(shè)置 操作要求 在文檔窗口中打開(kāi)D root index html網(wǎng)頁(yè) 將網(wǎng)頁(yè)標(biāo)題設(shè)為 我的主頁(yè) 文本字體為 仿宋 大小為12像素 顏色為 00FF00 操作步驟 1 在文檔窗口中打開(kāi)D root index html網(wǎng)頁(yè) 右擊窗口空白處 彈出一個(gè)快捷菜單如圖6所示 從中選擇 頁(yè)面屬性 命令 彈出 頁(yè)面屬性 對(duì)話框 如圖7所示 圖6 圖7 2 在 分類 列表框中選擇 外觀 選項(xiàng) 單擊 頁(yè)面字體 下拉列表框查找所需字體 在字體列表中無(wú)所需字體則選擇 編輯字體列表 彈出 編輯字體列表 對(duì)話框 3 在該對(duì)話框中的 可用字體 列表框中找到 仿宋 單擊按鈕 則 仿宋 字體添加到了 選擇的字體 列表框中 4 在 外觀 選項(xiàng)中 在 大小 下拉列表框中選擇12 在 文本顏色 文本框中輸入 00FF00 如圖8所示 在 分類 列表框中選擇 標(biāo)題和編碼 選項(xiàng) 在標(biāo)題對(duì)話框中輸入 我的主頁(yè) 單擊 確定 按鈕 操作完成 圖8 2 1 3保存文檔 新建一個(gè)文件后 選擇 文件 保存 命令 彈出 另存為 對(duì)話框 在 另存為 對(duì)話框選中保存路徑 給文件命名 選擇保存類型 然后單擊 保存 按鈕即可完成文件保存 2 2文本操作 文本是網(wǎng)頁(yè)中不可或缺的元素 網(wǎng)頁(yè)中的文本用來(lái)傳達(dá)網(wǎng)頁(yè)包含的各種信息與提示 文本的信息量大且生成的文件小 容易被瀏覽器下載 不會(huì)讓瀏覽者用過(guò)多的時(shí)間等待 因此 不論網(wǎng)頁(yè)內(nèi)容如何豐富 文本始終都是網(wǎng)頁(yè)中的基本元素 同時(shí)掌握好文本的使用也是網(wǎng)頁(yè)制作的基本功 2 2 1在網(wǎng)頁(yè)中輸入文本 在網(wǎng)頁(yè)中輸入文本的方法很簡(jiǎn)單 單擊網(wǎng)頁(yè)中要插入文本的空白區(qū)域 窗口隨即出現(xiàn)閃動(dòng)的光標(biāo) 選擇輸入法 輸入文字即可 也可以用復(fù)制方法將其他文本內(nèi)容粘貼過(guò)來(lái) 2 2 2設(shè)置文本屬性 文本的屬性主要通過(guò)文本的 屬性 面板來(lái)完成 如圖9所示 圖9 2 2 3文本換行 1 按Enter鍵可以換行 同時(shí)也就結(jié)束了一個(gè)段落 且可以使兩段之間多出一空行 2 按Shift Enter鍵 文檔在同一個(gè)段落中換行 兩行之間不產(chǎn)生空行 2 2 4插入特殊字符和在字符之間添加空格 1 插入特殊字符在Dreamweaver中可以插入的特殊字符包括版權(quán)符號(hào) 注冊(cè)商標(biāo)符號(hào) 商標(biāo)符號(hào) 英鎊符號(hào) 日元符號(hào) 左引號(hào) 右引號(hào) 破折號(hào)等 插入特殊字符可以通過(guò) 插入 菜單或 插入 面板來(lái)完成 2 在字符之間添加空格在Dreamweaver中只允許字符之間包含一個(gè)空格 若要在文檔中添加連續(xù)多個(gè)空格時(shí) 可執(zhí)行如下操作之一 1 在 插入 面板中選擇 文本 子面板 在其中單擊按鈕 打開(kāi)特殊字符面板 選擇 插入不換行空格 選項(xiàng) 2 選擇 插入 HTML 特殊字符 不換行空格 命令 3 按Ctrl Shift 空格鍵輸入 4 將輸入法切換到全角狀態(tài)再按空格鍵 2 2 5使用列表 在Dreamweaver中常用的列表分為有序列表 編號(hào)列表 無(wú)序列表 項(xiàng)目列表 和自定義列表3種形式 插入項(xiàng)目 編號(hào)列表的方法 將現(xiàn)有文本設(shè)置成項(xiàng)目列表 1 選擇要定義列表的文本 選擇 文本 列表 項(xiàng)目 編號(hào)列表 命令 2 選擇要定義列表的文本 在 屬性 面板中單擊列表按鈕 將新文本設(shè)置成項(xiàng)目列表 則在輸入文本之前 先選擇項(xiàng)目列表 2 2 6在網(wǎng)頁(yè)中插入文件頭部?jī)?nèi)容 一個(gè)網(wǎng)頁(yè)文檔由頭部和正文兩個(gè)部分組成 文檔的標(biāo)題信息就存儲(chǔ)在頭部位置 在瀏覽網(wǎng)頁(yè)時(shí) 它會(huì)顯示在瀏覽器的標(biāo)題欄中 當(dāng)該網(wǎng)頁(yè)被放入到瀏覽器的收藏夾時(shí) 文檔的標(biāo)題又會(huì)作為收藏夾中項(xiàng)目的名稱 頭部?jī)?nèi)容是網(wǎng)頁(yè)中必須添加的信息 它幫助網(wǎng)頁(yè)實(shí)現(xiàn)功能 1 插入Meta屬性Meta標(biāo)簽是記錄有關(guān)當(dāng)前頁(yè)面的信息 如字符編碼 作者 版權(quán)信息或關(guān)鍵字 的Head元素 2 插入關(guān)鍵字許多搜索引擎裝置 自動(dòng)瀏覽Web頁(yè)為搜索引擎收集信息以編入索引的程序 讀取關(guān)鍵字Meta標(biāo)簽的內(nèi)容 并使用該信息在它們的數(shù)據(jù)庫(kù)中將你的頁(yè)面編入索引 3 插入說(shuō)明文字許多搜索引擎裝置讀取說(shuō)明Meta標(biāo)簽的內(nèi)容 4 設(shè)置網(wǎng)頁(yè)的刷新使用刷新元素可以指定瀏覽器在一定的時(shí)間后應(yīng)該自動(dòng)刷新頁(yè)面 方法是重新載入當(dāng)前頁(yè)面或轉(zhuǎn)到不同的頁(yè)面 該元素通常用于在顯示了說(shuō)明URL已改變的文本消息后 將用戶從一個(gè)URL重定向到另一個(gè)URL 5 設(shè)置基礎(chǔ)屬性使用Base元素可以設(shè)置頁(yè)面中所有文檔相對(duì)路徑相對(duì)的基礎(chǔ)URL 6 設(shè)置鏈接標(biāo)簽的屬性使用 鏈接 標(biāo)簽可以定義當(dāng)前文檔與其他文件之間的關(guān)系 2 2 7插入水平線和時(shí)間 1 插入水平線水平線對(duì)于信息的組織很有用 在頁(yè)面上 可以使用一條或多條水平線以可視方式分隔文本和對(duì)象 2 插入時(shí)間Dreamweaver提供了一個(gè)方便的日期對(duì)象 該對(duì)象使可以以任何喜歡的格式插入當(dāng)前日期 包含或不包含時(shí)間都可以 并在每次保存文件時(shí)都自動(dòng)更新該日期 任務(wù)2 2 1 插入日期 操作要求 將當(dāng)前日期插入到文檔中 操作步驟 1 在 文檔 窗口中將插入點(diǎn)放在要插入日期的位置 2 執(zhí)行下列操作之一 選擇 插入 日期 命令 打開(kāi) 插入日期 對(duì)話框 在 插入 面板中選擇 常用 子面板 單擊按鈕 也會(huì)打開(kāi) 插入日期 對(duì)話框 3 在該對(duì)話框中選擇星期格式 日期格式和時(shí)間格式 4 單擊 確定 按鈕即可插入日期 本講小結(jié) 本講主要介紹網(wǎng)頁(yè)文件的建立 頁(yè)面屬性的設(shè)置 網(wǎng)頁(yè)中文本等元素的輸入以及文件頭部?jī)?nèi)容的設(shè)置 上機(jī)作業(yè) 上機(jī)要求 在網(wǎng)頁(yè)中輸入文本與編輯文本 掌握輸入空格和實(shí)現(xiàn)文本換行的方法 學(xué)會(huì)在網(wǎng)頁(yè)中插入水平線和日期 掌握網(wǎng)頁(yè)文本格式化操作 第二講圖像及超級(jí)鏈接 教學(xué)內(nèi)容 1插入圖像和設(shè)置圖像屬性插入占位符鼠標(biāo)經(jīng)過(guò)圖像設(shè)置導(dǎo)航條的創(chuàng)建關(guān)于鏈接路徑創(chuàng)建外部鏈接創(chuàng)建內(nèi)部鏈接創(chuàng)建其他鏈接 教學(xué)重點(diǎn)和難點(diǎn) 在網(wǎng)頁(yè)中插入圖像 圖像對(duì)象以及插入超級(jí)鏈接 圖像及超級(jí)鏈接 2 3圖像操作2 3 1插入圖像2 3 2設(shè)置圖像的一般屬性2 3 3插入占位符2 3 4鼠標(biāo)經(jīng)過(guò)圖像設(shè)置2 3 5導(dǎo)航條的創(chuàng)建2 4超級(jí)鏈接2 4 1關(guān)于鏈接路徑2 4 2創(chuàng)建外部鏈接2 4 3創(chuàng)建內(nèi)部鏈接2 4 4創(chuàng)建E mail鏈接2 4 5創(chuàng)建錨點(diǎn)鏈接2 4 6創(chuàng)建腳本鏈接2 4 7創(chuàng)建空鏈接2 4 8圖像熱點(diǎn)鏈接 2 3圖像操作 由于受網(wǎng)絡(luò)速度等方面的影響 因此在網(wǎng)頁(yè)制作中圖像的格式有一定的要求 一般用于網(wǎng)頁(yè)的圖像要求是GIF JPEG或PNG三種格式中的一種 2 3 1插入圖像 插入圖像的具體方法 選擇 插入 圖像 菜單 單擊 插入 面板 常用 子面板中的按鈕 按Ctrl Alt I鍵 2 3 2設(shè)置圖像的一般屬性 設(shè)置圖像屬性具體操作如下 能選取要編輯的圖像 展開(kāi) 圖像 屬性面板 如圖10所示 其左上角顯示了選取圖像的縮略圖 源文件 文本框中顯示了插入圖像的源位置 屬性具體含義如下 圖10 寬 高 是圖片的尺寸 默認(rèn)單位是象素 源文件 是圖片的路徑 點(diǎn)擊后面的文件夾圖標(biāo)也能選擇其他圖片 鏈接 是鏈接的目標(biāo)頁(yè)面或者定位點(diǎn)的URL 目標(biāo) 鏈接時(shí)的目標(biāo)窗口或框架 替代 是圖片的文字注釋 當(dāng)圖片不能正常顯示的時(shí)候 圖片的位置就會(huì)顯示文字注釋 編輯 啟動(dòng)圖像編輯軟件對(duì)圖像編輯 地圖 用于制作圖像映射 熱點(diǎn) 垂直邊距 水平邊距 圖像在垂直或水平方向與網(wǎng)頁(yè)中其他元素之間的距離 邊框 圖像邊框的寬度 選擇空白或零時(shí)沒(méi)有邊框 對(duì)齊 下拉列表用于指定圖片相對(duì)于文本的排列方式 低解析度源 當(dāng)前圖片的低分辨率副本的路徑 如果圖片很大 則先讓瀏覽器下載顯示一個(gè)文件較小的圖片副本 瀏覽器裝載完其他內(nèi)容后再回頭來(lái)下載較大的圖像 這樣做既能保持網(wǎng)頁(yè)的完整性 又能減少用戶等待時(shí)間 2 3 3插入占位符 如果目前還不確定該插入哪幅圖像 但可以確定圖像的大小 則可以使用占位符的方式插入圖像 當(dāng)確定好要插入的圖像時(shí)再進(jìn)行插入即可 1 將光標(biāo)定位到要插入圖像的位置 文本 層或表格中 2 執(zhí)行以下方法之一 選擇 插入 圖像對(duì)象 圖像占位符 命令 選擇 插入 面板的 常用 子面板中的按鈕后的下拉按鈕 在打開(kāi)的列表中選擇 圖像占位符 選項(xiàng) 2 3 4鼠標(biāo)經(jīng)過(guò)圖像設(shè)置 鼠標(biāo)經(jīng)過(guò)圖像是一種在瀏覽器中查看并使用鼠標(biāo)指針移過(guò)它時(shí)發(fā)生變化的圖像 鼠標(biāo)經(jīng)過(guò)圖像由兩個(gè)圖像組成 主圖像和次圖像 鼠標(biāo)經(jīng)過(guò)圖像中的兩個(gè)圖像其大小應(yīng)相等 如果兩個(gè)圖像大小不同 Dreamweaver將自動(dòng)調(diào)整第二個(gè)圖像的大小以匹配第一個(gè)圖像的大小 插入鼠標(biāo)經(jīng)過(guò)圖像的具體操作如下 1 在 文檔 窗口中 將插入點(diǎn)放置在要顯示鼠標(biāo)經(jīng)過(guò)圖像的位置 2 使用以下方法之一插入鼠標(biāo)經(jīng)過(guò)圖像 單擊 插入 面板的 常用 子面板中的按鈕后的下拉按鈕 單擊 鼠標(biāo)經(jīng)過(guò)圖像 按鈕 選擇 插入 圖像對(duì)象 鼠標(biāo)經(jīng)過(guò)圖像 命令 如圖11所示 圖11 2 3 5導(dǎo)航條的創(chuàng)建 導(dǎo)航條由圖像或圖像組組成 這些圖像的顯示內(nèi)容隨操作不同而不同 一個(gè)網(wǎng)頁(yè)中只允許有一個(gè)導(dǎo)航條 導(dǎo)航條項(xiàng)目有如下4種狀態(tài) 一般 尚未單擊或尚未與此項(xiàng)目交互時(shí)所顯示的圖像 滑過(guò) 指鼠標(biāo)指針滑過(guò) 一般 圖像時(shí)所顯示的圖像 項(xiàng)目的外觀發(fā)生變化 例如變得更亮 以便讓知道可與這個(gè)項(xiàng)目進(jìn)行交互 按下 指項(xiàng)目被單擊后所顯示的圖像 按下時(shí)鼠標(biāo)經(jīng)過(guò) 指在項(xiàng)目被單擊后 鼠標(biāo)指針滑過(guò) 按下 圖像時(shí) 所顯示的圖像 插入導(dǎo)航條的具體操作如下 1 將光標(biāo)定位到要插入導(dǎo)航條的位置 2 執(zhí)行下列操作之一打開(kāi) 插入導(dǎo)航條 對(duì)話框 選擇 插入 面板的 常用 子面板中按鈕后的下拉按鈕 并單擊 插入導(dǎo)航條 按鈕 選擇 插入 圖像對(duì)象 導(dǎo)航條 命令 任務(wù)2 3 建立網(wǎng)站相冊(cè) 操作要求 在Dreamweaver中內(nèi)置了創(chuàng)建網(wǎng)站相冊(cè)的命令 但此命令實(shí)際是調(diào)用了Fireworks的圖片處理功能 因此 如果要?jiǎng)?chuàng)建網(wǎng)站相冊(cè) 必須先安裝Fireworks軟件 另外 為了創(chuàng)建網(wǎng)站相冊(cè) 還需要收集建立相冊(cè)的圖片 在開(kāi)始創(chuàng)建相冊(cè)之前 將相冊(cè)的所有圖像放置在一個(gè)文件夾中 另外 制作相冊(cè)的原始圖像文件類型是以gif jpg jpeg png psd tif或tiff為擴(kuò)展名 操作步驟 首先創(chuàng)建一個(gè)名為 電子相冊(cè) 的站點(diǎn) 設(shè)置本地文件夾為F photo 并在該文件夾下新建兩個(gè)文件夾 分別取名為Source和Object 然后在Source文件夾中放入收藏的圖片 做好上述的準(zhǔn)備工作之后 接下來(lái)開(kāi)始創(chuàng)建網(wǎng)站相冊(cè) 具體操作如下 1 選擇 命令 創(chuàng)建網(wǎng)站相冊(cè) 命令 彈出 創(chuàng)建網(wǎng)站相冊(cè) 對(duì)話框 2 在 創(chuàng)建網(wǎng)站相冊(cè) 對(duì)話框中對(duì)各種參數(shù)進(jìn)行設(shè)置 3 單擊 確定 按鈕 Fireworks自動(dòng)啟動(dòng)并創(chuàng)建縮略圖和大尺寸圖像 當(dāng)處理完成后 Dreamweaver將再次處于活動(dòng)狀態(tài)并創(chuàng)建包含縮略圖的Web頁(yè) 4 當(dāng)出現(xiàn)提示 相冊(cè)已經(jīng)建立 的對(duì)話框時(shí) 單擊 確定 按鈕 5 等待幾秒鐘 相冊(cè)頁(yè)即可出現(xiàn) 各縮略圖根據(jù)文件名按字母順序顯示 6 按F12鍵在瀏覽器中預(yù)覽效果 2 4超級(jí)鏈接 鏈接是一個(gè)網(wǎng)站的靈魂 一個(gè)網(wǎng)站是由多個(gè)頁(yè)面組成的 而這些頁(yè)面之間依據(jù)鏈接確定相互之間的導(dǎo)航關(guān)系 超級(jí)鏈接是指站點(diǎn)內(nèi)不同網(wǎng)頁(yè)之間 站點(diǎn)與Web之間的鏈接關(guān)系 它可以使站點(diǎn)內(nèi)的網(wǎng)頁(yè)成為有機(jī)的整體 還能使不同站點(diǎn)之間建立聯(lián)系 超級(jí)鏈接由兩部分組成 鏈接點(diǎn)和鏈接目標(biāo) 2 4 1關(guān)于鏈接路徑 1 絕對(duì)路徑 2 相對(duì)路徑 3 根路徑 2 4 2創(chuàng)建外部鏈接 不論是文字還是圖像 都可以創(chuàng)建鏈接到絕對(duì)地址的外部鏈接 創(chuàng)建鏈接的方法有兩個(gè) 一個(gè)是直接輸入地址 另一個(gè)是使用 超級(jí)鏈接 對(duì)話框 任務(wù)2 4 1 外部鏈接 操作要求 在Root網(wǎng)站的主頁(yè) index html 中創(chuàng)建鏈接到 懷化職業(yè)技術(shù)學(xué)院 網(wǎng)站 且在原瀏覽器窗口中打開(kāi)的鏈接 操作步驟 方法1 直接輸入地址 1 打開(kāi)主頁(yè)index html 在文本窗口中輸入并選中文字 懷化職業(yè)技術(shù)學(xué)院 在 屬性 面板中 鏈接 組合框用來(lái)設(shè)置圖像或文字的超鏈接 目標(biāo) 下拉列表框用來(lái)設(shè)置打開(kāi)方式 2 在 鏈接 組合框中直接輸入外部絕對(duì)地址 在 目標(biāo) 下拉列表框中選擇 self 方法2 使用 超級(jí)鏈接 對(duì)話框 1 在主頁(yè)index html的文檔窗口中 單擊 常用 子面板中的 超級(jí)鏈接 按鈕 彈出 超級(jí)鏈接 對(duì)話框 如圖13所示 圖13 2 進(jìn)行以下各項(xiàng)設(shè)置 文本 文本框輸入設(shè)置超級(jí)鏈接顯示的文本 懷化職業(yè)技術(shù)學(xué)院 鏈接 組合框用來(lái)輸入超鏈接連接到的路徑 目標(biāo) 下拉列表框用來(lái)設(shè)置超鏈接的打開(kāi)方式 有4個(gè)選項(xiàng) 選擇 self 標(biāo)題 文本框用來(lái)設(shè)置超鏈接的標(biāo)題 3 設(shè)置好后 單擊 確定 按鈕 即向網(wǎng)頁(yè)中插入了 懷化職業(yè)技術(shù)學(xué)院 超鏈接 2 4 3創(chuàng)建內(nèi)部鏈接 1 在文檔窗口中選中文字或圖像 單擊 屬性 面板 鏈接 組合框后的按鈕 彈出 選擇文件 對(duì)話框 選擇要鏈接到的網(wǎng)頁(yè)文件 即可鏈接到這個(gè)網(wǎng)頁(yè)2 拖動(dòng) 鏈接 組合框后的按鈕到站點(diǎn)面板上的相應(yīng)網(wǎng)頁(yè)文件 則鏈接將指向這個(gè)網(wǎng)頁(yè)文件 3 直接將相對(duì)地址輸入到 鏈接 組合框中來(lái)鏈接一個(gè)頁(yè)面 2 4 4創(chuàng)建E mail鏈接 創(chuàng)建郵件鏈接后 當(dāng)瀏覽者單擊郵件鏈接時(shí) 系統(tǒng)會(huì)自動(dòng)啟動(dòng)瀏覽器默認(rèn)的郵件處理程序 且其中程序的收件人地址會(huì)自動(dòng)更新為鏈接郵件的地址 下面通過(guò)任務(wù)講解如何創(chuàng)建E mail鏈接 任務(wù)2 4 2 E mail鏈接 操作要求 在Root網(wǎng)站的主頁(yè) index html 中創(chuàng)建以文本 與我聯(lián)系 為鏈接點(diǎn)的郵件鏈接 郵箱地址為tmbbje 且在新窗口中打開(kāi)鏈接 操作步驟 方法1 1 打開(kāi)主頁(yè)index html 單擊 常用 子面板中的 電子郵件鏈接 按鈕 彈出 電子郵件鏈接 對(duì)話框 如圖14所示 2 在 文本 文本框中輸入要鏈接的文本 與我聯(lián)系 然后在E Mail文本框中輸入郵箱地址tmbbje 單擊 確定 按鈕 然后在 屬性 面板的 目標(biāo) 下拉列表框中選擇 Blank選項(xiàng) 方法2 1 選擇 插入 電子郵件鏈接 命令 彈出 電子郵件鏈接 對(duì)話框 2 在 文本 文本框中輸入 與我聯(lián)系 在E Mail文本框中輸入tmbbje 單擊 確定 按鈕 然后在 屬性 面板的 目標(biāo) 下拉列表框中選擇 Blank選項(xiàng) 方法3 1 選擇要?jiǎng)?chuàng)建郵件鏈接的文本 在 屬性 面板中的 鏈接 組合框中輸入mailto tmbbje 2 在 目標(biāo) 下拉列表框選擇 Blank選項(xiàng) 圖14 2 4 5創(chuàng)建錨點(diǎn)鏈接 所謂錨點(diǎn)鏈接 是指在同一個(gè)頁(yè)面中的不同位置的鏈接或鏈接到另一頁(yè)面的某一具體位置 常用的建立方法有兩種 1 面板操作 2 菜單操作 2 4 6創(chuàng)建腳本鏈接 所謂腳本鏈接是指選擇JavaScript代碼或調(diào)用JavaScript函數(shù) 能夠在不離開(kāi)當(dāng)前網(wǎng)頁(yè)的情況下 了解關(guān)于某個(gè)項(xiàng)目的一些附加信息 此外該方式用于計(jì)算 表單驗(yàn)證或其他任務(wù) 利用腳本鏈接創(chuàng)建關(guān)閉網(wǎng)頁(yè)效果 操作步驟如下 1 在文檔編輯窗口中輸入文字 關(guān)閉窗口 2 選中文本 關(guān)閉窗口 在 屬性 面板的 鏈接 組合框中輸入javascript window close 該腳本鏈接可以關(guān)閉窗口 2 4 7創(chuàng)建空鏈接 所謂空鏈接實(shí)際上是一個(gè)未設(shè)計(jì)的鏈接 利用該鏈接可激活頁(yè)面上的文本和對(duì)象 例如有些JavaScript事件需要鏈接 但并不是鏈接到文本 圖像或其他對(duì)象 這時(shí)就需要用無(wú)地址來(lái)實(shí)現(xiàn) 創(chuàng)建空鏈接的方法是 在文檔編輯窗口中 選中要?jiǎng)?chuàng)建空鏈接的文本 在 屬性 面板的 鏈接 組合框中輸入 2 4 8圖像熱點(diǎn)鏈接 一個(gè)對(duì)象只能創(chuàng)建一個(gè)鏈接 但在網(wǎng)頁(yè)設(shè)計(jì)時(shí)有可能要在一個(gè)圖像上添加多個(gè)鏈接 若使用前面所講的鏈接方法則只能鏈接到一個(gè)目標(biāo) 為了解決這一矛盾 在Dreamweaver中巧妙地使用了熱點(diǎn)進(jìn)行鏈接 利用熱點(diǎn)工具可以將一個(gè)圖像劃分為多個(gè)熱區(qū)作為鏈接點(diǎn) 再單獨(dú)對(duì)每個(gè)熱區(qū)添加相應(yīng)的圖像熱點(diǎn)鏈接 上機(jī)作業(yè) 上機(jī)要求 掌握?qǐng)D像的插入方法 掌握?qǐng)D像屬性的設(shè)置方法 掌握?qǐng)D像與文本混合編排的方法 掌握插入鼠標(biāo)經(jīng)過(guò)圖像的方法 了解插入圖像占位符的方法創(chuàng)建外部鏈接和內(nèi)部鏈接的操作方法 掌握制作圖像映射的操作方法 掌握創(chuàng)建E mail鏈接的操作方法 第三講媒體及表格 教學(xué)內(nèi)容 1 在網(wǎng)頁(yè)中插入Flash對(duì)象2 插入其他動(dòng)態(tài)元素3 為網(wǎng)頁(yè)加入背景音樂(lè)4 插入并編輯表格5 嵌套表格6 表格的格式化7 布局表格 教學(xué)重點(diǎn)和難點(diǎn) 在網(wǎng)頁(yè)中插入多媒體對(duì)象 不同媒體相關(guān)參數(shù)的具體設(shè)置 系統(tǒng)集成Flash按鈕和文本的插入 加入音樂(lè)的技巧 表格或單元格的選定 新行或新列的插入操作 單元格合并與拆分操作 表格及單元格屬性設(shè)置方法以及運(yùn)用表格布局網(wǎng)頁(yè) 媒體及表格 2 5媒體2 5 1在網(wǎng)頁(yè)中插入Flash對(duì)象2 5 2插入其他動(dòng)態(tài)元素2 5 3為網(wǎng)頁(yè)加入背景音樂(lè)2 6表格2 6 1插入并編輯表格2 6 2嵌套表格2 6 3表格的格式化2 6 4布局表格 2 5媒體 一個(gè)優(yōu)秀的網(wǎng)站應(yīng)該不僅僅是由文字和圖片組成的 而應(yīng)該在網(wǎng)頁(yè)中加入聲音 動(dòng)畫(huà) 影片等內(nèi)容 為了增強(qiáng)網(wǎng)頁(yè)的表現(xiàn)力 豐富文檔的顯示效果 我們可以向其插入Flash動(dòng)畫(huà) Java小程序 音頻播放插件等多媒體內(nèi)容 2 5 1在網(wǎng)頁(yè)中插入Flash對(duì)象 1 插入Flash影片F(xiàn)lash動(dòng)畫(huà)是一種高品質(zhì)的矢量動(dòng)畫(huà) 它由Macromedia公司的Flash動(dòng)畫(huà)制作軟件創(chuàng)建 目前已經(jīng)成為Internet上矢量動(dòng)畫(huà)的標(biāo)準(zhǔn) 是制作網(wǎng)上矢量圖形和動(dòng)畫(huà)的首選軟件 Flash Dreamweaver和Fireworks并稱為Macromedia公司的網(wǎng)絡(luò)三劍客 插入Flash影片的具體操作如下 1 將光標(biāo)定位到頁(yè)面中要插入Flash影片的位置 2 在插入欄的 常用 選項(xiàng)卡中單擊媒體右側(cè)的按鈕 在彈出的列表框中選擇 Flash 選項(xiàng) 或選擇 插入 媒體 Flash 菜單命令打開(kāi) 選擇文件 對(duì)話框 3 在 查找范圍 下拉列表框中查找要插入的Flash播放文件 格式為 swf 單擊 確定 按鈕后 插入的Flash動(dòng)畫(huà)并不會(huì)在文檔窗口中顯示內(nèi)容 而是以一個(gè)帶有字母F的灰色框來(lái)表示 只有在保存文檔之后 在瀏覽器中才能正常顯示Flash 2 插入Flash按鈕 插入Flash按鈕是指Dreamweaver集成的動(dòng)態(tài)按鈕 除此之外 在Dreamweaver中也可以插入自已制作的Flash按鈕 Flash文件 方法與插入Flash影片類似 插入Flash按鈕的具體操作如下 1 將光標(biāo)定位到頁(yè)面中要插入Flash按鈕的位置上 2 選擇 插入 媒體 Flash按鈕 命令 打開(kāi) 插入Flash按鈕 對(duì)話框 如圖15所示 3 在 樣式 列表框中選擇需要的按鈕樣式 在 范例 欄中將顯示出所選樣式的效果 4 在 按鈕文本 文本框中輸入要在按鈕上顯示的文本 5 在 字體 下拉列表框中選擇按鈕文本的字體 在 大小 數(shù)值框中輸入字號(hào) 6 在 鏈接 文本框中指定按鈕所要鏈接文檔的URL地址 7 在 目標(biāo) 下拉列表框中選擇所鏈接文件的打開(kāi)方式 8 在 背景色 文本框中設(shè)置Flash按鈕的背景色 9 在 另存為 文本框中輸入保存的路徑 最好保存到當(dāng)前頁(yè)面站點(diǎn)的圖像文件夾中 至此設(shè)置就完成了 10 單擊 確定 按鈕將設(shè)置的Flash按鈕插入到當(dāng)前位置 11 單擊插入的Flash按鈕 在其屬性面板中編輯相關(guān)的屬性 如果要修改Flash按鈕的名稱 外觀等參數(shù)時(shí) 可雙擊插入的Flash按鈕或單擊其屬性面板中的 編輯 按鈕打開(kāi) 插入Flash按鈕 對(duì)話框 更改其設(shè)置即可 12 如果在頁(yè)面中調(diào)整了Flash按鈕的大小 又想恢復(fù)原大小時(shí) 可單擊屬性面板中的 重設(shè)大小 按鈕 13 單擊 播放 按鈕播放 當(dāng)鼠標(biāo)移到按鈕上時(shí)就會(huì)看到按鈕的動(dòng)態(tài)效果 圖15 3 插入Flash文本 插入Flash文本與插入Flash按鈕一樣 是指Dreamweaver中集成的文本動(dòng)畫(huà) 插入Flash文本的具體操作如下 1 將光標(biāo)定位到頁(yè)面中要插入Flash文本的位置上 2 選擇 插入 媒體 Flash文本 命令 打開(kāi)如圖16所示的 插入Flash文本 對(duì)話框 3 在 文本 文本框中輸入要顯示的文本 4 選中 顯示字體 復(fù)選項(xiàng) 在文本框中將顯示所設(shè)置文本字體的效果 5 在 字體 下拉列表框中選擇文本的字體 在 大小 文本框中輸入文本的大小 并完成參數(shù)的設(shè)置 6 單擊 確定 按鈕將設(shè)置的Flash文本插入到頁(yè)面中 圖16 2 5 2插入其他動(dòng)態(tài)元素 Dreamweaver不僅支持Flash動(dòng)畫(huà) 還支持如Shockwave影片 Applet等媒體 1 插入Shockwave影片Shockwave是Macromedia公司制定的一種網(wǎng)上媒體交互壓縮格式的標(biāo)準(zhǔn) 其生成的壓縮格式可以被快速下載 并且被目前的主流瀏覽器所支持 在Dreamweaver中插入Shockwave影片的具體操作如下 1 將光標(biāo)置于頁(yè)面中要插入Shockwave影片的位置上 2 選擇 插入 媒體 Shockwave命令 也可以在 插入 面板的 常用 子面板中單擊 媒體 右側(cè)的按鈕 在彈出的列表框中選擇Shockwave選項(xiàng) 打開(kāi) 選擇文件 對(duì)話框 3 選擇要插入的Shockwave影片文件 同時(shí)在對(duì)話框中可以設(shè)置URL的類型 4 單擊 確定 按鈕 即可將影片插入到頁(yè)面中 Shockwave影片插入到頁(yè)面中將以一個(gè)圖標(biāo)的形式顯示 5 單擊Shockwave影片的圖標(biāo) 在屬性面板中設(shè)置其屬性 2 插入Applet 為了使網(wǎng)頁(yè)更加引入注目 經(jīng)常需要制作一些特殊效果 用Java語(yǔ)言可以實(shí)現(xiàn)這些特殊效果 Applet是Java的小應(yīng)用程序 它是動(dòng)態(tài) 安全 跨平臺(tái)的網(wǎng)絡(luò)應(yīng)用程序 JavaApplet被嵌入到HTML語(yǔ)言中 編寫一些Applet放在網(wǎng)頁(yè)中可以實(shí)現(xiàn)較為復(fù)雜的控制 也可以實(shí)現(xiàn)各種各樣的效果 插入Applet的具體操作如下 1 將光標(biāo)定位到頁(yè)面中要插入Applet的位置 2 選擇 插入 媒體 Applet命令 也可以在 插入 面板的 常用 子面板中單擊 媒體 右側(cè)的按鈕 在彈出的列表框中選擇Applet選項(xiàng) 打開(kāi) 選擇文件 對(duì)話框 3 設(shè)置完畢后 單擊 確定 按鈕即可將Applet插入到頁(yè)面中 插入頁(yè)面中的Applet以一個(gè)圖標(biāo)的形式顯示在頁(yè)面中 4 單擊頁(yè)面中的Applet圖標(biāo) 可以在如圖17所示的屬性面板中設(shè)置其相應(yīng)的屬性 圖17 3 插入ActiveX控件 ActiveX控件是Microsoft公司對(duì)瀏覽器的能力擴(kuò)展 ActiveX控件的作用和插件是相同的 但兩者也存在著差異 載入網(wǎng)頁(yè)時(shí) 如果瀏覽器不支持ActiveX控件 瀏覽器會(huì)自動(dòng)安裝所需軟件 如果是插件 則需要用戶找到相關(guān)的軟件進(jìn)行安裝 插入ActiveX控件的課體操作如下 1 將光標(biāo)定位到頁(yè)面中要插入ActiveX的位置 2 選擇 插入 媒體 ActiveX命令 也可以在 插入 面板的 常用 子面板中單擊 媒體 右側(cè)的按鈕 在彈出的列表框中選擇ActiveX選項(xiàng) 即可將ActiveX插入到頁(yè)面中 插入頁(yè)面中的ActiveX以一個(gè)圖標(biāo)的形式顯示在頁(yè)面中 3 單擊頁(yè)面中的ActiveX圖標(biāo) 可以在屬性面板中設(shè)置其相應(yīng)的屬性 4 插入插件 如果想在瀏覽器中訪問(wèn)更多類型的媒體對(duì)象 就必須借助于插件 前面所介紹的Shockwave就是插件中的一員 插件的類型主要有對(duì)象類 命令類 行為類 組件類4種 這里講解的是對(duì)象類插件 為了敘述方便 在此簡(jiǎn)稱為插件 插入插件的具體操作如下 1 將光標(biāo)定位到頁(yè)面中要插入插件的位置 2 選擇 插入 媒體 插件 命令 也可以在 插入 面板的 常用 子面板中單擊 媒體 右側(cè)的按鈕 在彈出的列表框中選擇 插件 選項(xiàng) 則打開(kāi) 選擇文件 對(duì)話框 3 設(shè)置完畢后 單擊 確定 按鈕即可將插件插入到頁(yè)面中 插件以一個(gè)圖標(biāo)的形式顯示在頁(yè)面中 4 單擊頁(yè)面中的插件圖標(biāo) 可以在屬性面板中設(shè)置其相應(yīng)的屬性 2 5 3為網(wǎng)頁(yè)加入背景音樂(lè) 打開(kāi)一些網(wǎng)站時(shí) 優(yōu)雅的背景音樂(lè)伴隨著我們的瀏覽一直縈繞在耳邊 但Dreamweaver中并沒(méi)有背景音樂(lè)的具體設(shè)置 要想達(dá)到這種效果 可以通過(guò)在源代碼中手動(dòng)添加代碼或插入插件的方法來(lái)實(shí)現(xiàn) 1 添加背景音樂(lè)代碼具體操作如下 1 將要插入背景音樂(lè)的網(wǎng)頁(yè)從設(shè)計(jì)視圖切換至代碼視圖或拆分視圖 2 在和之間的任何地方加入 其中src指定音樂(lè)文件的位置及文件名 hidden true表示不顯示播放器 loop true表示循環(huán)播放 2 通過(guò)插入插件來(lái)添加背景音樂(lè)具體操作如下 1 將光標(biāo)定位到要插入背景音樂(lè)的網(wǎng)頁(yè)的空白處 2 同插入其他插件的方法一樣 打開(kāi) 選擇文件 對(duì)話框 3 在打開(kāi)的對(duì)話框中選擇音樂(lè)文件 4 設(shè)置完畢后 單擊 確定 按鈕即可將音樂(lè)文件插入到頁(yè)面中 音樂(lè)文件同樣以一般插件的圖標(biāo)形式顯示在頁(yè)面中 5 單擊音樂(lè)文件圖標(biāo) 在屬性面板中將高度和寬度都設(shè)置為0 這樣就不會(huì)顯示播放器 6 在插件URL的文本框中可以輸入下載插件的完整URL 如果在瀏覽頁(yè)面時(shí)沒(méi)有該插件 則InternetExplorer將從這里提供的URL上下載 任務(wù)2 5 制作水中倒影效果 操作要求 在root unit2 image文件夾中有兩個(gè)文件 一個(gè)是JavaApplet小程序文件Lake class 該文件的作用是產(chǎn)生倒影效果 一個(gè)是圖像文件Ap49013 jpg 運(yùn)用這兩個(gè)文件制作如圖18所示的效果 圖18 2 6表格 表格是網(wǎng)頁(yè)設(shè)計(jì)制作不可缺少的元素 它以簡(jiǎn)潔明了和高效快捷的方式將圖片 文本 數(shù)據(jù)和表單等元素有序地顯示在頁(yè)面上 讓我們可以設(shè)計(jì)出漂亮的頁(yè)面 使用表格排版的頁(yè)面在不同平臺(tái) 不同分辨率的瀏覽器里都能保持其原有的布局 而在不同的瀏覽器平臺(tái)有較好的兼容性 所以表格是網(wǎng)頁(yè)中最常用的排版方式之一 2 6 1插入并編輯表格 1 插入表格在文檔窗口中 將光標(biāo)放在需要?jiǎng)?chuàng)建表格的位置 選擇下列方法 單擊 常用 子面板中的 表格 按鈕 選擇 插入 表格 菜單命令 按 Ctrl Alt T 鍵 則彈出 表格 對(duì)話框 指定表格的屬性后在文檔窗口中插入設(shè)置的表格 2 選擇各表格對(duì)象 對(duì)于表格 行 列 單元格屬性的設(shè)置是以選擇這些對(duì)象為前提的 1 選擇整個(gè)表格的方法是把鼠標(biāo)放在表格邊框的任意處 當(dāng)出現(xiàn)標(biāo)志時(shí)單擊即可選中整個(gè)表格 或在表格內(nèi)任意處單擊 然后在狀態(tài)欄選中標(biāo)簽即可 或在單元格任意處單擊 點(diǎn)鼠標(biāo)右鍵在彈出快捷菜單中選擇 表格 選擇表格 選項(xiàng) 2 要選中某一單元格 按住Ctrl鍵的同時(shí)在需要選中的單元格單擊 或者選中狀態(tài)欄中的標(biāo)簽 3 要選中連續(xù)的單元格 按住鼠標(biāo)左鍵從一個(gè)單元格的左上方開(kāi)始向要連續(xù)選擇的單元格方向拖動(dòng) 要選中不連續(xù)的幾個(gè)單元格 可以按住Ctrl鍵 再單擊要選擇的所有單元格 4 要選擇某一行或某一列 將光標(biāo)移動(dòng)到行左側(cè)或列上方 鼠標(biāo)指針變?yōu)橄蛴一蛳蛳碌募^圖標(biāo)時(shí)單擊 3 設(shè)置表格屬性 選中一個(gè)表格后 可以通過(guò)屬性面板 如圖19所示 更改表格屬性 圖19 4 單元格屬性 把光標(biāo)移動(dòng)到某個(gè)單元格內(nèi) 可以利用單元格屬性面板 如圖20所示 對(duì)這個(gè)單元格的屬性進(jìn)行設(shè)置 圖20 5 表格的行和列操作 1 插入行或列 選中要插入行或列的單元格 右擊 在彈出的快捷菜單中選擇 插入行 插入列 或 插入行或列 命令 如果選擇了 插入行 命令 則在選擇行的上方插入了一個(gè)空白行 如果選擇了 插入列 命令 則在選擇列的左側(cè)插入了一個(gè)空白列 如果選擇了 插入行或列 命令 會(huì)彈出 插入行或列 對(duì)話框 在其中可以設(shè)置插入行還是列 插入的數(shù)量 以及是在當(dāng)前選擇的單元格的上方或下方 左側(cè)還是右側(cè)插入行或列 2 刪除行或列 選擇要?jiǎng)h除的行或列 右擊 在彈出的快捷菜單中選擇 刪除行 或 刪除列 命令 6 拆分與合并單元格 拆分單元格時(shí) 將光標(biāo)放在待拆分的單元格內(nèi) 單擊屬性面板中的 拆分 按鈕 在彈出的對(duì)話框中按需要設(shè)置 合并單元格時(shí) 選中要合并的單元格 再單擊屬性面板中的 合并 按鈕 2 6 2嵌套表格 表格之中還有表格即嵌套表格 網(wǎng)頁(yè)的排版有時(shí)會(huì)很復(fù)雜 在外部需要一個(gè)表格來(lái)控制總體布局 如果內(nèi)部排版的細(xì)節(jié)也通過(guò)總表格來(lái)實(shí)現(xiàn) 容易引起行高列寬等的沖突 給表格的制作帶來(lái)困難 其次 瀏覽器在解析網(wǎng)頁(yè)的時(shí)候 是將整個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)下載完畢之后才顯示表格 如果不使用嵌套 表格非常復(fù)雜 瀏覽者要等待很長(zhǎng)時(shí)間才能看到網(wǎng)頁(yè)內(nèi)容 引入嵌套表格 由總表格負(fù)責(zé)整體排版 由嵌套的表格負(fù)責(zé)各個(gè)子欄目的排版 并插入到總表格的相應(yīng)位置中 各司其職 互不沖突 另外 通過(guò)嵌套表格 利用表格的背景圖像 邊框 單元格間距和單元格邊距等屬性可以得到漂亮的邊框效果 制作出精美的音畫(huà)貼圖網(wǎng)頁(yè) 創(chuàng)建嵌套表格的操作方法是 先插入總表格 然后將光標(biāo)置于要插入嵌套表格的地方 繼續(xù)插入表格即可 任務(wù)2 6 1 嵌套表格 操作要求 在Root網(wǎng)站的主頁(yè) index html 中 創(chuàng)建一個(gè)表中套表再套表的三層嵌套表格 如圖21所示 圖21 操作步驟 1 打開(kāi)主頁(yè) index html 文檔 將光標(biāo)放置在文檔窗口要插入表格的位置 單擊 常用 子面板中的 表格 按鈕 插入一個(gè)1行1列的表格1 寬度為500像素 高度為100 邊框?yàn)? 單元格間距為0 單元格邊距為12像素 背景顏色為 333333 2 將光標(biāo)放置在表格1內(nèi) 插入表格2 1行1列 寬度為100 高度為100 邊框?yàn)? 單元格間距為0 單元格邊距為12像素 背景顏色為 CCCCCC 3 將光標(biāo)放置在表格2內(nèi) 插入表格3 1行1列 寬度為100 高度100 單元格間距和單元格邊距都為8像素 邊框?yàn)?0 邊框顏色為 FEE4ED 背景顏色為 9966FF 制成的嵌套表格如圖21所示 2 6 3表格的格式化 做好的表格可以使用Dreamweaver提供的預(yù)設(shè)外觀樣式 這樣可以提高制作效率 保持表格外觀的統(tǒng)一性 同時(shí)樣式提供的色彩搭配也比較美觀 任務(wù)2 6 2 表格的格式化 操作要求 在Root網(wǎng)站的主頁(yè) index html 中 插入一個(gè)5行6列的表格 表格的寬為500像素 高為300像素 邊框 單元格間距和邊距全為0 表格樣式為AltRowsBasicGray 操作步驟 1 在主頁(yè)的文檔窗口中 將光標(biāo)放在需要?jiǎng)?chuàng)建表格的位置 單擊 常用 子面板的 表格 按鈕 彈出 表格 對(duì)話框 如圖2 67所示 對(duì)下列參數(shù)進(jìn)行設(shè)置 行數(shù) 文本框 輸入5 列數(shù) 文本框 輸入6 表格寬度 文本框 輸入500像素 單元格邊距 文本框 輸入0 單元格間距 文本框 輸入0 邊框粗細(xì) 文本框 輸入0 表格高度在屬性面板中設(shè)置 2 選擇表格 居中對(duì)齊表格后選擇 命令 格式化表格 命令 彈出 格式化表格 對(duì)話框 如圖22所示 在其中選擇AltRowsBasicGray格式 單擊 確定 按鈕表格的樣式就設(shè)定好了 最終效果如圖23所示 圖22 圖23 2 6 4布局表格 Dreamweaver8的布局視圖功能以直觀的方式自動(dòng)生成了網(wǎng)頁(yè)中的表格 能夠使設(shè)計(jì)者在文檔窗口中通過(guò)拖曳鼠標(biāo)來(lái)實(shí)現(xiàn)復(fù)雜表格排版效果 在Dreamweaver8中要使用布局視圖 應(yīng)將窗口從 標(biāo)準(zhǔn)視圖 切換到 布局視圖 在 插入 面板中選擇 布局 子面板 單擊面板中的 布局視圖 按鈕 如圖24所示 繪制布局表格 像畫(huà)圖一樣在頁(yè)面里面排版表格 繪制布局單元格 在表格中畫(huà)單元格 圖24 用布局表格建立網(wǎng)頁(yè)的步驟 1 新建網(wǎng)頁(yè)文件 新建一個(gè)網(wǎng)頁(yè) 保存新建的網(wǎng)頁(yè) 修改頁(yè)面屬性 2 進(jìn)入布局視圖繪制布局表格與布局單元格 單擊 插入 面板中的 布局 按鈕 單擊 布局視圖 按鈕 單擊 繪制布局表格 按鈕 繪制布局表格 單擊 繪制布局單元格 按鈕 繪制布局單元格 繪制所有的布局單元格 3 修改布局單元格 選擇布局單元格 調(diào)整單元格大小 用鼠標(biāo)拖動(dòng)單元格或按箭頭鍵移動(dòng)單元格 4 在單元格中插入網(wǎng)頁(yè)元素 在布局單元格中插入圖像 退出布局視圖 選擇要插入背景圖像的單元格 在屬性面板中單擊單元格背景中的 瀏覽 按鈕 選取背景圖像 選中要插入文字的單元格 單擊 常用 按鈕 單擊 插入表格 按鈕 插入一個(gè)1行1列 90 的表格 將表格居中對(duì)齊 在表格中輸入或粘貼文字 5 進(jìn)入布局視圖 修改布局表格與單元格 進(jìn)入布局視圖 修改或調(diào)整布局單元格 返回標(biāo)準(zhǔn)視圖 完成后的布局網(wǎng)頁(yè) 本講小結(jié) 本講主要介紹不同媒體相關(guān)參數(shù)的具體設(shè)置 系統(tǒng)集成Flash按鈕和文本的插入 加入音樂(lè)的技巧 表格或單元格的選定 新行或新列的插入操作 單元格合并與拆分操作 表格及單元格屬性設(shè)置方法 插入布局表格以及用布局表格布局網(wǎng)頁(yè)的步驟 第四講框架和圖層 教學(xué)內(nèi)容 1創(chuàng)建框架2框架集與框架的選擇及刪除操作3框架及框架集的屬性設(shè)置4框架及框架集的保存創(chuàng)建層層的屬性設(shè)置層的基本操作層的高級(jí)操作 教學(xué)重點(diǎn)和難點(diǎn) 框架及框架集的概念 框架及框架集的創(chuàng)建 層的顯示 隱藏 層名稱的改變及層的疊放順序的改變方法 2 7框架 框架是網(wǎng)頁(yè)中經(jīng)常使用的頁(yè)面設(shè)計(jì)方式 框架的作用就是把網(wǎng)頁(yè)在一個(gè)瀏覽器窗口下分割成幾個(gè)不同的區(qū)域 實(shí)現(xiàn)在一個(gè)瀏覽器窗口中顯示多個(gè)HTML頁(yè)面 使用框架可以非常方便地完成導(dǎo)航工作 使網(wǎng)站的結(jié)構(gòu)更加清晰 而且各個(gè)框架之間絕不存在干擾問(wèn)題 利用框架最大的好處就是使網(wǎng)站的風(fēng)格一致 通常把一個(gè)網(wǎng)站中頁(yè)面相同的部分單獨(dú)制作成一個(gè)頁(yè)面 作為框架結(jié)構(gòu)的一個(gè)子框架的內(nèi)容給整個(gè)網(wǎng)站公用 一個(gè)框架結(jié)構(gòu)由兩部分網(wǎng)頁(yè)文件構(gòu)成 框架和框架集 框架 Frame 框架是瀏覽器窗口中的一個(gè)區(qū)域 在框架中可以顯示其他的網(wǎng)頁(yè) 框架集 Frameset 框架集也是一個(gè)網(wǎng)頁(yè)文件 它將一個(gè)窗口通過(guò)行和列的方式分割成多個(gè)框架 框架集包括框架的數(shù)目 框架的大小和位置以及在每個(gè)框架中初始顯示的頁(yè)面地址 2 7 1創(chuàng)建框架 在Dreamweaver中有兩種創(chuàng)建框架集的方法 既可以從若干預(yù)定義的框架集中選擇 也可以自己設(shè)計(jì)框架集 1 插入預(yù)定義的框架集通過(guò)預(yù)定義的框架集 可以很容易地選擇要?jiǎng)?chuàng)建的框架集類型 創(chuàng)建預(yù)定義的框架集有兩種方法 通過(guò) 插入 面板可以創(chuàng)建框架集并在某一個(gè)新的框架中顯示當(dāng)前文檔 通過(guò) 新建文檔 對(duì)話框可以創(chuàng)建新的空框架集 要?jiǎng)?chuàng)建預(yù)定義的框架集并在某一框架中顯示現(xiàn)有文檔 可執(zhí)行如下操作 1 將插入點(diǎn)放置在文檔中 2 執(zhí)行下列操作之一 單擊 插入 HTML 框架 命令 彈出框架集樣式子菜單 從中選取所需框架 在 插入 面板中選擇 布局 子面板 單擊 框架 按鈕上的下拉箭頭 然后選擇預(yù)定義的框架集 將光標(biāo)定位在一個(gè)框架中 選擇 修改 框架集 子菜單中的選項(xiàng) 3 執(zhí)行以上任一操作后 將打開(kāi) 框架標(biāo)簽輔助功能屬性 對(duì)話框 為每個(gè)框架指定一個(gè)標(biāo)題 然后單擊 確定 按鈕 2 創(chuàng)建新的空預(yù)定義框架集創(chuàng)建新的空預(yù)定義框架集的具體操作如下 1 選擇 文件 新建 命令 2 在 新建文檔 對(duì)話框 常規(guī) 選項(xiàng)卡的 類別 列表框中選擇 框架集 選項(xiàng) 3 從 框架集 列表框中選擇相應(yīng)的框架集 4 單擊 創(chuàng)建 按鈕 則框架集出現(xiàn)在文檔中 3 將現(xiàn)有文檔分割為框架將現(xiàn)在文檔分割為框架的具體操作如下 1 新建一個(gè)空白的HTML文檔后 選擇 查看 可視化助理 框架邊框 菜單命令 即可在當(dāng)前文檔中顯示出框架的邊框 2 拖動(dòng)文檔窗口四周的邊框即可創(chuàng)建新框架 在窗口中通過(guò)拖動(dòng)文檔窗口的邊框創(chuàng)建出新框架 3 在左框架中單擊 再拖動(dòng)文檔窗口上邊的邊框 若按住Alt鍵 在左框架中單擊 再拖動(dòng)文檔窗口上邊的邊框 2 7 2框架集與框架的選擇及刪除操作 1 認(rèn)識(shí)框架面板框架面板中顯示了所創(chuàng)建的框架的結(jié)構(gòu) 并在不同的框架區(qū)域中顯示框架的名稱 當(dāng)在框架文檔中進(jìn)行新建 刪除某個(gè)現(xiàn)有框架 或修改框架的尺寸 名稱等操作時(shí) 框架面板中的示意圖會(huì)隨著變化 如果窗口中沒(méi)有框架面板 可以選擇 窗口 框架 命令或按Shift F2鍵打開(kāi)框架面板 2 選取框架和框架集 1 在文檔窗口中選擇 在文檔窗口中選擇框架的方法很簡(jiǎn)單 即 按住Alt鍵并在要選取的框架內(nèi)單擊 被選取的框架邊框有虛線 選擇框架集時(shí) 單擊要選取的框架邊框即可 選取的所有框架邊框呈現(xiàn)虛線 2 在 框架 面板中選擇 在框架面板中選擇框架的方法為 直接在面板中單擊要選擇的框架區(qū)域中的任意位置 選中的框架以粗黑框顯示 選取框架集的方法為 在 框架 面板中單擊包含要選取的框架集的邊框 如選擇整個(gè)框架集 只需單擊框架最外面的邊框即可 3 刪除框架如果窗口中有不需要的框架 可將其刪除 方法為 用鼠標(biāo)將要?jiǎng)h除框架的邊框拖到父框架邊框上或拖離頁(yè)面 2 7 3框架及框架集的屬性設(shè)置 在Dreamweaver中 可以使用 框架 屬性面板來(lái)定義框架的名稱 源文件 頁(yè)邊距等屬性 使用 框架集 屬性面板可以定義框架集邊線顏色 寬度等 1 框架集的屬性設(shè)置使用框架集屬性面板可以查看和設(shè)置大多數(shù)框架集屬性 如圖25所示 圖25 2 框架的屬性設(shè)置選中要設(shè)置屬性的框架 框架屬性面板如圖26所示 圖26 2 7 4框架及框架集的保存 用瀏覽器瀏覽框架網(wǎng)頁(yè)前應(yīng)先保存框架集文件及要在框架中顯示的所有文檔 在Dreamweaver中可以保存某個(gè)框架文檔 也可以單獨(dú)保存框架集文檔 還可以保存框架集文件和框架中出現(xiàn)的所有文檔 1 保存框架文檔保存框架集文檔窗口中的某個(gè)框架中的文檔的具體操作如下 1 將光標(biāo)定位到要保存的框架中 2 選擇 文件 保存框架 命令 在打開(kāi)的 另存為 對(duì)話框中像其他文檔的保存方法一樣指定保存路徑 文件名 然后單擊 保存 按鈕進(jìn)行保存 若要將框架另存為新文件 可選擇 文件 框架另存為 命令進(jìn)行保存 2 保存框架集文檔保存框架集文檔的具體操作如下 1 選中要保存的框架集 2 選擇 文件 保存框架頁(yè) 命令 打開(kāi) 另存為 對(duì)話框 3 在 保存在 下拉列表框中指定框架集的保存路徑 在 文件名 文本框中為框架集命名 4 單擊 保存 按鈕 3 保存框架集中的所有文檔要保存框架集中的所有文檔 只需選擇 文件 保存全部 命令 如果框架集中有框架文檔未被保存 則會(huì)出現(xiàn) 另存為 對(duì)話框 提示保存該文檔 如果有多個(gè)文檔未保存 則會(huì)依次打開(kāi)多個(gè) 另存為 對(duì)話框 當(dāng)所有的文檔都已保存后 Dreamweaver直接以原先保存的框架名保存文檔 不再出現(xiàn) 另存為 對(duì)話框 2 8圖層 層是CSS中的定位技術(shù) 在Dreamweaver8中對(duì)其進(jìn)行了可視化操作 文本 圖像 表格等元素只能固定其位置 不能互相疊加在一起 而層可以放置在網(wǎng)頁(yè)文檔內(nèi)的任何一個(gè)位置 層內(nèi)可以放置網(wǎng)頁(yè)文檔中的其他構(gòu)成元素 層可以自由移動(dòng) 層與層之間還可以重疊 層體現(xiàn)了網(wǎng)頁(yè)技術(shù)從二維空間向三維空間的一種延伸 2 8 1創(chuàng)建層 1 創(chuàng)建普通層連續(xù)繪制一個(gè)或多個(gè)層 可以在 文檔 窗口的 設(shè)計(jì) 視圖中執(zhí)行下列操作之一 1 在 插入 面板的 布局 子面板中單擊 繪制層 按鈕 拖動(dòng)鼠標(biāo)繪制一個(gè)層 2 在 插入欄 面板的 布局 子面板中單擊 繪制層 按鈕 按住Ctrl鍵并拖動(dòng)即可連續(xù)繪制多個(gè)層 3 將插入點(diǎn)放置在 文檔 編輯窗口中 然后選擇 插入 布局對(duì)象 層 命令將自動(dòng)在插入點(diǎn)插入一個(gè)層 2 創(chuàng)建嵌套層層可以像表格一樣進(jìn)行嵌套 通常將位于層內(nèi)部的層稱為嵌套層或子層 而將在嵌套層外部的層稱為父層 父層還可以有父層 可根據(jù)需要嵌套多個(gè)層 嵌套層是其代碼包含在另一個(gè)層中的層 在網(wǎng)頁(yè)中層的嵌套可以把不同的層組合在一起 嵌套層隨其父層一起移動(dòng) 并且可以設(shè)置為繼承其父級(jí)的可見(jiàn)性 子層可以浮動(dòng)于父層之外的任何位置 子層的大小也可以大于父層 創(chuàng)建嵌套層有以下幾種方法 1 將光標(biāo)定位到頁(yè)面上要嵌套的層內(nèi) 選擇 插入 布局對(duì)象 層 命令 2 單擊 插入 面板中的 繪制層 按鈕 然后通過(guò)拖動(dòng)的方式在現(xiàn)有層中繪制一個(gè)嵌套層 如果已經(jīng)在層參數(shù)中選擇禁用 嵌套 則應(yīng)按住Alt鍵再拖動(dòng)即可在現(xiàn)有層中繪制一個(gè)嵌套層 任務(wù)2 8 1 嵌套層操作 操作要求 在一個(gè)圖層中插入圖層 操作步驟 1 將光標(biāo)置于要作為父層的層中 2 選擇 插入 布局對(duì)象 層 命令 即可在父層中嵌套一個(gè)與父層大小相同的層 在 層 面板中可看到嵌套的層 3 添加子層后 父層的左側(cè)出現(xiàn) 或 符號(hào) 單擊該符號(hào)可展開(kāi)或閉合層 將光標(biāo)定位在一個(gè)父層中可以插入多個(gè)并列的層 若要逐級(jí)添加父層 只需要將光標(biāo)定位到要添加子層的層中 按創(chuàng)建嵌套層的方法添加即可 2 8 2層的屬性設(shè)置 層與其他Dreamweaver中的對(duì)象一樣 許多設(shè)置都可以在 層 屬性面板中進(jìn)行 在 層 屬性面板中既可以設(shè)置單個(gè)層的屬性 也可以設(shè)置多個(gè)層的屬性 1 單個(gè)層的屬性設(shè)置 圖27 2 設(shè)置多個(gè)層的屬性 圖28 2 8 3層的基本操作 1 層 面板的顯示 層 面板用于對(duì)層進(jìn)行管理 對(duì)于層的操作是十分有用的 下面就來(lái)認(rèn)識(shí) 層 面板 要顯示 層 面板 可選擇 窗口 層 命令或按F2鍵 2 層的選擇選擇層就是使層成為活動(dòng)層 激活后的層四周會(huì)出現(xiàn)控制柄和移動(dòng)手柄 1 選擇單個(gè)層 單個(gè)層的選擇有如下4種方式 在設(shè)計(jì)窗口中單擊層邊框 在要激活的層中單擊 再單擊該層的選擇柄 在 層 面板中選中要選取的層名稱 在一個(gè)層中按住Ctrl Shift鍵并在該層中單擊 2 選擇多個(gè)層 多個(gè)層的選擇有如下兩種方式 按住Shift鍵 在要選取的層中或?qū)舆吙蛏蠁螕?同時(shí) 層 面板中選取的層以反白顯示 按住Shift鍵 在 層 面板中單擊要選中的多個(gè)層的名稱 3 移動(dòng)層移動(dòng)層的具體操作如下 1 在 設(shè)計(jì) 視圖中 選擇一個(gè)層或多個(gè)層 2 執(zhí)行下列操作之一 若要通過(guò)拖動(dòng)來(lái)移