Microsoft Web Developer ASP .NET 2.0 入門 蘇慶隆 clsu@mail.cjcu.edu.tw

Microsoft Web Developer ASP .NET 2.0 入門 程式設計技術 Master Page 佈景主題 網站導覽 檔案上傳 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 典範網頁版面配置 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 一般網頁設計 網頁區塊組成 標題區 註腳區 導覽區 很多網頁設計的程式會重複使用 當網站更新時會需要更新每個網頁 網頁設計人員不是開發人員 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 標題區 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 導覽區 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 內文區 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 註腳區 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 標題區 導覽區 內文區 註腳區 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 Master Page 是一種彈性及可重複使用的使用者介面樣板 網頁架構 （HTML、表格、…） 網頁內容 （Header, Footer, ML, HTML, 控制項, …） 使用 ContentPlaceHolder 呈現不同的網頁內容 優點 一致性的版面 分享介面 可以用程式控制及宣告的方式來定義 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 Master Page – 續 使用 Table 排版 *.master 存放版面配置 .aspx 中指定要使用的 Master Page MySite.master default.aspx http://.../default.aspx <%@ Master %> <asp:ContentPlaceHolder Id="Main" RunAt="server" /> <%@ Page MasterPage- File=“~/MySite.master" %> <asp:Content ContentPlaceHolderId= "Main" RunAt="server" /> </asp:Content> 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

ContentPlaceHolderId=MainContent /> <asp:ContentPlaceHolder Master Page – 續 MySite.master Default.aspx <%@ Master %> <%@ Page MasterPageFile="~/MySite.master” %> 標題區 <asp:Content ContentPlaceHolderId=MainContent /> 導覽區 <asp:ContentPlaceHolder Id=MainContent /> 註腳區 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 Master Page – 續 Default.aspx 中的內容取代了 master page 中的 ContentPlaceHolder http://serverName/SiteName/Default.aspx 標題區 導覽區 Default.aspx 中定義的網頁內容 註腳區 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 建立 Master Page 建立一個網頁，副檔名為 *.master 在網頁第一行加上<%@ Master .. %> 加入網頁內容 定義可替換區塊： 使用 <asp:ContentPlaceHolder ..> 控制項 加入預設的內容 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 使用 Master Page 建立一個 ASP.NET 網頁 (*.aspx) 在 Page 指令中加上 Master 屬性 <%@ Page MasterPageFile="~/MySite.master" %> 加入網頁內容 使用 <asp:Content ..> 控制項 ContentPlaceHolderId 屬性用來指定要套用到 master page 中的那一個 ContentPlaceHolder 在 Master Page 中事先定義了多少ContentPlaceHolder ，網頁中就要包含填滿這些定義好的區塊。 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 設定 Master Page組態 網頁中設定 <%@ Master Language=“C#“ MasterPageFile="~/MySite.master" %> 網站中設定 <configuration> <system.web> <pages masterPageFile=“~/MySite.Master" /> </system.web> </configuration> 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 程式化 Master Page 網頁可以存取 master page Page.Master 屬性 可以存取 master page 中所有的 Public 屬性 透過 FindControl 方法來存取控制項 網頁中可以動態指定 master page Page.MasterFilePath 屬性 必須在 Page_PreInit 事件之前（含）才能設定 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 網頁外觀處理 讓整個網站的外觀與感覺保持一致 目前的做法（或樣式表） 直接設定在控制項上 必須逐一設定每一個控制項 無法事先設定預設樣式 不能用在控制項的屬性、集合或樣版上 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 佈景主題 應用程式佈署主題 儲存在應用程式的 \App_Themes 資料夾中 佈景主題的名稱就是資料夾的名稱 內容包含 Skin：用來套用到控制項的屬性集合 樣式：CSS 檔 資源：圖片或其它檔案 優點 讓控制項與應用程式有一致的外觀與感覺 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 建立佈景主題 建立 App_Themes 資料夾 在 App_Themes 資料夾中建立子資料夾作為佈景主題名稱識別 加入佈景主題相關檔案 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 建立 Skin 建立一個副檔名是 .skin 的文字檔 加入控制項的定義 屬性 ( 如果屬性可以套用佈景主題 ) 包含 DataBinding 程式碼 樣版 (Templates) 集合 (Collections) 定義控制項的各種 Skin 設定控制項的 SkinId 屬性 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 Label.Skin < !– 預設 Skin --!> <asp:Label RunAt="server" font-names=“verdana,arial" font-size="10pt“ ForeColor="#000066" BackColor="transparent" /> < !– 標題 Skin --!> <asp:Label RunAt="server" Id=foo SkinId="Title" font-names="verdana,arial" font-size="18pt" ForeColor="#000066" BackColor="transparent" font-bold="true" font-underline="true" /> 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 使用佈景主題 在網頁中： 在 Page 指令中加上 Theme 屬性（使用相對路徑） 在控制項中： 如果沒有指定，就套用預設的 Skin ）如果有的話） 在控制項設定 SkinId，套用指定的 Skin 避免套用佈景主題： 在 Page 指令中加上屬性 EnableThemeing=False 所有子控制項都會繼承父控制項的設定 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 設定佈景主題組態 網頁層級的設定 <%@ Master Language="VB" Theme="BasicBlue" %> <%@ Page Language="VB" Theme="BasicBlue" %> 網站層級的設定 <configuration> <system.web> <pages Theme="SmokeAndGlass" /> </system.web> </configuration> 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 程式化佈景主題 protected override void OnPreInit(EventArgs e) { base.OnPreInit(e); this.Theme = "佈景主題名稱"; } 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 網站導覽 提供一致性的網頁導覽方式 目前的解決方案 在每一頁中加入超連結 在使用者控制項中包含連結 缺點 網站導覽架構複雜 自行維護各網頁之間的連結 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 網站導覽架構 控制項 TreeView Menu SiteMapPath SiteMapDataSource 網站導覽 API SiteMapNode SiteMapNode SiteMapNode SiteMap SiteMapProvider 提供者 資料庫 Web.sitemap 檔 使用者自訂 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 建立網站地圖 Web.sitemap <siteMap> <siteMapNode title="Home" description="Home" url="default.aspx" > <siteMapNode title="Products" description="Our products" url="Products.aspx?foo=bar"> <siteMapNode title="Hardware" description="Hardware choices" url="Hardware.aspx" /> <siteMapNode title="Software" description="Software choices" url="Software.aspx" /> </siteMapNode> </siteMap> 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 SiteMap 物件模型 CurrentNode：目前網頁的SiteMapNode 物件 RootNode：頂層網頁的SiteMapNode 物件 Provider：目前預設的 ISiteMapProvider 物件 Providers：取得ISiteMapProvider 物件集合 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

SiteMapDataSource 物件模型 SiteMapViewType：指定 SiteMapDataSource 要回傳的檢視方式 StartingNodeType：設定要從那一個節點開始回傳網站結構資料 StartingDepth：從那個深度開始回傳的網站結構 FlatDepth：總共要回傳多深的節點 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 SiteMapPath 物件模型 PathDirection：路徑顯示方向 PathSeparator：路徑中各節點的分隔符號 ParentLevelsDisplayed：要顯示的放節點層數 不需要從 SiteMapDataSource 控制項取得資料 （直接從 Web.sitemap 檔取得） 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門 檔案上傳 檔案上傳 FileUpload 控制項 儲存檔案: FileUpload1.PostedFile.Save 檔案串流: FileUpload1.PostedFile.InputStream 可用來儲存到資料庫的欄位 2007/04/03 Microsoft Web Developer ASP .NET 2.0 入門