1. Chapter 6 – Creating Consistent Looking Web Sites Dr. Stephanos Mavromoustakos

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

3. 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.

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.

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: <%@ 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:

6. 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, and 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”>

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

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 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 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

9. Practice – Creating Master Pages Header goes here Menu goes here Sidebar goes here Footer goes here

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 there’s a tag in the head of the page pointing to your CSS file:

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.

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.

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

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.

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.

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

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.

18. Practice – Creating Content Pages

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.

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 it’s 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 don’t explicitly override it.

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

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 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.

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

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

25. 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:

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 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:

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

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.

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

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

31. Practice – Creating Reusable Page Templates

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

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 don’t need it

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 it’s not used in the Planet Wrox site.

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 (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 section automatically whenever the theme is active.

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 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 ForeColor and BackColor ) for a specific control which are then applied at runtime

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 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: 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

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.

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.

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

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:

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:

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.

44. 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.

45. 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);

46. 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

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

48. 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

49. 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 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. Select a Theme

50. Practice – User Selects a Theme

51. Switch to Design View, open the control’s Smart Tasks panel, and select Enable AutoPostBack On the same panel, click the Edit Items and insert two items: Monochrome and DarkGrey Double-click the drop-down list to set up an event handler for the SelectedIndexChanged event. Add the following code that retrieves the selected theme from the list and stores it in a cookie:

52. Practice – User Selects a Theme Dim preferredTheme As HttpCookie = New HttpCookie("PreferredTheme") preferredTheme.Expires = DateTime.Now.AddMonths(3) preferredTheme.Value = lstPreferredTheme.SelectedValue Response.Cookies.Add(preferredTheme) Response.Redirect(Request.Url.ToString) You need to add some code in the Code Behind of the master page to preselect the correct item in the list again when the page loads. This will be in Page class’ Load event. Double-click the page anywhere in Design View and write the following code:

53. Practice – User Selects a Theme If Not Page.IsPostBack Then Dim selectedTheme As String = Page.Theme Dim preferredTheme As HttpCookie = Request.Cookies.Get("PreferredTheme") If preferredTheme IsNot Nothing Then selectedTheme = preferredTheme.Value End If If lstPreferredTheme.Items.FindByValue (selectedTheme) IsNot Nothing Then lstPreferredTheme.Items.FindByValue (selectedTheme).Selected = True End If

54. Practice – User Selects a Theme Save all changes and request Default.aspx in your browser

55. Practice – Applying the User- Selected Theme Open the BasePage file from the App_Code folder and add the following code. You can add it before or after the method that checks the page title. Private Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit Dim preferredTheme As HttpCookie = Request.Cookies.Get("preferredTheme") If preferredTheme IsNot Nothing Then Page.Theme = preferredTheme.Value End If End Sub

56. Practice – Applying the User- Selected Theme Save changes to all open documents and then request Default.aspx in the browser. The page should load with the theme you chose last in the drop-down list in the previous exercise. Choose an item from the list. The page should reload and should now show the other theme. If you find that the page in the browser is showing a combination of the two themes, go back to VWD, open web.config, and remove the styleSheetTheme attribute from the element.

57. Skins Skins (with.skin extension) are simple text files that contain markup for controls and are place in a theme folder under App_Themes. With this definition all your buttons will get the spcified colors. All you need to do is create a simple.skin file under your theme’s folder, and add this markup to it. Differences between the markup of a button and.skin. 1. The control in.skin cannot have an ID attribute since it applies to all buttons. 2. Not all properties of a control are skinnable, e.g. you can’t set the Enabled property of the Button through a.skin. Generally speaking, properties that influence the appearance (e.g. BackColor) can be skinned while properties that influence behavior (e.g. Enabled) cannot be set.

58. Skins Instead of applying formatting elements directly to the control’s properties in the skin and thus to the final markup in the page, it’s often better to use the CssClass property to point to a CSS class in one of your CSS files. That way, it’s even easier to make site-wide changes and you avoid bloating the final HTML. Given the previous example, a file with the following skin definition and a class in the theme’s CSS file would give the same effect:.MyButton { color: #308462; background-color: #cccccc; }

59. Creating a Skin File Skin files must be created in the theme’s folder directly; you can’t store them in a subfolder like you do with the theme’s images. When you start typing in a skin file, you’ll notice that the familiar IntelliSense doesn’t kick in. This makes it difficult to define your controls and their attributes but there is a way to fix this: Open VWD’s Options dialog box by choosing Tools  Options Check the Show All Settings at the bottom/left of the screen Expand the Text Editor and click File Extension In the Extension box type skin and then from the Editor drop- down list choose User Control Editor Click the Add button and then click the OK button to dismiss the Options dialog box

60. Creating a Skin File Now you’ll get IntelliSense even in skin files. With this setting on, you may get an error in the Error List bout build providers. Ignore this, as skins will work fine at runtime with this setting on

61. Practice – Creating a Skin for the Button Control Use more the CssClass attributes instead of inline attributes to avoid increase of page size and load time. Right-click the Monochrome folder and choose Add New Item. Select Skin File and then type Button as its name Delete the entire contents from the file and add this code: Open the file Monochrome.css and this CSS selector to the end of the file:.MyButton { color: #308462; }

62. Practice – Creating a Skin for the Button Control Create a new Web Form in the Demos folder and call it SkinsDemo.aspx. Make sure you base it on the exported template you created earlier. Give the page a Title of Skins Demo and then add a Button by dragging it from the Toolbox into the cpMainContent area of the page. You end up with this code: Save all changes and then request SkinsDemo.aspx in the browser. If necessary, switch to the Monochrome theme. The button you added has a grey background with light green text on it.

63. Named Skins Named skins are identical to normal skins with one exception: they have a SkinID set that allows you refer to that skin by name. Controls in your ASPX pages can then use that SkinID to apply that specific skin to the control. The easiest way to create a named skin is by copying the code for an existing one and then adding a SkinID attribute. Be aware that if you copy and paste a skin definition, VWD automatically adds an ID attribute. This ID is not allowed, so make sure you remove it.

64. Practice – Creating a Named Skin for the Button Control Open Button.skin again, copy all the code, and then paste it below the existing markup If VWD added an ID attribute, remove it, together with its value (e.g. remove ID=“Button1”) Remove the CssClass attribute and its value, change the BackColor of the button to Red, and then set the ForeColor to Black Add a SkinID of RedButton. You should end up with this code: Open SkinsDemo.aspx in the browser. You should see the two buttons with different colors.

65. A Final Note on Skins If for some reason you don’t want to apply a skin to a specific control you can disable the skin by setting the EnableTheming property of the control, like this: With EnableTheming set to False, the skin is not applied to the control. CSS settings from the theme’s CSS file are still applied though.