Create a Website

Learn to create web-sites

Wondering how to create a website using Adobe Creative Suite? You've come to the right place. Learn to easily design a website using Adobe Fireworks and build it into a CSS website using Adobe Dreamweaver. The cool website we are going to create step-by-step is shown below:

Beginner's Note: Adobe Fireworks is the rapid 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 is the web authoring tool (HTML editor) we would be using to:

Create our website's template from the images exported from Adobe Fireworks. The template or common structure for the website is called a Dreamweaver Template and is saved as a .DWT file.
Build the final website by creating the web pages from the Dreamweaver template and linking them together.

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 and/or Adobe 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.

Software Required

Adobe Fireworks CS4+ and Adobe Dreamweaver CS4+. If you are using a lower version of these software please read the CS3 or below version of this web design tutorial series - How to make a website.

Compatible Versions of Dreamweaver and Fireworks for this Tutorial

Dreamweaver CS4 | Dreamweaver CS5/CS5.5
and Fireworks CS4 | Fireworks CS5/CS5.5
Note: For lower versions of Dreamweaver and Fireworks, screenshot images may differ. Please read the CS3 & below version of this web design tutorial series - How to make a Website. Recommended Versions: Dreamweaver CS5.5 and Fireworks CS5.5

Website Design Basics

If you are a beginner-to-intermediate level designer we recommend you read our articles on Design Concepts and Design Basics first.

Without hindering a website's usability (simple and quick access to information, services or products), a web designer's ultimate aim for a website's design is to reach the optimal balance between its attractiveness (targeted look-and-feel with necessary design effects), load time considerations (optimizing design elements for reasonable web page size) and user friendliness (easy-to-use navigation and user interactions plus well laid-out easily readable content) - without entirely compromising on either of them. On the programming front, no compromise must be made in building a well coded and error free website that ensures a uniform user experience - web standards compliant (W3C valid XHTML/HTML and CSS), accessible and cross browser compatible. Please read our design concepts article.

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 structure (layout and navigation), 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

Steps to Design a Website

Lets now look at the various steps we will be taking to design and build the sample website.

Web Site Design with Dreamweaver CS5 & Fireworks CS5 (or CS4 versions)

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