Learn how to design a web site with Macromedia Fireworks

Welcome to our tutorial on Fireworks. Here we help you to learn how to design and visualize the sample web site found on the right using Fireworks. Macromedia Fireworks is the best tool to use for designing and visualizing a professional web site. You can study very easily and will see just how easy it is to design a web site in Fireworks. Fireworks help you design and visualize your web site and you need to convert your site to html and optimize the web site using Dreamweaver or some other software. Here are the steps for designing a website.

1. First you should define your required canvas size and color. Open Fireworks and click on File>New. A new document window will be launched in Fireworks. Here you can give the size of canvas say the width as 780 pixels, height as 600 pixels and the canvas color.
   
2. Now there is a blank canvas. In order to give a basic structure to the site click on the rounded square found on the toolbar in the left and then click on the little arrow found at the bottom of the square tool to get the other options. Then make a big rectangle across the screen. By adjusting the roundness in the object panel you can adjust the rounded corner. Select the rectangle and give suitable colour. Now you will get a basic structure of the site. This is a simple and effective way of defining the structure of a site and the content will come inside this box.

   Select the rounded square tool from the toolbar, you click on the little arrow found at the bottom of the square tool to get the options.Then make a big rectangle across the screen as seen in the sample If you want you can adjust the rounded corner by adjusting the roundness in the object panel (If the object panel is not opened, click on Window> Object to open the panel). Then Select the rectangle and make the stroke colorand the fill color white This is a simple way of structuring a site. You can fill the content inside this box. Select 'A' tool from toolbar. Then you'll get a text pop-up window where you can specify the font type, size and color. Enter your content and click on OK. Same way give a title to your web site. Title can be bold font and big size. And it should stand out properly. Also you can add a slogan below to your title. This can be smaller size.

 

3. Next is to fill in some content. Click the A tool. Then click   the canvas you'll get a text pop-up window where you can specify the font type, size and color. Type your content and click on OK. The size of the text can be adjusted. Give a title for website with a bold font and keep the size relatively high.



 

 

4. For making the website visually appealing and more interesting add a few pictures to your web site. One of the best tip is that give only less number of pictures. Otherwise it takes lot of time to load the webpage. In fireworks the Paste Inside tool helps in making interesting graphics. You can import the image by clicking on File>Import, navigate to the folder which has the image and select the picture. Click within the canvas for the picture to be imported. Once the picture is imported place it over the circle you have just drawn. Next, choose the picture and click on Edit>Cut. Then, choose the circle and click on Edit>Paste Inside. To add an effect to the picture, click Window>Effect.

5. For the navigation of this site we will be using simple buttons. Use the rounded square tool to make the navigation buttons. Give some required roundness and colour and the Stroke is none. For embossing the button, go to your Effect panel click on Bevel and Emboss>Inset Emboss. You can align different buttons by clicking Modify>Align>Distribute Heights. This will space the buttons equally. Write the name of the links on each of the buttons by clicking on the A tool

Now you have completed the fireworks web design tutorial with the very simple five steps.