Chapter 6 Creating Consistent Looking Web Sites Dr. Stephanos
Mavromoustakos
Slide 2
Chapter Overview This chapter will deal with the following
topics that help you create well-designed and consistent web pages
that are easy to maintain: Using master and content pages that
allow you to define the global look of a web page Working with a
centralized base page that allows you to define common behavior for
all pages in your site Creating ASP.NET 3.5 themes to define the
look and feel of your site with an option for the user to choose
their favorite theme at runtime Creating skins to quickly make
site-wide changes to control layout
Slide 3
Master Pages Most web sites, only part of the page changes when
you go from one page to another. The parts that dont change usually
include common regions like the header, a menu and the footer. To
create a consistent layout you need to define these static regions
in a single template file. The biggest benefit of master pages is
that they allow you to define the look and feel of all the pages in
your site in a single location. This means that if you want to
change the layout of your site e.g. move the menu from left to
right you only need to modify the master page.
Slide 4
Master Pages To some extent, a master page looks like a normal
ASPX page. It contains static HTML (e.g.,, and tags), and it can
also contain other HTML and ASP.NET Server Controls. Inside the
master page, you set up the markup that you want to repeat on every
page, like the general layout of the page and the menu. However, a
master page is not a true ASPX page and cannot be requested in the
browser directly; it only serves as the template that real web
pages called content pages are based on.
Slide 5
Master Pages Instead of the @ Page directive that you have seen
in previous chapters, a master page uses a @ Master directive. Just
like a normal ASPX page, a master page can have a Code Behind file,
identified by its CodeFile and Inherits attributes: To create
regions that content pages can fill in, you need to define
ContentPlaceHolder controls in your page like this:
Slide 6
Master Pages You can create as many placeholders as you like,
although youll usually limit their number to a maximum of four or
five regions to keep the page manageable. The content files, which
are normal ASPX files, but without the usual code you find in them
like the, and tags, are connected to a master page using the
MasterPageFile attribute of the Page directive:
Slide 7
Master Pages The page-specific content is then put inside an
control that points to the relevant ContentPlaceHolder:
Slide 8
Practice Creating Master Pages Open your project In Chapter 2
you created a folder MasterPages to hold your master pages and then
added a single master page to that folder. If you havent add the
master page now. To do this, create the MasterPages folder,
right-click the new folder, choose Add New Item, and select Master
Page. Add the following code between the tags of the master page,
replacing the tags and the ContentPlaceHolder that VWD added for
you when you created the master. Make sure that you have the
ContentPlaceHolder within the MainContent tags. You can drag one
from the Toolbox onto the page or enter the code directly. In both
cases, you should give the control an ID of cpMainContent
Slide 9
Practice Creating Master Pages Header goes here Menu goes here
Sidebar goes here Footer goes here
Slide 10
Practice Creating Master Pages Next, switch the master page
into Design View and then drag the file Styles.css from the Styles
folder in the Solution Explorer onto the master page. As soon as
you drop the file, VWD updates the Design View and shows the layout
for the site that you created in Chapter 3. If the design doesn't
change switch to Markup View and ensure theres a tag in the head of
the page pointing to your CSS file:
Slide 11
Practice Creating Master Pages Note the area with the Purple
border around it between the menu and the footer region. This is
the ContentPlaceHolder control that is used by the content pages.
You can save and close the page with the master page for now.
Slide 12
Creating Content Pages Content pages can only contain controls
that each map to a control in the master page. These content
controls can contain standard markup like HTML and server control
declarations.
Slide 13
Practice Creating Content Pages In this practice you will see
how to add a content page to the site that is based on the master
page you create earlier. Once the page is added you can add content
to the predefined regions. We need to manually copy the content
from the old ASPX standard page into the new content page. If you
want to keep the welcome text you added to Default.aspx earlier,
copy all the HTML between the MainContent tags to the clipboard
(that is, the and the two elements) and then delete the page
Default.aspx from the Solution Explorer. Next, right-click the web
site in the Solution Explorer and choose Add New Item. Choose Web
Form, name the page Default.aspx and select the check boxes for
Place Code In Separate File and Select Master Page Finally, click
the Add button
Slide 14
Practice Creating Content Pages In the Select a Master Page
dialog box, click the folder MasterPages in the left-hand pane, and
then in the area at the right, click MasterPage.master. Then OK to
add the page to your site.
Slide 15
Practice Creating Content Pages Instead of getting a full page
with HTML as you got with standard ASPX pages, you now only get two
placeholders: Switch to Design View and note that everything is
grayed out and read-only, except for the region for cpMainContent.
If you still have the old markup from the Default.aspx on the
clipboard, click once inside the cpMainContent placeholder and
press Ctrl+V. This adds the markup to the page, right between the
tags.
Slide 16
Practice Creating Content Pages Save all changes and Ctrl+F5 to
open the page in the browser.
Slide 17
Practice Creating Content Pages Create a new page called
Login.aspx. Make sure you select Master Page and Code in Separate
File. Go to Default.aspx and switch to Design View. Below the
Welcome message and the two elements, create a new paragraph and
type You can log in here. Highlight the words log in and choose
Format Convert to Hyperlink from main menu. In the new dialog box,
click the Browse button and select the page Login.aspx. Click OK
twice. Save all changes and press Ctrl+F5. Click the link log in in
the browser; it should take you to the Log in page.
Slide 18
Practice Creating Content Pages
Slide 19
A Closer Look at Master Pages If you look at the master page,
you will find another ContentPlaceHolder in the head section of the
page:... This placeholder is added for you automatically whenever
you add a new master page to the site. You can use it in the
content pages to add page-specific content that belongs between the
tags like CSS and JavaScript.
Slide 20
A Closer Look at Master Pages The ContentPlaceHolder called
cpMainContent in the master page currently does not contain any
markup itself. However, you can add your own content there that
will serve as the default in your content pages as long as its not
overridden by the content page. E.g. you can have the in a master
page: This is default text that shows up in content pages that dont
explicitly override it.
Slide 21
Using a Centralized Base Page There is another way than Master
Pages to improve consistency: centralize the behavior of the pages
using base page. Instead of adding behavior to each and every page,
you can create a common base page. All the pages in your site can
then inherit from this intermediate page instead of from the
standard Page class. To be able to have your pages inherit from the
base page, you need to do two things: 1. Create a class that
inherits from System.Web.UI.Page in the App_Code folder of your
site. 2. Make the web pages in your site inherit from this base
page instead of the standard Page class
Slide 22
Implementing the Base Page Implementing a base page is easy:
all you need to do is add a class file to your App_Code folder, add
some code on it, and youre done. However, you have to make sure
each page inherits from this new base page instead of from the
standard System.Web.UI.Page class. VWD allows you to export a page
template that already contains this code.
Slide 23
Practice Creating a Base Page Right-click the App_Code folder
in the Solution Explorer and choose Add New Item. Select Class in
the Templates list and name the file BasePage. Add the following
code to this class file: Public Class BasePage Inherits
System.Web.UI.Page Private Sub Page_PreRender(ByVal sender As
Object, ByVal e As System.EventArgs) Handles Me.PreRender If
Me.Title = "Untitled Page" Then Throw New Exception("Page title
cannot be ""Untitled Page"".") End If End Sub End Class
Slide 24
Practice Creating a Base Page 1. Save the file and close it.
Then open the Login.aspx.vb file and change the Inherits code so
the Login page inherits from the BasePage you created earlier:
Partial Class Login Inherits BasePage End Class
Slide 25
Practice Creating a Base Page 2. Save the page and press
Ctrl+F5. If you havent changed the title of the page earlier, you
should get the error shown:
Slide 26
Practice Creating a Base Page 3. Open the Login page. Locate
the Title attribute at the end of the @ Page and change it to Log
in to Planet Wrox. Repeat steps 1-3 (earlier) for all pages. To
make this a bit quicker you can use Find and Replace to replace all
the occurences of System.Web.UI.Page with BasePage. Make sure you
dont accidentally replace it in the BasePage file in the App_Code
folder itself. To prevent this, search only in Code Behind files,
like this:
Slide 27
Practice Creating a Base Page Open the Replace in Files dialog
box (Edit Find and Replace Replace in Files) In the Find What box
enter System.Web.UI.Page. In the Replace With text box enter
BasePage. Expand the Find Options section in the Look at These File
Types text box enter *.aspx.vb (This leaves the BasePage file,
which has a single extension of.vb alone Click Replace All and then
click Yes to confirm the Replace operation
Slide 28
Practice Creating a Base Page Save the changes you made to any
open page and then browse the Login.aspx again. If everything
worked out as planned, the error should be gone and you now see the
Login page. If other pages throw you an error, you can fix them
easily by giving them all a valid Title.
Slide 29
Practice Creating Reusable Page Templates Add a new Web Form
and call it Template.aspx. Make sure it uses Code Behind and is
based on the master page. Open the Code Behind of this page and
change the Inherits line so the page inherits from BasePage instead
of from System.Web.UI.Page. Also rename the class from Template to
$safeitemname$ : Partial Class $safeitemname$ Inherits BasePage End
Class
Slide 30
Practice Creating Reusable Page Templates Switch to the Markup
View of the page, and change the Inherits attribute from Template
to $safeitemname$ You can leave the CodeFile attribute alone; VWD
will change it to the right Code Behind file automatically whenever
you add a new page to the site. Save the changes and choose File
Export Template. In the dialog box select Item Template and choose
your programming language (Visual Basic see next slide) Click
Next
Slide 31
Practice Creating Reusable Page Templates
Slide 32
Place a check mark in front of Template.aspx. Click Next to go
to the Select Item References dialog box No need to set anything
here. Click Next
Slide 33
Practice Creating Reusable Page Templates Type MyBasePage as
the Template name and optionally you can type a short description.
Click Finish to finish creating the template VWD opens a Windows
Explorer showing the new template as a ZIP file. Close the window,
you dont need it
Slide 34
Practice Creating Reusable Page Templates Delete the temporary
file Template.aspx. Then right-click the Solution Explorer and
choose Add New Item. Note that your custom template now shows up in
the My Templates region at the bottom of the dialog box. If you
click it, it even shows you the description Type a new name for the
page like TestPage.aspx and click Add to add it to your site. Look
at the markup and the Code Behind of the file and verify that
$safeitemname$ has been renamed to TestPage to reflect the new name
of the page. If everything looks OK then you can delete
TestPage.aspx since its not used in the Planet Wrox site.
Slide 35
Themes Besides master pages and central BasePage class there
are more options to create consistent-looking web sites. One of
them is themes. A theme can include skin files (well discuss them
later), CSS files, and images. You define themes in the special
App-Themes folder. Within this folder you create subfolders with
the various themes A link to each CSS file in the theme folder is
added to your pages section automatically whenever the theme is
active.
Slide 36
Themes To create a theme, you need to do the following: Create
a special App_Themes folder For each theme create a subfolder with
the themes name Optionally, create one or more CSS files that will
be part of the theme Optionally, add one or more images to the
theme folder Optionally, add one or more skin files to the themes
folder. Skins allow you to define individual properties (like
ForeColor and BackColor ) for a specific control which are then
applied at runtime
Slide 37
Themes An ASP.NET has two different properties that allow you
to set a theme: the Theme property and the StyleSheetTheme. The
StyleSheetTheme is applied early in the pages life cycle. This
means that a page can override the settings from the theme by
applying inline attributes on the control. E.g. a theme with a skin
file that sets the BackColor of a button to green can be overridden
by the following markup: The Theme property on the other hand gets
effective late in the pages life cycle, effectively overriding any
customization you may have for individual controls
Slide 38
Themes You should use the StyleSheetTheme if you want to supply
the default settings for your controls. That is, the
StyleSheetTheme can supply defaults for your controls which can
then be overridden at the page level. You should use the Theme
property instead if you want to enforce the look and feel of your
controls.
Slide 39
Applying Themes To apply a theme to your site, you have three
options: at the page level, in the Page directive, at the site
level by modifying the web.config file, and programmatically. 1.
Setting the theme at the page level: You must set the relevant
attribute in the Page directive of the page: Replace Theme with
StyleSheetTheme to apply a theme whose settings can be overridden
by the individual pages.
Slide 40
Applying Themes 2. Setting the theme at the site level: To
enforce a theme throughout the entire web site, you can set the
them in the web.config file. To do this, open the web.config file,
locate the element, and add a theme attribute to it: Make sure you
type theme with all lower-case letters as the XML in the web-config
file is case sensitive 3. Setting themes programmatically: we will
learn this later one
Slide 41
Practice Creating a Theme Right-click your project and choose
Add ASP.NET Folder Theme. Type Monochrome as the new theme name
From the Styles folder, move the file Styles.css into this
Monochrome folder. You can either drag it directly into the new
folder or use Ctrl+X to cut the file, then click the Monochrome
folder and press Ctrl+V to paste it again. To make it clearer later
to see where your CSS is coming from, rename the file from
Styles.css to Monochrome.css Remove the element of the master page.
Open the master page, switch to Markup View and remove the
following code:
Slide 42
Practice Creating a Theme To apply the theme to the entire web
site, open the web.config file, locate the element and add the
theme attribute Save all changes and request the page Default.aspx
in your browser. You should see the design as it was. Open the
master page file in Design View. All design is gone. Open the
web.config file again, locate the element and add the following
attribute:
Slide 43
Practice Creating a Theme Save the changes to web.config, close
and reopen the master page and switch to Design View. You will see
that VWD now applies the correct styling information to your pages
To add another theme to the site, create a new folder under
App_Themes and call it DarkGrey. Download from www.wrox.com the
source code of your book. Unzip it and open chapter 6 folder and
then the DarkGrey folder. Drag the file DarkGrey.css into the
DarkGrey theme folder in VWD.
Slide 44
Practice Creating a Theme Open the web.config file again and
change both occurences of Monochrome to DarkGrey in the