Sunday, 13 January 2013

Design for web: Making website/ Index page

Here are a few screen shots of the process of how i made my website. I followed the wire frame i designed as a guide to create containers and title bars etc or me to position the layout of my website before making buttons and placing images and text to it

Firstly i created a folder for my website content, this is so that the index file an be liked to the css and html pages. 

I started off by labelling the areas of the code with <body> </div> etc this is so that all the content designed in css will be inside the html code and will say central.



I created a main box aka wrapper, this is the central box which is the entire size of my Bagology website.


Something like this.


Symbols to remember when writing web coding: # { } : ; - 


Because i was adding new content to the inside of the wrapper i had to make sure i wrote <div id="?"> followed by </div> - opening and closing/. 


 Below is an example of the css code.

 The result on preview safari. 


Further code development.







Website coming together







The final template built, over all i find dreamweaver pretty hard to design on, however when i sit long enough and practice i gets easier. 



Finally the website came together, i think without a wire frame a designing a website would be virtually impossible for me. 


Screen shot of homepage built. 



Preview in google chrome:



No comments:

Post a Comment