Master Pages Themes Navigation and Site Navigation - ASP - Net Lecture 9

M t P
Master
Pages, Th
Themes and
d Site
Sit
Navigation
http://freepdf-books.com
Agenda
g
`
Master Pages
`
`
Menu, Tree View, Breadcrumbs

`
Manage the skeleton of your site

Manage the XHTML
Tools
oo s to get around
a ou your
you site
s te
Themes
`
`
Manage the skin of your site

Manage CSS
Master Pages
Master Page
Content Page
Master Page Basics

`
`
Masters define common content and placeholders

( asp:ContentPlaceHolder )
(<asp:ContentPlaceHolder>)
Content pages reference masters and fill placeholders with
content (<asp:Content>)
Site.master
<%@ Master %>
<asp:ContentPlaceHolder
C t tPl
H ld
ID="Main"
RunAt="server" />
default.aspx
<%@ Page MasterPageFile="Site.master" %>
<asp:Content
C t tPl
ContentPlaceHolderID=
H ld ID
"Main" RunAt="server" />
</asp:Content>
http://.../default.aspx
Master Page Architecture
Master file A.master

.
< % @ Master
Content file B.aspx.

< % @ Page
Master = A .master
%>
%>
Resulting Page
< asp :Content
runat = server
ContentName
= Main >
< / asp :Content
>
< asp :ContentPlaceHolder

runat = server
ContentName
= Main
/>
< asp :Content

runat = server
< asp :ContentPlaceHolder

runat = server
ContentName
= Footer
ContentName
= Footer >
< / asp :Content
>
/>
Create a New Master Page
Use Table for Layout Control
Set up the Master Page
Defining a Master Page

<%@ Master Language=CS" %>
<html>
<body>

<table width="100%">
<tr>
<td bgcolor="darkblue" align="center">
<span style="font-size: 36pt; color: white">ACME Inc.</span>
</td>
</tr>
</table>

<asp:ContentPlaceHolder
C t tPl
H ld ID="Main"
ID "M i " RunAt="server"
R At "
" />
/
</body>
</html>
Master Pages:
g
Creating
g a master p
page
g
1. Create a master page with .master extension
2 Define a master directive:
2.
<%@ master .. %>
3. Add content:
Can contain any html or control page content
Define replaceable place-holder regions:
Use an <asp:contentplaceholder> control
Add default content within it (optional)
Modified Master Page

<%@ Master Language=CS" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www
xmlns= http://www.w3.org/1999/xhtml
w3 org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td colspan="2" style="height: 100px">
<img src="images/asp_net_logo.gif" />
<span style="font-size:
style font size: 24pt">Minder
24pt >Minder Chen ASP
ASP.NET
NET Learning Web Site</span></td>
</tr>
<tr>
<td style="width: 49px" valign="top">
<asp:Menu ID="Menu1" runat="server">
</asp:Menu>
</td>
<td>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</div>
</form></body></html>
Default Content
`
`
ContentPlaceHolder controls can define content of their

own (("default
default content")
content )
Default content is displayed ONLY if not overridden by
content page
<%@ Master %>
...
<asp:ContentPlaceHolder ID="Main" RunAt="server">
This is default content that will appear in the absence of a
matching Content control in a content page
<asp:ContentPlaceHolder>
Create a Content Page
Method 1
Add a Content Page based on a Master Page
Method 2
Create a Content Page: Applying a Master

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

<asp:Content ContentPlaceHolderID="Main" RunAt="server">
This content fills the content place holder "Main"
Main defined in the master page (site.Master)
</asp:Content>
Using a Master Page

1. Create an ASP.NET page (.aspx extension)
2. On the page directive:
<%@ page masterpagefile= %> attribute to reference master

Set the title attribute <%@ Page title=jeff %>
3. Optionally add content to override the master:

`
Master page can be designed as any other page is designed
except <asp:content> tag.
tag Any thing with in <asp:content> tag
will be overridden by a content page.
`
<asp:content> controls replace regions in the master
`
<asp:content>
p
controls can contain anyy ppage
g content
A Content Page with a Master Page Applied
Code for AboutUS.aspx

<%@ Page Language=CS" MasterPageFile="~/MasterPage.master"
Title="About US" %>
<asp:Content
C
ID="Content1"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
Runat
Server
<strong><span style="font-size: 14pt">This is a web site developed
by Minder Chen to help others to learn ASp.NET 1.X and 2.0.
<br />
He has used ASP.NET for more than 3 years by now and has
developed a Web-based Decision Support System using ASP.NET. He can be
reached at minderchen@hotmail.com
minderchen@hotmail com
<br />
</span></strong>
</asp:Content>
/
C
Applying
pp y g a Master Page
g to a Site
<configuration>
<system web>
<system.web>
<pages masterPageFile="~/MasterPage.master" />
</system.web>
</configuration>
Site Navigation
`
Navigation UIs are tedious to implement

`
Especially if they rely on client-side

client side script
New controls simplify site navigation

`
`
`
`
Menu - Navigation
g
User Interface (UI)
( )
TreeView - Navigation User Interface (UI)
SiteMapPath - "Bread crumb" UI controls
SiteMapDataSource - XML site maps
Site Navigation
`
`
Menu Control
Two Approaches:
`
`
Using Menu Item Editor

Usingg Sitemapp file (XML
(
based Web.sitemap
p file))
Using Menu Item Editor
Click to View
Menu Editor Window
Use the Items menu to add/remove

new items and Text and NavigateUrl
properties to set text and URL
of Menu item
Using Site Map
<?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="" title="" description="">
siteMapNode url=""
url
title="" description
title
description="" //>
<siteMapNode
<siteMapNode url="" title="" description="" />
</siteMapNode>
</siteMap>
Web.sitemap
`
XML document is "very" case sensitive
<?xml version="1
version= 1.0
0" encoding=
encoding="utf
utf-8
8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="Default.aspx" title="Home" description="Home Page">
<siteMapNode url="Assignments.aspx" title="Assignments"
description="Programming
description=
Programming assignments">
assignments >
<siteMapNode url="Assignment1.aspx" title="Assignment 1"
description="Programming assignment 1" />
<siteMapNode url="Assignment2.aspx" title="Assignment 2"
description="Programming
description=
Programming assignment 2"
2 />
</siteMapNode>
<siteMapNode url="AboutUs.aspx" title="About Us"
description="Authors and purposes">
<siteMapNode url=
url="ContactInfo
ContactInfo.aspx
aspx" title=
title="Contact
Contact information"
information
description="Contact phones and emails" />
<siteMapNode url="ManagementTeam.aspx" title="Management Teams"
description="Introduction of management teams" />
</siteMapNode>
</siteMapNode>
</siteMap>
Navigation
Ch
Choose
d
data
t source
Choose Site Map. This will select your
Web sitemap file you created in your project
Web.sitemap
as data source and will populate your menu
with items defined in the file
Themes
`
`
Closely related to Windows XP themes

A theme sets:
`
`
`
FFonts
Borders for buttons and textboxes
Makes hyperlinks sensitive to mouse movements
define a set of style attributes that you can apply to controls in

multiple pages.
`
Unlike CSS, themes are not implemented

p
byy the browser. Instead, theyy are a
native ASP.NET solution implemented on the server
08b - 26
Comp2870: ASP.NET with C#

Theme Folders
`
To use a theme in a web

pp
application:
1.
2.
Create a folder that

defines theme that
defines it.
Place this folder in a
folder named
App_Theme, which must
be inside the top-level
directory for your web
application
Only one theme can be active

on a given page at a time
Skins
`
`
`
`
To make your theme accomplish something, you need to

create at least one skin file in the theme folder.
A skin file is a text file with the .skin extension.
Example of a control tag for the ListBox control:
<asp:ListBox runat="server"
ForeColor="White" BackColor="Orange"/>
Choose a skin file

08b - 28
Single or multiple skin files?

Its up to you whether you create multiple
place all your
y
control tags
g in a
skin files or p
single skin file
You can add CSS file
to your theme as well
08b - 29
Apply theme to a web page

`
To apply the theme in a web page, you need to set the

Theme attribute of the Page directive to the folder
name for your theme.
<%@ Page Language="C#"

AutoEventWireup="true" ...
Th
Theme="FunkyTheme"
"F k Th
" %>
You can also set Theme

from page properties as well
Applying Themes to entire Web Application

`
To bind a theme to entire web application, instead of a

single webpage:
<configuration>
g
<system.web>
<pages theme="BcitTheme" />
</system.web>
</configuration>
Applying Themes Dynamically

`
Example of applying a dynamic theme by reading the

theme name from the current Session object:
protected void Page

p
g _PreInit(object
j
sender, EventArgs
g e)
{
if (Session["Theme"] == null) {
// No theme has been chosen. Choose a default
// (or set a blank string to make sure no theme
// is used).
Page.Theme = "";
} else {
Page.Theme = (string)Session["Theme"];
CSS Style Builder

H1
{
font-size: 30px;
color: yellow;
font-style: italic;
font-family: 'Comic Sans MS';
background-color: blue;
font-variant: small-caps;
}
Any Questions

Master Pages Themes Navigation and Site Navigation - ASP - Net Lecture 9

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Master Pages Themes Navigation and Site Navigation - ASP - Net Lecture 9

Hochgeladen von

Copyright:

Verfügbare Formate

M t P

Menu, Tree View, Breadcrumbs

Manage the skeleton of your site

Manage the skin of your site

Master Page Basics

Masters define common content and placeholders

Master Page Architecture

Master file A.master

Content file B.aspx.

< / asp :Content

< asp :ContentPlaceHolder

< asp :Content

< asp :ContentPlaceHolder

< / asp :Content

Create a New Master Page

Use Table for Layout Control

Set up the Master Page

Defining a Master Page

Modified Master Page

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

ContentPlaceHolder controls can define content of their

Create a Content Page

Add a Content Page based on a Master Page

Create a Content Page: Applying a Master

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

Using a Master Page

<%@ page masterpagefile= %> attribute to reference master

3. Optionally add content to override the master:

A Content Page with a Master Page Applied

Code for AboutUS.aspx

Navigation UIs are tedious to implement

Especially if they rely on client-side

New controls simplify site navigation

Using Menu Item Editor

Using Menu Item Editor

Use the Items menu to add/remove

Using Site Map

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

XML document is "very" case sensitive

Closely related to Windows XP themes

define a set of style attributes that you can apply to controls in

Unlike CSS, themes are not implemented

Comp2870: ASP.NET with C#

To use a theme in a web

Create a folder that

Only one theme can be active

To make your theme accomplish something, you need to

Choose a skin file

Single or multiple skin files?

Apply theme to a web page

To apply the theme in a web page, you need to set the

<%@ Page Language="C#"

You can also set Theme

Applying Themes to entire Web Application

To bind a theme to entire web application, instead of a

Applying Themes Dynamically

Example of applying a dynamic theme by reading the

protected void Page

CSS Style Builder

Das könnte Ihnen auch gefallen