When creating your web site, it is important to create a site that flows in a way that helps to get your message across to your viewer. You have to create something eye-catching, but well designed. Having a solid structure is key. To me CSS is the only way to go for a consistent layout and structure. There are so many tricks and tools out there to help you along the way. Some of them may seem arbitrary, but some of them are actually helpful time savers.
Personally, I work on a laptop, and I absolutely hate to flip back and forth between a bunch of windows. Some people may disagree, but I love Dreamweaver. It just works so well, and I am so used to the interface and the functions. I have attuned myself to be able to work quickly and efficiently inside of Dreamweaver. There is a plethora of time-saving tools built right in. If you know how to set your site up properly, you can build custom rollovers quickly and efficiently, or you can download plug-ins that will create smooth image galleries with just a few button strokes. If you are new to web design, Dreamweaver can take a lot of the coding out of it for you. Don’t get me wrong, it is the best when you learn the code, but when you are starting out, it is nice to see how something looks in a browser, and see how changes in html or CSS coding affects your design. This is a great way to learn while getting your feet wet.
Photoshop is a great way to set up your imagery, but another lesser mentioned tool is Fireworks. Fireworks is great to use for optimizing your images. You can also use a feature called stages that helps you to make some really interesting rollover effects that appear to be fairly consistent across all browsers. Anything that you are comfortable with creating in Photoshop can easily be brought into Fireworks, sliced up and made into pieces of your web site. Fireworks will allow you to set the image to a few constraints that Photoshop won’t do, such as PNG-32. Photoshop will only do PNG-24.
CSS
CSS is of huge importance these days, because it affects the entire structure of your site. It handles how the content flows and it ensures the most amount of consistency across most browsers. Internet explorer is sort of a rogue on this one, because some things that work on Safari and Mozilla Firefox do not appear at all in Internet Explorer. A key thing to remember when designing your site is to create your site so that if something doesn’t display, you don’t lose crucial information. For example, putting a shadow on text should be for effect, but you should make the background a color of shade that still makes the text readable without the shadow effect.
A handy tool that I have come across are grid generators, such as the Variable Grid System found here by SprySoft. With their site, you can go there, type in the full width of your site (the default is set to 960 but you can change it), and the width of the content. Then, you can decide on the number of columns and how much space will be in between each column, called the gutter width. Then, with your settings made, you can have the site generate a CSS file with this structure.
Another really cool visual tool is the 960 Grid System. The site is http://960.gs This site is really cool because it lets you set up the number of columns that you want and how wide to made your div tags. This is a really handy feature when you know the side of your site, and you need a grid system that will quickly and easily fit your custom size. It even generates the code for you, which is just too cool. For new learners, it also takes different site designs and overlays the grid on top of it that was used to make the site structure. You can also download a grid overlay for any type of image editor out there, making it easy for you to create a killer design and implement a solid structure using a grid.
Grids come in handy, because they help you to organize elements so that they flow well together or are separated from one another. For example, if you have a lot of smaller tidbits of information, then you might use a 16 column grid with 4 columns of 4. If you have a few main points and you use a 24 column grid, you can divide your content into 2 columns of 11 or 12 depending on how much space you wanted in between elements. The alignment also creates a cleaner design, and makes your content look more organized.
When it comes right down to it, you don’t have to have anything special to create a decent web site. I know many designers that create their code in a text editor program and create fantastic sites. The point of this article was to go over some of the tools out there to make laying out your site much easier.
