There are several ways to layout your website design in Dreamweaver. Hopefully you start with some sketches, either on paper or in a design app. There are design applications that are specific for making website designs, as well as working within existing applications like Photoshop and Illustrator.
Some common ways that I’ve seen people layout their websites in Dreamweaver include:
- Tables
- Tracing Images
- Layers
- Divs
Tables
Tables should not be used for laying out the design of your website.
Not only is it an older technique, we’ve learned that tables take more time to layout and are harder to update. They also tend to make the website larger in size to download, which could mean slower download times.
Tracing Image
A tracing image can be loaded into the background to use as a reference for layout features. Only good for layout as the background image does not show on regular page
- Go to Page Properties
- Select the Tracing Image category
- Choose your tracing image
- Adjust transparency to suit
Layers
A layer is a Dreamweaver special div for positioning elements. It is absolutely positioned on the screen based upon where you draw it.
- Allow you to “draw” your areas of information
- The position does not get updated if used in Templates
- I do not recommend using, unless you specifically know the size of your layout, and are sure it will not change.
- What is difference between layers and divs? The name, and how Dreamweaver treats them
Layout Guidelines
Here are some basic ideas that will get you started on laying out your website’s design
- Get some basic ideas of what you want before you start
- Use those ideas to sketch out some designs
- Apply colors to your designs to match branding and themes
- Create generic box layout to know what elements you will need to add
Ways to Layout Your Website in Dreamweaver was originally found on Access 2 Learn
