ASP'NET 2'0

1
ASP.NET 2.0

• Giving the Pages and Controls on a Website a
  Common Look-and-Feel

2
Agenda

• Master Pages
• Themes
• Cascading Style Sheets
• Skins

3
What ASP.NET 2.0 Offers

• Earlier technologies required a good bit of code
  and effort to make pages have a common look and
  feel. This might have involved a lot of copying
  and pasting, use of inheritance, remembering to
  make the same settings for each page created,
  etc.
• ASP.NET 2.0 makes it quite easy to do.
• Essentially, one creates a template for a
  standard page, and other pages are created from
  the template. This is somewhat similar to
  defining a base-class page and inheriting other
  pages from it.
• The technology in ASP.NET 2.0 is called Master
  Pages.
• When combined with other technologies such as
  Themes and Skins, one can easily provide a common
  look-and-feel to all of a sites pages so that
  each new page automatically has the appropriate
  look.

4
Master Page

• To give all pages at a site a common
  look-and-feel, the designer must decide what it
  means to have a common look-and-feel on all pages
  for the site.
• Typically, the common look-and-feel means that
  all pages use the same fonts for text, the same
  fonts for headings, the same colors for
  foreground and the same colors for background.
• It also means that consistent formatting is used
  on elements that the pages share in common such
  as a banner heading, a corporate logo, a
  navigation bar, a standard footer on each page,
  and so forth.
• The same types of features may or may not be
  present from site to site. What one wants is an
  attractive, clean, clear, concise look for each
  site, but the designer has a lot of flexibility.

5
Master Page

• ASP.NET 2.0 provides for creating a Master Page
  and then subsequently created pages may use it as
  a master from which the new page is created.
• If your site might benefit from one, it is easier
  to add a MasterPage at the beginning of site
  development rather than doing it later.
• It is easier to create a new page that uses an
  existing MasterPage than it is to add a
  MasterPage to an existing page.

6
Multiple Master Pages?

• It is possible to have more than one Master Page.
• For example, the for company use only part of a
  site might have a slightly different
  look-and-feel than the public parts. Each could
  have its own master page.
• In another situation, one may want sub-sites to
  have added features unique to the sub-site. For
  example, the Finance area might have exchange
  rates on each page, while the Marketing area
  might have glitzy marketing ads.
• This would involve nested Master Pages with all
  sub-sites having their own Master Page, each of
  which has the primary Master as its Master Page.
• Nested Master Pages are supported in ASP.NET 2.0.
  Unfortunately, Visual Studio does not provide
  DESIGN-TIME graphical support for nested Master
  Pages, so one has to wait until run-time to see
  the result. This is supposed to resolved in
  future releases.

7
MasterPages

• To create a MasterPage
• Create a new website. Delete default.aspx from
  it.
• In the solution explorer, right click the project
  folder, select Add New Item from the menu.
• From the dialog that appears, select Master Page
  and choose an appropriate name for it. Note the
  extension is always .master.
• Note that you see a ContentPlaceholder region on
  the new Master Page. This is where subsequent
  pages put their unique features. Rename it to
  something appropriate.
• For sites with multiple distinct areas of content
  (say News, Weather, and Sports areas) on each
  page, one may add additional ContentPlaceholder
  controls.
• Add controls and features to the MasterPage
  above, below, or beside the Content region.

8
Creating a Master Page

• Initially, the Master Page looks like this

9
Creating a MasterPage

• After customizing the page by adding other
  controls and properties, the Master Page may look
  something like this.

10
Using a Master Page

• In the solution explorer, right-click on the
  project folder and select Add New Item from the
  menu.
• This brings up the dialog on the next page. Fill
  in the page name (default.aspx is OK for the home
  page since we deleted the default home page
  earlier), and be sure to check Select Master
  Page.

11
Using a Master Page
12
Using a Master Page

• The following dialog appears. If there were more
  than one .Master files in the right pane, you
  would select the one you want to serve as master
  for the new page.

13
Using a Master Page

• The new blank page in the design view looks
  like this. Note that the master components are
  visible but grayed since you cannot edit them
  here.

14
Notes on the New Page

• The ContentPlaceholder area (or areas) is where
  you add the content unique to the page.
• The height of the ContentPlaceholder is not fixed
  (unless you made it fixed in the design).
• Thus, you can add as much content as is
  appropriate even though the initial design view
  of the page appears to give only a small area for
  content.

15
Results

• The results may look like this

16
Themes and Skins

• The use of Themes and Skins provides the ability
  to collect many style elements into one place.
• Themes in ASP.NET applications are similar to
  those in Windows.
• To switch Themes requires only changing the name
  of the current them to the one you want.
• The Theme will affect all pages on the site
  unless you exempt a page from use of the theme.
• You may also apply different themes to different
  pages, but that would not likely give the common
  look and feel you desire.

17
What are Themes and Skins?

• A theme typically consists of several files
  including one or more cascading style sheets
  (CSS) and 0 or more .skin files.
• It may also include other things such as graphics
  figures used by the elements of the various pages
  of the site.
• The CSS files typically address the styles and
  properties for all of the pages of the site in
  one place.
• A skin file typically provides a consistent look
  and feel for individual controls as they appear
  on the various pages.
• For example, each Calendar control has a number
  of properties that determine colors, design, and
  other features of the Calendar.
• To get all such Calendars to look the same no
  matter which page they are on, establish values
  for these properties in a .skin file.

18
Creating a New Theme

• In the solution explorer, right click on the
  project folder and select Add ASP.NET Folder.
• Then select Theme.
• Visual Studio will add an App_Themes folder to
  your project with a subfolder for theme1.
• Change the name of the Theme1 subfolder to
  something more meaningful or descriptive. The
  name used for the subfolder becomes the Themes
  name.

19
Theme Folder

• A new theme folder is empty. Add a CSS.
• The new style sheet contains only the skeleton
  for specifying the body element of a page.

20
Using the Theme

• Add appropriate CSS items. See below for an
  example.
• The example sets the background, font-size, font
  name, font-weight and font color for the body.
• It sets the font-style, text-decoration,
  font-size, and color for lth1gt header elements of
  the page. (Intellisense helps create this code.)

Inset shows Intellisense in action.
21
Using the Theme

• If the Theme just declared is associated with the
  following page (shown in design view)
• it will be rendered by a browser like this

22
Associating a Theme with Page/Site

• A Theme may be associated with individual pages
  on a web site as the designer wishes by adding a
  Themethemename entry in the _at_Page directive on
  each of the selected pages.

This line associates this page (only) with the
BlueTheme
23
Associating All Pages with a Theme

• Rather than adding theme designations to every
  page individually, one may associate all pages
  (unless a page designates otherwise) with a given
  theme.
• This is done in the web.config file.
• Add a line such as ltpages themeBlueTheme /gt to
  the ltsystem.webgt section of the file.

Pages element in the system.web section
designates the BlueTheme as the entire sites
theme.
24
Programmatically Setting a Theme

• While there is rarely a need to do so, one may
  change themes when a new page is rendered.
• Must be done in the PreInit event handler.
• This shows sample code in C

25
Disabling Themes Locally

• Either approach would disable the theme for this
  control only.
• The above techniques are actually identical
  except for where they are implemented.
• The one on the left is done in the Source View.
• The other is done in the Design View.

26
Skins

• A theme may have a .skin file in it.
• The purpose of a .skin file is to specify
  properties for individual types of controls so
  that no matter where they appear in a themed
  page, they have they same look and feel.
• If a SkinID property is given to a particular
  type of control, it is possible to have different
  skin entries for a single type of control.

27
Creating a .skin File

• In the solution explorer, right click on the
  theme folder and choose Add New Item.
• Then choose Skin from the dialog that appears as
  shown on the next slide.
• Give the skin file an appropriate name.

28
Creating a .skin File
Select Skin File and give it an appropriate name.
29
Creating a .skin File

• The resulting file starts out looking like the
  following.
• All that is present is a comment that gives
  minimal instructions.

30
Creating a .skin File

• A weakness with VS 2005 is that no Intellisense
  is given for .skin file creation/editing.
• Thus, the easiest way to get skin definitions
  correct is to go to a temporary work page at your
  site, create an instance of the control you want
  to skin, set its properties the way you want all
  others to look without giving properties unique
  to that particular control such as Text for a
  Label.
• Keep the set of properties you define to a
  minimum.
• Include only those properties absolutely
  necessary to achieve your desired look and feel.
• For example, do not include height and width or
  other sizing information unless that is essential
  to achieve your desired look and feel.
• Go to the Source View, and copy the source code
  for that definition and paste it into the .skin
  file.
• Delete any properties of the control in the .skin
  file such as object ID that you do not want to
  propagate to all controls of that type.

31
Demo Step 1
32
Demo Step 2
33
Demo Step 3
34
Demo Step 4
35
Demo Step 5 Use the Skin
36
Demo Rendered Result

• The resulting page rendered in IE7.

Note the skinned textbox.
37
Multiple Skins for a Control Type
Default skin when no SkinID is specified for a
new TextBox.
This skin is used for a new TextBox only if the
new TextBox has a value of strikeOut for its
SkinID property
38
Multiple Themes

• If you want to allow someone (user, developer, )
  to select a different theme at some point, then
  simply include all acceptable themes in the
  App_Themes folder, and provide a means for the
  person to select one.

39
The Second Theme
40
The Skin for the Second Theme
41
Notes on Second Theme

• Though the example GreenTheme here has the same
  components and properties as the BlueTheme, but
  with different property values, this is not
  necessary.
• Each theme can be adjusted to get the desired
  look-and-feel for the web site.

Simply change this value to GreenTheme to switch
themes
42
Download Some Examples

• Good examples that come with extensive Themes and
  Skins may be downloaded
• http//www.asp.net/downloads/starterkits/default.a
  spx?tabid62
• http//msdn.microsoft.com/asp.net/reference/design
  /templates/default.aspx
• Most browser rendering issues have been
  documented and workarounds exist to arrive at
  viable cross-browser CSS layouts (check out
  http//www.positioniseverything.net, an excellent
  resource on CSS in general and browser bugs in
  particular)