Although most of the copy text for the web pages
will be added later, when you edit the site in Dreamweaver, there
are some text elements that you should add in Fireworks. Because
text added via HTML is displayed with the system fonts, you can't
positive that any fonts beyond those that come with
the operating system will display properly. If you use a font in
your pages that isn't available to a visitor, the visitor's system
and uses a font that is similar. This means that you can't
control how your site is displayed on every machine.
To avoid this, you can use Fireworks to embed
the text in an image. Because the text in the image doesn't rely on
the font being present on the
's machine, you can be confident
that it will display correctly every time. In the case of this
client, we'll add the company
, location, and contact
information at the top of the site.
select the Text tool and draw a text block above the blue dividing
line and to the right of the motorcycle. Again, it doesn't matter
how big it is or where it is located because you can adjust those
In the text block, type
. Create a second
text box and type
12345 Main St
Anywhere, USA (555)555-2222
Create a third text block and type
Select the first text block that you created.
Click on the resize handle in any corner of the text block and
adjust the height and width of the text block so that the width is
508 and the height is 79.
As you drag the resize handle around, watch the
W: and H: fields in the Property inspector. They change as you move
Do not try to manually enter values into the W:
and H: fields of the Property inspector to adjust the height and
width of your text block. Doing this results in skewed text.
Next, adjust the positioning of the text block
in the X:
field in the Property inspector and
in the Y: field.
Following the same procedures, select the
second text block and set the width to
, the height to
, the X: position to
, and the Y: position to
Do the same for the third text block and set
the width to
, the X:
the Y: position to
You should now have three text blocks positioned in the page's
header section (see Figure 7.8).
Figure 7.8. The header text has been
Don't worry if your workspace doesn't look
exactly like the figure. Depending on the font you use, your fonts
might be significantly larger or smaller than the ones in the
image. Just adjust your fonts
so they fit on the screen
and are similar to the image.
Next, select the text in the first text box
and set the font size to a
that fits well on the page. Adjust
the font style to bold and choose any font type that you would
like. Change the
of the font to
. The font in Figure 7.9 is
Figure 7.9. Adjust the font attributes
and choose a custom font.
To apply the changes to the font, you have to
first select the text you want to change within the text block. If
you want to adjust the font of the entire text block, you can do so
by selecting the text block and then choosing the desired font from
the Property inspector.
Select the text in the second text block and
adjust the font so that it is Arial, 15, bold, and has a color of
. Do the same for
the third text block (see Figure 7.10).
Figure 7.10. Adjust the font properties
for the second and third text blocks.
Save the file.