網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)頁(yè)編輯和超級(jí)鏈接(css).ppt

第三章 網(wǎng)頁(yè)編輯（樣式表）和超級(jí)鏈接,統(tǒng)一網(wǎng)站風(fēng)格、制作基本特效,CSS樣式表,2,主要內(nèi)容,一、樣式表(CSS)的基本概念 二、CSS與HTML文檔的結(jié)合方法 三、CSS屬性的理解與應(yīng)用 四、CSS樣式的單位 五、CSS樣式在網(wǎng)頁(yè)中的應(yīng)用 六、插入文本 七、插入對(duì)象 八、超級(jí)鏈接,1 關(guān)于層疊樣式表 通常情況下我們希望將頁(yè)面顯示內(nèi)容與顯示方式分開，使得內(nèi)容編輯人員的工作重心放在網(wǎng)站內(nèi)容的撰寫上，而站點(diǎn)的美工和界面設(shè)計(jì)人員的工作重心放在頁(yè)面顯示的風(fēng)格和樣式上。 樣式是預(yù)先定義好的、格式化文檔的工具。CSS全稱Cascading Styles Sheet，譯為層疊樣式表，是由W3C（World Wide Web Consortium）組織所擬定的。,一、CSS的基本概念,1 關(guān)于層疊樣式表(續(xù)) CSS（Cascading Style Sheets ）是開放性樣式設(shè)定語(yǔ)句，它擴(kuò)充了HTML標(biāo)記的屬性設(shè)定，這些屬性設(shè)定可以通過(guò)腳本語(yǔ)言進(jìn)行控制，使網(wǎng)頁(yè)的視覺(jué)效果更加豐富多彩。 CSS將頁(yè)面的樣式與顯示內(nèi)容的文檔分開，可以高效、統(tǒng)一地組織頁(yè)面元素。對(duì)于具有相同風(fēng)格多個(gè)頁(yè)面的站點(diǎn)來(lái)說(shuō)，只需要建立定義樣式的CSS文件，并使需要使用這些樣式的文檔調(diào)用相應(yīng)的樣式文件即可。當(dāng)網(wǎng)站的風(fēng)格需要更新時(shí)，只要更改CSS樣式文件即可。 CSS技術(shù)的應(yīng)用使得網(wǎng)站的開發(fā)、管理和維護(hù)大為簡(jiǎn)化，提高了開發(fā)效率。,一、CSS的基本概念,（1）樣式表的版本： 1996年，W3C推出CSS1 。 1998年中期，W3C公布CSS2。 目前，W3C正在開發(fā)CSS3。 IE6與NS7已經(jīng)實(shí)現(xiàn)了CSS1中的絕大部分特性，但并沒(méi)有實(shí)現(xiàn)全部特性；IE8的最新版本支持CSS2。 本章介紹的屬性可以被至少其中一種瀏覽器所支持,（2）樣式表的層次： 樣式表稱為層疊樣式表是因?yàn)樗鼈兛梢砸匀龑拥男问蕉x，以此指定文檔的樣式；較低層的樣式表能夠覆蓋較高層的樣式表。 CSS的三個(gè)層次，按照從底層到高層的順序，分別為行內(nèi)樣式表、文檔層樣式表和外部樣式表，其中行內(nèi)樣式表只能作用于單個(gè)標(biāo)簽的內(nèi)容；文檔層樣式表則能夠?qū)ξ臋n的整個(gè)主體起作用，而外部樣式表可以應(yīng)用到任意數(shù)目文檔的主體中。 如果瀏覽器無(wú)法滿足樣式表指定的屬性，則瀏覽器或者采用另一個(gè)值代替此值或者忽略這個(gè)給定值。,CSS樣式表,7,一、CSS的基本概念,2、編寫CSS樣式的方法 使用CSS編輯器 如Dreamweaver、Frontpage等都會(huì)自帶CSS編輯器。 使用超文本編輯器 如Dreamweaver、Frontpage等超文本編輯器均可編輯樣式表； 記事本,CSS樣式表,8,一、CSS的基本概念,3、基本語(yǔ)法,選擇符屬性: 值,選擇符屬性1: 值1; 屬性2: 值2 ;,單一選擇符的復(fù)合樣式聲明應(yīng)該用“;”隔開，為便于閱讀也可以分行寫。,幾乎所有的HTML標(biāo)記符形式都可以作為選擇符。, CSS例子 H1 font-size:x-large; color:red H2 font-size:large; color:blue ,H1 font-size:x-large; color:red H2 font-size:large; color:blue,CSS樣式表,9,一、CSS的基本概念,4、CSS樣式的組合、繼承和關(guān)聯(lián)性 樣式的組合：把具有相同聲明定義的選擇符組合在一起，并用逗號(hào)隔開。 例如：段落元素p、單元格元素td和類c1可以使用相同樣式：,p,td,.c1font-size:12pt;font-family:黑體;color:red,CSS樣式表,10,一、CSS的基本概念,樣式的繼承：若子元素未定義，則它將繼承上級(jí)元素的樣式的定義。但存在少數(shù)屬性不能繼承（border）。, CSS例子 ,CSS樣式表,11,一、CSS的基本概念,樣式表的關(guān)聯(lián)性： 樣式表的關(guān)聯(lián)性指在某些樣式定義中，可以定義某樣式僅在某個(gè)特定元素范圍內(nèi)才有效。 例如：,p bfont-size:12pt;font-family:黑體;color:red,b元素僅在p元素作用范圍內(nèi)會(huì)套用上述的樣式設(shè)定。 而在其他地方不具有這些屬性。,CSS樣式表,12,一、CSS的基本概念,5、注釋 CSS文字的注釋形式與C語(yǔ)言類似。,pfont-size:12pt /*P標(biāo)簽的樣式定義*/,CSS樣式表,13,一、CSS的基本概念,6、選擇符 樣式表的基本語(yǔ)法形式：,selectorproperty1:value1; property2:value2;,需要應(yīng)用的樣式的內(nèi)容,樣式的屬性,樣式的屬性的值,Select的五種合法的類別：HTML標(biāo)記符、用戶定義的類Class、用戶定義的ID、虛類和虛元素,CSS樣式表,14,選擇符的類別,HTML標(biāo)記符 應(yīng)用比較多，注意繼承性、組合性和關(guān)聯(lián)性的應(yīng)用。 用戶定義的類選擇符 可以使用任何名稱命名類。 里所有的元素都可以定義“類”。 語(yǔ)法如下：,selector.classnameproperty1:value1; property2:value2; .classnameproperty1:value1; property2:value2;,例5-5.htm,1、 兩種定義形式的區(qū)別？ 2、在標(biāo)簽中使用類選擇符樣式的使用方式如何？,CSS樣式表,15,選擇符的類別,ID選擇符 應(yīng)用的形式基本與類選擇符類似，定義時(shí)用“#”替代”.”。 因此應(yīng)用時(shí)一般選取其中的一種。 虛類和虛元素 在html的頁(yè)面元素中沒(méi)有這種屬性，故稱其為虛類，僅在IE5.0以上的瀏覽器版本才支持虛類選擇符。 語(yǔ)法如下：,頁(yè)面元素名：元素虛屬性名樣式表內(nèi)容,CSS樣式表,16,a:link color: #000000 a:visited color: #cccccc a:hover color: #000000; font-style:italic a:active color: #aaaaaa,:link color: #000000 :visited color: #cccccc :hover color: #000000; font-style:italic :active color: #aaaaaa,CSS樣式表,17,二、CSS與HTML文檔的結(jié)合方法,HTML與樣式表有多種結(jié)合方法 內(nèi)聯(lián)樣式：在標(biāo)記符內(nèi)定義 外聯(lián)樣式 使用標(biāo)記符鏈接到外部的樣式文件 使用CSS的import標(biāo)記符來(lái)導(dǎo)入樣式文件 在HTML標(biāo)簽中直接加入樣式表的定義。,CSS樣式表,18,二、CSS與HTML文檔的結(jié)合方法,內(nèi)聯(lián)樣式：在標(biāo)記符內(nèi)定義，在本網(wǎng)頁(yè)內(nèi)起作用。, ,CSS樣式表,19,二、CSS與HTML文檔的結(jié)合方法,外聯(lián)樣式：使用標(biāo)記符鏈接到外部的樣式文件，凡鏈接的網(wǎng)頁(yè)都起作用 1、定義外部樣式文件，用記事本或者Dreamweaver，編輯完后文件擴(kuò)展名應(yīng)為”.css”； 2、建立HTML網(wǎng)頁(yè)文檔； 3、在網(wǎng)頁(yè)文檔中使用標(biāo)簽將前面的樣式表文檔鏈接到網(wǎng)頁(yè)中。, ,例5-7.htm,CSS樣式表,20,二、CSS與HTML文檔的結(jié)合方法,外聯(lián)樣式：使用import導(dǎo)入外部的樣式文件，凡在導(dǎo)入該樣式表的網(wǎng)頁(yè)都起作用 1、定義外部樣式文件，用記事本或者Dreamweaver，編輯完后文件擴(kuò)展名應(yīng)為”.css”； 2、建立HTML網(wǎng)頁(yè)文檔； 3、在網(wǎng)頁(yè)文檔中import導(dǎo)入前面的樣式表。, ,例5-8.htm,Link與import的區(qū)別,差別1：老祖宗的差別。link屬于XHTML標(biāo)簽，而import完全是CSS提供的一種方式。 差別2：加載順序的差別。當(dāng)一個(gè)頁(yè)面被加載的時(shí)候（就是被瀏覽者瀏覽的時(shí)候），link引用的CSS會(huì)同時(shí)被加載，而import引用的CSS 會(huì)等到頁(yè)面全部被下載完再被加載。 差別3：兼容性的差別。由于import是CSS2.1提出的所以老的瀏覽器不支持，import只有在IE5以上的才能識(shí)別，而link標(biāo)簽無(wú)此問(wèn)題。 差別4：使用dom控制樣式時(shí)的差別。當(dāng)使用javascript控制dom去改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)閕mport不是dom可以控制的。,CSS樣式表,22,二、CSS與HTML文檔的結(jié)合方法,在HTML標(biāo)簽中直接加入樣式表的定義 若在個(gè)別標(biāo)簽需要作樣式調(diào)整，可使用這種方式。 使用標(biāo)簽的“Style”屬性來(lái)定義樣式。, 被定義的樣式文本在此處。 ,CSS樣式表,23,三、CSS屬性的理解與應(yīng)用,樣式表的5類常用屬性： 字體屬性 ：字體、字號(hào)、行距等。 顏色及背景屬性 ：背景顏色、背景圖片等。 文本屬性： 區(qū)塊屬性 ：邊框粗細(xì)等。 分級(jí)屬性 ：各組件的字距、行距、縮排等。 鼠標(biāo)屬性 ：鼠標(biāo)形狀等。 詳見(jiàn)幫助文件,CSS屬性,CSS樣式表,24,字體屬性,Font-family:指定文字的字體 H1font-family:華文彩云 Font-style：指定文字是否加粗或使用斜體。取值：normal（正常）、oblique（偏斜體）、italic（斜體） Font-size：指定文字的大小。 Font：上述樣式屬性的綜合表示法。 Pfont: bold 16pt,CSS樣式表,25,顏色及背景屬性,Color:顏色 Background-color：指定背景顏色 H1background-color:#000800 Background-image：指定Html組件的背景圖片，值為url或none。 Bodybackground-image:url(image1.jpg),CSS樣式表,26,文本屬性,Text-decoration：設(shè)置底線、頂線、閃爍等文字效果。值為none,underline,overline,line-through,blink. Text-align：指定文字的對(duì)齊方式。值為：left,right,center,justify,CSS樣式表,27,區(qū)塊屬性,定義邊界，取值為：長(zhǎng)度|百分比|auto 上邊界：margin-top；下邊界：margin-bottom 左邊界：margin-left：右邊界：margin-right P.narrow margin-right: 50% 定義邊框： Border-color Border-width Border-style,CSS樣式表,28,分級(jí)屬性,List-style-type：指定項(xiàng)目符號(hào)或編號(hào) 允許值：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none List-style-image：指定項(xiàng)目符號(hào)的圖形文件名稱，值為url或none LI.square list-style-type: square UL.plain list-style-type: none OL list-style-type: upper-alpha /* A B C D E etc. */ OL OL list-style-type: decimal /* 1 2 3 4 5 etc. */ OL OL OL list-style-type: lower-roman /* i ii iii iv v etc. */,CSS樣式表,29,鼠標(biāo)屬性,讓鼠標(biāo)移到不同對(duì)象上面，顯示不同形狀。 Cursor屬性，取值如下 Auto：自動(dòng)按默認(rèn)顯示 Crosshair：“” Hand:手形 Text：文本I形 Wait：等待 ,CSS樣式表,30,練習(xí)：,1、若要在網(wǎng)頁(yè)上使用使用統(tǒng)一的頁(yè)面風(fēng)格： 背景為淺藍(lán)灰色（#cdcdfe）， 文本為深藍(lán)色（#000066）， 所有網(wǎng)頁(yè)都不留邊(Margin)， 且列表項(xiàng)目、表格及段落文本中的字體均為10.5pt；顏色：綠色；文本對(duì)齊：居中；字體：楷體,Times New Roman；文字格式：加粗。,CSS樣式表,31,練習(xí)：,2、編輯一個(gè)外聯(lián)樣式表，它使所有網(wǎng)頁(yè)中表格的文本顯示為如下風(fēng)格： 文字大小：10.5pt; 顏色：綠色； 文本對(duì)齊：居中； 字體：楷體 文字格式：加下劃線,CSS樣式表,32,練習(xí)：,3、在上題中，若有一個(gè)網(wǎng)頁(yè)中的某個(gè)表格要采取不同的顯示方式：如 顏色：藍(lán)色； 字體：黑體,Arial Black 其他與上題相同，應(yīng)在該頁(yè)上使用什么樣式表？,CSS樣式表,33,練習(xí)：,4、定義一個(gè)類選擇符，樣式為： 文字大小：12pt; 顏色：綠色； 文本對(duì)齊：居中； 字體：楷體，Times New Roman 文字格式：加粗 并在多個(gè)頁(yè)面元素中引用此類樣式。,CSS樣式表,34,練習(xí)：,5、定義一個(gè)偽類選擇符，使超鏈接具有一下特效： （1）超鏈接沒(méi)有下劃線； （2）當(dāng)鼠標(biāo)指向超鏈接時(shí)，文字從10pt變成12pt，文字加粗； （3）超鏈接文本在單擊前是藍(lán)色，在單擊后是灰色，并變成斜體。,CSS樣式表,35,課堂練習(xí)：,定義一個(gè)內(nèi)聯(lián)樣式，使網(wǎng)頁(yè)中的所有段落顯示效果如下： 字的大?。?2px 字的顏色：0000ff 對(duì)齊方式為居中 背景顏色：gray,CSS樣式表,36,四、CSS樣式的單位,定義長(zhǎng)度：符號(hào) 數(shù)值 單位 絕對(duì)長(zhǎng)度單位：cm,mm,in,pt(印刷點(diǎn)數(shù)),pc等。 相對(duì)長(zhǎng)度單位：px（像素）,em,ex。 百分比單位 百分比值總是相對(duì)于另一個(gè)值來(lái)說(shuō)的，參照值一般是該元素本身的字體尺寸。,CSS樣式表,37,四、CSS樣式的單位,定義顏色 rgb函數(shù)：rgb(R,G,B) R、G、B可用百分比值表示，也可用0255的整數(shù)值表示。 使用十六進(jìn)制數(shù)組：#RRGGBB 直接使用顏色名。,color: rgb(100%,0,0) color: rgb(255,0,0) color: #FF0000 color:red,CSS樣式表,38,五、CSS樣式在網(wǎng)頁(yè)中的應(yīng)用,1、在網(wǎng)頁(yè)中創(chuàng)建樣式，分別創(chuàng)建下列三種樣式 標(biāo)簽選擇符 類選擇符 ID選擇符 2、在網(wǎng)頁(yè)中導(dǎo)入、鏈入樣式表文件,CSS樣式表,39,五、CSS樣式在網(wǎng)頁(yè)中的應(yīng)用,六、插入文本 文字是網(wǎng)頁(yè)中最基本的頁(yè)面元素 占用存儲(chǔ)空間小 傳遞信息的主要載體 網(wǎng)頁(yè)文檔格式化是一種修飾頁(yè)面文字的操作， DW文字格式化主要有兩種方式： 用HTML標(biāo)記格式化,用CSS樣式格式化 CSS樣式是一種對(duì)網(wǎng)頁(yè)文檔內(nèi)容進(jìn)行精確格式化的方法，它可以使用許多HTML樣式不能使用的屬性。CSS樣式還可以同時(shí)對(duì)多篇文檔格式化，可將創(chuàng)建好的樣式保存在外部樣式表中，若修改樣式表，便可對(duì)相關(guān)網(wǎng)頁(yè)進(jìn)行相應(yīng)的更新，從而實(shí)現(xiàn)對(duì)文本格式化的自動(dòng)化管理 兩種格式化方法的優(yōu)先級(jí) HTML標(biāo)記 CSS樣式 1、插入文本的方法 Dreamweaver 允許您通過(guò)以下方式在Web 頁(yè)中添加文本：直接將文本鍵入頁(yè)中，從其他文檔復(fù)制和粘貼文本，或從其他應(yīng)用程序拖放文本。(ASCII文本文件、RTF 文件和MS Office 文檔),六、插入文本,（1）打開您要將Word 或Excel 文件的內(nèi)容復(fù)制到的目標(biāo)Web 頁(yè) （2）執(zhí)行以下操作之一以選擇文件： 將文件從當(dāng)前位置拖放到希望在其中顯示內(nèi)容的頁(yè)中。如果出現(xiàn)“插入Microsoft Word 或Excel 文檔”對(duì)話框，單擊“插入將文檔的內(nèi)容插入到此Web 頁(yè)中”，然后單擊“確定”。 選擇“文件”“導(dǎo)入”“Word 文檔或文件”“導(dǎo)入”“Excel 文檔”。在“打開”對(duì)話框中，瀏覽到要添加的文件，然后單擊“打開”,六、插入文本,2、插入指向Word 或Excel 文檔的鏈接 若要?jiǎng)?chuàng)建指向Word 或Excel 文檔的鏈接，請(qǐng)執(zhí)行以下操作： 打開希望在其中顯示鏈接的頁(yè)。 將文件從當(dāng)前位置拖放到希望在其中顯示鏈接的Dreamweaver 頁(yè)中。出現(xiàn)“插入Microsoft Word 或Excel 文檔”對(duì)話框。 選擇“創(chuàng)建鏈接”，然后單擊“確定”。 如果正在創(chuàng)建的鏈接所指向的文檔位于站點(diǎn)的根文件夾以外，Dreamweaver 將提示您將文檔復(fù)制到站點(diǎn)根文件夾。通過(guò)將文檔復(fù)制到站點(diǎn)的根文件夾，可以確保發(fā)布Web 站點(diǎn)時(shí)該文檔可用。 指向Word 或Excel 文檔的鏈接出現(xiàn)在頁(yè)中,六、插入文本,1 插入水平線 2 插入日期 Dreamweaver 提供了一個(gè)方便的日期對(duì)象，該對(duì)象使您可以以任何喜歡的格式插入當(dāng)前日期（包含或不包含時(shí)間都可以），您可以選擇在每次保存文件時(shí)都自動(dòng)更新該日期。 注意：“插入日期”對(duì)話框中顯示的日期和時(shí)間不是當(dāng)前日期，也不反映訪問(wèn)者在顯示您的站點(diǎn)時(shí)所看到的時(shí)期/ 時(shí)間。它們只是說(shuō)明此信息的顯示方式的示例。 將當(dāng)前日期插入到文檔中： （1）在“文檔”窗口中，將插入點(diǎn)放在要插入日期的位置。 （2）執(zhí)行下列操作之一： 選擇“插入” “日期”。 在“插入”欄的“常用”類別中，單擊“日期”按鈕。,七、 插入對(duì)象,（3）在出現(xiàn)的對(duì)話框中，選擇星期格式、日期格式和時(shí)間格式。 （4）如果希望在每次保存文檔時(shí)都更新插入的日期，請(qǐng)選擇“儲(chǔ)存時(shí)自動(dòng)更新” 。如果希望日期在插入后變成純文本并永遠(yuǎn)不自動(dòng)更新，請(qǐng)取消選擇該選項(xiàng)。 （6）單擊“確定”插入日期。 提示：如果選擇了“儲(chǔ)存時(shí)自動(dòng)更新”，則在日期格式插入到文檔中后可以對(duì)其進(jìn)行編輯，方法是單擊已設(shè)置格式的文本，然后在屬性檢查器中選擇“編輯日期格式” 3 插入特殊字符 4 在字符之間添加空格 HTML 只允許字符之間包含一個(gè)空格；若要在文檔中添加其他空格，必須插入連續(xù)空格?？梢栽O(shè)置一個(gè)在文檔中自動(dòng)添加連續(xù)空格的參數(shù)選擇。,七、 插入對(duì)象,若要插入連續(xù)空格，請(qǐng)執(zhí)行下列操作之一： （1）在“插入”欄中的“文本”類別中， “插入連續(xù)空格”。 （2）選擇“插入” “HTML” “特殊字符” “連續(xù)空格”。 （3）按Control+Shift+ 空格鍵 若要設(shè)置添加連續(xù)空格的參數(shù)，請(qǐng)執(zhí)行以下操作： 1 選擇“編輯”“首選參數(shù)”(Windows) 2 在“常規(guī)”類別中確保選中“允許多個(gè)連續(xù)的空格”。 5 插入Flash按鈕和Flash文字 在DW中，利用內(nèi)置的Flash按鈕和文字，可以直接在網(wǎng)頁(yè)上制作出有動(dòng)態(tài)效果的Flash按鈕和文字 若要在網(wǎng)頁(yè)上插入Flash按鈕，請(qǐng)執(zhí)行以下操作 （1）在網(wǎng)頁(yè)中選擇Flash按鈕插入點(diǎn)的位置,七、 插入對(duì)象,（2）在網(wǎng)頁(yè)編輯窗口中選擇“插入|交互式圖像|Flash按鈕”命令，此時(shí)系統(tǒng)打開插入Flash按鈕對(duì)話框。 （3）單擊OK按鈕后，就會(huì)產(chǎn)生一個(gè)“.SWF”格式的文件，文件會(huì)被自動(dòng)導(dǎo)入當(dāng)前正在編輯的網(wǎng)頁(yè)中。 （4）在網(wǎng)頁(yè)中選中此按鈕，可以設(shè)置該按鈕的屬性 若要在網(wǎng)頁(yè)上插入Flash文字，請(qǐng)執(zhí)行以下操作： （1）在網(wǎng)頁(yè)中選擇Flash文字的插入位置 （2） 在網(wǎng)頁(yè)編輯窗口中選擇“插入|交互式圖像|Flash文本”命令，此時(shí)系統(tǒng)打開插入Flash文本對(duì)話框。 （3）單擊OK按鈕后，就會(huì)產(chǎn)生一個(gè)“.SWF”格式的文件，文件會(huì)被自動(dòng)導(dǎo)入當(dāng)前正在編輯的網(wǎng)頁(yè)中。 在網(wǎng)頁(yè)上插入Flash按鈕和文字，不用安裝和使用Flash系統(tǒng)，就可以給網(wǎng)頁(yè)增添動(dòng)態(tài)效果,七、 插入對(duì)象,6 插入Rollover圖片 Rollover圖片是由主圖片(Original Image)和翻轉(zhuǎn)圖片(Rollover Image)兩部分組成。頁(yè)面載入后，先顯示主圖片，當(dāng)鼠標(biāo)移到主圖片上方時(shí)，圖片內(nèi)容發(fā)生變化，自動(dòng)更新為翻轉(zhuǎn)圖片，鼠標(biāo)移出時(shí)，圖片又恢復(fù)原樣。 制作Rollover圖片是應(yīng)準(zhǔn)備兩幅尺寸相同的圖片。若兩幅圖片尺寸不同的話，將調(diào)整第2幅圖片 如何在網(wǎng)頁(yè)上插入Rollover圖片,七、 插入對(duì)象,1 超級(jí)鏈接概述 用預(yù)先準(zhǔn)備好的文本、按鈕、圖像等對(duì)象與其他對(duì)象建立一種鏈接，也就是在源端點(diǎn)和目標(biāo)端點(diǎn)建立一種鏈接。 超級(jí)鏈接的劃分：,源端點(diǎn),超文本：文本下方有下劃線 非超文本：文本之外的其他對(duì)象構(gòu)建的鏈接,目標(biāo)端點(diǎn),外部鏈接 內(nèi)部鏈接 電子郵件鏈接 局部鏈接、腳本鏈接,八 超級(jí)鏈接的應(yīng)用,相對(duì)路徑與絕對(duì)路徑 2 創(chuàng)建超級(jí)鏈接 使用屬性檢查器鏈接到文檔 屬性檢查器文件夾圖標(biāo)和“鏈接”文本框可用于創(chuàng)建從圖像、對(duì)象或文本到其它文檔或文件的鏈接。 關(guān)于屬性檢查器中的“目標(biāo)” _blank 將鏈接的文檔載入一個(gè)新的、未命名的瀏覽器窗口。 _parent 將鏈接的文檔載入該鏈接所在框架的父框架或父窗口。 _self 將鏈接的文檔載入鏈接所在的同一框架或窗口。 _top 將鏈接的文檔載入整個(gè)瀏覽器窗口，從而刪除所有框架。,使用完整的URL的地址的鏈接路徑稱為絕對(duì)路徑，它指明了目標(biāo)的具體位置 指明目標(biāo)端點(diǎn)與原端點(diǎn)的相對(duì)位置關(guān)系的路徑成為相對(duì)路徑,使用“指向文件”圖標(biāo)鏈接文檔 “指向文件”圖標(biāo)可用于創(chuàng)建從圖像、對(duì)象或文本到其它文檔或文件的鏈接。 若要使用“指向文件”圖標(biāo)鏈接文檔，請(qǐng)執(zhí)行以下操作： (1)在“文檔”窗口的“設(shè)計(jì)”視圖中選擇文本或圖像。 (2)拖動(dòng)屬性檢查器中“鏈接”文本框右側(cè)的“指向文件”圖標(biāo)，然后指向另一個(gè)打開的文檔、已打開文檔中的可見(jiàn)錨記或者指向“文件”面板中的一個(gè)文檔。 注意：只有當(dāng)“文檔”窗口中的文檔未最大化時(shí)，才能鏈接到打開的文檔。如果指向打開的文檔，則在進(jìn)行選擇時(shí)，該文檔移至屏幕的最前面。 (3)釋放鼠標(biāo)按鈕。 使用站點(diǎn)地圖鏈接文檔,八 超級(jí)鏈接的應(yīng)用,3 管理鏈接 為避免站點(diǎn)中出現(xiàn)斷開的鏈接，可以激活鏈接管理，使Dreamweaver 在您作出更改后自動(dòng)更新鏈接。也可以使用站點(diǎn)的可視化表示形式來(lái)修改鏈接，或者，可以通過(guò)一次更改將所有鏈接更新到一個(gè)特定的文件中。 自動(dòng)更新鏈接 每當(dāng)在本地站點(diǎn)內(nèi)移動(dòng)或重命名文檔時(shí)，Dreamweaver 可更新起自以及指向該文檔的鏈接。當(dāng)將整個(gè)站點(diǎn)（或其中完全獨(dú)立的一個(gè)部分）存儲(chǔ)在本地硬盤上時(shí)，此項(xiàng)功能最實(shí)用。Dreamweaver不更改遠(yuǎn)程文件夾中的文件，除非將這些本地文件放在或者存回到遠(yuǎn)程服務(wù)器上。 若要在Dreamweaver 中啟用鏈接管理，請(qǐng)執(zhí)行以下操作：,八 超級(jí)鏈接的應(yīng)用,(1)選擇“編輯”“首選參數(shù)”(Windows) “首選參數(shù)”對(duì)話框出現(xiàn)。 (2)從左側(cè)的分類列表中選擇“常規(guī)”。出現(xiàn)“常規(guī)”首選參數(shù)選項(xiàng)。 (3)在“文檔選項(xiàng)”部分，從“移動(dòng)文件時(shí)更新鏈接”彈出菜單中選擇“總是”或者“提示”。若選擇“總是”，則每當(dāng)移動(dòng)或重命名選定文檔時(shí)，Dreamweaver 將自動(dòng)更新起自和指向該文檔的所有鏈接。 在站點(diǎn)地圖中修改鏈接 可以通過(guò)在站點(diǎn)地圖中添加、更改和刪除鏈接來(lái)修改站點(diǎn)的結(jié)構(gòu)。Dreamweaver 自動(dòng)更新站點(diǎn)地圖以顯示對(duì)站點(diǎn)所做的更改。 若要更改鏈接，請(qǐng)執(zhí)行以下操作： (1)在站點(diǎn)地圖中，選擇要更改的鏈接所指向的頁(yè)面,選擇“站點(diǎn)”“更改鏈接” 右鍵單擊，然后從上下文菜單中選擇“更改鏈接”。 2 通過(guò)瀏覽找到希望鏈接指向的文件，或者鍵入U(xiǎn)RL。 4 創(chuàng)建錨點(diǎn)鏈接 在網(wǎng)頁(yè)設(shè)計(jì)中，要?jiǎng)?chuàng)建某個(gè)網(wǎng)頁(yè)的某個(gè)指定位置的超鏈接稱為創(chuàng)建錨點(diǎn)的鏈接。 命名錨記使您可以在文檔中設(shè)置標(biāo)記，這些標(biāo)記通常放在文檔的特定主題處或頂部。然后可以創(chuàng)建到這些命名錨記的鏈接，這些鏈接可快速將訪問(wèn)者帶到指定位置。 創(chuàng)建到命名錨記的鏈接的過(guò)程分為兩步。首先，創(chuàng)建命名錨記，然后創(chuàng)建到該命名錨記的鏈接。,5 創(chuàng)建電子郵件鏈接 6 創(chuàng)建導(dǎo)航條 導(dǎo)航條由圖像或圖像組組成，這些圖像的顯示內(nèi)容隨用戶操作而變化。 使用“插入導(dǎo)航條”命令之前，須首先為各個(gè)導(dǎo)航項(xiàng)目的顯示狀態(tài)創(chuàng)建一組圖像。（可將導(dǎo)航條項(xiàng)目視為按鈕，因?yàn)閱螕羲鼤r(shí)，導(dǎo)航條項(xiàng)目將用戶帶到其它頁(yè)面。 為文檔創(chuàng)建導(dǎo)航條后，可使用“修改導(dǎo)航條”命令向?qū)Ш綏l添加圖像，或從導(dǎo)航條中刪除圖像。此命令可用于更改圖像或圖像組、更改單擊項(xiàng)目時(shí)所打開的文件、選擇在不同的窗口或框架中打開文件以及重新排序圖像。,插入導(dǎo)航條 插入導(dǎo)航條時(shí)，須命名導(dǎo)航條項(xiàng)目，并選擇要用于它們的圖像。 7 創(chuàng)建跳轉(zhuǎn)菜單 跳轉(zhuǎn)菜單是文檔中的彈出菜單，對(duì)站點(diǎn)訪問(wèn)者可見(jiàn)，并列出鏈接到文檔或文件的選項(xiàng)?？梢詣?chuàng)建到整個(gè)Web 站點(diǎn)內(nèi)文檔的鏈接、到其它Web 站點(diǎn)上文檔的鏈接、電子郵件鏈接、到圖形的鏈接。 跳轉(zhuǎn)菜單可包含三個(gè)基本部分： （可選）菜單選擇提示，如菜單項(xiàng)的類別說(shuō)明，或一些指導(dǎo)信息等，例如“選擇其中一項(xiàng)：” （必需）所鏈接菜單項(xiàng)的列表：用戶選擇某個(gè)選項(xiàng)，則鏈接的文檔或文件被打開。 （可選）“前往”按鈕。,