Master Pages, Themes, and Site Navigation

1
Master Pages, Themes, and Site Navigation

• Bradley Millington
• Program Manager
• Web Platform and Tools

2
OverviewAgenda

• What is Good UI?
• Not just visually appealing
• Consistent, Accessible, Standards Compliant
• Modular/Interchangeable styles
• Time/Cost efficient
• ASP.NET 2.0 Features and Usage
• Master Pages Content and Layout of your Site
• Themes Modify Appearances independently of
  Content
• Navigation Menu, TreeView, SiteMapPath, and More

3
Master PagesCurrent Situation

• Hundreds of pages difficult to update
• Layout is reused across site header, footer, nav
• Code and markup not reused duplication
• Current solutions
• Include Files - unbalanced tags, many files
• User Controls - pages littered with controls,
  many files
• Tools-based solution design-time only,
  commitment

4
Master PagesIntroduction

• Factor redundancies into reusable templates
• Inheritance concept baked-in architecturally

• Unlimited Nesting

• Less Files, Controls
• Balanced tags per file
• Runtime merge

5
Master PagesMaster Pages Content Pages
6
Master PagesContentPlaceHolders Content
Controls
7
Master Pages
demo

• Bradley Millington
• Program Manager
• Web Platform and Tools

8
Master PagesNesting

• Master, Nested Master, Content Page Comparison

Master Nested Content
.master Extension ? ?
Master Directive ? ?
MasterPageFile ? ?
Content Restriction ? ?
Content Control ? ?

• Easier to start with a Content Page
• No need to delete extraneous html
• CPH link Content linking done automatically

9
NavigationIntroduction
10
Site Navigation
demo

• Bradley Millington
• Program Manager
• Web Platform and Tools

11
NavigationRecommended Usage

• Not all designs are possible without templates or
  custom controls!
• Understand the intrinsic markup structure of each
  control
• Understand where you can specify CSSClass
• Understand when to use Menu and TreeView

Menu Treeview
Expansion PopOut Expand in Place
Checkboxes No Yes
Download on Demand No Yes
Templates Yes No
Layout Horizontal Vertical Vertical
12
ThemesCurrent Situation
13
ThemesIntroduction
14
ThemesTheme Folders and Skin Files
15
ThemesCSS and Image Files
16
ThemesOptions

• Declaring the Theme
• Per Page Page Directive
• Per Application or Directory Web.config
• Applying a Theme in Code
• Set Theme Property Dynamically in PreInit
• Two Different Ways to Apply Themes
• StyleSheetTheme Suggested Look and Feel
• Theme Enforced Look and Feel
• Themeable Properties
• Simple Properties, Collections, Templates
• Static Values, Data Bindings, Localization
  Expressions

17
Themes
demo

• Bradley Millington
• Program Manager
• Web Platform and Tools

18
ThemesRecommended Usage

• Do as much as you can inside the Style Sheet
• When producing multiple themes, have your
  designer deliver multiple CSS files but only one
  XHTML file
• www.csszengarden.com is a great example
• Modify layout without changing your Master Page
• When to use Skins
• Foreground Images cant be controlled by CSS
• Advanced controls, and collections
• What does not belong in themes
• Global Images, Print Stylesheets, etc.
• Single Themes make sense too.

19
Resources

• My Slides and Demos
• http//www.bradmi.net/presentations
• ASP.NET 2.0 Quickstarts
• http//www.asp.net/quickstart
• ASP.NET Forums
• http//www.asp.net/forums
• SiteMap Provider Architecture and Source Code
• http//msdn.microsoft.com/asp.net/downloads/provid
  ers/default.aspx?pull/library/en-us/dnaspp/html/a
  sp2prvdr04.asp
• ASP.NET 2.0 Master Pages Intro and Tips, Tricks
  and Traps (K. Scott Allen)
• http//www.odetocode.com/Articles/419.aspx
• http//odetocode.com/Articles/450.aspx

20
(No Transcript)