第10講_CSS樣式-鏈接-框架網(wǎng)頁(yè)-多媒體

1、1CSS樣式樣式鏈接鏈接框架網(wǎng)頁(yè)框架網(wǎng)頁(yè)多媒體多媒體2 2q教師：董云朝q電子信箱： dongyzh_q辦公室：博識(shí)樓110q電話： 67703886q答疑：周一3-6節(jié)，周二5-8節(jié)q答疑地點(diǎn)：博識(shí)樓1103q打開(kāi)站點(diǎn)q打開(kāi)“站點(diǎn)”菜單，選擇“管理站點(diǎn)”中“新建/站點(diǎn)”，在“本地根文件夾”中選擇該站點(diǎn)對(duì)應(yīng)的本地根文件夾。q刪除站點(diǎn)q通過(guò)“文件/站點(diǎn)”，選擇“管理站點(diǎn)”中選擇要?jiǎng)h除的站點(diǎn)，點(diǎn)擊“刪除”q導(dǎo)入站點(diǎn)q打開(kāi)“站點(diǎn)”菜單，選擇“管理站點(diǎn)”中的“導(dǎo)入”，選擇ste文件，可以自動(dòng)導(dǎo) 入站點(diǎn)名稱(chēng)，并指定根文 件夾。4q創(chuàng)建本地站點(diǎn)和創(chuàng)建網(wǎng)頁(yè)q頁(yè)面顏色及背景圖片：q可以通過(guò)頁(yè)面屬性進(jìn)行設(shè)置q頁(yè)

2、面屬性-外觀（HTML）q頁(yè)面標(biāo)題和編碼：q頁(yè)面屬性-標(biāo)題和編碼q創(chuàng)建表格和編輯表格q選擇“插入/表格”菜單命令q設(shè)置表格參數(shù)(也可以在表格屬性中修改）：行數(shù)、列數(shù)、寬度、邊框、單元格邊距、單元格間距q插入行、插入列、插入行或列q單元格合并、拆分q表格嵌套：在單元格中插入表格插入嵌套表格的方法與插入表格的方法相同5q表格背景色及背景圖片：q修改標(biāo)簽內(nèi)的代碼（注意不同參數(shù)用空格分開(kāi)）：q顏色：q圖片：q單元格背景：q修改單元格屬性6q網(wǎng)頁(yè)中添加文本q直接輸入q通過(guò)拷貝/粘貼的方式從其他文檔素材中向網(wǎng)頁(yè)添加文本q注意有些格式在復(fù)制后會(huì)失效q添加特殊字符：插入/文本/字符q添加空格和空行（參照第9講

3、，第26頁(yè)）q文本格式設(shè)置：q格式、對(duì)齊、列表q列表符號(hào)設(shè)置 選擇“格式/列表/屬性”菜單命令，打開(kāi)“列表屬性”對(duì)話框，設(shè)置列表屬性7q網(wǎng)頁(yè)中添加圖片q替換文本的作用q創(chuàng)建網(wǎng)頁(yè)存放的位置q網(wǎng)頁(yè)一旦創(chuàng)建，修改位置時(shí)，要注意其中調(diào)用的資源是否仍然可用q在Dreamweaver環(huán)境下，本地根文件夾中調(diào)整位置，根據(jù)提示更新鏈接q水平線顏色設(shè)置q選中水平線-右鍵編輯標(biāo)簽-瀏覽器特定的-顏色q在網(wǎng)頁(yè)中加入日期q插入-常用-日期89q掌握CSS樣式的創(chuàng)建和運(yùn)用方法q掌握各種鏈接的創(chuàng)建方法q掌握框架網(wǎng)頁(yè)的制作方法q掌握利用框架網(wǎng)頁(yè)來(lái)組織由多個(gè)網(wǎng)頁(yè)組成的畫(huà)面q掌握框架網(wǎng)頁(yè)中鏈接設(shè)置q網(wǎng)頁(yè)中多媒體設(shè)置與應(yīng)用qCS

4、S是一種用來(lái)進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的樣式表技術(shù)，使用CSS樣式可以對(duì)頁(yè)面的布局、字體、顏色、背景和其他圖文效果實(shí)現(xiàn)更加精確地控制，并且同一個(gè)樣式可以應(yīng)用于多個(gè)不同的對(duì)象，提高制作效率。qCSS樣式是Cascading Style Sheets(層疊樣式單)的簡(jiǎn)稱(chēng)，也可以稱(chēng)為“級(jí)聯(lián)樣式表”，它是一種網(wǎng)頁(yè)制作的新技術(shù)，利用它可以對(duì)網(wǎng)頁(yè)中的文本進(jìn)行精確的格式化控制。q要管理一個(gè)系統(tǒng)的網(wǎng)站，使用CSS樣式，可以快速格式化整個(gè)站點(diǎn)或多個(gè)文檔中的字體、圖像等網(wǎng)頁(yè)元素的格式。并且，CSS樣式可以實(shí)現(xiàn)多種不能用HTML樣式實(shí)現(xiàn)的功能。10qCSS，是用來(lái)控制一個(gè)網(wǎng)頁(yè)文檔中的某文本區(qū)域外觀的一組格式屬性。q使用CSS

5、能夠簡(jiǎn)化網(wǎng)頁(yè)代碼，加快下載速度，減少上傳的代碼數(shù)量，從而可以避免重復(fù)操作。qCSS樣式表是對(duì)HTML語(yǔ)法的一次革新，它位于文檔的區(qū)，作用范圍由CLASS或其他任何符合CSS規(guī)范的文本來(lái)設(shè)置。q對(duì)于其他現(xiàn)有的文檔，只要其中的CSS樣式符合規(guī)范，Dreamweaver就能識(shí)別它們。11q通過(guò)CSS樣式面板q點(diǎn)擊“新建CSS規(guī)則”按鈕，打開(kāi)“新建CSS規(guī)則”對(duì)話框q通過(guò)屬性面板q點(diǎn)擊“CSS”按鈕，“目標(biāo)規(guī)則”選擇“新CSS規(guī)則”，點(diǎn)擊“編輯規(guī)則”按鈕q選擇“格式/CSS樣式/新建”菜單命令12新建CSS規(guī)則q設(shè)置選擇器類(lèi)型q選擇器名稱(chēng)(以點(diǎn)開(kāi)始)q規(guī)則定義范圍13qCSS規(guī)則分類(lèi)q類(lèi)型：主要用于設(shè)

6、置文字格式q背景：主要用于設(shè)置文字、表格等背景q方框：主要用于設(shè)置圖形、表格等大小q邊框：主要用于設(shè)置表格邊框q列表：主要用于設(shè)置項(xiàng)目符號(hào)q定位：確定對(duì)象位置q擴(kuò)展：主要用于設(shè)置特殊光標(biāo)14q新建CSS規(guī)則樣式后，就可以利用該樣式快速設(shè)置頁(yè)面上的網(wǎng)頁(yè)元素樣式，使網(wǎng)站具有統(tǒng)一的風(fēng)格了。q應(yīng)用CSS樣式規(guī)則方法q在“屬性”面板進(jìn)行設(shè)定q通過(guò)快捷菜單設(shè)定15q對(duì)于創(chuàng)建的CSS樣式，可以進(jìn)行編輯操作，主要包括修改CSS樣式屬性、設(shè)置CSS樣式首選參數(shù)以及鏈接和導(dǎo)入CSS樣式等。q編輯CSS樣式規(guī)則方法q在“屬性”面板中進(jìn)行修改q在“CSS樣式”面板中進(jìn)行修改16q打開(kāi) “tk.html”網(wǎng)頁(yè)q在網(wǎng)頁(yè)頂

7、端插入1行4列表格，表格寬450像素，邊框?yàn)?，居中對(duì)齊q在表格中插入圖片(圖片在SC2文件夾中)，圖片居中對(duì)齊q創(chuàng)建CSS規(guī)則“.ys1”(邊框)q樣式：groove；寬度：medium；顏色：#ccffccq將該CSS規(guī)則運(yùn)用到表格中的圖片上q創(chuàng)建CSS規(guī)則“.ys2”(類(lèi)型/區(qū)塊)q字體：華文新魏；大?。?6像素；粗體；顏色：#003300；居中對(duì)齊 注意：字體設(shè)置在“類(lèi)型”標(biāo)簽下；對(duì)齊設(shè)置在“區(qū)塊”標(biāo)簽下q將該CSS規(guī)則運(yùn)用到正文標(biāo)題上q創(chuàng)建CSS規(guī)則“.ys3”(列表)q項(xiàng)目符號(hào)圖像：zp.gif(SC2文件夾中)；位置：外q將該CSS規(guī)則運(yùn)用到“成員行為”中編號(hào)上1718q超鏈接是

8、網(wǎng)頁(yè)中最重要的組成部分。超鏈接的應(yīng)用范圍很廣，利用它不僅可以鏈接到其他網(wǎng)頁(yè)，還可以鏈接到其他圖像文件、多媒體文件及下載程序，也可以利用它在網(wǎng)頁(yè)內(nèi)部進(jìn)行鏈接或是發(fā)送E-mail等。q在Dreamweaver CS4中，可以將文檔中的任何文字及任意位置的圖片設(shè)置為超鏈接。19q在Dreamweaver CS4中，可以隨時(shí)隨地在所需的位置創(chuàng)建各種超級(jí)鏈接，并且可以通過(guò)多種方法來(lái)創(chuàng)建超鏈接q可以在“屬性”面板中創(chuàng)建q使用“插入”菜單創(chuàng)建q使用“常用”工具欄中“超級(jí)鏈接”來(lái)創(chuàng)建q超級(jí)鏈接的分類(lèi)q文本超鏈接q圖像超鏈接q錨記鏈接qE-mail鏈接q圖形熱點(diǎn)鏈接2021q創(chuàng)建文本和圖像鏈接方法q選擇需要?jiǎng)?chuàng)建

9、鏈接的對(duì)象q按右鍵選擇“創(chuàng)建鏈接”(或者在屬性面板上設(shè)置)q打開(kāi)“選擇文件”對(duì)話框，選擇鏈接對(duì)象q注意：鏈接對(duì)象可以是網(wǎng)頁(yè)、應(yīng)用程序、各種媒體q創(chuàng)建電子郵件的方法q選擇需要?jiǎng)?chuàng)建電子郵件鏈接的對(duì)象q打開(kāi)“插入”菜單，選擇 “電子郵件鏈接”q打開(kāi)“電子郵件鏈接”對(duì)話框，輸入郵件地址q或者在“屬性”的“鏈接”文本框中輸入“mailto :郵件地址”2223q打開(kāi)站點(diǎn)Mysite，在網(wǎng)頁(yè)main.html中創(chuàng)建鏈接q建立下部導(dǎo)航欄中“隱私條例”的文本鏈接，鏈接到tk.html網(wǎng)頁(yè)q建立下部導(dǎo)航欄中“聯(lián)系我們”的文本鏈接，鏈接到自己的郵箱24q確定插入點(diǎn)位置q命名錨記q打開(kāi)“插入”菜單，選擇“命名錨記”

10、q打開(kāi)“命名錨記”對(duì)話框，輸入“*” q創(chuàng)建錨記鏈接q選擇需要?jiǎng)?chuàng)建錨記鏈接的對(duì)象q在“屬性”面板，“鏈接”欄輸入“#*”25q打開(kāi)網(wǎng)頁(yè)“tk.html”q在標(biāo)題前插入錨記，名稱(chēng)為“fanhui”q在網(wǎng)頁(yè)末尾文字“返回頁(yè)首”，創(chuàng)建錨記鏈接q圖像地圖也是一種超鏈接，適用于較大的圖像。q創(chuàng)建圖像地圖，可以在圖像上創(chuàng)建不規(guī)則區(qū)域的鏈接或某個(gè)部分區(qū)域的鏈接。q圖像地圖是將圖片分為幾個(gè)區(qū)域，這些區(qū)域又稱(chēng)為熱點(diǎn)，單擊不同的熱點(diǎn)可以打開(kāi)不同的鏈接，這樣的鏈接就稱(chēng)為圖形熱點(diǎn)鏈接。2627q創(chuàng)建圖像某個(gè)區(qū)域的超級(jí)鏈接，使之能鏈接到相應(yīng)對(duì)象q選中網(wǎng)頁(yè)中的圖像地圖q點(diǎn)擊“屬性”面板上的“熱點(diǎn)工具”，在圖像上確定“熱點(diǎn)

11、”區(qū)域q指定鏈接對(duì)象(網(wǎng)頁(yè)、圖像等)28q創(chuàng)建main.html網(wǎng)頁(yè)圖片中文字“快速網(wǎng)上沖印服務(wù)”的熱點(diǎn)鏈接，鏈接到“wscy.html”網(wǎng)頁(yè)q在main.html網(wǎng)頁(yè)中，當(dāng)鼠標(biāo)移動(dòng)到以下圖片上時(shí)顯示“網(wǎng)上沖印服務(wù)”q在圖片區(qū)域顯示文字q修改代碼：q原代碼：q新代碼：q圖形熱點(diǎn)鏈接：參見(jiàn)25頁(yè)2930q框架的概念q框架把瀏覽器窗口分成幾個(gè)部分q每個(gè)部分顯示不同的網(wǎng)頁(yè)q使瀏覽器窗口同時(shí)包含多個(gè)網(wǎng)頁(yè)q框架集的概念q框架集是HTML文件，定義一組框架的布局和屬性q包括框架的數(shù)目、大小、位置和每個(gè)框架中初始顯示頁(yè)面的URL（統(tǒng)一資源定位符：unique/universal resource locat

12、or，就是我們平時(shí)說(shuō)的網(wǎng)頁(yè)地址)q框架集不包含要在瀏覽器中顯示的HTML內(nèi)容31q創(chuàng)建框架網(wǎng)頁(yè)步驟q打開(kāi)“文件”菜單，選擇“新建 ”q打開(kāi)“新建文檔”對(duì)話框q選擇“示例中的頁(yè)”q在“示例文件夾”中選擇“框架頁(yè)”q選擇框架類(lèi)型q選擇“文件/保存全部”菜單命令，依次保存框架集和框架q打開(kāi)“保存為”對(duì)話框q按提示依次保存框架集和每個(gè)框架q框架集和框架都是以網(wǎng)頁(yè)形式保存的32q在站點(diǎn)中新建框架網(wǎng)頁(yè)，框架集樣式“水平拆分”q在上方框架網(wǎng)頁(yè)中插入圖片“l(fā)ogo.jpg”q在下方框架網(wǎng)頁(yè)中輸入文字“我的框架網(wǎng)頁(yè)”q依次保存框架集和每個(gè)框架q框架集保存為kjj.htmlq上方框架網(wǎng)頁(yè)保存為kj-top.htm

13、lq下方框架網(wǎng)頁(yè)保存為kj-under.html3334q將插入點(diǎn)放置在框架網(wǎng)頁(yè)中q打開(kāi)“文件”菜單，選擇“在框架中打開(kāi)”q打開(kāi)“選擇HTML文件”對(duì)話框q選擇要在該框架中打開(kāi)的網(wǎng)頁(yè)35q打開(kāi)“Mysite”站點(diǎn)q在站點(diǎn)中新建框架網(wǎng)頁(yè)，框架集樣式“上方固定”q在上方框架中打開(kāi)網(wǎng)頁(yè)“Top.html”網(wǎng)頁(yè)q在下方框架中打開(kāi)Main.html網(wǎng)頁(yè)q保存框架集為“Index.html”36q通過(guò)“框架”面板選擇框架集和框架q“窗口”菜單/“框架”，打開(kāi)框架面板q鼠標(biāo)點(diǎn)擊選擇q調(diào)整框架大小q通過(guò)鼠標(biāo)拖動(dòng)框架邊框q在“框架”屬性面板上可以精確設(shè)置q注意：q在編輯框架時(shí)，如果框架邊框不可見(jiàn)，選擇“查看/可

14、視化助理/框架邊框”，使框架邊框可見(jiàn)37q框架中的鏈接q在一個(gè)框架中使用鏈接在另一個(gè)框架中打開(kāi)網(wǎng)頁(yè)q鏈接設(shè)置方法q選擇文本或?qū)ο髊在“屬性”面板的“鏈接”中，點(diǎn)擊文件夾圖標(biāo)q打開(kāi)“選擇文件”對(duì)話框，選擇鏈接到的文件q在“屬性”面板的“目標(biāo)”下拉菜單中，選擇顯示鏈接文件的位置q注意：框架中的鏈接必須在框架集中設(shè)置，否則無(wú)法選擇顯注意：框架中的鏈接必須在框架集中設(shè)置，否則無(wú)法選擇顯示方式示方式設(shè)置打開(kāi)鏈接文件的位置設(shè)置鏈接的文件38q設(shè)置上方框架中的鏈接q設(shè)置“首頁(yè)”鏈接到“main.html” q“網(wǎng)上沖印”鏈接到“wscy.html”，在下面的框架中打開(kāi)q設(shè)置鏈接網(wǎng)頁(yè)顯示方式 在“屬性”面板的

15、“目標(biāo)”下拉菜單中，選擇“mainFrame”顯示方式（下面的框架是mainFrame）q“數(shù)碼商城” 鏈接到“smsc.html”，在新頁(yè)面中打開(kāi)q設(shè)置鏈接網(wǎng)頁(yè)顯示方式 在“屬性”面板的“目標(biāo)”下拉菜單中，選擇“_blank”顯示方式q插入媒體類(lèi)型q插入FLASH文件q插入插件(音頻、視頻)q插入ActiveX控件q插入媒體方法q選擇“插入/媒體”菜單命令q或(選擇“常用”工具欄上“媒體”按鈕)39qFlash動(dòng)畫(huà)是網(wǎng)頁(yè)上最流行的動(dòng)畫(huà)格式。q在Dreamweaver CS4中，F(xiàn)lash動(dòng)畫(huà)也是最常用的多媒體插件之一，它將聲音、圖像和動(dòng)畫(huà)等內(nèi)容加入到一個(gè)文件中并能制作較好的動(dòng)畫(huà)效果，同時(shí)使用

16、了優(yōu)化的算法將多媒體數(shù)據(jù)進(jìn)行壓縮，是文件變得很小，因此，非常適合在網(wǎng)上傳播。40q將光標(biāo)移至所需插入Flash動(dòng)畫(huà)的位置q打開(kāi)“插入”菜單，選擇“媒體”中的“SWF”q打開(kāi)“選擇文件對(duì)話框q選擇所需插入的Flash動(dòng)畫(huà)q也可以通過(guò)“常用”工具欄中的“媒體”中“SWF”插入Flash動(dòng)畫(huà)41q在網(wǎng)頁(yè)文檔中插入Flash動(dòng)畫(huà)文件后，選中Flash動(dòng)畫(huà)q在“屬性”面板中設(shè)置屬性42q在Dreamweaver CS4中，可以向網(wǎng)頁(yè)文檔添加多種不同類(lèi)型的聲音文件和格式，例如.wav、.midi和.mp3。q根據(jù)要添加聲音的目的、文件大小、聲音品質(zhì)等要素，來(lái)確定插入哪種格式和方法。43q將光標(biāo)移至所需插入

17、聲音文件的位置q打開(kāi)“插入”菜單，選擇“媒體”中的“插件”q打開(kāi)“選擇文件對(duì)話框q選擇所需插入的聲音文件q也可以通過(guò)“常用”工具欄中的“媒體”中“插件”插入聲音文件44q在網(wǎng)頁(yè)文檔中插入聲音文件后，選中插件符號(hào)q在“屬性”面板中設(shè)置音頻屬性q通過(guò)“編輯標(biāo)簽”設(shè)置音頻屬性q選擇插件符號(hào)，按右鍵，選擇“編輯標(biāo)簽”，打開(kāi)“標(biāo)簽編輯器”對(duì)話框q可以設(shè)置音頻“自動(dòng)播放”、“循環(huán)”、“隱藏”45q將光標(biāo)移至所需插入聲音文件的位置q打開(kāi)“插入”菜單，選擇“媒體”中的“插件”q打開(kāi)“選擇文件對(duì)話框q選擇所需插入的文件q也可以通過(guò)“常用”工具欄中的“媒體”中“插件”插入視頻文件46q在網(wǎng)頁(yè)文檔中插入視頻文件后，選中插件符號(hào)q在“屬性”面板中設(shè)置屬性47q在main.html網(wǎng)頁(yè)的右下方插入視頻film.wmv(文件在sc2文件夾中)，寬170，高200q先將該單元格拆分成2行q在smsc.html網(wǎng)頁(yè)中插入Flash文件flash.swf(文件在sc2文件夾中)，寬585，高140q在smsc.html網(wǎng)頁(yè)中插入音頻文件sound_01.mp3，(文件在sc2文件夾中任選)，隱藏插件符號(hào)