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 skeletonproject 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.Figure 2-5: Start page
2.
You will see the folders and files in the skeletonsolution 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).Figure 2-6: Add New Item page
For this example, we are using the “code inline” model, where the page itself contains the HTML con- tent, the ASP.NET server controls, and the server-side code in a <script runat=”server”>sec- tion. 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 con- stituent 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 ContentPlaceHoldercontrol within the <div>element on the <form> (see Figure 2-7).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 @Masterpage direc- tive. Normal ASP.NET pages contain the @Pagedirective. 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 ContentPlaceHoldercontrols, 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 rightFigure 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 theyFigure 2-9: Dragging the Tablecontrol
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 theColSpanproperties 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.