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.
Step 6 - Now, select Web Form and check on "Select master page". Then, click on Add button. 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.
- <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" %>
- <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:Content>
- <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
- <div id="ImgSlide">
- <marquee bahevior="alternate">
- <asp:Image ID="Image1" Width="150" Height="150" ImageUrl="~/Image/dd.jpg" runat="server" />
- <asp:Image ID="Image2" Width="150" Height="150" ImageUrl="~/Image/download.jpg" runat="server" />
- <asp:Image ID="Image3" Width="150" Height="150" ImageUrl="~/Image/la.jpg" runat="server" />
- <asp:Image ID="Image4" Width="150" Height="150" ImageUrl="~/Image/mob.jpg" runat="server" />
- <asp:Image ID="Image5" Width="150" Height="150" ImageUrl="~/Image/lap.jpg" runat="server" />
- <asp:Image ID="Image6" Width="150" Height="150" ImageUrl="~/Image/mob.jpg" runat="server" />
- <asp:Image ID="Image7" Width="150" Height="150" ImageUrl="~/Image/mobi.jpg" runat="server" />
- <asp:Image ID="Image8" Width="150" Height="150" ImageUrl="~/Image/mob.jpg" runat="server" />
- <asp:Image ID="Image9" Width="150" Height="150" ImageUrl="~/Image/lap.jpg" runat="server" />
- <asp:Image ID="Image10" Width="150" Height="150" ImageUrl="~/Image/mob.jpg" runat="server" />
- <asp:Image ID="Image11" Width="150" Height="150" ImageUrl="~/Image/lap.jpg" runat="server" />
- <asp:Image ID="Image12" Width="150" Height="150" ImageUrl="~/Image/mobi.jpg" runat="server" />
- <asp:Image ID="Image13" Width="150" Height="150" ImageUrl="~/Image/lap.jpg" runat="server" />
- <asp:Image ID="Image14" Width="150" Height="150" ImageUrl="~/Image/mob.jpg" runat="server" />
- <asp:Image ID="Image15" Width="150" Height="150" ImageUrl="~/Image/download.jpg" runat="server" />
- <asp:Image ID="Image16" Width="150" Height="150" ImageUrl="~/Image/mob.jpg" runat="server" />
- <asp:Image ID="Image17" Width="150" Height="150" ImageUrl="~/Image/mobi.jpg" runat="server" />
- <asp:Image ID="Image18" Width="150" Height="150" ImageUrl="~/Image/mob.jpg" runat="server" />
- <asp:Image ID="Image19" Width="150" Height="150" ImageUrl="~/Image/lap.jpg" runat="server" />
- <asp:Image ID="Image20" Width="150" Height="150" ImageUrl="~/Image/download.jpg" runat="server" /> </marquee>
- </div>
- </asp:Content>
Step 7 - Select master page and click OK. Step 8 - Again, select Style Sheet template and click on Add button. 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.
- body {
- background - image: url('Image/pink_solid_color_light_bright_65838_300x168.jpg');
- }#con {
- margin: 2 % ;
- margin - left: 10 % ;
- width: 80 % ;
- height: 250 px;
- background - image: url('Image/images.jpg');
- } * {
- margin: 0 px;
- padding: 0 px;
- }#LgText {
- position: absolute;
- top: 5 % ;
- left: 11 % ;
- color: white;
- font - family: Arial;
- font - size: 30 pt;
- font - weight: bolder;
- }#menu ul {
- list - style: none;
- }#menu ul li {
- float: left;
- width: 120 px;
- }#menu ul li a {
- text - decoration: none;
- color: white;
- font - family: Arial;
- font - size: 14 pt;
- }#menu {
- position: absolute;
- top: 6 % ;
- right: 16 % ;
- }#ImgSlide {
- position: absolute;
- top: 20 % ;
- left: 12 % ;
- right: 12 % ;
- }
Output - Our output is shown in the figure. I hope you enjoyed this Creating Master Page tutorial. Follow C# Corner to learn new things about ASP.NET. Thanks for reading this article.