Lets talk WEB design…
Enough school event stuff for now. Today I want to talk about CSS and Firefox’s Web Developer Ad-On.
Many of you out there probably know some HTML and CSS, but we all look at some amazing websites and wonder how these designers are doing it. Thanks to open-source coding and other tools, we can all get a better understanding for how some designers pull off some really awesome effects with CSS.
One of the tools I like to use to look at websites from a designer’s stand point is
Firefox’s Web Developer Ad-On
Click on this link and search for “web developer” and it should pop right up.
This Ad-On has many, many features, so I will share some of them with you.
1. In the Information tab you can display the div order, which is a really handy thing to be able to see how other designers are setting up their div tags. It is also useful because you can usually tell which divs are absolutely positioned and which are not.
2. In the CSS tab, you can actually view the CSS code. If someone has a cool effect, you can see how they did it using the code. **NOTE** Please do not just go ripping off people’s code, if they have something really great, give them credit, or ask if you can use their code.**
3. In the Miscellaneous tab you can clear all your private data without having to go into the menu of the web browser. Very handy when uploading pages and your cache needs to be deleted.
4. In the tools tab you can validate your code, which is handy.
5. You can also view source right from the toolbar which is also very convenient.
These are just a few of my favorite features of this Ad-On. I like to use them in combination to figure out how other designers design their web pages. For example, my favorite technique is to view the div order, then right click on an area and view the background image. This will allow you to view the background of whatever div you are over. The importance of this is that you can see how the image was sliced up and how it was arranged in the different divs. After a few hours of this technique you will get a better understanding for how other designers are using CSS and divs to do awesome layouts.
Give it a try, I hope this blog was helpful.
check out The Art Center Design College