Skip to main content

Practical-18

Master Page and Theme​

In this practical, we will learn how to use Master Page and Theme in ASP.NET.

Step 1: Create a new ASP.NET Web Application project​

  1. Open Visual Studio and create a new ASP.NET Web Application project.
  2. Choose the Empty template and click OK.

Step 2: Add a Master Page to the web form​

  1. Right-click on the project in the Solution Explorer and select Add -> New Item.
  2. Choose the Master Page template and click Add.
  3. Name the master page file as "Site.master" and click OK.
  4. The master page will be added to the project.

Step 3: Design the Master Page​

  1. Switch to the Design view of the master page.
  2. Design the layout of the master page by adding HTML elements, CSS styles, and placeholders for content.
  3. Save the master page.

Step 4: Create a Content Page​

  1. Right-click on the project in the Solution Explorer and select Add -> New Item.
  2. Choose the Web Form template and click Add.
  3. Name the content page file as "Default.aspx" and click OK.
  4. The content page will be added to the project.

Step 5: Set the Master Page for the Content Page​

  1. Open the Default.aspx file in the Solution Explorer.
  2. Switch to the Design view.
  3. In the Properties window, set the MasterPageFile property to "~/Site.master" to link the content page with the master page.

Step 6: Apply a Theme to the Web Application​

  1. Right-click on the project in the Solution Explorer and select Add -> New Item.
  2. Choose the Theme template and click Add.
  3. Name the theme file as "CustomTheme.skin" and click OK.
  4. The theme file will be added to the project.

Step 7: Customize the Theme​

  1. Open the CustomTheme.skin file in the Solution Explorer.
  2. Define the styles and properties for the theme using CSS and skin selectors.
  3. Save the theme file.

Step 8: Apply the Theme to the Master Page​

  1. Open the Site.master file in the Solution Explorer.
  2. Switch to the Design view.
  3. In the Properties window, set the Theme property to "CustomTheme" to apply the theme to the master page.

Step 9: Run the application​

  1. Press F5 or click the Start Debugging button to run the application.
  2. The web form will display the content page with the applied master page and theme.

That's it! You have successfully demonstrated the use of Master Page and Theme in ASP.NET.

Make sure to save your changes and submit this practical in your notebook.