Ten Ton Dreamweaver [Electronic resources] نسخه متنی

Building a Layout with Image Slicing

Image slicing is another way to use tables to build a web page layout. With image slicing, you build your page's structure with tables, but you start with a single, flat image. You first create a large image in your graphics program that looks exactly as you want your web page to look. Then you cut out all the page componentstitle bars, buttons, navigation menus, and so onand save them as individual graphic files. Then you bring everything into Dreamweaver and reassemble it to build your page design. It's a very cool technique, and one of the most popular methods for building web pages.

With image slicing, you build your page's structure with tables, but you start with a single, flat image that you slice up to create your layout.

Image slicing allows you to create your web page in a graphics program and then reassemble it in Dreamweaver for tweaking and formatting. This whole page layout started as a single graphic.

[View full size image]

I usually build my page design in Adobe Illustrator and then use ImageReady to slice up my layout. ImageReady's various slice commands make it very easy to break a layout into individual files. You can also use Fireworks 8, which makes image slicing very easy.

The following sections describe how to build a layout, slice it up, and then reassemble it in Dreamweaver, regardless of what graphics program you're using.

Step 1: Designing the Full Page

To implement image slicing, you first have to build a single page design using your graphics program. Here's where you take all those concepts, ideas, and designs that you drafted way back in Chapter 3 and build them into a single page layout.

In your graphics program of choice, start with a blank page with dimensions set to the lowest common width and height that you've decided to use. As you'll recall, 750x400 is a good rule of thumb for modern web browsers.

Once your page's dimensions are set, it's a matter of building your design. Design and lay out all your buttons, background graphics, logos, and so on, building up your page's design. Don't worry about actual page contentthe text and other objects that would appear on the individual pages of your site. Imagine you're building a template. What you're after is the overall look of all the pages in your site.

Here's the original page design as created in Adobe Illustrator. I prefer using Illustrator and ImageReady for my image slicing, but you can use your graphics program of choice.

[View full size image]

It's usually these initial layouts that freelance designers present to their clients for approval.

Step 2: Slicing and Saving

With your page design created, it's time to begin slicing. Most modern graphics programs provide a function for image slicing. For instance, Photoshop and ImageReady provide a slice tool, and Fireworks provides slicing commands, too.

Slicing up your design is the fun part. What you're doing is taking your overall layout and cutting it into smaller pieces. This means you'll be isolating buttons, logos, and background areas on your page by slicing them away from the rest of the layout.

Don't get frustrated if you have to start over a few times: image slicing does takes a bit of patience. Knowing where and what to slice is a matter of practice.

Once your page design is complete, begin slicing it apart using your graphics program's slicing commands. Every slice you create will be saved as an individual graphic.

As you're saving your images, your program should give you options for controlling th89 code that will be saved. For example, your program may let you save a table-based layout or a CSS layout. You may have to dig for these options, but they should be there.

Step 3: Havin' at It in Dreamweaver

Once you've saved everything in your graphics program, get opening that HMTL pageit's all Dreamweaver from here on in. With your page open, you'll see that your original layout is being controlled by a table, with each of your slices occupying a cell. You can now make any tweaks and adjustments to your page that you want. For example, you can center your table and set your page's background and title. You can Chapter 13.