10.1. Creating Master Pages


To get started with master pages, you'll take the following steps:

  1. Create a new web site.

  2. Add a master page to the site.

  3. Add content pages based on the master page.

To begin, create a new web site and call it MasterPages. Once the new site opens, right-click on the project and choose Add New Item. In the dialog box that opens, choose Master Page, and name your master page SiteMasterPage.master, as shown Figure 10-1.

An asp:contentplaceholder control has been added for you in the new page. It is this placeholder that will be filled by the content of each of the pages that use this master page.

Within the master page itself you may add anything you like surrounding the contentplaceholder. Whatever you add will be displayed on all pages that use the master page.

Figure 10-1. Add new master page


In this example, you'll use the O'Reilly logos, Animal.gif and OReillyLogo.gif, provided for your use in the download files at the download sites for this book (see the Preface for details).

Right-click on the application and choose Add Regular Folder. Name the folder Return to the application and add the files to the project by right-clicking on the images folder and choosing Add Existing item....

You'll place the logos and the contentplaceholder into a table within the SiteMasterPage.master file. To do so, drag Image controls into place, and set their ID, ImageURL, and ImageAlign properties. For example, for the Animal.gif file, set the ID to animalLogo, the ImageURL property to:

     "~/Images/Animal.gif" 

and the ImageAlign property to Left.

For the OreillyLogo.gif file, set the properties as follows:

      ImageUrl="~/Images/OreillyLogo.gif" ImageAlign="Bottom" 

As always, you can set these in the Properties window in Design view, or you can manually type them into the control in Source view.

In Design view in Visual Studio, you'll see the master page with standard logos in place, and a ContentPlaceHolder displaying where content from other pages will be placed, as shown in Figure 10-2.

You can type directly into the placeholder area. (In Figure 10-2, I typed in the words, "If you see this content, then the master page content was not replaced.")

Figure 10-2. Master page in Display view


To see the master page at work, create two new .aspx pages. Name them Page1.aspx and Page2.aspx, respectively. Create these pages as normal web pages, but check the "Select master page" checkbox, as shown in Figure 10-3.

Figure 10-3. Creating the content pages


When you click OK, you'll be asked to pick which master page you want to use. In this case, there is only one choice: SiteMasterPage.master. Select it and press OK.

Open your new page in design mode. You'll see exactly how the content for this new page will fit within the master page you've chosen, as shown in Figure 10-4.

Visual Studio 2005 assumes you want to use custom content. If you want to use the default content, click on the smart tag and choose Default to Master's Content.


Drag controls into the content area. Begin by dragging in a table (two columns wide, two rows high). In the left columns put labels and in the right column put text boxes. Below the table, add a link to page 2, so that your page looks like Figure 10-5.

Switch to Page2.aspx, and this time drag a Calendar control onto the Content area of the page. Add a hyperlink back to page 1, as shown in Figure 10-6.

Figure 10-4. Content page within master page


Figure 10-5. Page1.aspx


Run the application. The two pages share a common look and feel, although each page is made unique by the data and controls you placed within the ContentPlaceHolder, as shown in Figure 10-7.



Programming Visual Basic 2005
Programming Visual Basic 2005
ISBN: 0596009496
EAN: 2147483647
Year: 2006
Pages: 162
Authors: Jesse Liberty

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net