《文字版面的編輯》PPT課件.ppt

1、第2章 文字版面的編輯,2.1 頁面布局 2.2 字體屬性,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),2.1 頁面布局,2.1.1 換行標(biāo)簽br 2.1.2 強(qiáng)制不換行標(biāo)簽nobr 2.1.3 自動(dòng)換行標(biāo)簽wbr 2.1.4 分段控制標(biāo)簽p 2.1.5 原樣顯示文字標(biāo)簽pre 2.1.6 居中對齊標(biāo)簽center 2.1.7 引文標(biāo)簽blockquote 2.1.8 水平分隔線標(biāo)簽hr 2.1.9 署名標(biāo)簽address 2.1.10 特殊字符 2.1.11 注釋標(biāo)簽 2.1.12 設(shè)定網(wǎng)頁背景和文字的顏色,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),2.2.1 標(biāo)題文字標(biāo)簽hn 2.2.2 文字格

2、式控制標(biāo)簽font 2.2.3 特定文字樣式標(biāo)簽,2.2 字體屬性,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),2.1.1 換行標(biāo)簽br,換行標(biāo)簽是個(gè)單標(biāo)簽，HTML文件中任何位置只要使用了標(biāo)簽，當(dāng)文件顯示在瀏覽器中時(shí)，該位置之后的文字將顯示于下一行。 在一般的文本文件中，只要按下鍵盤上的回車鍵便會產(chǎn)生一個(gè)換行符，使文本文件中的文字換行顯示。但是在HTML文件中，由回車鍵所產(chǎn)生的換行符，在瀏覽器中并不會視為換行符號。因此，若要將某位置后的文字顯示于下一行時(shí)，必須在該位置使用標(biāo)簽，才能達(dá)到換行的效果。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),HTML除了使用標(biāo)簽進(jìn)行換行以外，還可以使用標(biāo)簽把語句強(qiáng)行

3、放在一行中。在標(biāo)簽中包含的文本不管有多長，總是放在一行中進(jìn)行顯示。主要用于把那些不適于分開的詞和短語放在一行中，但是，如果一行文本長度超過一定的限度，可能會突破右邊邊框跑到屏幕外面去，這會給閱讀帶來某些困難，所以在使用標(biāo)簽時(shí)要格外注意 。,2.1.2 強(qiáng)制不換行標(biāo)簽nobr,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),標(biāo)簽也是一個(gè)換行標(biāo)簽，但它不同于和，標(biāo)簽規(guī)定了文本在該處強(qiáng)制換行，是把語句強(qiáng)制放在一行中，則是根據(jù)屏幕的寬度，選擇適當(dāng)?shù)牡胤綋Q行，把其余的文本放到下一行進(jìn)行顯示。如果一行內(nèi)容能夠在屏幕上顯示完整，就不起作用了，它將被忽略掉。,2.1.3 自動(dòng)換行標(biāo)簽wbr,上一頁,下一頁,目 錄,結(jié)

4、 束,本 節(jié),由標(biāo)簽所標(biāo)識的文字，代表同一個(gè)段落的文字。在瀏覽器中，不同段落文字間除了換行外，還會以一個(gè)空白行加以間隔，以便區(qū)別出文字的不同段落。它可以單獨(dú)使用，也可以成對使用。 1格式： 文字 文字 align = 文字 2說明： 其中align屬性有l(wèi)eft、center和right三個(gè)參數(shù)，這三個(gè)設(shè)置值將依次把段落文字的水平對齊方式設(shè)為左對齊、居中對齊和右對齊。,2.1.4 分段控制標(biāo)簽p,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),要將HTML文件中的文字編排方式，通過瀏覽器顯示時(shí)，保留原始的文件排版方式，就需要通過標(biāo)簽來實(shí)現(xiàn)。方法是把制作好的那段文本前后分別加上 和標(biāo)簽，即可使瀏覽器顯示

5、文件原始的排版方式。,2.1.5 原樣顯示文字標(biāo)簽pre,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),2.1.6 居中對齊標(biāo)簽center,文本在頁面上中使用標(biāo)簽進(jìn)行居中控制，是一個(gè)成對標(biāo)簽，在想居中的文本部分開頭處加，結(jié)尾處加即可。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),標(biāo)簽可以用來建立一個(gè)引文，它特別適合于較長文本的引用。引文顯示時(shí)將會自動(dòng)右移，左邊空出幾個(gè)格，以示區(qū)別。,2.1.7 引文標(biāo)簽blockquote,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),2.1.8 水平分隔線標(biāo)簽hr,有時(shí)候，我們想在網(wǎng)頁中生成一條水平分隔線，將不同的內(nèi)容信息分開，使文字看起來清晰、明確，這時(shí)可以使用標(biāo)簽來達(dá)

6、到此目的。 標(biāo)簽是單獨(dú)使用的標(biāo)簽，它的作用是換行并在該行下畫一條橫線，橫線的上下兩端都會留出一定的空白。 通過給標(biāo)簽設(shè)置一定的屬性，可以使它具有更強(qiáng)的功能。標(biāo)簽的屬性有size、width和align。下表為控制標(biāo)簽所建立的水平分隔線樣式的屬性說明。 說明：如果采用百分比為單位來設(shè)定水平分隔線的寬度，其百分比值可隨窗口的大小變化而改變，相對比例保持不變。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),標(biāo)簽屬性說明,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),2.1.9 署名標(biāo)簽address,在瀏覽網(wǎng)頁時(shí)經(jīng)常能看到，在網(wǎng)頁的下部常有簽名或地址，說明這個(gè)網(wǎng)頁是由誰或由哪個(gè)公司編寫的，以及其他有關(guān)信息。假若

7、希望得到更多的反饋信息，署名對制作者來說是很有用的。署名標(biāo)簽是，在標(biāo)簽之間的文字顯示效果是斜體字。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),在HTML文件中，有些字符沒辦法直接顯示出來，比如說“”。使用特殊字符可以將鍵盤上沒有的字符表達(dá)出來，而有些字符在鍵盤上雖然可以得到，但在HTML中有其特殊的含義，如“”等等，也必須用一些代碼表示它們，以免發(fā)生混淆。 在建立HTML文件時(shí)，若您利用鍵盤上的空格鍵，輸入數(shù)個(gè)空格，不論輸入的空格有多少個(gè)，都將視為一個(gè)。因此，如果您想要輸入多個(gè)空格時(shí)，必須利用空格符號。 常見特殊字符的代碼見下表 ：,2.1.10 特殊字符,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié)

8、,HTML常見特殊字符及其代碼表,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),2.1.11 注釋標(biāo)簽,如果想方便地在HTML中查找和記憶有關(guān)文件的內(nèi)容和標(biāo)識，則可以在HTML文件中加入注釋，放在注釋中的文本在屏幕上是不出現(xiàn)的。在文件ex2-11.html的源代碼中可以看到注釋，但在瀏覽器中卻看不到。 注釋標(biāo)簽的格式有兩種： ,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),2.1.12 設(shè)定網(wǎng)頁背景和文字的顏色,HTML文件的主體將定義于標(biāo)簽中，也就是網(wǎng)頁的主要內(nèi)容，并依照各種HTML標(biāo)簽的控制，將這些內(nèi)容顯示在瀏覽器的窗口中。設(shè)置在標(biāo)簽內(nèi)的屬性，可控制整個(gè)頁面的顯示方式。 1格式： 2說明： backg

9、round屬性將在以后章節(jié)進(jìn)行講解。 通過bgcolor屬性可以改變網(wǎng)頁的背景顏色，其格式如下： 或 ,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),其中#nnnnnn代表六位十六進(jìn)制數(shù)，每兩位的取值均是從00FF，代表ASCII碼的00255，前兩位設(shè)置紅色的深淺，中間兩位設(shè)置綠色的深淺，最后兩位設(shè)置藍(lán)色的深淺。 在指定文字的顏色時(shí)，也可以直接使用該顏色對應(yīng)的英文單詞，例如，我們指定背景的顏色為紅色，可以表示為： 也可以表示為。為了便于記憶，建議讀者直接用相應(yīng)的英文單詞指定顏色。bgcolor屬性的參數(shù)值可以是下表所示16種顏色中的任何一種。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié), text屬性

10、用于指定網(wǎng)頁內(nèi)文字的顏色。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),標(biāo)簽用于設(shè)置網(wǎng)頁中的標(biāo)題文字，被設(shè)置的文字將以黑體、粗體的方式顯示在網(wǎng)頁中。 1格式： align= 標(biāo)題文字 2說明： 標(biāo)簽是成對出現(xiàn)的，夾在和之間的文字就是文檔中的標(biāo)題。標(biāo)簽共分六級，其中標(biāo)簽所括起的文字是第一級標(biāo)題，最大最粗；標(biāo)簽所括起的文字是最后一級標(biāo)題，最小最細(xì)。 align屬性用于設(shè)置標(biāo)題的位置。align屬性的參數(shù)值為left、center或right之一，分別表示標(biāo)題位于瀏覽器窗口的左側(cè)、中間和右側(cè)。 標(biāo)題文字具體有多大則因?yàn)g覽器的不同而不同。 標(biāo)簽本身具有換行的作用，標(biāo)題總是從新一行開始。,2.2.1 標(biāo)題文

11、字標(biāo)簽hn,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),font標(biāo)簽用于控制文字的字體、大小與顏色?？刂频姆绞绞抢脤傩栽O(shè)置實(shí)現(xiàn)的，各屬性的使用功能說明見下表。 font標(biāo)簽的屬性,2.2.2 文字格式控制標(biāo)簽font,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),1格式： 文字 2說明： face屬性的格式為： 文字 若face屬性所指定的字體名稱，并不存在于用戶的系統(tǒng)時(shí)，將使用默認(rèn)的字體。 size屬性的取值為17，默認(rèn)值為3；同時(shí)，也可以用“+”或“”來設(shè)定字號的相對值。 color屬性的格式為： 或,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),在有關(guān)文字的顯示中，常常會使用一些特殊的字型或字體來產(chǎn)生

12、一定的強(qiáng)調(diào)、突出、區(qū)別以及提示等效果。HTML中用于這種功能的標(biāo)簽可以分為兩類：物理類型和邏輯類型。 1物理類型 粗體b標(biāo)簽 放在與標(biāo)簽之間的文字將以粗體方式顯示。 斜體i標(biāo)簽 放在與標(biāo)簽之間的文字將以斜體方式顯示。 下劃線u標(biāo)簽 放在與標(biāo)簽之間的文字將以加下劃線的方式顯示。,2.2.3 特定文字樣式標(biāo)簽,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),2邏輯類型 邏輯類型是指使用一些標(biāo)簽來改變字體的形態(tài)和式樣，以便產(chǎn)生一些公眾習(xí)慣的或約定俗成的顯示效果。常用的邏輯類型標(biāo)簽有八種，這些標(biāo)簽均有首標(biāo)簽和尾標(biāo)簽，放在首標(biāo)簽和尾標(biāo)簽之間的文本受其控制： （Emphasis）標(biāo)簽：用于強(qiáng)調(diào)的文本，以區(qū)別于其他文本，一般顯示斜體字,與相似； 標(biāo)簽：用于特別強(qiáng)調(diào)的文本，顯示粗體字，與相似； （Citation）標(biāo)簽：用于引證、舉例，通常是斜體字； 標(biāo)簽：用來指出這是一組代碼；,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié)