Once you have designed the Web page or opened up a page saved as a Photoshop or Fireworks document, you are ready to begin slicing. The slice tool in Fireworks allows you to slice a graphical screen design into an HTML page. When using the slicing process to create a Web page, the first step is designing the page.
Then, using the slice tool (located below the main tools on the toolbar Sample Web page design in Macromedia Fireworks (You can design entire Web pages in Macromedia Fireworks.) in Fireworks), the page is sliced into rectangular boxes that have a green overlay.
Sliced elements should include any item that needs to work as a link and any element that is a separate graphic on the page. When the slices are exported, all the graphics are optimized and converted to either a GIF or JPG file and assigned a sequential name. Each slice is placed within an HTML table and the resulting output is an HTML file and all the supporting graphics. The HTML file is a Web page.
Although Fireworks has some tools for adding functionality to the Web page, Dreamweaver is far better suited to perform the Web authoring functions needed. The HTML page you generate from Fire- works can be opened in Dreamweaver and all the Web functionality can be added.
Optimizing and Exporting Pages and Graphics
Optimizing graphics means choosing a color palette for the slice. We stated before that all photos and full color images need to be JPG files and that all flat color logos and icons need to be GIF files.
In Fireworks, you can click on each slice and use the properties inspector to change the file optimization format used upon export. This means that some slices are exported as GIF and some are exported as JPG. This is all based on your decisions when slicing. Upon exporting, Fireworks will ask you where to place the new graphic files and the HTML file that supports them. You’ll need to refer back to the folder structure you previously created.
The most important thing to remember when exporting is to put the files in the correct folders.Be consistent and place files in their proper locations. For this site we are using this structure: All HTML pages are exported to the root folder: jdimarco (first initial, last name).
Name the .htm pages descriptively. Bio.htm, .portfolio_menu_page.htm, cases_1.htm, cases_2.htm, are all good name conventions.
Don’t use spaces or odd characters in file names. Underscores are good for separating words in file name s. Do not use extra periods in filenames - except at the end before the .htm file extension. The files will not work if they are named incorrectly. All images are exported to the images folder: jdimarco/ images. Your home page or “first page” of the site is always named index.htm.
After export and optimization, you will save a native Fireworks file complete with slices, layers, and text. The file may be used for editing and exporting later on. Optimization in Macromedia Fireworks (Graphic files can be optimized for GIF or JPG exporting.) How to Export individual JPG and GIF graphics in Macromedia Fire- works MX 2004: You can create your content and artwork in Adobe Photoshop, Corel Draw, Photopaint, Adobe Illustrator, or any other graphic art application. However, we know that all Web graphics need to be converted to the proper format so that they can be viewed on the Web.
To do this exercise, find an image on your computer or the Internet that you can use. Open Macromedia Fireworks and immediately go to Window>Properties and Window>Tools to show the tool bar and property inspector. Both palettes might be open on start up.
Open a graphic file in any format (TIFF, EPS, PSD, PNG, JPG). Scale, crop, add to it, and then use the slice tool to slice all the parts of the image in Fireworks. Click each slice and then using the properties inspector, set the Default Export Options file type to GIF Web snap 216 or JPG (better quality).
Remember that GIF is best for flat line art and logos while JPG is best for photos and full color images. Go to FILE> EXPORT. Export the graphic files only into your images folder. Save the file as native Fireworks PNG file for use later. The exported graphics can be placed into layers and tables on your Web pages in Dreamweaver by going to Insert> Image. Saving files for editing and archive: Once you have a basic screen layout, you can experiment with placement and color.
After screens are complete, you can save the file as a PNG (Portable Network Graphics) file in Fireworks. PNG is the native format for Fireworks. Portable Network Graphics are full color files that support transparency, unlike JPEG which does not. The great thing about PNG in Fireworks is that all images and text remain editable and on layers.
It is very important that you save a PNG file for every screen and Fireworks file that you make. If the page elements need editing, the Fireworks PNG can be opened, edited, and re-exported. This is an important step in the production process. If you have native Photoshop files, you can save a PSD file in layers as your editable document.
There is one simple rule for color: no CMYK color files. CMYK graphics are built for printing, not Web output, as they will not show up in your Web pages. Let’s review what we have covered in the Web portfolio design process so far. Overall, we stated that the Web portfolio needs to be content driven, easy to navigate, persuasive, and dynamic.