Master page,treeview,sitemap,css in ASPX.net


Master page is use to give one design and give look and feel to website. By using the master page design it will apply to other webpages which is design under the master page. The advantage, if we want to design many pages with same design, just design the master page and it will apply to other pages automatically.we going to design this page using the master page.

You can download this example.

1)      Master page called main.master.

2)      Three Aspx pages (Feedback.aspx, contactus.aspx, help.aspx).

3)      Asp tree view component.

4)      Sitemap (web.sitemap)

5)      Image tag.

6)      CSS style sheet.

first we design the master page:

1)      Open the new project and give it name “masterpage” remember you must select the “asp.net empty web application project”,Right click on your project and select the ‘add new item’.one window will be open then select the master page. Rename it as ‘main. Master’.Right click on your project add new folder and rename to “style” in style write the following style code. And add this style page in master page.goto to format << attach style sheet.


body {

   background-color: #FFFFFF;

   margin: 0px;

   padding: 0px;

   font-family: Verdana, Arial, Helvetica, sans-serif;

   font-size: 12px;

   line-height: 1.5em;

}

#header

{

   text-align: center;

    width: 740;

}

#left

{

    margin: auto auto auto 315px;

    float: left;

    width: 137px;

    background-image: url('../images/page-bg.gif');

}

#contant

{

float:right;

width:388px;

background-color:White;

margin:10px 400px auto auto;

}

Now agin go to solution explorer and add new item.this time we select the web.sitemap file.
Web.sitemap is nothing but a XML file that contain the hirarical from of information of your website related files.”
2)  drag a tree view control from toolbax and add it in you master page now your code will look like this.


        <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"></asp:TreeView>

         <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

3) Note that in master page we have not done changes in the contantplace holder.
we just give the look and field in the contantplace holder by give the div tag,style.

4) create a new folder called pages which is going to store all web pages.now create the create the new aspx webpage in pages folder.right click in the pages folder and add new item.now click the web page using the master page give the page name help or if using the VWD click on master page,click ok button and then select the master page and click ok button,create two more pages with same steps called “feedback,contact us”.

5) Now write the code inside the  asp contant tag in the contat us page,your contact us page will look like that.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

web address:infynet.wordpress.com

</asp:Content>

6) Now open your web.sitemapfile and write the following code:

<siteMapNode url="" title="MENU"  description="">

        <siteMapNode url="pages/contact us.aspx" title="contact us"  description="contact us" />

        <siteMapNode url="pages\help.aspx" title="help"  description="May i help u" />

      <siteMapNode url="pages\feedback.aspx" title="feedback"  description="send feedback" />

    </siteMapNode>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s