close

body 是 HTML 文件的一個上層結構,用來放置及定義要呈現的網頁內容(文字和影像),所有要呈現的網頁應該都要放置在 body 標籤裡面,body 標籤本身具備許多的參數可供使用,這讓定義網頁內容時能有更多的變化。


參數

Align [Left(預設)| Center | Right |]
指定此標籤區塊內容相對於瀏覽器視窗的水平對齊方式。

在 HTML 3.2 時所引進的參數,不過大部分的瀏覽器都不支援,
建議不要使用這個參數,用了也沒用,又增加瀏覽器的讀取時間。
範例:
<body align="center">



link,Alink,vlink
link 指定滑鼠未點擊超連結前,連結文字所要呈現的色彩。
alink 指定當滑鼠點擊超連結瞬間,連結文字所要呈現的色彩。
vlink 指定當滑鼠點擊超連結後,連結文字所要呈現的色彩。

當網頁開啟完畢,超連結色彩就會恢復成原來的色彩,
這裡所謂的原來的色彩,指的是「點擊過後的色彩」,
而非最原始的色彩,如果兩者顏色設定相同自然就相同了。

這裡設定顏色的方式是使用色碼的方式如 #336699,
跟一般影像軟體使用數值的方式不太一樣,
如RGB色彩模型的紅色是(255,0,0),CMYK則是(0,100,0,0)或(0,100,100,0)
色碼的表示法是16進位的,每兩位數代表一個顏色,
所以#336699,33代表 R(紅色),66代表(綠色),99代表B(藍色),
不過也只是數值轉換而已,我們只要把10進位換成16進位的就可以了。

這裡需要一點電算機概論的知識,不過也很簡單,我就大概說一下。
10進位的模式是1,2,3,4,5,6,7,8,9,10,11,12.....,每10位數進一位。
16進位的模式是1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,10,11....,每16位數進一位,
16進位跟10進位不同的是,原本在10進位表示10,11,12,13,14,15的數字,
在16進位是用 a,b,c,d,e,f 取代,所以 a 代表10進位的 10 ,e 代表10進位的 14 ,
12 代表10進位的 18 而不是12。
所以當你要將10進位的色值轉換成16進位的色螞,只要將它除以16後,
左邊填上商數右邊加上餘數就可以了,只是兩者都必須使用16進位的表示法。
比如紅色(255,0,0)轉換成色碼就是 255/16=15(商)...15(餘數)
將兩者都轉成16進位的表示法,就是f...f,所以10進位的255用16進位表示就是 ff,
由於另外兩個數值都是0,16進位自然也是0,連算都不用算,色碼表示法就是 #ff0000。
範例:
<body link="#000000">
<body link="#ff0000" alink="#00ff00" vlink="#0000ff">



Background
設定網頁的背景圖片,如果背景圖片小於瀏覽器視窗大小,
圖片會依據網頁內容,自動由左字右,由上至下,重複貼圖貼滿。
在視覺上,你會感覺到背景圖片是跟著文字一起在移動的。
如果圖片並非在根目錄下,那就還要指定相對路徑。
從其他網站擷取過來就要設定絕對路徑。
範例:
<body background="i001.jpg">
<body background="images/i001.jpg">
<body background="http://kikicocopapaya.pixnet.net/blog/i001.jpg">



BGProperties [fixed]
這個設定需要和background一起用,主要用來是將網頁背景圖片固定,
雖然一樣會自動填滿不足的空間,但是畫面下拉時,只會固定在最大畫面,
視覺上,圖片不會隨著移動,像浮水印的效果。
範例:
<body background="watermark.jpg" bgproperties="fixed">


BGColor
設定網頁背景色,如果同時使用background 和 bgcolor,
background 的效果會蓋過bgcolor,但是如果背景圖片是具備透明的圖片,
那麼背景色彩就會在這些透明的部份顯示出來。
範例:
<body bgcolor="#336699">
<body bgcolor="#000000">
<body bgcolor="#ffffff">



BottomMargin,LeftMargin,RightMargin,TopMargin
這四個都是用來設定網頁底部邊界範圍,也就是邊緣留白的空間大小。
可以一次只設定一個或是四個都設定,沒有限制,單位為像素。
沒有設定的時候,文件內容邊界範圍就是從畫面四周開始算起,
但是當設定了這四個其中一個參數時比如leftmargin為1時,
那麼起始點就要從畫面最左邊再加1個像素算起,
以左上角的起始點來說應該是(0,0),可是當設定了leftmargin為1時,
左上角起始點就變成(1,0),其餘依此類推。
有些瀏覽器預設讀取網頁時,邊緣會留一些空間,
為了讓畫面更緊實和完美,還是需要設定一下會比較好,
範例:
<body leftmargin="0" rightmargin="0" topmargin="0">
<body bottommargin="1" leftmargin="2" rightmargin="3" topmargin="4">



Scroll [yes(預設),no]
設定頁面是否可以捲動,預設是可以,
除非版面配置有需求,應該不會關掉。
由於預設已經開啟,所以不需要另外去設定 yes 。
範例:
<body scroll="no">


Text
設定網頁文字的預設顏色,可以使用 Font 標籤的 color 屬性來取代設定。
範例:
<body text="#336699">


所有的標籤都可以並用,範例:
<body BACKGROUND="image.gif" BGPROPERTIES="fixed" TEXT="#ff0000" LINK="#ffff00">


- HTML 4.0 已經改變了 BODY 標籤和頁框文件之間的互動方式。在 HTML 4.0 之前,
  一個框架規格的文件,可以包含一個 HEAD 標籤和一個 FRAMESET 標籤。
  無法支援框架的說明就放在FRAMESET結構內的 NOFRAMES 裡的 BODY 標籤內。
  但是到了 HTML 4.0 ,BODY 則必須放在最上面的位置,
  像這種先 HEAD ,接著 FRAMESET ,最後才是 BODY 的頁框文件,
  不知道現有瀏覽器架構是否已經找出因應的方法了沒。

- 因為 background 參數需要額外的 HTTP 請求,下載圖形的時間會比預期還多一些。

- 當設定 background 參數後,最好再設定一個 BGColor 參數。
  所挑選的顏色最好能和文字有足夠的對比,以因應偶發的背景圖片讀取失敗的情形。
  如果不知道如挑選對比色高的顏色,可以挑選和背景圖片裡面最主要顏色相近的顏色。

- 在設定 BGColor 參數之後,最好也將文字和連結的色彩一併調整,
  以確保文字和連結色彩都能夠在背景色彩之下,清楚的呈現出來。

- 部份瀏覽器必須等到網頁背景圖片下載完畢才會先顯示完整的網頁內容,
  而不會先顯示文字的部份。

- 如果背景圖片因為一些原因而無法讀取,並且網頁並沒有設定任何的 BGColor,
  瀏覽器將忽略所有的自訂連結色彩,並使用預設的顯示色彩,
  以確保網頁內容(文字)能清楚的被呈現出來。

- 不管是網景(Netscape)還是網際網路探險家(Internet Explorer),
  在他們的版本4.0測試2版問世之前,並無法使用動態 GIF檔最為背景圖片。
  因此有得時候會有只顯示第一張圖片或甚至不顯示的情形出現。
  警告:儘管現在已經可以使用了,還是請「謹慎」使用。
  因為這類圖片所帶來重複顯示的效果可能會帶給瀏覽網業者閱讀文字上的干擾,
  其干擾程度甚至超過五彩繽紛的文字色彩設定或是頻繁的跑馬燈。

- ALINK 參數有趣的地方在於當初網景連同它和其他參數在1.1的時候一起被開發出來,
  其他參數很快的就被其他瀏覽器所接受適用,惟獨它例外。

- 早期網景的1.1版本曾經出現過一個臭蟲或特色?這種臭蟲導致了一種「閃爍」的效果,
  當你在網頁中連續放置的 BODY 標籤,並分別設置了 BGCOLOR ,當瀏覽器在解讀時,
  會解讀所有的 BODY 標籤,因此,第一塊 BODY 標籤讀完時顯示底色為紅色,再往下,
  解讀第二塊 BODY 標籤時因為設定底色為綠色,於是又會將底色改為綠色,
  而造成底色會一直變換顏色,形成一種「燈光閃爍」效果。
  當然這個臭蟲被發現沒多久後就被修正掉了,但其實作者自己認為這是意料外的驚喜,
  認為這不算是一種臭蟲,而應該是一種特色,實際上它也流傳了一陣子。

- Left/Top/Right/BottomMargin 參數在網際網路探險家(Internet Explorer)裡,
  控制的是網頁文件邊緣的空白,「不是」視窗邊緣的空白。

- 要在網景瀏覽器裡讓跨頁框的影像接合邊緣不會出現空白,
  將 MARGINHEIGHT 和 MARGINWIDTH 參數值都設為 0 ,可能是唯一的辦法。

- HEIGHT 和 WIDTH 參數是在 Opera(歐普拉) 4.0(或以上),
  用來指定 BODY 標籤內所要呈現的網頁內容範圍大小,
  但瀏覽器似乎因為一些因素而一直無法實現。

資料來源  Blooberry  翻譯整理 / 克里西熊

arrow
arrow
    全站熱搜

    ALVIN 發表在 痞客邦 留言(0) 人氣()