ASP.NET Master Page Tutorial Part -5 (Adding Header Image & Sidebar)

In previous post Asp.Net Master Page Tutorial Part -4 (DIV Properties,Top Header)Expression Web i show you how to set DIV properties like font, block, background, border, box, position, layout etc..and how to make topheader div tag.
Now in this tutorial i show you how to add image folder, header image , adding main aera and adding sidebar to ASP.Net Website.

After setting a #topheader to the width 780px and height 255px because i know the width and height of my header picture,add Header image in #topheader DIV Tag,for this we have to insert image folder.

Click on File > Import > File

Expression web Master Page tutorials in ASP.NET (Adding Header Image,Sidebar tutorial)

You can add image file or image folder i am inserting image folder,select folder you want to add in your website.

Expression web Master Page tutorials in ASP.NET (Adding Header Image,Sidebar tutorial)

you can see results likes this

Expression web Master Page tutorials in ASP.NET (Adding Header Image,Sidebar tutorial)

Check your are inserting image in right place,place your mouse pointer inside the #topheader div tag.In folder name "images" i have a header image "How To Do Logo.jpg".just drag n drop this image in #topheader div tag.

In accessibility property box Add alternate text (your site name),i added "How To do" add small description about your site if you want and click Ok.

Expression web Master Page tutorials in ASP.NET (Adding Header Image,Sidebar tutorial)

This code only appears behind the image if by some reasons Header image is not appear it will show alternate text.
Now you can see header image appear in master page header.

Expression web Master Page tutorials in ASP.NET (Adding Header Image,Sidebar tutorial)

Now Link this Header image to Home page of ASP.Net website,when user click on this header of ASP.Net website it will always back to Home page of Website.
Click on picture then click on Hyperlink button as shown in picture.

Expression web Master Page tutorials in ASP.NET (Adding Header Image,Sidebar tutorial)

Now in address bar write "Home.aspx" (we will make the home page after completing Master page design ) Click Ok.

Expression web Master Page tutorials in ASP.NET (Adding Header Image,Sidebar tutorial)

You can see in Apply Style box that Microsoft Expression Web automatically generate Styles like Style1.that style simply add the image boarder to Zero.

Expression web Master Page tutorials in ASP.NET (Adding Header Image,Sidebar tutorial)

Now add main area or Master Page.this area is most important in website,it contais the sidebar,main content area and other things...
In code box place the mouse pointer above the last div tag as shown in picture.

Expression web Master Page tutorials in ASP.NET (Adding Header Image,Sidebar tutorial)

Select this new div tag,apply New style.

Expression web Master Page tutorials in ASP.NET (Adding Header Image,Sidebar tutorial)

In New Style box name this new style to #main and click ok ! as shown in picture.

Expression web Master Page tutorials in ASP.NET (Adding Header Image,Sidebar tutorial)

This will just separate the main area to top area of this Master page.

Expression web Master Page tutorials in ASP.NET (Adding Header Image,Sidebar tutorial)

Now add anther new div tag into #main tag, Apply new Style.

Expression web Master Page tutorials in ASP.NET (Adding Header Image,Sidebar tutorial)

This div float at the left side that contain all navigation elements called Sidebar
Name this style to #sidebar,In category set the background color or background image.

Expression web Master Page tutorials in ASP.NET (Adding Header Image,Sidebar tutorial)

In Border category set the value as shown in picture or you can set what you want.



In Position Category set the width of this div i set the width to 150 px. check the Apply new style to document section and click Ok !

Expression web Master Page tutorials in ASP.NET (Adding Header Image,Sidebar tutorial)

Now here you can see the results in this picture.

Expression web Master Page tutorials in ASP.NET (Adding Header Image,Sidebar tutorial)
Next part i will show you in another Asp.Net tutorial ASP.NET Master Page Tutorial Part -6 (Adjusting Div Tags)Expression Web.

Share this

Related Posts

There was an error in this gadget