通過(guò)Dreamweaver_CS3學(xué)習(xí)HTML+DIV+CSS_第2章__網(wǎng)頁(yè)頭部Head.ppt

第2章網(wǎng)頁(yè)頭部Head 在第1章中介紹了網(wǎng)頁(yè)結(jié)構(gòu) 雖然頭部?jī)?nèi)容不會(huì)顯示在網(wǎng)頁(yè)的主體里面 但對(duì)于網(wǎng)頁(yè)來(lái)說(shuō) 有著至關(guān)重要的影響 網(wǎng)頁(yè)中加載的順序是從頭部開(kāi)始的 例如 網(wǎng)頁(yè)的標(biāo)題是瀏覽者得到的第一條信息 瀏覽者可以根據(jù)標(biāo)題來(lái)判斷是否繼續(xù)查看該網(wǎng)頁(yè) 網(wǎng)頁(yè)中的腳本一般都放在 之間 以便在網(wǎng)頁(yè)主體中使用腳本時(shí)已經(jīng)加載完成 否則腳本運(yùn)行會(huì)出錯(cuò) 2 1頭部包括的內(nèi)容 前面講了頭部之間內(nèi)容的重要性 文件頭部一般包含標(biāo)題標(biāo)簽 標(biāo)簽 內(nèi)聯(lián)樣式表及預(yù)定義腳本等 接下來(lái)介紹頭部之間所包含的內(nèi)容 2 1 1網(wǎng)頁(yè)標(biāo)題 網(wǎng)頁(yè)標(biāo)題顯示在瀏覽器的標(biāo)題欄上 當(dāng)瀏覽者打開(kāi)網(wǎng)頁(yè)時(shí) 從網(wǎng)頁(yè)中得到的第一條信息便是網(wǎng)頁(yè)標(biāo)題 網(wǎng)頁(yè)標(biāo)題可以簡(jiǎn)明地概括網(wǎng)頁(yè)的內(nèi)容 點(diǎn)明網(wǎng)頁(yè)的主題 從而瀏覽者可以決定是否往下瀏覽 另外 網(wǎng)頁(yè)標(biāo)題也是搜索引擎robots搜索時(shí)的主要依據(jù) 在大量的網(wǎng)絡(luò)信息中 瀏覽者如果想搜索到自己的網(wǎng)頁(yè) 最好的辦法是定義一個(gè)合適的標(biāo)題 2 1 2標(biāo)簽 標(biāo)簽在網(wǎng)頁(yè)內(nèi)容中不顯示 但它的作用不容忽視 標(biāo)簽主要用于為搜索引擎robots定義頁(yè)面主題信息 它還可以用于定義用戶(hù)瀏覽器上的cookie 鑒別作者 設(shè)定頁(yè)面格式 標(biāo)注內(nèi)容提要和關(guān)鍵字 同時(shí) 它還可以設(shè)置頁(yè)面 使其根據(jù)定義的時(shí)間間隔刷新自己 以及設(shè)置RASC內(nèi)容等級(jí)等 2 1 3樣式表和腳本 網(wǎng)頁(yè)內(nèi)聯(lián)定義的樣式表通常放在網(wǎng)頁(yè)頭部 這樣 可以在網(wǎng)頁(yè)內(nèi)容加載之前先定義內(nèi)容中需要的樣式 從而防止樣式的不完全載入 以及破壞網(wǎng)頁(yè)的結(jié)構(gòu)和外觀等現(xiàn)象 其次 當(dāng)網(wǎng)頁(yè)中的元素需要修改樣式時(shí) 方便進(jìn)行查找和修改 從而使頁(yè)面的結(jié)構(gòu)清晰明了 2 2查看頭部 雖然頭部的內(nèi)容不會(huì)顯示在網(wǎng)頁(yè)主體內(nèi) 但是DreamweaverCS3依然提供了編輯工具 下面是查看頭部?jī)?nèi)容的具體步驟 文件頭 窗口 屬性 面板 2 3設(shè)置標(biāo)題 設(shè)置網(wǎng)頁(yè)標(biāo)題很簡(jiǎn)單 具體步驟如下 2 3設(shè)置標(biāo)題 新建基本頁(yè) 網(wǎng)頁(yè)默認(rèn)的標(biāo)題為 無(wú)標(biāo)題文檔 單擊 文件 保存 命令 保存網(wǎng)頁(yè) 按F12鍵進(jìn)行預(yù)覽 效果如圖 新建頁(yè)設(shè)置標(biāo)題 2 3設(shè)置標(biāo)題 單擊 頁(yè)面屬性 按鈕 彈出 頁(yè)面屬性 對(duì)話框 如圖所示 頁(yè)面屬性 對(duì)話框 2 4認(rèn)識(shí)標(biāo)簽 標(biāo)簽的功能強(qiáng)大 但不是可見(jiàn)元素 所以不能用設(shè)置可見(jiàn)元素的方法進(jìn)行設(shè)置 下面講解如何在DreamweaverCS3中插入標(biāo)簽 并對(duì)其進(jìn)行設(shè)置 在新建的網(wǎng)頁(yè)中已經(jīng)包含了一個(gè)標(biāo)簽 源碼如下 2 4認(rèn)識(shí)標(biāo)簽 上面源碼是設(shè)置文檔類(lèi)型和網(wǎng)頁(yè)字符集 如果需要添加其他功能 需要插入標(biāo)簽的其他屬性 例如添加網(wǎng)頁(yè)描述 具體步驟如下 標(biāo)簽選擇器 對(duì)話框 標(biāo)簽編輯器 meta 對(duì)話框 2 4認(rèn)識(shí)標(biāo)簽 以上是通過(guò)插入標(biāo)簽的方法 DreamweaverCS3還提供了更方便的方法 具體步驟如下 常用 選項(xiàng)卡 文件頭 下拉菜單 說(shuō)明 對(duì)話框 2 5HTTP標(biāo)題信息http equiv 首先介紹http equiv屬性 http equiv類(lèi)似于HTTP的頭部協(xié)議 會(huì)返回一些有用信息給瀏覽器 以幫助瀏覽器正確和精確地顯示網(wǎng)頁(yè)內(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è)置文檔類(lèi)型與語(yǔ)言屬性Content Type Content Type屬性用來(lái)設(shè)置文檔類(lèi)型 瀏覽器從content的屬性值中獲取網(wǎng)頁(yè)的語(yǔ)言類(lèi)型 判斷是HTML還是XML 通常設(shè)置為text html charset指明網(wǎng)頁(yè)中文字使用的字符集 例如 如果是簡(jiǎn)體中文 charset gb2312 如果是繁體中文 則charset big5 若未正確設(shè)置語(yǔ)言文字集 將可能導(dǎo)致網(wǎng)頁(yè)顯示混亂 使用格式如下 2 5 2設(shè)置自動(dòng)刷新屬性Refresh Refresh屬性設(shè)置頁(yè)面自動(dòng)刷新的時(shí)間 或自動(dòng)跳轉(zhuǎn)到其他的網(wǎng)頁(yè) 此時(shí)的content屬性值是自動(dòng)刷新的時(shí)間或自動(dòng)跳轉(zhuǎn)的時(shí)間 單位是秒 URL是設(shè)置跳轉(zhuǎn)網(wǎng)頁(yè)的地址 使用的格式如下 源碼設(shè)置為10秒后 自動(dòng)跳轉(zhuǎn)到百度網(wǎng)站 上面的源碼設(shè)置為10秒后 自動(dòng)跳轉(zhuǎn)到百度網(wǎng)站 2 5 3設(shè)置緩存時(shí)間屬性Expires Expires屬性是設(shè)置網(wǎng)頁(yè)在緩存中的過(guò)期時(shí)間 一旦網(wǎng)頁(yè)過(guò)期 必須重新從服務(wù)器上載入 content屬性值可設(shè)置為時(shí)間長(zhǎng)度 也可設(shè)置為到期的日期 如果設(shè)置為日期 日期的格式必須是格林時(shí)間 使用格式如下 2 5 4設(shè)置禁用緩存屬性Pragma Pragma屬性是設(shè)置禁止瀏覽器從本地計(jì)算機(jī)的緩存中調(diào)閱頁(yè)面內(nèi)容 如果設(shè)置了此屬性值 網(wǎng)頁(yè)則不保存在緩存中 每次訪問(wèn)時(shí)都刷新頁(yè)面 這樣設(shè)定 瀏覽者將無(wú)法脫機(jī)瀏覽 使用格式如下 2 5 5設(shè)置網(wǎng)頁(yè)Cookie屬性Set Cookie Set Cookie用于設(shè)置Cookie 當(dāng)瀏覽器訪問(wèn)頁(yè)面時(shí) 將其自動(dòng)保存 下次再訪問(wèn)該頁(yè)面時(shí) 可直接從文件中讀取 以提高速度 通常HTML文件不需要使用禁用緩存 對(duì)于ASP等頁(yè)面 就可以使用禁用緩存 因?yàn)槊看慰吹降捻?yè)面都是在服務(wù)器下動(dòng)態(tài)生成的 緩存就失去意義了 如果網(wǎng)頁(yè)過(guò)期 存盤(pán)的Cookie將被自動(dòng)刪除 2 5 6設(shè)置打開(kāi)窗口屬性Window target Window target用于設(shè)置打開(kāi)窗口的屬性 通過(guò)這個(gè)屬性來(lái)強(qiáng)制頁(yè)面在當(dāng)前窗口以獨(dú)立頁(yè)面顯示 使用格式如下 2 5 7設(shè)置過(guò)渡效果屬性Page Enter Page Exit Page Enter與Page Exit用于頁(yè)面打開(kāi)或關(guān)閉時(shí)的過(guò)渡特效 content的屬性值是動(dòng)態(tài)濾鏡的一種 blendTrans濾鏡產(chǎn)生漸隱效果 Duration參數(shù)設(shè)置特效持續(xù)的時(shí)間 單位為秒 revealTrans濾鏡產(chǎn)生多種效果 Duration參數(shù)設(shè)置特效持續(xù)的時(shí)間 transition參數(shù)設(shè)置效果類(lèi)型 其取值范圍為0 23 2 5 8設(shè)置主題與腳本類(lèi)型屬性MSThemeCompatible Content Script Type MSThemeCompatible設(shè)置是否關(guān)閉WindowsXP主題 content屬性值為Yes或No 使用格式如下 以上是http equiv屬性的介紹 并沒(méi)有完全囊括所有類(lèi)型 如需要更詳細(xì)地了解 參閱其他資料 下面講解name屬性 2 6頁(yè)面描述信息name name的屬性值有Keywords Description Author和Robots等 name屬性主要用來(lái)描述頁(yè)面信息 它是搜索引擎識(shí)別的關(guān)鍵所在 為了使網(wǎng)頁(yè)被搜索引擎發(fā)現(xiàn) 設(shè)置name屬性是必不可少的 下面對(duì)各個(gè)屬性值的類(lèi)型分別進(jìn)行介紹 2 6 1設(shè)置描述與關(guān)鍵詞屬性Description Description 頁(yè)面內(nèi)容的簡(jiǎn)介 用來(lái)告訴搜索引擎網(wǎng)站的主要內(nèi)容 在設(shè)置時(shí)盡量要把簡(jiǎn)介寫(xiě)得清晰明白 字?jǐn)?shù)不能太短也不能太長(zhǎng) 一般保持在80 200之間 Keywords 頁(yè)面關(guān)鍵字 用于為搜索引擎提供關(guān)鍵字的列表 選擇合適的關(guān)鍵字是提高被搜索幾率的關(guān)鍵因素 多個(gè)關(guān)鍵字之間用逗號(hào)隔開(kāi) 逗號(hào)表示邏輯 或 空格表示邏輯 與 2 6 2設(shè)置搜索機(jī)器人引向?qū)傩訰obots Robots屬性用于設(shè)置搜索機(jī)器人的引向 Robots用來(lái)告訴搜索機(jī)器人哪些頁(yè)面需要索引 哪些頁(yè)面不需要索引 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ù)雜 讀者可以在使用的過(guò)程逐漸掌握 2 7設(shè)置基鏈接屬性base 標(biāo)簽設(shè)置網(wǎng)頁(yè)的基鏈接 使用格式如下 href屬性值是基鏈接的位置 當(dāng)設(shè)置好基鏈接后 自動(dòng)在網(wǎng)頁(yè)中的相對(duì)路徑前加上 2 8設(shè)置鏈接文件屬性link 標(biāo)簽用于設(shè)置鏈接到的文件 從而引入外部文檔 使用格式如下 其中href