Master pages
This presentation is the property of its rightful owner.
Sponsored Links
1 / 21

Master Pages PowerPoint PPT Presentation


  • 66 Views
  • Uploaded on
  • Presentation posted in: General

Master Pages. Master Pages i ASP.NET 2.0. Motivation. Hvordan giver man sin hjemmeside et ensartet udseende? Det er et langsommeligt arbejde, når man har mange sider …. header. header. header. left pane. left pane. left pane. footer. footer. footer. Løsning — Master Pages.

Download Presentation

Master Pages

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Master pages

Master Pages

  • Master Pages i ASP.NET 2.0


Motivation

Motivation

  • Hvordan giver man sin hjemmeside et ensartet udseende?

  • Det er et langsommeligt arbejde, når man har mange sider …


L sning master pages

header

header

header

left pane

left pane

left pane

footer

footer

footer

Løsning — Master Pages

  • Ideen er at definere en skabelon til webstedet – "Master Page"

  • Derefter defineres en eller flereindholdsfelter – "ContentPlaceholder"

site.master

header

placeholder

left pane

footer

default.aspx

page1.aspx

page2.aspx

page-specific

content

page-specific

content

page-specific

content


Skab en master page

Skab en Master Page

  • Næsten ligesom at skabe en standard ASP.NET, lige pånær:

    • Website > Add New Item > Master Page

    • anvender "Master"-direktiv og ".master"-filefternavn

    • tilføj ContentPlaceHolder kontrol(ler), som forsynes med indhold fra indholdssiderne.

MasterPage.master

<%@ Masterlanguage="C#"... %>

<html>

<body>

.

.

.

<asp:ContentPlaceHolder

ID="MainContentArea"

Runat="server" />


Skab indholdsside content page

Skab indholdsside (Content Page)

  • Standard ASP.NET pages where:

    • Website > Add New Item > WebForm > "Select Master page"

    • side-direktivet indeholder en "MasterPageFile"-attribut

    • knyt Content-kontrollen til indholdet

Default.aspx

<%@ Page MasterPageFile="~/MasterPage.master"... %>

<asp:Content

ID="Content1"

ContentPlaceHolderID="MainContentArea"

Runat="server">

<h1>Here is some very exciting content...</h1>

</asp:Content>


Design time underst ttelse

Design-time understøttelse

  • Når indholdssiderene designes, så vises master-siden i gråt …

"Master Page"-

delen vises, menkan ikke redigeres

content

placeholders

kan redigeres


Arbejde med master pages

Arbejde med Master Pages

  • Indholdssider

    • bestemmer sidens titel (Title-egenskaben)

    • forsyner hver "place holder" med indhold

  • Tilgang til master-sidens egenskaber og kontroller

    • brug Master. for at få tilgang til egenskaber

    • brug Master.FindControl("ID") til at få adgang til kontroller på master-siden

public partial class ContentPage : System.Web.UI.Page {

protected void Page_Load(object sender, EventArgs e) {

Label lbl;

lbl = (Label) Master.FindControl("lblStatus");

lbl.Text = "Content page is loading...";

}

}


Arbejde med content pages

Arbejde med Content Pages

  • Indholdet i indholdssider kan være hvad som helst:

    • statisk tekst og billeder

    • dynamisk funktionalitet via kontroller


Temaer themes

Temaer (Themes)

  • Stylesheets til ASP.NET web-applikationer


Temaer themes1

Temaer (Themes)

  • Temaer giver mulighed for at anvende generelle layout-opsætninger på tværs af webstedet:

    • themes are the control-based equivalent of stylesheets

    • themes are applied on the server to set look-and-feel of controls

<%@ Page Language="C#"Theme="BasicBlue"%>


Oprettelse af temaer

Oprettelse af temaer

  • Opret en App_Themes mappe

  • Opret en ny mappe under App_Themes

    • denne undermappe bliver til navnet på temaet

  • Opret en eller flere .skin-filer i undermappen

    • kan også indeholde stylesheet-filer (.css)

    • kan også indeholde ressourcer, fx billeder

    • .skin-filer indholder kontrolerklæringer med standard-attributter

Day.skin

<asp:buttonrunat="server"borderstyle="Solid"

borderwidth="2px"bordercolor="#66ff66"

backcolor="#99ffff"/>

<asp:calendarrunat="server"borderstyle="Solid"

borderwidth="2px"bordercolor="#66ff66"

backcolor="#99ffff"/>

<asp:TextBoxrunat="server"backcolor="#99ffff"forecolor="#FF3333"/>


Brug af temaer

Brug af temaer

  • Temaer kan tilknyttes på side-niveau vha.Theme-egenskaben eller side-direktivet:

  • Vha. web.config-filen kan et standard-tema knyttes til samtlige sider på webstedet:

<[email protected]="C#"Theme="Day" %>

web.config

<configuration>

<system.web>

<pagestheme="Night"/>

</system.web>

</configuration>


Navigation p webstedet

Navigation på webstedet

  • Kontroller til navigation mellem siderne på webstedet


Navigation

Navigation

  • Vi så tidligere, hvordan vi via koden kunne gå fra side til side:

  • ASP.NET 2.0 giver også mulighed for navigation på hele webstedet:

    • Menu

      • Traditional menu (statisk visning eller dynamisk opdateret)

    • TreeView

      • Hierarkisk visning med billeder og tekst

    • SiteMapPath

      • "Brødkrumme"-kontrol, som viser stien efterhånden som brugeren arbejder sig igennem siderne

protected void btnLogout_Click(object sender, EventArgs e) {

this.Server.Transfer("Login.aspx", false /*clear state*/);

}


Navigationskontroller

Navigationskontroller

  • Alle tre kontroller baseres på en XML .sitemap fil …

web.sitemap

<siteMapxmlns="http://schemas.microsoft.com/..." >

<siteMapNodetitle="Home"url="~/Default.aspx" description="...">

<siteMapNodetitle="Departments" url="~/departments/default.aspx" >

<siteMapNodetitle="Accounting" url="~/departments/accounting.aspx" />

<siteMapNodetitle="Development" url="~/departments/develop.aspx" >

...


Brug af navigationskontrollerne

Brug af navigationskontrollerne

<siteMap>

<siteMapNodetitle="Home"url="~/Default.aspx">

<siteMapNodetitle="Products"url="~/Products.aspx" />

<siteMapNodetitle="Contact Us"url="~/Contact.aspx" />

</siteMapNode>

</siteMap>

  • Opret først .sitemap-filen:

    • Website menu > Add New Item > Site Map

    • Opret en menustruktur i web.sitemap filen vha. XML:

      • en flad menu er defineret ved ét niveau af indlejrede <siteMapNode>-elementer

      • en hierarkisk menu er defineret ved indlejrede <siteMapNode>-elementer

  • Tilføj en SiteMapDataSource–kontrol til (master-) siden

    • træk og slip fra værktøjskassen …

  • Tilføj en navigationskontrol til (master-) siden

    • sæt DataSourceID–egenskaben til SiteMapDataSource kontrollen

    • [SiteMapPath bindes automatisk]


Eksempel

Eksempel

  • En simpel flad menu vist med alle tre menukontroller

  • Menu

  • Orientation: Horizontal

  • StaticDisplayLevels: 2

TreeView

SiteMapPath


Expression web designer

Expression Web Designer

  • Microsoft's Expression Web Designer


Expression web designer1

Expression Web Designer

  • Microsoft's erstatning for FrontPage, "ASP.NET-aware"…

    • Man kan hoppe frem og tilbage mellem VS 2005 and EWD


Hvad s

Hvad så?

  • Øvelse #5


Blank

<blank>


  • Login