ASP.NET Master Page Tutorial Part -7 (Adding Navigation Links)

In previous post ASP.NET Master Page Tutorial Part -6 (Adjusting Div Tags) Expression Web i show you how to Add main content Div tag and adjusting sidebar Div tag and main content bar Div tag to ASP.Net Website master page using Expression Web.

Most web sites have more than one page, so some type of navigation user interface is needed. A navigation user interface can be some static links to the other pages, or can involve the use of menus or treeviews. No matter how the navigation user interface is implemented, a site's logical structure (also called a site map) must first be defined.in this tutorial i show you how to make navigation user interface by static links in sidebar of ASP.NET website.

Now we have basic design of Asp.Net website.In side bar make some site links like Home,About Us,Categories, etc...

Expression web Master Page tutorials in ASP.NET  (Navigation Links)

Copy all content in notepad file like this..

Expression web Master Page tutorials in ASP.NET  (Navigation Links)

Just click into Sidebar div tag as shown in picture.

Expression web Master Page tutorials in ASP.NET  (Navigation Links)

Go to Edit > Paste Text..
here you can choose in which formate you want to paste content in page.

Expression web Master Page tutorials in ASP.NET  (Navigation Links)

Click on "Normal paragraphs without line breaks" click Ok !!

Expression web Master Page tutorials in ASP.NET  (Navigation Links)

By doing this each of the content line srounded by <.p.> tag. as shown in pictures
The <.p.> tag defines a paragraph.All "presentation attributes" of the p element.

Expression web Master Page tutorials in ASP.NET  (Navigation Links)

Now Select the "Home" click on hyperlink button,in Address bar write "home.aspx" as shown in picture.

Expression web Master Page tutorials in ASP.NET  (Navigation Links)

Select the "About Us" click on hyperlink button,in Address bar write "aboutus.aspx" as shown in picture.

Expression web Master Page tutorials in ASP.NET  (Navigation Links)




Select all and click "bullet".Now aplly some new styles on it.

Expression web Master Page tutorials in ASP.NET  (Navigation Links)

Go to Apply style > click on new Style. Select predefine tags..

Expression web Master Page tutorials in ASP.NET  (Navigation Links)

select ul tag.The <.u.> tag defines underlined text.in Box category set padding 0 to all,set margin 0 to all, click Ok.

Expression web Master Page tutorials in ASP.NET  (Navigation Links)

Again Go to Apply style > click on new Style. Select "li" predefine tags..
The <.li.> tag defines the list item.

Expression web Master Page tutorials in ASP.NET  (Navigation Links)

In Box Category set top margin 10 px,right margin 15 px,bottom margin 15 px,left margin 15 px.

Expression web Master Page tutorials in ASP.NET  (Navigation Links)

In Font Category set font-family,font size,font weight etc.. whatever you want.

Expression web Master Page tutorials in ASP.NET  (Navigation Links)

In List Category set list style type.. Click Ok !!

Expression web Master Page tutorials in ASP.NET  (Navigation Links)

You can get like this.

Expression web Master Page tutorials in ASP.NET  (Navigation Links)

Next part i will show you in another ASP.NET Make Master Page Tutorial Part -8 (Bottom Navigation Links ).

Share this

Related Posts

There was an error in this gadget