網(wǎng)站設(shè)計(jì)開發(fā)課件-第三講-蘭州JQ.ppt

1、入門,HTML,第2章 HTML入門,2.1 HTML的基本概念 2.2 HTML文件結(jié)構(gòu)和標(biāo)記 2.3 頁面布局與文字格式 2.4 列表 2.5 多媒體效果 2.6 表格 2.7 框架 習(xí)題2,本節(jié)知識(shí)點(diǎn) HTML基礎(chǔ) 基本HTML文檔HTML(Hypertext Markup Language)即超文本描述語言，是一種用來制作超文本文檔的簡單標(biāo)記語言。,2.1 HTML的基本概念,HTML概述,Web是計(jì)算機(jī)、Internet和多媒體技術(shù)結(jié)合的產(chǎn)物，而HTML(HyperText Markup Language，超文本標(biāo)記語言)則是這一結(jié)合的實(shí)現(xiàn)者。由于有了HTML，才使得Web風(fēng)行于In

2、ternet。,什么是HTML？,第2章 HTML入門,讓我們來了解HTML,在WWW上的一個(gè)超媒體文檔稱之為一個(gè)頁面（page）。作為一個(gè)組織或個(gè)人在萬維網(wǎng)上放置開始點(diǎn)的頁面稱為主頁Homepage，或首頁，主頁中通常包括有指向其他相關(guān)頁面或其他節(jié)點(diǎn)的指針（超級(jí)鏈接）。在邏輯上將視為一個(gè)整體的一系列頁面的有機(jī)集合稱為網(wǎng)站（Website或Site）。,設(shè)計(jì) HTML 語言的目的是為了能把存放在一臺(tái)電腦中的文本或圖形與另一臺(tái)電腦中的文本或圖形方便地聯(lián)系在一起，形成有機(jī)的整體，人們不用考慮具體信息是在當(dāng)前電腦上還是在網(wǎng)絡(luò)的其它電腦上。這樣，你只要使用鼠標(biāo)在某一文檔中點(diǎn)取一個(gè)圖標(biāo)，Internet

3、就會(huì)馬上轉(zhuǎn)到與此圖標(biāo)相關(guān)的內(nèi)容上去，而這些信息可能存放在網(wǎng)絡(luò)的另一臺(tái)電腦中。,第2章 HTML入門,HTML（Hyper Text Mark-up Language ）即超文本標(biāo)記語言，是 WWW 的描述語言，由 Tim Berners-lee提出。 HTML文本是由 HTML命令組成的描述性文本，HTML 命令可以說明文字、 圖形、動(dòng)畫、聲音、表格、鏈接等。 HTML的結(jié)構(gòu)包括頭部 (Head)、主體 (Body) 兩大部分。頭部描述瀏覽器所需的信息，主體包含所要說明的具體內(nèi)容。,第2章 HTML入門,雖然PC機(jī)大行其道，但使用MAC等其他機(jī)器的大有人在。 HTML是一種用來制作超文本文檔的

4、簡單標(biāo)記語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)（如UNIX，WINDOWS等）。也就是說HTML是在各種網(wǎng)絡(luò)環(huán)境之間，不同文件格式之間進(jìn)行交流的一種語言格式。,自1990年以來HTML就一直被用作World Wide Web 的信息表示語言，用于描述Homepage的格式設(shè)計(jì)和它與WWW上其它Homepage 的連結(jié)信息。使用HTML語言描述的文件，需要通過WWW瀏覽器顯示出效果。,第2章 HTML入門,HTML使用標(biāo)簽符號(hào)(Tag)對(duì)文件的內(nèi)容進(jìn)行標(biāo)注，指定輸出格式，如字體大小、顏色、背景顏色、表格形式、各部分之間邏輯上的組織等，并控制文字、圖象的顯示方

5、式及附加動(dòng)作。使用支持HTML的瀏覽軟件，瀏覽者就可以對(duì)文件進(jìn)行自由的、跳躍式的閱讀，還可以自行調(diào)整顯示和閱讀的形式。,后續(xù)內(nèi)容會(huì)詳細(xì)介紹。,第2章 HTML入門,1990年HTML問世后很長一段時(shí)間里，人們?nèi)渴褂梦谋揪庉嬈鲿鴮慔TML文檔，用Web瀏覽器檢查網(wǎng)頁是否編寫好。 現(xiàn)在，有集成的網(wǎng)頁設(shè)計(jì)工具幫助我們以WYSIWYG（What-You-See-Is-What-You-Get，所見即所得）的方式生成HTML文檔。 HTML4.0能讓網(wǎng)站設(shè)計(jì)者在網(wǎng)頁上自由地放置圖片、美化文字、插入音頻、視頻文件，配合Web 數(shù)據(jù)庫和ASP、PHP、JSP等網(wǎng)絡(luò)編程，可以進(jìn)行網(wǎng)站的遠(yuǎn)程動(dòng)態(tài)交互操作。,建

6、議大家多了解一下HTML語言！,第2章 HTML入門,HTML與Web的關(guān)系,HTML之所以稱為超文本標(biāo)記語言，是因?yàn)槲谋局邪怂^“超級(jí)鏈接”點(diǎn)。所謂超級(jí)鏈接，就是一種URL指針，通過激活（點(diǎn)擊）它，可使瀏覽器方便地獲取新的網(wǎng)頁。這也是HTML獲得廣泛應(yīng)用的最重要的原因之一。 網(wǎng)頁的本質(zhì)就是HTML，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、CGI、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，HTML是Web編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。,第2章 HTML入門,HTML與Web的關(guān)系,HTML是Web的核心與基礎(chǔ),第2章 HTML入門,【實(shí)例2-1】 基本的HTML文

7、檔示例。一個(gè)簡單的HTML示例歡迎進(jìn)入HTML天地,努力掌握HTML知識(shí)，做出內(nèi)容豐富，自己滿意的主頁！在瀏覽器中的顯示如圖2-1所示。,圖2-1 一個(gè)簡單的HTML示例,本節(jié)知識(shí)點(diǎn)HTML結(jié)構(gòu)HTML標(biāo)記2.2.1 HTML文件結(jié)構(gòu)每個(gè)網(wǎng)頁都由一系列的元素和標(biāo)簽組成，元素名不區(qū)分大小寫。HTML用標(biāo)簽來規(guī)定元素的屬性和它在文件中的位置。,2.2 HTML文件結(jié)構(gòu)和標(biāo)記,HTML超文本文檔分為文檔頭和文檔體兩部分，其HTML文件結(jié)構(gòu)為： 一個(gè)簡單的示例 歡迎光臨我的主頁 ,這是我第一次做主頁? ,2.2.2 HTML標(biāo)記介紹HTML標(biāo)記主要可分為以下八大類。1文件結(jié)構(gòu)標(biāo)記(Document S

8、tructure Tags)2區(qū)段格式標(biāo)記(Block Formatting Tags)3字符格式標(biāo)記(Character Formatting Tags)4列表標(biāo)記(List Tags)5鏈接標(biāo)記(Anchor Tags)6多媒體標(biāo)記(Multimedia Tags) 7表格標(biāo)記(Table Tags) 8表單標(biāo)記(Form Tags),本節(jié)知識(shí)點(diǎn) HTML布局 HTML格式2.3.1 標(biāo)題一個(gè)HTML文件的結(jié)構(gòu)基本上可以分為兩部分，一部分稱為標(biāo)題區(qū)(Head Section)，另一部分稱為主體區(qū)(Body Section)。文件結(jié)構(gòu)標(biāo)記用來標(biāo)示標(biāo)題區(qū)和主體區(qū)。,2.3 頁面布局與文字格式,

9、【實(shí)例2-2】 標(biāo)題示例。標(biāo)題示例,這是一行普通文字一級(jí)標(biāo)題二級(jí)標(biāo)題三級(jí)標(biāo)題四級(jí)標(biāo)題五級(jí)標(biāo)題六級(jí)標(biāo)題在瀏覽器中的顯示如圖2-2所示。,2.3.2 分行應(yīng)用【實(shí)例2-3】 無換行示例。 無換行示例靜夜思 床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉(xiāng)。在瀏覽器中的顯示如圖2-3所示。,圖2-3 無換行示例,【實(shí)例2-4】 換行示例。換行示例靜夜思床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉(xiāng)。在瀏覽器中的顯示如圖2-4所示。,圖2-4 換行示例,2.3.3 段落標(biāo)記【實(shí)例2-5】 段落標(biāo)簽。段落標(biāo)簽靜夜思床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉(xiāng)。在瀏覽器中的顯示如圖2-5所示。,圖2-5

10、段落標(biāo)簽,2.3.4 水平線應(yīng)用水平線標(biāo)簽可以在屏幕上顯示一條水平線，用以分割頁面中的不同部分。1線段粗細(xì)的設(shè)定【實(shí)例2-6】 線段粗細(xì)的設(shè)定。線段粗細(xì)的設(shè)定這是第一條線段，無size，取默認(rèn)值size=1來顯示,這是第二條線段，size=5這是第三條線段，size=10在瀏覽器中的顯示如圖2-6所示。,圖2-6 線段粗細(xì)的設(shè)定,2線段長度的設(shè)定【實(shí)例2-7】 線段長度的設(shè)定。線段長度的設(shè)定這是第一條線段，無width設(shè)定，取width默認(rèn)值100%來顯示,這是第二條線段，width=50(點(diǎn)數(shù)方式)這是第三條線段，width=50%(百分比方式)在瀏覽器中的顯示如圖2-7所示。,圖2-7 線

11、段長度的設(shè)定,3線段排列的設(shè)定【實(shí)例2-8】 線段排列的設(shè)定。線段排列的設(shè)定這是第一條線段，無align設(shè)定，“取默認(rèn)值center顯示”,這是第二條線段，向左對(duì)齊這是第三條線段，向右對(duì)齊在瀏覽器中的顯示如圖2-8所示。,圖2-8 線段排列的設(shè)定,4無陰影的設(shè)定【實(shí)例2-9】 無陰影的設(shè)定。無陰影的設(shè)定,這是第一條線段，無noshade設(shè)定，取默認(rèn)值陰影效果來顯示這是第二條線段，有noshade設(shè)定在瀏覽器中的顯示如圖2-9所示。,圖2-9 無陰影的設(shè)定,2.3.5 文字的大小、字體、樣式、顏色及位置1. 文字的大小設(shè)置【實(shí)例2-10】 字號(hào)大小。字號(hào)大小,這是size=7的字體這是size=

12、6的字體這是size=5的字體這是size=4的字體這是size=3的字體這是size=2的字體這是size=1的字體這是size=-1的字體在瀏覽器中的顯示如圖2-10所示。,圖2-10 字號(hào)大小,2文字的字體設(shè)置【實(shí)例2-11】 字體設(shè)置。字體,歡迎光臨歡迎光臨歡迎光臨 歡迎光臨Welcome my homepage.Welcome my homepage. 在瀏覽器中的顯示如圖2-11所示。,圖2-11 字體設(shè)置,3文字的樣式設(shè)置為了讓文字富有變化，或者為了著重強(qiáng)調(diào)某一部分，HTML提供了一些標(biāo)簽以產(chǎn)生這些效果。常用的標(biāo)簽如表2-1所示。,表2-1 常用的標(biāo)簽,【實(shí)例2-12】 字體樣式

13、。 字體樣式 黑體字 斜體字, 加下劃線 大型字體 小型字體WelcomeWelcomeWelcome在瀏覽器中的顯示如圖2-12所示。,圖2-12 字體樣式,4文字的顏色設(shè)置 【實(shí)例2-13】 文字的顏色。 文字的顏色 ,文字的顏色文字的顏色 文字的顏色文字的顏色文字的顏色 文字的顏色文字的顏色在瀏覽器中的顯示如圖2-13所示。,圖2-13 文字的顏色,5文字的位置設(shè)置【實(shí)例2-14】 位置控制。位置控制,你好!你好!你好!在瀏覽器中的顯示如圖2-14所示。,圖2-14 位置控制,本節(jié)知識(shí)點(diǎn)HTML列表列表類別2.4.1 有序列表(Ordered List)【實(shí)例2-15】 有序列表。有序列

14、表,2.4 列 表,牛奶咖啡 在瀏覽器中的顯示如圖2-15所示。,圖2-15 有序列表,2.4.2 無序列表(Unordered List)【實(shí)例2-16】 無序列表。無序列表,牛奶咖啡 在瀏覽器中的顯示如圖2-16所示。,圖2-16 無序列表,2.4.3 自定義列表【實(shí)例2-17】 自定義列表。自定義列表,牛奶白色冷飲咖啡咖色熱飲 在瀏覽器中的顯示如圖2-17所示。,圖2-17 自定義列表,2.4.4 嵌套列表【實(shí)例2-18】 嵌套列表。嵌套列表飲品清單：牛奶茶葉,紅茶綠茶咖啡在瀏覽器中的顯示如圖2-18所示。,圖2-18 嵌套列表,本節(jié)知識(shí)點(diǎn)WWW與多媒體多媒體在網(wǎng)頁中的應(yīng)用2.5.1 插

15、入圖片及圖片大小的調(diào)整超文本支持的圖像格式一般有X Bitmap(XBM)、GIF、JPEG三種，所以對(duì)圖片處理后要將其保存為這三種格式中的任何一種，這樣才可以在瀏覽器中看到。,2.5 多媒體效果,2.5.2 滾動(dòng)字幕標(biāo)簽可以實(shí)現(xiàn)元素在網(wǎng)頁中移動(dòng)的效果，以達(dá)到動(dòng)感十足的視覺效果。標(biāo)簽是一個(gè)成對(duì)的標(biāo)簽，其應(yīng)用格式為：標(biāo)簽有很多屬性(如表2-2所示)，用來定義元素的移動(dòng)方式。,表2-2 的屬性,【實(shí)例2-19】 滾動(dòng)字幕。滾動(dòng)字幕我來了,我來了我來了我來了我來了我來了我來了我來了,我來了我來了我來了我來了 在瀏覽器中的顯示如圖2-19所示。,圖2-19 滾動(dòng)字幕,2.5.3 嵌入背景音樂標(biāo)簽用來設(shè)

16、置網(wǎng)頁的背景音樂，但只適用于IE，其設(shè)定的參數(shù)不多。其格式如下： 其中：src=your.mid：設(shè)定midi檔案及路徑，可以是相對(duì)地址或絕對(duì)地址。聲音文件可以是wav、midi、mp3等類型的。,表格是用于排列內(nèi)容的最佳手段，在html頁面中，絕大多數(shù)頁面都是使用表格進(jìn)行排版的。,2.6 表 格,表格,行,單元格,本節(jié)知識(shí)點(diǎn)HTML表格表格結(jié)構(gòu)2.6.1 表格的基本結(jié)構(gòu)表格是用標(biāo)簽定義的。表格被劃分為行(使用標(biāo)簽)，每行又被劃分為數(shù)據(jù)單元格(使用標(biāo)簽)。td表示“表格數(shù)據(jù)”(table data)，即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖像、列表、段落、表單、水平線、表格等。表格標(biāo)記如

17、表2-3所示。,表2-3 表格標(biāo)記,【實(shí)例2-20】 一個(gè)簡單的表格。一個(gè)簡單的表格,行1，列1行1，列2行2，列1行2，列2 在瀏覽器中的顯示如圖2-20所示。,圖2-20 一個(gè)簡單的表格,2.6.2 表格的標(biāo)簽1表格標(biāo)簽的屬性表格標(biāo)簽有很多屬性，最常用的屬性如表2-4所示。,表2-4 表格標(biāo)簽的屬性,【實(shí)例2-21】 表格標(biāo)簽的屬性。表格標(biāo)簽的屬性, 第1行中的第1列 第1行中的第2列 第1行中的第3列 第2行中的第1列 第2行中的第2列 第2行中的第3列, 在瀏覽器中的顯示如圖2-21所示。,圖2-21 表格標(biāo)簽的屬性,2表格的邊框顯示狀態(tài)frame表格的邊框分別有上邊框、下邊框、左邊框

18、和右邊框。這四個(gè)邊框都可以設(shè)置為顯示或隱藏狀態(tài)。表格的邊框顯示狀態(tài)frame值的語法格式如下：frame值的設(shè)定如表2-5所示。,表2-5 表格的邊框顯示狀態(tài)frame值的設(shè)定,【實(shí)例2-22】 表格邊框的顯示狀態(tài)。表格邊框的顯示狀態(tài),姓名性別年齡專業(yè)張三男,20計(jì)算機(jī)在瀏覽器中的顯示如圖2-22所示。,圖2-22 表格邊框的顯示狀態(tài),3設(shè)置分隔線的顯示狀態(tài)rules分隔線的顯示狀態(tài)rules的語法格式如下： rules值的設(shè)定如表2-6所示。,表2-6 分隔線的顯示狀態(tài)rules值的設(shè)定,【實(shí)例2-23】 設(shè)置分隔線的顯示狀態(tài)。設(shè)置分隔線的顯示狀態(tài),姓名性別年齡專業(yè)李四女19計(jì)算機(jī),姓名性別

19、年齡專業(yè),李四女19計(jì)算機(jī)在瀏覽器中的顯示如圖2-23所示。,圖2-23 設(shè)置分隔線的顯示狀態(tài),4表格中空白單元格的顯示【實(shí)例2-24】 表格中空白單元格的顯示。表格中空白單元格的顯示,行 1， 列 1行 1， 列 2行 2， 列 1 在瀏覽器中的顯示如圖2-24所示。,圖2-24 表格中空白單元格的顯示,2.6.3 表格中單元格的設(shè)定【實(shí)例2-25】 跨多行跨多列的單元格?？缍嘈锌缍嗔械膯卧駎able border=10 width=80% align=center height=150 background=././imge/b0024.gif,bordercolorlight=#999

20、9FF bordercolordark=#9900CC學(xué)生基本信息成績姓名性別專業(yè)課程分?jǐn)?shù),張三男計(jì)算機(jī)程序設(shè)計(jì)91,李四女88在瀏覽器中的顯示如圖2-25所示。,圖2-25 跨多行跨多列的單元格,2.6.4 表格內(nèi)文字的對(duì)齊/布局 【實(shí)例2-26】 表格中文字的對(duì)齊。表格中文字的對(duì)齊,居左居中居右 a b c 在瀏覽器中的顯示如圖2-26所示。,圖2-26 表格中文字的對(duì)齊,2.6.6 表格的嵌套 【實(shí)例2-27】 表格嵌套。表格嵌套,網(wǎng)頁標(biāo)志廣告,標(biāo)題欄1標(biāo)題欄2標(biāo)題欄3標(biāo)題欄4,標(biāo)題欄5標(biāo)題欄6標(biāo)題欄7標(biāo)題欄8,標(biāo)題欄9第六單元,第一單元第二單元第三單元,第四單元第五單元,在瀏覽器中的顯

21、示如圖2-27所示。,圖2-27 表格嵌套,什么是框架如果網(wǎng)頁的各部分為相互獨(dú)立的網(wǎng)頁，又由一個(gè)網(wǎng)頁將這些分開的網(wǎng)頁組成一個(gè)完整的網(wǎng)頁，顯示于瀏覽者的瀏覽器中，重復(fù)出現(xiàn)的內(nèi)容被固定下來，每次瀏覽者發(fā)出對(duì)頁面的請(qǐng)求時(shí)，只下載發(fā)生變化的框架的頁面，其它子頁面保持不變，必然會(huì)給瀏覽者帶來方便，節(jié)約時(shí)間?？蚣艿淖饔镁褪前褳g覽器窗口劃分為若干個(gè)區(qū)域，每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁。使用框架可以非常方便地完成導(dǎo)航工作，而且各個(gè)框架之間決不存在干擾問題，所以框架技術(shù)一直普遍應(yīng)用于頁面導(dǎo)航。,2.7 框 架,使用框架網(wǎng)頁最主要的目的是創(chuàng)建鏈接的結(jié)構(gòu)。導(dǎo)航條被放置于一個(gè)框架之中，可以單擊導(dǎo)航條向服務(wù)器請(qǐng)求網(wǎng)頁，

22、鏈接的網(wǎng)頁出現(xiàn)在另外的框架中，而導(dǎo)航欄所在的網(wǎng)頁不發(fā)生變化。這就好比是看電視時(shí)使用遙控器，電視畫面出現(xiàn)在電視機(jī)中。不管顯示在電視中的頻道發(fā)生怎樣的變化，手中的遙控器不會(huì)變化。,同時(shí)框架網(wǎng)頁還可以免除瀏覽器來回滾動(dòng)窗口。如果網(wǎng)頁中的內(nèi)容部分很長，瀏覽者拖動(dòng)滾動(dòng)條到了頁面底部后要切換到別的頁面，可以不必再拖動(dòng)滾動(dòng)條返回頁面頂部，因?yàn)閷?dǎo)航條在另外的框架中，并不受內(nèi)容框架的影響。,框架主要包括兩個(gè)部分，一個(gè)是框架集，另一個(gè)就是框架?？蚣芗窃谝粋€(gè)文檔內(nèi)定義的一組框架結(jié)構(gòu)的html網(wǎng)頁?？蚣芗x了在一個(gè)窗口中顯示的框架數(shù)、框架的尺寸、載入到框架的網(wǎng)頁等。而框架則是指在網(wǎng)頁上定義的一個(gè)顯示區(qū)域。,本節(jié)知

23、識(shí)點(diǎn)框架標(biāo)記框架應(yīng)用是個(gè)單標(biāo)簽，標(biāo)簽要放在框架集frameset中，設(shè)置了幾個(gè)子窗口就必須對(duì)應(yīng)幾個(gè)標(biāo)簽，而且每一個(gè)標(biāo)簽內(nèi)還必須設(shè)定一個(gè)網(wǎng)頁文件(src=*.html)，其常用屬性如表2-7所示。,2.7 框 架,表2-7 常用屬性,框架主要的分割方式有以下三種：左右分割窗口上下分割窗口嵌套分割窗口,2.7.1 窗口的左右設(shè)定【實(shí)例2-28】 窗口的左右設(shè)定。首先新建一個(gè)文件夾，然后做三個(gè)要放到子窗口中的頁面：實(shí)例2-1.htm、實(shí)例2-2.htm和實(shí)例2-3.htm。,表示左邊框架占整個(gè)瀏覽器的80%，而右邊占20%；2個(gè)值加起來正好到100%， *代表1份 cols=“30%，*”表示左邊框架占整個(gè)瀏覽器的30%，而右邊占70%；cols=“*，2*，3*”表示左邊框架占六分之一，中間的占六分之二也就是三分之一，右邊則二分之一；cols=“80，*，70”表示左邊和右邊框架占整個(gè)瀏覽器的80和70像素，而中間的則占剩余的全部 ；,在瀏覽器中的顯示如圖2-28所示。,圖2-28 窗口的左右設(shè)定,2.7.2 子窗口的上下設(shè)定【實(shí)