Design your own web templates using Macromedia Fireworks in just 15 minutes

Related Articles

Step 1: The Open Macromedia Fireworks, Set the Image Size to 779-width 400-Height for monitor 800 X 600 resolution web page, for 1024 X 768 resolution set the image size as 800-Width 600 - Height. Let the background color of the page be White.

New document

Step 2: Type the Text such as "Spearhead" and "Web template" using Text tool as shown in Figure 2.

Text tool

Type text

Step 3: Select Rectangle tool from the toolbox, select dark grey color and draw a rectangle as shown in Fig 3.

Rectangle tool

Select color

Draw rectangle

Step 4: Draw small Round rectangles as shown in the Figure 4. (To select Round Rectangle, By pressing the Rectangle tool in the Toolbox, move right the toolbox will opt you other shapes. Select the shape).

Draw rectangles

Step 5: Now Copy the same round rectangle and paste it as shown in Figure 5.

Copy and paste rectangle

Step 6: Select Text tool from the toolbox and type text like "Home", "About us", "Contact Us", "Services". Set the Color of the font "White". This is as shown in the Figure 6.

Select text tool

Step 7: Draw a round rectangle with fill color white and border line color as light grey. As shown in the Figure 7.

Draw rectangle

Step 8: Select the Normal rectangle tool from Toolbox, set the line color and fill color to white Draw the rectangle above the Round rectangle as shown in figure 8 . The rectangle is drawn in such a way that top and bottom edges alone should be left out.

Select normal rectangle

Step 9: Select the same dark gray color again as the fill color and draw a simple at the bottom of the Image as shown in the Figure 9.

Select dark gray

Step 10: Draw Small Round Rectangle as shown in the Figure 10.

Draw rectangle

Step11. Select the text tool and change the color to the green similar to the color in "Web Template" text. Type the name of the links required line by line as shown in the figure11.

Select text tool

Step 12: The last step is to slice the entire image into pieces and exporting as a webpage. The process of slicing is shown below.

Slice image

Step 13: To slice the entire image, select the Slice tool from the Toolbox, Drag and slice the images. If you need place text content you can select the sliced portion and change the type option in the Object toolbox( you can select the Object toolbox from the window menu->Object). set the type to Text instead of image.

Step 14: After slicing, select File Menu -> Export -> from the "Save as Type " option select HTML and Images, Check the put image into Subfolders. and provide the name of the file as default. Click save. Now you have designed a simple and professional layout just in minutes. open the Default.htm file using Dreamweaver or front page, type the content in the text area and your web
page is ready now.

Save as type


Publication Date: Wednesday 30th June, 2004
Author: U.swaroop View profile

Related Articles