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.