- Dreamweaver CC網頁設計從入門到精通（微課精編版）
- 前端科技
- 4101字
- 2019-12-09 14:39:26
2.3 定義元信息
網頁都由頭部信息區和主體可視區兩部分組成。其中，頭部信息位于<head>和</head>標記之間，不會被顯示出來，但可以在源代碼中查看，頭部信息一般作為網頁元信息方便用戶參考、瀏覽器解析或搜索引擎等設備識別，頁面可視區域包含在<body>標記中，瀏覽者所看到的所有網頁信息都包含在該區域。
頭部信息對于網頁來說是非常重要的，可以說它是整個頁面的控制中樞，例如，當頁面以亂碼形式顯示，就是因為網頁字符編碼沒有設置正確等。還可以通過頭部元信息設置網頁標題、關鍵詞、作者、描述等多種信息。
圖2.24 【META】對話框
在【代碼】視圖下可以直接輸入<meta>標記，組合使用HTTP-EQUIV、Name和Content這3個屬性可以定義各種元數據。在Dreamweaver CC中，用戶使用可視化方式快速插入元數據會更直觀方便。具體方法是，選擇【插入】｜【Head】｜【META】命令，打開【META】對話框，如圖2.24所示。
提示：也可以通過【插入】面板插入元數據。在【插入】面板中單擊【常用】工具類中的【Head】按鈕
，在彈出的下拉列表中選擇【META】命令。
下面介紹【META】對話框中各個選項。
（1）【屬性】下拉列表框：該下拉列表框中有【HTTP-equivalent】和【名稱】兩個選項，分別對應HTTP-EQUIV和NAME變量類型。
（2）【值】文本框：輸入HTTP-EQUIV或NAME變量類型的值，用于設置不同類型的元數據。
（3）【內容】文本框：在該文本框中輸入HTTP-EQUIV或NAME變量的內容，即設置元數據項的具體內容。
【拓展】
HTTP-EQUIV是HTTP Equivalence的簡寫，它表示HTTP的頭部協議，這些頭部協議信息將反饋給瀏覽器一些有用的信息，以幫助瀏覽器正確和精確地解析網頁內容。在【META】對話框的【屬性】下拉列表框中選擇【HTTP-equivalent】選項，則可以設置下面各種元數據。
Name屬性專門用來設置頁面隱性信息。在【META】對話框的【屬性】下拉列表框中選擇【名稱】選項，然后設置【值】和【內容】選項的值，就可以定義文檔各種隱性數據，這些元信息是不會顯示的，但可以在網頁源代碼中查看，主要目的是方便設備瀏覽。
提示：在插入元信息時，可以重復插入相同類型的信息，雖然在網頁中已經設置了字符編碼為UTF-8，但系統依然會再次插入字符編碼信息，這與【頁面屬性】對話框設置不同，它不會修改原來已經設置的信息。
2.3.1 實戰演練：設置網頁字符編碼
網頁內容可以設置不同的字符集進行顯示，如Gb2312簡體中文編碼、BIG5繁體中文編碼、IS08859-1英文編碼、國際通用字符編碼UTF-8等。對于不同字符編碼頁面，如果瀏覽器不能顯示該字符，則會顯示為亂碼。因此需要首先定義頁面的字符編碼，告訴瀏覽器應該使用什么編碼來顯示頁面內容。
【示例】
在【META】對話框的【屬性】下拉列表框中選擇【HTTP-equivalent】選項，在【值】文本框中輸入“Content-Type”，在【內容】文本框中輸入“text/html;charset=gb2312”，則可以設置網頁字符編碼為簡體中文，如圖2.25所示。
圖2.25 設置簡體中文字符
使用HTML代碼在<head>標記中直接進行書寫，如圖2.26所示，默認情況下新建頁面設置為UTF-8編碼（國際通用編碼），如果在頁面中輸入其他國家語言，還需要重新設置相應的字符編碼。也可以在【首選項】對話框的【新建文檔】分類中設置默認網頁編碼。
圖2.26 直接輸入代碼
2.3.2 實戰演練：設置頁面有效期
通過設置<meta>標記屬性可以控制頁面的有效期限。
【示例】
在【META】對話框的【屬性】下拉列表框中選擇【HTTP-equivalent】選項，在【值】文本框中輸入“expires”，expires為網頁到期，在【內容】文本框中輸入“Sun,1 Dec 2014 12:00:00 GMT”，則可以設置網頁在2014年12月1日12點過期，其格式為“星期，日 月 年 時 分 秒 GML”。過期之后將無法脫機瀏覽該網頁，只有重新登錄并連接該網頁才可以繼續再次瀏覽，如圖2.27所示。用HTML代碼在<head>標記中直接書寫如圖2.28所示。
圖2.27 設置網頁期限
圖2.28 輸入網頁期限代碼
2.3.3 實戰演練：設置網頁禁止緩存
使用網頁緩存可以加快瀏覽網頁的速度，因為緩存將曾經瀏覽過的頁面暫存在客戶端計算機內存中，當下次打開同一個網頁內容時，即可直接從內存中調出已瀏覽的頁面，實現快速瀏覽，避免再次去服務器讀取同一網頁內容。但是如果網頁的內容經常頻繁地更新，用戶希望隨時都能查看到最新的網頁內容，則可以通過設置禁止頁面緩存。
【示例】
在【META】對話框的【屬性】下拉列表框中選擇【HTTP-equivalent】選項，在【值】文本框中輸入“cache-control”，在【內容】文本框中輸入“no-cache”，則可以禁止該網頁緩存，如圖2.29所示。其中cache-control表示緩沖機制，content屬性或者【內容】文本框中內容no-cache定義禁止緩存。用HTML代碼在<head>標記中直接書寫如圖2.30所示。
圖2.29 設置網頁禁止緩存
圖2.30 直接輸入禁止緩存代碼
2.3.4 實戰演練：設置網頁自動刷新
使用<meta>標記可以設置網頁自動刷新。例如，在直播頻道、論壇網站等就需要設置頁面自動刷新，以實現信息的自動實時顯示。
【示例】
在【META】對話框的【屬性】下拉列表框中選擇【HTTP-equivalent】選項，在【值】文本框中輸入“refresh”，在【內容】文本框中輸入“5”，則可以每5秒鐘刷新一次網頁，如圖2.31所示。用HTML代碼在<head>標記中直接書寫如圖2.32所示。
圖2.31 設置網頁自動刷新
圖2.32 直接輸入自動刷新代碼
2.3.5 實戰演練：設置網頁自動跳轉
使用refresh屬性，不僅能夠完成頁面自動刷新，也可以實現頁面之間相互跳轉。如果網站地址有所變化，希望在當前的頁面中等待幾秒鐘之后就自動跳轉到新的網站地址，可以通過設置跳轉時間和地址來實現。
【示例】
在【META】對話框的【屬性】下拉列表框中選擇【HTTP-equivalent】選項，在【值】文本框中輸入“refresh”，在【內容】文本框中輸入“5;url= http://www.baidu.com/”，如圖2.33所示。則5秒鐘后，網頁自動跳轉到http://www.baidu.com/頁面。使用HTML代碼在<head>標記中直接書寫如圖2.34所示。
圖2.33 設置網頁自動跳轉
圖2.34 直接輸入網頁自動跳轉代碼
2.3.6 實戰演練：設置網頁轉場效果
轉場效果即網頁過渡特效，是指當進入或離開網站的某個網頁時，頁面具有不同的切換效果。添加此功能可以使網頁看起來更具有動感。
【示例】
在【META】對話框的【屬性】下拉列表框中選擇【HTTP-equivalent】選項，在【值】文本框中輸入“page-enter”，在【內容】文本框中輸入“revealtrans(duration=10, transition=1)”，則可以設置網頁被打開時以盒狀展開，如圖2.35所示。使用HTML代碼在<head>標記中直接書寫如圖2.36所示。
圖2.35 設置網頁轉場特效
圖2.36 直接輸入網頁轉場特效代碼
在【META】對話框的【屬性】下拉列表框中選擇【HTTP-equivalent】選項，在【值】文本框中輸入“page-enter”，表示打開網頁；輸入“page-exit”，表示關閉網頁。Duration表示設置轉場時間，transition表示轉場效果，如表2.1所示。
表2.1 轉場特效編號
2.3.7 實戰演練：設置網頁獨立顯示
設置頁面在當前窗口中以獨立的頁面顯示。
【示例】
在【META】對話框的【屬性】下拉列表框中選擇【HTTP-equivalent】選項，在【值】文本框中輸入“window-target”，在【內容】文本框中輸入“_top”，則可以設置網頁被獨立打開，避免在其他網頁框架結構中顯示，如圖2.37所示。使用HTML代碼在<head>標記中直接書寫如圖2.38所示。
圖2.37 設置網頁獨立顯示
圖2.38 直接輸入網頁獨立顯示代碼
2.3.8 實戰演練：設置網頁編輯器說明
使用Dreamweaver等網頁編輯器時，可以在源代碼中設置使用軟件的說明。
【示例】
在【META】對話框的【屬性】下拉列表框中選擇【名稱】選項，在【值】文本框中輸入“generator”，在【內容】文本框中輸入“Dreamweaver”即可，說明該網頁的編輯器是Dreamweaver，如圖2.39所示。使用HTML代碼在<head>標記中直接書寫如圖2.40所示。
圖2.39 設置網頁編輯器說明
圖2.40 直接輸入網頁編輯器說明代碼
2.3.9 實戰演練：設置網頁關鍵詞
關鍵詞的設置非常重要，它是為搜索引擎而設置的，也比較講究，因為網上瀏覽網頁途徑主要是通過搜索引擎來實現的。為了提高在搜索引擎中被搜索到的概率，可以設置多個與網頁主題相關的關鍵詞以便搜索。這些關鍵詞不會在瀏覽器中顯示。輸入關鍵詞時各個關鍵詞之間用逗號分隔。
注意：大多數搜索引擎檢索時都會限制關鍵詞的數量，有時關鍵詞過多，該網頁會在檢索中被忽略。所以關鍵詞的輸入不宜過多，應切中要害。
【示例】
在【META】對話框的【屬性】下拉列表框中選擇【名稱】選項，在【值】文本框中輸入“keywords”，在【內容】文本框中輸入與網站相關的關鍵詞，如“網頁設計師，網頁設計師招聘，網頁素材，韓國模板，古典素材，優秀網站設計，國內酷站欣賞，我的聯盟，設計名站，網頁教學，網站重構，網站界面欣賞，平面設計，Flash，Dreamweaver，Photoshop，Coreldraw，ASP，PHP，ASP. NET”，如圖2.41所示。
圖2.41 設置網頁關鍵詞
2.3.10 實戰演練：設置首頁搜索限制
通過設置禁止或者允許權限來避免搜索引擎的搜索，保護網站隱私。
【示例】
在【META】對話框的【屬性】下拉列表框中選擇【名稱】選項，在【值】文本框中輸入“robots”，定義搜索方式，在【內容】文本框中輸入搜索權限，取值說明如表2.2所示。
表2.2 搜索權限取值
2.3.11 實戰演練：設置網頁說明
在一個網站中，可以在網頁源代碼中添加說明文字，概括描述網站的主題內容，方便搜索引擎按主題搜索。這個說明文字內容不會顯示在瀏覽器中。主要為搜索引擎尋找主題網頁提供方便，這些說明文字還可存儲在搜索引擎的服務器中，在瀏覽者搜索時隨時調用，還可以在檢索到網頁時作為檢索結果返給瀏覽者，例如在用搜索引擎搜索的結果網頁中顯示的說明文字就是通過這樣設置的。搜索引擎同樣限制說明文字的字數，所以內容要盡量簡明扼要。
【示例】
在【META】對話框的【屬性】下拉列表框中選擇【名稱】選項，在【值】文本框中輸入“description”，在【內容】文本框中輸入說明文字即可，如“網頁設計師聯盟，國內專業網頁設計人才基地，為廣大設計師提供學習交流空間”，如圖2.42所示。
圖2.42 設置搜索說明
2.3.12 實戰演練：設置網頁作者信息
用<meta>標記可以在頁面源代碼中顯示頁面作者及本人信息，這樣就可以在源代碼中保留作者希望保留的信息。
【示例】
在【META】對話框的【屬性】下拉列表框中選擇【名稱】選項，在【值】文本框中輸入“author”，在【內容】文本框中輸入作者名稱即可。用HTML代碼在<head>標記中直接書寫，如圖2.43所示。
圖2.43 輸入網頁作者源代碼
2.3.13 實戰演練：設置網頁版權信息
使用<meta>標記可以在頁面源代碼中設置版權信息。
【示例】
在【META】對話框的【屬性】下拉列表框中選擇【名稱】選項，在【值】文本框中輸入“copyright”，在【內容】文本框中輸入版權信息即可。用HTML代碼在<head>標記中直接書寫，如圖2.44所示。
圖2.44 輸入網頁版權信息源代碼
2.3.14 實戰演練：設置建站日期
使用<meta>標記可以在頁面源代碼中設置網站建立日期。
【示例】
在【META】對話框的【屬性】下拉列表框中選擇【名稱】選項，在【值】文本框中輸入“build”，在【內容】文本框中輸入建站日期，如圖2.45所示。
圖2.45 輸入建站日期
2.3.15 實戰演練：設置作者聯系郵箱
使用<meta>標記可以在頁面源代碼中設置聯系人郵箱。
【示例】
在【META】對話框的【屬性】下拉列表框中選擇【名稱】選項，在【值】文本框中輸入“reply-to”，在【內容】文本框中輸入郵箱地址，如圖2.46所示。
圖2.46 輸入聯系郵箱