Design a Homepage in Fireworks

The above is the homepage of our original "Passy World" website.
It was built from a template design that came with Adobe Dreamweaver CS3.
These days it is looking a bit old and tired. It's definitely time for a makeover.

We have decided to create a Homepage that is completely visual with very little text. It will merely contain some rollover links to take visitors to the subpages.

Adobe Fireworks is great for working with images and designing web pages. Using Fireworks we can then export our design out into some executable HTML. We can then see how our page will display in various browsers (such as Internet Explorer, Firefox, and Safari).

Note that although this Blog post is about using Fireworks to Design a Homepage, we could easily do the same thing using Adobe Photoshop, or any other of several image processing applications.

Here is the completed new design for our "Passy World" Homepage:



The following PDF document explains step by step how to design a Homepage using Adobe CS3 Fireworks.

If you would like to have your own full size copy of this PDF, then simply click the save disk icon button on the PDF viewer, and you should be able to save it to your own hard disk.

Alternatively, you can view or save the full size PDF by clicking the link below:

Click here to open or save the “Make a Webpage” PDF

"Passy World" is an entirely separate website to "Passy's World of ICT".

These days we do all our work on PW of ICT, and only use the old "Passy World" site as an online storage bin for all of our PDF documents, Powerpoints, Flash SWFs, etc. We then link to these PW files when we do blog posts on PW of ICT.

However, we have decided to do some work on the old "Passy World" site, to make it a proper site where we can feature our favorite pictures, music, and flash games.

The next step is to take the background image of our newly designed homepage in Fireworks, export it to HTML, and then use Adobe Dreamweaver to create a fully functional webpage. This will be covered in an upcoming blog post.


DON'T FORGET TO DO OUR ONE CLICK SURVEY AT THE TOP RIGHT HAND CORNER OF THIS WEB PAGE. JUST CLICK ONE OPTION IN, AND THEN CLICK THE "VOTE" BUTTON.

Enjoy,
Big Passy Wasabi

Adobe CS3 Fireworks Layers

The above picture was made in CS3 Fireworks from a picture of a Robot Sandcastle, and a separate picture of some blue sky with clouds. The pictures were placed on separate layers, and then preset filters and styles were used to create the chrome effect.

CS3 Fireworks is great to use as the first Adobe Product that students learn, because it has bitmap tools for photos, and vector tools for doing artwork. It is much simpler than Photoshop and Illustrator, but can still produce some amazing graphic art.

Where I work, we do Fireworks with Year 7 beginner students and then do Photoshop and Illustrator with them from Year 10 onwards. We are very fortunate in that our school has the entire Adobe CS3 Master Collection, so we try to use as many of the applications as we can with our students.

The following instructions and resources are from the first "Layers" lesson that I do with beginner students, and the finished item they make is the following picture:




If you would like to download a 12MB .rar file of instructions and resources, then click here: Fireworks Layers Resources

Here are the instructions for making the "Robot Island in the Sky:"

If you would like to have your own full size copy of this PDF, then simply click the save disk icon button on the PDF viewer, and you should be able to save it to your own hard disk.

Alternatively, you can view or save the full size PDF by clicking the link below:
(File is 4MB in size).

Click here to open or save the “Fireworks Layers Robot” PDF

So why not get some IT learning started off with a boom and a bang, and get into Adobe Fireworks !

And just to finish off:

While we're on the subject of Sandcastles, here is an early Chilli Peppers cover of the Jimi Hendrix song: "Castles Made of Sand"



Enjoy,
Big Passy Wasabi