4.網(wǎng)站外觀設(shè)計(jì)

1、四、網(wǎng)站外觀設(shè)計(jì),永城職業(yè)學(xué)院 彭勃,2,網(wǎng)站外觀的重要性,網(wǎng)站不僅要有能滿足客戶需求的功能，還要有一個(gè)美觀、合體的外觀。原因如下：如果你不稍微洗洗干凈，梳妝打扮一下就出來見人，人家會(huì)對(duì)你熱情客氣嗎？只想教你快點(diǎn)走開。外套很重要。哪怕你穿了件又臟又臭，還有幾個(gè)破洞的內(nèi)衣，只要外套搞得筆挺、干凈一點(diǎn)，整個(gè)人都會(huì)顯得精神，你的女朋友對(duì)你的第一印象就會(huì)好。當(dāng)然內(nèi)衣不是不重要，否則當(dāng)你脫掉了外套，露出了皺皺巴巴，領(lǐng)口黑黑的爛襯衫時(shí)，你的

2、女朋友準(zhǔn)把你的好形象一抹而空，八成就和你吹了。綜上，網(wǎng)站的外觀和功能同樣重要！,3,CSS是什么？,CSS（Cascading Style Sheet，層疊樣式表）是用于（增強(qiáng)）控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。在網(wǎng)頁(yè)中使用CSS的方法有三種：內(nèi)聯(lián)樣式嵌入樣式表鏈入外部樣式表,4,實(shí)驗(yàn)一（上） 內(nèi)聯(lián)樣式,5,CSS中的度量單位,px相對(duì)長(zhǎng)度單位。像素（Pixel）。像素，屏幕上顯示的最小單位，用于

3、網(wǎng)頁(yè)設(shè)計(jì)，直觀方便。pt絕對(duì)長(zhǎng)度單位。點(diǎn)（Point）。是一個(gè)標(biāo)準(zhǔn)的長(zhǎng)度單位，1pt＝1/72英寸，用于印刷業(yè)，非常簡(jiǎn)單易用。pc絕對(duì)長(zhǎng)度單位。皮卡（Pica）。1 皮卡 = 12 點(diǎn)。mm絕對(duì)長(zhǎng)度單位。毫米（Millimeter）。,6,CSS中的度量單位,cm絕對(duì)長(zhǎng)度單位。厘米（Centimeter）。in絕對(duì)長(zhǎng)度單位。英寸（Inch）。1in = 2.54cm = 25.4mm = 72pt = 6

4、pcem相對(duì)長(zhǎng)度單位，大寫字母“M”的高度。ex相對(duì)長(zhǎng)度單位。相對(duì)于小寫字母“x”的高度。此高度通常為字體高度的一半。,7,實(shí)驗(yàn)一（下） 嵌入樣式表,8,實(shí)驗(yàn)二 鏈入外部樣式表,9,樣式表中樣式的種類,元素樣式指定的所有HTML標(biāo)記都會(huì)使用該樣式。樣式類需被class屬性引用才能生效，常用于跨元素的相同樣式。ID樣式只能用在指定ID的單一元素。錨偽類將樣式應(yīng)用于動(dòng)作而非元素。,10,課后作業(yè),閱讀理解

5、第二天實(shí)驗(yàn)中使用的樣式表文件。用學(xué)到的樣式技巧，繼續(xù)改進(jìn)個(gè)人所選網(wǎng)站的（母版頁(yè)或其它頁(yè)面的）外觀布局。撰寫實(shí)驗(yàn)報(bào)告。,11,另一種外觀設(shè)計(jì)——主題,主題是ASP.NET 2.0中的新增功能，用來定義頁(yè)面和服務(wù)器端控件的外觀。主題由一組元素組成：皮膚，CSS，圖像和其它資源（控件所需圖片，腳本文件，聲音文件）。,12,為什么要使用主題？,服務(wù)器端控件在不同的瀏覽器上（尤其是老瀏覽器上）可能被翻譯成不同的標(biāo)記，所以需要一種專門用于服務(wù)

6、器端控件的外觀機(jī)制，這就是皮膚。當(dāng)所有的外觀都設(shè)計(jì)在主題中，且已經(jīng)創(chuàng)建了多個(gè)主題時(shí)，設(shè)計(jì)站點(diǎn)就可以不用考慮樣式，改變樣式時(shí)也無(wú)需更新頁(yè)或應(yīng)用程序代碼。,13,讓我們來為網(wǎng)站設(shè)計(jì)主題和皮膚吧！,14,實(shí)驗(yàn)三創(chuàng)建主題和源頁(yè)面,15,實(shí)驗(yàn)四 繼續(xù)擴(kuò)充源頁(yè)面,16,下次課，我們將學(xué)習(xí)ASP.NET皮膚的生成和主題的應(yīng)用！,17,實(shí)驗(yàn)五 由源頁(yè)面生成皮膚,將相同顏色的控件的源代碼復(fù)制粘貼到對(duì)應(yīng)顏色的skin文件中。刪除兩個(gè)skin文件中可

7、能存在的標(biāo)記。刪除所有控件的ID屬性。刪除Label控件的Text屬性，并各手動(dòng)添加一個(gè)SkinId屬性，值為"colorLabel"。為兩個(gè)文件中的ImageButton控件增加值為"homeImage"的SkinId屬性。,18,主題可包含多個(gè)皮膚,一個(gè)主題可以創(chuàng)建不只一個(gè).skin文件，這樣有助于將皮膚文件分成更小的片段。例如：將與登錄有關(guān)的控件的皮膚放到一個(gè).skin文件中，將數(shù)據(jù)庫(kù)

8、有關(guān)控件的皮膚放到另一個(gè).skin文件中。這樣有利于皮膚文件的管理和維護(hù)。,19,實(shí)驗(yàn)六 應(yīng)用主題,20,由此產(chǎn)生的問題,想一次對(duì)網(wǎng)站所有頁(yè)面應(yīng)用同一主題，怎么辦？,21,另一種應(yīng)用主題的方式,Page指示符除了有Theme屬性可以應(yīng)用主題外，還有一個(gè)StyleSheetTheme屬性也可應(yīng)用主題。Theme屬性的控制能力最強(qiáng)，會(huì)覆蓋控件的屬性設(shè)置；但是StyleSheetTheme屬性卻允許控件用自己的屬性設(shè)置覆蓋皮膚中設(shè)定的屬性。

9、優(yōu)先級(jí)： Theme主題＞控件屬性＞CSS樣式＞ StyleSheetTheme主題,22,實(shí)驗(yàn)七 StyleSheetTheme屬性應(yīng)用主題,Label1的Font-Bold屬性設(shè)為True，查看效果。將Label皮膚中增加Font-Bold="False"，查看效果。將頁(yè)面的Theme屬性更改為StyleSheetTheme屬性，再次運(yùn)行查看效果。,23,主題中包含CSS文件,主題由一組元素組成：皮膚，CS