Master pages
Download
1 / 21

Master Pages - PowerPoint PPT Presentation


  • 85 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Master Pages' - sugar


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>


ad