Adding Text to the Template


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 be absolutely 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 adjusts 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 user's machine, you can be confident that it will display correctly every time. In the case of this client, we'll add the company name, location, and contact information at the top of the site.

1.

In the retros_cycles_template file, 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 properties later.

2.

In the text block, type Retro's Cycles. Create a second text box and type 12345 Main St Anywhere, USA (555)555-2222.

3.

Create a third text block and type emailus@retroscycles.com.

4.

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.

Tip

As you drag the resize handle around, watch the W: and H: fields in the Property inspector. They change as you move your mouse.

Caution

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.

5.

Next, adjust the positioning of the text block by typing 247 in the X: field in the Property inspector and 5 in the Y: field.

6.

Following the same procedures, select the second text block and set the width to 508, the height to 79, the X: position to 247, and the Y: position to 90.

7.

Do the same for the third text block and set the width to 494, the height to 19, the X: position to 246, and the Y: position to 107. 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 placed.


Note

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 accordingly so they fit on the screen and are similar to the image.

8.

Next, select the text in the first text box and set the font size to a size that fits well on the page. Adjust the font style to bold and choose any font type that you would like. Change the color of the font to #0000FF. The font in Figure 7.9 is Brush Flash.

Figure 7.9. Adjust the font attributes and choose a custom font.


Note

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.

9.

Select the text in the second text block and adjust the font so that it is Arial, 15, bold, and has a color of #000FF. 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.


10.

Save the file.



Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net