• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Bài 4: Template & điều hướng trang Web - Giáo trình FPT - Có ví dụ kèm theo
 

Bài 4: Template & điều hướng trang Web - Giáo trình FPT - Có ví dụ kèm theo

on

  • 1,912 views

1. Trang Master

1. Trang Master
2. Điều hướng trang Web
3. Sử dụng Theme

Statistics

Views

Total Views
1,912
Views on SlideShare
1,810
Embed Views
102

Actions

Likes
3
Downloads
259
Comments
0

1 Embed 102

http://forum.hoclaptrinhweb.com 102

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Bài 4: Template & điều hướng trang Web - Giáo trình FPT - Có ví dụ kèm theo Bài 4: Template & điều hướng trang Web - Giáo trình FPT - Có ví dụ kèm theo Presentation Transcript

    • Bài 4: Template & điều hướng trang Web
    • Các nội dung đã học trong bài trước Kiểm tra tính hợp lệ của dữ liệu Quản lý trạng thái Hệ thống bài cũ Template & Điều hướng trang Web 2
    • Mục tiêu bài học 1. Trang Master 2. Điều hướng trang Web Template & Điều hướng trang Web 3 2. Điều hướng trang Web 3. Sử dụng Theme
    • Kiểm tra tính hợp lệ của dữ liệu & Quản lý trạng thái 4
    • Các trang trong một ứng dụng, thường có các thành phần giống nhau như: Barner quảng cáo ở đầu trang Menu ở phía bên trái trang Phần Footer của trang Web ASP.NET cung cấp một phương pháp để tạo các trang có các thành phần giống nhau mà không cần viết các đoạn mã giống nhau trên từng trang Web đó là sử dụng trang Master Trang Master Các trang trong một ứng dụng, thường có các thành phần giống nhau như: Barner quảng cáo ở đầu trang Menu ở phía bên trái trang Phần Footer của trang Web ASP.NET cung cấp một phương pháp để tạo các trang có các thành phần giống nhau mà không cần viết các đoạn mã giống nhau trên từng trang Web đó là sử dụng trang Master Template & Điều hướng trang Web 5 Hai trang khác nhau trong cùng một ứng dụng chỉ có phần nội dung hiển thị ở giữa khác nhau, còn các thành phần khác giống nhau
    • Trang master cung cấp các thành phần giống nhau cho các trang trong một ứng dụng Web Trang nội dung: chứa phần nội dung hiển thị trên trang master. Vùng chứa nội dung: Vùng không gian hiển thị trang nội dung Kết hợp giữa trang master và trang nội dung tạo nên giao diện của từng trang đơn lẻ trong ứng dụng Web Trang Master/Trang nội dung Trang master cung cấp các thành phần giống nhau cho các trang trong một ứng dụng Web Trang nội dung: chứa phần nội dung hiển thị trên trang master. Vùng chứa nội dung: Vùng không gian hiển thị trang nội dung Kết hợp giữa trang master và trang nội dung tạo nên giao diện của từng trang đơn lẻ trong ứng dụng Web Template & Điều hướng trang Web 6
    • Ví dụ: Mã nguồn của trang master được tạo bởi Visual Studio Trang Master <%@ 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"> <head id="Head1" runat="server"> <title>Untitled Page</title> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> </body> </html> Ví dụ: Mã nguồn của trang master được tạo bởi Visual Studio Template & Điều hướng trang Web 7 <%@ 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"> <head id="Head1" runat="server"> <title>Untitled Page</title> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> </body> </html>
    • Trong ASP.NET trang master có định dạng .master Một trang master luôn bắt đầu bằng chỉ dẫn trang Master <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> Đoạn mã phía sau chỉ dẫn Master giống với các trang aspx thông thường khác cũng gồm các phần tử <html>, <body>, <form> Trang Master Trong ASP.NET trang master có định dạng .master Một trang master luôn bắt đầu bằng chỉ dẫn trang Master <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> Đoạn mã phía sau chỉ dẫn Master giống với các trang aspx thông thường khác cũng gồm các phần tử <html>, <body>, <form> Template & Điều hướng trang Web 8
    • Trang master luôn phải chứa một điều khiển ContentPlaceHolder chỉ định vùng hiển thị trang nội dung nằm trong thẻ Form <asp:ContentPlaceHolder id="ContentPlaceHolder1“ runat="server"> </asp:ContentPlaceHolder> Lập trình viên có thể thêm mã html, asp, các điều khiển lên trang Master. Tất cả các phần tử HTML hoặc asp được thêm vào bên ngoài vùng chứa nội dung sẽ hiển thị trên tất cả các trang Trang Master Trang master luôn phải chứa một điều khiển ContentPlaceHolder chỉ định vùng hiển thị trang nội dung nằm trong thẻ Form <asp:ContentPlaceHolder id="ContentPlaceHolder1“ runat="server"> </asp:ContentPlaceHolder> Lập trình viên có thể thêm mã html, asp, các điều khiển lên trang Master. Tất cả các phần tử HTML hoặc asp được thêm vào bên ngoài vùng chứa nội dung sẽ hiển thị trên tất cả các trang Template & Điều hướng trang Web 9
    • Trang Master cũng chứa một File Code-behind chứa các mã xử lý sự kiện. Các sự kiện tương ứng của trang master được kích hoạt sau trang nội dung Ví dụ: Sự kiện Load của trang nội dung xảy ra trước sự kiện Load của trang master Sự kiện của các điều khiển trên trang nội dung sẽ được xử lý trước trang master File Code-behind của trang Master Trang Master cũng chứa một File Code-behind chứa các mã xử lý sự kiện. Các sự kiện tương ứng của trang master được kích hoạt sau trang nội dung Ví dụ: Sự kiện Load của trang nội dung xảy ra trước sự kiện Load của trang master Sự kiện của các điều khiển trên trang nội dung sẽ được xử lý trước trang master Template & Điều hướng trang Web 10
    • File code-behind của trang master khá giống với File code-behind của Web Form thông thường File Code-behind của trang Master using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class MasterPage : System.Web.UI.MasterPage { protected void Page_Load(object sender, EventArgs e) { } } Template & Điều hướng trang Web 11 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class MasterPage : System.Web.UI.MasterPage { protected void Page_Load(object sender, EventArgs e) { } } Dẫn xuất từ lớp MasterPage
    • Trang nội dung có định dạng là .aspx giống với một Web Form. Tuy nhiên, trang nội dung không chứa các phần tử <html>, <head>, <body>, Form Trang nội dung bắt đầu bằng chỉ dẫn Page tương tự WebForm nhưng thêm thuộc tính MasterPageFile chỉ định trang master mà trang sử dụng Trang nội dung chứa phần tử Content chỉ định ID của điều khiển ContentPlaceHolder trên trang master Trang nội dung Trang nội dung có định dạng là .aspx giống với một Web Form. Tuy nhiên, trang nội dung không chứa các phần tử <html>, <head>, <body>, Form Trang nội dung bắt đầu bằng chỉ dẫn Page tương tự WebForm nhưng thêm thuộc tính MasterPageFile chỉ định trang master mà trang sử dụng Trang nội dung chứa phần tử Content chỉ định ID của điều khiển ContentPlaceHolder trên trang master Template & Điều hướng trang Web 12
    • Mã aspx của một trang nội dung Trang nội dung <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Order.aspx.cs" Inherits="Order" Title="Untitled Page" %> <asp:Content ID="Content3" ContentPlaceHolderID="head" Runat="Server"> </asp:Content> <asp:Content ID="Content4" ContentPlaceHolderID=" ContentPlaceHolder1 " Runat="Server"> </asp:Content> Template & Điều hướng trang Web 13 <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Order.aspx.cs" Inherits="Order" Title="Untitled Page" %> <asp:Content ID="Content3" ContentPlaceHolderID="head" Runat="Server"> </asp:Content> <asp:Content ID="Content4" ContentPlaceHolderID=" ContentPlaceHolder1 " Runat="Server"> </asp:Content>
    • Các bước tạo ứng dụng ASP.NET sử dụng trang Master Tạo Web Site Thêm một trang master vào WebSite. Trình bày bố cục (sử dụng bảng hoặc CSS) và thêm các phần tử vào trang master Thêm các trang nội dung cho WebSite. Viết các mã xử lý sự kiện cho trang master và các trang nội dung Hướng dẫn sử dụng trang Master Các bước tạo ứng dụng ASP.NET sử dụng trang Master Tạo Web Site Thêm một trang master vào WebSite. Trình bày bố cục (sử dụng bảng hoặc CSS) và thêm các phần tử vào trang master Thêm các trang nội dung cho WebSite. Viết các mã xử lý sự kiện cho trang master và các trang nội dung Template & Điều hướng trang Web 14
    • Tương tự như cách thêm một Web Form. Sử dụng hộp thoại Add New Item Khác: Chọn Template Master Page Thêm một trang master Template & Điều hướng trang Web 15
    • Tương tự như Web Form. Lập trình viên có thể sử dụng màn hình thiết kế để thêm các phần tử HTML, điều khiển asp, ContentPlaceHolder… Sửa nội dung trang Master Template & Điều hướng trang Web 16
    • Tương tự như Web Form, sử dụng cửa sổ Add New Item để thêm trang nội dung Khác: Chọn check box Select master page Thêm trang nội dung Template & Điều hướng trang Web 17
    • Nội dung demo 1. Thêm một trang master vào Website 2. Trình bày bố cục cho trang Master sử dụng bảng. Bố cục trang gồm: Một banner Một sidebar bên trái Một vùng chứa nội dung Footer Demo Sử dụng trang Master Side bar chứa menu Vùng chứa nội dung Banner Nội dung demo 1. Thêm một trang master vào Website 2. Trình bày bố cục cho trang Master sử dụng bảng. Bố cục trang gồm: Một banner Một sidebar bên trái Một vùng chứa nội dung Footer Template & Điều hướng trang Web 18 Footer
    • 3. Thêm một trang nội dung cho WebSite 4. Thêm các phần tử vào trang nội dung 5. Khám phá mã nguồn của trang master và trang nội dung 6. Chạy thử ứng dụng Demo Sử dụng trang master Side bar chứa menu Vùng chứa nội dung Banner 3. Thêm một trang nội dung cho WebSite 4. Thêm các phần tử vào trang nội dung 5. Khám phá mã nguồn của trang master và trang nội dung 6. Chạy thử ứng dụng Template & Điều hướng trang Web 19 Footer
    • Kiểm tra tính hợp lệ của dữ liệu & Quản lý trạng thái 20
    • Bất kì web site chuyên nghiệp nào đều cung cấp cho người dùng các liên kết để điều hướng đến các trang trong web site Các liên kết có thể trình bày dưới dạng: Menu Đường dẫn liên kết (Site Map Path) Điều hướng trang Web Menu dạng TreeView Site Map Path Bất kì web site chuyên nghiệp nào đều cung cấp cho người dùng các liên kết để điều hướng đến các trang trong web site Các liên kết có thể trình bày dưới dạng: Menu Đường dẫn liên kết (Site Map Path) SQL Server 2008 và Cơ sở dữ liệu quan hệ 21 Menu dạng TreeView
    • Với các trang HTML thuần, lập trình viên sử dụng các Hyperlink để xây dựng các liên kết điều hướng Với một ứng dụng ASP.NET có nhiều cách để xây dựng các liên kết điều hướng Sử dụng HTML hyperlink, hoặc điều khiển hyperlink, linkbutton của asp… ASP.NET cung cấp nhóm các điều khiển Navigation để xây dựng liên kết điều hướng dễ dàng. TreeView Menu SiteMapPath Điều hướng trang web như thế nào? Với các trang HTML thuần, lập trình viên sử dụng các Hyperlink để xây dựng các liên kết điều hướng Với một ứng dụng ASP.NET có nhiều cách để xây dựng các liên kết điều hướng Sử dụng HTML hyperlink, hoặc điều khiển hyperlink, linkbutton của asp… ASP.NET cung cấp nhóm các điều khiển Navigation để xây dựng liên kết điều hướng dễ dàng. TreeView Menu SiteMapPath SQL Server 2008 và Cơ sở dữ liệu quan hệ 22
    • TreeView: Hiển thị các liên kết dưới dạng cây, giống cấu trúc thư mục trên Windows Explorer. Menu: Quá quen thuộc SiteMapPath: Hiển thị dưới dạng dãy các liên kết từ trang chủ đến trang hiện tại TreeView, Menu, SiteMapPath SiteMapPath Menu TreeView: Hiển thị các liên kết dưới dạng cây, giống cấu trúc thư mục trên Windows Explorer. Menu: Quá quen thuộc SiteMapPath: Hiển thị dưới dạng dãy các liên kết từ trang chủ đến trang hiện tại SQL Server 2008 và Cơ sở dữ liệu quan hệ 23 TreeView
    • Các điều khiển TreeView, Menu, SiteMapPath hiển thị cấu trúc điều hướng đã được định nghĩa trong một file XML, có tên Web.sitemap Web.sitemap phải được đặt trong thư mục gốc của ứng dụng. Để hiển thị cấu trúc điều hướng được định nghĩa trên file Web.sitemap, điều khiển TreeView, Menu phải buộc với một điều khiển SiteMapDataSource Ngược lại, điều khiển SiteMapPath tự động hiển thị cấu trúc điều hướng trong Web.sitemap không cần sử dụng điều khiển SiteMapDataSource Web.sitemap Các điều khiển TreeView, Menu, SiteMapPath hiển thị cấu trúc điều hướng đã được định nghĩa trong một file XML, có tên Web.sitemap Web.sitemap phải được đặt trong thư mục gốc của ứng dụng. Để hiển thị cấu trúc điều hướng được định nghĩa trên file Web.sitemap, điều khiển TreeView, Menu phải buộc với một điều khiển SiteMapDataSource Ngược lại, điều khiển SiteMapPath tự động hiển thị cấu trúc điều hướng trong Web.sitemap không cần sử dụng điều khiển SiteMapDataSource SQL Server 2008 và Cơ sở dữ liệu quan hệ 24
    • Mỗi phần tử SiteMapNode định nghĩa một trang trong web site Một SiteMapNode có thể chứa các SiteMapNode con để quy định cấu trúc phân cấp của các trang trong web site Web.sitemap <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns= "http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="" title="" description=""> <siteMapNode url="" title="" description="" /> <siteMapNode url="" title="" description="" /> </siteMapNode> </siteMap> SQL Server 2008 và Cơ sở dữ liệu quan hệ 25 <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns= "http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="" title="" description=""> <siteMapNode url="" title="" description="" /> <siteMapNode url="" title="" description="" /> </siteMapNode> </siteMap> - URL: Url của trang -Title: Đoạn văn bản hiển thị trên menu - Description: Đoạn văn bản tool tip của trang
    • Ví dụ File web.sitemap & hiển thị <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="Default.aspx" title="Home" description="Home page."> <siteMapNode url="Service.aspx" title="Service and Support" description="Customer service and product support."> <siteMapNode url="CustService.aspx" title="Customer Service" description="Customer service."> </siteMapNode> <siteMapNode url="Support.aspx" title="Product Support" description="Product support."> </siteMapNode> <siteMapNode url="Map.aspx" title="Site Map" description="A map of all the pages on this web site."> </siteMapNode> </siteMapNode> <siteMapNode url="About.aspx" title="About Us" description="All about our company."> </siteMapNode> </siteMapNode> </siteMap> SQL Server 2008 và Cơ sở dữ liệu quan hệ 26 <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="Default.aspx" title="Home" description="Home page."> <siteMapNode url="Service.aspx" title="Service and Support" description="Customer service and product support."> <siteMapNode url="CustService.aspx" title="Customer Service" description="Customer service."> </siteMapNode> <siteMapNode url="Support.aspx" title="Product Support" description="Product support."> </siteMapNode> <siteMapNode url="Map.aspx" title="Site Map" description="A map of all the pages on this web site."> </siteMapNode> </siteMapNode> <siteMapNode url="About.aspx" title="About Us" description="All about our company."> </siteMapNode> </siteMapNode> </siteMap>
    • Các bước tạo liên kết điều hướng B1. Tạo file web.sitemap định nghĩa cấu trúc phân cấp của các liên kết điều hướng (như đã học) B2. Thêm điều khiển TreeView (hoặc Menu hoặc SiteMapPath) B3. Thêm một điều khiển SiteMapDataSource và liên kết tới file web.sitemap Tạo liên kết điều hướng như thế nào? Các bước tạo liên kết điều hướng B1. Tạo file web.sitemap định nghĩa cấu trúc phân cấp của các liên kết điều hướng (như đã học) B2. Thêm điều khiển TreeView (hoặc Menu hoặc SiteMapPath) B3. Thêm một điều khiển SiteMapDataSource và liên kết tới file web.sitemap SQL Server 2008 và Cơ sở dữ liệu quan hệ 27 <asp:TreeView ID="TreeView2" runat="server“ DataSourceID="SiteMapDataSource1" ShowLines="True"> </asp:TreeView> <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server” /> Mã aspx của điều khiển Treeview (Tham khảo các thuộc tính của điều khiển TreeView, SiteMapPath, Menu trong SGK) Mã aspx định nghĩa điều khiển SiteMapDataSource của TreeView (Tham khảo các thuộc tính trong SGK)
    • Trên từng trang riêng lẻ Trên trang Master Thông thường, các thành phần điều hướng hiển thị giống nhau trên các trang một web site, nên sử dụng điều hướng trên trang master Sử dụng điều hướng trang Web ở đâu? Trên từng trang riêng lẻ Trên trang Master Thông thường, các thành phần điều hướng hiển thị giống nhau trên các trang một web site, nên sử dụng điều hướng trên trang master SQL Server 2008 và Cơ sở dữ liệu quan hệ 28
    • Nội dung demo Tạo ba cấu trúc điều hướng (hiển thị như hình bên) sử dụng TreeView, SiteMapPath, Menu trên trang master đã tạo ở slide trước. Tùy chỉnh menu (màu sắc, kích thước menu…) Demo Tạo liên kết điều hướng Nội dung demo Tạo ba cấu trúc điều hướng (hiển thị như hình bên) sử dụng TreeView, SiteMapPath, Menu trên trang master đã tạo ở slide trước. Tùy chỉnh menu (màu sắc, kích thước menu…) SQL Server 2008 và Cơ sở dữ liệu quan hệ 29
    • Các bước Thêm file web.sitemap. Cấu hình cấu trúc phân cấp điều hướng trên file này Thêm các điều khiển lên trang master Thêm điều khiển menu vào phần sidebar Thêm điều khiển SiteMapPath & điều khiển TreeView vào phần trung tâm trang bên ngoài vùng chứa nội dung Thêm điều khiển SiteMapDatasource Chạy và kiểm tra ứng dụng Thay đổi các thuộc tính màu sắc, độ rộng cho menu Demo Tạo liên kết điều hướng Các bước Thêm file web.sitemap. Cấu hình cấu trúc phân cấp điều hướng trên file này Thêm các điều khiển lên trang master Thêm điều khiển menu vào phần sidebar Thêm điều khiển SiteMapPath & điều khiển TreeView vào phần trung tâm trang bên ngoài vùng chứa nội dung Thêm điều khiển SiteMapDatasource Chạy và kiểm tra ứng dụng Thay đổi các thuộc tính màu sắc, độ rộng cho menu SQL Server 2008 và Cơ sở dữ liệu quan hệ 30
    • Kiểm tra tính hợp lệ của dữ liệu & Quản lý trạng thái 31
    • Khi thiết kế một website, việc định dạng hiển thị cho các thành phần trên trang như bố cục trang web, hiển thị hình ảnh, font chữ, nền, button… sẽ tạo sự lôi cuốn cho trang web. Định dạng trang Web Khi thiết kế một website, việc định dạng hiển thị cho các thành phần trên trang như bố cục trang web, hiển thị hình ảnh, font chữ, nền, button… sẽ tạo sự lôi cuốn cho trang web. SQL Server 2008 và Cơ sở dữ liệu quan hệ 32
    • Các cách định dạng thường dùng Sử dụng thuộc tính của các điều khiển Sử dụng inline style Sử dụng internal style Sử dụng external style (File CSS) Ngoài các cách định dạng trên, ASP.NET cung cấp một tính năng để định dạng trang web. Đó là sử dụng Theme Có thể tạo ra các theme khác nhau và áp dụng các theme này vào các trang trong ứng dụng để định dạng hiển thị cho các thành phần trên trang Có thể áp dụng một Theme cho toàn bộ web site hoặc mỗi trang trong web site áp dụng một Theme khác nhau Định dạng trang Web Các cách định dạng thường dùng Sử dụng thuộc tính của các điều khiển Sử dụng inline style Sử dụng internal style Sử dụng external style (File CSS) Ngoài các cách định dạng trên, ASP.NET cung cấp một tính năng để định dạng trang web. Đó là sử dụng Theme Có thể tạo ra các theme khác nhau và áp dụng các theme này vào các trang trong ứng dụng để định dạng hiển thị cho các thành phần trên trang Có thể áp dụng một Theme cho toàn bộ web site hoặc mỗi trang trong web site áp dụng một Theme khác nhau SQL Server 2008 và Cơ sở dữ liệu quan hệ 33
    • Hai thành phần cơ bản củaTheme File CSS File Skin File CSS Chứa các StyleSheet định dạng hiển thị cho các phần tử HTML trên trang ASP File skin Định dạng hiển thị cho các điều khiển web server Theme Hai thành phần cơ bản củaTheme File CSS File Skin File CSS Chứa các StyleSheet định dạng hiển thị cho các phần tử HTML trên trang ASP File skin Định dạng hiển thị cho các điều khiển web server SQL Server 2008 và Cơ sở dữ liệu quan hệ 34 Một ứng dụng Web sử dụng Theme để định dạng hiển thị cho các phần tử html và các điều khiển
    • Theme được chứa trong thư mục App_Themes Thư mục App_Themes có thể chứa nhiều Folder con. Mỗi Folder con định nghĩa một Theme. Cấu trúc một folder Theme gồm Các File CSS Các File Skin Folder Images chứa ảnh hoặc các tài nguyên khác được sử dụng trong file CSS và skin Cấu trúc thư mục Theme Theme được chứa trong thư mục App_Themes Thư mục App_Themes có thể chứa nhiều Folder con. Mỗi Folder con định nghĩa một Theme. Cấu trúc một folder Theme gồm Các File CSS Các File Skin Folder Images chứa ảnh hoặc các tài nguyên khác được sử dụng trong file CSS và skin SQL Server 2008 và Cơ sở dữ liệu quan hệ 35 Cấu trúc thư mục Theme
    • File CSS của Theme BODY { FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif; FONT-SIZE: 11pt; LINE-HEIGHT: 110%; COLOR : #585880; } H1 { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; COLOR: #585880; margin-top: 3px; } SQL Server 2008 và Cơ sở dữ liệu quan hệ 36 BODY { FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif; FONT-SIZE: 11pt; LINE-HEIGHT: 110%; COLOR : #585880; } H1 { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; COLOR: #585880; margin-top: 3px; }
    • Mã định dạng skin cho các điều khiển tương tự đoạn mã của điều khiển trên trang aspx, chỉ khác không chứa thuộc tính ID. Hai loại skin Skin mặc đinh Không chứa thuộc tính skinID Skin được đặt tên Tên của skin được gán cho thuộc tính SkinID Skin Mã định dạng skin cho các điều khiển tương tự đoạn mã của điều khiển trên trang aspx, chỉ khác không chứa thuộc tính ID. Hai loại skin Skin mặc đinh Không chứa thuộc tính skinID Skin được đặt tên Tên của skin được gán cho thuộc tính SkinID SQL Server 2008 và Cơ sở dữ liệu quan hệ 37 <asp:Label Runat="server" Text="Quantity:"></asp:Label> <asp:TextBox runat="server" BackColor="#FFFFFF" BorderStyle="Solid" Font-Names="Verdana" ForeColor="#585880" BorderColor="#585880" BorderWidth="1pt" /> <asp:Label runat="server" SkinID="Head1"></asp:Label> Skin mặc định Skin được đặt tên
    • ASP.NET cung cấp hai loại theme khác nhau Theme tùy chỉnh Theme StyleSheet Theme tùy chỉnh Các style của theme tùy chỉnh được áp dụng sau external, internal, inline style và các thuộc tính của điều khiển Theme StyleSheet Style của Theme StyleSheet được áp dụng trước external, internal, inline style và thuộc tính của điều khiển Theme tùy chỉnh/ Theme StyleSheet ASP.NET cung cấp hai loại theme khác nhau Theme tùy chỉnh Theme StyleSheet Theme tùy chỉnh Các style của theme tùy chỉnh được áp dụng sau external, internal, inline style và các thuộc tính của điều khiển Theme StyleSheet Style của Theme StyleSheet được áp dụng trước external, internal, inline style và thuộc tính của điều khiển SQL Server 2008 và Cơ sở dữ liệu quan hệ 38
    • Các bước tạo Theme Tạo Folder chứa Theme bằng cách nhấn chuột phải vào website>Add Asp.net Folder, chọn Theme. Đặt tên cho Folder Thêm file css vào Folder Theme Thêm file skin vào Folder Theme Tạo Theme Các bước tạo Theme Tạo Folder chứa Theme bằng cách nhấn chuột phải vào website>Add Asp.net Folder, chọn Theme. Đặt tên cho Folder Thêm file css vào Folder Theme Thêm file skin vào Folder Theme SQL Server 2008 và Cơ sở dữ liệu quan hệ 39
    • Một Theme tùy chỉnh có thể được áp dụng cho toàn bộ ứng dụng hoặc cho các trang được chọn. Áp dụng Theme tùy chỉnh cho toàn bộ ứng dụng Thêm phần tử Page vào file web.config. Chỉ định giá trị thuộc tính Theme bằng tên Theme <system.web> <pages theme="ThemeName" /> </system.web> Hướng dẫn sử dụng Theme tùy chỉnh Một Theme tùy chỉnh có thể được áp dụng cho toàn bộ ứng dụng hoặc cho các trang được chọn. Áp dụng Theme tùy chỉnh cho toàn bộ ứng dụng Thêm phần tử Page vào file web.config. Chỉ định giá trị thuộc tính Theme bằng tên Theme <system.web> <pages theme="ThemeName" /> </system.web> SQL Server 2008 và Cơ sở dữ liệu quan hệ 40
    • Áp dụng Theme tùy chỉnh cho một trang Ở giai đoạn thiết kế Thêm thuộc tính Theme vào chỉ dẫn Page <%@ Page="" Language="C#" Theme="SmokeAndGlass" %> Tại thời gian chạy Gán giá trị cho thuộc tính Theme của lớp Page trong phương thức xử lý sự kiện Page_PreInit protected void Page_PreInit(object sender, EventArgs e) { Page.Theme = Session["MyTheme"].ToString(); } Hướng dẫn sử dụng Theme tùy chỉnh Áp dụng Theme tùy chỉnh cho một trang Ở giai đoạn thiết kế Thêm thuộc tính Theme vào chỉ dẫn Page <%@ Page="" Language="C#" Theme="SmokeAndGlass" %> Tại thời gian chạy Gán giá trị cho thuộc tính Theme của lớp Page trong phương thức xử lý sự kiện Page_PreInit protected void Page_PreInit(object sender, EventArgs e) { Page.Theme = Session["MyTheme"].ToString(); } SQL Server 2008 và Cơ sở dữ liệu quan hệ 41
    • Áp dụng skin cho một điều khiển Ở giai đoạn thiết kế Gán giá trị cho thuộc tính SkinID của điều khiển <asp:Label ID="lblName" runat="server" SkinID="Head1"></asp:Label> Tại thời gian chạy Gán giá trị cho thuộc tính SkinID của điều khiển trong phương thức xử lý sự kiện PreInit protected void Page_PreInit(object sender, EventArgs e) { lblName.SkinID = Session["MySkinID"].ToString(); } Hướng dẫn sử dụng Theme tùy chỉnh Áp dụng skin cho một điều khiển Ở giai đoạn thiết kế Gán giá trị cho thuộc tính SkinID của điều khiển <asp:Label ID="lblName" runat="server" SkinID="Head1"></asp:Label> Tại thời gian chạy Gán giá trị cho thuộc tính SkinID của điều khiển trong phương thức xử lý sự kiện PreInit protected void Page_PreInit(object sender, EventArgs e) { lblName.SkinID = Session["MySkinID"].ToString(); } SQL Server 2008 và Cơ sở dữ liệu quan hệ 42
    • Hủy theme tùy chỉnh cho tất cả các trang trong web site Thiết lập thuộc tính Theme của phần tử Page trong file web.config bằng xâu rỗng <system.web> <pages theme="" /> </system.web> Hướng dẫn sử dụng Theme tùy chỉnh Hủy theme tùy chỉnh cho tất cả các trang trong web site Thiết lập thuộc tính Theme của phần tử Page trong file web.config bằng xâu rỗng <system.web> <pages theme="" /> </system.web> SQL Server 2008 và Cơ sở dữ liệu quan hệ 43
    • Hủy theme tùy chỉnh cho một trang web Ở giai đoạn thiết kế Thiết lập thuộc tính Theme của chỉ dẫn Page bằng xâu rỗng <%@ Page Language="C#" Theme="" %> Tại thời gian chạy Trong phương thức xử lý sự kiện PreInit gán giá trị thuộc tính Theme của lớp Page bằng xâu rỗng protected void Page_PreInit(object sender, EventArgs e) { Page.Theme = ""; } Hướng dẫn sử dụng Theme tùy chỉnh Hủy theme tùy chỉnh cho một trang web Ở giai đoạn thiết kế Thiết lập thuộc tính Theme của chỉ dẫn Page bằng xâu rỗng <%@ Page Language="C#" Theme="" %> Tại thời gian chạy Trong phương thức xử lý sự kiện PreInit gán giá trị thuộc tính Theme của lớp Page bằng xâu rỗng protected void Page_PreInit(object sender, EventArgs e) { Page.Theme = ""; } SQL Server 2008 và Cơ sở dữ liệu quan hệ 44
    • Hủy theme tùy chỉnh cho một điều khiển Ở giai đoạn thiết kế Thiết lập thuộc tính EnableTheming của điều khiển bằng False <asp:Label ID="lblName" runat="server" EnableTheming="False" ForeColor="red"> </asp:Label> Tại thời gian chạy Trong phương thức xử lý sự kiện PreInit gán giá trị thuộc tính EnableTheming của lớp điều khiển bằng False protected void Page_PreInit(object sender, EventArgs e) { lblName.EnableTheming = false; lblName.ForeColor = System.Drawing.Color.Red; } Hướng dẫn sử dụng Theme tùy chỉnh Hủy theme tùy chỉnh cho một điều khiển Ở giai đoạn thiết kế Thiết lập thuộc tính EnableTheming của điều khiển bằng False <asp:Label ID="lblName" runat="server" EnableTheming="False" ForeColor="red"> </asp:Label> Tại thời gian chạy Trong phương thức xử lý sự kiện PreInit gán giá trị thuộc tính EnableTheming của lớp điều khiển bằng False protected void Page_PreInit(object sender, EventArgs e) { lblName.EnableTheming = false; lblName.ForeColor = System.Drawing.Color.Red; } SQL Server 2008 và Cơ sở dữ liệu quan hệ 45
    • Nội dung demo: Tạo Theme Tạo file CSS cho theme Tạo file skin cho theme. Định dạng hiển thị cho các điều khiển button, textbox… Gán Theme tùy chỉnh cho toàn bộ trang trong web site. Chạy thử Hủy bỏ Theme tùy chỉnh cho toàn bộ trang. Chạy thử Gán Theme tùy chỉnh cho một trang. Chạy thử Hủy bỏ Theme tùy chỉnh cho một trang. Chạy thử Gán skin cho một điều khiển. Chạy thử Demo Sử dụng Theme Nội dung demo: Tạo Theme Tạo file CSS cho theme Tạo file skin cho theme. Định dạng hiển thị cho các điều khiển button, textbox… Gán Theme tùy chỉnh cho toàn bộ trang trong web site. Chạy thử Hủy bỏ Theme tùy chỉnh cho toàn bộ trang. Chạy thử Gán Theme tùy chỉnh cho một trang. Chạy thử Hủy bỏ Theme tùy chỉnh cho một trang. Chạy thử Gán skin cho một điều khiển. Chạy thử SQL Server 2008 và Cơ sở dữ liệu quan hệ 46
    • Trang Master Sử dụng trang master để tạo các trang có những thành phần giống nhau (barner, menu, footer…) Mỗi trang Master phải chứa tối thiểu một điều khiển ContentPlaceHolder, nằm trong thẻ <form>, quy định vùng chứa nội dung (vùng hiển thị trang nội dung) Trang nội dung chứa phần nội dung của từng trang riêng lẻ Tất thành phần được thêm bên ngoài vùng chứa nội dung, sẽ được hiển thị trên mọi trang trong website. Có thể tạo nhiều trang master cho một website, và chỉ định trang master cho từng trang nội dung riêng lẻ. Tổng kết Trang Master Sử dụng trang master để tạo các trang có những thành phần giống nhau (barner, menu, footer…) Mỗi trang Master phải chứa tối thiểu một điều khiển ContentPlaceHolder, nằm trong thẻ <form>, quy định vùng chứa nội dung (vùng hiển thị trang nội dung) Trang nội dung chứa phần nội dung của từng trang riêng lẻ Tất thành phần được thêm bên ngoài vùng chứa nội dung, sẽ được hiển thị trên mọi trang trong website. Có thể tạo nhiều trang master cho một website, và chỉ định trang master cho từng trang nội dung riêng lẻ. SQL Server 2008 và Cơ sở dữ liệu quan hệ 47
    • Điều hướng trang Web ASP.NET cung cấp điều khiển Navigation để tạo các liên kết điều hướng trang Web TreeView Menu SiteMapPath TreeView, Menu, SiteMapPath hiển thị cấu trúc phân cấp điều hướng trang web được định nghĩa trong file xml, có tên Web.sitemap SiteMapPath tự động hiển thị cấu trúc phân cấp điều hướng trong file web.sitemap TreeView & Menu phải buộc với một điều khiển SiteMapDataSource để hiển thị cấu trúc phân cấp điều hướng trong file web.sitemap Tổng kết Điều hướng trang Web ASP.NET cung cấp điều khiển Navigation để tạo các liên kết điều hướng trang Web TreeView Menu SiteMapPath TreeView, Menu, SiteMapPath hiển thị cấu trúc phân cấp điều hướng trang web được định nghĩa trong file xml, có tên Web.sitemap SiteMapPath tự động hiển thị cấu trúc phân cấp điều hướng trong file web.sitemap TreeView & Menu phải buộc với một điều khiển SiteMapDataSource để hiển thị cấu trúc phân cấp điều hướng trong file web.sitemap SQL Server 2008 và Cơ sở dữ liệu quan hệ 48
    • Theme ASP.NET cung cấp tính năng Theme để định dạng hiển thị cho các thành phần trên trang Web Hai thành phần cơ bản của Theme File CSS: Chứa các StyleSheet định dạng hiển thị cho các phần tử HTML trên trang ASP File Skin: Định dạng hiển thị cho các điều khiển web server Hai loại Theme Theme tùy chỉnh: Các style của theme tùy chỉnh được áp dụng sau external, internal, inline style và các thuộc tính của điều khiển Theme: Style của Theme StyleSheet được áp dụng trước external, internal, inline style và thuộc tính của điều khiển Tổng kết Theme ASP.NET cung cấp tính năng Theme để định dạng hiển thị cho các thành phần trên trang Web Hai thành phần cơ bản của Theme File CSS: Chứa các StyleSheet định dạng hiển thị cho các phần tử HTML trên trang ASP File Skin: Định dạng hiển thị cho các điều khiển web server Hai loại Theme Theme tùy chỉnh: Các style của theme tùy chỉnh được áp dụng sau external, internal, inline style và các thuộc tính của điều khiển Theme: Style của Theme StyleSheet được áp dụng trước external, internal, inline style và thuộc tính của điều khiển SQL Server 2008 và Cơ sở dữ liệu quan hệ 49