To get started with master pages, you'll take the following steps:
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 pageIn 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 viewTo 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 pagesWhen 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.
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 pageFigure 10-5. Page1.aspxRun 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. |