Add Dynamic Time and Date Stamps in GoLive 6
- Creating a CSS Style for the Timestamp Text
- Inserting a New SPAN Tag and ID Attribute to Serve as a Container for the Timestamp
- Applying the Action
- Using the Last Modified (ID) Action to Insert a Page Last Modified Timestamp
- Modifications
- Changing the Language for the Days of the Week
- Wrapping Your Displayed Text with Custom Tags
- About this article
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
I'm primarily a designer, and I've always envied those professionally created sites that display neat little dynamic timestamps somewhere on the page that update whenever the time changes. Sure, you can program a clock on your page with some fancy backend scripting, but I wanted an easier way to do it that didn't require me to mess around with a CGI script. And I wanted to be able to customize the way the text looks on my page. The first action I'll cover is the new Clock/Date (ID) action. This action enables you to place a timestamp on the page that continues to update the time up to the minute, even after the page has loaded. In addition, you'll learn how to use a CSS style sheet definition to customize the way the timestamp appears in the layout and create exactly the design you want.
Figure 1 The Clock/Date (ID) action enables you to place a customized timestamp on your page.
){kind=link}
Creating a CSS Style for the Timestamp Text
I'm a big fan of using CSS styles for text layout because they offer the utmost control over font characteristics. Much like a magazine article might use a slug of text to display important info in its header, a timestamp needs to stand out from the rest of the page's content. Because you'll probably want your timestamp text to appear in a unique size and style not normally available with HTML formatting, you can use CSSs to control its appearance. In this first step you create a CSS style for your timestamp text.
In a new or existing GoLive document, open the CSS Editor by clicking the Open CSS Editor icon at the top right of the document window.
Figure 2 The CSS Editor enables you to create and edit Cascading Style Sheets.
Click the New ID Style button to create an internal ID style definition.
Figure 3 Adding a new ID Style.
The ID Attribute
The ID attribute in HTML is used to define a unique style for an element. By assigning an ID attribute to an element, you can apply a CSS rule to that element. For example, a CSS definition such as the following:
#banner { font-size: 15px; font-color: red }can be applied to a range of text between an opening and closing pair of tags if you assign the same ID attribute to the tags:
<P ID="banner" >All items now 80% off!</P>
The use of the ID attribute is most appropriate when a style needs to be applied only once on a page rather than multiple times. More important, though, is the fact that elements assigned an ID name can be treated as objects within the DOM and can be manipulated via dynamic HTML scripting. By calling the ID from a script, you can instruct the browser to manipulate the content of anything inside the enclosing tags that the ID attribute modifies.
Select the ID name (the word #id) in the CSS Definitions tab of the CSS Editor palette, and change the name of the style to #timestamp. (With ID styles you can use any name you want as long as it is preceded by the hash—#—sign.)
You change the name by typing in a new name in the Inspector palette's Name field.
Figure 4 Select the CSS element in the CSS Editor to display its properties in the Inspector palette.
Click the Font properties icon in the Inspector palette (the "F" icon) and apply your custom font attributes.
For this project, try the following settings:
Color: gray
Size: 10px
Click the New Font button next to the Trash icon in the Inspector palette and type in Verdana as the font. Leave all the other parameters as is.
If you prefer, you can choose different font characteristics for the style, depending on how you want your timestamp text to appear on the page.
Figure 5 Defining the font properties for the style.
){kind=link}
){kind=link}
){kind=link}
){kind=link}