Information Technology Reference
In-Depth Information
The header text should state the page name, for example bio or resume
would be typical headers (categories).
To make the navigation buttons, create boxes or circles (around 50 x 50
pixels) and align them vertically or horizontally. Then overlay the corre-
sponding category text. Be sure to align the text and the buttons correctly
so that the visual appeal is consistent. If you need help with alignment, you
can go to the menu item
View>
Grid
and
View>Guides —
Drag guides from the rulers on to the page. Align
elements using the guides.
Leave the rest of the page blank. We will add layers to this content area
later on when we open the newly sliced Web pages in Dreamweaver.
5.
If you want to push the pages further in Fireworks, you can open the Web
graphics you created into your screen designs by dragging and dropping
from window to window, copying and pasting, and by importing. The
easiest way is to drag and drop. You can open images in Macromedia
Fireworks and drag from one window to the next. Each image comes over
on to its own layer. Use the scale tool or simply click CRTL+T and you
will get a free transformation bounding box around the graphic. Hold the
corner node and shift key and scale the graphic; hit return to complete the
operation. You can design pages with graphics completely using Fire-
works or place the individual images on the Web pages later using
Dreamweaver. We will show both techniques in this topic, the choice of
design methods will be yours.
Slicing Pages
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
