Web Page w/ MFW > View the MFW HTML File in a Browser - Lesson 10

Now that you’ve examined the exported files, you’re ready to test the web page in a browser.

1. From the Export folder, drag the index.htm file to an open web browser.
2. In the browser, click the buttons you added to test the links, then return to the index.htm file.
3. Test the other features that you added.
4. Most web browsers let you view the source code with a command such as View > Source. Find and execute the command that lets you view the code.
5. Scroll through the source code. If you know HTML and JavaScript, you will recognize the code that Fireworks created for you. If you don’t know HTML and JavaScript, you can appreciate that Fireworks gives you no compelling reason to have to learn either.
   

Web Page w/ MFW > Test the Completed File - Lesson 09

Your files have been exported, so it’s time to check out what you created.

View the list of exported files

First, you’ll examine the list of files that Fireworks exported. The new files created during the export process appear in your Export folder.

1. On your desktop, browse to the Tutorial2/Export folder and open it.
   Fireworks created an HTML file there called index.htm. This is the home page for the Global website. It also created a file called mm_menu.js, which contains the code necessary to display pop-up menus.
2. Open the images subfolder.
   Fireworks also exported graphics files for all your artwork. Each slice in Fireworks exports as its own separate graphic file. There are several GIF files and one JPEG file. The JPEG is the bitmap image you optimized earlier.The file called spacer.gif is the result of the spacing option you selected in the HTML Setup dialog box and will be used to aid in page layout.
   

Web Page w/ MFW > Export the Document to HTML Format > Lesson 08

Your document is now ready for export.

1. Choose File - Export.
   The Export dialog box opens.
2. In the dialog box, navigate to the Tutorial2/Export folder.
3. Ensure that HTML and Images is selected as the file type, and enter index.htm as the filename. Naming the home page index.htm is a common convention used on the web. Many browsers will even automatically display the index.htm page when a URL lists a location but not a page name.
   Additionally, earlier in the tutorial you assigned the Home button a URL of index.htm. Currently there is only a single page in the Global website, so linking this page to itself may not make much sense at this point. But if you create other pages for this site in the future, you can use this navigation bar on all its pages, providing users with a consistent navigation method.
4. Ensure that Export HTML File is chosen in the HTML pop-up menu and Export Slices is chosen in the Slices pop-up menu.
5. Choose the following options, and leave all the others deselected:
   
   #. Include Areas without Slices
   #.Put Images in Subfolder
   
   When you choose Put Images in Subfolder, Fireworks allows you to choose a folder in which to store your exported graphic files. Fireworks creates the folder for you if it doesn’t exist. If you don’t choose a folder, Fireworks chooses a folder named images by default. For this tutorial, accept the default setting.
6. Click Save.
   The files are exported to the location you specified.
7. Choose File - Save to save your Fireworks Portable Network Graphics (PNG) file.

Web Page w/ MFW > Export HTML - Lesson 07

HTML, or Hypertext Markup Language, is the primary method used on the Internet to create and display web pages. You don’t need to understand HTML to use Fireworks, but it helps to keep in mind that Fireworks slices become cells in an HTML table when exported.

Here you’ll export and view your finished document in a web browser. You’ll also examine the HTML code that Fireworks exports.

Set HTML preferences

Before you export the document, you need to set HTML export preferences.

1. Choose File - HTML Setup.
   The HTML Setup dialog box opens. The options you set in this dialog box will affect all future Fireworks documents you create, except the options on the Document Specific tab.
2. On the General tab,
   choose an HTML style. If you use an HTML editor such as Macromedia Dreamweaver or Microsoft FrontPage, choose it from this pop-up menu. Doing so allows you to easily open and edit the exported file in that HTML editor. If you don’t use an HTML editor or you use one that’s not in this list, choose Generic HTML.
3. Choose .htm as the file extension.
4. 4 Click the Table tab.
   The Table tab allows you to change HTML table properties.
5. In the Space With pop-up menu,
   choose 1-Pixel Transparent Spacer. When this option is chosen, Fireworks exports a graphic file called spacer.gif, which is a 1-pixel transparent image. Spacers are used by web designers to aid in page layout. They hold empty HTML table cells open. Without them, empty HTML table cells collapse, altering your intended page layout. You’ll see the spacer.gif file later when you view your exported files. You don’t need to understand spacers, but it’s useful to know about this option if you want to use them in the future.
6. Click the Document Specific tab.
   The Document Specific tab allows you to choose a variety of document-specific preferences, including a customized naming convention for your exported files. Remember that the options you set here apply only to the current Fireworks document.
   
   Tip:
   You can apply the settings on the Document Specific tab to all new documents by clicking the Set Defaults button.
   
   
7. Click OK to accept the settings on the Document Specific tab and close the HTML Setup dialog box.