第10講_CSS樣式-鏈接-框架網頁-多媒體

1、1CSS樣式樣式鏈接鏈接框架網頁框架網頁多媒體多媒體2 2q教師：柳青 q電子信箱： Lq辦公室：信息樓B418q電話： 677038523q創(chuàng)建本地站點和創(chuàng)建網頁q創(chuàng)建表格和編輯表格q網頁中添加文本q網頁中添加圖片q創(chuàng)建網頁存放的位置q水平線顏色設置4q打開站點q打開“站點”菜單，選擇“管理站點”中“新建/站點”，在“本地根文件夾”中選擇站點q刪除站點q通過“文件/站點”，選擇“管理站點”中選擇要刪除的站點，點擊“刪除”5q掌握CSS樣式的創(chuàng)建和運用方法q掌握各種鏈接的創(chuàng)建方法q掌握框架網頁的制作方法q掌握利用框架網頁來組織由多個網頁組成的畫面q掌握框架網頁中鏈接設置q網頁中多媒體設置與應用

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

3、SS能夠簡化網頁代碼，加快下載速度，減少上傳的代碼數(shù)量，從而可以避免重復操作。qCSS樣式表是對HTML語法的一次革新，它位于文檔的區(qū)，作用范圍由CLASS或其他任何符合CSS規(guī)范的文本來設置。q對于其他現(xiàn)有的文檔，只要其中的CSS樣式符合規(guī)范，Dreamweaver就能識別它們。7q通過CSS樣式面板q點擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對話框q通過屬性面板q點擊“CSS”按鈕，“目標規(guī)則”選擇“新CSS規(guī)則”，點擊“編輯規(guī)則”按鈕q選擇“格式/CSS樣式/新建”菜單命令8q設置選擇器類型q選擇器名稱(以點開始)q規(guī)則定義范圍9qCSS規(guī)則分類q類型：主要用于設置文字格式q背景

4、：主要用于設置文字、表格等背景q方框：主要用于設置圖形、表格等大小q邊框：主要用于設置表格邊框q列表：主要用于設置項目符號q定位：確定對象位置q擴展：主要用于設置特殊光標10q新建CSS規(guī)則樣式后，就可以利用該樣式快速設置頁面上的網頁元素樣式，使網站具有統(tǒng)一的風格了。q應用CSS樣式規(guī)則方法q在“屬性”面板進行設定q通過快捷菜單設定11q對于創(chuàng)建的CSS樣式，可以進行編輯操作，主要包括修改CSS樣式屬性、設置CSS樣式首選參數(shù)以及鏈接和導入CSS樣式等。q編輯CSS樣式規(guī)則方法q在“屬性”面板中進行修改q在“CSS樣式”面板中進行修改12q打開 “tk.html”網頁q在網頁頂端插入1行4列表

5、格，表格寬450像素，邊框為0，居中對齊q在表格中插入圖片(圖片在SC2文件夾中)，圖片居中對齊q創(chuàng)建CSS規(guī)則“.ys1”(邊框)q樣式：groove；寬度：medium；顏色：#ccffccq將該CSS規(guī)則運用到表格中的圖片上q創(chuàng)建CSS規(guī)則“.ys2”(類型)q字體：華文新魏；大?。?6像素；粗體；顏色：#003300；居中對齊q將該CSS規(guī)則運用到正文標題上q創(chuàng)建CSS規(guī)則“.ys3”(列表)q項目符號圖像：zp.gif(SC2文件夾中)；位置：外q將該CSS規(guī)則運用到“成員行為”中編號上1314q超鏈接是網頁中最重要的組成部分。超鏈接的應用范圍很廣，利用它不僅可以鏈接到其他網頁，還可

6、以鏈接到其他圖像文件、多媒體文件及下載程序，也可以利用它在網頁內部進行鏈接或是發(fā)送E-mail等。q在Dreamweaver CS4中，可以將文檔中的任何文字及任意位置的圖片設置為超鏈接。15q在Dreamweaver CS4中，可以隨時隨地在所需的位置創(chuàng)建各種超級鏈接，并且可以通過多種方法來創(chuàng)建超鏈接q可以在“屬性”面板中創(chuàng)建q使用“插入”菜單創(chuàng)建q使用“常用”工具欄中“超級鏈接”來創(chuàng)建q超級鏈接的分類q文本超鏈接q圖像超鏈接q錨記鏈接qE-mail鏈接q圖形熱點鏈接1617q創(chuàng)建文本和圖像鏈接方法q選擇需要創(chuàng)建鏈接的對象q按右鍵選擇“創(chuàng)建鏈接”(或者在屬性面板上設置)q打開“選擇文件”對話

7、框，選擇鏈接對象q注意：鏈接對象可以是網頁、應用程序、各種媒體q創(chuàng)建電子郵件的方法q選擇需要創(chuàng)建電子郵件鏈接的對象q打開“插入”菜單，選擇 “電子郵件鏈接”q打開“電子郵件鏈接”對話框，輸入郵件地址q或者在“屬性”的“鏈接”文本框中輸入“mailto :郵件地址”1819q打開站點Mysite，在網頁main.html中創(chuàng)建鏈接q建立下部導航欄中“隱私條例”的文本鏈接，鏈接到tk.html網頁q建立下部導航欄中“聯(lián)系我們”的文本鏈接，鏈接到自己的郵箱20q確定插入點位置q命名錨記q打開“插入”菜單，選擇“命名錨記”q打開“命名錨記”對話框，輸入“*” q創(chuàng)建錨記鏈接q選擇需要創(chuàng)建錨記鏈接的對象

8、q在“屬性”面板，“鏈接”欄輸入“#*”21q打開網頁“tk.html”q在標題前插入錨記，名稱為“fanhui”q在網頁末尾文字“返回頁首”，創(chuàng)建錨記鏈接q圖像地圖也是一種超鏈接，適用于較大的圖像。q創(chuàng)建圖像地圖，可以在圖像上創(chuàng)建不規(guī)則區(qū)域的鏈接或某個部分區(qū)域的鏈接。q圖像地圖是將圖片分為幾個區(qū)域，這些區(qū)域又稱為熱點，單擊不同的熱點可以打開不同的鏈接，這樣的鏈接就稱為圖形熱點鏈接。2223q創(chuàng)建圖像某個區(qū)域的超級鏈接，使之能鏈接到相應對象q選中網頁中的圖像地圖q點擊“屬性”面板上的“熱點工具”，在圖像上確定“熱點”區(qū)域q指定鏈接對象(網頁、圖像等)24q創(chuàng)建main.html網頁圖片中文字“

9、快速網上沖印服務”的熱點鏈接，鏈接到“wscy.html”網頁q在main.html網頁中，當鼠標移動到以下圖片上時顯示“網上沖印服務”25q框架的概念q框架把瀏覽器窗口分成幾個部分q每個部分顯示不同的網頁q使瀏覽器窗口同時包含多個網頁q框架集的概念q框架集是HTML文件，定義一組框架的布局和屬性q包括框架的數(shù)目、大小、位置和每個框架中初始顯示頁面的URLq框架集不包含要在瀏覽器中顯示的HTML內容26q創(chuàng)建框架網頁步驟q打開“文件”菜單，選擇“新建 ”q打開“新建文檔”對話框q選擇“示例中的頁”q在“示例文件夾”中選擇“框架頁”q選擇框架類型q選擇“文件/保存全部”菜單命令，依次保存框架集和

10、框架q打開“保存為”對話框q按提示依次保存框架集和每個框架q框架集和框架都是以網頁形式保存的27q在站點中新建框架網頁，框架集樣式“水平拆分”q在上方框架網頁中插入圖片“l(fā)ogo.jpg”q在下方框架網頁中輸入文字“我的框架網頁”q依次保存框架集和每個框架q框架集保存為kjj.htmlq上方框架網頁保存為kj-top.htmlq下方框架網頁保存為kj-under.html2829q將插入點放置在框架網頁中q打開“文件”菜單，選擇“在框架中打開”q打開“選擇HTML文件”對話框q選擇要在該框架中打開的網頁30q打開“Mysite”站點q在站點中新建框架網頁，框架集樣式“上方固定”q在上方框架中打

11、開網頁“Top.html”網頁q在下方框架中打開Main.html網頁q保存框架集為“Index.html”31q通過“框架”面板選擇框架集和框架q“窗口”菜單/“框架”，打開框架面板q鼠標點擊選擇q調整框架大小q通過鼠標拖動框架邊框q在“框架”屬性面板上可以設置精確設置q注意：q在編輯框架時，如果框架邊框不可見q選擇“查看/可視化助理/框架邊框”，使框架邊框可見32q框架中的鏈接q在一個框架中使用鏈接在另一個框架中打開網頁q鏈接設置方法q選擇文本或對象q在“屬性”面板的“鏈接”中，點擊文件夾圖標q打開“選擇文件”對話框，選擇鏈接到的文件q在“屬性”面板的“目標”下拉菜單中，選擇顯示方式q注意

12、：框架中的鏈接必須在框架集中設置，否則無法選擇顯注意：框架中的鏈接必須在框架集中設置，否則無法選擇顯示方式示方式33q設置上方框架中的鏈接q設置“首頁”鏈接到“main.html” q“網上沖印”鏈接到“wscy.html”q設置鏈接網頁顯示方式q在“屬性”面板的“目標”下拉菜單中，選擇“mainFrame”顯示方式q“數(shù)碼商城” 鏈接到“smsc.html”，在新頁面中打開q插入媒體類型q插入FLASH文件q插入插件(音頻、視頻)q插入ActiveX控件q插入媒體方法q選擇“插入/媒體”菜單命令q或(選擇“常用”工具欄上“媒體”按鈕)34qFlash動畫是網頁上最流行的動畫格式。q在Drea

13、mweaver CS4中，F(xiàn)lash動畫也是最常用的多媒體插件之一，它將聲音、圖像和動畫等內容加入到一個文件中并能制作較好的動畫效果，同時使用了優(yōu)化的算法將多媒體數(shù)據(jù)進行壓縮，是文件變得很小，因此，非常適合在網上傳播。35q將光標移至所需插入Flash動畫的位置q打開“插入”菜單，選擇“媒體”中的“SWF”q打開“選擇文件對話框q選擇所需插入的Flash動畫q也可以通過“常用”工具欄中的“媒體”中“SWF”插入Flash動畫36q在網頁文檔中插入Flash動畫文件后，選中Flash動畫q在“屬性”面板中設置屬性37q在Dreamweaver CS4中，可以向網頁文檔添加多種不同類型的聲音文件和

14、格式，例如.wav、.midi和.mp3。q根據(jù)要添加聲音的目的、文件大小、聲音品質等要素，來確定插入哪種格式和方法。38q將光標移至所需插入聲音文件的位置q打開“插入”菜單，選擇“媒體”中的“插件”q打開“選擇文件對話框q選擇所需插入的聲音文件q也可以通過“常用”工具欄中的“媒體”中“插件”插入聲音文件39q在網頁文檔中插入聲音文件后，選中插件符號q在“屬性”面板中設置音頻屬性q通過“編輯標簽”設置音頻屬性q選擇插件符號，按右鍵，選擇“編輯標簽”，打開“標簽編輯器”對話框q可以設置音頻“自動播放”、“循環(huán)”、“隱藏”40q將光標移至所需插入聲音文件的位置q打開“插入”菜單，選擇“媒體”中的“

15、插件”q打開“選擇文件對話框q選擇所需插入的文件q也可以通過“常用”工具欄中的“媒體”中“插件”插入視頻文件41q在網頁文檔中插入視頻文件后，選中插件符號q在“屬性”面板中設置屬性42q在main.html網頁的右下方插入視頻film.wmv(文件在sc2文件夾中)，寬170，高200q先將該單元格拆分成2行q在smsc.html網頁中插入Flash文件flash.swf(文件在sc2文件夾中)，寬585，高140q在smsc.html網頁中插入音頻文件sound_01.mp3，(文件在sc2文件夾中任選)，隱藏插件符號，能循環(huán)自動播放。4344q完成示例18q在完成示例18基礎上，完成下列操作q設置