Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

  • Print
  • + Share This
From the author of

From the author of

Inserting a New SPAN Tag and ID Attribute to Serve as a Container for the Timestamp

The action that you will use in this project will display the timestamp on the page when it loads. You could also display the timestamp when you click a link, roll over a link, or perform some other action. Be aware that the Clock/Date (ID) action works by replacing existing text on a page when that page is viewed with Netscape 6 or IE5 and above. Earlier browsers do not display anything in place of the existing text. You therefore have the choice of assigning the action to a blank space, which will remain blank in unsupported browsers, or including text that appears in only those unsupported browsers.

  1. Place your cursor where you want your timestamp to appear on the page in the document's Layout window.

  2. Double-click the Tag object in the Basic Objects palette to insert a <noedit> tag just after the cursor.

    Figure 6 Drag the Tag object into your layout to add a <noedit> tag container.

  3. In the Inspector palette, change the name of the tag from noedit to span.

  4. Click the New Attribute Button next to the Trash icon in the Element Inspector to create a new tag attribute.

  5. Type id for the Attribute and timestamp for the Value, using the input fields at the bottom of the Element Inspector.

    Figure 7 Change the <noedit> tag to a <span> tag and add the ID attribute.

    The timestamp value you enter here links the contents of this tag container to the timestamp ID style you created earlier. When you use the same name you used when you set up your ID style, the browser applies the CSS definition contained in the style sheet to any text that is contained inside the <span> tag pair modified by the timestamp ID attribute.

    If you select the <span> element in Layout mode and then view the page in Source mode, you'll see that you have added a set of tags to your page that looks like this:

    <span id="timestamp"></span>
  6. Type a greeting such as Welcome to My Page! between the <span> tags while you're still in Source mode:

    <span id="timestamp">Welcome to My Page!</span>

    This text appears to only those browsers that don't support the latest DOM features.

    NOTE

    You can also leave the text blank between the <span> tags. This way nothing appears in unsupported browsers; the action is simply ignored as if the blank space were intended to be there.

    After you switch from Layout view to another view—such as Source view—and switch back again to Layout view, the icon for the <span> tag disappears from the page. The tag is still there; it just becomes an invisible item when viewed from this point on in Layout mode.

  • + Share This
  • 🔖 Save To Your Account