Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
Like this article? We recommend

Exporting HTML Pages

Probably the best way to demonstrate a website mock-up is to actually export a working website prototype. Fireworks can generate HTML pages and images directly from the Fireworks document—complete with functional navigation bar and rollover behaviors.

  1. Choose File > Export.
  2. In the Export dialog box, navigate to your Lesson03 folder.
  3. Create a subfolder inside the Lesson03 folder: On Windows, right-click the file list pane and choose New > Folder from the context menu. On Mac OS, click the New Folder button. Name the new folder html_export.
  4. Navigate to the newly created subfolder inside the Lesson03 folder. Choose HTML And Images from the Export menu. Choose Export HTML File from the HTML menu and Export Slices from the Slices menu. Activate the option Include Areas Without Slices and disable both the options Current State Only and Current Page Only.
  5. Activate the Put Images In Subfolder option. By default, this will place all images in a folder named images inside the selected folder, which is suitable for our purposes.
  6. Confirm that everything looks exactly as shown in the following illustration and then click Save.
  7. When the export is complete, switch to Windows Explorer/the Finder. Navigate to the html_export subfolder inside the Lesson03 folder and double-click the file home.htm. The page will open in your default web browser.
  8. Test the functionality of the navigation bar by clicking on its menu buttons. You should be able to jump from each page directly to any other page. Navigate to the Actors page and move the pointer over the two top thumbnail images. You should be able to see the disjoint rollover behaviors you created in Fireworks.

    Your website mock-up is ready for review by your client or colleagues. You can upload the content of the html_export folder onto a web server and point your client to it. Or, you could demonstrate the functionality of the website in an online meeting.

  • + Share This
  • 🔖 Save To Your Account