DESIGN FOR WEB
CODING WEBSITE
For the website design I decided to use the same wire frame that simon had taught us during our web sessions. I did this as i am not overly confident with web design and could use the code we learnt with simon to refer to if I got stuck.
I first created a file named root to store all of my work in, It is important to create a root folder in order to keep all of your work together.
I then created an images folder with in this to store all my images in.
I next created an Index page and css style sheet.
After this I clicked 'save as' and saved the remaining pages in my website
Using my CSS style sheet i set the body copy text that i wanted to use, I chose font colour size and font family
I also chose a font style and size for the header.
I set the container size
The navigation size
The logo size and position
Button size and position.
I used bright colours so i could map out where all of my boxes were and to make sure they all lined up.
Next i set about creating my buttons.
I opened up an illustrator art board with the correct dimensions, making sure it was in web mode.
I created the first layer of my button.
I then created a new layer to create the second layer of my roll over button.
This is the second layer of my button. I saved each layer of my button separately. I clicked save for web and saved them as .png with the names about.png and about1.png. I repeated these steps for all of my buttons.
To create the roll over image i selected it from the insert option on dreamweaver and followed the steps.
Once i was happy with the layout of the page i created a template so that the code could be applied across all of my pages. Each page will have the same code with a section called 'editable content' This is where i can put all the images and information for my website.
I next made a left and right column for my website, This is to put in the editable region of all of my pages except the home page.
Again i changed the colours temporarily to make sure everything worked.
I next had to format the images so they were appropriate for web. I edited the image size and saved them as .png files .
As my web site is now all set up all that is left to do is source all of my information and images and add it to my website.
No comments:
Post a Comment