第10講CSS樣式鏈接框架網(wǎng)頁多媒體課件_第1頁
第10講CSS樣式鏈接框架網(wǎng)頁多媒體課件_第2頁
第10講CSS樣式鏈接框架網(wǎng)頁多媒體課件_第3頁
第10講CSS樣式鏈接框架網(wǎng)頁多媒體課件_第4頁
第10講CSS樣式鏈接框架網(wǎng)頁多媒體課件_第5頁
已閱讀5頁，還剩85頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

第10講CSS樣式鏈接框架網(wǎng)頁多媒體2022/12/15第10講CSS樣式鏈接框架網(wǎng)頁多媒體第10講CSS樣式鏈接框架網(wǎng)頁多媒體2022/12/14第11回顧創(chuàng)建本地站點和創(chuàng)建網(wǎng)頁創(chuàng)建表格和編輯表格網(wǎng)頁中添加文本網(wǎng)頁中添加圖片創(chuàng)建網(wǎng)頁存放的位置表格單元格大小調(diào)整注意：先將所有內(nèi)容(文字、圖片)插入表格中，如果有需要再調(diào)整單元格水平線顏色設置第10講CSS樣式鏈接框架網(wǎng)頁多媒體回顧創(chuàng)建本地站點和創(chuàng)建網(wǎng)頁第10講CSS樣式鏈接框架網(wǎng)頁多媒2教學內(nèi)容掌握CSS樣式的創(chuàng)建和運用方法掌握各種鏈接的創(chuàng)建方法掌握框架網(wǎng)頁的制作方法掌握利用框架網(wǎng)頁來組織由多個網(wǎng)頁組成的畫面掌握框架網(wǎng)頁中鏈接設置網(wǎng)頁中多媒體設置與應用第10講CSS樣式鏈接框架網(wǎng)頁多媒體教學內(nèi)容掌握CSS樣式的創(chuàng)建和運用方法第10講CSS樣式鏈接3管理站點打開站點打開“站點”菜單，選擇“管理站點”中“新建/站點”，在“本地根文件夾”中選擇站點刪除站點通過“文件/站點”，選擇“管理站點”中選擇要刪除的站點，點擊“刪除”第10講CSS樣式鏈接框架網(wǎng)頁多媒體管理站點打開站點第10講CSS樣式鏈接框架網(wǎng)頁多媒體4CSS樣式的概念CSS是一種用來進行網(wǎng)頁風格設計的樣式表技術，使用CSS樣式可以對頁面的布局、字體、顏色、背景和其他圖文效果實現(xiàn)更加精確地控制，并且同一個樣式可以應用于多個不同的對象，提高制作效率。CSS樣式是CascadingStyleSheets(層疊樣式單)的簡稱，也可以稱為“級聯(lián)樣式表”，它是一種網(wǎng)頁制作的新技術，利用它可以對網(wǎng)頁中的文本進行精確的格式化控制。要管理一個系統(tǒng)的網(wǎng)站，使用CSS樣式，可以快速格式化整個站點或多個文檔中的字體、圖像等網(wǎng)頁元素的格式。并且，CSS樣式可以實現(xiàn)多種不能用HTML樣式實現(xiàn)的功能。第10講CSS樣式鏈接框架網(wǎng)頁多媒體CSS樣式的概念CSS是一種用來進行網(wǎng)頁風格設計的樣式表技術5CSS樣式的功能CSS是用來控制一個網(wǎng)頁文檔中的某文本區(qū)域外觀的一組格式屬性。使用CSS能夠簡化網(wǎng)頁代碼，加快下載速度，減少上傳的代碼數(shù)量，從而可以避免重復操作。CSS樣式表是對HTML語法的一次革新，它位于文檔的<head>區(qū)，作用范圍由CLASS或其他任何符合CSS規(guī)范的文本來設置。對于其他現(xiàn)有的文檔，只要其中的CSS樣式符合規(guī)范，Dreamweaver就能識別它們。第10講CSS樣式鏈接框架網(wǎng)頁多媒體CSS樣式的功能CSS是用來控制一個網(wǎng)頁文檔中的某文本區(qū)域外6新建CSS樣式方法通過CSS樣式面板點擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對話框通過屬性面板點擊“CSS”按鈕，“目標規(guī)則”選擇“新CSS規(guī)則”，點擊“編輯規(guī)則”按鈕選擇“格式/CSS樣式/新建”菜單命令第10講CSS樣式鏈接框架網(wǎng)頁多媒體新建CSS樣式方法通過CSS樣式面板第10講CSS樣式鏈接框7新建CSS規(guī)則設置選擇器類型選擇器名稱(以點開始)規(guī)則定義范圍第10講CSS樣式鏈接框架網(wǎng)頁多媒體新建CSS規(guī)則設置選擇器類型第10講CSS樣式鏈接框架網(wǎng)頁多8CSS規(guī)則定義CSS規(guī)則分類類型：主要用于設置文字格式背景：主要用于設置文字、表格等背景方框：主要用于設置圖形、表格等大小邊框：主要用于設置表格邊框列表：主要用于設置項目符號定位：確定對象位置擴展：主要用于設置特殊光標第10講CSS樣式鏈接框架網(wǎng)頁多媒體CSS規(guī)則定義CSS規(guī)則分類第10講CSS樣式鏈接框架網(wǎng)頁多9應用CSS樣式規(guī)則新建CSS規(guī)則樣式后，就可以利用該樣式快速設置頁面上的網(wǎng)頁元素樣式，使網(wǎng)站具有統(tǒng)一的風格了。應用CSS樣式規(guī)則方法在“屬性”面板進行設定通過快捷菜單設定第10講CSS樣式鏈接框架網(wǎng)頁多媒體應用CSS樣式規(guī)則新建CSS規(guī)則樣式后，就可以利用該樣式快速10編輯CSS樣式對于創(chuàng)建的CSS樣式，可以進行編輯操作，主要包括修改CSS樣式屬性、設置CSS樣式首選參數(shù)以及鏈接和導入CSS樣式等。編輯CSS樣式規(guī)則方法在“屬性”面板中進行修改在“CSS樣式”面板中進行修改第10講CSS樣式鏈接框架網(wǎng)頁多媒體編輯CSS樣式對于創(chuàng)建的CSS樣式，可以進行編輯操作，主要包11示例1_CSS規(guī)則定義與應用打開“tk.html”網(wǎng)頁在網(wǎng)頁頂端插入1行4列表格，表格寬450像素，邊框為0，居中對齊在表格中插入圖片(圖片在SC2文件夾中)，圖片居中對齊創(chuàng)建CSS規(guī)則“.ys1”(邊框)樣式：groove；寬度：medium；顏色：#ccffcc將該CSS規(guī)則運用到表格中的圖片上創(chuàng)建CSS規(guī)則“.ys2”(類型)字體：華文新魏；大?。?6像素；粗體；顏色：#003300；居中對齊將該CSS規(guī)則運用到正文標題上創(chuàng)建CSS規(guī)則“.ys3”(列表)項目符號圖像：zp.gif(SC2文件夾中)；位置：外將該CSS規(guī)則運用到“成員行為”中編號上第10講CSS樣式鏈接框架網(wǎng)頁多媒體示例1_CSS規(guī)則定義與應用打開“tk.html”網(wǎng)頁第112示例1_樣張第10講CSS樣式鏈接框架網(wǎng)頁多媒體示例1_樣張第10講CSS樣式鏈接框架網(wǎng)頁多媒體13超鏈接的基礎知識超鏈接是網(wǎng)頁中最重要的組成部分。超鏈接的應用范圍很廣，利用它不僅可以鏈接到其他網(wǎng)頁，還可以鏈接到其他圖像文件、多媒體文件及下載程序，也可以利用它在網(wǎng)頁內(nèi)部進行鏈接或是發(fā)送E-mail等。在DreamweaverCS4中，可以將文檔中的任何文字及任意位置的圖片設置為超鏈接。第10講CSS樣式鏈接框架網(wǎng)頁多媒體超鏈接的基礎知識超鏈接是網(wǎng)頁中最重要的組成部分。超鏈接的應用14創(chuàng)建超鏈接的常用方法在DreamweaverCS4中，可以隨時隨地在所需的位置創(chuàng)建各種超級鏈接，并且可以通過多種方法來創(chuàng)建超鏈接可以在“屬性”面板中創(chuàng)建使用“插入”菜單創(chuàng)建使用“常用”工具欄中“超級鏈接”來創(chuàng)建超級鏈接的分類文本超鏈接圖像超鏈接錨記鏈接E-mail鏈接圖形熱點鏈接第10講CSS樣式鏈接框架網(wǎng)頁多媒體創(chuàng)建超鏈接的常用方法在DreamweaverCS4中，可以15創(chuàng)建文本和圖像鏈接創(chuàng)建文本和圖像鏈接方法選擇需要創(chuàng)建鏈接的對象按右鍵選擇“創(chuàng)建鏈接”(或者在屬性面板上設置)打開“選擇文件”對話框，選擇鏈接對象注意：鏈接對象可以是網(wǎng)頁、應用程序、各種媒體第10講CSS樣式鏈接框架網(wǎng)頁多媒體創(chuàng)建文本和圖像鏈接創(chuàng)建文本和圖像鏈接方法第10講CSS樣式鏈16創(chuàng)建電子郵件鏈接創(chuàng)建電子郵件的方法選擇需要創(chuàng)建電子郵件鏈接的對象打開“插入”菜單，選擇“電子郵件鏈接”打開“電子郵件鏈接”對話框，輸入郵件地址或者在“屬性”的“鏈接”文本框中輸入“mailto:郵件地址”第10講CSS樣式鏈接框架網(wǎng)頁多媒體創(chuàng)建電子郵件鏈接創(chuàng)建電子郵件的方法第10講CSS樣式鏈接框架17示例2_創(chuàng)建鏈接打開站點Mysite，在網(wǎng)頁main.html中創(chuàng)建鏈接建立下部導航欄中“隱私條例”的文本鏈接，鏈接到tk.html網(wǎng)頁建立下部導航欄中“聯(lián)系我們”的文本鏈接，鏈接到自己的郵箱第10講CSS樣式鏈接框架網(wǎng)頁多媒體示例2_創(chuàng)建鏈接打開站點Mysite，在網(wǎng)頁main.htm18錨記設置確定插入點位置命名錨記打開“插入”菜單，選擇“命名錨記”打開“命名錨記”對話框，輸入“***”創(chuàng)建錨記鏈接選擇需要創(chuàng)建錨記鏈接的對象在“屬性”面板，“鏈接”欄輸入“#***”第10講CSS樣式鏈接框架網(wǎng)頁多媒體錨記設置確定插入點位置第10講CSS樣式鏈接框架網(wǎng)頁多媒體19示例3_創(chuàng)建錨記鏈接打開網(wǎng)頁“tk.html”在標題前插入錨記，名稱為“fanhui”在網(wǎng)頁末尾文字“返回頁首”，創(chuàng)建錨記鏈接第10講CSS樣式鏈接框架網(wǎng)頁多媒體示例3_創(chuàng)建錨記鏈接打開網(wǎng)頁“tk.html”第10講CSS20圖形熱點鏈接圖像地圖也是一種超鏈接，適用于較大的圖像。創(chuàng)建圖像地圖，可以在圖像上創(chuàng)建不規(guī)則區(qū)域的鏈接或某個部分區(qū)域的鏈接。圖像地圖是將圖片分為幾個區(qū)域，這些區(qū)域又稱為熱點，單擊不同的熱點可以打開不同的鏈接，這樣的鏈接就稱為圖形熱點鏈接。第10講CSS樣式鏈接框架網(wǎng)頁多媒體圖形熱點鏈接圖像地圖也是一種超鏈接，適用于較大的圖像。第1021創(chuàng)建圖像的熱點鏈接創(chuàng)建圖像某個區(qū)域的超級鏈接，使之能鏈接到相應對象選中網(wǎng)頁中的圖像地圖點擊“屬性”面板上的“熱點工具”，在圖像上確定“熱點”區(qū)域指定鏈接對象(網(wǎng)頁、圖像等)第10講CSS樣式鏈接框架網(wǎng)頁多媒體創(chuàng)建圖像的熱點鏈接創(chuàng)建圖像某個區(qū)域的超級鏈接，使之能鏈接到相22示例4_創(chuàng)建熱點鏈接創(chuàng)建main.html網(wǎng)頁圖片中文字“快速網(wǎng)上沖印服務”的熱點鏈接，鏈接到“wscy.html”網(wǎng)頁第10講CSS樣式鏈接框架網(wǎng)頁多媒體示例4_創(chuàng)建熱點鏈接創(chuàng)建main.html網(wǎng)頁圖片中文字“快23框架和框架集的概念框架的概念框架把瀏覽器窗口分成幾個部分每個部分顯示不同的網(wǎng)頁使瀏覽器窗口同時包含多個網(wǎng)頁框架集的概念框架集是HTML文件，定義一組框架的布局和屬性包括框架的數(shù)目、大小、位置和每個框架中初始顯示頁面的URL框架集不包含要在瀏覽器中顯示的HTML內(nèi)容第10講CSS樣式鏈接框架網(wǎng)頁多媒體框架和框架集的概念框架的概念第10講CSS樣式鏈接框架網(wǎng)頁多24創(chuàng)建框架網(wǎng)頁創(chuàng)建框架網(wǎng)頁步驟打開“文件”菜單，選擇“新建”打開“新建文檔”對話框選擇“示例中的頁”在“示例文件夾”中選擇“框架頁”選擇框架類型第10講CSS樣式鏈接框架網(wǎng)頁多媒體創(chuàng)建框架網(wǎng)頁創(chuàng)建框架網(wǎng)頁步驟第10講CSS樣式鏈接框架網(wǎng)頁多25保存框架網(wǎng)頁選擇“文件/保存全部”菜單命令，依次保存框架集和框架打開“保存為”對話框按提示依次保存框架集和每個框架框架集和框架都是以網(wǎng)頁形式保存的框架集框架第10講CSS樣式鏈接框架網(wǎng)頁多媒體保存框架網(wǎng)頁選擇“文件/保存全部”菜單命令，依次保存框架集和26示例5_創(chuàng)建和保存框架網(wǎng)頁在站點中新建框架網(wǎng)頁，框架集樣式“上方固定”在上方框架網(wǎng)頁中輸入文字“框架網(wǎng)頁創(chuàng)建示例”在下方框架網(wǎng)頁中插入圖片“l(fā)ogo.jpg”依次保存框架集和每個框架框架集保存為kjj.html上方框架網(wǎng)頁保存為kj-top.html下方框架網(wǎng)頁保存為kj-under.html第10講CSS樣式鏈接框架網(wǎng)頁多媒體示例5_創(chuàng)建和保存框架網(wǎng)頁在站點中新建框架網(wǎng)頁，框架集樣式“27框架中打開網(wǎng)頁將插入點放置在框架網(wǎng)頁中打開“文件”菜單，選擇“在框架中打開”打開“選擇HTML文件”對話框選擇要在該框架中打開的網(wǎng)頁第10講CSS樣式鏈接框架網(wǎng)頁多媒體框架中打開網(wǎng)頁將插入點放置在框架網(wǎng)頁中第10講CSS樣式鏈接28示例6_框架中打開網(wǎng)頁打開“Mysite”站點在站點中新建框架網(wǎng)頁，框架集樣式“上方固定”在上方框架中打開網(wǎng)頁“Top.html”網(wǎng)頁在下方框架中打開Main.html網(wǎng)頁保存框架集為“Index.html”第10講CSS樣式鏈接框架網(wǎng)頁多媒體示例6_框架中打開網(wǎng)頁打開“Mysite”站點第10講CSS29框架的編輯通過“框架”面板選擇框架集和框架“窗口”菜單/“框架”，打開框架面板鼠標點擊選擇調(diào)整框架大小通過鼠標拖動框架邊框在“框架”屬性面板上可以設置精確設置注意：在編輯框架時，如果框架邊框不可見選擇“查看/可視化助理/框架邊框”，使框架邊框可見第10講CSS樣式鏈接框架網(wǎng)頁多媒體框架的編輯通過“框架”面板選擇框架集和框架第10講CSS樣式30框架中的鏈接設置框架中的鏈接在一個框架中使用鏈接在另一個框架中打開網(wǎng)頁鏈接設置方法選擇文本或?qū)ο笤凇皩傩浴泵姘宓摹版溄印敝?，點擊文件夾圖標打開“選擇文件”對話框，選擇鏈接到的文件在“屬性”面板的“目標”下拉菜單中，選擇顯示方式注意：框架中的鏈接必須在框架集中設置，否則無法選擇顯示方式第10講CSS樣式鏈接框架網(wǎng)頁多媒體框架中的鏈接設置框架中的鏈接第10講CSS樣式鏈接框架網(wǎng)頁多31示例7_框架中的鏈接設置設置上方框架中的鏈接設置“首頁”鏈接到“main.html”“網(wǎng)上沖印”鏈接到“wscy.html”“數(shù)碼商城”鏈接到“smsc.html”設置鏈接網(wǎng)頁顯示方式在“屬性”面板的“目標”下拉菜單中，選擇“mainFrame”顯示方式第10講CSS樣式鏈接框架網(wǎng)頁多媒體示例7_框架中的鏈接設置設置上方框架中的鏈接第10講CSS樣32網(wǎng)頁中的媒體插入媒體類型插入FLASH文件插入插件(音頻、視頻)插入ActiveX控件插入媒體方法選擇“插入/媒體”菜單命令或(選擇“常用”工具欄上“媒體”按鈕)33第10講CSS樣式鏈接框架網(wǎng)頁多媒體網(wǎng)頁中的媒體插入媒體類型33第10講CSS樣式鏈接框架網(wǎng)頁多33在網(wǎng)頁中插入FLASH動畫Flash動畫是網(wǎng)頁上最流行的動畫格式。在DreamweaverCS4中，F(xiàn)lash動畫也是最常用的多媒體插件之一，它將聲音、圖像和動畫等內(nèi)容加入到一個文件中并能制作較好的動畫效果，同時使用了優(yōu)化的算法將多媒體數(shù)據(jù)進行壓縮，是文件變得很小，因此，非常適合在網(wǎng)上傳播。34第10講CSS樣式鏈接框架網(wǎng)頁多媒體在網(wǎng)頁中插入FLASH動畫Flash動畫是網(wǎng)頁上最流行的動畫34插入FLASH動畫方法將光標移至所需插入Flash動畫的位置打開“插入”菜單，選擇“媒體”中的“SWF”打開“選擇文件對話框選擇所需插入的Flash動畫也可以通過“常用”工具欄中的“媒體”中“SWF”插入Flash動畫35第10講CSS樣式鏈接框架網(wǎng)頁多媒體插入FLASH動畫方法將光標移至所需插入Flash動畫的位置35設置FLASH動畫屬性在網(wǎng)頁文檔中插入Flash動畫文件后，選中Flash動畫在“屬性”面板中設置屬性36第10講CSS樣式鏈接框架網(wǎng)頁多媒體設置FLASH動畫屬性在網(wǎng)頁文檔中插入Flash動畫文件后，36網(wǎng)頁中的聲音格式在DreamweaverCS4中，可以向網(wǎng)頁文檔添加多種不同類型的聲音文件和格式，例如.wav、.midi和.mp3。根據(jù)要添加聲音的目的、文件大小、聲音品質(zhì)等要素，來確定插入哪種格式和方法。37第10講CSS樣式鏈接框架網(wǎng)頁多媒體網(wǎng)頁中的聲音格式在DreamweaverCS4中，可以向網(wǎng)37插入聲音文件方法將光標移至所需插入聲音文件的位置打開“插入”菜單，選擇“媒體”中的“插件”打開“選擇文件對話框選擇所需插入的聲音文件也可以通過“常用”工具欄中的“媒體”中“插件”插入聲音文件38第10講CSS樣式鏈接框架網(wǎng)頁多媒體插入聲音文件方法將光標移至所需插入聲音文件的位置38第10講38設置聲音屬性在網(wǎng)頁文檔中插入聲音文件后，選中插件符號在“屬性”面板中設置音頻屬性通過“編輯標簽”設置音頻屬性選擇插件符號，按右鍵，選擇“編輯標簽”，打開“標簽編輯器”對話框可以設置音頻“自動播放”、“循環(huán)”、“隱藏”39第10講CSS樣式鏈接框架網(wǎng)頁多媒體設置聲音屬性在網(wǎng)頁文檔中插入聲音文件后，選中插件符號39第139插入視頻文件方法將光標移至所需插入視頻文件的位置打開“插入”菜單，選擇“媒體”中的“插件”打開“選擇文件對話框選擇所需插入的文件也可以通過“常用”工具欄中的“媒體”中“插件”插入視頻文件40第10講CSS樣式鏈接框架網(wǎng)頁多媒體插入視頻文件方法將光標移至所需插入視頻文件的位置40第10講40設置視頻屬性在網(wǎng)頁文檔中插入視頻文件后，選中插件符號在“屬性”面板中設置屬性41第10講CSS樣式鏈接框架網(wǎng)頁多媒體設置視頻屬性在網(wǎng)頁文檔中插入視頻文件后，選中插件符號41第141示例8_網(wǎng)頁中添加多媒體對象在main.html網(wǎng)頁的右下方插入視屏film.wmv(文件在sc2文件夾中)，寬170，高200先將該單元格拆分成2行在smsc.html網(wǎng)頁中插入Flash文件，flash.swf(文件在sc2文件夾中)，寬585，高140在smsc.html網(wǎng)頁中插入音頻文件，(文件在sc2文件夾中任選)，隱藏插件符號，能循環(huán)自動播放。42第10講CSS樣式鏈接框架網(wǎng)頁多媒體示例8_網(wǎng)頁中添加多媒體對象在main.html網(wǎng)頁的右下方42課堂練習完成示例1－8在完成示例1－8基礎上，完成下列操作設置main.html網(wǎng)頁圖片的熱點鏈接，鏈接到SC2文件夾中Flash.swf設置wscy.html網(wǎng)頁圖片中文字“沖印我的相冊”的圖片熱點鏈接，鏈接到cyxc.html網(wǎng)頁屬性設置將框架網(wǎng)頁index.html標題設置為“E派網(wǎng)上沖印店”將top.html網(wǎng)頁中“鏈接顏色”、“已訪問過的鏈接顏色”均設為#FFFFFF，鏈接始終無下劃線第10講CSS樣式鏈接框架網(wǎng)頁多媒體課堂練習完成示例1－8第10講CSS樣式鏈接框架網(wǎng)頁多媒體43課后練習實驗指導P187：實驗28，范例(4)、(5)、(6)P192：實驗29，范例(4)、(5)第10講CSS樣式鏈接框架網(wǎng)頁多媒體課后練習實驗指導第10講CSS樣式鏈接框架網(wǎng)頁多媒體44演講完畢，謝謝聽講!再見，seeyouagain3rew2022/12/15第10講CSS樣式鏈接框架網(wǎng)頁多媒體演講完畢，謝謝聽講!再見，seeyouagain3rew45第10講CSS樣式鏈接框架網(wǎng)頁多媒體2022/12/15第10講CSS樣式鏈接框架網(wǎng)頁多媒體第10講CSS樣式鏈接框架網(wǎng)頁多媒體2022/12/14第146回顧創(chuàng)建本地站點和創(chuàng)建網(wǎng)頁創(chuàng)建表格和編輯表格網(wǎng)頁中添加文本網(wǎng)頁中添加圖片創(chuàng)建網(wǎng)頁存放的位置表格單元格大小調(diào)整注意：先將所有內(nèi)容(文字、圖片)插入表格中，如果有需要再調(diào)整單元格水平線顏色設置第10講CSS樣式鏈接框架網(wǎng)頁多媒體回顧創(chuàng)建本地站點和創(chuàng)建網(wǎng)頁第10講CSS樣式鏈接框架網(wǎng)頁多媒47教學內(nèi)容掌握CSS樣式的創(chuàng)建和運用方法掌握各種鏈接的創(chuàng)建方法掌握框架網(wǎng)頁的制作方法掌握利用框架網(wǎng)頁來組織由多個網(wǎng)頁組成的畫面掌握框架網(wǎng)頁中鏈接設置網(wǎng)頁中多媒體設置與應用第10講CSS樣式鏈接框架網(wǎng)頁多媒體教學內(nèi)容掌握CSS樣式的創(chuàng)建和運用方法第10講CSS樣式鏈接48管理站點打開站點打開“站點”菜單，選擇“管理站點”中“新建/站點”，在“本地根文件夾”中選擇站點刪除站點通過“文件/站點”，選擇“管理站點”中選擇要刪除的站點，點擊“刪除”第10講CSS樣式鏈接框架網(wǎng)頁多媒體管理站點打開站點第10講CSS樣式鏈接框架網(wǎng)頁多媒體49CSS樣式的概念CSS是一種用來進行網(wǎng)頁風格設計的樣式表技術，使用CSS樣式可以對頁面的布局、字體、顏色、背景和其他圖文效果實現(xiàn)更加精確地控制，并且同一個樣式可以應用于多個不同的對象，提高制作效率。CSS樣式是CascadingStyleSheets(層疊樣式單)的簡稱，也可以稱為“級聯(lián)樣式表”，它是一種網(wǎng)頁制作的新技術，利用它可以對網(wǎng)頁中的文本進行精確的格式化控制。要管理一個系統(tǒng)的網(wǎng)站，使用CSS樣式，可以快速格式化整個站點或多個文檔中的字體、圖像等網(wǎng)頁元素的格式。并且，CSS樣式可以實現(xiàn)多種不能用HTML樣式實現(xiàn)的功能。第10講CSS樣式鏈接框架網(wǎng)頁多媒體CSS樣式的概念CSS是一種用來進行網(wǎng)頁風格設計的樣式表技術50CSS樣式的功能CSS是用來控制一個網(wǎng)頁文檔中的某文本區(qū)域外觀的一組格式屬性。使用CSS能夠簡化網(wǎng)頁代碼，加快下載速度，減少上傳的代碼數(shù)量，從而可以避免重復操作。CSS樣式表是對HTML語法的一次革新，它位于文檔的<head>區(qū)，作用范圍由CLASS或其他任何符合CSS規(guī)范的文本來設置。對于其他現(xiàn)有的文檔，只要其中的CSS樣式符合規(guī)范，Dreamweaver就能識別它們。第10講CSS樣式鏈接框架網(wǎng)頁多媒體CSS樣式的功能CSS是用來控制一個網(wǎng)頁文檔中的某文本區(qū)域外51新建CSS樣式方法通過CSS樣式面板點擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對話框通過屬性面板點擊“CSS”按鈕，“目標規(guī)則”選擇“新CSS規(guī)則”，點擊“編輯規(guī)則”按鈕選擇“格式/CSS樣式/新建”菜單命令第10講CSS樣式鏈接框架網(wǎng)頁多媒體新建CSS樣式方法通過CSS樣式面板第10講CSS樣式鏈接框52新建CSS規(guī)則設置選擇器類型選擇器名稱(以點開始)規(guī)則定義范圍第10講CSS樣式鏈接框架網(wǎng)頁多媒體新建CSS規(guī)則設置選擇器類型第10講CSS樣式鏈接框架網(wǎng)頁多53CSS規(guī)則定義CSS規(guī)則分類類型：主要用于設置文字格式背景：主要用于設置文字、表格等背景方框：主要用于設置圖形、表格等大小邊框：主要用于設置表格邊框列表：主要用于設置項目符號定位：確定對象位置擴展：主要用于設置特殊光標第10講CSS樣式鏈接框架網(wǎng)頁多媒體CSS規(guī)則定義CSS規(guī)則分類第10講CSS樣式鏈接框架網(wǎng)頁多54應用CSS樣式規(guī)則新建CSS規(guī)則樣式后，就可以利用該樣式快速設置頁面上的網(wǎng)頁元素樣式，使網(wǎng)站具有統(tǒng)一的風格了。應用CSS樣式規(guī)則方法在“屬性”面板進行設定通過快捷菜單設定第10講CSS樣式鏈接框架網(wǎng)頁多媒體應用CSS樣式規(guī)則新建CSS規(guī)則樣式后，就可以利用該樣式快速55編輯CSS樣式對于創(chuàng)建的CSS樣式，可以進行編輯操作，主要包括修改CSS樣式屬性、設置CSS樣式首選參數(shù)以及鏈接和導入CSS樣式等。編輯CSS樣式規(guī)則方法在“屬性”面板中進行修改在“CSS樣式”面板中進行修改第10講CSS樣式鏈接框架網(wǎng)頁多媒體編輯CSS樣式對于創(chuàng)建的CSS樣式，可以進行編輯操作，主要包56示例1_CSS規(guī)則定義與應用打開“tk.html”網(wǎng)頁在網(wǎng)頁頂端插入1行4列表格，表格寬450像素，邊框為0，居中對齊在表格中插入圖片(圖片在SC2文件夾中)，圖片居中對齊創(chuàng)建CSS規(guī)則“.ys1”(邊框)樣式：groove；寬度：medium；顏色：#ccffcc將該CSS規(guī)則運用到表格中的圖片上創(chuàng)建CSS規(guī)則“.ys2”(類型)字體：華文新魏；大?。?6像素；粗體；顏色：#003300；居中對齊將該CSS規(guī)則運用到正文標題上創(chuàng)建CSS規(guī)則“.ys3”(列表)項目符號圖像：zp.gif(SC2文件夾中)；位置：外將該CSS規(guī)則運用到“成員行為”中編號上第10講CSS樣式鏈接框架網(wǎng)頁多媒體示例1_CSS規(guī)則定義與應用打開“tk.html”網(wǎng)頁第157示例1_樣張第10講CSS樣式鏈接框架網(wǎng)頁多媒體示例1_樣張第10講CSS樣式鏈接框架網(wǎng)頁多媒體58超鏈接的基礎知識超鏈接是網(wǎng)頁中最重要的組成部分。超鏈接的應用范圍很廣，利用它不僅可以鏈接到其他網(wǎng)頁，還可以鏈接到其他圖像文件、多媒體文件及下載程序，也可以利用它在網(wǎng)頁內(nèi)部進行鏈接或是發(fā)送E-mail等。在DreamweaverCS4中，可以將文檔中的任何文字及任意位置的圖片設置為超鏈接。第10講CSS樣式鏈接框架網(wǎng)頁多媒體超鏈接的基礎知識超鏈接是網(wǎng)頁中最重要的組成部分。超鏈接的應用59創(chuàng)建超鏈接的常用方法在DreamweaverCS4中，可以隨時隨地在所需的位置創(chuàng)建各種超級鏈接，并且可以通過多種方法來創(chuàng)建超鏈接可以在“屬性”面板中創(chuàng)建使用“插入”菜單創(chuàng)建使用“常用”工具欄中“超級鏈接”來創(chuàng)建超級鏈接的分類文本超鏈接圖像超鏈接錨記鏈接E-mail鏈接圖形熱點鏈接第10講CSS樣式鏈接框架網(wǎng)頁多媒體創(chuàng)建超鏈接的常用方法在DreamweaverCS4中，可以60創(chuàng)建文本和圖像鏈接創(chuàng)建文本和圖像鏈接方法選擇需要創(chuàng)建鏈接的對象按右鍵選擇“創(chuàng)建鏈接”(或者在屬性面板上設置)打開“選擇文件”對話框，選擇鏈接對象注意：鏈接對象可以是網(wǎng)頁、應用程序、各種媒體第10講CSS樣式鏈接框架網(wǎng)頁多媒體創(chuàng)建文本和圖像鏈接創(chuàng)建文本和圖像鏈接方法第10講CSS樣式鏈61創(chuàng)建電子郵件鏈接創(chuàng)建電子郵件的方法選擇需要創(chuàng)建電子郵件鏈接的對象打開“插入”菜單，選擇“電子郵件鏈接”打開“電子郵件鏈接”對話框，輸入郵件地址或者在“屬性”的“鏈接”文本框中輸入“mailto:郵件地址”第10講CSS樣式鏈接框架網(wǎng)頁多媒體創(chuàng)建電子郵件鏈接創(chuàng)建電子郵件的方法第10講CSS樣式鏈接框架62示例2_創(chuàng)建鏈接打開站點Mysite，在網(wǎng)頁main.html中創(chuàng)建鏈接建立下部導航欄中“隱私條例”的文本鏈接，鏈接到tk.html網(wǎng)頁建立下部導航欄中“聯(lián)系我們”的文本鏈接，鏈接到自己的郵箱第10講CSS樣式鏈接框架網(wǎng)頁多媒體示例2_創(chuàng)建鏈接打開站點Mysite，在網(wǎng)頁main.htm63錨記設置確定插入點位置命名錨記打開“插入”菜單，選擇“命名錨記”打開“命名錨記”對話框，輸入“***”創(chuàng)建錨記鏈接選擇需要創(chuàng)建錨記鏈接的對象在“屬性”面板，“鏈接”欄輸入“#***”第10講CSS樣式鏈接框架網(wǎng)頁多媒體錨記設置確定插入點位置第10講CSS樣式鏈接框架網(wǎng)頁多媒體64示例3_創(chuàng)建錨記鏈接打開網(wǎng)頁“tk.html”在標題前插入錨記，名稱為“fanhui”在網(wǎng)頁末尾文字“返回頁首”，創(chuàng)建錨記鏈接第10講CSS樣式鏈接框架網(wǎng)頁多媒體示例3_創(chuàng)建錨記鏈接打開網(wǎng)頁“tk.html”第10講CSS65圖形熱點鏈接圖像地圖也是一種超鏈接，適用于較大的圖像。創(chuàng)建圖像地圖，可以在圖像上創(chuàng)建不規(guī)則區(qū)域的鏈接或某個部分區(qū)域的鏈接。圖像地圖是將圖片分為幾個區(qū)域，這些區(qū)域又稱為熱點，單擊不同的熱點可以打開不同的鏈接，這樣的鏈接就稱為圖形熱點鏈接。第10講CSS樣式鏈接框架網(wǎng)頁多媒體圖形熱點鏈接圖像地圖也是一種超鏈接，適用于較大的圖像。第1066創(chuàng)建圖像的熱點鏈接創(chuàng)建圖像某個區(qū)域的超級鏈接，使之能鏈接到相應對象選中網(wǎng)頁中的圖像地圖點擊“屬性”面板上的“熱點工具”，在圖像上確定“熱點”區(qū)域指定鏈接對象(網(wǎng)頁、圖像等)第10講CSS樣式鏈接框架網(wǎng)頁多媒體創(chuàng)建圖像的熱點鏈接創(chuàng)建圖像某個區(qū)域的超級鏈接，使之能鏈接到相67示例4_創(chuàng)建熱點鏈接創(chuàng)建main.html網(wǎng)頁圖片中文字“快速網(wǎng)上沖印服務”的熱點鏈接，鏈接到“wscy.html”網(wǎng)頁第10講CSS樣式鏈接框架網(wǎng)頁多媒體示例4_創(chuàng)建熱點鏈接創(chuàng)建main.html網(wǎng)頁圖片中文字“快68框架和框架集的概念框架的概念框架把瀏覽器窗口分成幾個部分每個部分顯示不同的網(wǎng)頁使瀏覽器窗口同時包含多個網(wǎng)頁框架集的概念框架集是HTML文件，定義一組框架的布局和屬性包括框架的數(shù)目、大小、位置和每個框架中初始顯示頁面的URL框架集不包含要在瀏覽器中顯示的HTML內(nèi)容第10講CSS樣式鏈接框架網(wǎng)頁多媒體框架和框架集的概念框架的概念第10講CSS樣式鏈接框架網(wǎng)頁多69創(chuàng)建框架網(wǎng)頁創(chuàng)建框架網(wǎng)頁步驟打開“文件”菜單，選擇“新建”打開“新建文檔”對話框選擇“示例中的頁”在“示例文件夾”中選擇“框架頁”選擇框架類型第10講CSS樣式鏈接框架網(wǎng)頁多媒體創(chuàng)建框架網(wǎng)頁創(chuàng)建框架網(wǎng)頁步驟第10講CSS樣式鏈接框架網(wǎng)頁多70保存框架網(wǎng)頁選擇“文件/保存全部”菜單命令，依次保存框架集和框架打開“保存為”對話框按提示依次保存框架集和每個框架框架集和框架都是以網(wǎng)頁形式保存的框架集框架第10講CSS樣式鏈接框架網(wǎng)頁多媒體保存框架網(wǎng)頁選擇“文件/保存全部”菜單命令，依次保存框架集和71示例5_創(chuàng)建和保存框架網(wǎng)頁在站點中新建框架網(wǎng)頁，框架集樣式“上方固定”在上方框架網(wǎng)頁中輸入文字“框架網(wǎng)頁創(chuàng)建示例”在下方框架網(wǎng)頁中插入圖片“l(fā)ogo.jpg”依次保存框架集和每個框架框架集保存為kjj.html上方框架網(wǎng)頁保存為kj-top.html下方框架網(wǎng)頁保存為kj-under.html第10講CSS樣式鏈接框架網(wǎng)頁多媒體示例5_創(chuàng)建和保存框架網(wǎng)頁在站點中新建框架網(wǎng)頁，框架集樣式“72框架中打開網(wǎng)頁將插入點放置在框架網(wǎng)頁中打開“文件”菜單，選擇“在框架中打開”打開“選擇HTML文件”對話框選擇要在該框架中打開的網(wǎng)頁第10講CSS樣式鏈接框架網(wǎng)頁多媒體框架中打開網(wǎng)頁將插入點放置在框架網(wǎng)頁中第10講CSS樣式鏈接73示例6_框架中打開網(wǎng)頁打開“Mysite”站點在站點中新建框架網(wǎng)頁，框架集樣式“上方固定”在上方框架中打開網(wǎng)頁“Top.html”網(wǎng)頁在下方框架中打開Main.html網(wǎng)頁保存框架集為“Index.html”第10講CSS樣式鏈接框架網(wǎng)頁多媒體示例6_框架中打開網(wǎng)頁打開“Mysite”站點第10講CSS74框架的編輯通過“框架”面板選擇框架集和框架“窗口”菜單/“框架”，打開框架面板鼠標點擊選擇調(diào)整框架大小通過鼠標拖動框架邊框在“框架”屬性面板上可以設置精確設置注意：在編輯框架時，如果框架邊框不可見選擇“查看/可視化助理/框架邊框”，使框架邊框可見第10講CSS樣式鏈接框架網(wǎng)頁多媒體框架的編輯通過“框架”面板選擇框架集和框架第10講CSS樣式75框架中的鏈接設置框架中的鏈接在一個框架中使用鏈接在另一個框架中打開網(wǎng)頁鏈接設置方法選擇文本或?qū)ο笤凇皩傩浴泵姘宓摹版溄印敝?，點擊文件夾圖標打開“選擇文件”對話框，選擇鏈接到的文件在“屬性”面板的“目標”下拉菜單中，選擇顯示方式注意：框架中的鏈接必須在框架集中設置，否則無法選擇顯示方式第10講CSS樣式鏈接框架網(wǎng)頁多媒體框架中的鏈接設置框架中的鏈接第10講CSS樣式鏈接框架網(wǎng)頁多76示例7_框架中的鏈接設置設置上方框架中的鏈接設置“首頁”鏈接到“main.html”“網(wǎng)上沖印”鏈接到“wscy.html”“數(shù)碼商城”鏈接到“smsc.html”設置鏈接網(wǎng)頁顯示方式在“屬性”面板的“目標”下拉菜單中，選擇“mainFrame”顯示方式第10講CSS樣式鏈接框架網(wǎng)頁多媒體示例7_框架中的鏈接設置設置上方框架中的鏈接第10講CSS樣77網(wǎng)頁中的媒體插入媒體類型插入FLASH文件插入插件(音頻、視頻)插入ActiveX控件插入媒體方法選擇“插入/媒體”菜單命令或(選擇“常用”工具欄上“媒體”按鈕)78第10講CSS樣式鏈接框架網(wǎng)頁多媒體網(wǎng)頁中的媒體插入媒體類型33第10講CSS樣式鏈接框架網(wǎng)頁多78在網(wǎng)頁中插入FLASH動畫Flash動畫是網(wǎng)頁上最流行的動畫格式。在DreamweaverCS4中，F(xiàn)lash動畫也是最常用的多媒體插件之一，它將聲音、圖像和動畫等內(nèi)容加入到一個文件中并能制作較好的動畫效果，同時使用了優(yōu)化的算法將多媒體數(shù)據(jù)進行壓縮，是文件變得很小，因此，非常適合在網(wǎng)上傳播。79第10講CSS樣式鏈接框架網(wǎng)頁多媒體在網(wǎng)頁中插入FLASH動畫Flash動畫是網(wǎng)頁上最流行的動畫79插入FLASH動畫方法將光標移至所需插入Flash動畫的位置打開“插入”菜單，選擇“媒體”中的“SWF”打開“選擇文件對話框選擇所需插入的Flash動畫也可以通過“常用”工具欄中的“媒體”中“SWF”插入Flash動畫80第10講CSS樣式鏈接框架網(wǎng)頁多媒體插入FLASH動畫方法將光標移至所需插入Flash動畫的位置80設置FLASH動畫屬性在網(wǎng)頁文檔中插入Flash動畫文件后，選中Flash動畫在“屬性”面板中設置屬性81第10講CSS樣式鏈接框架網(wǎng)頁

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論