ASP.NET 2.0 Visual Web Developer 2005 Express Edition Starter Kit (2006)

Chapter 2

Templates and Master Pages

Web developers have found various ways to implement standard sections of content that are common across multiple pages in a site. However, many of these approaches (such as separate text files and user controls in ASP.NET 1.x) cannot really be classed as Master Pages. They are just ways of inserting standard content into multiple pages. Other techniques involve creating a special code class based on the ASP.NET Page class, and then using this to implement a template-style solution.

ASP.NET 2.0 supports a new feature called Master Pages, which automatically provides all the features you need to create multiple pages based on the same underlying template. VWD also supports the Master Pages approach, and provides a great environment for building such pages and their content.

Figure 2-2 shows how you can see exactly what the result will be, even though the final page is created from two sections (the Master Page and a Content Page).

Figure 2-2: A Master Page in Design view

34

Designing a Web Site

Navigation and Menus

The left-hand navigation bar or “menu” is ubiquitous in Web sites today, simply because it is the obvious place to locate links to other pages. Irrespective of the browser window size, the links are visible when the page first displays and provide a useful conceptual map of the whole site — which users often glance over before moving to the page content.

The use of the word “menu” on a site that sells fast food is somewhat confusing but difficult to avoid. In this book, the term navigation bar means the left-hand “menu” of page links, while the display of items available for sale is the “pizza menu” page. However, as you will see, Microsoft refers to the main ASP.NET navigation control as a Menu control!

ASP.NET 2.0 provides a series of controls that generate both the navigation bar links and the “breadcrumb” links. They use either an XML-formatted text file or a collection of items that lists the pages on the site. However, the text links at the bottom of the page are not generated automatically in this way. Instead, you will use a custom user control to generate these links from an XML file, demonstrating an alternative technique (see Figure 2-3).

Figure 2-3: The text links at the bottom of the pages

Text Styles and Style Sheets

The PPQ site uses the common sans-serif face for the display, as is the case in many Web sites. Microsoft designed certain fonts for use on the Web in a browser, optimized to give an easy-to-read display of small text. Examples are Verdana and Tahoma, as used in the PPQ site. However, for headings and large bold text, Arial provides a better appearance. The example site uses a Cascading Style Sheet (CSS) to specify these styles for all pages, meaning users only download it once — and subsequently reload it from their browser cache. If the user agent does not provide graphical output, it can ignore and not download the style sheet.

However, not all visitors will be using Windows, and so they may not have the specified fonts installed. Therefore, the style sheet must also specify other suitable fonts, and the common technique is to use the standard CSS face style names, such as “sans-serif”. In addition, to allow users to resize the text displayed in their browser window, the font sizes are specified using the standard size names, such as “x-small,” “small,” and “large” (see Figure 2-4).

35

Chapter 2

Figure 2-4: Changing the displayed text size in the browser

Designing the Underlying Workings of the Site

So far, the topics discussed have concentrated on what the site will look like. However, now it is time to consider the underlying “working parts.” Web site and application design, despite much vocal com-

plaint from bodies such as the U.S. Architecture Guilds and the U.K. Royal Institute of British Architects, is generally now referred to as “software architecture.” The software architect takes into account all the requirements of the application, balances it against factors such as the technologies available and the cost, and comes up with a design for the working parts of that application. The primary “working parts” in most applications involve data access.

Data Access

It may seem strange to leave the topic of data access to last, when it is probably the most important aspect of getting the site working. This means that it is also likely to be the place you start your development. While there is nothing wrong with this, it is easy to get involved in data retrieval, storage, and display issues without considering the other design issues mentioned earlier. This is why data-access considerations reside here.

36

Designing a Web Site

Today, the move in software is toward distributed, multitier, and service-oriented architectures. All these place features such as data access in separate “layers” or “tiers,” so that the code can be reused and the physical layout of the application (such as the number and distribution of servers) can be changed without requiring rewriting of the code. At the extreme, the service-oriented architecture (SOA) model makes each component of the process a separate service, which exposes interfaces that other components and services can use irrespective of location, platform, and operating system.

The SOA model is beyond the requirements of the simple PPQ site, and the coverage of this book. However, to demonstrate the possibilities, the example site uses several different data-access approaches. To extract and display data in the pizza menu pages, the controls on the page talk directly to the database. This may be with a parameterized SQL statement or through a stored procedure in the database.

However, to store the data entered by the user when placing an order, the site uses a separate data-access layer that exposes and handles the data as a series of objects. This means that adapting the application to work with other databases (or to integrate with other applications) requires only that the data-access layer be adapted as required. Moreover, the separate data-access layer can be located on separate, and even multiple servers, to provide increased availability and throughput as PPQ becomes a worldwide supplier of high-quality fast food to the public.

Building a Master Page and Content Page

It is now time to start creating some pages, and the obvious place to start is with the Master Page that defines the structure of all the other pages in the site. You will see in this section how you can create a Master Page using VWD, and in it define the common layout structure for the pages of your site. Then, after the Master Page is complete, you will see how to build Content Pages that “plug into” the Master Page to create the final rendered output.

Creating the Page Structure as a Master Page

This section demonstrates how you can create the Master Page for the PPQ site, laying out the content sections and including features that make it easier for all users to access and navigate through the pages and the site.

1.Start VWD and select the skeleton project from the Start Page (see Figure 2-5), or select Open Web Site from the File menu and navigate to and select the C:\Websites\PPQ\ folder.

37

Chapter 2

Figure 2-5: Start page

2.You will see the folders and files in the skeleton solution appear in the Solution Explorer window. Close the Start Page, then either right-click on the top entry in the Solution Explorer window (C:\...\skeleton\) and select Add New Item, or select New File... from the File menu. Both actions open the Add New Item dialog. Select Master Page, change the name to PPQ.master, and click Add (see Figure 2-6).

38

Designing a Web Site

Figure 2-6: Add New Item page

For this example, we are using the “code inline” model, where the page itself contains the HTML content, the ASP.NET server controls, and the server-side code in a <script runat=”server”> section. You can change to the “code behind” model by setting the checkbox next to the Language drop-down list. In this case, VWD will place the server-side code into a separate file and use the new partial classes feature of .NET version 2.0 to combine the code with the ASP.NET page and its constituent controls when the page is compiled and runs for the first time.

3.The new Master Page opens in the main window. You can click the “pin” icons in the title bar of the Solution Explorer and Properties windows (and any other windows you have open) to view more of your new Master Page. You can see that it contains the usual <head> and <body> sections — in fact, it looks just like an ordinary Web page. The one main difference is that it contains an ASP.NET ContentPlaceHolder control within the <div> element on the <form> (see Figure 2-7).

39

Chapter 2

Figure 2-7: Viewing the Master Page

Notice that the first line of the file indicates that this is a Master Page file using the @Master page directive. Normal ASP.NET pages contain the @Page directive. In a Master Page, the ContentPlaceholder control defines the areas where the content will come from a separate file (a Content Page). However, before looking at that, the next step is to populate the Master Page with the other controls required for the PPQ site. These include the outline table that will hold the ContentPlaceHolder controls, and the images for the top banner and for navigation assistance for nonsighted users.

4.You are looking at the page in Source view at present, so the HTML and control definitions are visible. This is fine, because there is no visible content in the page. You can edit a page in either Source or Design view, and the changes are visible in both views as you switch between them. However, some things are easier to achieve in Source view, such as setting the properties of the main <body> element, as you will do now. Click on the <body> element in the code and open or view the Properties window. This allows you to add the attributes you want to the element by setting the properties. To ensure that the banner you will place at the top of the page goes right to the edge of the browser window, set the LeftMargin and TopMargin properties to zero. You will see the corresponding attributes appear in the code in the main window (see Figure 2-8). You can also change the content of the <title> element from Untitled Page to Pizza Pretty Quick. Notice how this is not a property of the <title> element but just a part of the page content.

40

Designing a Web Site

Figure 2-8: Changing the <body> content

In the future, when you see instructions to set the properties of a control or element, you should do so in the same way as here by using the Properties window. You can add or edit the attributes themselves, directly within the Code Editor window. The Properties window then reflects the changes. However, it is generally better to use the Properties window to ensure that you get the correct attribute name and format — for example, if the value you enter contains double quotation marks, VWD automatically wraps the value in single quotation marks to maintain the correct syntax and well formedness.

5.Now it is time to create the layout structure of the Master Page. This example uses an HTML table for laying out the various parts of the content, though you could use CSS if you prefer. HTML tables are generally easier to work with unless you are very familiar with CSS, and they are correctly supported on almost all browsers and specialist user agents. Go to the Toolbox (open it from the View menu or press Ctrl-Alt-X if it is not visible) and scroll down to the HTML section, open it, and click on the Table control. Then drag it onto the editor window, placing it at the end of the opening <form> tag, as shown in Figure 2-9.

41

Chapter 2

Figure 2-9: Dragging the Table control

6.This inserts the HTML to generate a three-row, three-column table. Now you can drag and drop, or cut and paste, the controls in the page to match the layout you need. The code in Listing 2-1 shows what is required — notice that there is a <div> control in the second row of the table that will display the navigation links. To add a control to the page, simply drag it from the Toolbox and drop it into the appropriate place in the editor window (in either Source or Design view). VWD automatically generates different values for the ID of each control. Remember to set the ColSpan properties of the first and last <td> elements. You can also add some “dummy” content to the table so that you can see what it looks like in Design view and can make it easier to drag and drop other controls into the table cells later on.

Listing 2-1: Layout Controls

...

<form id=”form1” runat=”server”> <table>

<tr>

<td colspan=”2”>

Header goes here </td>

</tr>

<tr>

<td>

42

Designing a Web Site

<div>

Links<br />Links<br />Links<br />Links<br />Links </div>

</td>

<td>

<asp:contentplaceholder id=”ContentPlaceHolder1” runat=”server”> Content<br />Content<br />Content<br />Content<br />Content

</asp:contentplaceholder>

</td>

</tr>

<tr>

<td colspan=”2”>

Footer and text links go here </td> </tr>

</table>

</form>

...

7.Now you can switch VWD to Design view using the button below the main Editor window and see the results so far. Okay, so it does not look like much — but at least the main structural layout of the page is complete (see Figure 2-10).

Figure 2-10: Structural layout

8.To complete this section of the chapter, you will populate the top row of the table with the heading banner. In fact, there are three images to go into this section — the first two are “Skip To” links that make it easier for users of page readers and text-based user agents to navigate the site, and the third is the heading banner image. The first two links are images embedded in hyperlink elements, which point to the relevant sections of the page so that users can follow the link and skip directly to that section. So, delete the text from the header row of the table, and drag three Image controls from the HTML section of the Toolbox into it (see Figure 2-11).

43