Create Web Page Templates in ASP.NET with Master Pages

Create Web Page Templates in ASP.NET with Master Pages
Page content

Dynamic Web Page Templates

One reason for using web page templates to develop Web pages is to give a consistent look and feel across the entire Website with the common elements that appear on each page. Another reason is to simplify updating the pages. With a single template, the designer only has to make changes on one page to have them propagate across each page in the site. With the ASP.NET Master Page approach described here, not only can a designer create common static page elements but also can include Web controls and server-side source code as well.

Preliminary Design

Begin the Master Page creation process by opening Microsoft Visual Web Developer, which should have been downloaded with the ASP.NET engine from Microsoft. Click on “Website” and “Add new page” and then chose “Master Page” from the list of installed templates. You can use the default name or provide a unique one, but be sure to keep the suffix “master.” Place a checkmark in the “Place code in separate file” if it is not already checked and then Click on “Add.” Normally a source code view opens, but you can select the Design view to simplify development. At the top of the Design view is a ContentPlaceHolder control. This is for content that can be customized on individual pages. Additional ContentPlaceHolder controls can be added to other parts of the Master Page by dragging the relevant control from the Toolbox on the left if needed. Later, only these place holder regions can be customized on individual pages

Adding Common Elements

Fine Tune the Template

Use the first cell in the second row for navigation links (ASP.NET has a nifty SiteMap process that will automate this but that goes beyond this topic). Click on this and in the “Properties” window set the “Valign” to “Top” so the navigation items will always stick on the top left and not be affected by other page content. You can click and drag down this cell to easily change the height and/or width. Finally, repeat the cell merge process on the last row of the table to provide a place any additional common texts desired. After this point, you have the basic Master Page set up, but it can be further customized with additional information and blocks as desired, inserting Web controls and even source code that will execute on the server side.

Complete the Process

Once you understand the basics of Master Page creation in ASP.NET as outlined above, a new area of flexibility will be possible in developing dynamic web page content using this form of web page templates.