Wednesday, 28 November 2012

web design step by step

This is a step by step on how i created my website







To start i created div tags for the layout of the page. i created a contain div then add the other div tags in side of the container. next i edited the div tags width referring to the 960 grid i used whilst design my website.    







Next I went on site, new site to set up the directory file for my site. then i created a a new style sheet and attached it to my home page. with this I will not have to redo the changes to the div tags on each page and it will save me a lot of time.










I then added a reset CSS code provided by Meyer to my CSS page. This is so my website's div tag would stay the same regardless of which browser it 
is viewed on, in other words, the css reset code makes my website cross platform.










next using the style sheet i edited the position and height of each div tag on my home page. Then I added a background image to some div tags and turned off background-repeat. after that i added 4 more div tags to the menu div to add the text for the navigation bar.






i then add and positioned my logo with the style sheet as well as adding the text for the navigation bar. for the footer i added a background image that i had made in Photoshop with some web icons on it.












next to add the images in "latest work" i reside the images in Photoshop first so they were not to big. then i clicked inside the correct div and went on insert image and repeated this step for the other images.






after finishing my home page i created my other pages by simply clicking on save as and changing the name and make a few changes to each page such as the text in and deleting the latest work div. next i added the links to each pages on the text in the navigation bar and customised the link colour in the css.



next i added the content to each page such as text, images etc..  when i finished this i found a free carousel called gallery view. i then put the folder in the website folder and pasted the code and linked it to the javascript in the folder. to finish off i customised the size and images in the carousel. With this my website was finished.


No comments:

Post a Comment