HTML字型设定标签.PPT

第四章 網頁背景與文字排版 在本章中，我們將針對網頁背景與文字變化有關的標籤加以說明。經過本章的學習，我們的網頁就可以包含字體顏色、大小、字型等變化，並且可以任意地改變網頁的背景，有了這些變化，我們的網頁就變得漂亮多了。 在這一章中，我們將重點放在網頁背景與文字的排版。一個好的背景不但使得網頁生動活潑，並且可以帶給瀏覽者舒適感。而文字的排版則可以突顯網頁內容，透過不同字型的表達，使得您的網頁美觀大方。 大綱 4.1 版面排版（body） 4.1.1 body－bgcolor屬性（背景顏色） 4.1.2 body－background屬性（背景圖片） 4.1.3 body－text屬性（文字顏色） 4.1.4 body－bgproperties屬性（固定背景圖片） 4.1.5 body－leftmargin屬性（設定網頁左邊界） 4.1.6 body－topmargin屬性（設定網頁上邊界） 大綱 4.2 文字排版 4.2.1 h?（文字標題標籤） 4.2.2 b、strong（粗體標籤） 4.2.3 i、em、var、cite（斜體標籤） 4.2.4 u（底線標籤） 4.2.5 s、strike（刪除線標籤） 4.2.6 tt（細小字型標籤） 4.2.7 big（加大字型標籤） 4.2.8 small（縮小字型標籤） 4.2.9 sub（設為下標標籤） 4.2.10 sup（設為上標標籤） 4.2.11 blink（文字閃爍標籤） 4.2.12 特殊字型標籤 4.2.13 basefont（預設字型標籤） 大綱 4.3 多功能文字排版（font） 4.3.1 font－size屬性（文字大小設定） 4.3.2 font－color屬性（文字顏色設定） 4.3.3 font－face屬性（字體設定） 4.1 版面排版（body） 在這一章之前，所有的範例都是以簡單的白色做為網頁底色，因此顯得十分地單調。在這一節中，我們將更深入地介紹body控制標籤，並且透過body標籤的眾多屬性來改變整個網頁的背景。以下是body標籤的常用屬性列表： 4.1.1 body－bgcolor屬性（背景顏色） HTML網頁預設的背景顏色是白色，但我們也可以將之設定為其他種顏色，改變背景顏色所依靠的是body標籤的bgcolor屬性。 由於這是我們第一次設定顏色屬性，因此，必須先說明一下顏色的表示方法。 在HTML中，顏色的表示方法可以分為兩大類： (1)英文表示法（或稱為關鍵字表示法），也就是直接以顏色的英文名稱加以設定，例如：green（綠色）、pink（粉紅色）。 (2)16進制表示法，以6位數16進制的數值來表示顏色，例如：0000FF（藍色）、FFFF00（黃色）等等。 4.1.1 body－bgcolor屬性（背景顏色） 問題是我們怎麼知道每一種顏色的16進制表示法呢？其實很簡單，6位數16進制顏色表示法是基於『紅、綠、藍』3原色的調色方式所構成 前兩位數代表的是紅色的成分 中間兩位數代表的是綠色的成分 最後兩位數代表的是藍色的成分 數值由000~255，也就是16進制的00~FF，其中成分越高者數值越大 就像調水彩一樣，當我們改變了3原色的比例之後，就會形成許多種顏色，總共的變化應該顏色。 4.1.1 body－bgcolor屬性（背景顏色） 4.1.1 body－bgcolor屬性 （背景顏色） 【技巧】： 如果您覺得調色並非一件容易的事情，而希望直接由顏色外觀來選取顏色。這個時候，您可以藉助小畫家或Word等的字型顏色設定功能，先選取所需要的顏色，然後就可以查到該顏色中『紅、綠、藍』所佔的顏色數值 該數值如果是10進位的表示法，則可以再藉助於小算盤（切換至工程型功能）求得16進制的表示法。 （A代表10、B代表11、、、、。） 4.1.1 body－bgcolor屬性 （背景顏色） 標籤屬性：body－bgcolor屬性。 功能：設定背景顏色。 格式： 或 範例4-1： 內容 執行結果 範例4-2： 內容 執行結果 4.1.2 body－background屬性（背景圖片） 如果您覺得光是設定HTML網頁背景的顏色仍顯得不夠炫麗的話，我們還可以透過body標籤的background屬性，將某一張圖片設定為網頁的背景圖片。 值得注意的是，為了避免瀏覽器無法接受某些圖片格式，因此圖片格式最好選用JPEG（.jpg）及GIF（.gif）格式的圖檔。網路上有許多提供背景圖案的網站，讓我們在背景圖案的取材上，有了更多的選擇。在此強調，大部分的網站所提供的圖片都是非商業