HTML頁面佈局與文字設計

原文:HTML頁面佈局與文字設計 

簡單規劃HTML頁面佈局與文字設計即時通訊

標題

  一般文章都有標題、副標題、章和節等結構,HTML中也提供了相應的標題標籤,其中n爲標題的等HTML總共提供六個等級的標題,n越小,標題字號就越大,以下列出所有等級的標題:

〈H1>…     第一級標題

〈H2>…     第二級標題

〈H3>…     第三級標題

〈H4>…     第四級標題

〈H5>…     第五級標題

〈H6>…     第六級標題

請看下面的例子:

 

 

 

 

 

這是一行普通文字

〈H1>一級標題

〈H2>二級標題

〈H3>三級標題

〈H4>四級標題

〈H5>五級標題

〈H6>六級標題

 

 

換行

  在編寫HTML文件時,我們不必考慮太細的設置,也不必理會段落過長的部分會被瀏覽器切掉。因爲,在HTML語言規範裏,每當瀏覽器窗口被縮小時,瀏覽器會自動將右邊的文字轉折至下一行。所以,編寫者對於自己需要斷行的地方,應加上
標籤。

段落標籤

  爲了排列的整齊、清晰,文字段落之間,我們常用

來做標記。文件段落的開始由

來標記,段落的結束由

來標記,是可以省略的,因爲下一個

的開始就意味着上一個

的結束。

  

標籤還有一個屬性ALING,它用來指名字符顯示時的對齊方式,一般值有CENTER、LEFT、RIGHT三種。

  下面,我們用兩個例子來說明這個標籤的用法。

 

 

 

 

 

 

 

浣溪沙 

一曲新詞酒一杯,去年天氣舊亭臺,夕陽西下幾時回。

無可奈何花落去,似曾相識燕歸來。小園香徑幾徘徊。

 

 

水平線段


  這個標籤可以在屏幕上顯示一條水平線,用以分割頁面中的不同部分。


有三個屬性:


   size 水平線的寬度

   width 水平線的長,用佔屏幕寬度的百分比或象素值來表示

   align 水平線的對齊方式,有LEFT RIGHT CENTER三種

   noshade 線段無陰影屬性,爲實心線段

  我們可以用幾個例子來說明這線段的用法:

HTML頁面佈局與文字設計線段粗細的設定


 

 

 

 


 

 

這是第一條線段,無size設定,取內定值SIZE=1來顯示

 


 

這是第二條線段,SIZE=5

 


 

這是第三條線段,SIZE=10

 


 


 

HTML頁面佈局與文字設計線段長度的設定

 

 

 

 


 

 

這是第一條線段,無WIDTH設定,取WIDTH內定值100%來顯示

 


 

這是第二條線段,WIDTH=50(點數方式)

 


 

這是第三條線段,WIDTH=50%(百分比方式)

 


 


 

HTML頁面佈局與文字設計線段排列的設定


 

 

 

 


 

 

這是第一條線段,無ALIGN設定,(取內定值CENTER顯示)

 


 

這是第二條線段,向左對齊BR>

 


 

這是第三條線段,向右對齊

 


 


 

HTML頁面佈局與文字設計無陰影的設定


 

 

 

 


 

 

這是第一條線段,無NOSHADE設定,取內定值陰影效果來顯示

 


 

這是第二條線段,有NOSHADE設定

 


 


 

文字的大小設置

  提供設置字號大小的是FONT,FONT有一個屬性SIZE,通過指定SIZE屬性就能設置字號大小,而SIZE屬性的有效值範圍爲1-7,其中缺省值爲3。我們可以SIZE屬性值之前加上“+”、“-”字符,來指定相對於字號初始值的增量或減量。

  請看示例:

 

 

 

 

 

這是size=7的字體

這是size=6的字體

這是size=5的字體

這是size=4的字體

這是size=3的字體

這是size=2的字體

這是size=1的字體

這是size=-1的字體

 

 

文字的字體與樣式

  HTML4.0提供了定義字體的功能,用FACE屬性來完成這個工作。FACE的屬性值可以是本機上的任一字體類型,但有一點麻煩的是,只有對方的電腦中裝有相同的字體纔可以在他的瀏覽器中出現你預先設計的風格。

  

請看例子:

 

 

 

 


 

 

歡迎光臨

歡迎光臨

歡迎光臨

歡迎光臨

Welcom my homepage.

Welcom my homepage.

 

 


 

爲了讓文字富有變化,或者爲了着意強調某一部分,HTML提供了一些標籤產生這些效果,現將常用的標籤列舉如下:

          粗體              HTML語言

          斜體              HTML語言

          加下劃線            HTML語言

          打字機字體           HTML語言

        大型字體            HTML語言

      小型字體            HTML語言

      閃爍效果            HTML語言

         表示強調,一般爲斜體      HTML語言

      表示特別強調,一般爲粗體    HTML語言

        用於引證、舉例,一般爲斜體   HTML語言

現在我們用一個實例來看看效果:

 

 

 

 

 

黑體字

 

斜體字

 

加下劃線

 

大型字體

 

小型字體

 

閃爍效果

 

Welcome

 

Welcome

 

Welcom

 

 

文字的顏色

  文字顏色設置格式如下:

   

  這裏的顏色值可以是一個十六進制數(用“#”作爲前綴),也可以是以下16種顏色名稱。

HTML頁面佈局與文字設計 Black = "#000000" HTML頁面佈局與文字設計 Green = "#008000" HTML頁面佈局與文字設計 Silver = "#C0C0C0" HTML頁面佈局與文字設計 Lime = "#00FF00" HTML頁面佈局與文字設計 Gray = "#808080" HTML頁面佈局與文字設計 Olive = "#808000" HTML頁面佈局與文字設計 White = "#FFFFFF" HTML頁面佈局與文字設計 Yellow = "#FFFF00" HTML頁面佈局與文字設計 Maroon = "#800000" HTML頁面佈局與文字設計 Navy = "#000080" HTML頁面佈局與文字設計 Red = "#FF0000" HTML頁面佈局與文字設計 Blue = "#0000FF" HTML頁面佈局與文字設計 Purple = "#800080" HTML頁面佈局與文字設計 Teal = "#008080" HTML頁面佈局與文字設計 Fuchsia = "#FF00FF" HTML頁面佈局與文字設計 Aqua = "#00FFFF"

請看例子:

 

 

 

 


 

 

色彩斑斕的世界

色彩斑斕的世界

色彩斑斕的世界

色彩斑斕的世界

色彩斑斕的世界

色彩斑斕的世界

色彩斑斕的世界

 

 


 

位置控制

  通過ALIGN屬性可以選擇文字或圖片的對齊方式,LEFT表示向左對齊,RIGHT表示向右對齊,CENTER表示居中。基本語法如下:

     

   #=left/right/center

例:

 

 

 

 

 

 

你好!

 

你好!

 

你好!

 


 

另外,ALIGN屬性也常常用在其它標籤中,引起其內容位置的變動。

  如:

 

    


   #=left/right/center

    



綜合示例

  前面我們所講是單獨使用一個標籤的方法,在實際的編寫中,許多標籤和一些屬性是結合起來使用的,

比如:

    文字

    文字

【例】

 

 

 

 

 

 

白居易

 

 

  白居易(772-846年)字樂天,晚居香山,自號香山居士,原籍太原。白居易是唐代新樂府運動的倡
導者,是中國文學史上堪與屈原、李白、杜甫並列的第一流大詩人。

 

  白居易出身於小官僚家庭。大約在貞元三年( 787年)的年初,十六歲的白居易帶着自己的詩稿,到
了京都長安。老詩人顧況看到這位不速之客的姓名有“居易”二字,便很恢諧地說:“長安米貴,居住不易!”及披卷讀到《賦得古原草送別》中的

 

“離離原上草,一歲一枯榮;野火燒不盡,春風吹又生”

 

時,不禁大爲驚奇,拍案稱絕,馬上改變語氣,鄭重地說:“能寫出這樣好的詩句,‘居’下去是不難的,剛纔我是同你開開玩笑罷了。”從此,白居易的詩名大振。

 

  白居易生活的時代,主要是建中、元和、長慶時期(公元781-824年)。是唐朝走向衰敗的極端苦難動盪的時代。

 

  白居易是繼杜甫之後,我國偉大的現實主義詩人。他的貢獻是在總結我國自《詩經》以來現實主義詩歌創作經驗的基礎上,建立了現實主義的詩歌理論,掀起了一個波瀾壯闊的現實主義的詩歌運動——新樂府運動,創作了大量優秀的現實主義詩篇。

發佈了10 篇原創文章 · 獲贊 3 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章