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

Chapter 4. Working with Layout Tools > Browser-Specific Elements

Browser-Specific Elements

In their quest to dominate the marketplace, both Netscape and Microsoft have tinkered with standard HTML, adding tags that either add features to your Web page or gum up the works, depending on your point of view. GoLive supports two of these browser-specific tags, both of which have icons in the Objects palette.

Tip

Warning: Using these elements means that your Web pages either will not be compatible with both major browsers, or that you will need to create versions of the page for each.


Spacers

A spacer is a Netscape-created, Navigator-only element. It must be viewed with a Navigator 3.0 or later browser. Spacers create room between elements on the page, making it easier to combine text and objects or to create text spacing effects. Unlike alignment tags, which position items relative to other items, spacers enforce absolute boundaries. Spacers are especially useful when you work without a layout grid.

Because spacers are Netscape-only tags, consider the alternatives. If absolute positioning of text or objects is important to your layout, consider using Cascading Style Sheets (see Chapter 11, "Working with Style Sheets" ). Style sheets, like spacers, don't work with all browsers; your visitors will need at least a 4.0 or later browser, but at least they work on either Navigator or Internet Explorer.

GoLive can create three types of spacers: horizontal, vertical, and block spacers.

  • Horizontal spacers are most useful in formatting lines of text. Insert one at the beginning or end of a line to precisely control line breaks or the width of an area of white space.

  • Vertical spacers can work like line breaks to divide text blocks, or they can be used to correctly position images relative to the text above or below them.

  • Block spacers are two-dimensional, meaning that you can create a square or rectangle of white space to separate items on your page. Block spacers are used to create text indents—although perhaps not the most universal way. It's usually a better idea to use list tags as described in Chapter 3, "Working with Text," or Cascading Style Sheets, covered in Chapter 11, "Working with Style Sheets."

To insert a horizontal spacer:

1.
Type some text into a document.

2.
Double-click or drag the Horizontal Spacer icon (Figure 4.28) from the Basic tab of the Objects palette to the Document window.

Figure 4.28. Select the Horizontal Spacer icon in the Objects palette.


3.
Position the spacer either at the beginning of a line as a paragraph indent, or between words in a paragraph or headline. The text moves to accommodate the spacer (Figure 4.29).

Figure 4.29. This horizontal spacer displaces the text. This indent will only be visible on Netscape browsers.


4.
Click the spacer to select it. The Spacer Inspector appears (Figure 4.30).

Figure 4.30. The Spacer Inspector controls the spacer's attributes.


5.
Lengthen the spacer by typing a number (in pixels) in the Width field of the Inspector, or by dragging one of the spacer's handles. There is no way to change the height of the spacer. Only block spacers have two dimensions.

To insert a vertical spacer:

1.
Double-click or drag the Horizontal Spacer icon from the Basic tab of the Objects palette to the Document window. Note that the icon is called Horizontal Spacer, but it makes all three types of spacers: horizontal, vertical, and block.

2.
Click the Vertical radio button in the Spacer Inspector.

3.
Position the spacer between two lines of text that you want to separate and click it. By default, the Vertical spacer is 32 pixels in height (Figure 4.31).

Figure 4.31. A vertical spacer's 32-pixel default height displaces several lines of this text.


4.
Resize the spacer by entering a numeri-cal value (in pixels) in the Height field of the Inspector or by dragging the spacer's handle.

To insert a block spacer:

1.
With the vertical spacer you've just created selected, click the Block radio button in the Spacer Inspector. The Width, Height, and Alignment fields are now active (Figure 4.32), and the vertical spacer has changed to a small block with three dragging handles (Figure 4.33).

Figure 4.32. Block spacers displace objects horizontally and vertically. They can be resized in height and width, and they can be aligned.


Figure 4.33. A block spacer has three handles for resizing and dragging.


2.
Change the spacer's dimensions by using the Width and Height fields or by dragging the spacer's handles.

3.
Align the block spacer to the left edge of the text by choosing Left from the Alignment menu in the Inspector. The block spacer now indents the entire paragraph (Figure 4.34).

Figure 4.34. Aligning the block spacer to the left raises the paragraph so the paragraph is indented on several lines.


Tip

Block spacers can be aligned according to the same rules that apply to images and other two-dimensional HTML elements. For a complete explanation of the alignment options available, see Chapter 5, "Working with Images."


Scrolling marquees

Microsoft invented the scrolling marquee tag and, you guessed it, Netscape doesn't support it. Internet Explorer and WebTV do support scrolling marquees.

Unlike the other layout tools we've worked with in this chapter, marquees do not just sit there on your Web page. Scrolling marquees actually move. A scrolling marquee is a line of text that scrolls horizontally—à la the famous sign in Times Square—across your Web page.

To create a scrolling marquee:

1.
Drag the Marquee icon from the Objects palette to the Document window (Figure 4.35). You can place it within a text box on a layout grid or directly in the window. A positioning box appears in the Document window, and the Marquee Inspector appears (Figure 4.36).

Figure 4.35. The Marquee icon in the Objects palette resembles a scroll.


Figure 4.36. The Marquee Inspector's Basic tab is dominated by the text box into which you enter the text you want your marquee to scroll.


2.
Type some text into the Text field, the large empty text box, of the Marquee Inspector. Some of the text becomes visible in the marquee (Figure 4.37).

Figure 4.37. Entering text into the text box causes it to appear in the marquee as well.


3.
Choose a Behavior from the pop-up menu in the Inspector (Figure 4.38). Scroll causes the message to scroll continuously. Slide moves the message across the screen, but keeps it on screen after scrolling once. Alternate causes the message to move into the marquee box and bounce between the box's left and right edges.

Figure 4.38. The Behavior pop-up determines how the marquee moves its text.


4.
Select a time for the marquee to run. Selecting the Forever checkbox makes the marquee scroll continuously. Enter a number in the Loops field if you only want it to run a certain number of times.

5.
In the Amount field enter a value to control the scrolling speed.

6.
In the Delay field, enter the scrolling delay.

7.
Select the Left or Right radio button to set the marquee's running direction.

8.
In the Marquee Inspector, select the More tab (Figure 4.39), and enter a size in either pixels or percentage for the marquee in the Height and Width fields. The marquee can also be sized by dragging its handles.

Figure 4.39. The Marquee Inspector's More tab sets the width and height measurements of the marquee, HSpace and VSpace (padding), the alignment of the marquee, and its color.


9.
From the Alignment popup menu, select an alignment specification for the marquee. You can align a marquee to the top, middle, or bottom of text, if the marquee is within the flow of that text.

10.
To add a color to the marquee, click the Color box in the More tab. The Color palette opens. Select a color by clicking a color. The Marquee Inspector's color box reflects the change. There's more about the Color palette later in this chapter.

Tip

Because text will be scrolling across the screen, it isn't necessary that the marquee be large enough to display the full line of text. Size the marquee so that it displays the number of words you'd like to be visible at any given time.


Tip

Use the HSpace and VSpace fields, located under the More tab, to add horizontal and vertical space around the marquee.


Tip

If you choose Alternate scrolling from the Behavior popup menu in the Marquee Inspector, make sure the marquee is wide enough to display the full line of text. Alternate bounces text from one side of the marquee to the other—it won't display text that won't fit in the visible marquee.


Tip

Try several marquee settings to determine which one best fits your needs. As you set up the marquee, use the Layout Preview to watch the marquee's scrolling method and speed. You should also preview the marquee in an Internet Explorer browser.


Tip

The best way to choose scrolling speed and delay options for a marquee is to experiment with different values in the Amount and Delay fields. Entering 10 in the Amount field, for example, produces a fairly slow-scrolling marquee, while 50 is dizzying. Enter some values in each field, then click the Preview tab in the Document window to see how the marquee will look in Internet Explorer. When you've approximated the look you want, open the browser and take a closer look.


Tip

Remember that viewers using Netscape Navigator will see nothing where you've placed the marquee.


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