Microsoft Web Developer ASP .NET 2.0 入門

Microsoft Web Developer ASP .NET 2.0 入門
蘇慶隆

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

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

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

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

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

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

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

標題區導覽區內文區註腳區 2007/04/03 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 入門

Master Page – 續使用 Table 排版 *.master 存放版面配置 .aspx 中指定要使用的 Master Page MySite.master 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 入門

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

建立 Master Page 建立一個網頁，副檔名為 *.master Master .. %> 加入網頁內容定義可替換區塊：使用 <asp:ContentPlaceHolder ..> 控制項加入預設的內容 2007/04/03 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 入門

設定 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 入門

程式化 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 入門

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

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

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

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

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

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

網站導覽提供一致性的網頁導覽方式目前的解決方案在每一頁中加入超連結在使用者控制項中包含連結缺點網站導覽架構複雜自行維護各網頁之間的連結 2007/04/03 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 入門

建立網站地圖 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 入門

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 入門

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

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

Microsoft Web Developer ASP .NET 2.0 入門

Similar presentations

Presentation on theme: "Microsoft Web Developer ASP .NET 2.0 入門"— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

Microsoft Web Developer ASP .NET 2.0 入門

Similar presentations

Presentation on theme: "Microsoft Web Developer ASP .NET 2.0 入門"— Presentation transcript:

Similar presentations

About project

反馈