Download
1 / 34
340 likes | 448 Views
P303. 專業 HTML 網頁設計. HTML/DHTML/CSS/JavaScript. 陳錦輝. 第四章 網頁背景與文字排版. 4.1 版面排版 (<body>) 4.2 文字排版 4.3 多功能文字排版 (<font>) 4.4 網頁 DIY. 4.1 版面排版 (<body>). 本節將更深入地介紹< body> 控制標籤，並且透過< body> 標籤的眾多屬性來改變整個網頁的背景。以下是< body> 標籤的常用屬性列表：. < body> 常用屬性列表. 圖4-1 6位數16進制的顏色表示法.
E N D
P303 專業HTML網頁設計 HTML/DHTML/CSS/JavaScript 陳錦輝
第四章 網頁背景與文字排版 • 4.1 版面排版(<body>) • 4.2 文字排版 • 4.3 多功能文字排版(<font>) • 4.4 網頁DIY
4.1 版面排版(<body>) • 本節將更深入地介紹<body>控制標籤，並且透過<body>標籤的眾多屬性來改變整個網頁的背景。以下是<body>標籤的常用屬性列表： <body>常用屬性列表
圖4-1 6位數16進制的顏色表示法 4.1.1 <body> - bgcolor屬性 • 背景顏色所依靠的是<body>標籤的bgcolor屬性，來設定想要的顏色。 • 在HTML中，顏色的表示方法可以分為兩大類： • (1)英文表示法(或稱為關鍵字表示法)，也就是直接以顏 色的英文名稱加以設定。
4.1.1 <body> - bgcolor屬性 • (2)16進制表示法，以6位數16進制的數值來表示顏 色，表示法『紅、綠、藍』3原色的調色方式所構 成。 • 前兩位數代表的是『紅色』的成分、中間兩位數代表的是『綠色』的成分、最後兩位數代表的是『藍色』的成分，數值由000~255，也就是16進制的00~FF。 • 其中成分越高者數值越大，因此，就像調水彩一樣，當我們改變了3原色的比例之後，就會形成許多種顏色，總共的變化應該有16777216種顏色。
4.1.1 <body> - bgcolor屬性 圖4-2 常見的顏色及顏色表示法
4.1.1 <body> - bgcolor屬性 • 範例4-1： • 內容執行結果 • 範例4-2： • 內容執行結果
4.1.2 <body> - background屬性 • 透過<body>標籤的background屬性可以將某一張圖片設定為網頁的背景圖片。 • 為了避免瀏覽器無法接受某些圖片格式，因此圖片格式最好選用JPEG(.jpg)及GIF(.gif)格式的圖檔。 • 範例4-3： • 內容執行結果
4.1.3 <body> - text屬性 • 使用<body>的text屬性可變更所有的文字顏色，顏色的設定方法同樣有16進制表示法與關鍵字表示法兩種。 • 範例4-4： • 內容執行結果
4.1.4 <body> - bgproperties • 只要將<body>標籤的bgproperties屬性設為『fixed』，背景圖片就不會隨著垂直捲軸移動。 • 只對於IE瀏覽器生效，Netscape瀏覽器則不支援該屬性。且該屬性並非HTML/XHTML的標準屬性。 • 範例4-5： • 內容執行結果
4.1.5 <body> - leftmargin屬性 • <body>標籤可以設定網頁的上邊界、左邊界與瀏覽器視窗的距離。 • leftmargin可設定文件內容左邊界至瀏覽器左邊界的距離。 • 範例4-6： • 內容執行結果
4.1.6 <body> - topmargin屬性 • Topmargin可以設定文件內容上邊界至瀏覽器上邊界的距離。 • 範例4-6： • 內容執行結果
4.2 文字排版 • 除了可以透過<body>的text屬性來設定整個網頁文字的顏色之外，針對網頁中個別文字的部分，也可以利用許多的HTML控制標籤來設定文字的字型變化。 • 在HTML中，一般字型的設定可以分為兩大類標籤：實體字型控制標籤與邏輯字型控制標籤。 • 這兩種標籤同樣都可以達到某些字型的設定，如下表：
4.2 文字排版 HTML字型設定標籤
4.2.1 <h?>(文字標題標籤) • HTML設計了6種的標題控制標籤，分別是<h1>、<h2>、<h3>、<h4>、<h5>、<h6>，統稱為<h?>文字標題標籤。 • <h?>中的數字與標題字型大小恰好成反比，也就是說，當數字越大時，字型卻越小。 • 除了會將字型的大小產生變化，字體也會加粗，<h?>開始前與結束後都會產生自動換列現象，以突顯標題。
4.2.1 <h?>(文字標題標籤) • 屬性algin可以設定標題對齊方式。 • 屬性值： • left：標題靠左對齊。(預設值) • center：標題置中對齊。 • right：標題靠右對齊。 • 範例4-7： • 內容執行結果
4.2.2 <b>、<strong> • <b>、</b>與<strong>、</strong>都是成對標籤，在起始標籤至結束標籤內的文字會以粗體顯示。 • 範例4-8： • 內容執行結果
4.2.3 <i>、<em>、<var>、<cite> • <i>、</i>，<em>、</em>，<var>、</var>，<cite>、</cite>都是成對標籤，在起始標籤至結束標籤內的文字會以斜體顯示。 • 範例4-9： • 內容執行結果
4.2.4 <u> • <u>、</u>是成對標籤，在起始標籤至結束標籤內的文字會加上底線顯示。 • 範例4-10： • 內容執行結果
4.2.5 <s>、<strike> • <s>、</s>與<strike>、</strike>都是成對標籤，在起始標籤至結束標籤內的文字中間會加上一條水平線，加上這條水平刪除線可以當作改錯之用。 • 範例4-11： • 內容執行結果
4.2.6 <tt> • <tt>、</tt>是成對標籤，在起始標籤至結束標籤內的文字會略為縮小。 • 範例4-12： • 內容執行結果
4.2.7 <big> • <big>、</big>是成對標籤，在起始標籤至結束標籤內的文字會被放大一級。例如：原本字型大小等級為3，就會被放大為等級4的字型大小。 • 範例： • 內容執行結果
4.2.8 <small> • <small>、</small>是成對標籤，在起始標籤至結束標籤內的文字會被縮小一級。例如：原本字型大小等級為3，就會被縮小為等級2的字型大小。 • 範例4-13： • 內容執行結果
4.2.9 <sub> • <sub>、</sub>是成對標籤，在起始標籤至結束標籤內的文字被顯示成下標。 • 範例4-14： • 內容執行結果
4.2.10 <sup> • <sup>、</sup>是成對標籤，在起始標籤至結束標籤內的文字會被顯示成上標。 • 範例4-15： • 內容執行結果
4.2.11 <blink> • <sup>、</sup>是成對標籤，在起始標籤至結束標籤內的文字會被顯示成上標。 • 範例4-16： • 內容執行結果
4.2.12 特殊字型標籤 • 除了上述的標籤之外，HTML尚有一些較少用到的特殊字型標籤，其功能如下表： • 範例4-17： • 內容執行結果 罕用的字型標籤列表
4.2.13 <basefont> • 在設定文字大小時，可以直接指定字型大小的等級，所以比起<big>、<small>來得更加方便許多。 • <basefont>標籤也可以配合下一節所介紹的<font>標籤產生更多樣的字型變化。 • 範例4-18： • 內容執行結果 • 範例4-19： • 內容執行結果
4.3 多功能文字排版(<font>) • <font>標籤的特色是，只需要一個標籤就改變文字的『大小』、『顏色』、『字體』。 • 使用<font>標籤設定字體時，由於許多字體並非瀏覽器本身所擁有，因此必須要瀏覽者的電腦中裝有該字體，才能夠正確地以我們所希望的字體顯示於瀏覽器中，否則就會改以電腦預設字體顯示。
4.3.1 <font> - size屬性 • size屬性可以用來設定文字大小等級，它有兩種設定方法：絕對設定與相對設定。 • 絕對設定指的是直接指定文字大小的等級(由1~7)，相對設定則是針對目前字型大小相對放大或縮小幾個等級，而目前字型大小則是由<font>標籤或<basefont>標籤的作用範圍決定。 • 範例4-20： • 內容執行結果 • 範例4-21： • 內容 執行結果
4.3.2 <font> - color屬性 • color屬性可以用來設定文字的顏色，它同樣可以使用16進制顏色表示法及關鍵字顏色表示法來設定屬性值。 • 範例4-22： • 內容執行結果
4.3.3 <font> - face屬性 • 透過face屬性來設定文字的字體(或稱為字型)，例如：標楷體、仿宋體等等。 • 範例4-23： • 內容執行結果
4.4 網頁DIY • 請翻閱至18.4節，在18.4節中，將原本單調的DIY網頁改造成一個有漂亮背景以及各種字型變化的網頁。
