1-Create MasterPage from Artisteer Project.doc

Bước 1: mở website đã thiết kế trong Artisteer

Bước 2: Chọn thư mục vừa export từ Artisteer

Bước 3: Chọn yes hoặc no đều được

Bước 4: chạy thử trang Default.aspx

Bước 5: phân tích cấu trúc trang Default.aspx

<%@ Page Language="C#" MasterPageFile="~/design/MasterPage.master" ValidateRequest="false" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %><%@ Import Namespace="Artisteer" %><%@ Register TagPrefix="artisteer" Namespace="Artisteer" %><%@ Register TagPrefix="art" TagName="DefaultMenu" Src="DefaultMenu.ascx" %> <%@ Register TagPrefix="art" TagName="DefaultHeader" Src="DefaultHeader.ascx" %> <%@ Register TagPrefix="art" TagName="DefaultSidebar1" Src="DefaultSidebar1.ascx" %><%@ Register TagPrefix="art" TagName="DefaultSidebar2" Src="DefaultSidebar2.ascx" %>

<asp:Content ID="PageTitle" ContentPlaceHolderID="TitleContentPlaceHolder" Runat="Server"> Page title here...</asp:Content>

<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderContentPlaceHolder" Runat="Server"> <art:DefaultHeader ID="DefaultHeader" runat="server" /></asp:Content>

<asp:Content ID="MenuContent" ContentPlaceHolderID="MenuContentPlaceHolder" Runat="Server"> <art:DefaultMenu ID="DefaultMenuContent" runat="server" /></asp:Content>

HeaderContentPlaceHolder

MenuContentPlaceHolder

Sidebar1ContentPlaceHolder

Sidebar2ContentPlaceHolder

SheetContentPlaceHolder

TitleContentPlaceHolder

<asp:Content ID="SideBar1" ContentPlaceHolderID="Sidebar1ContentPlaceHolder" Runat="Server"> <art:DefaultSidebar1 ID="DefaultSidebar1Content" runat="server" /></asp:Content>

<asp:Content ID="SideBar2" ContentPlaceHolderID="Sidebar2ContentPlaceHolder" Runat="Server"> <art:DefaultSidebar2 ID="DefaultSidebar2Content" runat="server" /></asp:Content>

<asp:Content ID="SheetContent" ContentPlaceHolderID="SheetContentPlaceHolder" Runat="Server">

<artisteer:Article ID="Article1" Caption="Welcome" runat="server"><ContentTemplate>…</ContentTemplate>

</artisteer:Article><artisteer:Article ID="Article2" Caption="…" runat="server">

<ContentTemplate>…</ContentTemplate></artisteer:Article>

</asp:Content>

Kết luận: như vậy trong master page đã dành sẵn 6 vị trí động nội dung (ContentPlaceHolder) để chúng ta có thể thay đổi trên từng trang web tạo ra.

Nếu chúng ta muốn mỗi trang web được tạo ra chỉ cần chứa 2 vị trí động nội dung là TitleContentPlaceHolder và SheetContentPlaceHolder thì chúng ta cần thay đổi cấu trúc master page bằng cách thế nội dụng cố định cho 4 phần còn lại (theo dõi bước 6)

Bước 6: Hiệu chỉnh master page

Các vùng màu vàng cần được thay đổi.

Còn các vùng màu xanh giữ nguyên như củ

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head runat="server">  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title><asp:contentplaceholder id="TitleContentPlaceHolder" runat="server"></asp:contentplaceholder></title> <link rel="stylesheet" href="~/style.css" type="text/Css" />   <asp:ContentPlaceHolder ID="ScriptIncludePlaceHolder" runat="server"> <script type="text/javascript" src="<%= ResolveUrl("~/script.js") %>"></script>

</asp:ContentPlaceHolder></head> <body> <form id="form1" runat="server"><div id="art-page-background-glare"> <div id="art-page-background-glare-image"></div></div><div id="art-main"><div class="art-sheet"> <div class="art-sheet-tl"></div> <div class="art-sheet-tr"></div> <div class="art-sheet-bl"></div> <div class="art-sheet-br"></div> <div class="art-sheet-tc"></div> <div class="art-sheet-bc"></div> <div class="art-sheet-cl"></div> <div class="art-sheet-cr"></div> <div class="art-sheet-cc"></div> <div class="art-sheet-body"><div class="art-header"> <div class="art-header-png"></div> <div class="art-header-jpeg"></div> <asp:contentplaceholder id="HeaderContentPlaceHolder" runat="server"></asp:contentplaceholder></div><div class="art-nav">

<div class="l"></div><div class="r"></div><asp:contentplaceholder id="MenuContentPlaceHolder"

runat="server"></asp:contentplaceholder></div><div class="art-content-layout"> <div class="art-content-layout-row"><div class="art-layout-cell art-sidebar1"><asp:contentplaceholder id="Sidebar1ContentPlaceHolder" runat="server"></asp:contentplaceholder></div><div class="art-layout-cell art-content"><asp:contentplaceholder id="SheetContentPlaceHolder" runat="server"></asp:contentplaceholder></div><div class="art-layout-cell art-sidebar2"><asp:contentplaceholder id="Sidebar2ContentPlaceHolder" runat="server"></asp:contentplaceholder></div>

</div></div><div class="cleared"></div><div class="art-footer"> <div class="art-footer-t"></div> <div class="art-footer-l"></div> <div class="art-footer-b"></div> <div class="art-footer-r"></div> <div class="art-footer-body"> <a href="#" class="art-rss-tag-icon" title="RSS"></a> <div class="art-footer-text"><p><a href="#">Contact Us</a> | <a href="#">Terms of Use</a> | <a

href="#">Trademarks</a> | <a href="#">Privacy Statement</a><br /> Copyright © 2010 ---. All Rights Reserved.</p>

</div><div class="cleared"></div>

</div></div>

<div class="cleared"></div> </div></div>

</div>

</form></body></html>1. Hiệu chỉnh vùng TitleContentPlaceHolder Chuyển

<asp:contentplaceholder id="TitleContentPlaceHolder" runat="server"> </asp:contentplaceholder>

Thành

<asp:contentplaceholder id="TitleContentPlaceHolder" runat="server">Online Shopping Center</asp:contentplaceholder>

Ý nghĩa: Nếu trang áp dụng master page này mà không áp dụng vùng này thì tiêu đề trang mặc định là “Online Shopping Center”.

2. Hiệu chỉnh vùng ScriptIncludePlaceHolder Chuyển

<asp:ContentPlaceHolder ID="ScriptIncludePlaceHolder" runat="server"><script type="text/javascript" src="<%= ResolveUrl("~/script.js")

%>"></script></asp:ContentPlaceHolder> Thành

<asp:ContentPlaceHolder ID="ScriptIncludePlaceHolder" runat="server"> </asp:ContentPlaceHolder><script type="text/javascript" src="<%= ResolveUrl("~/script.js") %>"></script>

Ý nghĩa: giữ lại thẻ script và cho phép bổ sung thêm các script khác ở các trang áp dụng master page này.

3. Cố định vùng HeaderContentPlaceHolder Chuyển

<asp:contentplaceholder id="HeaderContentPlaceHolder" runat="server"> </asp:contentplaceholder> Thành

<art:DefaultHeader ID="DefaultHeader" runat="server" />

Cách làm: chép từ vùng tương ứng của trang Default.aspx4. Hiệu chỉnh vùng MenuContentPlaceHolder Chuyển

<asp:contentplaceholder id="MenuContentPlaceHolder" runat="server"></asp:contentplaceholder> Thành

<art:DefaultMenu ID="DefaultMenuContent" runat="server" /> Cách làm: chép từ vùng tương ứng của trang Default.aspx5. Hiệu chỉnh vùng Sidebar1ContentPlaceHolder Chuyển

<asp:contentplaceholder id="Sidebar1ContentPlaceHolder" runat="server"> </asp:contentplaceholder> Thành

<art:DefaultSidebar1 ID="DefaultSidebar1Content" runat="server" /> Cách làm: chép từ vùng tương ứng của trang Default.aspx6. Hiệu chỉnh vùng Sidebar2ContentPlaceHolder Chuyển

<asp:contentplaceholder id="Sidebar2ContentPlaceHolder" runat="server"> </asp:contentplaceholder> Thành

<art:DefaultSidebar2 ID="DefaultSidebar2Content" runat="server" /> Cách làm: chép từ vùng tương ứng của trang Default.aspx7. Đăng ký cho các web user control

Chép đoạn đăng ký sau vào ngay sau chỉ thị %@Master...% của master page để đăng ký cho các web user control đang sử dụng trên master page.

<%@ Register TagPrefix="art" TagName="DefaultMenu" Src="../DefaultMenu.ascx" %> <%@ Register TagPrefix="art" TagName="DefaultHeader" Src="../DefaultHeader.ascx" %> <%@ Register TagPrefix="art" TagName="DefaultSidebar1" Src="../DefaultSidebar1.ascx" %><%@ Register TagPrefix="art" TagName="DefaultSidebar2" Src="../DefaultSidebar2.ascx" %>

Master page sau khi đã hiệu chỉnh có mã như sau

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<%@ Register TagPrefix="art" TagName="DefaultMenu" Src="../DefaultMenu.ascx" %> <%@ Register TagPrefix="art" TagName="DefaultHeader" Src="../DefaultHeader.ascx" %> <%@ Register TagPrefix="art" TagName="DefaultSidebar1" Src="../DefaultSidebar1.ascx" %><%@ Register TagPrefix="art" TagName="DefaultSidebar2" Src="../DefaultSidebar2.ascx" %>

mailto:%25@Master...%25

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head runat="server">  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title><asp:contentplaceholder id="TitleContentPlaceHolder" runat="server">Online Shopping Mall</asp:contentplaceholder></title> <link rel="stylesheet" href="~/style.css" type="text/Css" />   <asp:ContentPlaceHolder ID="ScriptIncludePlaceHolder" runat="server"></asp:ContentPlaceHolder> <script type="text/javascript" src="<%= ResolveUrl("~/script.js") %>"></script></head> <body> <form id="form1" runat="server"><div id="art-page-background-glare"> <div id="art-page-background-glare-image"></div></div><div id="art-main"><div class="art-sheet"> <div class="art-sheet-tl"></div> <div class="art-sheet-tr"></div> <div class="art-sheet-bl"></div> <div class="art-sheet-br"></div> <div class="art-sheet-tc"></div> <div class="art-sheet-bc"></div> <div class="art-sheet-cl"></div> <div class="art-sheet-cr"></div> <div class="art-sheet-cc"></div> <div class="art-sheet-body"><div class="art-header"> <div class="art-header-png"></div> <div class="art-header-jpeg"></div> <art:DefaultHeader ID="DefaultHeader" runat="server" /></div><div class="art-nav">

<div class="l"></div><div class="r"></div><art:DefaultMenu ID="DefaultMenuContent" runat="server" />

</div><div class="art-content-layout"> <div class="art-content-layout-row"><div class="art-layout-cell art-sidebar1"><art:DefaultSidebar1 ID="DefaultSidebar1Content" runat="server" /></div><div class="art-layout-cell art-content"><asp:contentplaceholder id="SheetContentPlaceHolder" runat="server"></asp:contentplaceholder></div><div class="art-layout-cell art-sidebar2">

<art:DefaultSidebar2 ID="DefaultSidebar2Content" runat="server" /></div>

</div></div><div class="cleared"></div><div class="art-footer"> <div class="art-footer-t"></div> <div class="art-footer-l"></div> <div class="art-footer-b"></div> <div class="art-footer-r"></div> <div class="art-footer-body"> <a href="#" class="art-rss-tag-icon" title="RSS"></a> <div class="art-footer-text"><p><a href="#">Contact Us</a> | <a href="#">Terms of Use</a> | <a href="#">Trademarks</a> | <a href="#">Privacy Statement</a><br /> Copyright © 2010 ---. All Rights Reserved.</p>

</div><div class="cleared"></div>

</div></div>

<div class="cleared"></div> </div></div>

</div>

</form></body></html>Bước 7: Tạo trang Test.aspx và áp dụng master page đã hiệu chỉnh chúng ta có mã ASP.NET sinh ra trên trang Test.aspx như sau:

<%@ Page Title="" Language="C#" MasterPageFile="~/design/MasterPage.master" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContentPlaceHolder" Runat="Server">Tiêu đêR cuSa trang Test.aspx đặt ởS đây</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ScriptIncludePlaceHolder" Runat="Server"></asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="SheetContentPlaceHolder" Runat="Server">NỘI DUNG TRANG Test.aspx được thiêt̀ kê ̀ởS đây</asp:Content>Các bạn có thể xóa TitleContentPlaceHolder nếu muốn lấy tiêu đề mặc định “Online Shopping Center”. Các bạn cũng có thể xóa ScriptIncludePlaceHolder nếu không có CSS hay script nào riêng dành cho trang này.

Kết quả chạy trang Test.aspx

Kết luận:

Chúng ta nhận thấy rằng mã của trang Test.aspx đơn giản hơn rất nhiều so với trước đây. Trong thực tế chúng ta có thể tạo ra các trang web nhiều vùng thay đổi nội dung phức tạp như MasterPage nguyên thủy mới sinh, tuy nhiên do nhu cầu của chúng ta khá đơn gian nên đã hiệu chỉnh lại MasterPage để có được MasterPage phù hợp cho nhu cầu của riêng mình.

Chúc các bạn thành công.

Documents

1-Create MasterPage from Artisteer Project.doc