Introduction

In this article, we will learn to create the consistent layout for the page in your application. We can say that the master page defines the look and standardizes the layout that we want for a group of pages in our application. A master page extension is “.master”. ASP.NET master page works on dynamically changing the common UI elements of master page from content pages .

Let's start our program.

Step 1 - Open Visual Studio and click File=> New=> Web Site.

1

Step 2 - Now, select template ASP.NET Empty Web Site. Assign project name.

2

Step 3 - Right click on project name and select Add=>New item.

3

Step 4 - Here, you can copy image folder from your hard drive and right click on your project name. Paste the image folder.

4

Step 5 - In the following figure, select Master Page and click on Add button.

5

Here is the Master Page code.
  1. <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6. <title></title>
  7. <link href="StyleSheet.css" rel="stylesheet" />
  8. <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder>
  9. </head>
  11. <body>
  12. <form id="form1" runat="server">
  13. <div id="con"> <span id="LgText">Laptop Booking </span>
  14. <div id="menu">
  15. <ul>
  16. <li><a href="#"> Home</a></li>
  17. <li><a href="#">About Us</a></li>
  18. <li><a href="#">Contact</a></li>
  19. <li><a href="#">News</a></li>
  20. <li><a href="#">Suggestion</a></li>
  21. </ul>
  22. </div>
  23. <div>
  24. <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder>
  25. </div>
  26. </div>
  27. </form>
  28. </body>
  30. </html>
Step 6 - Now, select Web Form and check on "Select master page". Then, click on Add button.

6

Now, write the Home.aspx coding.

Here, in this code, I have used the marquee tag that's used to move the elements (image, text) up and down or left to right. As per your choice, you can move the elements.
  1. <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" %>
  2. <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:Content>
  3. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  4. <div id="ImgSlide">
  5. <marquee bahevior="alternate">
  6. <asp:Image ID="Image1" Width="150" Height="150" ImageUrl="~/Image/dd.jpg" runat="server" />
  7. <asp:Image ID="Image2" Width="150" Height="150" ImageUrl="~/Image/download.jpg" runat="server" />
  8. <asp:Image ID="Image3" Width="150" Height="150" ImageUrl="~/Image/la.jpg" runat="server" />
  9. <asp:Image ID="Image4" Width="150" Height="150" ImageUrl="~/Image/mob.jpg" runat="server" />
  10. <asp:Image ID="Image5" Width="150" Height="150" ImageUrl="~/Image/lap.jpg" runat="server" />
  11. <asp:Image ID="Image6" Width="150" Height="150" ImageUrl="~/Image/mob.jpg" runat="server" />
  12. <asp:Image ID="Image7" Width="150" Height="150" ImageUrl="~/Image/mobi.jpg" runat="server" />
  13. <asp:Image ID="Image8" Width="150" Height="150" ImageUrl="~/Image/mob.jpg" runat="server" />
  14. <asp:Image ID="Image9" Width="150" Height="150" ImageUrl="~/Image/lap.jpg" runat="server" />
  15. <asp:Image ID="Image10" Width="150" Height="150" ImageUrl="~/Image/mob.jpg" runat="server" />
  16. <asp:Image ID="Image11" Width="150" Height="150" ImageUrl="~/Image/lap.jpg" runat="server" />
  17. <asp:Image ID="Image12" Width="150" Height="150" ImageUrl="~/Image/mobi.jpg" runat="server" />
  18. <asp:Image ID="Image13" Width="150" Height="150" ImageUrl="~/Image/lap.jpg" runat="server" />
  19. <asp:Image ID="Image14" Width="150" Height="150" ImageUrl="~/Image/mob.jpg" runat="server" />
  20. <asp:Image ID="Image15" Width="150" Height="150" ImageUrl="~/Image/download.jpg" runat="server" />
  21. <asp:Image ID="Image16" Width="150" Height="150" ImageUrl="~/Image/mob.jpg" runat="server" />
  22. <asp:Image ID="Image17" Width="150" Height="150" ImageUrl="~/Image/mobi.jpg" runat="server" />
  23. <asp:Image ID="Image18" Width="150" Height="150" ImageUrl="~/Image/mob.jpg" runat="server" />
  24. <asp:Image ID="Image19" Width="150" Height="150" ImageUrl="~/Image/lap.jpg" runat="server" />
  25. <asp:Image ID="Image20" Width="150" Height="150" ImageUrl="~/Image/download.jpg" runat="server" /> </marquee>
  26. </div>
  27. </asp:Content>
Step 7 - Select master page and click OK.

7

Step 8 - Again, select Style Sheet template and click on Add button.

8

Now, in this section, we design the page layout. Some CSS modules are given below,
  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Image Values and Replaced Content
  • 2D/3D Transformations
  • Multiple Column Layout
  • User Interface
  • Text Effects
Here is the CSS file coding.
  1. body {
  2. background - image: url('Image/pink_solid_color_light_bright_65838_300x168.jpg');
  3. }#con {
  4. margin: 2 % ;
  5. margin - left: 10 % ;
  6. width: 80 % ;
  7. height: 250 px;
  8. background - image: url('Image/images.jpg');
  9. } * {
  10. margin: 0 px;
  11. padding: 0 px;
  12. }#LgText {
  13. position: absolute;
  14. top: 5 % ;
  15. left: 11 % ;
  16. color: white;
  17. font - family: Arial;
  18. font - size: 30 pt;
  19. font - weight: bolder;
  20. }#menu ul {
  21. list - style: none;
  22. }#menu ul li {
  23. float: left;
  24. width: 120 px;
  25. }#menu ul li a {
  26. text - decoration: none;
  27. color: white;
  28. font - family: Arial;
  29. font - size: 14 pt;
  30. }#menu {
  31. position: absolute;
  32. top: 6 % ;
  33. right: 16 % ;
  34. }#ImgSlide {
  35. position: absolute;
  36. top: 20 % ;
  37. left: 12 % ;
  38. right: 12 % ;
  39. }
Output - Our output is shown in the figure.

9

I hope you enjoyed this Creating Master Page tutorial. Follow C# Corner to learn new things about ASP.NET. Thanks for reading this article.