3-超鏈接與多媒體

1、網(wǎng)頁中的網(wǎng)頁中的超鏈接與多媒體設(shè)計超鏈接與多媒體設(shè)計教學(xué)基本要求教學(xué)基本要求 n超鏈接是網(wǎng)頁設(shè)計基礎(chǔ)中必不可少的基礎(chǔ)知識，內(nèi)容不是很多，但經(jīng)常用到，所以一定要完全理解并熟練掌握。路徑的概念路徑的概念超鏈接的建立超鏈接的建立超鏈接的應(yīng)用超鏈接的應(yīng)用路徑的概念路徑的概念n在WWW上所有的文件都有自己的存放位置和路徑，創(chuàng)建文件間的超鏈接的關(guān)鍵是確定被鏈接文件的路徑。在WWW上文件路徑有兩種表示方法：絕對路徑和相對路徑。n絕對路徑v 絕對路徑是文件的完整路徑，以Web站點的根目錄為基準(zhǔn)。v 例：http:/ 是以引用文件的網(wǎng)頁所在的位置為參數(shù)基礎(chǔ)而建立的目錄路徑如果當(dāng)前位于joke.html頁面：lo

2、gin.html的相對路徑為 ”login.html”face.gif的相對路徑為 ”images/face.gif”index.html的相對路徑為 ”./index.html”超鏈接標(biāo)簽超鏈接標(biāo)簽n語法語法v 顯示的文字 v 屬性href：鏈接的目標(biāo)v 屬性title：鼠標(biāo)指向鏈接時的提示文字v 屬性target：顯示目標(biāo)內(nèi)容的窗口類型：屬性值描述_parent在上一級窗口中打開_blank在新窗口中打開_self在當(dāng)前窗口中打開_top在最前端顯示的窗口中打開超鏈接設(shè)計例超鏈接設(shè)計例n代碼如下： 鏈接示例 新浪網(wǎng)站鏈接 超鏈接設(shè)計例超鏈接設(shè)計例n點擊“新浪網(wǎng)站鏈接”鏈接，就可以打開新的窗

3、口，展現(xiàn)新浪網(wǎng)主頁。超鏈接的幾種設(shè)計超鏈接的幾種設(shè)計n頁內(nèi)鏈接v 建立鏈接： 目錄文字 v 鏈接目標(biāo)： 書簽內(nèi)容 n站內(nèi)鏈接v 顯示的文字 n其他站點鏈接v 顯示的文字 n圖像式鏈接v n郵箱鏈接v 顯示的文字 網(wǎng)頁內(nèi)部鏈接例網(wǎng)頁內(nèi)部鏈接例n如果一個頁面很長，尋找相應(yīng)內(nèi)容比較困難，可以通過在同一個網(wǎng)頁文件中建立鏈接來實現(xiàn)。n建立頁內(nèi)鏈接：v 目錄文字 n在鏈接的目標(biāo)處（通常我們稱之為書簽或錨）v 書簽內(nèi)容 查看我的愛好查看我的性格 . .愛好我喜歡戶外的活動，不太愿意呆在室內(nèi)。愛到有山有水的地方玩，比如“十渡”、“桃源仙谷”和“生存島”這樣的地方 性格自認(rèn)為比較開朗，有時也會表現(xiàn)出內(nèi)向的一面，

4、朋友說我有 圖像鏈接例圖像鏈接例n只需將標(biāo)簽放在和之間，那么這個圖像將成為一個可單擊的圖像，并產(chǎn)生一個鏈接。n語法格式為：v n圖像鏈接示例圖像鏈接示例n示例代碼如下： 鏈接示例 你可以將一張圖片作為一個鏈接，點擊這個圖片。 圖像鏈接示例圖像鏈接示例n頁面顯示效果如圖郵箱鏈接郵箱鏈接n在網(wǎng)站中，經(jīng)常會看到“聯(lián)系我們”或者“給我寫信”的鏈接，用鼠標(biāo)點擊后會發(fā)現(xiàn)將啟動本地機器的郵件工具，并且地址欄的內(nèi)容已經(jīng)填寫完整。n其實現(xiàn)的語法格式為：v 描述文字v 注：除發(fā)送郵箱外，其他郵件選項可在郵件工具界面中填寫。n郵箱鏈接郵箱鏈接n示例：v 給管理員發(fā)送郵件 郵箱鏈接例郵箱鏈接例n代碼如下： 郵箱鏈接示

5、例 這個郵箱地址鏈接寫了to, cc, bcc, subject, body 的內(nèi)容： 寫信給新浪 注:空格請用%20表示。郵箱鏈接例郵箱鏈接例n頁面顯示效果圖：郵箱鏈接例郵箱鏈接例n點擊“寫信給新浪”鏈接后，效果如圖：網(wǎng)頁中的多媒體設(shè)計網(wǎng)頁中的多媒體設(shè)計n教學(xué)要求：v 掌握制作多媒體網(wǎng)頁的方法v 網(wǎng)頁插入滾動字幕v 在網(wǎng)頁中嵌入音頻、視頻及flash文件等多媒體文件，使網(wǎng)頁的內(nèi)容更加豐富多彩。滾動字幕滾動字幕n使用標(biāo)簽實現(xiàn)，是一個雙標(biāo)簽。n語法格式:v 要滾動的文字 nMarquee屬性介紹：v direction屬性：文字滾動方向（取值：up、down、left、right）v behav

6、ior屬性：滾動方式（ scroll循環(huán)、slide單次、alternate調(diào)向）v scrollamount屬性：滾動速度v scrolldelay屬性：設(shè)置滾動延遲v bgcolor屬性：設(shè)置背景色。v height和width屬性：設(shè)置滾動字幕的高度和寬度v hspace和vspace屬性：設(shè)置滾動字幕周圍的空白區(qū)域的大小v loop屬性：設(shè)置滾動次數(shù)滾動字幕例滾動字幕例n滾動字幕示例代碼滾動文字滾動文字 生命在于運動，奮斗不息，“滾動”不止?jié)L動字幕例滾動字幕例n滾動字幕示例嵌入多媒體文件嵌入多媒體文件插入音頻插入音頻嵌入嵌入mp3mp3、設(shè)置背景音樂、設(shè)置背景音樂插入視頻插入視頻插入插入aviavi視頻文件視頻文件插入動畫插入動畫插入插入FlashFlash動畫動畫插入音頻插入音頻n嵌入mp3的語法格式為：v v 例：n置背景音樂的語法格式為：v v 例： 背景音樂 背景音樂 插入視頻插入視頻n在網(wǎng)頁中插入avi視頻文件的語法格式為：v n例： 插入視頻 播放視頻 n插入插入Flash動畫