chapter 6 – creating consistent looking web sites dr. stephanos mavromoustakos

Chapter 6 Creating Consistent Looking Web Sites Dr. Stephanos Mavromoustakos

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

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.

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.

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:

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:

Master Pages The page-specific content is then put inside an control that points to the relevant ContentPlaceHolder:

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

Practice Creating Master Pages Header goes here Menu goes here Sidebar goes here Footer goes here

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:

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.

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.

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

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.

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.

Practice Creating Content Pages Save all changes and Ctrl+F5 to open the page in the browser.

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.

Practice Creating Content Pages

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.

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.

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

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.

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

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

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:

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:

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

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.

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

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

Practice Creating Reusable Page Templates

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

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

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.

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.

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

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

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.

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.

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

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:

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:

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.

Practice Creating a Theme Open the web.config file again and change both occurences of Monochrome to DarkGrey in the

chapter 6 – creating consistent looking web sites dr. stephanos mavromoustakos

Documents

single master page

page directive

page changes

page manageable

master directive

normal aspx page

pagespecific content

content pages