Design Header in Expression Blend 4

Today we are going to design a Header in Expression Blend 4.

Step 1

Open Expression Blend 4 -> select Silverlight Application -> change Name and Location accordingly -> hit OK.

Step 2

Copy & paste the panel-bg image or select Assets -> select rectangle-shape -> draw rectangle -> fill solid-color in the background from brushes and stroke-color and name it as panel-bg then manage the width & height  as shown below:

Step 3

Copy & paste the pro-logo  and change the name in Object-and-Timeline Window for your comfort so that you can easily search the image during design-time and manage the width & height, margin and padding as shown below:

Note : Here, you can design the logo according to your choice instead of copy & paste.

Step 4

Copy & paste the pro-home image and change the name in the Object-and-Timeline Window for your comfort so that you can easily search the image during design-time and manage the width & height, margin and padding as shown below:

Step 5

Select Assets -> select text-block -> design pro-menu-top-links ie; enter pages, layouts, typograpghy, gallery-layouts and extras in Text-block, manage the font-family, font-size and foreground-color as shown below:

Step 6

Copy & paste the nav-bg image or select Assets -> select rectangle-shape -> draw rectangle -> fill solid-color from brushes  and name it as nav-bg then manage the width & height as shown below:

Step 7

Select Assets -> select rectangle-shape -> draw rectangle -> fill solid-color in the background from brushes, manage the width & height, margin and padding as shown below:

Note: This displays at the time of the Hover-Effect ie; cursor-point.

Step 8

Select Assets -> select text-block -> design pro-main-menu ie; enter main, about-us, charities, blog, our-team and contact-us in text-block, manage the font-family, font-size, margin, padding and foreground-color as shown below:

Step 9

Select Assets -> select rectangle-shape -> draw rectangle -> fill solid-color in the background from brushes, manage the width & height, margin and padding as shown below:

Step 10

Copy & paste the charity-logo image then manage the width & height and margin as shown below:

Step 11

Select Assets -> select text-block -> design login-register-links ie; enter login and register in text-block, manage the font-family, font-size, margin, padding and foreground-color as shown below:

Summary

Through this article you can design a Header of a web-page using controls and properties for a nice look-and-feel.