Thomas Wallace: Lectures and Resources - A collection of website design lectures and resources

Integrating Image Slices into Your Site Template

In order for us to use Fireworks effectively as a site design tool we need a way to take our design and separate it into manageable pieces that can be inserted into our web page. The most efficient way to do this in Fireworks is to use the slice tool. The slice tool allows us to take pieces of our design and export them as individual images. Each slice can have have its own optimization settings and even image type (.jpg or .gif). In order to create slices in FIreworks we follow the following steps.

  1. Open your design document in Fireworks. This is the .png file that you should have saved in your Personal Website/assets/resources folder
  2. Select the slice tool from the Web Section of the Tools menu
    Slice Tools
  3. Using the slice tool, create the sections you wish to export to your web page. Keep in mind that you can use CSS to repeat images on both the X and Y Axis and not to create images for anything that you can accomplish using HTML and CSS. Images are only to be used when we are unable to create the same effect with CSS and HTML.
  4. Once you have created your slices you canvas should look something like this:

Slices

Tip: You can toggle the slice view on and off by pressing the slice toggle button in the Web portion of the tools panel.
Slice Toggle

Exporting Slices

  1. Turn on Slice View in the Tools panel
  2. Using the Pointer Tool (Black Arrow in the Tools Panel) select the slice you wish to optimize and export. When a slice is properly selected it will have a blue outline and in the top left corner of the slice it will say Slice:Image Type
  3. Change the canvas view to preview. The canvas view will change so that you can see the way the image slice you are working on will look when it is exported. All other items on the canvas will be faded.
  4. Optimize you image making sure you use the appropriate image format for the type of image you wish to export. When the quality and size of the image are appropriate select Export from the file menu.
  5. In the export options panel...
    1. select a good file name (meaningful, lower-case, no spaces)
    2. Set the export option to Images Only
    3. Set HTML to none
    4. Set Slices to : Export Slices
    5. Check Selected Slices only
    6. Uncheck Include areas without slices

Export

  1. Repeat the above steps for each slice in your design.
    Tip: It is not uncommon to have to export a slice several times with different dimensions or settings in order for it to appear as desired within your page.

Inserting Slices into your Web Page

There are two primary ways to integrate images into your web page, either as a background image or embedded directly into the page. Typically I will try to use background images when ever I am trying to enhance accessibility and maintain a good document structure. I will embed images into the page if they are part of the content or need to be easily downloaded.

Using CSS and the Background Image Property to replace text with images

In this example, we will replace the the Heading 1 Text with an background image using CSS.

  1. Using the tag selector find the DIV name of where you would like the image to appear.
    Tag Selector
  2. With the <div#header> tag selected press the new css rule button on the CSS panel. Create an advanced ID named #header
  3. Set the Margins and the Padding to Zero and the Height to the height of your header image. In the background category set the background image to point to the header image slice you just created an set the repeat to no repeat.
  4. Hit Apply and the Okay
  5. Your should now see your header image inside the header div. You will also see the Heading 1 text on top of the image.

Haader Image

  1. At this point some people would just delete the Heading text and move on, but for accessibility purposes we are going to just hide the heading text, so it is available for both screen readers and if we would like to present the page in a different format at a later time (Style Sheets)
  2. Using the Tag Selector select the H1 tag inside of the header div.
  3. In the Style Panel select the existing rule div#header h1 and press the edit style sheet button (looks like a pencil)
  4. Clear out any existing properties for this rule and set the Margins and the Padding to Zero.
  5. In the Block category set the text indent property to -9999. This will hide the text off the screen but it will still be visible to screen readers.
  6. Press apply and then OK.
  7. Save the document and repeat as need for other elements on the page.

Note: There may be some instances where you would like text to appear on top of a background image. Just skip steps 6-11 and style the text within appropriately.

Embedding Images into an HTML Document

  1. Place your cursor at the point where you would like the image to be displayed.
  2. From the Insert Menu select Image. Add ALT text to the image when prompted.
  3. Style the image as necessary by creating a class or in the properties inspector.

Note: If the image appears to have a margin or a border make sure the border property is set to zero and that the image is not marked up as a paragraph or heading.