BÀI 5: Thiết kê và lập trình web với ASP.NET - CẤU HÌNH GIAO DIỆN WEDSITE

Trang 1

L p trình và Thi t k Web 2

Bài 5

C u

C u hình hình Giao Giao di n di n Website Website

C u

C u hình hình Giao Giao di n di n Website Website

Ths Tr n Th Bích H nh

Khoa CNTT

N i d

N i dung

Master Page

S d ng CSS v i ASP.NET Server Control

Skin và Theme

Site Navigation

2

L p trình và Thi t k Web 2 – Bài 5: C u hình Giao di n Website

N i d

N i dung

Master Page

Skin và Theme

Site Navigation

Master Page

Master PageMaster Pagecho phépcho phép đ nh ngh a layout template nh tđ nh ngh a layout template nh t quán cho toàn b WebForm trong site

Content PageContent Pagelà cáclà các WebFormWebForm k th a Master Page và bk th a Master Page và b sung thêm n i dung

Trang 2

M t P

Master Page

Master page sMaster page s đ nh ngh a cácđ nh ngh a các PlaceHolderControlPlaceHolderControl

Content page s chèn n i dung t ng ng vào các

PlaceHolderControltrong master page

5

T tt//Th Th đ i đ i M t P M t P tt C C t t t P t P Truy

Truy xu t xu t//Thay Thay đ i đ i Master Page Master Page tt Content Page

Cách 1: SCách 1: S d ng phd ng ph ng th cng th cFindControlFindControltt đ i t ngđ i t ng

Master

• Ví d – Trong Master Page có 1 Hyperlink v i

– Trong Content Page.aspx.CS: HyperLink ad=( HyperLink) Master.FindControl ( controlInMasterPage");

HyperLink ad ( HyperLink) Master.FindControl ( controlInMasterPage );

if ( ad != null) {

ad.ImageUrl = "images/Logo.gif";

ad.NavigateUrl = "http://www.interneturl.com";

6

T tt//Th Th đ i đ i M t P M t P tt C C t t t P t P

Truy

Cách 2:

– Master Page: óng gói d li u thành các thu c tính có th

truy xu t (Properties) y ( p )

public string AdImageUrl

{

get {

return controlInMasterPage ImageUrl ; }

set {

controlInMasterPage g ImageUrl = value;

}

T tt//Th Th đ i đ i M t P M t P tt C C t t t P t P Truy

Cách 2 (tt):Cách 2 (tt):

– Content Page:

• Ch Ch đ nh ki u c th c a Master Page trong Content page đ nh ki u c th c a Master Page trong Content page.aspx aspx

<%@ Page Language ="C#" MasterPageFile ="~/MasterPage.master" … %>

/

<%@ MasterType VirtualPath ="~/MasterPage.master" %> ho c

<%@ MasterType TypeName =“MyMasterPageClassName" %>

• Truy xu t/Thay đ i Master Page trong Content page.aspx.CS

Master AdImageUrl = "images/Logo gif";

Master.AdImageUrl = "images/Logo.gif";

Trang 3

L t ì h t ì h th th đ i đ i M t P M t P

L p

L p trình trình thay thay đ i đ i Master Page Master Page

Gán MasterPage m i choGán MasterPage m i choPage.MasterPageFilePage.MasterPageFiletrongtrong

hàm x lý s ki nPage_PreInit

protected void Page_PreInit(object sender, EventArgs e)

{

Page.MasterPageFile = "~/AnotherMasterPage.master";

}

9

C

X lýlý ss ki nki n phátphát sinhsinh tt Master Master trongtrong Content PageContent Page

 óng gói control phát sinh sóng gói control phát sinh s ki n trong MasterPageki n trong MasterPage

// MasterPage.aspx.cs public RadioButtonList MyRadioList { get {

return RadioButtonList1;

} }

B t s ki n x lý trong ContentPage

// ContentPage.aspx.cs protected void Page_Load (object sender, EventArgs e) {

Master.MyRadioList.SelectedIndexChanged +=

new System.EventHandler( ContentList_Changed );

} protected void ContentList_Changed (object sender, EventArgs e) {

RadioButtonList myRadioList = (RadioButtonList)sender;

Response.Write(myRadioList.SelectedValue);

10 }

N i d

N i dung

Master Page

Skin và Theme

Site Navigation

S d CSS ii ASP NET S ASP NET S C C t l t l

S d ng d ng CSS CSS v i v i ASP.NET Server Control ASP.NET Server Control

Cách 1: ThayCách 1: Thayđ i Properties c a các asp.net serverđ i Properties c a các asp.net server control lúc thi t k (inline css)

• Ví d :

<span id="LabelMsg"

style="display:inline-block;

l R d color:Red;

background-color:#FFFF80;

border-color:Lime;

border-style:Dashed; y ; font-weight:bold;

font-style:italic;

Trang 4

Cách 2: Thayđ i n i dung thu c tính Style (inline css)

c ađ i t ng server control t ng ng

• Ví d : Code behind:

LabelMsg.Style[“font-style"] = " italic “ ;

LabelMsg.Style[“text-decoration"] = “ underline “ ;

LabelMsg.Style[“color"] = “ Red “ ;

LabelMsg.Style[ color ] Red ;

<span id="LabelMsg"

style="font-style:italic;

text-decoration:underline;

color:Red;“>

H ll W ld

Hello World

</span>

13

Cách 3: Thi t l p giá tr thu c tínhCách 3: Thi t l p giá tr thu c tính CssClassCssClassc ac a

• Ví d : Ví d : .myStyle { myStyle {

font-style: bold ; text-decoration: line-through ;

color: green ; }

• Code behind:

LabelMsg.Style.Clear( );

LabelMsg.CssClass = “myStyle”;

<span id="Label1" class="myStyle">Hello World </span>

14

N i d

N i dung

Master Page

Skin và Theme

Site Navigation

Th & Ski

Th & Ski Theme & Skin

Trang 5

Theme

1 Theme có th xem là 1 giao di n c a trang web

T t c theme ph iđ t trong th m cApp_Themes

 M i theme đ nh ngh a nhi u skin file, cssfile, hình nh,

17

Ski Fil Skin File

Skin file đ nh d ng hi n th các asp.net server controlg p – Ví d : nh ngh a style áp d ng đ i v i m i Label và TextBox trong trang web

< asp : Label runat ="server"

ForeColor ="Blue" Font-Size ="10pt“ Font-Name ="Verdana" />

< asp : TextBox runat ="server"

BackColor ="#FFFFC0" ForeColor ="Green“ />

L u ý: Skin file ch ch a các đ nh ngh a style cho control

Và KHÔNG CÓ thu c tính ID

18

Ski ID

SkinIDSkinIDdùng thi t l p nhi udùng thi t l p nhi uđ nh d ng khác nhauđ nh d ng khác nhau

– Ví d :

• Skin File:

< asp : TextBox runat ="server"

BackColor ="#FF0000" ForeColor ="White" SkinID ="skin1" />

< asp : TextBox ID ="TextBoxUsername" runat ="server“

< asp : TextBox ID = TextBoxUsername runat = server

SkinID ="skin1" />

S d ng d ng Theme Theme

SS d ng Theme trong 1 Web formd ng Theme trong 1 Web form –<%@ Page Theme ="Theme1“

S d ng Theme trong m i Web form Trong file web.config, b sung:

<system.web>

…

<pages theme=“ Theme1 " />

…

Trang 6

L t ì h t ì h Th Th đ i đ i Th Th

L p

L p trình trình Thay Thay đ i đ i Theme Theme

Gán theme m i choGán theme m i choPage.ThemePage.Themetrong hàm xtrong hàm x lý slý s ki nki n

Page_PreInit

protected void Page_PreInit(object sender, EventArgs e)

{

Page.Theme = “Theme2”;

}

21

N i d

N i dung

Master Page

Skin và Theme

Site Navigation

22

Sit N i ti

Site Navigation

XML Site Map

SiteMapDataSource

SiteMapPath Control

Menu Control

TreeView Control

C u

C u trúc trúc website website

Trang 7

XML Sit M

XML Site Map

 nh ngh a c u trúc website trong filenh ngh a c u trúc website trong file Web.sitemap Web.sitemap

<?xml version="1.0" encoding="utf-8" ?>

<siteMap

xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">

<siteMapNode url=“Home.aspx" title="Home " description="HomePage">

…

</siteMapNode>

< it M N d l “H l " titl “H l " >

…

</siteMapNode>

25

</siteMapNode>

</siteMap>

S d ng d ng XML Site Map XML Site Map

T o SiteMapDataSource

<asp:SiteMapDataSource ID=" SiteSource " runat="server" />

Web.Sitemap

26

C hì h hì h Sit M Sit M Fil

C u

C u hình hình SiteMap SiteMap File File

C u hình thayC u hình thayđ i file sitemap trongđ i file sitemap trongWeb.ConfigWeb.Config

<system.web>

<add name=“ SpecialSiteMapProvider "

type=" System Web XmlSiteMapProvider "

type= System.Web.XmlSiteMapProvider

siteMapFile="~/Special.Sitemap"/>

<add name=“ XmlSiteMapProvider "

type="System.Web.XmlSiteMapProvider"

siteMapFile="~/web.Sitemap"/>

</providers>

</siteMap>

</system web>

</configuration>

Sit M P th Sit M P th C C t l t l SiteMapPath

SiteMapPath Control Control

Hi n thHi n th đ ng d n truy c p t root node (trang ch ) đ nđ ng d n truy c p t root node (trang ch ) đ n node hi n t i (breadcrumb)

M i node phân cách nhau b iM i node phân cách nhau b iPathSeperatorPathSeperator

Trang 8

M C t l

Menu Control

Hi n th c u trúc website dHi n th c u trúc website d i d ng Menui d ng Menu

<asp:Menu ID="MenuMain" runat="server“ DataSourceID="SiteSource“ >

</asp:Menu>

Orientation=“Vertical"

Orientation Vertical StaticDisplayLevels="2"

StaticSubMenuIndent="0px"

Orientation="Horizontal"

StaticDisplayLevels="2"

St ti S bM I d t "10

29

StaticSubMenuIndent="10px

T Vi C C t l t l TreeView

TreeView Control Control

Hi n th c u trúc website dHi n th c u trúc website d i d ng TreeViewi d ng TreeView

<asp:TreeView ID="TreeViewMain" runat="server" DataSourceID="SiteSource” >

</asp:TreeView>

ImageSet=“ Arrows " ImageSet=“ BulletedList6 " ImageSet=" WindowsHelp "

30

T ng

T ng k t k t

Master Page

– Master Page, Content Page, PlaceHolderControl

Thay đ i/ Truy xu t Master Page t Content Page

– Thay đ i/ Truy xu t Master Page t Content Page

– Inline CSS

– Embedded, external CSS

T k t k t ((tt tt))

T ng

T ng k t k t ((tt tt))

Skin và Theme – Theme

Skin File SkinID

– Skin File, SkinID

Site Navigation – XML Site Map p

– SiteMapDataSource

– SiteMapPath Control

– Menu Control Tree View Control

– Tree View Control

Định dạng
Số trang	8
Dung lượng	544,92 KB