Designing My website Template.

Firstly, I design my logo following a hint with http://aodaitrang.net, a simple line to draw up A style rich in image.

at Photoshop CS 2, I used the pen tool to draw lines in order to create an image of human. The yellow color which I had defined already before I drew.



Adding horizontal texts as longdressvn



Finally, I filled a background color to the image.



Secondly, I created a font page for my website with font page design in photoshop



Creating new file for enter button.



After adding some decoration for my page, I combined them all together in font page and published on the web.



The font page of my website is done now.

Thirdly, I need to design another template for my main home page and the rest of pages.

First of all, I create a new file in photoshop again for a banner, after I decorated image on the background of banner and yellow texts, I added my logo, which I already did, to the right side of banner.

A finished banner will be looked like :



Move next, I create a new file for a font ground with color of dark red, I use this background to contains all my texts and my images. I also use this image for my footer.



and another new file for back ground with yellow color.



finally, I drag all images from photoshop files that I created so far and drop them into yellow back ground step by step.



I already finish some works for designing my layout, in my Dreamweaver, I use Draw layer function to build up my pages, once, I finish setting up, I will apply one page style to the rest of pages.

However, I lack of navigation menu so I need to build.

Coming back to photoshop, I create a new file for yellow bar which contains all navigations and search menu.



I save the image bar from photoshop file to JPG. Here, I draw a new layer on yellow font ground layer , add image bar into the new layer.

I create a table inside image bar layer with vertical rows and add text for each cell such as Home, Product, About us, Contact and a form including text field with search button.



A simple navigation menu (the style of http://aodaitrang.net ) and search menu are on same line (the style of http://www.lauraashley.com/ ) are done now.

To make the navigation menu have an effect when the users move their mouse point on, I go to Code View in Dreamweaver to do coding.

As code being :



div tag for my navigation menu layer is called submit. This is used when I do CSS
I move to head tag of HTML page and code some CSS properties.

.submit a{
font: bold 14px Arial; color: black; text-decoration:none;
}
.submit a:hover{
color: white; font: bold 20px Arial, Helvetica, sans-serif; text-decoration:underline overline;
}

Finally, the navigation get effect when users move their mouse point on

for example, I move my mouse point to product navigation, the text which is black color with its size 14 px normally, changed to size of 20px with white color , over line and underline effect



Actually, my design for coursework 1 is done.