Website Design

• Web Design Tutorial Series
  • How to make a Website

    Website Design with Dreamweaver & Fireworks

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

    

    If you are using the CS4 or CS5 version of these software please read the upgraded version of this website design tutorial series - Website Design with Dreamweaver CS5 and Fireworks CS5.

    For novices out there, 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. Dreamweaver is the web authoring tool (HTML editor) we would be using to build our website's template from the images exported from Fireworks (called a Dreamweaver Template - .DWT file) and complete the website by creating the web pages from this template and linking them together.

    Prerequisite Knowledge

    This tutorial series teaches you how to create a full fledged website using Fireworks and Dreamweaver and thus assumes you have at least played around with some design software and/or HTML editor (beginner level will do), 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 total beginner would be able to follow our instructions.

    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.

    Compatible Versions of Dreamweaver and Fireworks for this Tutorial

    Dreamweaver 4-8 | Dreamweaver CS3
    and Fireworks 4-8 | Fireworks CS3
    Note: The instructions in this tutorial are same across all versions listed above; Screenshot images may differ. Adobe CS4/CS5 users: Read the CS4 & CS5 version of this web design tutorial series - Design a Website. Recommended Versions: Dreamweaver CS5.5 and Fireworks CS5.5

    Before you Design

    If you are a beginner-to-intermediate level designer we recommend you read our articles on How to build an Effective Website and Design Guidelines first.

    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 and without hindering a website's usability (simple and quick access to information, services or products). 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 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

    How to Make a Website Steps

    The steps we are going to follow to design and build the smart sample website are given below.

    Website Design with Dreamweaver & Fireworks

    
    This 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:
    

    1. Introduction: How to make a Website
    2. Layout Design: Designing the website's layout with Fireworks
       1. Designing the website's header and footer
       2. Designing the website's background and navigation
       3. Placing photos and content into the website's design
    3. Export Images: Slicing and Exporting the website images with Fireworks
    4. Dreamweaver Site: Setting up the website in Dreamweaver
    5. CSS Tutorial: CSS and XHTML website programming with Dreamweaver
    6. CSS Styles: Formatting the web pages using CSS style sheets in Dreamweaver

    Now Lets get you started on your website design!
    Continue to Step 2: Designing your website layout with Fireworks

    Related Links :: Design Concept | Website Designing | Best Design Software
    Design a Website | Website Header | Website Background
    Website Navigation Tips | Web Design Tips | Design Ideas

Please like, +1, link to and share this SmartWebby resource if you found it helpful. Thanks for your encouragement!