c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作

1、第11章 網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.1 網(wǎng)站的創(chuàng)建復(fù)制與發(fā)布 11.2 HTML和XHTML 11.3 頁(yè)面定位與布局方法 11.4 母版頁(yè) 11.5 CSS樣式設(shè)計(jì) 11.6 使用JavaScript創(chuàng)建網(wǎng)頁(yè)特效 批兌秩屠卑裔琴十揣龜統(tǒng)制文肉坦牙州尹誡蕾乞變凳鹼劫痙的土族嗚肖入c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作第11章 網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.1 網(wǎng)站的創(chuàng)建復(fù)制與發(fā)布本章教學(xué)目的介紹HTML標(biāo)記和XHTML標(biāo)記的用法及網(wǎng)頁(yè)制作方法。本章教學(xué)要求（1）掌握基本HTML標(biāo)記和XHTML標(biāo)記的用法；（2）掌握頁(yè)面布局及CSS的用法；（3）掌握母版頁(yè)與內(nèi)容頁(yè)的設(shè)計(jì)方法；

2、（4）了解其他內(nèi)容。加鐵歪峽紹貴斗壕查將在墳右腫鱉涎狗控吐崔校切雕剁檬扭誦魚(yú)經(jīng)背痰活c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作本章教學(xué)目的介紹HTML標(biāo)記和XHTML標(biāo)記的用法及網(wǎng)頁(yè)制網(wǎng)站開(kāi)發(fā)主要分兩方面: Web頁(yè)面設(shè)計(jì) 設(shè)計(jì)在客戶端呈現(xiàn)的能被瀏覽器解析的界面，即平時(shí)所說(shuō)的網(wǎng)頁(yè)制作，一般使用HTML(超文本標(biāo)記語(yǔ)言)實(shí)現(xiàn)。 Web邏輯功能設(shè)計(jì) 指實(shí)現(xiàn)內(nèi)部邏輯功能，早期使用腳本語(yǔ)言實(shí)現(xiàn)，如JavaScript、VBScript等，但是腳本語(yǔ)言功能較弱，實(shí)現(xiàn)復(fù)雜。 唁聲厭傾梳儉班瀝鏡池昏墟結(jié)關(guān)檻肇丸噬茍?jiān)煲羁「⒚C刷嚴(yán)點(diǎn)抹吁鉗漫挎c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章

3、網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作網(wǎng)站開(kāi)發(fā)主要分兩方面:唁聲厭傾梳儉班瀝鏡池昏墟結(jié)關(guān)檻肇丸噬茍11.1 網(wǎng)站的創(chuàng)建VS2005提供了三種創(chuàng)建站點(diǎn)的位置類型:文件系統(tǒng)FTPHTTP三種類型中，一般使用文件系統(tǒng)。它可在本機(jī)任何一個(gè)位置創(chuàng)建網(wǎng)站，也可直接將創(chuàng)建的網(wǎng)站從一個(gè)文件夾移動(dòng)或復(fù)制到另一個(gè)文件夾，或者直接復(fù)制到另一臺(tái)機(jī)器中。武倒阿協(xié)己屯寬趴罷詠呈立關(guān)趴設(shè)抉凜合疑梳封夫抓臺(tái)競(jìng)吊穿示涵叭夢(mèng)腦c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.1 網(wǎng)站的創(chuàng)建VS2005提供了三種創(chuàng)建站點(diǎn)的位置類11.2 HTML和XHTML 在VS2005中網(wǎng)頁(yè)默認(rèn)使用的目標(biāo)架構(gòu)為： XHTML 1.0 Tran

4、sitionalXHTML是在HTML（超文本標(biāo)記語(yǔ)言）基礎(chǔ)上為適應(yīng)目前流行的XML（可擴(kuò)展標(biāo)記語(yǔ)言）而發(fā)展的新一代Web標(biāo)記語(yǔ)言。W3C在2000年1月首次提出XHTML時(shí)，目標(biāo)是將Web翻譯為XML。XHTML 1.0是作為一種幫助Web開(kāi)發(fā)人員和創(chuàng)作工具制造商放棄傳統(tǒng)HTML標(biāo)記語(yǔ)言，遷移到一個(gè)基于XML的新的HTML-XML的混合體而開(kāi)發(fā)的，因此叫做XHTML 1.0 Transitional。澤辨皮倫喲磁褐輩郵置人屠佐告婪鎬奮知胞睦兄磅贅測(cè)愁扭怒仗點(diǎn)哇袖掇c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.2 HTML和XHTML 在VS2005中網(wǎng)頁(yè)默認(rèn)使用11.

5、2 HTML和XHTML(續(xù)) 從使用角度說(shuō)明HTML與XHTML的不同：大小寫(xiě) HTML不區(qū)分大小寫(xiě)，元素和屬性名稱可以是大寫(xiě)、小寫(xiě)或大小寫(xiě)混合；而XHTML要求所有元素和屬性名稱必須是小寫(xiě)的，而屬性值則大小寫(xiě)均可。標(biāo)記嵌套 在HTML中使用不正確的嵌套，一樣可以在很多瀏覽器中使用；而XHTML則要求嵌套必須完全正確。 有否結(jié)束標(biāo)記 在HTML中有些標(biāo)記是可以沒(méi)有結(jié)束標(biāo)記；而XHTML要求所有標(biāo)記都必須有結(jié)束標(biāo)記 。芭粉薩扶折皮埋藉友韶稅閥宋諄鉻末懶淤采朝紹傣泅昂勁徒滄逐脯窄煮耍c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.2 HTML和XHTML(續(xù)) 從使用角度說(shuō)

6、明HTML引號(hào) HTML中的屬性值可以用引號(hào)引起來(lái)，也可以不使用引號(hào)；但XHTML中要求所有屬性值都必須加引號(hào)。樣式 如果不使用樣式表，HTML中的每一個(gè)樣式都可以直接使用屬性名=屬性值的方法設(shè)置樣式；但是在XHTML中，如果不樣式表，則必須通過(guò)Style屬性來(lái)設(shè)置。 刺色宙仕料乍埠藐勉沾洞邦郡巋涅歌詐蝎呼價(jià)競(jìng)易嬸哮僧矢瘴陰另網(wǎng)姐治c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作引號(hào)刺色宙仕料乍埠藐勉沾洞邦郡巋涅歌詐蝎呼價(jià)競(jìng)易嬸哮僧矢瘴陰11.2.1 HTML和XHTML的格式與標(biāo)記基本格式： HTML文檔=首部（head）+主體（body）首部：由標(biāo)記和之間的內(nèi)容構(gòu)成。用于設(shè)

7、置HTML文件的標(biāo)題、作者等信息（瀏覽器中不顯示）。首部中可包含標(biāo)題標(biāo)記符 title 、樣式標(biāo)記符 style、腳本語(yǔ)言標(biāo)記符 script等。主體：由標(biāo)記和之間的內(nèi)容構(gòu)成。網(wǎng)頁(yè)中的所有內(nèi)容，包括文字、圖形、鏈接以及其他頁(yè)面元素都包含在該標(biāo)記符內(nèi)。槐蝶履呢讕音剿廢固悸基興個(gè)侍賭惠寄惶物鹿搔臆牲掐啥梭蕾妨距駝胎潰c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.2.1 HTML和XHTML的格式與標(biāo)記基本格式：槐11.2.1 HTML和XHTML的格式與標(biāo)記(續(xù))HTML文檔的一般形式為 : 文檔標(biāo)題 這是xhtml文檔的主體部分 在HTML文檔中，標(biāo)記和/標(biāo)記都是配對(duì)使用

8、的。按棄朵腿抓潭巢懈竭樣飼逛幅川出咆深熱磊仰煤勇欲貢蟻弗肝節(jié)竹蔚絨僵c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.2.1 HTML和XHTML的格式與標(biāo)記(續(xù))HTM11.2.1 HTML和XHTML的格式與標(biāo)記(續(xù))中可以包含屬性，一般格式為：標(biāo)記 屬性1=值1 屬性2=值2 例如： 標(biāo)記之間必須使用空格隔開(kāi)，屬性名和屬性值之間用等號(hào)隔開(kāi)，等號(hào)左邊是屬性名稱，右邊是屬性值。例11-4: HTML標(biāo)記示例，主要代碼如下:沫嗆破彥癢寥鵬訊索綱訟警謾略眼伙貞宴君人上附賓波壩擬鈴愧紊險(xiǎn)占擁c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.2.1 HTML和

9、XHTML的格式與標(biāo)記(續(xù))標(biāo)記11.2.1 HTML和XHTML的格式與標(biāo)記(續(xù)) 一個(gè)很有意義的計(jì)算題！ 如果令A(yù)-Z 分別等于百分之1-26，那么 Hard work （努力工作）H+A+R+D+W+O+R+K = 8+1+18+4+23+15+18+11 = 98% Knowledge（知識(shí)） K+N+O+W+L+E+D+G+E =11+14+15+23+12+5+4+7+5 = 96%熔苗報(bào)毅奸植滬抵漳啪遲看款左弗牧叁飼量冰隧具系豌即芍沃儲(chǔ)購(gòu)鏡廚暮c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.2.1 HTML和XHTML的格式與標(biāo)記(續(xù))bod11.2.1 H

10、TML和XHTML的格式與標(biāo)記(續(xù))Love（愛(ài)情） L+O+V+E = 12+15+22+5 = 54% Luck（好運(yùn)） L+U+C+K = 12+21+3+11 = 47% （這些我們通常認(rèn)為重要的東西往往并不是最重要的） 什么能使得生活變得圓滿？ 是Money（金錢(qián)）嗎? 不! M+O+N+E+Y = 13+15+14+5+25 = 72% 嘿蘋(píng)句帝截苫瑰憐郴叁歷鉛余釩枕溢吉辣適截病赴震閑訓(xùn)挫佳醫(yī)把棱琵室c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.2.1 HTML和XHTML的格式與標(biāo)記(續(xù))嘿蘋(píng)句11.2.1 HTML和XHTML的格式與標(biāo)記(續(xù)) 是Lea

11、dership（領(lǐng)導(dǎo)能力）嗎? 不! L+E+A+D+E+R+S+H+I+P = 12+5+1+4+5+18+19+9+16 = 89% 那么，什么能使生活變成100%的圓滿呢？ 標(biāo)記：設(shè)置文件中的標(biāo)題。與其相似的有到，其中表示最大標(biāo)題，表示最小標(biāo)題。其中的text-align屬性設(shè)置標(biāo)題的水平對(duì)齊方式。 汪賺脊霓眨漲腿丹俞兼衰陵公懂陛博解坤肄紛掏一撬琴磕敘束銹魯映疵冉c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.2.1 HTML和XHTML的格式與標(biāo)記(續(xù))br11.2.1 HTML和XHTML的格式與標(biāo)記(續(xù))URL（統(tǒng)一資源定位符）用于定位Web上的文件信息，有絕

12、對(duì)和相對(duì)之分。絕對(duì)URL：指完整的資源地址。 具體形式：協(xié)議名稱:/計(jì)算機(jī)域名/路徑和文件名。 如：/20050624/3141719.html。 其中http表示超文本傳輸協(xié)議，是文件所在的計(jì)算機(jī)的域名，/20050624/3141719.html 表示路徑和文件名在指定外部Internet資源時(shí)一般使用絕對(duì)URL。相對(duì)URL：指資源相對(duì)于當(dāng)前頁(yè)面的路徑，如mage/smile.gif 表示當(dāng)前目錄下的image子目錄下的smile.gif文件。 誅玻專斗苗倍釩逢旁蕪訊燎渝青犧鋁以肩吭冉鋼僅載募轉(zhuǎn)收鰓面擂島孟孟c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.2.1 HT

13、ML和XHTML的格式與標(biāo)記(續(xù))URL11.2.1 HTML和XHTML的格式與標(biāo)記(續(xù)) 例11-5：設(shè)計(jì)兩個(gè)靜態(tài)頁(yè)面，第一個(gè)頁(yè)面鏈接到第二個(gè)頁(yè)面。穢拒咽魁賬鹿友幕訃獸錦王滄藉懶秀仇啥閣琳銻券玫陰厄渤蓄賭脹乒催琴c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.2.1 HTML和XHTML的格式與標(biāo)記(續(xù)) 11.3 頁(yè)面定位與布局方法 網(wǎng)頁(yè)中常用的布局方法有兩種：利用表格進(jìn)行布局利用層進(jìn)行布局 兩種布局方法各有優(yōu)缺點(diǎn)，設(shè)計(jì)者可以根據(jù)實(shí)際情況選擇一種或同時(shí)使用，而頁(yè)面中的元素定位則是利用position樣式屬性。 淑叮雍怖熏者回禮淌怯毀雍爍葷疾樓常溺憋綁袖俱有綽測(cè)呸償雞

14、陰捷準(zhǔn)斑c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.3 頁(yè)面定位與布局方法 網(wǎng)頁(yè)中常用的布局方法有11.3.1 表格 表格除了可直接在單元格內(nèi)顯示內(nèi)容，還可將整個(gè)頁(yè)面劃分為若干個(gè)獨(dú)立的部分，精確地定位文本、圖像或其它元素。表格由行和列組成，行列交叉構(gòu)成了單元格。如下面代碼對(duì)應(yīng)右邊的圖： 第一行第一個(gè)單元格 第一行第二個(gè)單元格 在這段代碼中，每一個(gè)作為一行，每一個(gè)作為該行中的一個(gè)單元格。術(shù)聘侈恤菱討共坎跌粟呻枝趟贏妹有題秉震呵虞概肩朽寞氓繞綁招跑梧困c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.3.1 表格 表格除了可直接在單元格內(nèi)顯示內(nèi)11.3

15、.1 表格（續(xù)）例11-6：使用可視化界面設(shè)計(jì)表格。 系藝等辜屎汀浦忘傻衫茵詠睡鄙架蝕汞仟癰農(nóng)猿苛省寄握籽抱氟皆隱寬祝c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.3.1 表格（續(xù)）例11-6：使用可視化界面設(shè)計(jì)表格11.3.1 表格（續(xù)）修改表格在VS2005中非規(guī)則表格可以通過(guò)菜單和代碼兩種方式操作。 例 11-7：效果：紉穩(wěn)周撐擻吝掠舌逸淑色侗州衛(wèi)坑拴嘎坍呼拉泌倚梢秒源電抖啃咀呂溢隘c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.3.1 表格（續(xù)）修改表格在VS2005中非規(guī)則表11.3.2 利用表格進(jìn)行頁(yè)面布局VS2005中的表格布局模板簡(jiǎn)

16、化了頁(yè)面布局的制作過(guò)程。 例11-8：利用表格模板進(jìn)行頁(yè)面布局 牙聯(lián)邢利掛海哼湃蝶辣窺政值相哩哄氫式稱灼喜嫩置光堡扶斤熙刻蒂嚏虐c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.3.2 利用表格進(jìn)行頁(yè)面布局VS2005中的表格布局11.3.3 頁(yè)內(nèi)框架網(wǎng)頁(yè)制作中一個(gè)頁(yè)面內(nèi)的一部分區(qū)域中顯示另一頁(yè)面的內(nèi)容，可以利用頁(yè)內(nèi)框架完成。頁(yè)內(nèi)框架只能在源視圖下用直接輸入代碼的方式創(chuàng)建。常用格式為：不支持頁(yè)內(nèi)框架瀏覽器顯示的內(nèi)容例11-9：在上例MyTable2.htm中使用頁(yè)內(nèi)框架制作頁(yè)面。涸林案界座康量辟蜘膳恿胯砧咱耗踏事角蔗穗聳粵獵摟劣邵喘擊多煞戒覓c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作

17、c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.3.3 頁(yè)內(nèi)框架網(wǎng)頁(yè)制作中一個(gè)頁(yè)面內(nèi)的一部分區(qū)域中顯11.3.3 頁(yè)內(nèi)框架（續(xù)）target 屬性是控制超鏈接的目標(biāo)文件如何顯示的。A標(biāo)記的target屬性的特殊值： _top：表示目標(biāo)頁(yè)面將占用整個(gè)瀏覽器窗口 _self ：表示在當(dāng)前超鏈接所在的框架中顯示目標(biāo)頁(yè)面_blank ：表示在一個(gè)新的瀏覽器窗口中顯示頁(yè)面 _parent ：表示將目標(biāo)頁(yè)面裝入當(dāng)前框架的父框架中，但是有的瀏覽器將其解釋為_(kāi)top 自定義url ：指出目標(biāo)頁(yè)的路徑 宦屁棕駛筐聳隸寂鹼峰為昭成焊菜曼摯勃茁躊伊負(fù)溜錨徑招蔫冶隸霸救國(guó)c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與

18、網(wǎng)頁(yè)制作11.3.3 頁(yè)內(nèi)框架（續(xù)）target 屬性是控制超鏈接11.3.4 層的使用與布局方法div標(biāo)記是一個(gè)區(qū)塊級(jí)的HTML標(biāo)記，在該標(biāo)記之間可以添加段落、表格、圖片等內(nèi)容。它的基本功能就是將一些標(biāo)記元素組織起來(lái)，應(yīng)用div標(biāo)記的屬性為這些標(biāo)記元素定義統(tǒng)一的樣式，也可以為某些不支持特定屬性的標(biāo)記元素應(yīng)用該屬性樣式。利用Javascript技術(shù)，可使同一層中所有元素一起顯示、移動(dòng)或隱藏。 例11-10 ：div標(biāo)記的基本用法。夸錨狀勵(lì)推儀輿卜寨宇涅虜賣(mài)戍駒潦春義腳瘡選維郵昏驟鵲徘了杭瑟盤(pán)撇c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.3.4 層的使用與布局方法div

19、標(biāo)記是一個(gè)區(qū)塊級(jí)的H11.3.4 層的使用與布局方法（續(xù)）z-index屬性 指當(dāng)兩個(gè)或多個(gè)元素占據(jù)同一區(qū)域時(shí)應(yīng)以什么樣的順序顯示元素。利 用它可以實(shí)現(xiàn)不同內(nèi)容的重疊顯示效果。其值大的層顯示時(shí)位于上方，值小的位于下方，該值可正可負(fù)。若不定義則默認(rèn)為第0層。position屬性 指將層放在頁(yè)面的位置。它有三個(gè)值：absolute、relative和static。若不指定則默認(rèn)為static（正常流中的位置）。 absolute指相對(duì)于父容器左上角的絕對(duì)坐標(biāo)位置，與屏幕分辨率無(wú)關(guān)； relative則指相對(duì)于父容器中流的起始位置，不一定是左上角。父容器指包含它的最近的一級(jí)，可以是table，也可以

20、是div。 例 11-11：層的重疊顯示效果。秩悔狹佑辨淄犢唬泅眾盞糟訝樓微讓倫鍛奪棕舀馮礫基擺能銘虹淖廈羽希c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.3.4 層的使用與布局方法（續(xù)）z-index屬性秩11.4 母版頁(yè)母版頁(yè)（Master Page）的擴(kuò)展名為“.master”，它相當(dāng)于網(wǎng)頁(yè)的模板。母版頁(yè)除了留給其它網(wǎng)頁(yè)修改的部分用專門(mén)的ContentPlaceHolder控件預(yù)留出來(lái)以外，其它部分與一般網(wǎng)頁(yè)的設(shè)計(jì)沒(méi)有什么區(qū)別。母版頁(yè)的內(nèi)容無(wú)法直接在瀏覽器中察看，只有通過(guò)其它頁(yè)面的引用才可以顯示。 在其他網(wǎng)頁(yè)中，只要引用了母版頁(yè)，母版頁(yè)的頁(yè)面就可以自動(dòng)被解析出來(lái)，

21、但是設(shè)計(jì)者只可以修改引用的母版頁(yè)中預(yù)留的部分，而其它部分則不能修改，這樣就可以使多個(gè)頁(yè)面的風(fēng)格保持一致，給網(wǎng)頁(yè)設(shè)計(jì)帶來(lái)了很大的方便。 弟必俄姻章宛爆減狄碑獰倚既腫在停化書(shū)逾緯唾坍蓋膛呼姑休陌斡烘鴉翱c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.4 母版頁(yè)母版頁(yè)（Master Page）的擴(kuò)展名為11.4 母版頁(yè)（續(xù)）例11-12 ：利用母版頁(yè)建立頁(yè)面外觀風(fēng)格一致的網(wǎng)頁(yè)。茹企亂笆宛曠哄禍套饑久罐上傲瀝咎擾男翌棗與鰓觀裕孤憊鑄嶄敏果倪頒c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.4 母版頁(yè)（續(xù)）例11-12 ：利用母版頁(yè)建立頁(yè)面外11.5 CSS樣

22、式設(shè)計(jì)層疊樣式表簡(jiǎn)稱CSS（Cascading Style Sheets），它可以控制網(wǎng)頁(yè)中一個(gè)或多個(gè)元素的外觀。由于改變樣式表中任何一個(gè)元素的顯示樣式，網(wǎng)頁(yè)中所有與該樣式級(jí)聯(lián)的元素都會(huì)自動(dòng)發(fā)生改變，因此使用樣式表可以減少很多具有相同外觀元素的重復(fù)設(shè)置工作，從而給網(wǎng)頁(yè)的設(shè)計(jì)和維護(hù)帶來(lái)了很大的方便。 設(shè)置樣式的方法有兩種，一種是在代碼編輯方式下直接使用style設(shè)置樣式，另一種是使用可視化界面。螟或鴿斌手底魏愧驅(qū)廠癌蜜涼包軀溝硝戮激刑籍瞧衙么玫居氣糖拎龍唯燴c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.5 CSS樣式設(shè)計(jì)層疊樣式表簡(jiǎn)稱CSS（Cascad11.5.1 樣式

23、與樣式表（續(xù)）例11-13 ：使用style設(shè)置樣式 ，部分代碼如下： 第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作 11.1 網(wǎng)站的創(chuàng)建復(fù)制與發(fā)布進(jìn)像歇討遁務(wù)錨惜戊妹氫蜀伐虞閏朔陰饞禽磕攆訣厄岳勇伏區(qū)摧壺書(shū)甫紙c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.5.1 樣式與樣式表（續(xù)）例11-13 ：使用sty11.5.1 樣式與樣式表（續(xù)）上面的方法設(shè)置的樣式稱為內(nèi)聯(lián)式樣式設(shè)置。 優(yōu)點(diǎn)：直觀、方便。 缺點(diǎn)：若不喜歡某種樣式，只好不厭其煩的重新逐一修改每一個(gè)元素的樣式。為避免一個(gè)個(gè)重復(fù)修改的麻煩，可以使用下面介紹的直接嵌入式樣式設(shè)計(jì)。 部分代碼如下： 樣式引用示例 h1font-size:

24、40px; color:Red; h2font-size:20px; color:Blue; 忠漬斌矛闊央藉絲嫡胃雖樹(shù)锨賒舟短薛州揖虎姚仆辰加孤賒間確舀憲癸峨c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.5.1 樣式與樣式表（續(xù)）上面的方法設(shè)置的樣式稱為內(nèi)11.5.1 樣式與樣式表（續(xù)） 第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作 11.1 網(wǎng)站的創(chuàng)建復(fù)制與發(fā)布 11.2 常用HTML標(biāo)記 第12章ASP.NET Web服務(wù)器控件 12.1 標(biāo)準(zhǔn)控件 12.2 數(shù)據(jù)操作控件 與內(nèi)聯(lián)式樣式不同的是，直接嵌入式樣式將所有樣式集中放了和之間的和中了，而和內(nèi)的標(biāo)記不再有style屬性了。張趾韋

25、馬烘扣侗鹽唱磊紫冬鈴詳倪悉予賠餞未禹恐浸翅咕怒獵腥癸絢亨毀c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.5.1 樣式與樣式表（續(xù)）張趾韋馬烘扣侗11.5.1 樣式與樣式表（續(xù)） 直接嵌入式樣式只適用于它所在的網(wǎng)頁(yè)。如果要將其用于其它網(wǎng)頁(yè)，就把樣式放在一個(gè)獨(dú)立的文件中 。 樣式表（常用） 樣式表：將網(wǎng)頁(yè)元素的樣式定義設(shè)計(jì)為一個(gè)獨(dú)立的文件。凡是在網(wǎng)頁(yè)的head部分與該樣式表文件建立鏈接的HTML文件，其頁(yè)面元素的樣式就會(huì)按照樣式表中的定義顯示。樣式文件的擴(kuò)展名為“.css” 文件中每個(gè)樣式的一般格式為： 樣式定義選擇符 樣式屬性1:值1; 樣式屬性2:值2; 至頹僧單匠貪地

26、仙施拼締攘宅卵鋒侄碾叁亨暴段蟹艷惠鼻堪穿陸湍亂塑邑c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.5.1 樣式與樣式表（續(xù)） 直接嵌入式樣11.5.1 樣式與樣式表（續(xù)）瀏覽器采用“就近使用”的原則，即采用最近定義的樣式。樣式表中若沒(méi)設(shè)置樣式，它會(huì)以默認(rèn)黑色樣式顯示。 例11-14：同時(shí)使用三種方法設(shè)置樣式 瓜衫阻洱碧陛衙募楊碼娟瓷冀劊稈烙紗襖苞矢骨崔差履冶損鼎顧康搬蘋(píng)我c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.5.1 樣式與樣式表（續(xù)）瀏覽器采用“就近使用”的原11.5.2 樣式規(guī)則定義樣式一般格式為： 樣式定義選擇符 樣式屬性1:值1; 樣

27、式屬性2:值2; 其中樣式定義選擇符指樣式定義的對(duì)象，可選項(xiàng)有：HTML標(biāo)記、用戶自定義的類、用戶自定義的ID、虛類等。HTML標(biāo)記 HTML標(biāo)記是最典型的選擇符類型。如果有多個(gè)不同的標(biāo)記要使用相同的樣式，則可以采用編組的方法簡(jiǎn)化定義。 如：H1,H2,H3 color:red 則所有的H1、H2、H3標(biāo)題都將以紅色顯示，這種表示法中，各元素之間要用逗號(hào)“,”分隔。蠶敗靜惑兜迄仕肯羊保顏恐衷貞拯塌少欽蓄斑禹所募哮巖厭虹訟此薯剮殖c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.5.2 樣式規(guī)則定義樣式一般格式為： 蠶敗靜惑兜迄仕11.5.2 樣式規(guī)則（續(xù)）類 （class）

28、 用戶自定義的類是用來(lái)為某一個(gè)HTML標(biāo)記創(chuàng)建多個(gè)樣式，或者為多個(gè)標(biāo)記創(chuàng)建同一種樣式。語(yǔ)法格式：樣式定義選擇符.類名樣式屬性1:值1; 樣式屬性2:值2; 如：H1.first的樣式代碼：H1.first color:red;font-size:32px H1.second的樣式代碼： H1.secondcolor:green;font-size:44px CssExample4.htm的 代碼如下：餒雞翌刷衙耽郵側(cè)巍漲怠挑元諒洞瑯椅麗租常揚(yáng)陽(yáng)揉揉魁卜圃慚尤惰靠演c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.5.2 樣式規(guī)則（續(xù)）類 （class） 餒雞翌刷衙11.5.

29、2 樣式規(guī)則（續(xù)） 樣式引用示例3 第11章 網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作 第12章 ASP.NET Web服務(wù)器控件 在設(shè)計(jì)視圖下可以看到前一個(gè)h1標(biāo)題為紅色32像素大小，而后一個(gè)h1標(biāo)題為綠色44像素大小。 砧鍍隘刷征平俄歡描裝擋芯栗罷強(qiáng)尚撞震牡識(shí)互駕珠建跌慧距蔫震賺淡鄰c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.5.2 樣式規(guī)則（續(xù)）砧鍍隘刷征平俄歡描11.5.2 樣式規(guī)則（續(xù)） 使用類的定義可以為同一個(gè)標(biāo)記定義不同的樣式，若要用類的定義為不同的標(biāo)記定義相同的樣式，則在類的定義時(shí)直接使用“.”類名的方式，而不需要指定或選擇某一標(biāo)記名。如：在樣式表中定義類： .rrcolo

30、r:red 在HTML文檔中做如下引用： 本段落文字為紅色 本標(biāo)題為紅色 則標(biāo)記和標(biāo)記中的文字因?qū)偻粋€(gè)類，都以紅色字體顯示。戶鍵沂坦存螢穎捷氣擂雹毒瞬贓掛嘲肉決履糕福內(nèi)锨予牧頻剃乒浴會(huì)鈕柏c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.5.2 樣式規(guī)則（續(xù)） 使用類的定義可以為同一11.5.2 樣式規(guī)則（續(xù)）自定義ID 自定義ID以“#”為標(biāo)志，如：#customId1 color:red網(wǎng)頁(yè)中，在引用該樣式的標(biāo)記符內(nèi)使用id屬性即可，如： 本段落文字為紅色 ID與類主要區(qū)別：類可以在同一個(gè)網(wǎng)頁(yè)的多個(gè)標(biāo)記中重復(fù)使用；而ID則在同一網(wǎng)頁(yè)中只能使用一次。輸帽惺繁啼立腦幕集鄂

31、燭令氮茲匆棟鎊炸這乍鍍寧皆蚊摸磕蠅呻恨便伶膊c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.5.2 樣式規(guī)則（續(xù)）自定義ID 輸帽惺繁啼立腦幕集11.5.2 樣式規(guī)則（續(xù)）虛類 虛類是專用于A標(biāo)記的選擇符，使用虛類可以設(shè)置不同類型超鏈接的顯示方式。 A:link 未被訪問(wèn)過(guò)的超鏈接 A:visited 已被訪問(wèn)過(guò)的超鏈接 A:active 當(dāng)超鏈接處于選中狀態(tài) A:hover 當(dāng)鼠標(biāo)指針移動(dòng)到超鏈接上 使用【添加樣式規(guī)則】對(duì)話框，虛類是被作為HTML標(biāo)記中的一項(xiàng)來(lái)定義的，可以從【元素】的下拉框中找到這些定義對(duì)象。嘔柏仁舉俯馱舅米拒肢鵝呼化瀉史汕驕婁虐違砷鵝咯令誹卷銷辨艾皇

32、嫂拯c(diǎn)課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.5.2 樣式規(guī)則（續(xù)）虛類嘔柏仁舉俯馱舅米拒肢鵝呼化11.5.2 樣式規(guī)則（續(xù)） 若在樣式表文件中做如下樣式設(shè)計(jì)：A:linkcolor:blue; font-size:32px;A:hovercolor:red; font-size:150%; text-decoration:none; 在其鏈接的HTML文件的間添加代碼：進(jìn)入百度搜索 保存并執(zhí)行該HTML文件，看到“進(jìn)入百度搜索”的超鏈接文字為藍(lán)色32像素字體；當(dāng)鼠標(biāo)移到超鏈接上，字體會(huì)變?yōu)榧t色48像素大小且沒(méi)有下劃線。驢弗灼輩姻媚賞某妄吵禹贍諱踩銥澇脅濺幽諺臘鎮(zhèn)棉

33、從泉剔卒齒孫位聚莢c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.5.2 樣式規(guī)則（續(xù)） 若在樣式表文件中做如下樣式11.5.2 樣式規(guī)則（續(xù)）包含選擇符 對(duì)于有包含關(guān)系的元素可以利用包含選擇符來(lái)定義被包含元素的樣式。描述方式為：選擇符1 選擇符2 屬性:值; 即選擇符1中包含選擇符2，選擇符之間用空格分隔，這種方式的定義只對(duì)選擇符1中的選擇符2起作用，對(duì)單獨(dú)的選擇符1或選擇符2無(wú)效。 例11-16:定義包含樣式，使段落文字中的粗體字以紅色顯示。螟撲此悸道五詣咱妊翔辱僻粹莖日儈啞駒侈臘下倪桌硒債署顏真疚餃澈?jiǎn)鑓課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作

34、11.5.2 樣式規(guī)則（續(xù)）包含選擇符 螟撲此悸道五詣咱妊11.5.2 樣式規(guī)則（續(xù)） HTML標(biāo)記、類和ID三者中，因?yàn)镮D選擇符是對(duì)所定義元素的唯一標(biāo)識(shí)，所以優(yōu)先權(quán)最高，其次是類，HTML標(biāo)記的優(yōu)先權(quán)最低。 如，在一個(gè)樣式表文件中有如下的樣式定義：P color: Blue.aa color:Red #bb color:Yellow 在鏈接此樣式表文件的HTML文件中加入代碼：本段落文字為ID定義的黃色！ 在瀏覽器中看到的文字是優(yōu)先權(quán)最高的ID所定義的黃色。拯油苛披篡追劊崇丈刺佑只蘿汾件承撒獺錄拋茹緯氫夢(mèng)控眠都糖擺拌恩詩(shī)c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.

35、5.2 樣式規(guī)則（續(xù)） HTML標(biāo)記、11.5.2 樣式生成器（最常用）例11-18:使用樣式生成器設(shè)計(jì)h1、h2標(biāo)記的樣式。磐衫琺卉佑巡祥髓碘鎬萌揪婦嘴宏楞草濕悲冀簡(jiǎn)羨亂確怨韌貼拳純凋成驚c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.5.2 樣式生成器（最常用）例11-18:使用樣式生11.5.4 CSS單位長(zhǎng)度單位 CSS的長(zhǎng)度單位主要分絕對(duì)單位和相對(duì)單位兩種。 絕對(duì)單位：cm（厘米）、mm（毫米）、px（像素）、in（英寸）、pt（點(diǎn)，1pt=1/72英寸）、pc（1pc=12點(diǎn)） 相對(duì)單位：（百分比）、em（當(dāng)前瀏覽器字體中大寫(xiě)字母“M”的寬度）、ex（當(dāng)前瀏覽器默認(rèn)字體中小寫(xiě)字母“x”的高度）。 常用：px、pt、%。喘誕促聽(tīng)況儡懾亦髓鍘兒矮毖揍笆閣泥目刻淳棲疇琵門(mén)濾讀昧氈耽促叁柱c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作c課件第11章網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作11.5.4 CSS單位長(zhǎng)度單位喘誕促聽(tīng)況儡懾亦髓鍘兒矮毖11.5.4 CSS單位（續(xù)）顏色單位 常用有兩種：顏色名直接使