Presenting the prototype website to the client
There are many ways in which you can demonstrate the prototype website to your client—many more than we can explore here. You may settle for only one of the methods described here or use several methods in combination.
Exporting the website as a PDF document
Fireworks enables you to export your website prototype as a high-fidelity, interactive, secure PDF document that you can use in an e-mail based or online review process.
1 Choose File > Export.
2 In the Export dialog box, navigate to your Lesson05 folder, choose Adobe PDF from the Export menu, choose All Pages from the Pages menu, and select the View PDF After Export option.
3 (Optional) Click Options to specify compatibility and image quality settings or to set up password protection for the PDF.
4 Click Save/Export.
Fireworks generates a PDF version of your website and then opens the document in your default PDF viewer.
5 Navigate through the pages using any of the regular page navigation controls. Alternatively, click the menu buttons of the navigation bar inside the document to jump directly to the corresponding pages. Note that in a PDF document you will not be able to preview rollover effects such as those you created on the Actors page.
6 Close the PDF document and return to Fireworks.
Creating an auto-run slide show
To present the pages of your website as a slide show without the need for user interaction, use the Demo Current Document command.
1 Choose Commands > Demo Current Document.
2 In the Demo Current Document dialog box, deselect the box for the master page navbar, set the background color to black by typing #000000 in the color text box or by using the color picker beside it, and then click Create Demo. In the Folder For Export dialog box, navigate to your Lesson05 folder— optionally, you could create a subfolder inside the Lesson05 folder—and then click Select [Folder name]/Choose.
Tip: To create a subfolder while you’re in the Folder For Export dialog box, do one of the following: On Windows, right-click the file list pane and choose New > Folder from the menu. On Mac OS, click the New Folder button.
3 After the export is complete, your default web browser opens and automatically begins displaying the pages of your website as a slide show. Move the pointer towards the lower edge of the browser window to see the navigation controls. You can stop the playback or switch to full-screen mode. Note that once again you can’t preview the rollover effects.
4 When you’re done reviewing the slide show, close the web browser window and return to Fireworks.
Exporting states of a page as individual images
When demonstrating complex rollover behaviors, you might want to take snapshots of the various states of a page as individual images.
1 Switch to the page actors.
2 Choose File > Export.
3 In the Export dialog box, navigate to your Lesson05 folder—optionally, you could create a subfolder inside the Lesson05 folder—choose States To Files from the Export menu, and then click Save/Export.
Tip: To create a subfolder while you’re in the Export dialog box, do one of the following: On Windows, right-click the file list pane and choose New > Folder from the menu. On Mac OS, click the New Folder button.
Fireworks generates one image for each state of the current page. You can review the images in Windows Explorer/the Finder or in any image-processing application.
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 Lesson05 folder.
3 Create a subfolder inside the Lesson05 folder: On Windows, right-click the file list pane and choose New > Folder. On Mac OS, click the New Folder button. Name the new folder html_export.
4 Navigate to the newly created subfolder inside the Lesson05 folder. In the Export dialog box, choose HTML And Images from the Export menu. Choose Export HTML File from the HTML menu and Export Slices from the Slices menu. Choose All Pages from the Pages menu. Select the option Include Areas Without Slices and deselect the Current State Only option.
5 Select the option Put Images In Subfolder. 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/Export.
7 When the export is complete, switch to Windows Explorer/the Finder. Navigate to the html_export subfolder inside the Lesson05 folder and double-click the file home.htm. The page opens 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. See Lesson 8, “Submitting Work for a PDF Review" for more information about collaborating in online meetings using Share My Screen and Connect Now. Once you’ve obtained your client’s approval on the design it’s time to build the website in Dreamweaver, reusing the work you’ve done in Fireworks.
Building a website in Dreamweaver
The tight integration between Fireworks and Dreamweaver makes it very easy to create a Dreamweaver website from assets created in Fireworks. Simply export the elements you want to use from your Fireworks document, and then insert them into your Dreamweaver document. From the assets exported from the Fireworks document, you can pick and choose the elements you want to use: images, entire tables containing sliced graphics, individual rollover buttons or ready-to-use navigation bars, complete web pages with all elements already positioned, or any combination thereof.
Creating a new site
You’ll begin by creating a new site in Dreamweaver. Part of the site creation process is to define a location on your hard disk where all the pages and images for your new website will be stored. This location is referred to as the local root folder for your Dreamweaver site.
1 Launch Adobe Dreamweaver CS5.
2 Click the Dreamweaver Site button under Create New in the Welcome screen, or choose Site > New Site.
3 In the Site Definition dialog box, type Double Identity Site in the site name text box. (See illustration on next page.)
4 Click the Browse button beside Local Site Folder. Navigate to your Lesson05 folder. Create a new folder called Website inside the Lesson05 folder. Open the new Website folder, and then click Select/Choose.
5 Click Save in the Site Setup dialog box.
5 Your new site is added to the Files panel where you can easily access and organize all the files that make up your website.
