Website Design with Dreamweaver CS4 & Fireworks CS4
Free CSS web design guide to create websites using Adobe CS4 software
Learn how to easily design a professional website using Adobe Fireworks CS4 and then build it into a CSS website using Adobe Dreamweaver CS4. The cool CSS website we are going to create step-by-step is shown below:

For novices out there, Adobe Fireworks CS4 is the graphic/web design application we would be using to design the website's visual interface and to prepare images for the web site from it. Adobe Dreamweaver CS4 is the web authoring tool (HTML editor) we would be using to build our website's design template from the images exported from Fireworks CS4 (called a Dreamweaver Template - .DWT file), upto completion of the website by creating the web pages from this template and linking them together.
Software Required
Adobe Fireworks CS4 and Adobe Dreamweaver CS4. If you are using another version of these software please read the CS3 or below version of this free web design guide - Website Design with Dreamweaver and Fireworks.
Compatible Versions of Fireworks for this Tutorial
Fireworks CS4Note: For uses of lower versions of Fireworks some visual interface images would differ. Please read the CS3 and below version of our free web design guide - Website Design with Dreamweaver & Fireworks.
Compatible Versions of Dreamweaver for this Tutorial
Dreamweaver CS4Note: For uses of lower versions of Dreamweaver some visual interface images would differ. Please read the CS3 and below version of our free web design guide - Website Design with Dreamweaver & Fireworks.
Prerequisite Knowledge
This tutorial series teaches you how to create a full fledged website using Adobe Fireworks CS4 and Adobe Dreamweaver CS4 and thus assumes you are familiar with some design software and HTML editor, even if you are new to Adobe Fireworks CS4 and/or Adobe Dreamweaver CS4. Knowing how websites work and having some knowledge of XHTML and CSS programming, will be an added advantage and should make your task easier. However we have ensured that even a beginner would be able to follow our instructions.
Before you Design
A web designer's ultimate aim for a website's design is to achieve a balance between its attractiveness (targetted look-and-feel with necessary design effects), load time considerations (optimizing design elements for website size) and user friendliness (easy-to-use navigation and well laid-out easily readable content) - without entirely compromising on either of them. Between the extremes of making bare designs with cluttered content and hard-to-navigate complex designs, a professional web designer needs to learn to expertly create a web design that is impressive, cohesive, well laid out, fast-loading and easy to use. On the programming front, no compromise must be made in creating a well coded and error free website that ensures a uniform user experience - web standards compliant (valid XHTML/CSS), accessible and cross browser compatible.
Before designing a web site the designer needs to be fully aware of what type of website he/she is going to design. Unless you have some clear goals in mind it would be difficult for you to start off on the actual design. A good way to get started on your website is to decide on the layout structure, colors and overall theme beforehand. We started with the idea of needing a sophisticated design with a simple layout and the following color scheme:
Color Palette - Purple & Pink Passion
#CC3366#56003D#FF99CC#DA89BE#F7BBE3#B32D58#FF9999
Fireworks CS4 & Dreamweaver CS4 Website Design Steps
This free CSS website design guide teaches layout design with Adobe Fireworks CS4 and CSS/XHTML website conversion with Adobe Dreamweaver CS4. Learn CSS Web Design by following these simple steps:
- Layout Design : Design your website layout with Adobe Fireworks CS4
- Export Images : Slice and Export your website images with Adobe Fireworks CS4
- Dreamweaver Site : Set-up your website in Adobe Dreamweaver CS4
- CSS Tutorial : CSS & XHTML Programming to build your website with Adobe Dreamweaver CS4
- CSS Styles : Format your web site text using CSS style sheets in Adobe Dreamweaver CS4
Now Lets get you started on your website design!
Continue to Step 1: Design your website layout with Adobe Fireworks CS4