網站外觀的一致化設計

Download Report

Transcript 網站外觀的一致化設計 

第11章 網站外觀的一致
化設計
第11章 網站外觀的一致化設計
 11-1
CSS層級式樣式表
 11-2 主版頁面
 11-3 佈景與面板
11-1 CSS層級式樣式表
在ASP.NET網頁套用CSS樣式
 11-1-2 在VWD建立新樣式
 11-1-3 套用CSS樣式
 11-1-4 建立外部樣式表檔案
 11-1-5 連結外部樣式表檔案
 11-1-6 修改與管理CSS樣式
 11-1-1
11-1 CSS層級式樣式表
 「CSS」（Cascading
Style Sheets）層級
式樣式表是一種樣式語言能夠重新定義
HTML標籤或ASP.NET控制項的顯示效果。
 CSS樣式如同Word樣式庫，可以定義
HTML標籤或ASP.NET控制項的顯示效果，
例如：字型、背景、色彩和框線等。在
VWD提供圖形化介面來幫助我們建立CSS
樣式，一般來說，在ASP.NET網頁有三種
方式來套用CSS樣式。
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網頁後，TextBox控制項會轉換成HTML
標籤<input>，使用style屬性來定義樣式，如下所示：
<input name="TextBox1" type="text"
id="TextBox1" style="color:White;backgroundcolor:#3333CC;border-style:Solid;" />
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>
11-1-1 在ASP.NET網頁套用CSS樣
式-內建網頁的CSS(套用樣式規則)
 HTML標籤是使用Class屬性來指定樣式規
則；ASP.NET控制項是使用CssClass屬性
來指定樣式，如下所示：
<p Class="littlered">自訂樣式規則</p>
<asp:TextBox ID="TextBox1" runat="server"
CssClass="littlegreen"/>
11-1-1 在ASP.NET網頁套用CSS樣
式-外部連結的CSS
 如果針對整個ASP.NET網站，我們可以使
用外部樣式表檔案（External Style
Sheet） ，其副檔名為.css，換句話說，我
們只需建立好樣式表檔案，就可以套用在
整個ASP.NET網站的所有網頁，輕鬆建立
一致顯示風格的網站內容。
11-1-2 在VWD建立新樣式-說明

在VWD建立新樣式預設是在<style>標籤新增CSS
樣式，VWD提供圖形化介面來幫助我們建立CSS
樣式，而不用自行撰寫樣式程式碼。
建立的CSS樣式
11-1-2 在VWD建立新樣式-新增

請啟動VWD開啟ASP.NET網頁，執行「格式/新
樣式」指令，可以看到「新樣式」對話方塊。
樣式名稱
樣式屬性
11-1-3 套用CSS樣式-說明
 在ASP.NET網頁新增樣式後，我們可以選
擇在「屬性」視窗或執行「檢視/套用樣式」
指令在指定控制項套用CSS樣式。
11-1-3 套用CSS樣式-屬性視窗

在「屬性」視窗上方選【<DIV>】，即<div>標籤，
然後在【Class】屬性欄選【docStyle】樣式，可
以看到設計檢視的標籤馬上套用此CSS樣式。
11-1-3 套用CSS樣式-套用樣式視
窗

請在設計檢視選取【TextBox1】控制項後，執行
「檢視/套用樣式」指令，可以在左邊開啟「套用
樣式」視窗。在「本頁」區段選【.txtStyle】樣式，
就可以在TextBox控制項套用txtStyle樣式。
選此樣式
11-1-3 套用CSS樣式-範例網站
ASP.NET網站：Ch11-1-3

在ASP.NET網頁已經新增名為txtStyle和docStyle
的樣式，現在我們準備分別在TextBox控制項和
<div>標籤套用CSS樣式，如下圖所示：
11-1-4 建立外部樣式表檔案-建
立

不只如此，我們還可以將CSS樣式儲存成一個外
部檔案，然後設定網頁連結外部樣式表，以便讓
網站的網頁可以套用外部樣式表檔案內的CSS樣
式。
選樣式表
11-1-4 建立外部樣式表檔案-內
容
 我們可以直接在編輯視窗輸入樣式程式碼，
或從其他ASP.NET網頁搬移樣式規則，如
下圖所示：
11-1-5 連結外部樣式表檔案-套
用

在建立好外部樣式表檔案後，我們就可以將樣式
表檔案的CSS套用在ASP.NET網站的網頁。執行
「檢視/套用樣式」指令，可以看到「套用樣式」
視窗，在樣式清單選【附加樣式表】超連結文字，
可以看到「選取樣式表」對話方塊。
選取外部樣
式表檔案
11-1-5 連結外部樣式表檔案-範例網
站
ASP.NET網站：Ch11-1-5

在ASP.NET網站已經擁有上一節建立的Ch111.css樣式表檔案，請在網站連結外部樣式表檔案
後，分別在Default.aspx和Default2.aspx的Label
和Button控制項套用lblStyle和btnStyle樣式，如
下圖所示：
11-1-6 修改與管理CSS樣式-清除套
用的樣式

對於已經套用CSS樣式的控制項，如果不需要樣
式時，我們可以清除套用的樣式。例如：開啟
Default2.aspx的ASP.NET網頁，選取欲清除樣式
的Button控制項，然後開啟「套用樣式」視窗，
按一下【清除樣式】，就可以清除控制項套用的
CSS樣式。
11-1-6 修改與管理CSS樣式-修改
CSS的樣式屬性

在VWD的「CSS屬性」視窗可以更改HTML標籤
或控制項套用的CSS樣式，例如：開啟
Default2.aspx的ASP.NET網頁，選Label控制項，
然後執行「檢視/CSS屬性」指令開啟「CSS屬性」
視窗。
直接修改
CSS屬性
11-1-6 修改與管理CSS樣式-管理樣
式
 在VWD的「管理樣式」視窗可以管理
ASP.NET網頁的本頁和外部樣式表的所有
CSS樣式，如下圖所示：
11-2主版頁面
主版頁面的基礎
 11-2-2 使用VWD建立主版頁面
 11-2-3 使用VWD建立內容頁面
 11-2-4 巢狀主版頁面
 11-2-5 動態載入主版頁面
 11-2-1
11-2-1 主版頁面的基礎-圖例

主版頁面可以將網頁分割成多個編輯區域，這是
使用ContentPlaceHolder控制項標示的編輯區域，
其他部分屬於網頁固定內容，可以讓網站每一頁
網頁都擁有相同的外觀配置，如下圖所示：
11-2-1 主版頁面的基礎-圖例說
明
 主版頁面使用ContentPlaceHolder控制項定
義可編輯區域，其他部分是網站每一頁網
頁都擁有的固定部分。我們可以在固定部
分加上巡覽架構、公司商標和版權宣告等
網頁內容。
 內容頁面是使用Content控制項建立的網頁
內容，屬於網頁內容中需要變動的部分，
其內容是填入主版頁面對應
ContentPlaceHolder控制項的位置，在整合
後才顯示出實際的網頁內容。
11-2-2 使用VWD建立主版頁面說明
 主版頁面主要可以分為兩部分：


一是頁面配置，副檔名為.master的主版頁面，
通常我們會使用HTML表格標籤來編排
ContentPlaceHolder控制項。
二為套用主版頁面的內容頁面，即ASP.NET網
頁。
11-2-2 使用VWD建立主版頁面建立
選【主版頁面】範本，
在【名稱】欄輸入主版
頁面名稱，取消勾選
【將程式碼置於個別檔
案中】，按【加入】鈕
新增主版頁面
在「工具箱」視窗
的【標準】區段，
拖拉
ContentPlaceHolder
控制項來新增控制
項
11-2-2 使用VWD建立主版頁面指引指令

主版頁面的副檔名是.master，它和其他Web
Form表單的ASP.NET網頁並沒有什麼不同，一樣
可以新增控制項、HTML標籤和程式碼。其差別
是使用Master指引指令取代Page指引指令，如下
所示：
<%@ Master Language=“C#" %>
上述Master指引指令和Page指引指令擁有相同屬
性，例如：Language屬性。
 在主版頁面可以擁有0至多個ContentPlaceHolder
控制項，如下所示：

<asp:ContentPlaceHolder ID="MenuContent"
runat="server">
</asp:ContentPlaceHolder>
11-2-3 使用VWD建立內容頁面建立
 ASP.NET組成主版頁面的第二部分，就是
套用主版頁面的內容頁面，即擁有Content
控制項的ASP.NET網頁。
勾選【選擇主版頁
面】，按【加入】鈕
新增ASP.NET網頁，
可以看到「選取主版
頁面」對話方塊
11-2-3 使用VWD建立內容頁面指引指令
 內容頁面的ASP.NET網頁是使用Page指引
指令來指定套用的主版頁面，如下所示：
<%@ Page Language=“C#"
MasterPageFile="~/MasterPage.master"
Title=“Default" %>
 上述Page指引指令使用MasterPageFile屬
性指定套用的主版頁面檔案，「~/」是指網
站根目錄，Title屬性指定網頁標題文字，也
就是Title屬性值。
11-2-3 使用VWD建立內容頁面Content控制項
 ASP.NET網頁的實際內容是位在Content控
制項，如下所示：
<asp:Content ID="Content1"
ContentPlaceHolderID="MenuContent"
Runat="Server">
<p>巡覽控制項</p>
</asp:Content>
 上述標籤使用ContentPlaceHolderID屬性指
明對應的ContentPlaceHolder控制項，在標
籤中就是網頁內容，可以是HTML標籤或
ASP.NET控制項。
11-2-3 使用VWD建立內容頁面範例網站
ASP.NET網站：Ch11-2-3

在ASP.NET網站已經建立MasterPage.master的
主版頁面，我們可以在VWD新增ASP.NET網頁
Default.aspx時，選擇套用此主版頁面，如下圖所
示：
11-2-4 巢狀主版頁面-建立

ASP.NET網站能夠建立多個主版頁面來定義不同
的版面配置。不只如此，我們還可以建立主版頁
面來繼承其他主版面頁的版面配置，也就是建立
巢狀主版頁面，如下圖所示：
勾選【選擇主版頁
面】，再套用其他主
版頁面
11-2-4 巢狀主版頁面-指引指令
在巢狀主版頁面Frame.master是使用Master指引
指令來指定上一層的父主版頁面，如下所示：
<%@ Master Language=“C#"
MasterPageFile="~/MasterPage.master" %>
 上述Master指引指令使用MasterPageFile屬性指
定上一層主版頁面MasterPage.master。換句話
說，在Frame.master主版頁面的Content控制項
也能夠新增ContentPlaceHolder控制項。

11-2-4 巢狀主版頁面-範例網站
ASP.NET網站：Ch11-2-4

在ASP.NET網站已經擁有名為
MasterPage.master主版頁面，我們準備再新增
名為Frame.master主版頁面，繼承
MasterPage.master主版面頁的版面配置，然後
建立Default.aspx選擇套用此主版頁面，如下圖所
示：
11-2-5 動態載入主版頁面-說明
 網站內容頁面除了使用Page指引指令來指
定套用的主版頁面外，我們也可以動態載
入主版頁面，換句話說，網站可以建立不
同色彩和配置的主版頁面後，讓ASP.NET
網頁使用程式碼來動態決定套用哪一個主
版頁面。
11-2-5 動態載入主版頁面Page_PreInit()

ASP.NET網頁是在Page_PreInit()事件處理程序來
動態載入主版頁面，如下所示：
protected void Page_PreInit(object sender,
EventArgs e)
{
Page.MasterPageFile = "Frame.master";
Page.Title = "動態載入主版頁面";
}
 上述程式碼使用Page物件的MasterPageFile屬性
指定主版頁面，Title屬性是瀏覽程式的標題文字
。
11-2-5 動態載入主版頁面-範例
網站
ASP.NET網站：Ch11-2-5

此ASP.NET網站就是上一節的範例網站，只是刪
除Default.aspx套用的主版頁面，我們準備建立
Page_PreInit()事件處理程序來動態載入主版頁面
Frame.master，如下圖所示：
11-3 佈景與面板
佈景與面板的基礎
 11-3-2 建立面板檔案
 11-3-3 在ASP.NET網頁套用佈景
 11-3-4 預設與具名面板
 11-3-5 覆寫控制項的面板
 11-3-1
11-3-1 佈景與面板的基礎-說明
對於ASP.NET網站來說，維護網頁色彩、字型和
尺寸等一致外觀的顯示效果是一件十分重要的工
作。傳統網站設計者只能使用層級式樣式表CSS
（Cascading Style Sheets）來格式化網頁元素的
字型、色彩或尺寸。
 ASP.NET佈景可以取代CSS功能，它包含樣式屬
性、CSS和圖片，可以套用在伺服端控制項、
Web Form表單或整個ASP.NET網站。ASP.NET
佈景的組成元素有：面板檔案、CSS檔案和圖片
檔案。

11-3-1 佈景與面板的基礎-佈景
ASP.NET 的佈景（Themes） 是一個資料夾，內
含指定網站顯示效果的相關檔案，它是位在
ASP.NET網站根目錄下，名為「App_Themes」
的子目錄，稱為佈景目錄（Themes Directory）。
 換句話說，如果ASP.NET網站需要套用佈景，請
先在VWD的「方案總管」建立此目錄。在此目錄
下是各種佈景名稱的子目錄，例如：名為
MyTheme的佈景，其目錄是
「\App_Themes\MyTheme」，在此目錄下的檔
案是組成此佈景的.skin檔、CSS檔和圖片檔案。

11-3-1 佈景與面板的基礎-面板
 面板（Skins）如同CSS樣式，它是控制項
的外表，可以定義網頁元素的顯示外觀，
事實上，每一個ASP.NET控制項都可以自
行使用樣式屬性值來定義其顯示外觀。
 換句話說，如果我們需要替控制項建立多
種不同外觀，就可以使用面板來定義，這
是ASP.NET除了CSS樣式外，另一種方法
來定義控制項一致化的顯示效果。
11-3-2 建立面板檔案-說明
面板檔案的內容就是包含樣式屬性的控制項標籤，
只是沒有ID等屬性值。不過，VWD在面板檔案編
輯方面並沒有提供視覺化編輯功能，我們只能自
行輸入標籤程式碼來建立檔案內容。
 在ASP.NET的同一個佈景資料夾可以包含多個面
板檔案，例如：替每一種控制項都建立專屬的面
板檔案，雖然面板檔案有很多個，但是在執行
ASP.NET網頁前，.NET Framework會先將位在
佈景目錄下，所有面板檔案合併成一個檔案後，
才套用到ASP.NET網頁，所以面板檔案的名稱並
不重要，讀者可以自行命名。

11-3-2 建立面板檔案-建立

在「方案總管」視窗選「
\App_Themes\MyTheme」子目錄，執行「檔案/
新增檔案」指令，可以看到「加入新項目」對話
方塊。
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"/>

11-3-3 在ASP.NET網頁套用佈景
-套用佈景

當建立好面板檔案後，我們就可以在ASP.NET網
頁本身的Theme屬性來指定套用的佈景。請在
「屬性」視窗上方選【DOCUMENT】，在
【Theme】屬性欄選【MyTheme】佈景，如下圖
所示：
11-3-3 在ASP.NET網頁套用佈景
-範例網站
ASP.NET網站：Ch11-3-3
 在ASP.NET網站已經建立名為MyTheme的
佈景，現在我們準備在Default.aspx網頁套
用此佈景，如下圖所示：
11-3-4 預設與具名面板-說明
 在面板檔案的控制項標籤中，如果沒有
SkinId屬性稱為預設面板（Default Skins），
指定SkinId屬性稱為具名面板（Named
Skins），其說明如下所示：


預設面板：自動套用在所有同種類的控制項，
例如：套用在網頁的所有Label控制項。
具名面板：因為面板有指定名稱，所以面板只
套用在相同SkinId屬性值的控制項。
11-3-4 預設與具名面板-標籤內
容
 在面板檔案的控制項標籤，如下所示：
<asp:Label ForeColor="White"
BackColor="Maroon"
Runat="server"/>
<asp:Label SkinId="RedLabel" Runat="server"
ForeColor="White" BackColor="Red"/>
 上述2個Label控制項的第1個是預設面板，
第2個是具名面板。
11-3-4 預設與具名面板-範例網
站
ASP.NET網站：Ch11-3-4

在ASP.NET網站已經建立名為MyTheme的佈景，
內含Label.skin面板檔案，擁有預設面板、名為
RedLabel、BlueLabel和GreenLabel的具名面板，
現在我們準備在Default.aspx網頁套用此佈景，如
下圖所示：
11-3-5 覆寫控制項的面板-說明
在上一節的範例，雖然Label控制項已經指定
BackColor和ForeColor樣式屬性，但是樣式內容
會被面板檔案的樣式所取代。
 如果想在ASP.NET網頁指定樣式屬性來覆寫面板
檔案的控制項樣式，此時套用佈景是使用
StyleSheetTheme屬性。

11-3-5 覆寫控制項的面板-範例網站
ASP.NET網站：Ch11-3-5

此ASP.NET網站和上一節相同，只是在
Default.aspx網頁再新增了一個Label控制項，且
改為使用StyleSheetTheme屬性套用佈景，如下
圖所示：