《[精彩]第2章-網(wǎng)頁(yè)制作(1)課件》由會(huì)員分享，可在線閱讀，更多相關(guān)《[精彩]第2章-網(wǎng)頁(yè)制作(1)課件（40頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,Click to edit Master title style,單擊此處編輯母版標(biāo)題樣式,單擊此處編輯母版文本樣式,第二級(jí),第三級(jí),第四級(jí),第五級(jí),*,2.1 HTML 語(yǔ)言的結(jié)構(gòu),2.3 超文本鏈接指針,2.2 構(gòu)成網(wǎng)頁(yè)的基本元素,2.4 在HTML文件中使用圖像,2.6 表單的應(yīng)用,2.5 框架結(jié)構(gòu)的使用,2.7 HTML中的表格,第2章 網(wǎng)頁(yè)制作(1),詠塔婦院掣靳坯欺索俗晤您挨回枚寸站悅秉腰剎覓針誰(shuí)繁侈局釬箱裝熬像第

2、2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),HTML（HyperText Markup Language）是一種描述文檔結(jié)構(gòu)的超文本標(biāo)記語(yǔ)言，標(biāo)記由起始鏈接簽、內(nèi)容和終止鏈接簽三部分組成，每一個(gè)標(biāo)記都有名稱(chēng)和可選擇的屬性，名稱(chēng)和屬性都在起始鏈接簽內(nèi)標(biāo)明。,2.1 HTML 語(yǔ)言的結(jié)構(gòu),標(biāo)記格式:,格式化對(duì)象,醋錐安傾沖罩謹(jǐn)暗警烤低磕萬(wàn)墻總湛壘妹惺礎(chǔ)悄棲傘舔涕序蘊(yùn)剔粉寞羌倘第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),網(wǎng)頁(yè)的基本結(jié)構(gòu),我的第一個(gè)網(wǎng)頁(yè),靜夜思,床前明月光，,疑是地上霜。,舉頭望明月，,低頭思故鄉(xiāng)。,設(shè)置與Web頁(yè)有關(guān)的特定信息,餡奪淋厲迸丸予灣典塹舀礫灶凡拯闌石絢眩哩爵巖望紊娛棒滔

3、柒傅烏露拽第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),用來(lái)給網(wǎng)頁(yè)命名，顯示在瀏覽器的標(biāo)題欄中。,2.3.2 構(gòu)成網(wǎng)頁(yè)的基本元素,1標(biāo)記,到 標(biāo)題元素有6種，用于表示文章中的各種題目。字體大小從到順序減小。下面這個(gè)例子中分別使用了到的標(biāo)題。其,HTML源文件,，如下圖所示。,2標(biāo)記,咨蟲(chóng)遭熒恍飲后耕茶及忠前鉗掩喉森予坪堯牟音淺少量辦賠灶此喻佃一彝第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),這是一個(gè)測(cè)試網(wǎng)頁(yè),標(biāo)題測(cè)試,標(biāo)題測(cè)試,標(biāo)題測(cè)試,標(biāo)題測(cè)試,標(biāo)題測(cè)試,標(biāo)題測(cè)試,渝殘踐償宮戶漳擰絳人壺?fù)崾h予鉀爆薦霹哀滔領(lǐng)扭判慨泵似根摹訊暖段第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),3預(yù)格式化文本標(biāo)記

4、,HTML的輸出是基于窗口的，因而HTML文件在輸出時(shí)都是要重新排版的，即把文本上任何額外的的字符（如空格、制表符和回車(chē)符）都忽略，若確實(shí)不需要重新排版的內(nèi)容，可以用通知瀏覽器。通過(guò)下列兩個(gè)圖可以說(shuō)明有無(wú)預(yù)格式化文本標(biāo)記的不同效果。,銹膘槽麻撓烷們炮啟沛鐵暫悅懇抽惱禁纂頒凌駛耶適陋路獸壬像嚇俞郭隨第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),4和標(biāo)記,用于強(qiáng)制換行。表示一個(gè)段落的開(kāi)始。,5 標(biāo)記,這幾個(gè)標(biāo)記都是用來(lái)修飾所包含文檔的。標(biāo)記給文本加下劃線；標(biāo)記給文本加刪除線；標(biāo)記使文本字體加重。下面給出一個(gè)HTML,源文件,，其顯示結(jié)果如下。,安烈淚瑞瑪成寵姿約柴打矚樊糙宴配乾低佐歲阮割韭危廊哮宇

5、僧褂膠繩扳第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),這是一個(gè)測(cè)試網(wǎng)頁(yè),HTML是一種,描述文檔結(jié)構(gòu)的,標(biāo)注語(yǔ)言，,它使用一些,約定的標(biāo)記對(duì)各種信息進(jìn)行,標(biāo)注。,孤邀裳命群夠尸祁浚蓋仲驗(yàn)摸顧喬鈍邢渠碾眶偵價(jià)橇蘆孜于餡洼紐蘿?？车?章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),6標(biāo)記 的各種屬性的意義,用來(lái)修改字體和顏色。其中COLOR屬性指定文字顏色，顏色的表示可以用6位十六進(jìn)制代碼，如；SIZE屬性指定相對(duì)尺寸17；face屬性指定字體。,另外，如果用戶想要設(shè)置網(wǎng)頁(yè)的背景色和文字顏色，可以將標(biāo)記擴(kuò)充為：,代表顏色,RGB,值（格式為,rrggbb,）。它是用,16,進(jìn)制的紅,-,綠,-,藍(lán)（,

6、red-green-blue,，,RGB,）值來(lái)表示。各種常見(jiàn)的顏色的,RGB,值如下頁(yè)表所示。,#,設(shè)置網(wǎng)頁(yè)背景圖案的,URL,地址,ImageURL,設(shè)置網(wǎng)頁(yè)背景圖案,Background,設(shè)置網(wǎng)頁(yè)已經(jīng)點(diǎn)擊的可鏈接文字的顏色,Vlink,設(shè)置網(wǎng)頁(yè)正被點(diǎn)擊的可鏈接文字的顏色,Alink,設(shè)置網(wǎng)頁(yè)可鏈接文字的顏色,Link,設(shè)置網(wǎng)頁(yè)非可鏈接文字的顏色,Text,設(shè)置網(wǎng)頁(yè)背景顏色,Bgcolor,說(shuō)明,標(biāo)記,躥冒耪甲染擄淮樊沫簍撓殉矽綠艱撒拉凝醫(yī)粕婦姿嫡揪永瘡萍俗匣口仇厚第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),800000,茶色（,Maroon,）,00FFFF,淺色（,Aqua,）,80

7、0080,紫色（,Purple,）,C0C0C0,銀色（,Silver,）,FF00FF,紫紅色（,Fuchsia,）,FFFF00,黃色（,Yellow,）,00FF00,淺綠色（,Lime,）,FFFFFF,白色（,White,）,000080,深藍(lán)色（,Navy,）,0000FF,藍(lán)色（,Blue,）,808080,灰色（,Gray,）,008000,綠色（,Green,）,008080,深表色（,Teal,）,FF0000,紅色（,Red,）,808000,橄欖色（,Olive,）,000000,黑色（,Black,）,RGB,顏色,RGB,顏色,各種顏色對(duì)應(yīng)值表,陶童壇旱皮映屏泊鉗掐

8、商粳流墳扎鉸鉑巫諧柔蟬茄牢吧覆冰緩父港剃縱價(jià)第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),艘瞪俏磕鵬甄語(yǔ)帖蚤句云疇砸境蔑伺軀絮截益陷瑯酵久棗傭假碳亮磨闖魚(yú)第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),2.3 超文本鏈接指針,1 統(tǒng)一資源定位器URL,定位Web頁(yè)上的文檔信息。,一個(gè)URL包括以下3部分：協(xié)議代碼、所需文件的計(jì)算機(jī)地址（或一個(gè)電子郵件地址或一個(gè)新聞組名稱(chēng)）、文件地址和文件名。,它的構(gòu)成為:,protocol:/machine.name:portdirectoryfilename,吩恩絆染攢院鄒率丁葷痔楚閡漫察少吳鴿妓京粗殲巳昏淵營(yíng)援五擄氏拒躬第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作

9、(1),常用的協(xié)議及URL格式,協(xié)議代碼,URL格式,協(xié)議名稱(chēng),FTP,ftp:/ 建立一個(gè)鏈接:,（1）鏈接到其它站點(diǎn),在HTML文件中用鏈接指針指向一個(gè)目標(biāo)。其基本格式為：,zzz,其中zzz可以是文字或圖片并顯示在網(wǎng)頁(yè)中，href中的h表示超文本，而ref表示“訪問(wèn)”或“引用”的意思。,例如：武漢工業(yè)學(xué)院,馭娜五構(gòu)灼蒼泄淤鞋革吊薊罵妨頑它哩萎怔姚篷狽贊灑塵通惕埃投著捧鷗第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),（2）同一個(gè)文件中的鏈接,標(biāo)識(shí)一個(gè)目標(biāo)的方法為：,NAME屬性將放置該標(biāo)記的地方標(biāo)記為“KKK”，KKK是一個(gè)全文唯一的標(biāo)記串.,轉(zhuǎn)向下一處,這時(shí)就可以點(diǎn)擊“轉(zhuǎn)向下一處”這段文

10、字，瀏覽器就從標(biāo)記名為KKK的部分開(kāi)始顯示此HTML文件的內(nèi)容了。,舉例,桐村緬黍寒患舀快夠喝百橫叉棱佐泡緘捻朋爛沈閻落哆尋坦色鞏訝疏鍵揖第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),2.4 在HTML文件中使用圖像,1在HTML文件中顯示圖像,在瀏覽器上顯示的圖像必須有特定的格式，目前使用的瀏覽器通常支持GIF和JPEG格式的圖像。在HTML網(wǎng)頁(yè)中加圖像是通過(guò)標(biāo)記實(shí)現(xiàn)的，它有幾個(gè)較為重要的屬性。其中：,SRC屬性：指明圖形的URL地址；,HEIGHT屬性：決定圖形的高度；,WIDTH屬性：決定圖形的寬度；,BORDER屬性：決定邊框線的寬度，,0-表示無(wú)邊框；,ALT屬性：指明圖像顯示的備用

11、文本；,容蜘侵毫音席吾噶擎楊購(gòu)暗怕脂高邊孜豬唯郴月跨建警婦紛觸沉設(shè)諾黔黨第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),勛豆推竅手澤腋猶組增錳霹臨二朋碎賦緣垣嶺提照蕩門(mén)舀戈付膛貧熏官株第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),2在HTML文件中利用圖像建立鏈接,如果在鏈接標(biāo)記和的中間放置一個(gè)標(biāo)記，這個(gè)圖像將會(huì)成為一個(gè)可擊點(diǎn)，產(chǎn)生一個(gè)鏈接。例如：,當(dāng)用戶單擊這個(gè)圖像后，瀏覽器就會(huì)顯示“default.asp”這個(gè)文件的內(nèi)容了。,盈樞具企凱馮琵卸店此甚訖瞇舍喚偏攤庶澎貝牧卡擯易磊茲瞇諜青佛綁遷第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),2.5 框架結(jié)構(gòu)的使用,框架能夠?qū)㈨?yè)面分成數(shù)個(gè)獨(dú)立變化的窗

12、口，每個(gè)窗口可以顯示不同的Web頁(yè)面，并可以不斷更換顯示的對(duì)象.HTML語(yǔ)法為：,其中.中的內(nèi)容顯示在不支持分框的瀏覽器窗口中，因而這里指向一個(gè)普通版本的HTML文件，以便使用不支持分框?yàn)g覽器的用戶閱讀。,分框由指定，并且可以嵌套，分區(qū)中各部分顯示的內(nèi)容用指定。需要說(shuō)明的是，frame是一個(gè)新出現(xiàn)的元素，許多瀏覽器不支持它。分框可以將窗口橫向分成幾個(gè)部分，也可以縱向分成幾個(gè)部分，還可以混合分框。,僻襯揀絲西戰(zhàn)耐照搔亨棘紗搬掘炔份途獰嚴(yán)褐臟蘇窮矛蛙耕灑鮮硫聚馬陶第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),框架結(jié)構(gòu)標(biāo)記可以嵌套，用以實(shí)現(xiàn)大框架中的小框架。它主要有兩個(gè)屬性：ROWS和COLS，它們

13、可以將瀏覽器頁(yè)面分為N行M列，當(dāng)然也可以各自獨(dú)立使用。下面來(lái)看一個(gè)框架結(jié)構(gòu)的例子。其HTML源文件如下所示。,瀏覽,突撇鑄攤鑲誣哩沙父迭狀鱉濃劈遞倡汁屑換剁豫餓懂奧拱賴(lài)淑埔瑰審羚愛(ài)第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),標(biāo)記有以下主要屬性：,SRC屬性 指定框架單元的URL源，如第6行中指出的是當(dāng)前主機(jī)當(dāng)前目錄下的“a.htm”文件。即在此框中顯示“a.htm”的內(nèi)容。,NAME屬性 為該框架單元起個(gè)標(biāo)識(shí)名，主要用來(lái)為將來(lái)改變框架內(nèi)容提供入口。,SCROLLING屬性 設(shè)置框架是否使用滾動(dòng)條。有YES、NO和AUTO三個(gè)值，分別表示強(qiáng)制使用滾動(dòng)條，禁止使用滾動(dòng)條和自動(dòng)判斷使用滾動(dòng)條。,容

14、思豪曾稱(chēng)鏟杯勢(shì)膊忘貴鏈萍艙苫及保家落初刮禱塑錨補(bǔ)泄挨鑿竿忘宦豁第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),2.6 HTML中的表格,下面看一個(gè)表格的例子,從這個(gè)例子可以看出一個(gè)表格有一個(gè)標(biāo)題（Caption），它表明表格的主要內(nèi)容，并且一般位于表的上方；表格中由行和列分割成的單元叫做“表元”（Cell），它又分為表頭（用TH標(biāo)記來(lái)表示）和表數(shù)據(jù)（用TD標(biāo)記來(lái)表示）；表格中分割表示的行列線稱(chēng)為“框線”（Border）。,臭寓循綻籌頑委鑷喧媚隴二簇件撰若肪縫燙葫轎侗集芝豬獨(dú)姻莖枉癰軒軍第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),一個(gè)表格的基本框架如下所示：,1表格的標(biāo)記,葛剖走嘎嗽顫尹它群鞍只

15、盎汁察疲蹬闖炙且埠入士夷瘋棍扔猿謗鴉滅汕限第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),（1）TABLE標(biāo)記,一個(gè)表格至少一個(gè)TABLE標(biāo)記，由它來(lái)決定一個(gè)表格的開(kāi)始和結(jié)束，而且TABLE標(biāo)記可以嵌套。TABLE標(biāo)記有以下五種屬性：,BORDER屬性，指定圍繞表格的框的寬度（只能用像素）。,CELLSPACING屬性，指定內(nèi)框線的寬度,CELLPADDING屬性，設(shè)置表元內(nèi)容與邊框線之間的間距。,ALIGN屬性用來(lái)控制表格本身在頁(yè)面上的對(duì)齊方式。其取值可是LEFT（左對(duì)齊）、CENTER（居中對(duì)齊）、RIGHT（右對(duì)齊）。,WIDTH屬性，用來(lái)設(shè)置表格的寬度，可以以像素為單位，也可用占瀏覽器窗

16、口的百分比來(lái)定義。,肋亦岸開(kāi)風(fēng)瘧柔雷站戚控明發(fā)冉倍紗剝?cè)撑型覙锛粲垦钶椫櫃?quán)秉第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),（2）CAPTION標(biāo)記,CAPTION標(biāo)記用來(lái)標(biāo)注表格標(biāo)題的。CAPTION標(biāo)記必須緊接在TABLE開(kāi)始標(biāo)記之后放在第一個(gè)TR標(biāo)記之前。通過(guò)該標(biāo)記所定義的表格標(biāo)題一般顯示在表格的上方，而且其水平方向是居中對(duì)齊。另外，如需要對(duì)表格的標(biāo)題突出顯示，可以在CAPTION標(biāo)記之間加入其它對(duì)字體進(jìn)行加重顯示的標(biāo)記。如：,表格標(biāo)題強(qiáng)調(diào),.,戳鈍味彩浦打壕好頌憐驕倔桐柏扮克妹苯殊寇閹魏迸企尸及嬸伸只俞柑另第2章+網(wǎng)頁(yè)制作(1)第2章+網(wǎng)頁(yè)制作(1),（3）TR標(biāo)記,定義表格的一行。TR標(biāo)記中有兩個(gè)屬性，一個(gè)是ALIGN屬性，用來(lái)設(shè)置表行中的每個(gè)表元在水平方向的對(duì)齊方式，另一個(gè)是VLIGN屬性，用來(lái)設(shè)置表行中的每個(gè)表元在垂直方向的對(duì)齊方式，其取值可以是TOP（向上對(duì)齊）、CENTER（居中對(duì)齊）、BOTTOM（向下對(duì)齊）。,（4）TH標(biāo)記,TH標(biāo)記用來(lái)表示第一個(gè)表行（表頭）中的各個(gè)單元。TH標(biāo)記內(nèi)幾乎可以包含所有的HTML標(biāo)記，甚至還可以嵌套表格。該標(biāo)記與TR標(biāo)記同樣具有