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

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

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">
</div>
</form>
</body>
</html>
Ví dụ: Mã nguồn của trang master được tạo bởi Visual
Studio
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs"
<!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">
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1"
runat="server">
</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"
Đ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"
Đ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 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">
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">
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 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

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)
{
}
}
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

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>
<%@ 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

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

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

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

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
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
Footer

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

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

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="" />
description="" />
</siteMapNode>
</siteMap>
<siteMap xmlns= "http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="" title="" description="">
description="" />
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ị
<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>
<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
<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

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…)

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

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.

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

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
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
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;
}
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
<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

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

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>

Á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();
}
Áp dụng Theme tùy chỉnh cho một trang
Thêm thuộc tính Theme vào chỉ dẫn Page
<%@ Page="" Language="C#" Theme="SmokeAndGlass"
%>
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
{
Page.Theme = Session["MyTheme"].ToString();
}

Áp dụng skin cho một điều khiển
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>
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
{
lblName.SkinID = Session["MySkinID"].ToString();
}
Áp dụng skin cho một điều khiển
Gán giá trị cho thuộc tính SkinID của điều khiển
SkinID="Head1"></asp:Label>
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
{
lblName.SkinID = Session["MySkinID"].ToString();
}

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ủ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ủy theme tùy chỉnh cho một trang web
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="" %>
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
{
Page.Theme = "";
}
Hủy theme tùy chỉnh cho một trang web
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ính Theme của lớp Page bằng xâu rỗng
{
Page.Theme = "";
}

Hủy theme tùy chỉnh cho một điều khiển
Thiết lập thuộc tính EnableTheming của điều khiển bằng
False
EnableTheming="False" ForeColor="red">
</asp:Label>
tính EnableTheming của lớp điều khiển bằng False
{
lblName.EnableTheming = false;
lblName.ForeColor = System.Drawing.Color.Red;
}
Hủy theme tùy chỉnh cho một điều khiển
Thiết lập thuộc tính EnableTheming của điều khiển bằng
False
EnableTheming="False" ForeColor="red">
</asp:Label>
tính EnableTheming của lớp điều khiển bằng False
{
lblName.EnableTheming = false;
lblName.ForeColor = System.Drawing.Color.Red;
}

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ử

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ẻ.

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
Tổng kết
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
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

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

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

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

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

Más de MasterCode.vn

Más de MasterCode.vn (20)

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