網(wǎng)頁的設(shè)計(jì)制作2章ppt課件

1、第第 2 章章 HTML根底與文字版面設(shè)計(jì)根底與文字版面設(shè)計(jì) 本章知識(shí)技藝要點(diǎn)：本章知識(shí)技藝要點(diǎn)：HTML的根本構(gòu)造組成簡單頁面的編排在HTML中顏色的運(yùn)用掌握文字版面編輯的根本要領(lǐng)以及,和標(biāo)簽的根本用法熟練掌握利用標(biāo)簽設(shè)置各種字體款式的方法掌握各類列表的編排方法2.1 HTML根底根底2.1.1 HTML概述2. HTML2. HTML的歷史的歷史HTML 3.22019HTML 3.22019年年1 1月月1414日，日，W3CW3C引薦規(guī)引薦規(guī)范范 HTML 4.02019HTML 4.02019年年1212月月1818日，日，W3CW3C引薦引薦規(guī)范規(guī)范 HTML 4.01HTML 4

2、.01微小改良微小改良20192019年年1212月月2424日，日，W3CW3C引薦規(guī)范引薦規(guī)范 XHTML 1.0XHTML 1.0發(fā)布于發(fā)布于20002000年年1 1月月2626日，是日，是W3CW3C引薦規(guī)范，后來經(jīng)過修訂于引薦規(guī)范，后來經(jīng)過修訂于20192019年年8 8月月1 1日重新發(fā)布。日重新發(fā)布。 可以說是可以說是HTML4.01HTML4.01的修正版的修正版XHTML XHTML 是什么？是什么？ XHTML XHTML 指可擴(kuò)展超文本標(biāo)簽言語指可擴(kuò)展超文本標(biāo)簽言語EXtensible HyperText Markup EXtensible HyperText Mark

3、up LanguageLanguage。 XHTML XHTML 的目的是取代的目的是取代 HTML HTML。 XHTML XHTML 與與 HTML 4.01 HTML 4.01 幾乎是一樣的。幾乎是一樣的。 XHTML XHTML 是更嚴(yán)厲更純真的是更嚴(yán)厲更純真的 HTML HTML 版本。版本。XHTMLXHTML是一種加強(qiáng)了的是一種加強(qiáng)了的HTML,HTML,它的可擴(kuò)它的可擴(kuò)展性和靈敏性將順應(yīng)未來網(wǎng)絡(luò)運(yùn)用更展性和靈敏性將順應(yīng)未來網(wǎng)絡(luò)運(yùn)用更多的需求。目前通常說的多的需求。目前通常說的webweb規(guī)范普通規(guī)范普通指網(wǎng)站建立采用基于指網(wǎng)站建立采用基于XHTMLXHTML語語最主要的不同：最

4、主要的不同：XHTML XHTML 元素必需被正確地嵌套。元素必需被正確地嵌套。 XHTML XHTML 元素必需被封鎖。元素必需被封鎖。 標(biāo)簽名必需用小寫字母。標(biāo)簽名必需用小寫字母。 XHTML XHTML 文檔必需擁有根元素。文檔必需擁有根元素。n在在HTML中每個(gè)用來作標(biāo)簽的符號(hào)都是一條命中每個(gè)用來作標(biāo)簽的符號(hào)都是一條命令，它通知閱讀器如何顯示文本。這些標(biāo)簽均令，它通知閱讀器如何顯示文本。這些標(biāo)簽均由由“符號(hào)以及一個(gè)字符串組成。而符號(hào)以及一個(gè)字符串組成。而閱讀器的功能是對這些標(biāo)簽進(jìn)展解釋，顯示出閱讀器的功能是對這些標(biāo)簽進(jìn)展解釋，顯示出文字、圖像、動(dòng)畫、播放聲音。文字、圖像、動(dòng)畫、播放聲音

5、。nHTML的標(biāo)簽由首標(biāo)簽的標(biāo)簽由首標(biāo)簽 和尾標(biāo)簽和尾標(biāo)簽組成的組成的2.1 HTML根底根底2.1.4 HTML的根本構(gòu)造2.1 HTML根底根底超文本文檔分文檔頭和文檔體兩部分，在文檔頭里，對這個(gè)文檔進(jìn)展了一些必要超文本文檔分文檔頭和文檔體兩部分，在文檔頭里，對這個(gè)文檔進(jìn)展了一些必要的定義，文檔體中才是要顯示的各種文檔信息。的定義，文檔體中才是要顯示的各種文檔信息。頭頭 部部 信信 息息文文 檔檔 主主 體，體， 正正 文文 部部 分分n例例2-1：以下是一個(gè)超文本文檔的源代碼：以下是一個(gè)超文本文檔的源代碼nn n 我的第一個(gè)網(wǎng)頁我的第一個(gè)網(wǎng)頁n n n n 學(xué)習(xí)學(xué)習(xí)HTML網(wǎng)頁制造網(wǎng)頁制

6、造n n n n HTML英語是：英語是：Hypertext Marked Language，即超文本標(biāo)簽，即超文本標(biāo)簽言語。言語。n n n n2.1 HTML根底根底圖2-1 例2-1的運(yùn)轉(zhuǎn)效果2.2 頁面的整體編排頁面的整體編排2.2.1 頁面的頭標(biāo)簽頁面的頭標(biāo)簽和構(gòu)成HTML文檔的開頭部分。頭部信息用以闡明文件的標(biāo)題和整個(gè)文件的一些公用屬性。標(biāo)題標(biāo)簽 決議了顯示在頁面標(biāo)題欄中的文字。運(yùn)用過閱讀器的人能夠都會(huì)留意到閱讀器窗口最上邊藍(lán)色部分顯示的文本信息。頁面內(nèi)容的格式該網(wǎng)頁的編碼言語2.2.3 主體標(biāo)簽主體標(biāo)簽標(biāo)簽是標(biāo)簽是HTML文檔的主體文檔的主體部分，其中放置的是頁面中一切的內(nèi)容，如

7、部分，其中放置的是頁面中一切的內(nèi)容，如圖片、文字、表格、表單、超鏈接等設(shè)置。圖片、文字、表格、表單、超鏈接等設(shè)置。在此標(biāo)簽對之間可包含在此標(biāo)簽對之間可包含、等等眾多等等眾多的標(biāo)簽，它們所定義的文本、圖像等將會(huì)在的標(biāo)簽，它們所定義的文本、圖像等將會(huì)在閱讀器的框內(nèi)顯示出來。閱讀器的框內(nèi)顯示出來。標(biāo)簽有本人的屬性，設(shè)置標(biāo)簽有本人的屬性，設(shè)置 標(biāo)標(biāo)簽內(nèi)的屬性，可控制整個(gè)頁面的顯示方式。簽內(nèi)的屬性，可控制整個(gè)頁面的顯示方式。2.2 頁面的整體編排頁面的整體編排表表2-1 標(biāo)簽的主要屬性標(biāo)簽的主要屬性 2.2 頁面的整體編排頁面的整體編排n仔細(xì)閱讀下面一個(gè)例子，便可以了解以上各個(gè)標(biāo)志對在一個(gè)HTML文檔中

8、的規(guī)劃或所運(yùn)用的位置。n例2-2：nnn顯示在閱讀器最標(biāo)題欄中的文本nnn紅色背景、藍(lán)色文字nn2.2 頁面的整體編排頁面的整體編排n2.4.1 標(biāo)題標(biāo)簽標(biāo)題標(biāo)簽n 普通文章都有標(biāo)題、副標(biāo)題、章和節(jié)等普通文章都有標(biāo)題、副標(biāo)題、章和節(jié)等構(gòu)造，構(gòu)造，HTML中也提供了相應(yīng)的標(biāo)題標(biāo)簽中也提供了相應(yīng)的標(biāo)題標(biāo)簽,標(biāo)簽用于設(shè)置網(wǎng)頁中的標(biāo)題文標(biāo)簽用于設(shè)置網(wǎng)頁中的標(biāo)題文字，被設(shè)置的文字將以黑體或粗體的方式顯字，被設(shè)置的文字將以黑體或粗體的方式顯示在網(wǎng)頁中。其中示在網(wǎng)頁中。其中n為標(biāo)題的等級(jí)。為標(biāo)題的等級(jí)。HTML總總共提供六個(gè)等級(jí)的標(biāo)題，共提供六個(gè)等級(jí)的標(biāo)題，n越小，標(biāo)題字號(hào)越小，標(biāo)題字號(hào)就越大。就越大。2.

9、4 文字版面的編輯文字版面的編輯 2.4.1 標(biāo)題標(biāo)簽標(biāo)題標(biāo)簽格式：格式：hn align=參數(shù)標(biāo)題內(nèi)容參數(shù)標(biāo)題內(nèi)容闡明：在闡明：在.之間的文字之間的文字就是第一級(jí)標(biāo)題，是最大最粗的標(biāo)就是第一級(jí)標(biāo)題，是最大最粗的標(biāo)題；題；.之間的文字是之間的文字是最后一級(jí)，是最小最細(xì)的標(biāo)題文字。最后一級(jí)，是最小最細(xì)的標(biāo)題文字。align屬性用于設(shè)置標(biāo)題的對齊方式，屬性用于設(shè)置標(biāo)題的對齊方式，其參數(shù)為其參數(shù)為 left靠左對齊，靠左對齊，enter居中對齊居中對齊)，right (靠右對齊。靠右對齊。2.4 文字版面的編輯文字版面的編輯 n例2-3：nnn設(shè)定各級(jí)標(biāo)題nnn這是一行普通文字n一級(jí)標(biāo)題文字n二級(jí)標(biāo)

10、題文字n三級(jí)標(biāo)題文字n四級(jí)標(biāo)題文字n靠右對齊的五級(jí)標(biāo)題文字n靠左對齊的六級(jí)標(biāo)題文字nn 2.4 文字版面的編輯文字版面的編輯 圖2-2 例2-3的運(yùn)轉(zhuǎn)效果2.4.2 段落標(biāo)簽段落標(biāo)簽標(biāo)簽對是用來創(chuàng)建一個(gè)段落。標(biāo)簽對是用來創(chuàng)建一個(gè)段落。段落的開場由段落的開場由來標(biāo)簽，段落的終了來標(biāo)簽，段落的終了由由來標(biāo)簽。來標(biāo)簽。標(biāo)簽還有一個(gè)屬性標(biāo)簽還有一個(gè)屬性align，它用來指，它用來指名對象顯示時(shí)的對齊方式，普通值有名對象顯示時(shí)的對齊方式，普通值有center、left、right三種。這三個(gè)參數(shù)三種。這三個(gè)參數(shù)設(shè)置段落文字的左設(shè)置段落文字的左,中中,右位置的對齊方式。右位置的對齊方式。 2.4 文字版面

11、的編輯文字版面的編輯 例2-4:測試分段控制標(biāo)簽花兒什么也沒有。它們只需凋謝在風(fēng)中的細(xì)微、凄楚而又無法的吟怨，就像那遭到了致命損傷的秋雁，悲痛無助地發(fā)出一聲聲垂死的鳴叫?；蛟S，這便是花兒那短暫終身最凄涼、最傷感的歸宿。而美麗苦短的花期卻是那最后悲傷的秋風(fēng)挽歌中的瞬間插曲。2.4 文字版面的編輯文字版面的編輯 2.4.3 換行標(biāo)簽換行標(biāo)簽需求斷行的地方，應(yīng)加上需求斷行的地方，應(yīng)加上標(biāo)簽。標(biāo)簽。2.4 文字版面的編輯文字版面的編輯 2.4.4 程度線段標(biāo)簽程度線段標(biāo)簽這個(gè)標(biāo)簽可以在屏幕上顯示一條程度線，這個(gè)標(biāo)簽可以在屏幕上顯示一條程度線，用以分割頁面中的不同部分，使文檔構(gòu)用以分割頁面中的不同部分，

12、使文檔構(gòu)造明晰明朗，使文字的編排更整齊。經(jīng)造明晰明朗，使文字的編排更整齊。經(jīng)過設(shè)置過設(shè)置標(biāo)簽的屬性值，可以控制程標(biāo)簽的屬性值，可以控制程度分隔線的款式。度分隔線的款式。的屬性見表的屬性見表2-3：2.4 文字版面的編輯文字版面的編輯 例例2-7：程度線的設(shè)定程度線的設(shè)定以下是第一條線段，運(yùn)用默許的屬性來顯示以下是第一條線段，運(yùn)用默許的屬性來顯示 以下是第二條線段，設(shè)置了粗細(xì)以下是第二條線段，設(shè)置了粗細(xì)=5 顏色為紅色的程度線顏色為紅色的程度線 以下是第三條線段，設(shè)置了程度線寬度以下是第三條線段，設(shè)置了程度線寬度width=50%(百分比如百分比如式式) 以下是第四條線段，設(shè)置了程度線對齊方式以

13、下是第四條線段，設(shè)置了程度線對齊方式align=left(向左對齊向左對齊) 2.4 文字版面的編輯文字版面的編輯 2.4 文字版面的編輯文字版面的編輯 例例2-7的運(yùn)轉(zhuǎn)效果的運(yùn)轉(zhuǎn)效果 2.4.7 注釋標(biāo)簽注釋標(biāo)簽 在在HTML文檔中可以參與相關(guān)的注釋標(biāo)簽，便于文檔中可以參與相關(guān)的注釋標(biāo)簽，便于查找和記憶有關(guān)的文件內(nèi)容和標(biāo)識(shí)查找和記憶有關(guān)的文件內(nèi)容和標(biāo)識(shí)2.4 文字版面的編輯文字版面的編輯 2.4.8 文字格式控制標(biāo)簽文字格式控制標(biāo)簽可以對網(wǎng)頁中文字的字可以對網(wǎng)頁中文字的字體、大小、顏色進(jìn)展隨意地改動(dòng)體、大小、顏色進(jìn)展隨意地改動(dòng)2.4 文字版面的編輯文字版面的編輯 3例例2-11：文字的屬性設(shè)

14、置文字的屬性設(shè)置設(shè)置文字的字體、顏色、大小設(shè)置文字的字體、顏色、大小歡迎光臨我的網(wǎng)站字號(hào)歡迎光臨我的網(wǎng)站字號(hào)size=5歡迎光歡迎光臨我的網(wǎng)站字號(hào)臨我的網(wǎng)站字號(hào)size=3歡迎歡迎光臨我的網(wǎng)站字號(hào)光臨我的網(wǎng)站字號(hào)size=+2 2.4 文字版面的編輯 2.4 文字版面的編輯 例例2-11的運(yùn)轉(zhuǎn)效果的運(yùn)轉(zhuǎn)效果 2.4 文字版面的編輯 例2-13：特殊字符<賦得古原草送別>離離原上草，一歲一枯榮。野火燒不盡，春風(fēng)吹又生。白居易 ©2.4 文字版面的編輯文字版面的編輯 n在在HTML頁面中，運(yùn)用列表標(biāo)簽可以起到編排提綱和格式排序頁面中，運(yùn)用列表標(biāo)簽可以起

15、到編排提綱和格式排序文件的作用。對于強(qiáng)化文檔的條理性有很大的協(xié)助。文件的作用。對于強(qiáng)化文檔的條理性有很大的協(xié)助。nHTML有三種列表方式：無序列表有三種列表方式：無序列表(ul)；有序列表；有序列表(ol)；定義；定義列表列表(dl)。n無序列表就是工程各條列間并無順序關(guān)系，純粹只是利用條列無序列表就是工程各條列間并無順序關(guān)系，純粹只是利用條列來呈現(xiàn)資料而已，此種無序標(biāo)簽，在各條列前面均有一符號(hào)以來呈現(xiàn)資料而已，此種無序標(biāo)簽，在各條列前面均有一符號(hào)以示區(qū)隔；而有序條列就是指各條列之間是有順序的，比如從示區(qū)隔；而有序條列就是指各條列之間是有順序的，比如從1、2、3不斷延伸下去；定義列表那么用于對

16、一系列給定的術(shù)語不斷延伸下去；定義列表那么用于對一系列給定的術(shù)語給出解釋和闡明。表給出解釋和闡明。表2-7給出了創(chuàng)建列表時(shí)經(jīng)常用到的主要標(biāo)給出了創(chuàng)建列表時(shí)經(jīng)常用到的主要標(biāo)簽。簽。2.5.1無序列表無序列表無序列表運(yùn)用無序列表運(yùn)用標(biāo)簽，每一個(gè)列表項(xiàng)前運(yùn)標(biāo)簽，每一個(gè)列表項(xiàng)前運(yùn)用用標(biāo)簽。無序列表不用數(shù)字標(biāo)志每個(gè)列表項(xiàng)，標(biāo)簽。無序列表不用數(shù)字標(biāo)志每個(gè)列表項(xiàng)，而采用一個(gè)符號(hào)來標(biāo)志每個(gè)列表項(xiàng)，比如圓黑點(diǎn)。而采用一個(gè)符號(hào)來標(biāo)志每個(gè)列表項(xiàng)，比如圓黑點(diǎn)。在在和和中可運(yùn)用屬性中可運(yùn)用屬性type。type有三個(gè)取值：有三個(gè)取值：type=disc表示運(yùn)用實(shí)心園作為列表的符號(hào)此為表示運(yùn)用實(shí)心園作為列表的符號(hào)此為ty

17、pe的默許值的默許值type=circle表示運(yùn)用空心園作為列表的符號(hào)表示運(yùn)用空心園作為列表的符號(hào)type=square表示運(yùn)用小方塊作為列表的符號(hào)表示運(yùn)用小方塊作為列表的符號(hào)無序列表的根本格式如下無序列表的根本格式如下:第一項(xiàng)第一項(xiàng)第二項(xiàng)第二項(xiàng)第第N項(xiàng)項(xiàng)例例2-14：這是一個(gè)默許的無序列表：這是一個(gè)默許的無序列表：國際互聯(lián)網(wǎng)提供的效力有：國際互聯(lián)網(wǎng)提供的效力有：WWW效力效力文件傳輸效力文件傳輸效力電子郵件效力電子郵件效力運(yùn)用空心園作為列表符號(hào)的列表運(yùn)用空心園作為列表符號(hào)的列表國際互聯(lián)網(wǎng)提供的效力有：國際互聯(lián)網(wǎng)提供的效力有：WWW效力效力文件傳輸效力文件傳輸效力電子郵件效力電子郵件效力運(yùn)用各

18、種符號(hào)作為列表符號(hào)的列表運(yùn)用各種符號(hào)作為列表符號(hào)的列表國際互聯(lián)網(wǎng)提供的效力有：國際互聯(lián)網(wǎng)提供的效力有：WWW效力效力文件傳輸效力文件傳輸效力電子郵件效力電子郵件效力例例2-14運(yùn)轉(zhuǎn)效果運(yùn)轉(zhuǎn)效果 2.5.2 有序列表有序列表順序編號(hào)的設(shè)置是由順序編號(hào)的設(shè)置是由的兩個(gè)屬性的兩個(gè)屬性type和和start來完成的。來完成的。type=用于編號(hào)的數(shù)字用于編號(hào)的數(shù)字,字母字母等的類型，如等的類型，如type=a，那么編號(hào)用小寫英文，那么編號(hào)用小寫英文字母排序。字母排序。start=編號(hào)開場的數(shù)字，如編號(hào)開場的數(shù)字，如start=2那么編號(hào)從那么編號(hào)從2開場。開場。也可以在也可以在標(biāo)簽中設(shè)定標(biāo)簽中設(shè)定va

19、luen改動(dòng)列表改動(dòng)列表行工程的特定編號(hào)，例如行工程的特定編號(hào)，例如，那么表示該列表項(xiàng)的序號(hào)為那么表示該列表項(xiàng)的序號(hào)為7。原始代碼原始代碼顯示結(jié)果顯示結(jié)果 靚仔靚仔 靚女靚女 靚世界靚世界 靚仔靚仔 靚女靚女 10.靚世靚世標(biāo)簽的根本格式如下：標(biāo)簽的根本格式如下：第第1項(xiàng)項(xiàng)第第2項(xiàng)項(xiàng)第第3項(xiàng)項(xiàng)例例2-15：有序列表有序列表默許的有序列表默許的有序列表國際互聯(lián)網(wǎng)提供的效力有：國際互聯(lián)網(wǎng)提供的效力有：www效力效力文件傳輸效力文件傳輸效力電子郵件效力電子郵件效力用小寫英文字母標(biāo)志序號(hào)，序號(hào)從用小寫英文字母標(biāo)志序號(hào)，序號(hào)從c起始起始國際互聯(lián)網(wǎng)提供的效力有：國際互聯(lián)網(wǎng)提供的效力有： www效力效力 文

20、件傳輸效力文件傳輸效力 電子郵件效力電子郵件效力 遠(yuǎn)程登錄效力遠(yuǎn)程登錄效力用大寫羅馬字母標(biāo)志序號(hào)，用大寫羅馬字母標(biāo)志序號(hào)，其中改動(dòng)了序號(hào)的列表其中改動(dòng)了序號(hào)的列表 國際互聯(lián)網(wǎng)提供的效力有：國際互聯(lián)網(wǎng)提供的效力有：www效力效力文件傳輸效力文件傳輸效力電子郵件效力電子郵件效力遠(yuǎn)程登錄效力遠(yuǎn)程登錄效力例例2-15的運(yùn)轉(zhuǎn)效果的運(yùn)轉(zhuǎn)效果 2.5.3 嵌套列表嵌套列表將一個(gè)列表嵌入到另一個(gè)列表中，作為另將一個(gè)列表嵌入到另一個(gè)列表中，作為另一個(gè)列表的一部分，叫嵌套列表。無論一個(gè)列表的一部分，叫嵌套列表。無論是有序列表和無序列表的嵌套，閱讀器是有序列表和無序列表的嵌套，閱讀器都可以自動(dòng)地分別陳列。都可以自動(dòng)地分別陳列。例例2-16： 嵌套列表嵌套列表目錄目錄動(dòng)物肉類食物動(dòng)物肉類食物水產(chǎn)品水產(chǎn)品 帶魚帶魚 螃蟹螃蟹 北極蝦北極蝦 家禽家禽三黃雞三黃雞湖鴨湖鴨烏雞烏雞植物類食物植物類食物蔬菜蔬菜番茄番茄青菜青菜黃瓜黃瓜水果水果蘋果蘋果葡萄葡萄香蕉香蕉谷物谷物大米大米 高梁高梁 玉米玉米 人工合成類食物人工合成類食物 例例2-16的運(yùn)轉(zhuǎn)