Client LoginView your Shopping CartHelp & Frequently Asked QuestionsEmail Us
Home Services Portfolio Web Design Pricing Dreamweaver Templates Web Applications Free Tutorials About Contact Us
Services > CSS Web Design | Professional Logo Design | ASP.net, ASP & PHP Programming | Flash Animation & Programming | Reliable Web Hosting | Website Maintenance
Portfolio > Web Design Portfolio | Web Programming Portfolio | Logo Design Portfolio | Web Design Pricing > Custom Web Design | Logo Design | Business Card Design
Web Design Guide > Website Design w/ Dreamweaver & Fireworks | Fireworks CS4 Cool Features | Photo Effects | Text Effects | Graphic Design Ideas | Web Design Ideas
Website Navigation Ideas | CSS Styles Tutorial | Dreamweaver Template | Server Side Includes | Flash Tutorials > Flash Effects | Flash Sound Button | Sound On/Off Button
Flash Preloader | Import External Data | Promotion > SEO Tips | Google Tips & Page Rank | JavaScript > Date Validation | Email Validation | Phone Validation | Tip Boxes

Website Design with Dreamweaver & Fireworks

Free CSS web design guide to design and build your own website

Learn how to easily design a professional website using Fireworks and then build it into a CSS website using Dreamweaver. The cool CSS website we are going to create step-by-step is shown below:

CSS website design with Dreamweaver and Adobe Fireworks

For novices out there, Fireworks 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. Dreamweaver is the web authoring tool (HTML editor) we would be using to build our website's design template from the images exported from Fireworks (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 (Macromedia Fireworks prior to version 8) and Adobe Dreamweaver (Macromedia Dreamweaver prior to version 8). Since this tutorial series covers the core functions of using Fireworks and Dreamweaver to create a website, using mostly any version of these software should be fine. If you are using the CS4 version of these software please read the upgraded version of this free web design guide - Website Design with Adobe Dreamweaver CS4 and Adobe Fireworks CS4.

All Fireworks screenshot images in this tutorial are valid for Fireworks CS3
All Fireworks screenshot images in this tutorial are valid for Fireworks 8

Compatible Versions of Fireworks for this Tutorial

Fireworks MX | Fireworks MX 2004 | Fireworks 8 | Fireworks CS3
Note: Instructions remain same across all versions listed above, though some visual interface images may differ. Fireworks CS4 users: Read the CS4 version of our free CSS web design guide - Website Design with Dreamweaver CS4 & Fireworks CS4.

All Dreamweaver screenshot images in this tutorial are valid for Dreamweaver CS3
All Dreamweaver screenshot images in this tutorial are valid for Dreamweaver 8

Compatible Versions of Dreamweaver for this Tutorial

Dreamweaver MX | Dreamweaver MX 2004 | Dreamweaver 8 | Dreamweaver CS3
Note: Instructions remain same across all versions listed above, though some visual interface images may differ. Dreamweaver CS4 users: Read the CS4 version of our free CSS web design guide - Website Design with Dreamweaver CS4 & Fireworks CS4.

Prerequisite Knowledge

This tutorial series teaches you how to create a full fledged website using Fireworks and Dreamweaver and thus assumes you are familiar with some design software and HTML editor, even if you are new to Fireworks and/or Dreamweaver. 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 & Dreamweaver Website Design Steps


This free CSS website design guide teaches layout design with Fireworks and CSS/XHTML website conversion with Dreamweaver. Learn CSS Web Design by following these simple steps:

Now Lets get you started on your website design!
Continue to Step 1: Designing the website's layout with Fireworks

We would love to hear your comments and any suggestions on future tutorials we can add to this section. Thanks!

Fill the below form to submit your comments (or suggestions):
Bookmark and Share this web page.
Sponsored Link(s):
Beauty Templates | Business Templates | Christian Templates | CSS Templates | Education Templates | Family Templates | Flash Templates | Free Dreamweaver Templates
Food Templates | General Templates | Government Templates | Health/Medical Templates | Hi-Tech Templates | Kids/Childcare Templates | Low-cost Budget Templates
Personal Templates | Pets Templates | Photography Templates | Profession Templates | Real Estate Templates | Sports Templates | Telecom Templates | Travel Templates
Free Tutorials > Web Design Tutorials | CSS Web Design | Fireworks Tutorials | Dreamweaver Tutorials | Flash Tutorials | SEO Tutorials | Javascript Tutorials | PHP Tutorials