• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 10. Masking and Pop-Up Menus > Creating a Text Slice

Creating a Text Slice

The about.png file you have been working on will contain a brief history of the company founder. You could import the text for the page and format it as you did the text on the home page. However, this page contains more text, and you don't want it to be a graphic; remember that all text in Fireworks is converted to a graphic image when you export the page. Therefore, you will instead create a text slice that will export as text.

In your about.png file, choose File > Import and open the about.txt file in the Media folder within the Lesson10 folder. Click to place the text on the canvas.

The text will not remain on this page.

Using the Text Editor or the Text tool, select all of the text and copy it. Then delete the text block on the canvas.

You are importing the text just to copy it. You could have also opened the text file in a text editor such as NotePad or SimpleText and then copied the text.

Draw a slice on the canvas for the text, between the About Us text and the image of the founder. Also draw slices over the About Us text and the founder image.

Don't overlap any of the slices. Use the red slice guides to help place the slices. Make the slice for the About Us text extend to the bottom of the canvas.

Add names for your slices over the founder and the About Us text.

You don't need to name the slice for the text; it won't be exported as a graphic.

Select the slice for the text and then select HTML from the Type pop-up menu in the Property inspector. Click the Edit button in the Property inspector.

The HTML slice is a darker green color than the other slices. You can change the color of the slice by choosing a new color from the Color pop-up window on the Property inspector when the slice is selected.

Press Ctrl+V (Windows) or Command+V (Macintosh) to paste the text within the Edit HTML Slice window.

The File menu is not available when you are in the Edit HTML Slice window.

The text that appears in this window will be converted to HTML text when you export your page. This text consists of two paragraphs. If you leave it as is, the two paragraphs will be combined into one when you export your page. HTML requires tags surrounding all paragraphs or surrounding any words that you want to format. For example, if you want a word to appear in bold in the browser, you must place an opening bold tag (<b>) before the word and an ending bold tag (</b>) after the word.

You can enter the tags here in Fireworks, or you can make those changes in Dreamweaver. Even if you are not familiar with HTML, you can easily add the paragraph tags.

Type <p> before each paragraph and </p> at the end of each paragraph; then click OK.

If you want to add other HTML formatting tags, you can add them now as well.

Save and close your file.

You will export this page in the next lesson.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint