HTML/ CSS – Fireworks CS5

This entry is part 14 of 14 in the series Fireworks CS5 Tutorial

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.

Web Design Tutorials

HTML/ CSS – Fireworks CS5

Fireworks CS5 Tutorial

Post a Comment