第2章 網(wǎng)頁頭部Head.ppt

1、第2章 網(wǎng)頁頭部Head,在第1章中介紹了網(wǎng)頁結(jié)構(gòu)。雖然頭部內(nèi)容不會顯示在網(wǎng)頁的主體里面，但對于網(wǎng)頁來說，有著至關(guān)重要的影響。網(wǎng)頁中加載的順序是從頭部開始的。例如，網(wǎng)頁的標(biāo)題是瀏覽者得到的第一條信息，瀏覽者可以根據(jù)標(biāo)題來判斷是否繼續(xù)查看該網(wǎng)頁。網(wǎng)頁中的腳本一般都放在之間，以便在網(wǎng)頁主體中使用腳本時已經(jīng)加載完成，否則腳本運(yùn)行會出錯。,2.1 頭部包括的內(nèi)容,前面講了頭部之間內(nèi)容的重要性。文件頭部一般包含標(biāo)題標(biāo)簽、標(biāo)簽、內(nèi)聯(lián)樣式表及預(yù)定義腳本等，接下來介紹頭部之間所包含的內(nèi)容。,2.1.1 網(wǎng)頁標(biāo)題,網(wǎng)頁標(biāo)題顯示在瀏覽器的標(biāo)題欄上。當(dāng)瀏覽者打開網(wǎng)頁時，從網(wǎng)頁中得到的第一條信息便是網(wǎng)頁標(biāo)題。網(wǎng)頁標(biāo)題

2、可以簡明地概括網(wǎng)頁的內(nèi)容，點明網(wǎng)頁的主題。從而瀏覽者可以決定是否往下瀏覽。另外，網(wǎng)頁標(biāo)題也是搜索引擎robots搜索時的主要依據(jù)。在大量的網(wǎng)絡(luò)信息中，瀏覽者如果想搜索到自己的網(wǎng)頁，最好的辦法是定義一個合適的標(biāo)題。,2.1.2 標(biāo)簽,標(biāo)簽在網(wǎng)頁內(nèi)容中不顯示，但它的作用不容忽視。標(biāo)簽主要用于為搜索引擎robots定義頁面主題信息，它還可以用于定義用戶瀏覽器上的cookie、鑒別作者、設(shè)定頁面格式、標(biāo)注內(nèi)容提要和關(guān)鍵字；同時，它還可以設(shè)置頁面，使其根據(jù)定義的時間間隔刷新自己，以及設(shè)置RASC內(nèi)容等級等。,2.1.3 樣式表和腳本,網(wǎng)頁內(nèi)聯(lián)定義的樣式表通常放在網(wǎng)頁頭部。這樣，可以在網(wǎng)頁內(nèi)容加載之前先定

3、義內(nèi)容中需要的樣式，從而防止樣式的不完全載入，以及破壞網(wǎng)頁的結(jié)構(gòu)和外觀等現(xiàn)象。其次，當(dāng)網(wǎng)頁中的元素需要修改樣式時，方便進(jìn)行查找和修改，從而使頁面的結(jié)構(gòu)清晰明了。,2.2 查看頭部,雖然頭部的內(nèi)容不會顯示在網(wǎng)頁主體內(nèi)，但是Dreamweaver CS3依然提供了編輯工具，下面是查看頭部內(nèi)容的具體步驟：,【文件頭】窗口 【屬性】面板,2.3 設(shè)置標(biāo)題,設(shè)置網(wǎng)頁標(biāo)題很簡單，具體步驟如下：,2.3 設(shè)置標(biāo)題,新建基本頁，網(wǎng)頁默認(rèn)的標(biāo)題為“無標(biāo)題文檔”。單擊【文件】|【保存】命令，保存網(wǎng)頁，按F12鍵進(jìn)行預(yù)覽，效果如圖 。,新建頁 設(shè)置標(biāo)題,2.3 設(shè)置標(biāo)題,單擊【頁面屬性】按鈕，彈出【頁面屬性】對話框

4、，如圖所示,【頁面屬性】對話框,2.4 認(rèn)識標(biāo)簽,標(biāo)簽的功能強(qiáng)大，但不是可見元素，所以不能用設(shè)置可見元素的方法進(jìn)行設(shè)置。下面講解如何在Dreamweaver CS3中插入標(biāo)簽，并對其進(jìn)行設(shè)置。在新建的網(wǎng)頁中已經(jīng)包含了一個標(biāo)簽，源碼如下： ,2.4 認(rèn)識標(biāo)簽,上面源碼是設(shè)置文檔類型和網(wǎng)頁字符集。如果需要添加其他功能，需要插入標(biāo)簽的其他屬性。例如添加網(wǎng)頁描述，具體步驟如下：,【標(biāo)簽選擇器】對話框 【標(biāo)簽編輯器-meta】對話框,2.4 認(rèn)識標(biāo)簽,以上是通過插入標(biāo)簽的方法，Dreamweaver CS3還提供了更方便的方法，具體步驟如下：,【常用】選項卡 【文件頭】下拉菜單,【說明】對話框,2.5

5、HTTP標(biāo)題信息http-equiv,首先介紹http-equiv屬性。http-equiv類似于HTTP的頭部協(xié)議，會返回一些有用信息給瀏覽器，以幫助瀏覽器正確和精確地顯示網(wǎng)頁內(nèi)容。常用的http-equiv屬性值有Content-Type、Content-Language 、Refresh、Expires、Pragma、Set-Cookie、Window-target、Page-Enter、Page-Exit、MSThemeCompatible和Content-Script-Type等。下面進(jìn)行詳細(xì)講解。,2.5.1 設(shè)置文檔類型與語言屬性Content-Type,Content-Type

6、屬性用來設(shè)置文檔類型。瀏覽器從content的屬性值中獲取網(wǎng)頁的語言類型，判斷是HTML還是XML，通常設(shè)置為text/html。charset指明網(wǎng)頁中文字使用的字符集。例如，如果是簡體中文，charset=gb2312；如果是繁體中文，則charset=big5。若未正確設(shè)置語言文字集，將可能導(dǎo)致網(wǎng)頁顯示混亂。使用格式如下： ,2.5.2 設(shè)置自動刷新屬性Refresh,Refresh屬性設(shè)置頁面自動刷新的時間，或自動跳轉(zhuǎn)到其他的網(wǎng)頁。此時的content屬性值是自動刷新的時間或自動跳轉(zhuǎn)的時間，單位是秒。URL是設(shè)置跳轉(zhuǎn)網(wǎng)頁的地址。使用的格式如下：源碼設(shè)置為10秒后，自動跳轉(zhuǎn)到百度網(wǎng)站。

7、上面的源碼設(shè)置為10秒后，自動跳轉(zhuǎn)到百度網(wǎng)站。,2.5.3 設(shè)置緩存時間屬性Expires,Expires屬性是設(shè)置網(wǎng)頁在緩存中的過期時間。一旦網(wǎng)頁過期，必須重新從服務(wù)器上載入。content屬性值可設(shè)置為時間長度，也可設(shè)置為到期的日期，如果設(shè)置為日期，日期的格式必須是格林時間。使用格式如下： ,2.5.4 設(shè)置禁用緩存屬性Pragma,Pragma屬性是設(shè)置禁止瀏覽器從本地計算機(jī)的緩存中調(diào)閱頁面內(nèi)容，如果設(shè)置了此屬性值，網(wǎng)頁則不保存在緩存中，每次訪問時都刷新頁面。這樣設(shè)定，瀏覽者將無法脫機(jī)瀏覽。使用格式如下： ,2.5.5 設(shè)置網(wǎng)頁Cookie屬性Set-Cookie,Set-Cookie用

8、于設(shè)置Cookie。當(dāng)瀏覽器訪問頁面時，將其自動保存；下次再訪問該頁面時，可直接從文件中讀取，以提高速度。通常HTML文件不需要使用禁用緩存，對于ASP等頁面，就可以使用禁用緩存，因為每次看到的頁面都是在服務(wù)器下動態(tài)生成的，緩存就失去意義了。如果網(wǎng)頁過期，存盤的Cookie將被自動刪除。,2.5.6 設(shè)置打開窗口屬性Window-target,Window-target用于設(shè)置打開窗口的屬性。通過這個屬性來強(qiáng)制頁面在當(dāng)前窗口以獨立頁面顯示。使用格式如下： ,2.5.7 設(shè)置過渡效果屬性Page-Enter、Page-Exit,Page-Enter與Page-Exit用于頁面打開或關(guān)閉時的過渡特

9、效。 content的屬性值是動態(tài)濾鏡的一種。blendTrans濾鏡產(chǎn)生漸隱效果，Duration參數(shù)設(shè)置特效持續(xù)的時間，單位為秒。revealTrans濾鏡產(chǎn)生多種效果，Duration參數(shù)設(shè)置特效持續(xù)的時間，transition參數(shù)設(shè)置效果類型，其取值范圍為023。,2.5.8 設(shè)置主題與腳本類型屬性MSThemeCompatible、Content-Script-Type,MSThemeCompatible設(shè)置是否關(guān)閉Windows XP主題。content屬性值為Yes或No。使用格式如下： 以上是http-equiv屬性的介紹，并沒有完全囊括所有類型，如需要更詳細(xì)地了解，參閱其他資

10、料。下面講解name屬性。,2.6 頁面描述信息name,name的屬性值有Keywords、Description、Author和Robots等。name屬性主要用來描述頁面信息，它是搜索引擎識別的關(guān)鍵所在。為了使網(wǎng)頁被搜索引擎發(fā)現(xiàn)，設(shè)置name屬性是必不可少的。下面對各個屬性值的類型分別進(jìn)行介紹。,2.6.1 設(shè)置描述與關(guān)鍵詞屬性Description,Description（頁面內(nèi)容的簡介）用來告訴搜索引擎網(wǎng)站的主要內(nèi)容。在設(shè)置時盡量要把簡介寫得清晰明白，字?jǐn)?shù)不能太短也不能太長，一般保持在80200之間。 Keywords（頁面關(guān)鍵字）用于為搜索引擎提供關(guān)鍵字的列表，選擇合適的關(guān)鍵字是提

11、高被搜索幾率的關(guān)鍵因素。多個關(guān)鍵字之間用逗號隔開，逗號表示邏輯“或”?？崭癖硎具壿嫛芭c”。,2.6.2 設(shè)置搜索機(jī)器人引向?qū)傩訰obots,Robots屬性用于設(shè)置搜索機(jī)器人的引向。Robots用來告訴搜索機(jī)器人哪些頁面需要索引，哪些頁面不需要索引。Content的參數(shù)有all、none、index、noindex、follow和nofollow，默認(rèn)為all。,2.6.3 設(shè)置作者信息屬性Author,Author用于設(shè)置作者信息。content屬性值就是作者的相關(guān)信息。使用格式如下： 以上介紹http-equiv和name常用屬性的設(shè)置方法，由于標(biāo)簽設(shè)置比較復(fù)雜，讀者可以在使用的過程逐漸掌握。,2.7 設(shè)置基鏈接屬性base,標(biāo)簽設(shè)置網(wǎng)頁的基鏈接。使用格式如下： href屬性值是基鏈接的位置。當(dāng)設(shè)置好基鏈接后，自動在網(wǎng)頁中的相對路徑前加上。,2.8 設(shè)置鏈接文件屬性link,標(biāo)簽用于設(shè)置鏈接到的文件，從而引入外部文檔。使用格式如下： 其中hre