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

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

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

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

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

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

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

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

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

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