Using CSS to convert your graphic design from Fireworks/Photoshop into a full-blown web page is an art in its own right. It takes some time to master that craft but you can achieve clean CSS layouts with a lots of practice or quickly learn the tricks-of-the-trade from an expert.
Not matter how intricate a web page design seems to be, you can “move it” from the graphic application to your favorite HTML editor (HTML, CSS) by following simple steps. That helps you get a clean HTML markup, well structured CSS styles and overall, an easy to maintain website.
Before you start working in Photoshop/Fireworks I assume you took the time to plan your design. You do some research to help you decide what design style is best suited for your new web site. Break down your website into individual pages to define o your site structure. You then create wireframes to illustrate the your web pages’ layout. Don’t just keep all that information in your head: put it in “black & white” on a pad then sketch out the layout.
Any important project needs planning before you roll up your sleeves and start digging and web site design is no exception. If you skip those preliminary preparation steps then you are in for a big trouble, in other words, waste of time and poor results.
When converting a graphic design into a CSS layout:
- Look at the big picture. The primary goal is to have one CSS layout template for your entire website
- Look at your design in terms of wireframes to isolate the main layout blocks/rectangles
- Once you have those main containers, preview your design in all major web browsers
- Repeat step 2 and 3 when adding content to each main block.
When followed properly those 4 steps will help you:
- quickly achieve your CSS layout
- avoid unnecessary nested of HTML tags
- keep your HTML markup clean and easy to update
Just knowing CSS properties, learning how to create CSS styles is not enough to design well-crafted CSS layout.
Learn more about our Online CSS Training to get all the tips and tricks-of-the-trade.