IT tutorials
 
Graphics
 

Adobe Fireworks CS5 : Fireworks and Dreamweaver (part 3) - Three-slice technique for content containers

2/19/2013 5:33:25 PM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

Three-slice technique for content containers

A common visual technique for containing web content is to put the content inside some sort of container, often called a pod, which can expand vertically or horizontally to contain additional content. The three-slice technique creates a pod that expands in one dimension while the other dimension remains fixed.

In this exercise—we’re back in Fireworks now—you will create the slices for vertically flexible pods for the Bare Tree Society website.

1.
Open the bare_tree.fw.png file from the Lesson13 folder.



Conveniently, both pods are the same width, so you need only slice up one pod and use the same exported graphics for both pods in the final web design.

To create slices that will export only the pod areas and not the text, you will have to hide the text in one pod.

The content layer holds all the elements for the content area of the design: two text blocks and two rounded rectangles.

2.
Select the text in the left pod with the Pointer tool.

3.
Locate the selected object in the Layers panel, and hide the object by clicking its Show/Hide box ( ).

4.
On the canvas, right-click (or Control-click) on the rounded rectangle, and choose Insert Rectangular Slice.

This slice will cover the entire rectangle, including the outer glow. When you have shapes that use glows or drop shadows, letting Fireworks create the initial slice can be more accurate.

5.
In the Properties panel, change the height of the slice to 20 pixels.

6.
Choose Edit > Clone to create an exact copy of the slice.

Tip

If you hold Shift while pressing the arrows, your slice will move ten pixels at a time instead of just one pixel.

7.
Use the Down Arrow key to reposition this new slice below the original slice.

8.
Change the height to 10 pixels in the Properties panel. This will become the repeating background image for the pod. Its exact Y position is not too important, as long as it doesn’t overlap the other slices.

9.
Select the top slice and clone it again.

10.
Use the arrow keys to reposition the new slice at the bottom of the pod. The Y value for the new slice position will be 338.

11.
Select all three slices, and change the Slice Export Settings option to JPEG – Better Quality from within the Properties panel.

12.
Name the slices appropriately in the Layers panel: pod_top, pod_bg, and pod_bottom.

Once the graphics have been exported, the design can be assembled in Dreamweaver using a combination of HTML and CSS. There are several different ways to achieve this result. In this figure, you can see how adding additional content to a container within Dreamweaver expands the left container, leaving the right container unaffected.

 
Others
 
- Adobe Fireworks CS5 : Fireworks and Dreamweaver (part 2) - Round-trip editing
- Adobe Fireworks CS5 : Fireworks and Dreamweaver (part 1) - Copying and pasting to Dreamweaver
- Adobe Flash Professional CS5 : Working Within the Flash Environment - Organizing Layers
- Adobe Flash Professional CS5 : Working Within the Flash Environment - Viewing Layers
- Adobe InDesign CS5 : Opening Documents and Templates (part 2) - Converting documents created with other programs
- Adobe InDesign CS5 : Opening Documents and Templates (part 1) - Working with files in the Bridge file system
- Adobe Dreamweaver CS5 : Working with the CSS Styles Panel
- Adobe Dreamweaver CS5 : Understanding Cascading Style Sheets
- Corel Painter X : The Great Outdoors - Just Add Watercolor, Bayside Scene
- Adobe Illustrator CS5 : Working with Objects - Creating Arcs and Spirals
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS