Tin tức

Thiết kế web ASP.NET 4.5 - Giao diện và điều hướng - Phần 2

29/01/2013

Trong việc thiết kế web nói chung cũng như thiết kế web trong ASP.NET Web Forms, các trang Master cho phép bạn tạo ra một bố trí phù hợp cho các trang trong ứng dụng. Một trang Master đơn định nghĩa các hiển thị điều hướng chuẩn theo ý bạn muốn cho tất cả các trang trong ứng dụng của (hoặc một nhóm các trang). Sau đó, bạn có thể tạo các trang nội dung (content page) riêng có chứa nội dung mà bạn muốn hiển thị, như đã giải thích ở trên. Khi người dùng yêu cầu các trang nội dung, ASP.NET kết hợp chúng với Master tạo ra các trang nội dung.

1. Trong Solution Explorer, tìm và mở trang Site.Master.
2. Nếu trang hiển thị trong chế độ xem thiết kế web (Design) , chuyển sang chế độ xem Source.
3. Cập nhật trang master bằng cách thay phần <title> như sau:
<title><%: Page.Title %> - Wingtip Toys</title>
4. Cập nhật trang master bằng cách thay các thành phần trong  <header> với nội dung sau:
<header>
    <div class="content-wrapper">
        <div class="float-left">
            <p class="site-title">
                <a id="A2" runat="server" href="~/">
                <asp:Image  ID="Logo" runat="server" ImageUrl="~/images/logo.jpg"
                    BorderStyle="None" />
                </a>
            </p>
        </div>
        <div class="float-right">
            <section id="login">
                <asp:LoginView runat="server" ViewStateMode="Disabled">
                    <AnonymousTemplate>
                        <ul>
                            <li><a runat="server" href="~/Account/Register.aspx">Register</a></li>
                            <li><a runat="server" href="~/Account/Login.aspx">Log in</a></li>
                        </ul>
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        <p>
                            Hello, <a runat="server" class="username" href="~/Account/ChangePassword.aspx" title="Change password">
                            <asp:LoginName runat="server" CssClass="username" /></a>!
                            <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" />
                        </p>
                    </LoggedInTemplate>
                </asp:LoginView>
            </section>
            <nav>
                <ul id="menu">
                    <li><a runat="server" href="~/">Home</a></li>
                    <li><a runat="server" href="~/About.aspx">About</a></li>
                    <li><a runat="server" href="~/Contact.aspx">Contact</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>


HTML này sẽ hiển thị hình ảnh được đặt tên logo.jpg từ thư mục gốc của ứng dụng Web mà bạn sẽ bổ sung sau. Khi một trang sử dụng trang master được hiển thị trong một trình duyệt, biểu tượng sẽ được hiển thị. Nếu người dùng nhấp vào biểu tượng, người sử dụng sẽ được điều hướng trở lại trang Default.aspx. thẻ HTML <a> đặt điều khiển image cho phép hình ảnh được bao gồm như là một phần của liên kết. Thuộc tính href  gắn xác định đường dẫn gốc "~ /" của trang web dưới dạng liên kết. Theo mặc định, trang Default.aspx được hiển thị khi người dùng điều hướng đến thư mục gốc của trang web. Điều khiến Image <asp:Image>  bao gồm các thuộc tính như BorderStyle, theo đó sẽ tạo thẻ HTML khi hiển thị trong một trình duyệt.

Các trang Master

Một trang master là một tập tin ASP.NET với phần mở rộng .master (ví dụ, Site.Master) với một bố trí được xác định trước có thể bao gồm văn bản tĩnh, các phần tử HTML, và điều khiển. Trang Master được xác định bởi một chỉ thị @Master đặc biệt thế chỉ thị @Page  được sử dụng cho các trang. aspx.

Ngoài ra chỉ thị @Master cũng bao gồm tất cả các phần tử HTML mức cao nhất cho một trang, chẳng hạn như html, head, và form. Ví dụ, trên trang master bạn thêm vào ở trên, sử dụng thẻ HTML là table cho bố trí, một thẻ img cho logo của công ty, văn bản tĩnh, và điều khiển phía server để xử lý các thành phần chung cho trang web. Bạn có thể sử dụng bất kỳ thẻ HTML và bất kỳ  thẻ ASP.NET như là một phần của trang master. 

Ngoài ra văn bản tĩnh và các điều khiển sẽ xuất hiện trên tất cả các trang, trang master cũng bao gồm một hoặc nhiều các điều khiển ContentPlaceHolder. Điều khiển chứa nội dung này định nghĩa các vùng có thể hiển thị các nội dung thay thế. Đến lượt mình, nội dung có thể thay thế được định nghĩa trong các trang nội dung, chẳng hạn như Default.aspx, bằng cách sử dụng điều khiển Content chạy phía server.

Việc sử dụng các trang master trong việc thiết kế web sẽ giúp cho việc thống nhất bố cục cũng như dễ dàng quản lý các thay đổi những thành phần dùng chung của website cũng như các ứng dụng chạy trên nền tảng web viết bằng asp.net.

Thiet ke web mien phi,  Hoc thiet ke web

ESVN- Nơi hội tụ giải pháp

Công ty cổ phần Eastern Sun Việt Nam