Web Design with HTML and CSS

Slicing an image

Lesson 5, Graphics, Color, and Transparency 111

8 Select the Transparency check box.

A portion of the Save for Web & Devices

dialog box.

9 Click Save. In the Save Optimized As dialog box, navigate to the web05lessons folder and
double-click to select the site folder located inside.

10 In the File Name text box, type index. This page will be the initial start page for the test
website.

11 In the Format drop-down menu, choose HTML and Images, leave the Settings at
Default Settings, and leave Slices set to All.

As a default, Photoshop exports your slice images formatted in an HTML table tag. To export

your slice images in CSS (Cascading Style Sheets) containers, choose Other from the Settings

dialog box, and then click and hold HTML to select the Slices option; you can then select the

Generate CSS radio button.

You can export your code as a table or in CSS.

12 Click Save. Open your browser and choose File > Open and navigate to index.html to
view your menu.

In Internet Explorer, you can display your File menu by pressing F10.