網(wǎng)頁設(shè)計(jì) 文字版面的編輯

1、第2章 文字版面的編輯 2.2 字體屬性12.1.1 換行標(biāo)簽br2.1.2 強(qiáng)制不換行標(biāo)簽nobr2.1.3 分段控制標(biāo)簽p2.1.4 原樣顯示文字標(biāo)簽pre2.1.5 居中對齊標(biāo)簽center2.1 頁面布局22.1.6 引文標(biāo)簽blockquote2.1.7 水平分隔線標(biāo)簽hr2.1.8 特殊字符2.1.9 注釋標(biāo)簽2.1.10 設(shè)定網(wǎng)頁背景和文字的顏色2.1 頁面布局3全國信息技術(shù)應(yīng)用培訓(xùn)教育工程（ITAT）網(wǎng)站4全國信息技術(shù)應(yīng)用培訓(xùn)教育工程（ITAT）網(wǎng)站源程序5 換行標(biāo)簽:用于在文檔中強(qiáng)制斷行，標(biāo)記為一個單獨(dú)的。(或 (XHTML) 在HTML文件中任何位置只要使用了標(biāo)簽，當(dāng)文件顯

2、示在瀏覽器中時，該位置之后的文字將顯示于下一行。示例：你好嗎？很好。 效果：你好嗎？ 很好。2.1.1 換行標(biāo)簽br6標(biāo)簽：把語句強(qiáng)行放在一行中。在標(biāo)簽中包含的文本不管有多長，總是放在一行中進(jìn)行顯示。主要用于把那些不適于分開的詞和短語放在一行中如果一行文本長度超過一定的限度，可能會突破右邊邊框跑到屏幕外面去示例：請改變您瀏覽器窗口的寬度， 使之小于這一行的寬度， 看看這個標(biāo)記的作用！ 2.1.2 強(qiáng)制不換行標(biāo)簽nobr7作用：用于將文檔劃分為段落，標(biāo)記為和，其中結(jié)束標(biāo)記符通?？墒÷浴ＰЧ涸跒g覽器中，不同段落文字間除了換行外，還會以一個空白行加以間隔，以便區(qū)別出文字的不同段落。2.1.3 分段

3、控制標(biāo)簽p81格式： 文字 文字 文字 2說明： 其中align屬性有l(wèi)eft、center和right三個參數(shù)，這三個設(shè)置值將依次把段落文字的水平對齊方式設(shè)為左對齊、居中對齊和右對齊。3示例：你好嗎？很好。2.1.3 分段控制標(biāo)簽p9簡單網(wǎng)頁練習(xí)WebPage Test 1 你好嗎？很好。請改變您瀏覽器窗口的寬度，使之小于這一行的寬度， 看看這個標(biāo)記的作用！ 請改變您瀏覽器窗口的寬度， 使之小于這一行的寬度， 看看這個標(biāo)記的作用！10簡單網(wǎng)頁效果圖11和標(biāo)簽：可保留HTML文件原始的文件排版方式，直接在瀏覽器中顯示出來。方法是把制作好的那段文本前后分別加上和標(biāo)簽。在預(yù)排格式中，仍可以用HTM

4、L語言對文字的格式進(jìn)行設(shè)置，如文字的顏色、大小等。2.1.4 原樣顯示文字標(biāo)簽pre12示例：教育部教育管理信息中心教育部教育管理信息中心教育部教育管理信息中心教育部教育管理信息中心2.1.4 原樣顯示文字標(biāo)簽pre13效果圖14文本在頁面上中使用標(biāo)簽進(jìn)行居中控制。是一個成對標(biāo)簽，在想居中的文本部分開頭處加，結(jié)尾處加即可。示例：Hello 2.1.5 居中對齊標(biāo)簽center15標(biāo)簽可以用來建立一個引文，它特別適合于較長文本的引用。引文顯示時將會自動右移，左邊空出幾個格，以示區(qū)別。示例：見下頁2.1.6 引文標(biāo)簽blockquote16示例：Her Song:When I was young,

5、 I listened to the radio waiting for my favorite songs 2.1.6 引文標(biāo)簽blockquote17作用：添加水平線，以將不同的內(nèi)容信息分開，使文字看起來清晰、明確。說明：標(biāo)簽是單獨(dú)使用的標(biāo)簽，它的作用是換行并在該行下畫一條橫線，橫線的上下兩端都會留出一定的空白。屬性：見下表2.1.7 水平分隔線標(biāo)簽hr18標(biāo)簽屬性說明19示例： 標(biāo)簽示例20鍵盤上沒有的字符：在HTML文件中，有些字符沒辦法直接顯示出來，比如說“”。使用特殊字符可以將鍵盤上沒有的字符表達(dá)出來鍵盤上有但有特殊意義的字符：有些字符在鍵盤上雖然可以得到，但在HTML中有其特殊的

6、含義，如“”等等，也必須用一些代碼表示它們，以免發(fā)生混淆。2.1.8 特殊字符21空格：在建立HTML文件時，若您利用鍵盤上的空格鍵，輸入數(shù)個空格，不論輸入的空格有多少個，都將視為一個。因此，如果您想要輸入多個空格時，必須利用空格符號。2.1.8 特殊字符22HTML常見特殊字符及其代碼表23顯示與的區(qū)別 春曉春眠不覺曉，處處聞啼鳥。夜來風(fēng)雨聲，花落知多少。 春曉春眠不覺曉，處處聞啼鳥。夜來風(fēng)雨聲，花落知多少。 HTML常見特殊字符示例242.1.9 注釋標(biāo)簽注釋標(biāo)簽：只起注釋作用，不顯示在頁面上 注釋標(biāo)簽的格式有兩種： 25設(shè)置標(biāo)簽內(nèi)的屬性，可控制整個頁面的顯示方式。 1格式：2.1.10

7、設(shè)定網(wǎng)頁背景和文字的顏色262說明： （1）通過bgcolor屬性可以改變網(wǎng)頁的背景顏色，其格式如下： 或 2.1.10 設(shè)定網(wǎng)頁背景和文字的顏色27（A） 其中#nnnnnn代表六位十六進(jìn)制數(shù)，每兩位的取值均是從00FF，代表ASCII碼的00255，前兩位設(shè)置紅色的深淺，中間兩位設(shè)置綠色的深淺，最后兩位設(shè)置藍(lán)色的深淺。（B） 在指定文字的顏色時，也可以直接使用該顏色對應(yīng)的英文單詞，例如，我們指定背景的顏色為紅色，可以表示為： 也可以表示為。28暗藍(lán)綠(#006666)Teal白 色White(#FFFFFF) 紫紅色(#993333)Fuchsia綠 色Green(#00FF00) 藍(lán) 色

8、(#0000FF)Blue淺藍(lán)綠Aqua(#0066FF) 黃 色(#FFFF00)Yellow紫 色Purple(#660000) 橄欖綠(#336633)Olive海軍藍(lán)Navy(#0033CC) 銀白色(#CCCCCC)Silver灰 色 Gray(#999999) 栗 色(#993300) Maroon 石灰色 Lime(#666666) 紅 色(#FF0000) Red 黑 色 Black(#000000) 顏 色 名 稱 顏 色 名 稱 （C）bgcolor屬性的參數(shù)值可以是下表所示16種顏色中的任何一種(注意：數(shù)值是16進(jìn)制）。29（2）background屬性指定網(wǎng)頁的背景圖像

9、。格式： 示例：（3）text屬性用于指定網(wǎng)頁內(nèi)文字的顏色。格式：示例：2.1.10 設(shè)定網(wǎng)頁背景和文字的顏色30設(shè)置網(wǎng)頁背景聲音在HEAD中添加：示例：312.2.1 標(biāo)題文字標(biāo)簽Hn2.2.2 文字格式控制標(biāo)簽Font2.2.3 特定文字樣式標(biāo)簽2.2 字體屬性32標(biāo)簽用于設(shè)置網(wǎng)頁中的標(biāo)題文字，被設(shè)置的文字將以黑體、粗體的方式顯示在網(wǎng)頁中。1格式： 標(biāo)題文字 2.2.1 標(biāo)題文字標(biāo)簽Hn332說明： 標(biāo)簽是成對出現(xiàn)的，在和之間的文字就是文檔中的標(biāo)題。標(biāo)簽共分六級，其中標(biāo)簽所括起的文字是第一級標(biāo)題，最大最粗；標(biāo)簽所括起的文字是最后一級標(biāo)題，最小最細(xì)。 align屬性用于設(shè)置標(biāo)題的位置。ali

10、gn屬性的參數(shù)值為left、center或right之一 標(biāo)簽本身具有換行的作用，標(biāo)題總是從新一行開始。使用標(biāo)題樣式時，必須使用結(jié)束標(biāo)記符。343示例： 標(biāo)題文字標(biāo)記實(shí)例 第一級文字標(biāo)題 第二級文字標(biāo)題 第三級文字標(biāo)題 第四級文字標(biāo)題 第五級文字標(biāo)題 第六級文字標(biāo)題 35font標(biāo)簽用于控制文字的字體、大小與顏色?？刂频姆绞绞抢脤傩栽O(shè)置實(shí)現(xiàn)的，各屬性的使用功能說明見下表?？刂莆淖值念伾玞olor 控制文字的大小size 控制文字的字體 face 使 用 功 能 屬 性 2.2.2 文字格式控制標(biāo)簽Font361格式： 文字2說明： face屬性的格式為： 文字face屬性是字體標(biāo)記符，用來指

11、定字體樣式。字體樣式也就是通常所說的“字體”。例如，常用的英文字體有“Times New Roman”、“Arial”等；常用的中文字體有“宋體”、“楷體”等。在編寫網(wǎng)頁時，通過在FONT標(biāo)記符中指定face屬性，用戶可以指定一個或幾個字體名稱(用逗號隔開)。372說明： size屬性的取值為17，默認(rèn)值為3；也可以用“+”或“-”來設(shè)定字號的相對值。example color屬性的格式為： 或383示例： 字體型號標(biāo)記實(shí)例 10號紅色黑體文字 9號綠色黑體文字 7號藍(lán)色黑體文字 6號橄欖色黑體文字 默認(rèn)文字顯示效果 39用來產(chǎn)生一定的強(qiáng)調(diào)、突出、區(qū)別以及提示等效果的標(biāo)簽。HTML中用于這種功

12、能的標(biāo)簽可以分為兩類：物理類型和邏輯類型。 2.2.3 特定文字樣式標(biāo)簽401物理類型 粗體b標(biāo)簽放在與標(biāo)簽之間的文字將以粗體方式顯示。 斜體i標(biāo)簽放在與標(biāo)簽之間的文字將以斜體方式顯示。 下劃線u標(biāo)簽放在與標(biāo)簽之間的文字將以加下劃線的方式顯示。41 2邏輯類型邏輯類型:指使用一些標(biāo)簽來改變字體的形態(tài)和式樣，以便產(chǎn)生一些公眾習(xí)慣的或約定俗成的顯示效果。常用的邏輯類型標(biāo)簽有八種，這些標(biāo)簽均有首標(biāo)簽和尾標(biāo)簽，放在首標(biāo)簽和尾標(biāo)簽之間的文本受其控制：42 2邏輯類型 （Emphasis）標(biāo)簽：用于強(qiáng)調(diào)的文本，以區(qū)別于其他文本，一般顯示斜體字,與相似； 標(biāo)簽：用于特別強(qiáng)調(diào)的文本，顯示粗體字，與相似； （Citation）標(biāo)簽：用于引證、舉例，通常是斜體字； 43 2邏輯類型 標(biāo)簽：用來指出這是一組代碼； 標(biāo)簽：規(guī)定文本以小號字顯示； 標(biāo)簽：規(guī)定文本以大號字顯示； （Sample）標(biāo)簽：顯示一段計(jì)算機(jī)常用的字體，即寬度相等的字體；44 2邏輯類型 （Keyboard）標(biāo)簽：由用戶所輸入文本，通常顯示較粗的寬體字； （Variable）標(biāo)簽：用來表示變量，通常顯示斜體字； （Definition）標(biāo)簽：表示一個定義或說明，通常