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