CSC209 Web Programming

CSC209 Web Programming Chapter 6 – Creating Consistent Looking Web Sites Dr. StephanosMavromoustakos

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 don’t 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. <html>, <head>, and <body> 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. <%@ Master Language=“VB” %> Just like a normal ASPX page, a master page can have a Code Behind file, identified by its CodeFile and Inherits attributes: <%@ Master Language=“VB” CodeFile=“MasterPage.master.vb” Inherits=“Masterpages_MasterPage” %> To create regions that content pages can fill in, you need to define ContentPlaceHolder controls in your page like this: <asp:ContentPlaceHolder ID=“ContentPlaceHolder1” runat=“server”> </asp:ContentPlaceHolder>

Master Pages You can create as many placeholders as you like, although you’ll 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 <html>, <head> and <form> tags, are connected to a master page using the MasterPageFile attribute of the Page directive: <&@ Page Language=“VB” MasterPageFile=“~/Masterpages/MasterPage.master” AutoEventWireup=“false” CodeFile=“Default.aspx.vb” Inherits=“_Default”>

Master Pages The page-specific content is then put inside an <asp:Content> control that points to the relevant ContentPlaceHolder: <asp:Content ID=“Content1” ContentPlaceHolderID=“ContentPlaceHolder1” runat=“server”> </asp:Content>

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 haven’t 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 <form> tags of the master page, replacing the <div> tags and the ContentPlaceHolderthat VWD added for you when you created the master. • Make sure that you have the ContentPlaceHolder within the MainContent <div> 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 <body> <form id="form1" runat="server"> <div id="PageWrapper"> <div id="Header"><a class="HeadLink" href="~/" runat="server">Header goes here</a></div> <div id="MenuWrapper">Menu goes here</div> <div id="MainContent"> <asp:ContentPlaceHolder ID="cpMainContent" runat="server"> </asp:ContentPlaceHolder> </div> <div id="Sidebar">Sidebar goes here</div> <div id="Footer">Footer goes here</div> </div> </form> </body>

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 there’s a <link> tag in the head of the page pointing to your CSS file: <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> <link href="../Styles/Styles.css" rel="stylesheet" type="text/css" /> </head>

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 <asp:Content> controls that each map to a <asp:ContentPlaceHolder> 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 <asp:Content> 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 <div> tags to the clipboard (that is, the <h1> and the two <p> 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 <asp:Content> placeholders: <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server"> </asp:Content> • Switch to Design View and note that everything is grayed out and read-only, except for the <asp:Content> region forcpMainContent. • 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 <asp:Content> 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 <p> 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: <title></title> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> . . . </head> 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 <head> tags like CSS and JavaScript.

A Closer Look at Master Pages • The ContentPlaceHoldercalled cpMainContentin 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 it’s not overridden by the content page. E.g. you can have the <asp:ContentPlaceHolder> in a master page: <asp:ContentPlaceHolder ID=“cpMainContent” runat=“server”> This is default text that shows up in content pages that don’t explicitly override it. </asp:ContentPlaceHolder>

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: • Create a class that inherits from System.Web.UI.Page in the App_Code folder of your site. • 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 you’re 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 • 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 haven’t 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 don’t 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 BasePageinstead 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

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 don’t 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 TestPageto reflect the new name of the page. If everything looks OK then you can delete TestPage.aspx since it’s 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 (we’ll 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 page’s <head> 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 theme’s 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 ForeColorand 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 page’s 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: <asp:Button ID=“Button1” runat=“server” Text=“Button” BackColor=“red” /> The Theme property on the other hand gets effective late in the page’s life cycle, effectively overriding any customization you may have for individual controls

Themes • You should use the StyleSheetThemeif you want to supply the default settings for your controls. That is, the StyleSheetThemecan 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: <%@ Page Language=“VB” AutoEventWireup=“false” CodeFile=“Default.aspx.vb” Inherits=“_Default” Theme=“DarkGrey” %> 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 <pages> element, and add a theme attribute to it: <pages theme=“DarkGrey”> … </pages> 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 <link> element of the master page. Open the master page, switch to Markup View and remove the following code: <link href=“…/Styles/Styles.css” rel=“stylesheet” type=“text/css” />

Practice – Creating a Theme • To apply the theme to the entire web site, open the web.config file, locate the <pages> element and add the theme attribute <pages theme=“Monochrome”> • 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 <pages> element and add the following attribute: <pages theme=“Monochrome” styleSheetTheme=“Monochrome”>

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 <pages. Element. Save the changes and press Ctrl+F5. Now you have the DarkGrey theme.

Extending Themes • A theme can also contain images • To refer to the MenuBackground.jpg file in the Images folder of the Monochrome theme, you can add the following CSS to Monochrome.css: #MenuWrapper { background-image: url (Images/MenuBackground.jpg); } If you wanted to refer to an image in the Images folder in the root of the site, you’d use this CSS: background-image: url (/Images/MenuBackground.jpg);

Practice – Adding Images to Themes • The images and CSS files are available in the zip folder. • You will overwrite the file Monochrome.css in the Monochrome theme, so if you made any customizations to the file, create a backup of it first • Open Windows Explorer and go to Chapter 6/App_Themes/Monochrome. Select the Images folder and the Monochrome.css file. Drag them to the Monochrome folder in VWD. Click Yes when you’re asked to overwrite the Monochrome.css • Repeat the previous steps, but this time drag the Images folder and the DarkGrey.css file into the DarkGrey theme folder in VWD. • Run the Default.aspx in the browser

Practice – Adding Images to Themes You see the page with images from the DarkGrey theme

Practice – Adding Images to Themes Open the web.config file and switch the two theme properties again from DarkGrey to Monochrome. Save it and refresh the page in the browser

Practice – User Selects a Theme • Users can choose the theme they like. Also you can deploy themes to help visually impaired users. • Open the master page in Markup View and locate the <div> called sidebar. Remove the static text Sidebar Goes Here and replace it with a DropDownList control by dragging it from the toolbox between the two div tags. Change the ID of the control from DropDownList1 to lstPreferredTheme. Type in front of the drop-down list Select a Theme. <div id="Sidebar">Select a Theme <asp:DropDownList ID="lstPreferredTheme" runat="server"> </asp:DropDownList> </div>

Practice – User Selects a Theme

CSC209 Web Programming