Lesson 6:
Creating Consistent Looking Web Pages

Introduction

This week you will be learning how to create consistent looking Web sites using several ASP.NET technologies including: Master Pages, Base Pages, reusable page templates, Themes, and Skins. You will also be learning about the page life cycle which is how your ASP.NET Web forms are processed on the server when requested by a Web browser. Pay close attention to the details of each of the 8 phases of the page life cycle, paying particular attention to what events are triggered at a particular phase, because that knowledge will help you decide where to place your code in order to affect a Web form during its life cycle on the server and prior to it being sent to the Web browser.

Master Pages

Master Pages is a great solution for both creating consistency within your Web site and for expediting the building of content pages. In the Master Pages paradigm you first create a Master Page that includes all of the code and content that needs to be repeated on several Web forms, and then you create your new content pages based on the contents of the master page by linking the content page to the Master Page using the @Page directive's MasterPageFile attribute in the content page. Before learning about master pages more in-depth I feel it is important for you to have a historical understanding of why this technology is so beneficial and a functional understanding of alternative methods used prior to the advent of master pages. In order to truly appreciate the advantages Web developers gain by using ASP.NET's Master Pages, you first need to understand a little about the way the other solutions work.

Keep DRY

One of the implementation dilemmas Web developers are faced with is how to design Web sites which adhere to a cardinal rule of programming, a concept known as DRY - don't repeat yourself. DRY refers to the fact that a Web developer should never have two or more blocks of identical code or content which require periodic updating. Things like style sheet links and JavaScript file references, company addresses and phone numbers, header and navigation elements, and the like should only ever exists once in a Web site - otherwise the update process can be a nightmare. Just imagine having to go to 100 or even 1,000 or more Web forms just to update an area code change, or add a new style sheet or JavaScript link. The workload would be overwhelming and even perhaps impossible to accomplish with 100% accuracy. Realizing this dilemma, the Web community developed two viable solutions to this problem, 1) server-side includes (SSI) and 2) Adobe Dreamweaver's templates; both accomplish the task of storing and then incorporating repetitive code or content into Web documents on a need be basis without duplication.

Server-Side Includes

Server-side includes (SSIs) are essentially a simple block of code and content that you want repeated on several Web pages. By creating an #include directive in each of the pages that requires the content will cause the page to display the contents of the code and content blocks from the include file. The advantage developers get from this is that if the code or content requires a change, the change only needs to be made in the include file and instantly all of the pages pointing to the include file will now retrieve the updated information. The disadvantage that some developers ran into with include files was a breach in the security of their Web page content because usually the include file had a file extension of txt or htm or inc, and in all cases a smart Web surfer could request these files directly to view their contents, in some cases even circumvent them. However, there is a solution to this problem which is to give your include files file name extensions which can't be directly downloaded from the Web server, extensions like, asp, aspx, or php. One other minor restriction of this technology is that it must be supported by and enabled on the Web server serving the pages with the SSI directives in them. ASP, ASP.NET, and PHP Web servers all support SSI, but SSI is not enabled by default on newer Web server bundles like IIS 6, 7 and later.

Adobe Dreamweaver's Templates

Adobe's solution was to have developers create template Web pages which included the basic structure and content that needed be repeated on several pages. Each time the Web developer created a new Web page they would create it based on a particular Web page template they had previously built for the purpose. When updates to the template's code or content was required, the developer would simply update the template's contents and then Dreamweaver would copy those changes to all of the Web pages that were based on the changed template page. The problem with this method was that all this activity takes place on the developer's computer and not on the Web server. What this means is, after Dreamweaver updated all of the necessary files on the Web developer's computer, it was up the Web developer to locate all of the pages that had been updated and then manually publish those changed files to the Web server.

MasterPages to the Rescue

Now compare those two solutions to Microsoft's Master Pages methodology. Master Pages are similar to Adobe Dreamweaver's templates in that you build a basic file which has all of the HTML elements in it that will be repeated in any new pages you build. The difference is the master page gets published to the Web server, and anytime a Web form based on the master page is requested, the server first loads the contents of the master page the Web form is linked to, and then merges that with the contents of the requested Web form before creating the output that will be returned to the Web browser. Master pages are the most secure method currently available for managing repetitive content on a Web site in the most efficient manner possible.

Base Pages

Base pages are similar to master pages in that you can store code in one file and have new pages inherit the code stored in the original "base" file. In order to update any of the new pages all you need to do is to modify the original "base" file that your new pages are based on. The difference is that instead of storing HTML and/or CSS code like a Master Page does, a Base Page stores programmatic code, in the case of your CSIS786 Web site that means it will be used to store any default C# code needed by all code-behind pages in the site.

You might remember that all ASP.NET code-behind pages are based on the ASP.NET Page class. If a Web site needs to have some custom C# code applied to all new pages as they are created, then you would write the custom code in a new class file named BasePage.cs, save it in the App_Code folder and then modify the Inherits code in the code-behind file of each new Web form (ASPX file) by changing it from ": System.Web.UI.Page" to ": BasePage". This creates an inheritance chain where the BasePage.cs inherits from the ASP.NET Page class and new code-behind files will inherit from the BasePage.cs class.

Of course changing the Inherits code for each new Web form you create can be quite tedious. To make the process more efficient we need to automate the modification of the Inherit code each time a new code-behind file is created - that's where ASP.NET templates come in.

Reusable Page Templates

When you develop Web sites professionally, time-saving devices are a necessity. By using reusable page templates you can create custom HTML pages, CSS style sheets, or code-behind files that you reuse and you can easily access them from the  Add Item dialog box when you need to create a new one of whatever template types you have created.

In this week's assignment you will be creating a code-behind template that will set a Web forms Inherit code to BasePage instead of System.Web.UI.Page each time you create a new Web form. The advantage you get from combining these two techniques is powerful coding flexibility for your Web site which you will take advantage of in this chapter and chapters to come.

Themes

A theme is a collection of files that defines the look of a page; by changing the theme of a Web site you can quickly change the entire look and feel of every page in the site (CSS Zen Gardens is a good example of this). A theme typically includes skin files, CSS files, and images. Themes are defined in a special App_Themes folder in the root a Web site. Inside of the App_Themes folder you create one or more subfolders that define the actual themes. Themes are fun, but still aren't popular among most modern day Web sites. In this assignment you will be shown how to wire up two themes so that a viewer of your Web site can select the theme of their choice - or at least their choice of the choices you provide.

In addition to the CSS Zen Gardens Website I mentioned above, you might be interested in checking out a sandbox I created for demonstrating the use of themes in a Web Forms website, MediaMogul.us

Assignment

In order to receive full credit for your Week 6 assignment you must complete the following:

  • Read all of Chapter 6: Creating Consistent Looking Websites in your text book to learn about master pages, base pages, ASP.NET templates, themes, skins and the Web form page lifecycle.
  • Create a Login.aspx Web form based on your new master page and update your Default.aspx page as instructed below.
  • Create an App_Themes folder and add two themes, Monochrome and Dark Grey as instructed below.
  • Publish your default.aspx, login.aspx, files and App_Code, App_Themes, and MasterPages folders to your student folder on the Student Web server.
  • Verify you can view both your pages on the Student Web server and that both display correctly in your Web browser when either theme is selected from the DropDownList control.
  • Post the URL used in the last step to Canvas for scoring by the due date listed in the Syllabus for Assignment 6.
Assignment 6 completed - Monochrome

Assignment 6 completed - Dark Grey

Instructions

In order for this assignment to work locally and on the IA.MSJC.EDU student Web server, you will need to open your CSIS786/ASP06 folder as the root folder in Visual Studio. This will also mean that you will need to create a new publishing profile in order to be able to publish the necessary files to the student Web server. This is due to the fact that publishing profiles are linked to the root folder in Visual Studio.

The following tutorial provides step-by-step instructions for completing this week's assignment. Remember to use C# when copying code snippets from your text book.

Step 1 Complete all the steps in the Try It Out on pages 198 - 200 to create a MasterPages folder in the root of your Web site with a FrontEnd.master page in it.

Step 2 Complete all the steps in the Try It Out on pages 200 - 203 to update your root Default.aspx page and create a Login.aspx page in the root of your site.

Step 3 Complete all the steps in the Try It Out on pages 209 - 211 to create a BasePage.cs file in your App_Code folder which will serve as a template for all new code-behind files created in your site.

Step 4 Complete all of the steps in the Try It Out on pages 213 - 215 to create a reusable page template for creating all new Web forms.

Step 5 Complete all the steps in the Try It Out on pages 218 - 220 to create an App_Themes folder and create or copy the necessary files to provide a Monochrome and a DarkGrey theme for your site.

Step 6 Complete all the steps in the Try It Out on pages 222 - 223 to add images to your themes.

Step 7 Complete all of the steps in the Try It Out on pages 226 - 228 to add a DropDownList control and configure it to allow users to select a theme for the site.

Step 8 Complete all the steps in the Try It Out on pages 230 - 231 to apply the theme when a user makes a selection.

Step 9 Complete all the steps in the Try It Out on pages 233 - 234 to create a skin for the button control.

Step 10 Complete all of the steps in the Try It Out on pages 234 - 235 to create a named skin for the Button control.

Once you have you have successfully completed the steps listed above, you are ready to complete steps 11, 12, and 13 below.

Step 11 Publish the App_Code, App_Themes, MasterPages folders and the default.aspx, login.aspx, and web.config files from your root folder to your student folder on the Student Web server. Don't publish any other files or folders at this time.

Step 12 Using a Web browser on your computer, verify that you can view both the default and login pages and that both themes display correctly when selected from the DropDownList control. You should be able to view your Default.aspx page using the URL for the root of your student folder, e.g. http://IA.MSJC.EDU/7-digitStudentIDNumber.

Step 13 Post the URL for your updated CSIS786 Web site to Canvas for scoring by the due date listed in the Syllabus for Assignment 6.

Instructor's Note: Everything MUST be completed before the due date listed in the syllabus for this assignment.

Please email me if you have any questions at all!

⇑Table of Contents

Lesson Summary

In this lesson you learned how to:

  • Implement and use MasterPages
  • Implement and use Base Pages
  • Implement and Use Reusable Page Templates
  • Implement and use Themes in your Web pages
  • Identify the different stages of the page lifecycle and why they are important

Congratulations, that's it for this assignment. You can get a head start on your next lesson by reading chapter 7 in your textbook.

⇑Table of Contents