HTML/ CSS  webpages can be created with Fireworks CS5.

• Click here to see the HTML/ CSS web page we will create with Fireworks CS4
• Download the Fireworks File used to create the above HTML/ CSS webpage and images
  If the .png file (Fireworks source file) opens in your browser you can ’save as’ on your computer.

To use this feature, the layout must not have any overlapping elements. Imagine each element as a rectangle, none of these rectangles should overlap.

We will tweak our layout a bit to get it ready for export. The drop down menu will not work when we export it to create a css based webpage.

We will need to create a rectangle around the entire content area. See the red rectangle below.

We can then make this rectangle white so that it is not visible. It now looks like this

If the text has different styles, each will have to be in a separate text field. If we want to retain the space between the menu items, each menu item needs to be in a separate text field too.

The logo and photo have been sliced. The main menu items have been sliced too as they use a font that most people will not have on their computer.

We have kept the masthead simple by removing the gradient and replacing it with a flat color.

Now we are ready to export the HTML, CSS and images.

• Select ‘File’ from the main menu
• Select ‘Export’

In the window that appears:

• Select where you want to export the files 
• Specify Export : CSS and Images (.htm)
• Tick the checkbox against ‘put images in subfolder’ 

• Click the ‘Save’ button
• Your webpage is ready

If you browse to the folder you specified you will find:

• An images folder with the images
• The css file
• The HTML file

You can upload these files to your hosting server (like Hostgator, which we use to host this site) and make your webpage live.

See the HTML/ CSS web page

Download (Save As) the Fireworks File

Let us learn how to create a drop down menu in Fireworks CS5.

• Drop down menu Preview
• Fireworks Source File (Save As on your computer)

In a webpage, when we rollover the services we will see 3 more options. It will look like this:

To create a drop down menu in Fireworks CS5, follow these steps:

• Create a slice for ‘Services’
  
• Right click on the slice and select ‘Add Pop-up Menu’
• Click on the ‘+’ sign in the pop-up-menu editor to add the required number of sub menu options.
  
• Type the name of each submenu option
  
• Specify the appearance – colors, fonts etc.
  
• Specify whether you want borders or not
  
• Specify the position of the menu
  
• Click the ‘Done’ button
• It will look like this:
  
• You can drag the box with the 3 submenu items to align it the way you want.

Test the drop down menu

• Select ‘File’ from the main menu
• Select ‘Preview in Browser’
•  Select the browser of your choice to see how it will look in the browser.

Drop down menu Preview

Fireworks Source File (Save As on your computer)

It is time to slice up the layout for the web now that it is ready.

Slicing is a process where we decide which parts of the layout need to stay as images and which parts could be recreated in HTML. The more the images the more the file size and so more the the loading time.

Some images that will need to be sliced are:

• Logo
• Photos
• Background gradients

If we decide that something needs to remain an image in our final web page we need to decide which format will suit it best (i.e. gif, jpg, png). We need to optimize these images to load quickly on the web (smaller files size) and look good at the same time.

Some points to keep in mind while optimizing images are:

• Images with flat colors will be best optimized as .gif files. Gif files also allow transparency. Gif files can also be animated.
• Images with many colors e.g. photos, will be better optimized as .jpg files.
• .png files can retain vector information and  transparency

This is what our layout looks like now:

Let us first slice the logo. To do this follow these steps:

• Select the slice tool
• Create a rectangle around the logo
• You have now created a slice
• You will be able to see a green tansparent rectangle over the logo.
• You will also notice a new layer in the Web layer in the Layers panel, called ’slice’. Rename this to ‘logo’.
  
• You will notice that the name on the slice will also become ‘logo’
  
• Now optimize the slice by selecting ‘JPEG – Better Quality’ from the ‘Properties’ panel.
  
• Export this slice by right clicking on it and selecting ‘Export Selected Slice’.
  

Similarly slice and export the photo and a thin slice of the header background gradient.

You can optimize the slices by comparing the quality and file size with various options by using the 2-up and 4-up previe tool.

You can also export all the sliced images together by:

• From the main menu select ‘File’
• Select ‘Export’

In the window that opens, select:

• Export: Images Only
• Slices: Export Slices

Now you have all the images you need to begin creating your webpage using an HTML editor.

Fireworks Source File (Save As onto your computer)

Now let’s insert the texual content into your layout and create the text styles in Fireworks CS5.

To quickly add some sample text, follow these steps:

• From the main menu select ‘Commands’
• Select Text’
• Select ‘Lorem ipsum’

Resize the text field to fit into your layout. Select the font, font size, colors etc in the Properties panel.

Keep in mind that in your final web page this text will be HTML text and not an image. Choose fonts that are available on all computers and are easy to read on a computer screen e.g Arial and Verdana.

If you plan on creating your HTML web page and CSS style from within Fireworks you can define the styles of your Heading tags (H1, H2, H3 etc.).

This can be done from the ‘Common Library’ panel > HTML folder. Drag the required heading (e.g Heading 1) onto the canvas.

Then open the ‘Symbol Properties’ panel to change the color, font, size etc.

Finally when you export your HTML page and CSS styles, the heading tags will also be redefined. Similarly you can style other HTML elements like links, buttons and other form elements.

Now let us insert an image into the layout. You can find a good choice of low cost and free stock images.

To insert an image in Fireworks, follow these steps:

• Got to ‘File’ in the Main menu
• Select ‘Import’
• Select the image file
• The cursor will change
• Click where you want the top left corner of the image to appear, then drag and click where you want the bottom right corner to appear.
• The image will resize and appear in the specified area.

Resizing an image in Fireworks

You can make the image still smaller by using the scale tool.

• Select the image
• Click on the scale tool. Handles will appear on the corners and sides of the image.
• Drag a corner handle of the image (pressing the shift key to resize proportionately).

It is now time to create the menu in Fireworks.

First let us create the main menu area, using the rectangle shape tool. Let us make a black rectangle. In case it is getting filled with a gradient, you may need to select ’solid’ instead of ‘linear’ from the drop down next to the fill color, in the Properties panel.

Your layout will look like this:

Using the text tool with a yellow color create the menu items:

• HOME
• ABOUT US
• SERVICES
• CONTACT US

It will look like this:

Similarly create the footer area with the copyright information and the footer menu.

You can easily add special characters like the copyright symbol from the Special Characters panel (next to the properties panel).

Fireworks is the best web design graphics software. It is easy to use and allows you to work with both rasterized images(like photos etc.)  as well as vector images (that can be resized without losing their quality).

It is a great tool to help you create website layouts, banner ads, specific graphics to use on the web, vector shapes, animated gifs and a lot more.

You can even create drop down menus for your webpage and actually export your layout design as a web page with editable text in HTML.

Fireworks really helps with optimizing the images you use on your website to create images that are small in file size yet look good.

Download a trial version of Fireworks

Now that we have our logo ready, it is time to create the masthead design for the header area of our layout.

Let us choose the Rectangle tool and create a large rectangle across the entire width of the document, towards the top.

The rectangle will hide the logo.

This is because it is created on new layer on top of the logo layer. You will be able to see this in the Layers Panel.

If you are unable to see the Layers Panel on the right side of your screen, you may need to select Window > Layers to view it.

 The higher the layer, it comes closer to the front. The lower the layer, it goes further behind.

To get the logo in front we just need to drag the header rectangle layer and drop it below the logo layer so it looks like this:

The logo will be visible now if we change the masthead color to a contrasting color.

We can use a gradient fill too:

Select the rectangle

In the Properties Inspector, click on the drop down next to the fill color.

Now select ‘Gradient’, then ‘Linear’

The rectangle will be filled with a gradient between the fill and stoke color.

To change the gradient colors, click on the tiny triangle below the fill color in the Properties Inspector,

Click on the start marker (shown below) and select the color from the color palette that opens up.

Similarly you can chnage the end color as well.

You will get something like this:

Let’s begin by creating a logo. We will learn how to use the vector tools as well as the Text tool during this process. We will also learn how to use the color selection tool.

Clicking on the arrow below the rectangle tool you will find many premade shapes which you can use.

You can experiment with the various shapes and create a logo.

However for the purpose of this tutorial, we will use the Pen tool to create a shape like given below. Simply click at the different points and finally double click to join the two ends.

Making sure that the shape is still selected, select the fill color (color inside the shape) and stroke color (outline color) of your choice by clicking in the color selection box and then selecting the required color from the color palette that pops up (see below).

We now have a colored shape which looks like this:

Now let’s use the Text tool to create the logo text.

• Click on the Text tool
• Click next the logo shape where you want the text
• Start typing your logo name

You will get something like this:

Now using the Properties Inspector, adjust the text font, size, fill color, stroke color etc.

You will get something like this:

For the purposes of this tutorial, we will consider that our logo has been designed, however you can continue to try out the various vector tools to create a logo that you are happy with.

You can experiment with the vector path tool as well to get smooth curves. If you have a byline, you can use the text tool to type it as well. You might some ideas from these logo design templates.

Using the pointer tool, select all the shapes and text together by drawing an outline around them and group them [ From the main menu select Modify > Group].

Now you can move the logo around easily without worrying about the different parts getting separated.

While creating the website layout design you will need to plan the layout of various elements of your website. Typically these are:

• Header area – will usually contain the logo, header graphic/ design
• Logo
• Main Menu area – Main menu links
• Sidebar – submenu links and other sidebar content
• Content area – Actual page content
• Footer – Copyright information and links