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.
