1、第2章 dreamweaver MX 2004基本操作,Dreamweaver MX 2004基本操作,2.1初識(shí)dreamweaver MX 2004 2.2站點(diǎn)的創(chuàng)建與頁(yè)面屬性設(shè)置 2.3添加文本豐富的內(nèi)容,2.1初識(shí)dreamweaver MX 2004,2.1.1 dreamweaver MX 2004工 作界面介紹 2.1.2網(wǎng)頁(yè)的創(chuàng)建和保存 2.1.3網(wǎng)頁(yè)的修改與預(yù)覽 網(wǎng)頁(yè)的打開(kāi)；跟其他軟件打開(kāi)文檔相似。 網(wǎng)頁(yè)的創(chuàng)建：直接創(chuàng)建空白文檔；通過(guò)模 板創(chuàng)建有格式的網(wǎng)頁(yè)文檔。 網(wǎng)頁(yè)的保存：直接保存；另存為。 命名注意： 最好做到“見(jiàn)名知義”，看到名字就知道網(wǎng)頁(yè)里的相應(yīng)內(nèi)容； 名字最好用英文

2、字母或拼音，不要包含中文或 一些特殊的字符。,2.1初識(shí)dreamweaver MX 2004,2.1.2網(wǎng)頁(yè)的創(chuàng)建和保存 文件名的開(kāi)頭不能使用數(shù)字、運(yùn)算符等符號(hào)，文件名最好不要使用中文，因?yàn)槿绻鳈C(jī)采用UNIX系統(tǒng)，中文名會(huì)出錯(cuò)。文件的命名一般采用以下幾種方法： 漢語(yǔ)拼音：這是最簡(jiǎn)單的命名方法，根椐頁(yè)面的標(biāo)題或主要內(nèi)容，提取兩三個(gè)概況字，把它們的漢語(yǔ)拼音作為文件名。例：“產(chǎn)品中心”頁(yè)面，提取“產(chǎn)品”這兩個(gè)字的漢語(yǔ)拼音，因此文件名為“chanping.htm”。 拼音縮寫(xiě)：根椐頁(yè)面的標(biāo)題或主要內(nèi)容，提取每個(gè)漢字拼音的第1個(gè)字母作為文件名。 例：“留言簿”的拼音為“l(fā)iuyanbo”，那么文件名

3、為“l(fā)yb.asp”。這種方法簡(jiǎn)單，但不帶提示性，不便于日后的維護(hù)。 英文縮寫(xiě)：這種方法也較難記憶，一般適用于專有名詞。例：“Active Server Pages”這個(gè)專有名詞一般用ASP來(lái)代替。 英文原文：這種方法準(zhǔn)確、實(shí)用，最好的一種方法。例：“公司簡(jiǎn)介”的頁(yè)面命名為“company_introduction.htm”.,2.2站點(diǎn)的創(chuàng)建與頁(yè)面屬性設(shè)置,2.2.1創(chuàng)建站點(diǎn) 創(chuàng)建站點(diǎn)的第一步就是規(guī)劃站點(diǎn)，再通過(guò)DREAMWEAVER站點(diǎn)管理功能創(chuàng)建站點(diǎn)的框架，包括主頁(yè)、分支頁(yè)面和相應(yīng)的文件夾等。將多個(gè)網(wǎng)頁(yè)文檔鏈接起來(lái)就構(gòu)成了站點(diǎn)，站點(diǎn)可以小到一個(gè)網(wǎng)頁(yè)，也可以大到整個(gè)網(wǎng)站。 2.2.2頁(yè)面屬

4、性的設(shè)置,2.3在網(wǎng)頁(yè)中加入文本,2.3.1插入文本 直接輸入或者通過(guò)復(fù)制 2.3.2通過(guò)屬性面板對(duì)字體進(jìn)行設(shè)置 輸入特殊字符； 輸入一個(gè)空格：按SPACE鍵 連續(xù)輸入多個(gè)空格：CTR+SHIFT+SPACE 換行：SHIFT+ENTER 分段：ENTER 添加并編輯水平線； 插入日期； 2.3.2讓文本更具個(gè)性 2.3.3結(jié)合實(shí)例講解,2.4在網(wǎng)頁(yè)面中插入圖象,2.4.1網(wǎng)頁(yè)的色彩 2.4.2網(wǎng)頁(yè)中圖象的格式 2.4.3在網(wǎng)頁(yè)中插入圖象 2.4.4設(shè)置圖象屬性 2.4.5鼠標(biāo)經(jīng)過(guò)圖象 2.4.6圖象占位符,2.4.1網(wǎng)頁(yè)的色彩,在網(wǎng)頁(yè)中是以RGB方式來(lái)表示顏色的，RGB是Red、Green、

5、Blue的縮寫(xiě)。RGB顏色包括幾百萬(wàn)種之多，這么多的顏色卻有一個(gè)共同點(diǎn)，就是都由紅、綠、藍(lán)這3種基色調(diào)和而成，這3種基色中每一種顏色的飽和度和透明度都是可以變化的，取值范圍為0255，例如，紅色表示為Red100%，Green0%，Blue0%，簡(jiǎn)單的表示法為（255，0，0），用十六進(jìn)制數(shù)值來(lái)表示就是“FF0000”，在HTML語(yǔ)言中我們直接十六進(jìn)制數(shù)值來(lái)命名顏色。,2.4.1網(wǎng)頁(yè)的色彩,用排列組合方法計(jì)算：256*256*256=16 777 216，總共可以得到16 77 216種RGB顏色，這是理論上的。在實(shí)際中，只有216種顏色能在瀏覽器中正常顯示。多于這個(gè)范圍的顏色，有的瀏覽器顯示

6、時(shí)可能發(fā)生偏差，不能正常顯示。因此，我們將能被所有瀏覽器正常顯示的216種顏色稱為網(wǎng)頁(yè)安全色。Dreamweaver中提供了具有網(wǎng)頁(yè)安全顏色范疇的調(diào)色板，使網(wǎng)頁(yè)的顏色選取控制在安全范圍之內(nèi)。 這216種顏色除黑色和白色外，其他全部屬于彩色范疇。網(wǎng)頁(yè)制作是用彩色還是非彩色好呢？其實(shí)只要運(yùn)用的合理，都能達(dá)到好的效果。 我們通常的做法是：主要內(nèi)容文字用非彩色（黑色），邊框，背景，圖片用彩色。這樣頁(yè)面整體不單調(diào)，看主要內(nèi)容也不會(huì)眼花。,2.4.1網(wǎng)頁(yè)的色彩,1非彩色的搭配 黑白是最基本和最簡(jiǎn)單的搭配，它們以其特有的性質(zhì)一直在藝術(shù)殿堂中占有重要的地位，如中國(guó)的水墨畫(huà)、黑白攝影等藝術(shù)作品，給人一種質(zhì)樸、安

7、逸、超脫的美感。但要把握好很難。 灰色是萬(wàn)能色，可以和任何彩色搭配，也可以幫助兩種對(duì)立的色彩和諧過(guò)渡。,2.4.1網(wǎng)頁(yè)的色彩,2彩色的搭配 色環(huán)：我們將色彩按紅-黃-綠-藍(lán)-紅依次過(guò)度漸變，就可以得到一個(gè)色彩環(huán)。 色環(huán)的兩端是暖色和寒色，當(dāng)中是中型色。如圖2-6所示。 紅.橙.橙黃.黃.黃綠.綠.青綠.藍(lán)綠.藍(lán).藍(lán)紫.紫.紫紅. /_/ /_/ /_/ /_/ / / / / 暖色系 中性系 寒色系 中性系,2.4.1網(wǎng)頁(yè)的色彩,3色彩的心理感覺(jué) 不同的顏色會(huì)給瀏覽者不同的心理感受。 紅色-是一種激奮的色彩。刺激效果，能使人產(chǎn)生沖動(dòng)，憤怒，熱情，活力的感覺(jué)。 綠色-介于冷暖兩中色彩的中間，顯得

8、和睦，寧?kù)o，健康，安全的感覺(jué)。它和金黃，淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛。 橙色-也是一種激奮的色彩，具有輕快，歡欣，熱烈，溫馨，時(shí)尚的效果。 黃色-具有快樂(lè)，希望，智慧和輕快的個(gè)性，它的明度最高。 藍(lán)色-是最具涼爽，清新，專業(yè)的色彩。它和白色混合，能體現(xiàn)柔順，淡雅，浪漫的氣氛（象天空的色彩:）,2.4.1網(wǎng)頁(yè)的色彩,白色-具有潔白，明快，純真，清潔的感受。 黑色-具有深沉，神秘，寂靜，悲哀，壓抑的感受。 灰色-具有中庸，平凡，溫和，謙讓，中立和高雅的感覺(jué)。 每種色彩在飽和度，透明度上略微變化就會(huì)產(chǎn)生不同的感覺(jué)。以綠色為例，黃綠色有青春，旺盛的視覺(jué)意境，而藍(lán)綠色則顯得幽寧，陰深。,紅色代表熱

9、情、活潑、熱鬧、溫暖、幸福、吉祥 橙色代表光明、華麗、興奮、甜蜜、快樂(lè) 黃色代表明朗、愉快、高貴、希望 綠色代表新鮮、平靜、和平、柔和、安逸、青春 藍(lán)色代表深遠(yuǎn)、永恒、沉靜、理智、誠(chéng)實(shí)、寒冷 紫色代表優(yōu)雅、高貴、魅力、自傲 白色代表純潔、純真、樸素、神圣、明快 灰色代表憂郁、消極、謙虛、平凡、沉默、中庸、寂寞 黑色代表崇高、堅(jiān)實(shí)、嚴(yán)肅、剛健、粗莽 還有 一般認(rèn)為顏色的象征作用如下: 紅色:革命.熱烈.犧牲.豪邁 綠色:和藹悠閑. 和平嫻雅 黃色:溫暖 高貴 顯赫 豪華 藍(lán)色:和平 善良 冷靜 深沉 白色:輕快 純潔 真摯 黑色:沉重 悲哀 神秘,2.4.1網(wǎng)頁(yè)的色彩,4網(wǎng)頁(yè)色彩搭配的原理 色彩

10、的鮮明性。網(wǎng)頁(yè)的色彩要鮮艷，容易引人注目。 色彩的獨(dú)特性。要有與眾不同的色彩，使得大家對(duì)你的網(wǎng)頁(yè)印象強(qiáng)烈。 色彩的合適性。就是說(shuō)色彩和你表達(dá)的內(nèi)容氣氛相適合。 色彩的聯(lián)想性。不同色彩會(huì)產(chǎn)生不同的聯(lián)想，藍(lán)色想到天空，黑色想到黑夜，紅色想到喜慶等，選擇色彩要和你網(wǎng)頁(yè)的內(nèi)涵相關(guān)聯(lián)。,2.4.1網(wǎng)頁(yè)的色彩,5網(wǎng)頁(yè)色彩搭配的技巧 用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，（說(shuō)得通俗些就是將色彩變淡或則加深），產(chǎn)生新的色彩，用于網(wǎng)頁(yè)。這樣的頁(yè)面看起來(lái)色彩統(tǒng)一，有層次感。 用兩種色彩。先選定一種色彩，然后選擇它的對(duì)比色（在photoshop里按ctrl+shift+I）。 用一個(gè)色系。簡(jiǎn)

11、單的說(shuō)就是用一個(gè)感覺(jué)的色彩，例如淡藍(lán)、淡黃、淡綠；或者土黃、土灰、土藍(lán)。 用黑色和一種彩色。比如大紅的字體配黑色的邊框感覺(jué)很“跳”。,2.4.1網(wǎng)頁(yè)的色彩,在網(wǎng)頁(yè)配色中，忌諱的是： 1.不要將所有顏色都用到，盡量控制在三種色彩以內(nèi)。 2.背景和前文的對(duì)比盡量要大，（絕對(duì)不要用花紋繁復(fù)的圖案作背景），以便突出主要文字內(nèi)容。,2.4.2 網(wǎng)頁(yè)中的圖像格式,圖像在網(wǎng)頁(yè)中具有畫(huà)龍點(diǎn)睛的作用，它能裝飾網(wǎng)頁(yè)，表達(dá)個(gè)人的情調(diào)和風(fēng)格。但在網(wǎng)頁(yè)上加入的圖片越多，瀏覽的速度就會(huì)受到影響導(dǎo)致用戶失去耐心而離開(kāi)頁(yè)面。網(wǎng)頁(yè)中使用的圖像可以是GIF、JPEG、BMP、TIFF、PNG等格式的圖像文件，其中使用最廣泛主要是

12、GIF和JPEG兩種格式。 它們有一些共同的特點(diǎn)：都屬于壓縮的圖片文件格式，文件的信息量很小，適用于網(wǎng)絡(luò)傳輸；適用于各種平臺(tái)。因此大部分的瀏覽器都把它們當(dāng)作標(biāo)準(zhǔn)規(guī)格。而PNG格式的圖像只有在Microsoft IE（4.0以上版本）和Netscape Navigator（4.04）以上版本才能得到支持。,2.4.2 網(wǎng)頁(yè)中的圖像格式,GIF的英文全稱是“Graphics Interchange Format”，中文意思是“交換的圖像格式”。GIF文件采用Lossless（非失真）的壓縮方式，在壓縮圖片文件的過(guò)程中，圖形的像素信息不會(huì)被犧牲掉，被犧牲的是圖形的顏色，因此，GIF文件最多只能保存2

13、56色。GIF格式支持圖片游離在背景之上的視覺(jué)效果， JPEG圖片文件采用lossy（失真）的壓縮方式，因此JPEG可支持多達(dá)16M顏色，它能展現(xiàn)十分豐富生動(dòng)的圖像。但壓縮方式是以損失圖像質(zhì)量為代價(jià)，壓縮比越高圖像質(zhì)量損失越大，圖像文件也就越小。,2.4.2 網(wǎng)頁(yè)中的圖像格式,GIF圖像文件的主要優(yōu)點(diǎn)： 1.最大支持256色，因此其圖像一般能正常顯示。 2.由于圖像使用顏色少，壓縮率高，因此文件的尺寸小。 3.GIF格式的圖像支持1bit透明度，因此可以制作背景透明的文字或圖像。 4.可以將GIF格式的圖像制作成動(dòng)畫(huà)。 GIF圖像文件的主要缺點(diǎn)： 由于最大支持256色，因此不適合于有暈光，漸變

14、色彩等顏色細(xì)膩的圖像和照片。,2.4.2 網(wǎng)頁(yè)中的圖像格式,JPEG格式圖像的主要優(yōu)點(diǎn)： 支持24bit圖像，能夠很好地表現(xiàn)照片等全彩色的圖像。 可以生成類似GIF的交錯(cuò)關(guān)聯(lián)圖像漸變JPEG 可以制作透明的JPEG圖像。 JPEG格式圖像的主要缺點(diǎn)： 有損壓縮使之不適合表達(dá)高清晰度的圖像,正確使用GIF和JPEG：,GIF適用于向量式、少于256色的圖像。 GIF是制作透明圖像和動(dòng)畫(huà)GIF的首選格式。 JPEG適用于有漸變色彩、顏色細(xì)膩的圖片,PNG圖像格式,PNG圖像格式是一種新興的網(wǎng)絡(luò)圖像格式。 它是目前保證最不失真的格式，它汲取了GIF 和JPEG格式的優(yōu)點(diǎn)。具體體現(xiàn)如下： 1.能把圖像

15、文件壓縮到極限以利于網(wǎng)絡(luò)的傳輸，但又能保留所有與圖像品質(zhì)有關(guān)的信息; 2.采用無(wú)損壓縮來(lái)減少文件的大小; 3.顯示速度快; 4.支持透明圖像的制作; 缺點(diǎn)：不支持動(dòng)畫(huà)應(yīng)用效果 FIREWORKS 的默認(rèn)格式是PNG; Photoshop的默認(rèn)格式是PSD.,2.4.3 在網(wǎng)頁(yè)中插入圖像,在向網(wǎng)頁(yè)中插入圖像前，最好先保存文件。在對(duì)話框中選擇圖像文件，這時(shí)要注意圖像文件應(yīng)在站點(diǎn)目錄下，若不在，則會(huì)彈出對(duì)話框詢問(wèn)是否將圖像文件復(fù)制到網(wǎng)站的目錄下，應(yīng)單擊“是”按鈕，將圖像保存到網(wǎng)站的目錄下。,2.4.4 設(shè)置圖像屬性,圖像插入文檔后，其位置、大小等設(shè)置可能不盡如意，可通過(guò)【屬性】面板，對(duì)它進(jìn)行設(shè)置。單

16、擊圖像，其周圍出現(xiàn)控制點(diǎn)，表示已選中，狀態(tài)欄標(biāo)簽被選中，【屬性】面板顯示關(guān)于圖像的屬性，單擊擴(kuò)展按鈕，可見(jiàn)到全部的屬性。,2.4.4 設(shè)置圖像屬性,【圖像】：旁邊的數(shù)字表示圖像的大小，文本框用于輸入圖像名稱，在腳本語(yǔ)言可通過(guò)名稱中對(duì)圖像進(jìn)行引用。對(duì)應(yīng)于屬性。 【寬】和【高】：用于設(shè)置圖像的大小，也可通過(guò)鼠標(biāo)拖動(dòng)控制點(diǎn)，來(lái)調(diào)整圖像的大小。圖像大小改變后，在寬和高之間，增加了一個(gè)按鈕，單擊它可恢復(fù)圖像的大小。若想保存調(diào)整后的大小，可單擊重新取樣按鈕，這樣能減少馬賽克現(xiàn)象。 【源文件】：指出圖像的具體位置，要改換圖像，可通過(guò)單擊文件夾按鈕，來(lái)重新選擇圖片，對(duì)應(yīng)于標(biāo)簽src屬性。 【替代】：是圖像的注

17、釋，當(dāng)用戶的瀏覽器不能正常顯示圖像時(shí)，便在圖像的位置用這個(gè)注釋代替圖像。對(duì)應(yīng)于標(biāo)簽alt屬性。,2.4.4 設(shè)置圖像屬性,【鏈接】：指定鏈接的目標(biāo)頁(yè)面或定位的URL。 【地圖】：用于制作圖像映射。它有3個(gè)工具按鈕。 【垂直邊距】：設(shè)置圖像在垂直方向與文本或其他頁(yè)面元素的間距。 【水平邊距】：設(shè)置圖像在水平方向與文本或其他頁(yè)面元素的間距。 【邊框】：設(shè)置圖像邊框的寬度，單位是像素為“0”，表示無(wú)邊框。對(duì)應(yīng)于標(biāo)簽border屬性。 【低解析度源】：指定應(yīng)在主要圖像之前載入的圖像，這個(gè)圖像是原圖像的一個(gè)低分辨率版本，它的載入更快，這樣就可以讓瀏覽者對(duì)等待顯示的圖像有一個(gè)了解。但也可以使用任何一個(gè)和主

18、要圖像尺寸相同的圖像。 【編輯】：這里有6 個(gè)按鈕?？梢詫?duì)選定的圖像進(jìn)行編輯。 : 啟動(dòng)圖像處理軟件對(duì)圖像進(jìn)行編輯，一般為Firesorks，當(dāng)保存文件返回時(shí)，將使用保存后的圖像更新文檔. : 啟動(dòng)圖像處理Firesorks對(duì)圖像進(jìn)行優(yōu)化。 :裁剪圖像。 : 重新取樣。 :調(diào)節(jié)亮度和對(duì)比度。 : 銳化圖像。,2.4.4 設(shè)置圖像屬性,【對(duì)齊】:用于設(shè)置圖像與文本或其他元素的位置關(guān)系，有9項(xiàng)排列方式。對(duì)應(yīng)于屬性align。 默認(rèn)值：取決于瀏覽器所設(shè)置的排列方式。 基線：將文本或其他元素的基線與所選圖片的底邊對(duì)齊。 頂端：上端對(duì)齊，將文本或其他元素與圖片所在行的最頂端對(duì)齊。 居中：將文本或其他元素

19、與圖片的中部對(duì)齊。 底部：將文本或其他元素與圖片的底部對(duì)齊。 文本上方：將文本行中的最高字符與圖片上端對(duì)齊。 絕對(duì)居中：將圖片的中部與文本的中部對(duì)齊。 絕對(duì)底部：將圖片的絕對(duì)底部與文本的絕對(duì)底部對(duì)齊。 左對(duì)齊：將圖片放置到文本塊左邊緣，與當(dāng)前行的頂端對(duì)齊，文本位于圖像的右邊和下面。 右對(duì)齊：將圖片放置到文本塊右邊緣，文本位于圖像的左邊。,2.4.5 鼠標(biāo)經(jīng)過(guò)圖像,在瀏覽網(wǎng)頁(yè)時(shí)，有時(shí)會(huì)看到當(dāng)鼠標(biāo)指針移到某幅圖像時(shí)，該圖像會(huì)變?yōu)榱硗庖环鶊D像，而移開(kāi)鼠標(biāo)指針時(shí)，該圖像又會(huì)變回原來(lái)的圖像。這就是鼠標(biāo)經(jīng)過(guò)圖像時(shí)產(chǎn)生的交互。,2.4. 6圖像占位符,圖像占位符是網(wǎng)站排版布局中經(jīng)常用到的功能，我們可以在要放

20、置圖像的位置，暫時(shí)放置占位符，等到處理好圖像時(shí)再作替換。,2.5創(chuàng)建網(wǎng)站相冊(cè),用Dreamweaver用制作電子相冊(cè)，實(shí)際上通過(guò)JavaScript調(diào)用Fireworks來(lái)處理一系列的圖像，自動(dòng)為圖像創(chuàng)建，并自動(dòng)完成縮略圖與原始圖片的鏈接。在創(chuàng)建電子相冊(cè)前，要先作一些準(zhǔn)備工作，在站點(diǎn)根目錄下建立兩個(gè)文件夾，一個(gè)用來(lái)存放原始圖片，我們假設(shè)為“firstpic”，另一個(gè)用來(lái)存放處理后的圖像，假定為“secondpic”。并把原始圖片放在firstpic下，原始圖片的格式應(yīng)為GIF或JPEG格式。,2.6 超級(jí)鏈接,1.本地鏈接 對(duì)同一臺(tái)機(jī)器上的不同文件進(jìn)行的鏈接稱為本地鏈接。 超級(jí)鏈接是網(wǎng)頁(yè)中最重

21、要的元素，是Internet的中流砥柱。沒(méi)有鏈接，網(wǎng)頁(yè)之間失去了聯(lián)系，也就不能稱為網(wǎng)。通過(guò)鏈接我們可以從一個(gè)網(wǎng)站轉(zhuǎn)到另一個(gè)網(wǎng)站，也可從一個(gè)頁(yè)面轉(zhuǎn)到另一個(gè)頁(yè)面，或在同一個(gè)頁(yè)面中移動(dòng)。鏈接的形式有很多種，對(duì)鏈接的樣式也可進(jìn)行各種設(shè)置，但是，無(wú)論它們的動(dòng)作或樣式是怎樣的，大多數(shù)鏈接都是創(chuàng)建一點(diǎn)到另一點(diǎn)的路徑。網(wǎng)頁(yè)中鏈接的路徑有3種： 絕對(duì)路徑（URL）（例如： ） 文檔相對(duì)路徑 （例如：/newchanping.htm） 站點(diǎn)根目錄相對(duì)路徑（例如：/chanping/newchanping.htm）,2.6 超級(jí)鏈接,絕對(duì)地址和相對(duì)地址 絕對(duì)地址：是指能夠絕對(duì)搜尋某一具體文件的地址；如； 如c:my

22、webindex.htm等都是絕對(duì)地址。 相對(duì)地址：相對(duì)于當(dāng)前頁(yè)面而言，搜尋某一頁(yè)面所需的路徑。如URL為home.htm時(shí)，說(shuō)明超鏈接到當(dāng)前網(wǎng)頁(yè)所在目錄下的一個(gè)名為home.htm的網(wǎng)頁(yè)文件；若RL為/home.htm時(shí)，說(shuō)明超鏈接到當(dāng)前網(wǎng)頁(yè)文件所在目錄的下一級(jí)目錄下的名為home.htm的網(wǎng)頁(yè)文件；若URL為./home.htm的網(wǎng)頁(yè)文件，說(shuō)明超鏈到當(dāng)前網(wǎng)頁(yè)文件所在目錄同一級(jí)的另外一個(gè)名為目錄下的名為homt.htm的網(wǎng)頁(yè)文件。 提醒：在網(wǎng)站設(shè)計(jì)中，網(wǎng)站內(nèi)部的鏈接和文件調(diào)用均要采用相對(duì)地址鏈接，否則當(dāng)網(wǎng)站發(fā)生遷移（網(wǎng)站上傳或拷貝到其他磁盤）時(shí)，網(wǎng)站內(nèi)部的鏈接會(huì)出現(xiàn)中斷，有些圖片文件會(huì)無(wú)法顯

23、示。,2.6 超級(jí)鏈接,其實(shí)以上鏈接都是網(wǎng)頁(yè)的統(tǒng)一資源定位（URL），只不過(guò)后兩種路徑將URL的通信協(xié)議和主機(jī)名省略掉了。后兩種路徑必須有參照物：一種是以文檔為參照物，另一種是以站點(diǎn)的根目錄為參照物。當(dāng)目標(biāo)頁(yè)面在站點(diǎn)之外，使用絕對(duì)路徑；在站點(diǎn)內(nèi)創(chuàng)建的本地鏈接都是文檔相對(duì)路徑（文檔對(duì)文檔）。站點(diǎn)根目錄相對(duì)路徑則比較少用。,2.6 超級(jí)鏈接,2.URL鏈接 如果鏈接的文件在其他服務(wù)器上，就要弄清 我們所指向的文件是采用哪一種URL地址。 URL的意思是統(tǒng)一資源定位器，通過(guò)它可以 以多種通信協(xié)議與外界溝通來(lái)存取信息。 URL鏈接的形式是： 協(xié)議名：/主機(jī)域名/路徑/文件名。 其中協(xié)議包括：F ile

24、（本地系統(tǒng)文件 ）、 http(www服務(wù)器)、服務(wù)器)、 telnet( 基于telnet的協(xié)議)、mailto(電子郵件)、news(usenet新聞組),2.6 超級(jí)鏈接,2.URL鏈接 例如： telnet:/ mailto:,2.6 超級(jí)鏈接,2.6.1 創(chuàng)建文本鏈接 2.6.2 創(chuàng)建電子郵件鏈接 2.6.3 鏈接到命名錨記 2.6.4 空鏈接 2.6.5 創(chuàng)建圖像鏈接 2.6.6 圖像映射,2.6.1 創(chuàng)建文本鏈接,大多數(shù)Web頁(yè)面都包含超文本鏈接，默認(rèn)情況下，文本鏈接的地方會(huì)出現(xiàn)下劃線，而且最開(kāi)始呈現(xiàn)為藍(lán)色文本，以后，當(dāng)目標(biāo)頁(yè)面被訪問(wèn)過(guò)后，訪問(wèn)后的文本鏈接呈現(xiàn)為紫色。當(dāng)在瀏覽器中

25、單擊文本鏈接時(shí)，鏈接暫時(shí)會(huì)變成紅色或其他顏色，表示這是一個(gè)可激活的鏈接。通過(guò)在【頁(yè)面屬性】的設(shè)置可以改變鏈接的默認(rèn)顏色，也可使用層疊樣式表（CSS）控制鏈接的外觀?，F(xiàn)在我們來(lái)介紹文本鏈接方法。,2.6.1 創(chuàng)建文本鏈接,1、添加文本鏈接 創(chuàng)建鏈接，相當(dāng)于在文本中插入標(biāo)簽。 創(chuàng)建鏈接有兩種方法，一種是選擇法，另一種是指向法。 具體步驟如下： (1) 打開(kāi)如圖2-15所示頁(yè)面，選定要鏈接的文本“產(chǎn)品中心”。單擊【屬性】面板瀏覽圖標(biāo)，打開(kāi)【選擇文件】對(duì)話框,2.6.1 創(chuàng)建文本鏈接,(2) 選擇要鏈接的文件名，在【URL】的文本框中會(huì)自動(dòng)產(chǎn)生鏈接路徑。選擇鏈接文件相當(dāng)于鏈接標(biāo)簽中的href屬性，該屬

26、性是鏈接必不可少的。 (3) 【相對(duì)于】文本框中的兩個(gè)選項(xiàng)：【文檔】、【站點(diǎn)根目錄】?！疚臋n】選項(xiàng)和【站點(diǎn)根目錄】選項(xiàng)都是使用相對(duì)路徑的鏈接，但兩者的參照物不同。 選擇【文檔】選項(xiàng)，是使用當(dāng)前文檔作為參照物，省略了與當(dāng)前文檔的鏈接相同的URL。只提供不同的那部分路徑。使用文檔相對(duì)路徑時(shí)一般有以下幾種情況。 要鏈接的文件與當(dāng)前文件處于同一文件夾下，則【URL】文本框中只顯示鏈接的文件名。 要鏈接的文件處在當(dāng)前文檔所在文件夾的子文件夾中時(shí)，則【URL】文本框中顯示子文件夾名，然后是“/”和鏈接的文件名。 要鏈接的文件處在當(dāng)前文檔所在文件夾的父文件夾中時(shí)，則【URL】文本框中顯示“/”加鏈接的文件名

27、。,2.6.1 創(chuàng)建文本鏈接,選擇【站點(diǎn)根目錄】，則以站點(diǎn)根目錄作為參照物。即從站點(diǎn)根文件夾到文檔所經(jīng)過(guò)的路徑。這種情況一般針對(duì)一個(gè)使用數(shù)臺(tái)服務(wù)器的大型網(wǎng)站，或者一臺(tái)同時(shí)作為數(shù)個(gè)不同站點(diǎn)主機(jī)的服務(wù)器。多數(shù)情況下，我們選擇【文檔】選項(xiàng)。,2.6.1 創(chuàng)建文本鏈接,(4) 【屬性】面板中【目標(biāo)】下拉列表中有4個(gè)選項(xiàng)，根椐情況選擇一個(gè)。如圖5-3所示： 【_blank】：表示目標(biāo)文件在新的瀏覽器窗口打開(kāi)。 【_parent】：表示目標(biāo)文件在上一級(jí)瀏覽器窗口打開(kāi)。 【_self】：表示目標(biāo)文件當(dāng)前瀏覽器窗口打開(kāi)。 【_top】：回到最頂端的瀏覽器窗口打開(kāi)目標(biāo)文件。 一般來(lái)說(shuō)，二級(jí)子頁(yè)面我們?cè)谛碌臑g覽器

28、窗口打開(kāi)，但為了避免打開(kāi)太多的窗口，根椐需要我們也常選擇【_self】。該選項(xiàng)相當(dāng)于鏈接標(biāo)簽的target屬性。最后的代碼為,2.6.1 創(chuàng)建文本鏈接,2、設(shè)置鏈接的狀態(tài) 文本鏈接創(chuàng)建后，文本呈藍(lán)色，有下劃線，訪問(wèn)過(guò)后的鏈接文本呈紫色，我們可以改變鏈接的默認(rèn)狀態(tài)。,2.6.1 創(chuàng)建文本鏈接,3、文件下載鏈接 我們經(jīng)常在網(wǎng)上下載資料，比如常用軟件、小游戲等，這就是文件下載鏈接的表現(xiàn)形式。文件下載鏈接和文本鏈接的操作是一樣的，不同之處在于，文件下載鏈接對(duì)應(yīng)的是壓縮文件.zip 、.rar或可執(zhí)行文件.exe、.com。具體操作如下： 選中文字“資料下載” 在【屬性】面板上單擊指向圖標(biāo)，拖向被鏈接的文件“zhiliao.rar”。 保存文檔，按F12預(yù)覽，可查看效果。 注：創(chuàng)建文件下載鏈接一次只能對(duì)應(yīng)一個(gè)文件，若是文件夾或多個(gè)文件，則需壓縮為一個(gè)文件。,2.6.2 創(chuàng)建電子郵件鏈接,可以用文本或圖像來(lái)創(chuàng)建電子郵件鏈接，步驟： 選中文本“聯(lián)系我們”，單擊【常用】工具欄上的電子郵件圖標(biāo)，打開(kāi)【電子郵件鏈接】對(duì)話框