標準化設計解決方案- 標記語言和樣式手冊
Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup 從標記語法談起
Chapter2 標題
總覽:
不但所有網頁都需要有標題,如果標記正確的話,他們能為網頁設計和易用性增色不少.
從外觀來說,網頁的標題通常是使用較大的字號,或許會用和主體文字不同的顏色或者字體.標題的作用是"簡要的描述往後章節所討論的主題" ,W3C這樣描述— 顯示網頁內各個段落的概要.
怎樣來創建一個頁面標題來使得我們要展現的信息得到最有效的利用?在這個章節中,我們將研究幾種常用的處理標題的方法,試著從中找出其中一種對我們最有幫助的方式,然後,我們將使用一些css的技巧和竅門來為最棒的方法裝飾一番.
創建文檔標題的最好方法是什麼?
在回答這個問題之前,讓我們假設現在正要把標題放置在文檔的頁首,我們來看看能夠達成類似效果的三種方式.
方法A:有意義嗎?
Super Cool Page Title
雖然標籤在某些場合會是個方便的標籤,但是對於頁面標題來說,它的意義並不大,使用這個方法的唯一好處是我們可以為heading 類指定一個css樣式,以便讓文字看起來像是個標題.
.heading {
font-size: 24px;
font-weight: bold;
color: blue;
}
現在,所有標記了heading類別的標題都會變大,變粗,變藍,很棒對吧?但是,如果有人使用一個不支持css的瀏覽器訪問這個頁面會怎麼樣呢?
舉例來說,如果我們把css樣式放在舊瀏覽器不支援的外部樣式表檔案裡— 或者螢幕閱讀器為有障礙的使用者朗讀頁面時會怎麼樣呢?透過這些途徑存取這個頁面的使用者將看不到(聽不到)標題和正文文字的差異.
class="heading"這樣的標註方法稍~~微的描述了標籤內容的意義,但是只是個一般用途的容器,只是讓大部分瀏覽器改變預設顯示樣式而已.
搜尋引擎在抓取到這個頁面時,會跳過標籤就像它不曾在那邊一樣,不會為裡面可能包含的關鍵字提升權重,稍後在本章節內會提到更多搜索引擎和頁面標題的關係.
最後,由於標籤是一個行內元素,我們大多需要把方法A的內容在放置到另一個塊級容器中,比方說或者
,以便讓它獨佔一行.這樣會生成許多不必要的代碼,就算你加上需要的容器,不支持css的瀏覽器仍然會以他本來的方式顯示文字,讓用戶看不出標題和正文的任何區別.
#p#
方法B: P和B的組合
Super Cool Page Title
方法B使用了段落標籤,這會讓我們得到我們想要的塊級元素的顯示效果,而標籤會讓文字呈現粗體的樣式(在大多數瀏覽器上) — 但是我們以這樣的方式標記重要的標題時,仍然要面對同樣缺少語義性的結果.
不像方法A,標籤的存在就算缺少css樣式的定義,在大多數瀏覽器中還是會將文字以粗體的樣式呈現.但是和標籤一樣,搜尋引擎不會為段落內的粗體文字提升關鍵字權重.
難以加上樣式
使用單純的p和b的標籤組合,讓我們無法為這個標題加上和其它段落有所區別的樣式,或許我們想以獨特的方式強調標題,為頁面內容加上定義和結構— 但是使用了這個方法讓它呈現粗體後,我們就沒有辦法去做這些事情了.
方法C:樣式與實質
Super Cool Page Title
哈哈,我們的好朋友標題標籤來了,標題標籤從一開始就是存在的,但是許多網頁設計師還是無法以一致的方式使用它們.如果使用得當,標題標籤能夠提供頁面內容的錨點,提供靈活的,可索引的,可更改樣式的結構.
從標籤本身的觀點來看,你一定會愛上它的簡潔,它們不需要額外的容器標籤,你甚至能說這個方法能比前兩個方法節省了一些位元組,可能可以忽略,但是每小一個位元組就是改變.
到分別代表了6層標題,從最重要的到最不重要的,他們本身就是塊級元素不需要一個額外的容器就能自成一行,簡單而又有效率— 是完成這項工作的最佳工具.
容易定義樣式
因為標籤擁有獨特的意義,不像或
標籤那樣會在文內用到多次,因此我們能用css為它加上各式各樣的樣式(我們會在本章的"更多技巧"中深入討論).
更重要的是,就算不加上任何的樣式定義,標題標籤看起來就很明顯是個標題!瀏覽器會用大字體,粗體字呈現
的內容,就算去掉頁面所有的樣式定義,仍然可以看到文檔的結構,因為正確的標題標籤描述的是內容意義,而不是表現方式. (圖2-1)
圖2 - 1: 脫離樣式後使用標題標籤的頁面內容
螢幕閱讀器,PDA,行動電話和其他一些視覺的非視覺的瀏覽器也能識別並正確處理標題標籤的內容,把它的重要性突出於頁面其他內容之上.使用標籤,不支持(或無法支援)css的瀏覽器就不會認為它有什麼特別之處.
討厭的預設樣式
在網頁設計史上,設計師們都會避免使用標題標籤,完全是因為不加上樣式的時候,標題標籤看起來就和怪物沒什麼兩樣,二者擇其一,其中一部分人會因為默認字體大小太大而避免使用或而去使用字體大小較小的標號較高的標題標籤.
然而,有個重點值得強調,我們可以根據自己的喜好通過定義css輕易的改變這些標題標籤的樣式— 舉例來說,未必一定是佔據了半塊螢幕的龐然大物,稍後,我會示範如何簡單的用css樣式來定義標題標籤,以此來幫助你克服對的恐懼.
對搜尋引擎的友好
這是最大的優點.搜尋引擎十分喜歡標題標籤,標籤或段落中的粗體對搜尋引擎來說並沒有多大意義,使用正確的~標記標題花不了多少時間,但是卻能幫助搜尋引擎為你的頁面建立索引,讓用戶更容易找到你的網頁.
搜尋引擎的機器人非常重視標題標籤中的內容,或許,你會想要在裡面堆上幾個關鍵字,在他們處理完和<meta>標籤之後,緊接著就會處理頁面內容中的標題標籤,如果你的頁面上沒有使用標題標籤的話,那這些在你的標題中的關鍵字不會引起他們的重視,被他們忽略.<br>所以,只需要花少少的時間,就能讓其他人更容易透過內容找到你的網頁,聽起來不錯,對吧?<br><strong>附帶一提的標籤順序</strong><br>在上面的範例中,在頁面中最重要的就是標題,因為他是整個文件的標題,因此,我們將使用最重要的標題標籤<h1> ,根據W3C,有些人認為跳過標題層並不是什麼好習慣,舉例說明,假設我們有下面這麼一份網頁:<br><span class="code"><h1>Super Cool Page Title</h1></span><br>那麼下一個標題(如果不是另一個<h1>的話),就應該是<h2>,在接下去則使用<h3>等等,你也許不會跳過某級標題,比如說在<h1>之後直接使用<h3>.我比較贊同,並且認為結構和綱要相同,應該按照順序使用每個級層,這能讓你為已經存在的頁面方便的添加標題,樣式.同時這樣也比較不會出現用完所有標題級層的情況.<br>如同先前所述,設計者可能會使用<h4>代表頁面裡最重要的標題,只因為它的預設字體大小不如<h1>那樣大的恐怖.但是要記住,先寫結構,再調整樣式,我們可以在任何時候根據我們自己的喜好通過css改變標題標籤的字體大小.<br>
#p#<br><strong>概要</strong><br>讓我們大致上回顧一下,為什麼使用標題標籤(<h1>到<h6>)來標記頁面內的標題會比較好.<br><strong>方法A:</strong><br>可視化瀏覽器會在禁用或不支援css功能時,以一般文字相同的樣式顯示標題,非視覺瀏覽器則完全不知道標題和內文文字之間的差別. <br>搜尋引擎不會特別重視以<span>標記的標題<br>我們能製定獨特的樣式,但是我們在新增標題時,卻會被heading類困死.
<br><strong>方法B:</strong><br>視覺化瀏覽器只會用粗體顯示內容,繼續使用預設的字體大小. <br>我們無法為標題加上和內文不同的獨特樣式<br>搜尋引擎同樣不會特別重視以<p>所建立的標題的內容.
<br><strong>方法C:</strong><br>傳達了標題標籤中的文字確切的含義. <br>不管是可視化還是非可視化瀏覽器不管讀到什麼樣式都會正確的處理標題內容<br>搜尋引擎會重視標題標籤中的關鍵字.<br><strong>技巧延伸</strong><br>這裡我們將採用方法C,並用它來實驗一些簡單的css樣式.我們將完全發揮標題標籤獨特性的優勢.我們可以非常安心的使用標題標籤,因為不管在什麼瀏覽器和設備上,都能正確的處理標題內容.接下來我們來給他裝扮裝扮,然後帶它上街(如果你能夠帶著一個html標籤上街的話....)<br><strong>簡單的樣式</strong><br>使用css,最簡單最容易實現的效果就是為標題設置不同的字體.我們可以寫一個css規則,然後套用到頁面中所有的</p>
<h1>標籤上(如果你用到了外部樣式表,那就可以把樣式套用到整個網站上).如果在稍後的時間裡想要改變整個網站裡每個<h1>的顏色,大小或字體,那麼只需要修改幾條css規則就行了,而且修改之後的效果能夠馬上看到!這聽起來很誘人,對吧?<br>讓我們超酷的標題來告訴我們自己吧:<br><span class="code"><h1>Super Cool Page Title</h1></span><br>讓我們用css來改變它的顏色,字體和大小吧:<br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #369;<br> }</span><br>就像我們剛才所說的,非常簡單,整個頁面的所有<h1>都被設定成24像素大小,藍色的Arial(或者預設的sans-serif)字體,如圖2-2:<br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/d403782309c7ce2ffc51499ef1aa3159-1.gif"><br>圖2 -2: 標題樣式範例<br>接下來我們繼續在標題文字下面加上1像素寬的灰色邊框(如圖2-3):<br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #369;<br> padding-bottom: 4px;<br> border-bottom: 1px solid #999;<br> 🎜></span><br>圖2-3:加上灰色底邊的標題樣式範例<img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-2.gif">我們在文字底部多留了些內補丁,使得下面的邊線不至於呼吸困難.因為標題標籤是區塊級元素,因此邊框會不止填滿文字底部,還會繼續向右邊延伸,直到填滿整個頁面寬度.<br>另外值得一提的是,我們使用了邊框的簡寫法— 就是在一條聲明中同時定義了寬度,樣式,顏色.你可以試試看其他的設定值,看看有什麼別的效果.<br>
#p#<br><br>加上背景<br><strong>背景能給標題加上精巧的效果.只要加上背景色與一些留白,不需要用到圖片我們就可以創造出清新的標題風格.舉例來說:</strong><br>h1 {<br> font-family: Arial, sans-serif;<span class="code"> font-size: 24px;<br> color: #fff;<br> padding:> padding 4px;<br> background-color: #696;<br> }<br><br>我們把標題中的文字變成白色,周圍留出4像素的內補丁空間,同時把背景改成綠色.如圖2-4那樣,會有一條寬大的,顏色如同撞球桌的綠帶貫穿整個頁,分割兩個段落.</span><br><br>圖2-4:設定了內補丁和背景色的標題範例<img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-3.gif"><br>背景和邊框<br><strong>只要在標題下面加上一條細邊框,再配上淺色背景,你就能不用一張圖片的情況下做出三維的效果.</strong>這份css與上面的十分類似,只改了幾個顏色,在底部加上了2像素的邊框<br><br>h1 {<br> font-family: Arial, sans-serif; <span class="code"> font-size: 24px;<br> color: #666;<br> padding: 4px;<br> background-color: #ddd;<br> border-bottom: 2px solid #cccc; <br><br>藉著使用不同亮度的相同顏色,就能做出如圖2-5般逼真的三維效果:<br></span><br>圖2-5:設定背景和底邊的標題<br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-4.gif">平鋪背景<br><br>用上圖片的話,就能發揮更多的創意了.就讓我們用photoshop創建一個10X10的小圖片,最上面是黑色的邊框,然後下面是從上到下的灰色梯度(如圖2-6):<strong><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-5.jpg"><br>圖2-6 用Photoshop建立的小圖片<br>我們可以用css把這個小圖片放到我們的<h1>底部去:<br><span class="code">h1 {<br> font- family: Arial, sans-serif;<br> font-size: 24px;<br> color: #369;<br> padding-bottom: 14px;<br> background: url(10x10.gif) repx10.gif); <br> }</span><br>設定repeat-x 讓瀏覽器在平鋪背景圖的時候只在水平方向上排列(相對的repeat-y就是在垂直方向上排列),同時我們設定了將圖片放置在標題的底部,並加上一些下部內補丁,以便調整圖片和標圖文字之間的距離(如圖2-7)<br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-6.jpg"><br>圖2-7:設定平鋪背景的標題範例<br><strong>方便替換的圖示</strong><br>我們也可以使用cssdebackground屬性來設定放在文字左邊的小圖示以此來取代寫死圖片標籤的方法,為標題加上裝飾用的小圖示.這個方法能使在未來的日子裡改變網站顯示效果的工作變得十分輕鬆—只需要替換那麼一個css規則,就能同時改變整個網站的顯示效果.<br>程式碼和上面的平鋪背景大致相同:<br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #369;<br> padding-left: 30px;<br> background: url(icon.gif) no-repeat 0 50%;<br> }</span><br>我們在文字的左邊多留出一塊空間以便防止我們想要的圖示,然後設定no-repeat指定背景圖片不進行平鋪(如圖2-8),同時我們希望圖示的位置在據左邊0像素,並且對起垂直中線.<br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-7.jpg"><br>圖2-8:設定了圖示的標題範例<br>
#p#<br><strong>容易更新</strong><br>讓我們設想這樣一個場景:在一個包含了100個頁面的網站裡,我們沒有使用上面的方法,而使用<img alt="標記語言－標題_HTML/Xhtml_網頁製作" >標籤寫死每個標題旁邊的圖標,圖標和網站風格是相融合的,幾個星期後,網站的主人打算換掉網站風格,而新的圖標大小和舊的並不一樣,哎呦!這下我們就得回去修改整整100份頁裡面的<img alt="標記語言－標題_HTML/Xhtml_網頁製作" >標籤以更新新圖標的路徑,真討厭!想想這些事件會對項目預算造成怎樣的影響,對完工期限帶來多大的壓力?時間就是金錢啊!<br>如果把這些並不十分重要的,裝飾性的圖標整合到一個css文件中,只要花上幾分鐘就能夠一次性換掉整站的所有圖標,帶來嶄新的外觀!由此你應該可以漸漸明白結構標記和顯示效果分離的好處了吧.<br><strong>變色龍效果</strong><br>下來的技巧和我剛才所說的有一些矛盾,但是我認為這個技巧在某些情況下是十分有用的.這是我在2003年4月為Fast Company雜誌的網站(www.fastcompany.com)做標準重構時大量使用的技巧.<br>那時我們在網站裡的<h3>標籤旁邊用了許多13X13的小圖示,就像這樣:<br><span class="code"><h3>
<img src="http://images.fastcompany.com/icon/first_imp.gif" style="max-width:90%" style="max-width:90%" alt="標記語言－標題_HTML/Xhtml_網頁製作"> FIRST IMPRESSION</h3></span><br>有兩個讓我們決定要這樣把圖標寫死在網頁裡面.首先,根據標題種類的不同,我們會使用到不同的圖標(圖書俱樂部是一本書,每日引言則是引號等等),第二個理由則是我們每個月會更換一次整個網站的配色,以配合當期雜誌的封面主題.當然,這種替換工作因為使用了css而變得十分簡單.<br>為了讓圖標跟著其他頁面元素一起變色(這樣才不必一直為了新色彩而重新製作圖標),我們只用兩種顏色做了一組圖示:白色和透明(會顯示除每次變更的背景顏色).圖2-9就是放在首頁引言之前的圖示:<br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-8.jpg"><br>圖2-9: 13X13的透明圖示(放大後)<br>為了在透明部分填進顏色,我們使用了簡單的css的background屬性設定顏色,我們希望只希望這個顏色出現在圖表的後面而不出現在標題文字後面,我們用到了css選擇器只對<h3>標籤內的圖片使用這條規則,以便達到我們想要的效果:<br><span class="code">h3 img {<br> background: #696;<br> }</span><br>這段css程式碼表示<h3>標籤內的所有<img alt="標記語言－標題_HTML/Xhtml_網頁製作" >標籤都把背景設為綠色,背景色會透過透明像素顯示出來,但是白色部分仍然還是白色,如此一來,每個月只需要修改這條css規則,換上不同的顏色,就能瞬間改變網站上每個圖標的色彩了,就像變魔術一樣.<br><strong>對齊<img alt="標記語言－標題_HTML/Xhtml_網頁製作" >標籤</strong><br>為了使圖標和文字正確的對齊(我們希望垂直居中),因此我們加上了這條css規則:<br><span class="code">h3 img {<br> background: #696;<br> vertical-align: middle;<br> }</span><br>這條規則會使圖示和<h3>文字內容垂直居中,圖2-20就是設定玩的標題:<br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-9.gif"><br>圖2-10:以css為圖示加上背景色的範例<br>這個範例還能說明另一個重要的概念—以css指定背景色彩會出現在任何頁面內指定的圖示或是css圖示後面.<br>舉例來說,我們回頭看看"方便更新的圖示"這個範例,為它加上背景色看看:<br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px ;<br> color: #fff;<br> padding-left: 30px;<br> background: #696 url(transparent_icon.gif) no-repeat 0 50%;<br> }</span>gif) no-repeat 0 50%;<br> }<br>gif<img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-10.jpg">如此以來<br><br>圖2-11 設定了背景圖,背景色的標題範例<strong>當你為了考慮色彩為主的頁面上加小圓角,裝飾圖示時,這個小技巧就十分好用了.這些不重的圖片可以完全放進css檔案裡面,未來打算更新的時候也就可以輕鬆替換.現在多用點心思.就能節省未來許多的工作.</strong><br>總結</h3>
</h3>
</h3>
</h3>
</h1></strong>
</h1>
</h1>
</h1></span>
</h6>
</h1>
</h1>
</h4>
</h3>
</h1>
</h3>
</h2>
</h1>
</h1>
我希望透過比較集中常用的方法後,你能發覺正確使用標題標籤的好處.不管是視覺,非視覺瀏覽器或者其他設備,都能正確的歷屆標題的含義,並且以適當的方法展現它們,搜索引擎也會為他們建立索引,你也可以輕鬆的以css應用和修改需要顯示的效果.
