As reference, I looked through chapter 3 of Bulletproof Web Design 2nd edition to achieve the final outcome. In the book it talks about various types of ways to use EM's and elastic ways to make a website work on any browser, luckily, I was already looking into this type of information on Matthew James Taylor's website:
http://matthewjamestaylor.com/
The combination of the em's I learned about in a blog posted earlier this week and the flexible website learned from the link above and the book made this experience very good. So on to the work.
Lets start by looking at the original code...now there is a lot of code so I will only post some of it so you can get an idea what it looks like...if you would like to take a look at all the code, check out the source code here:
http://casabasa.com/web/mm2213_wk1.html
Some code from a screen shot:
I started out by looking through all the code and comparing it to what the website looked like. Since there was no notes through all the HTML I started out by commenting where things started and ended; something like this:
It is always a good idea to comment where you think things go so that way you can find it easy when you are re-working the website later on for updates.
Once that was all finished and cleaned up it looked like this:
screen shot of new HTML
http://kgphojo.aisites.com/web_based_programing/week3/
Have you noticed how clean and easy it is now to look at? Now, after I was finished with that, I created DIV's and thought over where I would like the navigation to go and how I want to lay it out. I started to give each DIV its ID or Class with a name as needed to be called by the CSS. Once I figured all that out I placed the website in places as needed. Check out the final outcome.
Final Outcome
No comments:
Post a Comment