Download presentation
Presentation is loading. Please wait.
1
第11章 網站外觀的一致化設計 11-1 CSS層級式樣式表 11-2 主版頁面 11-3 佈景與面板
2
11-1 CSS層級式樣式表 11-1-1 在ASP.NET網頁套用CSS樣式 11-1-2 在Visual Studio 建立新樣式
建立外部樣式表檔案 連結外部樣式表檔案 修改與管理CSS樣式
3
11-1 CSS層級式樣式表 「CSS」（Cascading Style Sheets）層級式樣式表是一種樣式語言能夠重新定義HTML標籤或ASP.NET控制項的顯示效果。 CSS樣式如同Word樣式庫，可以定義HTML標籤或ASP.NET控制項的顯示效果，例如：字型、背景、色彩和框線等。在Visual Studio Community提供圖形化介面來幫助我們建立CSS樣式，一般來說，在ASP.NET網頁有三種方式來套用CSS樣式。
4
11-1-1 在ASP.NET網頁套用CSS樣式- 局部套用的CSS
局部套用的CSS （In-Line Style Sheets）是定義在標籤程式碼中，其影響範圍也僅限於定義樣式的哪個標籤。ASP.NET控制項是使用樣式屬性，如下所示： <asp:TextBox ID="TextBox1" runat="server" BackColor="#3333CC" BorderStyle="Solid" ForeColor="White"/> 當執行ASP.NET網頁轉換成HTML標籤<input>，就是使用style屬性來定義樣式，如下所示： <input name="TextBox1" type="text" id="TextBox1" style="color:White;background-color:#3333CC;border-style:Solid;" />
5
11-1-1 在ASP.NET網頁套用CSS樣式- 內建網頁的CSS(定義樣式規則)
內建網頁的CSS （Embedded Style Sheet）是在網頁<body>標籤前，使用<style>標籤定義CSS樣式，其影響範圍是整個ASP.NET網頁的內容。我們可以自行定義樣式規則（Style Rules）的名稱，這是以「.」句點開始的名稱，如下所示： <style type="text/css"> .littlered {color: red; font-size: 9pt} .littlegreen {color: green; font-size: 9pt} </style>
6
11-1-1 在ASP.NET網頁套用CSS樣式- 內建網頁的CSS(套用樣式規則)
HTML標籤是使用Class屬性來指定樣式規則；ASP.NET控制項是使用CssClass屬性來指定樣式，如下所示： <p Class="littlered">自訂樣式規則</p> <asp:TextBox ID="TextBox1" runat="server" CssClass="littlegreen"/>
7
11-1-1 在ASP.NET網頁套用CSS樣式- 外部連結的CSS
如果針對整個ASP.NET網站，我們可以使用外部樣式表檔案（External Style Sheet） ，其副檔名為.css，換句話說，我們只需建立好樣式表檔案，就可以套用在整個ASP.NET網站的所有網頁，輕鬆建立一致顯示風格的網站內容。
8
11-1-2 在Visual Studio 建立新樣式-說明
在Visual Studio 建立新樣式預設是在<style>標籤新增CSS樣式，Visual Studio 提供圖形化介面來幫助我們建立CSS樣式，而不用自行撰寫樣式程式碼。 建立的CSS樣式
9
11-1-2 在Visual Studio 2015 建立新樣式-新增
請啟動Visual Studio 2015開啟ASP.NET網頁，執行「格式/新樣式」指令，可以看到「新樣式」對話方塊。 樣式名稱 樣式屬性
10
套用CSS樣式-說明 在ASP.NET網頁新增樣式規則後，我們可以選擇在「檢視」 /「屬性」或「管理樣式」視窗指定控制項套用CSS樣式規則。
11
套用CSS樣式- 使用屬性視窗 在「屬性」視窗上方選【<DIV>】，即<div>標籤，然後在【Class】屬性欄選【docStyle】樣式，可以看到設計檢視的標籤馬上套用此CSS樣式。
12
套用CSS樣式- 使用套用樣式視窗 請在設計檢視選取【TextBox1】控制項後，執行「檢視/管理樣式」命令開啟「管理樣式」視窗。在「本頁」區段選【.txtStyle】樣式規則，執行右鍵快顯功能表的【套用樣式】命令，在TextBox控制項套用.txtStyle樣式規則 。 選此樣式
13
11-1-3 套用CSS樣式-範例網站 ASP.NET網站：Ch11_1_3
在ASP.NET網頁已經新增上一節名為txtStyle和docStyle的樣式，現在我們準備分別在TextBox控制項和<div>標籤套用CSS樣式，如下圖所示：
14
建立外部樣式表檔案-建立 我們還可以將CSS樣式儲存成一個外部檔案，然後設定網頁連結外部樣式表，以便讓網站的網頁可以套用外部樣式表檔案內的CSS樣式。 選樣式表
15
建立外部樣式表檔案-內容 我們可以直接在編輯視窗輸入樣式程式碼，或從其他ASP.NET網頁搬移樣式規則，如右圖所示：
16
連結外部樣式表檔案-套用 執行「檢視/管理樣式」命令，可以看到「管理樣式」視窗。 在樣式清單已經擁有本頁CSS樣式規則，選游標所在【附加樣式表】圖示，可以看到「選取樣式表」對話方塊。 選取外部樣式表檔案
17
11-1-5 連結外部樣式表檔案-範例網站 ASP.NET網站：Ch11_1_5
在ASP.NET網站已經擁有上一節建立的main.css樣式表檔案，請在網站連結外部樣式表檔案後，分別在Default.aspx和Default2.aspx的Label和Button控制項套用.lblStyle和.btnStyle樣式規則，如下圖所示：
18
修改與管理CSS樣式- 清除套用樣式 開啟Default2.aspx的ASP.NET網頁，選取欲清除樣式的Button控制項，然後執行「檢視/CSS屬性」命令開啟「CSS屬性」視窗。在「套用的規則」框選【.btnStyle】，執行右鍵快顯功能表的【移除類別】命令，就可以清除控制項套用的CSS樣式。
19
11-1-6 修改與管理CSS樣式- 修改CSS的樣式屬性
在「CSS屬性」視窗可以更改HTML標籤或控制項套用的CSS樣式，例如：開啟Default2.aspx的ASP.NET網頁，選Label控制項，然後執行「檢視/CSS屬性」命令開啟「CSS屬性」視窗。 直接修改CSS屬性
20
修改與管理CSS樣式-管理樣式 在Visual Studio 2015開啟Default.aspx網頁的設計檢視後，就可以在「管理樣式」視窗管理ASP.NET網頁的本頁和外部樣式表的所有CSS樣式規則，如下圖所示： 2017/04/10
21
11-2 主版頁面 11-2-1 主版頁面的基礎 11-2-2 建立主版頁面 11-2-3 建立內容頁面 11-2-4 巢狀主版頁面
動態載入主版頁面
22
主版頁面的基礎-圖例 主版頁面可以將網頁分割成多個編輯區域，這是使用ContentPlaceHolder控制項標示的編輯區域，其他部分屬於網頁固定內容，可以讓網站每一頁網頁都擁有相同的外觀配置，如下圖所示：
23
主版頁面的基礎-主版頁面 主版頁面 主版頁面是使用ContentPlaceHolder控制項定義可編輯區域，其他部分是網站每一頁網頁都擁有的固定部分。我們可以在固定部分加上巡覽架構、公司商標和版權宣告等網頁內容。
24
主版頁面的基礎-內容頁面 內容頁面 內容頁面是使用Content控制項建立網頁內容，屬於網頁內容中會變動的部分，Content控制項內容可以填入主版頁面對應ContentPlaceHolder控制項的位置，在整合後才顯示出完整的網頁內容。
25
建立主版頁面-說明 ASP.NET的主版頁面可以分為兩部分：一是頁面配置，副檔名為.master的主版頁面，通常是使用HTML表格標籤來建立版面配置，以便編排ContentPlaceHolder控制項；二為套用主版頁面的內容頁面，即ASP.NET網頁。
26
11-2-2 建立主版頁面-建立 選【主版頁面】範本，在【名稱】欄輸入主版頁面名稱，勾選【將程式碼置於個別檔案中】，按【新增】鈕新增主版頁面
在「工具箱」視窗的【標準】區段，拖拉ContentPlaceHolder控制項來新增控制項
27
11-2-2 建立主版頁面-指引指令與ContentPlaceHolder控制項
主版頁面的副檔名是.master，一樣可以新增控制項、HTML標籤和程式碼。和ASP.NET網頁的主要差別是使用Master指引指令，如下所示： Master Language=“C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> 在主版頁面可以擁有0至多個ContentPlaceHolder控制項，如下所示： <asp:ContentPlaceHolder ID="MenuContent" runat="server"> </asp:ContentPlaceHolder>
28
勾選【選擇主版頁面】，按【新增】鈕新增ASP.NET網頁，可以看到「選取主版頁面」對話方塊
建立內容頁面-建立 ASP.NET組成主版頁面的第二部分，就是套用主版頁面的內容頁面，即擁有Content控制項的ASP.NET網頁。 勾選【選擇主版頁面】，按【新增】鈕新增ASP.NET網頁，可以看到「選取主版頁面」對話方塊
29
11-2-3 建立內容頁面- 指引指令與Content控制項
內容頁面的ASP.NET網頁是使用Page指示指令來指定套用的主版頁面，如下所示： Page Title="Ch11_2_3" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.cs" Inherits="_Default" %> ASP.NET網頁實際內容是位在Content控制項，如下所示： <asp:Content ID="Content2" ContentPlaceHolderID="MenuContent" runat="Server"> <p>巡覽控制項</p> </asp:Content>
30
11-2-3 建立內容頁面-範例網站 ASP.NET網站：Ch11_2_3
在ASP.NET網站已經建立MasterPage.master的主版頁面，我們可以在Visual Studio 新增ASP.NET網頁Default.aspx時，選擇套用此主版頁面，如下圖所示：
31
勾選【選擇主版頁面】，再套用其他主版頁面
巢狀主版頁面-建立 ASP.NET網站能夠建立多個主版頁面來定義不同的版面配置。不只如此，還可以建立主版頁面來繼承其他主版面頁的版面配置，也就是建立巢狀主版頁面，如下圖所示： 勾選【選擇主版頁面】，再套用其他主版頁面
32
11-2-4 巢狀主版頁面-指引指令 在巢狀主版頁面Frame.master是使用Master指示指令來指定上一層的父主版頁面，如下所示：
Master Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Frame.master.cs" Inherits="Frame" %>
33
11-2-4 巢狀主版頁面-範例網站 ASP.NET網站：Ch11_2_4
在ASP.NET網站已經擁有名為MasterPage.master主版頁面，我們準備再新增名為Frame.master主版頁面，繼承MasterPage.master主版面頁的版面配置，然後建立Default.aspx選擇套用此主版頁面，如下圖所示：
34
動態載入主版頁面-說明 網站內容頁面除了使用Page指引指令來指定套用的主版頁面外，也可以動態載入主版頁面，換句話說，網站可以建立不同色彩和配置的主版頁面後，讓ASP.NET網頁使用程式碼來動態決定套用哪一個主版頁面。
35
11-2-5 動態載入主版頁面- Page_PreInit()
ASP.NET網頁是在Page_PreInit()事件處理程序來動態載入主版頁面，如下所示： protected void Page_PreInit(object sender, EventArgs e) { Page.MasterPageFile = "Frame.master"; Page.Title = "動態載入主版頁面"; }
36
11-2-5 動態載入主版頁面-範例網站 ASP.NET網站：Ch11_2_5
此ASP.NET網站就是上一節的範例網站，只是刪除Default.aspx套用的主版頁面(去除MasterPageFile之設定)，準備建立Page_PreInit()事件處理程序來動態載入主版頁面Frame.master，如下圖所示：
37
11-3 佈景與面板 11-3-1 佈景與面板的基礎 11-3-2 建立面板檔案 11-3-3 在ASP.NET網頁套用佈景
預設與具名面板 覆寫控制項的面板
38
佈景與面板的基礎-說明 對於ASP.NET網站來說，維護網頁色彩、字型和尺寸等一致外觀的顯示效果是一件十分重要的工作。傳統網站設計者只能使用層級式樣式表CSS（Cascading Style Sheets）來格式化網頁元素的字型、色彩或尺寸。 ASP.NET佈景可以取代CSS功能，它包含樣式屬性、CSS和圖片，可以套用在伺服端控制項、Web Form表單或整個ASP.NET網站。ASP.NET佈景的組成元素有：面板檔案、CSS檔案和圖片檔案。
39
佈景與面板的基礎-佈景 ASP.NET的佈景是一個資料夾，內含指定網站顯示效果的相關檔案，這是位在ASP.NET網站根目錄下，名為App_Themes的子目錄，稱為佈景目錄（Themes Directory）。 如果ASP.NET網站需要套用佈景，請先在Visual Studio 2015的「方案總管」視窗的網站目錄上，執行右鍵快顯功能表的「加入/加入ASP.NET資料夾/佈景主題 」指令建立此目錄，如右圖所示：
40
佈景與面板的基礎-面板 面板如同CSS樣式，它是控制項的外表，可以定義網頁元素的顯示外觀，事實上，每一個ASP.NET控制項都可以自行使用樣式屬性值來定義其顯示外觀。 ASP.NET的面板是定義在面板檔案，這是一個ANSI文字檔案，檔案名稱不需和佈景同名，只需副檔名為.skin即可，其內容就是包含樣式屬性的控制項標籤，只是沒有ID等屬性值。
41
建立面板檔案-說明 在ASP.NET的同一個佈景資料夾可以包含多個面板檔案，例如：替每一種控制項都建立專屬的面板檔案，雖然面板檔案有很多個，但是在執行ASP.NET網頁前，.NET Framework會先將位在佈景目錄下，所有面板檔案合併成一個檔案後，才套用到ASP.NET網頁，所以面板檔案的名稱並不重要，可以自行命名。
42
建立面板檔案-建立 選取「\App_Themes\MyTheme」子目錄，執行「檔案/新增/檔案」命令，可以看到「加入新項目」對話方塊。
43
11-3-2 建立面板檔案-面板檔內容 面板檔內容就是控制項標籤，標籤只有樣式屬性的外觀，並沒有ID屬性，如下所示：
<asp:TextBox BackColor="Maroon" ForeColor="White" BorderStyle="Solid" runat="server"/> <asp:Button BackColor="Maroon“ ForeColor="White" Font-Bold="True" runat="server"/>
44
11-3-3 在ASP.NET網頁套用佈景-套用佈景
當建立好面板檔案後，就可以在ASP.NET網頁本身的Theme屬性來指定套用的佈景。請在「屬性」視窗上方選【DOCUMENT】，在【Theme】屬性欄選【MyTheme】佈景，如下圖所示：
45
11-3-3 在ASP.NET網頁套用佈景-範例網站
ASP.NET網站：Ch11_3_3 在ASP.NET網站已經建立名為MyTheme的佈景，現在我們準備在Default.aspx網頁套用此佈景，如下圖所示：
46
預設與具名面板-說明 在面板檔案的控制項標籤中，如果沒有SkinId屬性稱為預設面板（Default Skins），指定SkinId屬性稱為具名面板（Named Skins），其說明如下所示： 預設面板：自動套用在所有同種類的控制項，例如：套用在網頁的所有Label控制項。 具名面板：因為面板有指定名稱，所以面板只套用在相同SkinId屬性值的控制項。
47
11-3-4 預設與具名面板-標籤內容 在面板檔案的控制項標籤，如下所示： 2個Label控制項的第1個是預設面板，第2個是具名面板。
<asp:Label ForeColor="White" BackColor="Maroon" Runat="server"/> <asp:Label SkinId="RedLabel" Runat="server" ForeColor="White" BackColor="Red"/> 2個Label控制項的第1個是預設面板，第2個是具名面板。
48
11-3-4 預設與具名面板-範例網站 ASP.NET網站：Ch11_3_4
在ASP.NET網站已經建立名為MyTheme的佈景，內含Label.skin面板檔案，擁有預設面板、名為RedLabel、BlueLabel和GreenLabel的具名面板，現在我們準備在Default.aspx網頁套用此佈景，如下圖所示：
49
覆寫控制項的面板-說明 在上一節的範例，雖然Label控制項已經指定BackColor和ForeColor樣式屬性，但是樣式內容會被面板檔案的樣式所取代。 如果想在ASP.NET網頁指定樣式屬性來覆寫面板檔案的控制項樣式，此時套用佈景是使用StyleSheetTheme屬性。
50
11-3-5 覆寫控制項的面板-範例網站 ASP.NET網站：Ch11_3_5
此ASP.NET網站和上一節相同，只是在Default.aspx網頁再新增了一個Label控制項，且改為使用StyleSheetTheme屬性套用佈景，如下圖所示：
Similar presentations
