WEB網(wǎng)頁文字和圖片.ppt

1、第2章 網(wǎng)頁文字和圖片,網(wǎng)頁的文字是設(shè)計一個網(wǎng)頁的基礎(chǔ)，而網(wǎng)頁圖片則使網(wǎng)頁內(nèi)容更加的豐富。使用HTML代碼來編輯網(wǎng)頁文字和圖片可以達(dá)到在Word軟件里設(shè)計文檔幾乎一樣的效果。當(dāng)然，與Word軟件相比較起來，使用標(biāo)簽來設(shè)計網(wǎng)頁文字和圖片沒有使用菜單來設(shè)計Word文檔方便，但是正因?yàn)榫W(wǎng)頁的這種標(biāo)簽屬性，使得網(wǎng)頁具有跨平臺的特性，可以在任何一種平臺上顯示。,2.1 文字格式,文字格式主要是用一些HTML元素來標(biāo)記文本的方式，用來更改文字的大小、字體、顏色等屬性。另外還能為文本增加如粗體、斜體、上標(biāo)、下標(biāo)等修飾效果。,2.1.1 設(shè)置文字大小,在HTML里，元素可以用來顯示文字的屬性，包括文字的大小、

2、顏色、字體等。其中設(shè)置文字大小的屬性為SIZE，其語法代碼如下所示： 文字,2.1.2 設(shè)置字體,文字可以設(shè)置成多種字體，中文的有宋體、仿宋、黑體等，英文字體也有Arial、Times New Roman等，為了保證網(wǎng)頁的通用性，HTML的早期版本里是不允許為文字指定字體的，然而從HTML3.2版本開始，可以為網(wǎng)頁中的文字指定不同的字體，使得網(wǎng)頁的表現(xiàn)形式更為豐富。 1.設(shè)置網(wǎng)頁字體 設(shè)置文字字體使用元素中的FACE屬性，其語法代碼如下所示： 文字 2.設(shè)置瀏覽器默認(rèn)字體,2.1.3 設(shè)置字體顏色,如果一個網(wǎng)頁不能設(shè)置文字字體的顏色，那么這個網(wǎng)頁就是黑白的，失去了其繽紛的色彩。使用元素的COL

3、OR屬性可以將文字設(shè)置成不同的顏色。其語法代碼為： 文字,2.1.3 設(shè)置字體顏色,顏色可以有兩種表示方法：顏色名稱與RGB顏色數(shù)值。顏色名稱就是類似于RED、BLUE等顏色的英文名。 RGB顏色是由紅色、綠色、藍(lán)色的組合來指定的一種顏色，任何一種顏色都可以用0255之間的一個數(shù)值來表示，但必須要使用16進(jìn)制的數(shù)字來表示這些組合。 例如，一種顏色的RGB代碼為“#FFC0CB”，這就代表是用強(qiáng)度為FF（也就是255）的紅色、強(qiáng)度為C0的綠色與強(qiáng)度為CB的藍(lán)色混合成的顏色，也就是粉紅色。,2.1.3 設(shè)置字體顏色,幾乎所有瀏覽器都能識別以下16種預(yù)定義的顏色：Red（紅色）、Yellow（黃色）

4、、Blue（藍(lán)色）、Navy（深藍(lán)色）、Green（綠色）、Lime（淺綠色）、Aqua（淺綠色）、Olive（橄欖綠）、Black（黑色）、Gray（灰色）、Silver（銀色）、Maroon（原色）、Purple（紫色）、Fuchsia（紫紅色）、Teal（深青色）。 而Internet Explorer瀏覽器可以識別更多的顏色單詞，如下表列出了Internet Explorer 9瀏覽器所能識別的顏色單詞。,2.1.3 設(shè)置字體顏色,2.1.3 設(shè)置字體顏色,2.1.4 加粗與斜體,通常在進(jìn)行文字處理時，都會對比較重要的內(nèi)容使用加粗、斜體來引起讀者的注意。在網(wǎng)頁上同樣可以使用加粗與斜體來

5、達(dá)到相同的效果。 在HTML元素中，可以用元素來加粗文字，用元素來使文字傾斜。除了元素與元素之外，還可以使用元素來加粗文字、元素來使文字傾斜的。其語法代碼如下 ： 加粗的文字 傾斜的文字 加粗的文字 傾斜的文字,2.1.5 下劃線與刪除線,在有些時候希望文字帶下劃線顯示，例如要對一些文字說明，可以使用下劃線元素突出顯示。刪除線一般在修改文章的時候常常用到，表示原來的這部分文字被刪除了。 1.被反對使用的元素 在HTML的早期版本里，使用元素來標(biāo)注帶有刪除線的文字，使用元素來標(biāo)注帶有下劃線的文字。,2.1.5 下劃線與刪除線,2.被贊成使用的元素 HTML從4.0版本開始，正式使用了兩個新元素：

6、元素（刪除線）和元素（插入線）來替代元素與元素，不過他們在瀏覽器里的顯示結(jié)果都是一樣的。 刪除線與下劃線元素的語法代碼如下所示： 刪除線 下劃線 刪除線 插入線,2.1.6 上標(biāo)與下標(biāo),在描述一些復(fù)雜的表達(dá)式時，特別是一些數(shù)學(xué)公式，經(jīng)常會用到上標(biāo)和下標(biāo)，例如3的平方（32）。在HTML頁面中，上標(biāo)采用元素，下標(biāo)采用元素。其具體語法是： 作為上標(biāo)的文字 作為下標(biāo)的文字,2.1.7 等寬字,等寬字體一般是針對英文字體而言的，所謂等寬就是像打字機(jī)文本一樣的字體，在默認(rèn)情況下，這種字體是Courier字體。在HTML中的元素可以用來設(shè)置等寬字體。使用“”標(biāo)簽表明標(biāo)注的文字為類似打印機(jī)文本（typewr

7、iter text）所使用的等寬字體。TT元素的語法代碼為： 英文文字,2.2 與文字排版相關(guān)的元素,與文字排版相關(guān)的元素就是對某段文字進(jìn)行設(shè)置的元素，包括文本縮進(jìn)、段落、換行、段落居中等。一個好的網(wǎng)頁，文字段落的設(shè)置是必不可少的，它可以使網(wǎng)頁更加的簡潔和漂亮。本節(jié)就來詳細(xì)講解與文字排版相關(guān)的一些元素。,2.2.1 文本縮進(jìn),文本縮進(jìn)元素主要用于設(shè)置文本的縮進(jìn)效果。通過使用該元素，可以實(shí)現(xiàn)頁面文字的段落縮排，從而使頁面的文字布局更加錯落有致。文本縮進(jìn)元素的語法是： 需要進(jìn)行縮排的文字,2.2.3 換行,HTML里的換行元素在前面的章節(jié)里已經(jīng)多次提到并且也多次使用過了。元素就是用來對文字進(jìn)行換行

8、的。元素沒有結(jié)束標(biāo)簽，也就是說，一個元素就是換一次行。,2.2.3 段落,在HTML里，使用元素可以用來區(qū)分一個與另一個段落，在“”標(biāo)簽與“”標(biāo)簽之間的文字是一段文字。其語法代碼如下： 一段文字,2.2.4 段落居中,如果想要居中顯示網(wǎng)頁中的段落，可以使用元素。居中對齊元素是雙元素，成對出現(xiàn)，以開始，以結(jié)束。在元素之間的所有內(nèi)容都居中對齊，包括文字、圖像、表格等。其具體的語法如下所示： 需要居中對齊的內(nèi)容,2.2.5 預(yù)定義格式,通過前面章節(jié)的學(xué)習(xí)可以知道，在HTML源代碼里，即使文字已經(jīng)換行，但是只要沒有使用“”標(biāo)簽，那么在瀏覽器里顯示出來的文字是不會被換行的。如果想要在瀏覽器里顯示出源代碼

9、里所設(shè)置的所有格式，包括其文字之間的空白，如空格、制表符等，可以使用元素。元素相當(dāng)于設(shè)置了一個“塊”，這個塊可以將源代碼里的所有文本（除HTML標(biāo)簽外）在瀏覽器中按原樣顯示出來。其語法如下所示： 設(shè)定了格式的文字,2.2.6 水平分隔線,當(dāng)頁面內(nèi)容比較繁瑣時，可以在段與段之間插入一條水平分隔線來使頁面顯得層次分明，便于閱讀。在HTML中可以使用元素來創(chuàng)建一個水平分隔線，其語法如下所示： ,2.3編號列表格式, ,列表格式,ol包含type和start兩個屬性 li包含type和value兩個屬性,項目列表格式, 只有type屬性,2.4 設(shè)置網(wǎng)頁背景顏色,在前面章節(jié)里多次使用過元素，不過在使用元素時，都沒有對其屬性值進(jìn)行過設(shè)定。元素里有一個BGCOLOR屬性可以用來設(shè)置網(wǎng)頁的背景顏色，其語法代碼如下： 網(wǎng)頁內(nèi)容,2.5 在網(wǎng)頁中插入圖像,一個網(wǎng)頁中可以插入如Logo（網(wǎng)站標(biāo)志）、Banner（橫幅廣告）、照片等各種圖片，當(dāng)瀏覽者瀏覽網(wǎng)頁時，這些圖片將會自動顯示出來。合理的應(yīng)用圖片，可以讓網(wǎng)頁看起來更漂亮、重點(diǎn)更突出、形式更活潑、瀏覽更方便。在HTML里可以通過元素來插入圖片，其語法代碼為： ,2.6 設(shè)置背景圖片,元素里的BACKGROUND屬