電子商務(wù)網(wǎng)站建設(shè)與管理-第5章構(gòu)建動(dòng)態(tài)HTML網(wǎng)頁

第5章構(gòu)建動(dòng)態(tài)HTML網(wǎng)頁

5.1Flash動(dòng)畫

5.2插入音頻和視頻

5.3添加滾動(dòng)字幕

5.4處理CSS樣式

5.5添加超鏈接5.1Flash動(dòng)畫5.1.1Flash動(dòng)畫技術(shù)Flash動(dòng)畫技術(shù)是實(shí)現(xiàn)和傳遞基于矢量的圖形和動(dòng)畫的首要方案。將Dreamweaver與動(dòng)感、鮮活而深受用戶歡送的Flash結(jié)合使用，有助于制作出更具動(dòng)感的主頁。Dreamweaver不僅與Flash之間有較強(qiáng)的兼容性，而且在其中也可以直接制作Flash文件。1.Flash動(dòng)畫技術(shù)開展概述Flash3.0自1998年面市以來，以其獨(dú)特的2D網(wǎng)頁多媒體技術(shù)及交互式的編程令瀏覽者眼睛一亮，但新生事物總是被人忽略的，當(dāng)時(shí)只在少數(shù)幾個(gè)先知先覺的個(gè)人主頁采用了這種技術(shù)。Flash動(dòng)畫開展過程分成三個(gè)階段：簡(jiǎn)單Flash動(dòng)畫期；復(fù)雜Flash動(dòng)畫期；大型Flash動(dòng)畫期。下一頁返回5.1Flash動(dòng)畫2.Flash動(dòng)畫技術(shù)的特點(diǎn)〔1〕Flash動(dòng)畫，受網(wǎng)絡(luò)資源的制約一般比較小，所以在情節(jié)和畫面上往往更夸張起伏，致力于在最短時(shí)間內(nèi)傳達(dá)最深感受。〔2〕Flash動(dòng)畫具有交互性優(yōu)勢(shì)，能更好地滿足受眾的需要。它可以讓欣賞者的動(dòng)作成為動(dòng)畫的一局部，通過點(diǎn)擊、選擇等動(dòng)作決定動(dòng)畫的運(yùn)行過程和結(jié)果。這一點(diǎn)是傳統(tǒng)動(dòng)畫所無法比較的。〔3〕由于只需要掌握一些特定的軟件就可以嘗試，F(xiàn)lash動(dòng)畫的制作相比照較簡(jiǎn)單，一個(gè)愛好者很容易就能成為一個(gè)制作者。全新的Flash動(dòng)畫〔Flash〕使動(dòng)畫制作變得非常簡(jiǎn)單：一套計(jì)算機(jī)軟件，一個(gè)人，一臺(tái)電腦就可以制作出一段有聲有色的動(dòng)畫片段。下一頁上一頁返回5.1Flash動(dòng)畫〔4〕Flash動(dòng)畫可以放在網(wǎng)上供人欣賞和下載，由于使用的是矢量圖，文件小、傳輸速度快的特點(diǎn)，助長(zhǎng)了高速動(dòng)畫的崛起，它可以利用獨(dú)有的優(yōu)勢(shì)在網(wǎng)上廣泛傳播，有著可比較的傳播性。Flash制作的MV比傳統(tǒng)的MV易于在網(wǎng)絡(luò)上傳播?！?〕Flash動(dòng)畫雖然現(xiàn)在還比較粗糙、簡(jiǎn)陋，但Flash有新的視覺效果，比傳統(tǒng)的動(dòng)漫更加靈巧，更加“酷〞，不可否認(rèn)，它已經(jīng)成為了一種新時(shí)代的藝術(shù)表現(xiàn)形式?！?〕用Flash制作動(dòng)畫會(huì)大幅度降低制作本錢，減少人力、物力資源的消耗。同時(shí)，在制作時(shí)間上也會(huì)大大減少。半小時(shí)的節(jié)目，假設(shè)用Flash技術(shù)制作，3～4個(gè)月就可殺青，假設(shè)用其他技術(shù)通常需用10～14個(gè)月。〔7〕Flash制作的動(dòng)畫可以同時(shí)在網(wǎng)絡(luò)與電視臺(tái)播出，實(shí)現(xiàn)一片兩播。下一頁上一頁返回5.1Flash動(dòng)畫插入Flash動(dòng)畫1.開始布局〔1〕插入一個(gè)1行1列的表格〔表格1〕，表格的寬度為726px，邊框粗細(xì)為0，單元格邊距為0、單元格間距為1，背景顏色為#892321，將表格居中對(duì)齊。〔2〕插入一個(gè)3行2列的表格〔表格2〕，表格的寬度為100%，邊框粗細(xì)為0，單元格邊距和單元格間距都為0，背景顏色為#6DCFF6。〔3〕在表格2第二行左側(cè)單元格插入一個(gè)6行一列的表格〔表格3〕，表格寬度為95%，邊框和單元格邊距為0，單元格間距為5，將表格居中對(duì)齊。第一行高度為15，其余各行高度都為40。〔4〕在表格2右側(cè)單元格插入一個(gè)1行2列的表格〔表格4〕，表格寬度為550px。邊框、單元格邊距和間距都為0。下一頁上一頁返回5.1Flash動(dòng)畫2.插入頁面元素Flash將光標(biāo)放置在表格任意單元格中，單擊常用快捷欄中的媒體按鈕，然后在彈出的列表中選擇Flash，如圖5-1所示。彈出“選擇文件〞對(duì)話框，選擇swf文件夾中的huaduo.swf文件。單擊“確定〞按鈕后，插入的Flash動(dòng)畫并不會(huì)在文檔窗口中顯示內(nèi)容，而是以一個(gè)帶有字母F的灰色框來表示。在文檔窗口單擊這個(gè)Flash文件，就可以在屬性面板中設(shè)置它的屬性了，如圖5-2所示。3.插入Flash文本將光標(biāo)放置在表格3第二行的單元格中，用Flash文本制作導(dǎo)航欄目。單擊常用快捷欄的媒體按鈕，在列表中選擇Flash文本，彈出“插入Flash文本〞對(duì)話框，字體隨意，大小為22px，顏色設(shè)置為#F5E458，轉(zhuǎn)滾顏色為#54C994，文本為“圖片素材〞，背景顏色#6DCFF6，選擇自己需要的路徑鏈接。同樣方法我們分別在表格3的第3、4、5、6行制作“代碼素材〞、“Flash動(dòng)漫〞、“精美壁紙〞和“音頻視頻〞等欄目。下一頁上一頁返回5.1Flash動(dòng)畫4.插入Flash按鈕將光標(biāo)放置于插入Flash按鈕的位置，單擊常用快捷欄的媒體按鈕，在列表中選擇Flash按鈕，彈出“插入Flash按鈕〞對(duì)話框，如圖5-4所示。5.插入FlashPaper我們還可以在網(wǎng)頁中插入MacromediaFlashPaper文檔。在瀏覽器中翻開包含F(xiàn)lashPaper文檔的頁面時(shí)，瀏覽者能夠?yàn)g覽FlashPaper文檔中的所有頁面，而無須加載新的Web頁。也可以搜索、打印和縮放該文檔。在“文檔〞窗口中，將光標(biāo)放在頁面上想要顯示FlashPaper文檔的位置，然后選擇“插入〞→“媒體〞→“FlashPaper〞。上一頁返回5.2插入音頻和視頻插入聲音聲音能極好地襯托網(wǎng)頁頁面的氣氛，網(wǎng)頁中常見的聲音格式有WAV、MP3、MIDI、AIF、RA或RealAudio格式。1.添加背景音樂在頁面中可以嵌入背景音樂，這種音樂多以MP3、MIDI文件為主。在HTML語言中，通過<bgsoung>這個(gè)標(biāo)記可以嵌入多種格式的音樂文件。2.嵌入音頻嵌入音頻可以將聲音直接插入頁面中，但只有瀏覽者在瀏覽網(wǎng)頁時(shí)具有所選聲音文件的適當(dāng)插件后，聲音才可以播放。如果希望在頁面顯示瀏覽器的外觀，可以使用以下方法?！?〕翻開02.html網(wǎng)頁，將光標(biāo)放置于我們想要顯示播放器的位置?！?〕單擊快捷欄上的“媒體〞按鈕，從下拉列表中選擇“插件〞?！?〕彈出“選擇文件〞對(duì)話框，選擇對(duì)話框中的02.wma音頻文件，如圖5-6所示。下一頁返回5.2插入音頻和視頻單擊“確定〞按鈕后，插入的插件在文檔窗口中以圖標(biāo)來顯示，如圖5-7所示。插入普通視頻〔1〕翻開網(wǎng)頁，希望在光標(biāo)所在的位置插入視頻文件。單擊“常用〞對(duì)象組上的Flash按鈕，從彈出的下拉菜單中選擇“插件〞?！?〕彈出“選擇文件〞對(duì)話框，可以選擇要翻開的插件文件，這里選擇media目錄下的1.mov視頻文件?！?〕單擊“確定〞按鈕后，所插入的插件并不會(huì)在“文檔窗口〞中顯示內(nèi)容，而是以圖標(biāo)來顯示?！?〕在“屬性〞面板中將這個(gè)插件圖標(biāo)的大小改為320×240像素。下一頁上一頁返回5.2插入音頻和視頻〔5〕如果希望實(shí)現(xiàn)循環(huán)播放視頻的效果，繼續(xù)編輯參數(shù)，單擊“+〞按鈕，在“參數(shù)〞列中輸入loop，并在“值〞列中輸入true后，單擊“確定〞按鈕。如果希望在翻開頁面時(shí)電影自動(dòng)播放，可以單擊“屬性〞面板的“參數(shù)〞按鈕編輯參數(shù)，在“參數(shù)〞對(duì)話框中的“參數(shù)〞中輸入autostart，并在“值〞列中輸入true后，單擊“確定〞按鈕?！?〕按F12快捷鍵后，翻開瀏覽器預(yù)覽效果。這個(gè)頁面實(shí)現(xiàn)的是嵌入電影的效果?！?〕單擊“確定〞按鈕后，所插入的插件并不會(huì)在“文檔窗口〞中顯示內(nèi)容。下一頁上一頁返回5.2插入音頻和視頻插入Flash視頻〔1〕在Dreamweaver的“文檔〞窗口中翻開index.html頁面，插入一個(gè)3列的表格，在由3列組成的表格的中間一列中放置的圖形之上單擊一次?！?〕選擇“插入〞→“媒體〞→“Flash視頻〞。〔3〕在“插入Flash視頻〞對(duì)話框中，從“視頻類型〞彈出式菜單中選擇“漸進(jìn)式下載視頻〞。使用Dreamweaver中的“插入Flash視頻〞命令，可將Flash視頻內(nèi)容插入Web頁面，而無需使用Flash創(chuàng)作工具。該命令可以插入Flash組件；當(dāng)用戶在瀏覽器中查看它時(shí)，它顯示用戶選擇的Flash視頻內(nèi)容以及一組播放控件。下一頁上一頁返回5.2插入音頻和視頻〔4〕在URL文本框中，指定cafe_townsend_home.flv文件的相對(duì)路徑，方法是單擊“瀏覽〞，瀏覽至cafe_townsend_home.flv文件〔位于站點(diǎn)的cafe_townsend根文件夾中〕，并選擇該FLV文件?！?〕從“外觀〞彈出式菜單中選擇HaloSkin2。〔6〕在“寬度〞和“高度〞文本框中，執(zhí)行以下操作：①在“寬度〞文本框中，輸入180。②在“高度〞文本框中，輸入135，然后按Enter鍵?！?〕其余選項(xiàng)保存默認(rèn)的選擇值?！?〕單擊“確定〞按鈕關(guān)閉對(duì)話框，并將Flash視頻內(nèi)容添加到Web頁面?！?〕保存該頁。上一頁返回5.3添加滾動(dòng)字幕使用標(biāo)簽選擇器插入marquee標(biāo)簽〔1〕把光標(biāo)插入點(diǎn)放在需要插入滾動(dòng)字幕的地方。〔2〕單擊插入面板的“標(biāo)簽選擇器〞?！?〕選擇marquee標(biāo)簽，單擊“插入〞按鈕，如圖5-11所示。使用標(biāo)簽檢查器設(shè)置marquee標(biāo)簽的屬性〔1〕轉(zhuǎn)換到代碼視圖。把光標(biāo)插入點(diǎn)放在marquee標(biāo)簽內(nèi)，如圖5-12所示。〔2〕選擇“窗口〞→“標(biāo)簽檢查器〞。可以在“標(biāo)簽檢查器〞中設(shè)置標(biāo)簽的各種用法，如圖5-13所示。下一頁返回5.3添加滾動(dòng)字幕設(shè)置marquee標(biāo)簽的主要用法〔1〕點(diǎn)擊behavior設(shè)置項(xiàng)右邊的下拉箭頭，選擇滾動(dòng)字幕內(nèi)容的運(yùn)動(dòng)方式，如圖5-14所示。〔2〕direction屬性設(shè)置字幕內(nèi)容的滾動(dòng)方向，如圖5-15所示。〔3〕scrollamount屬性設(shè)置字幕內(nèi)容滾動(dòng)的速度，如圖5-16所示?！?〕scrolldelay屬性設(shè)置字幕內(nèi)容滾動(dòng)時(shí)停頓的時(shí)間，單位為毫秒。如果要讓滾動(dòng)看起來流暢，數(shù)值應(yīng)該盡量小。實(shí)例中設(shè)置為1毫秒。如果要有步進(jìn)的感覺，就設(shè)置時(shí)間長(zhǎng)一點(diǎn)吧，如圖5-17所示?！?〕width屬性設(shè)置滾動(dòng)字幕的寬度，如圖5-18所示。〔6〕onMouseOver事件設(shè)置鼠標(biāo)移動(dòng)到滾動(dòng)字幕時(shí)的動(dòng)作，常設(shè)置為停止?jié)L動(dòng)。onMouseOut事件設(shè)置鼠標(biāo)離開滾動(dòng)字幕時(shí)的動(dòng)作，常設(shè)置為開始滾動(dòng)，如圖5-19所示。下一頁上一頁返回5.3添加滾動(dòng)字幕〔7〕style屬性設(shè)置字幕內(nèi)容的樣式。實(shí)例中設(shè)置字幕文字大小，輸入了“font:12px;〞?！?〕loop屬性設(shè)置字幕內(nèi)容滾動(dòng)次數(shù)，默認(rèn)值為無限?！?1〞也為無限。一套向上滾動(dòng)字幕的代碼：<marqueebehavior=“scroll〞direction=“up〞width=“200〞height=“150〞loop=“-1〞scrollamount=“1〞scrolldelay=“1〞style=“font:12px;〞onMouseOver=“this.stop();〞onMouseOut=“this.start();〞>滾動(dòng)字幕內(nèi)容</marquee>上一頁返回5.4處理CSS樣式創(chuàng)立CSS樣式1.選中菜單“窗口〞→“CSS樣式〞翻開CSS樣式面板，如圖5-23所示。2.單擊“CSS樣式〞面板右下角的“新建CSS規(guī)那么〞按鈕翻開“新建CSS規(guī)那么〞對(duì)話框，如圖5-24所示。在“選擇器類型〞選項(xiàng)中，可以選擇創(chuàng)立CSS樣式的方法包括以下三種。〔1〕類：我們可以在文檔窗口的任何區(qū)域或文本中應(yīng)用類樣式，如果將類樣式應(yīng)用于一整段文字，那么會(huì)在相應(yīng)的標(biāo)簽中出現(xiàn)CLASS屬性，該屬性值即為類樣式的名稱。下一頁返回5.4處理CSS樣式〔2〕標(biāo)簽〔重新定義特定標(biāo)簽的外觀〕：重新定義HTML標(biāo)記的默認(rèn)格式。我們可以針對(duì)某一個(gè)標(biāo)簽來定義層疊樣式表，也就是說定義的層疊樣式表將只應(yīng)用于選擇的標(biāo)簽。例如，我們?yōu)?lt;body>和</body>標(biāo)簽定義了層疊樣式表，那么所有包含在<body>和</body>標(biāo)簽的內(nèi)容將遵循定義的層疊樣式表?！?〕高級(jí)〔ID、偽類選擇器等〕：為特定的組合標(biāo)簽定義層疊樣式表，使用ID作為屬性，以保證文檔具有唯一可用的值。高級(jí)樣式是一種特殊類型的樣式，常用的有4種：①a:link：設(shè)定正常狀態(tài)下鏈接文字的樣式。②a:active：設(shè)定鼠標(biāo)單擊時(shí)鏈接的外觀。③a:visited：設(shè)定訪問過的鏈接的外觀。④a:hover：設(shè)定鼠標(biāo)放置在鏈接文字之上時(shí)，文字的外觀。下一頁上一頁返回5.4處理CSS樣式3.為新建CSS樣式輸入或選擇名稱、標(biāo)記或選擇器。4.在“定義在〞區(qū)域選擇定義的樣式位置可以是“新建樣式表文件〞或“僅對(duì)該文檔〞。5.“CSS規(guī)那么定義〞對(duì)話框中設(shè)置CSS規(guī)那么定義。使用CSS樣式美化頁面1.文本樣式的設(shè)置新建CSS樣式，“選擇器類型〞為類，名稱為“style1〞定義在“僅對(duì)該文檔〞。保存至站點(diǎn)根目錄下的CSS文件夾內(nèi)，彈出“CSS規(guī)那么定義〞對(duì)話框，默認(rèn)顯示的就是對(duì)文本進(jìn)行設(shè)置的“類型〞項(xiàng)?！?〕字體：可以在下拉菜單中選擇相應(yīng)的字體?！?〕大?。捍笮【褪亲痔?hào)，可以直接輸入數(shù)字，然后選擇單位。下一頁上一頁返回5.4處理CSS樣式〔3〕樣式：設(shè)置文字的外觀，包括正常、斜體、偏斜體?！?〕行高：這項(xiàng)設(shè)置在網(wǎng)頁制作中很常用。設(shè)置行高，可以選擇“正常〞，讓計(jì)算機(jī)自動(dòng)調(diào)整行高，也可以使用數(shù)值和單位結(jié)合的形式自行設(shè)置。需要注意的是，單位應(yīng)該和文字的單位一致，行高的數(shù)值是包括字號(hào)數(shù)值在內(nèi)的。例如，文字設(shè)置為12pt，如果要?jiǎng)?chuàng)立一倍行距，那么行高應(yīng)該為24pt。〔5〕變量：在英文中，大寫字母的字號(hào)一般比較大，采用“變量〞中的“小型大寫字母〞設(shè)置，可以縮小大寫字母?！?〕顏色：設(shè)置文字的色彩。下一頁上一頁返回5.4處理CSS樣式2.背景樣式的設(shè)置在HTML中，背景只能使用單一的色彩或利用圖像水平和垂直方向的平鋪。使用CSS之后，有了更加靈活的設(shè)置。在CSS規(guī)那么定義的對(duì)話框左側(cè)選擇“背景〞項(xiàng)，可以在右邊區(qū)域設(shè)置CSS樣式的背景格式。3.區(qū)塊樣式設(shè)置在CSS規(guī)那么定義的對(duì)話框左側(cè)選擇“區(qū)塊〞項(xiàng)，可以在右邊區(qū)域設(shè)置CSS樣式的區(qū)塊格式?！?〕單詞間距：英文單詞之間的距離，一般選擇默認(rèn)設(shè)置?！?〕字母間距：設(shè)置英文字母間距，使用正值為增加字母間距，使用負(fù)值為減小字母間距?！?〕垂直對(duì)齊：設(shè)置對(duì)象的垂直對(duì)齊方式。下一頁上一頁返回5.4處理CSS樣式〔4〕文本對(duì)齊：設(shè)置文本的水平對(duì)齊方式?！?〕文字縮進(jìn)：這是最重要的工程。中文文字的首行縮進(jìn)就是由它來實(shí)現(xiàn)的。首先輸入具體的數(shù)值，然后選擇單位。文字的縮進(jìn)和字號(hào)要保持統(tǒng)一，如字號(hào)為12px，想創(chuàng)立兩個(gè)中文字的縮進(jìn)效果，文字縮進(jìn)就應(yīng)該為18px?！?〕空格：對(duì)源代碼文字空格的控制。選擇“正常〞，忽略源代碼文字之間的所有空格。選擇“保存〞，將保存源代碼中所有的空格形式，包括由空格鍵、Tab鍵、Enter鍵創(chuàng)立的空格?！?〕顯示：指定是否以及如何顯示元素。選擇“無〞那么關(guān)閉它被指定給的元素的顯示。在實(shí)際控制中很少使用。下一頁上一頁返回5.4處理CSS樣式4.方框樣式的設(shè)置在前面我們?cè)O(shè)置過圖像的大小、圖像水平和垂直方向上的空白區(qū)域、圖像是否有文字環(huán)繞效果等。方框設(shè)置進(jìn)一步完善、豐富了這些設(shè)置。在CSS規(guī)那么定義的對(duì)話框左側(cè)選擇“方框〞項(xiàng)，可以在右邊區(qū)域設(shè)置CSS樣式的方框格式。5.邊框樣式設(shè)置邊框樣式設(shè)置可以給對(duì)象添加邊框，設(shè)置邊框的顏色、粗細(xì)、樣式。在CSS規(guī)那么定義對(duì)話框的左側(cè)選擇“邊框〞項(xiàng)，可以在右邊區(qū)域設(shè)置CSS樣式的邊框格式。樣式設(shè)置邊框的樣式，如果選中“全部相同〞復(fù)選框，那么只需要設(shè)置“上〞樣式，其他方向的樣式與“上〞相同。下一頁上一頁返回5.4處理CSS樣式6.列表樣式設(shè)置CSS中有關(guān)列表的設(shè)置豐富了列表的外觀。在CSS規(guī)那么定義的對(duì)話框左側(cè)選擇“列表〞項(xiàng)，可以在右邊區(qū)域設(shè)置CSS樣式的列表格式?！?〕類型：設(shè)置引導(dǎo)列表工程的符號(hào)類型?？梢赃x擇圓點(diǎn)、圓圈、方塊、數(shù)字、小寫羅馬數(shù)字、大寫羅馬數(shù)字、小寫字母、大寫字母、無列表符號(hào)等?！?〕工程符號(hào)圖像：可以選擇圖像作為工程的引導(dǎo)符號(hào)，單擊右側(cè)的“瀏覽〞按鈕，找到圖像文件即可。選擇ul標(biāo)簽可以對(duì)整個(gè)列表應(yīng)用設(shè)置，選中ul標(biāo)簽可對(duì)單獨(dú)的工程應(yīng)用?！?〕位置：決定列表工程縮進(jìn)的程度。選擇“外〞，列表貼近左側(cè)邊框，選擇“內(nèi)〞，列表縮進(jìn)。這項(xiàng)設(shè)置效果不明顯。下一頁上一頁返回5.4處理CSS樣式7.定位樣式設(shè)置“定位〞項(xiàng)實(shí)際上是對(duì)層的設(shè)置，但是因?yàn)镈reamweaver提供了可視化的層制作功能，所以此項(xiàng)設(shè)置在實(shí)際操作中幾乎不被使用。8.擴(kuò)展樣式的設(shè)置CSS樣式還可以實(shí)現(xiàn)一些擴(kuò)展功能，這些功能集中在擴(kuò)展面板上。這個(gè)面板主要包括3種效果：分頁、光標(biāo)和過濾器。在CSS規(guī)那么定義對(duì)話框的左側(cè)選擇“擴(kuò)展〞，可以在右邊區(qū)域設(shè)置CSS樣式的擴(kuò)展格式。下一頁上一頁返回5.4處理CSS樣式5.4.3CSS樣式表的其他操作單擊CSS樣式面板右上方的擴(kuò)展按鈕，彈出如圖5-26所示的菜單。CSS的相關(guān)操作都是通過這個(gè)菜單上的工程來實(shí)現(xiàn)的。1.編輯CSS樣式選中需要編輯的樣式類型，選擇上圖中的“編輯〞項(xiàng)或直接單擊“編輯樣式〞按鈕，在彈出的“CSS規(guī)那么定義〞對(duì)話框中修改相應(yīng)的設(shè)置。編輯完成后單擊“確定〞按鈕，CSS樣式就編輯完成了。2.應(yīng)用CSS自定義樣式鼠標(biāo)右鍵單擊在網(wǎng)頁中被選中的元素，在彈出的快捷菜單中選擇“CSS樣式〞，在其子菜單中選擇需要的自定義樣式。下一頁上一頁返回5.4處理CSS樣式3.附加樣式表選擇“附加樣式表〞項(xiàng)，翻開“鏈接外部樣式表〞對(duì)話框，可以鏈接外部的CSS樣式文件?！拔募?URL〞設(shè)置外部樣式表文件的路徑，可以單擊“瀏覽〞按鈕，在瀏覽窗口中找到樣式表文件。“添加為〞選擇“鏈接〞，這是IE和Netscape兩種瀏覽器都支持的導(dǎo)入方式?！皩?dǎo)入〞只有Netscape瀏覽器支持，如圖5-27所示。設(shè)置完畢后單擊“確定〞按鈕，CSS文件即被導(dǎo)入到當(dāng)前頁面。4.在文檔編輯區(qū)選中文字所在單元格，在屬性面板設(shè)置文字的樣式為.test。上一頁返回5.5添加超鏈接如果按鏈接目標(biāo)分類，可以將超級(jí)鏈接分為以下幾種類型：〔1〕內(nèi)部鏈接：同一網(wǎng)站文檔之間的鏈接；〔2〕外部鏈接：不同網(wǎng)站文檔之間的鏈接；〔3〕錨點(diǎn)鏈接：同一網(wǎng)頁或不同網(wǎng)頁中指定位置的鏈接；〔4〕E-mail鏈接：發(fā)送電子郵件的鏈接。鏈接路徑〔1〕絕對(duì)路徑，為文件提供完全的路徑，包括適用的協(xié)議，例如，ftp，rtsp等。一般常見的有://，等?！?〕相對(duì)路徑，相對(duì)路徑最適合網(wǎng)站的內(nèi)部鏈接。如果鏈接到同一目錄下，那么只需要輸入要鏈接文件的名稱。要鏈接到下一級(jí)目錄中的文件，只需要輸入目錄名。然后輸入“/〞，再輸入文件名。如鏈接到上一級(jí)目錄中的文件，那么先輸入“../〞再輸入目錄名，文件名。下一頁返回5.5添加超鏈接〔3〕根路徑，是指從站點(diǎn)根文件夾到被鏈接文檔經(jīng)由的路徑，以反斜杠開頭，例如：/fy/maodian.html就是站點(diǎn)根文件夾下的fy子文件夾中的一個(gè)文件〔maodian.html〕的根路徑。創(chuàng)立鏈接1.創(chuàng)立外部鏈接不管是文字還是圖像，都可以創(chuàng)立鏈接到絕對(duì)地址的外部鏈接。創(chuàng)立鏈接的方法可以直接輸入地址也可以使用超級(jí)鏈接對(duì)話框。2.創(chuàng)立內(nèi)部鏈接在文檔窗口選中文字，單擊屬性面板按鈕，彈出“選擇文件〞對(duì)話框，選擇要鏈接到的網(wǎng)頁文件，即可鏈接到這個(gè)網(wǎng)頁。下一頁上一頁返回5.5添加超鏈接3.創(chuàng)立E-mail鏈接單擊常用快捷欄中的“電子郵件鏈接〞按鈕，彈出“電子郵件鏈接〞對(duì)話框，在對(duì)話框的文本框內(nèi)輸入要鏈接的文本，然后在E-mail文本框內(nèi)輸入郵箱地址即可。4.創(chuàng)立錨點(diǎn)鏈接所謂錨點(diǎn)鏈接，是指在同一個(gè)頁面中的不同位置的鏈接。翻開一個(gè)頁面較長(zhǎng)的網(wǎng)頁，將光標(biāo)放置于要插入錨點(diǎn)的地方，單擊常用快捷欄的“命名錨記〞按鈕，插入錨點(diǎn)。再選中需要鏈接錨點(diǎn)的文字，在屬性面板中拖動(dòng)按鈕到錨點(diǎn)上即可。下一頁上一頁返回5.5添加超鏈接5.制作圖像映射〔1〕翻開03.html文件，選中102.gif圖片，在屬性面板中，有不同形狀的圖像熱區(qū)按鈕，選擇一個(gè)熱區(qū)按鈕單擊。〔2〕在圖像上需要?jiǎng)?chuàng)立熱區(qū)的位置拖動(dòng)鼠標(biāo)即可創(chuàng)立熱區(qū)。此時(shí)，選中的局部被稱作圖像熱點(diǎn)?！?〕選中這個(gè)圖像熱點(diǎn)，在屬性面板上給這個(gè)圖像熱點(diǎn)設(shè)置超鏈接即可。6.制作圖片上的超級(jí)鏈接〔1〕插入圖片?！?〕屬性面板改換為熱點(diǎn)面板。〔3〕保存頁面，按F12預(yù)覽，用鼠標(biāo)在設(shè)置的熱區(qū)檢驗(yàn)效果。下一頁上一頁返回5.5添加超鏈接“目標(biāo)〞我們稱它為目標(biāo)區(qū)，也就是超級(jí)鏈接指向的頁面出現(xiàn)在什么目標(biāo)區(qū)域。默認(rèn)的情況下，域中總有4個(gè)選項(xiàng)。①_blank：?jiǎn)螕翩溄右院螅赶蝽撁娉霈F(xiàn)在新窗口中。②_parent：用指向頁面替換它外面所在的框架結(jié)構(gòu)。③_self：將連接頁面顯示在當(dāng)前框架中。④_top：跳出所有框架，頁面直接出現(xiàn)在瀏覽器中。下一頁上一頁返回5.5添加超鏈接設(shè)置文字鏈接屬性文字鏈接是網(wǎng)頁中最常見的頁面元素，在默認(rèn)狀態(tài)下，文字鏈接樣式都是帶下劃線的，這種一成不變的外觀使網(wǎng)頁無法凸顯個(gè)性和滿足布局的需要。為了使文字鏈接符合頁面的整體效果，可以采用CSS〔樣式〕來實(shí)現(xiàn)多樣的文字鏈接。效果說明：將鼠標(biāo)置于文本上時(shí)，文本樣式會(huì)發(fā)生改變，比方不會(huì)出現(xiàn)下劃線，文字會(huì)閃動(dòng)等。結(jié)合其他樣式屬性，還可以實(shí)現(xiàn)按鈕式文字鏈接。Text-decoration屬性用來控制超級(jí)鏈接，結(jié)合Border-Style屬性，還可以實(shí)現(xiàn)更加復(fù)雜的樣式。下一頁上一頁返回5.5添加超鏈接1.操作步驟〔1〕創(chuàng)立一個(gè)CSS樣式表文件。按下Shift+F11鍵翻開CSS樣式面板，單擊“新建樣式〞按鈕，在彈出的“新建CSS樣式〞對(duì)話框中點(diǎn)選“高級(jí)〔ID，上下文選擇器等〕〞選項(xiàng)，然后在選擇器下拉菜單中選擇“a:link〞，單擊“確定〞按鈕?！?〕編輯樣式。保存樣式表文件〔文件名為CSS.CSS〕后，開始編輯樣式。設(shè)定默認(rèn)鏈接樣式為無下劃線，字體為宋體12pt，其他色彩等參數(shù)都不設(shè)置?！?〕設(shè)置樣式“.t1〞。再次單擊“新建樣式〞按鈕，在“新建CSS樣式〞對(duì)話框中點(diǎn)選“類〔可應(yīng)用于任