How to stack Order to simulate Relative Motion

To stack Order to simulate Relative Motion

The stacking order, also known as the z-index, is a unique property of floating boxes. In animations with multiple objects, you can use this property to determine which object should appear on top when the paths of two or more floating boxes cross.

The following example is based on a simple animation that simulates relative motion. It is a palindrome that consists of two objects, a stationary floating box with a GIF image and an animated floating box with text content. Four key-frames, each on two time tracks, control the animation, subdividing it in four phases. The test box remains on top until the final phase, when it moves behind and is hidden by the image box.

To create an animation with one stationary object and an animated object revolving around it:

Step 1.

• Insert two floating boxes and add content.

Step 2.

• Select the image box and place four key-frames on its time track in the TimeLine Editor.

Step 3.

• To make the image box stationary, select the first key-frame of the image box; and then drag the image box to a convenient location

Step 4.

• The position should be the same for all four key-frames, and prevent the image box from jumping during playback. If in doubt, click all four key-frames to check the positions in the Top and Left text boxes of the Floating Box Inspector. If necessary, correct any pixel offset by hand editing the top and left coordinates or each key-frame.

Step 5.

• Click the Loop and Palindrome buttons in the TimeLine Editor to play the animation in an endless loop.

Step 6.

• Click the Play button to preview the stationary object. The image box shouldn’t be moved. If any motion occurs, return to step 4 and correct the Top and Left coordinates. Now, you’ll insert four key-frames and assign text box positions to them.

Step 7.

• Select the text box and insert four key-frames on its time track in the TimeLine Editor. Place each key-frame directly below the image box key-frames to synchronize them, as the following illustration.

• Two-time tracks will appear in the TimeLine Editor. Each holds four key-frames.

Step 8.

• Position the text box relative to the image box:

  1. Select the first key-frame of the text box; then drag the text box to a position to the left of the image box, aligning it vertically with the center of the image box.
     

  2. Select the second key-frame of the text box; then drag the text box horizontally on top of the image box.
     

  3. Select the third key-frame of the text box; then drag the text box horizontally to the right of the image box.
     

  4. Select the last key-frame of the text box, and then drag the text box horizontally on top of the image box.

Step 9.

• Define the stacking order for all four key-frames, both for the text box and image box.

  1. Select the first key-frame of the text box. In the Floating Box Inspector, enter 2 in the Depth text box.
     

  2. Select the first key-frame of the image box. In the Floating Box Inspector enter 1 in the Depth text box.

1. Current coordinates
   

2. Selects the shape of the animation path
   

3. Selects a key-frame color
   

4. Sets the stacking order
   

5. Sets visibility

Step 10.

• Repeat step 9 for the second and third key-frames to stack the text box on top of the image box.

Step 11.

• Reverse the stacking order for the time span after the last key-frame:

  1. Select the last key-frame of the text box in the Floating Box Inspector and enter 1 in the Depth text box.
     

  2. Select the last key-frame of the image box. Enter 2 in the Depth text box of the Floating Box Inspector.

Step 12.

• Click the Play button to preview your animation. On returning from the farthest right point of the animation path, the text box should disappear behind the image box.

How to work with Action in Animating a Web Page

To work with Action in Animating a Web Page

Actions allow you to add sound, trigger the playback of scenes, dynamically change the content of images, and control other processes in the browser window. You can select them in the Action Inspector, or attached to an image or text, in the Actions tab of the Button and Text Inspectors.

How to work with Time Tracks in Animating a Web Page

To work with Time Tracks in Animating a Web Page

Allow you to insert key-frames in a dedicated time track for each floating box, and adjust its timing and location. Each single track accepts multiple key-frames, which you can place where you want.

How to work with Key-Frames in Animating a Web Page

To work with Key-Frames in Animating a Web Page

Mark points on the time track of an animation sequence which some of the specific change in property occurs. These points include changes in direction within the animation path as well as modifications of general properties, such as visibility and stacking order. For each key-frame, you can control the position of the associated floating box by dragging it to the desired location in the document window. Moreover, the distance between two key-frames determines the playback speed: The shorter the distance, the faster the animation will play back and vice versa.

How to work with Frames in Animating a Web Page

To work with Frames in Animating a Web Page

Frames are the individual pictorial units of an animation. As used in connection with video display systems, frames are images that are played back in a rapid sequence to create a visual effect of motion. The number of frames per second (FPS) controls the animation’s playback speed. The more frames per second you assigned to an animation, the smoother the impression of fluid motion. However, if you exceed the capabilities of the viewer’s computer, frames will be skipped.

How to work with Scenes in Animating a Web Page

To work with Scenes in Animating a Web Page

This enables Web authors to include multiple animations in the same Web page. All scenes share the same document and TimeLine Editor windows. You can create multiple scenes for each page and have them play back automatically (default), trigger them using scripted actions, or provide buttons for the viewer to click.

How to work with Animation Web Page

To work with Animation Web Page

The advanced animation tool lets you create full-scale animations to maximize the visual impact of your pages. You can move objects along linear, curved, or random zig-zag animation paths. You can hide them temporarily, and change their stacking order. By combining all those features, you can produce amazing visual effects—for example, display two items that seem to revolve around each other.

You can use the TimeLine Editor to set key-frames and paths for animated objects.

1. Time cursor
   

2. Auto-play button
   

3. Scenes popup menu
   

4. Actions Track
   

5. Time tracks
   

6. Key-frame
   

7. Loop and Palindrome controls
   

8. Playback buttons
   

9. Frames per second

How to create a URL Pop-Up

To create a URL Pop-Up

The URL Pop-up item inserts a pop-up menu with Web sites or local pages that offers shortcuts to other locations on the Web. You can add as many destinations as necessary and edit both their labels and their URLs.

To insert and edit a URL pop-up menu:

Step 1.

• Drag the URL Pop-up icon from the Cyber-Objects tab of the Palette to your document.

Step 2.

• In the URL Pop-up Inspector, click New to create a new menu item.

Step 3.

• In the Label text box, enter a label that viewers will see in the pop-up menu.

Step 4.

• Enter a URL of a site on the Web or the path and filename of a local page, or click Browse and use Point and Shoot to select a destination.

Step 5.

• Create additional menu items. You can select an item in the list by clicking the Duplicate and then edit the item.

Step 6.

• To change the position of an item in the pop-up menu, select it in the list box; then use the Up and Down arrow buttons that are next to the scroll bar to shift it to the desired position.

Step 7.

• To remove an item, select it and press Delete.

Step 8.

• To make the new URL appear in a frame set, click on the Detail tab of the URL Pop-up Inspector and use the target text box or pop-up menu to specify the window or frame where you want the URL to appear.

Step 9.

• Preview the pop-up menu in your browser to verify that its links work.

How to create a Rollover Button

To create a Rollover Button

The animation effect occurs by instructing the browser to toggle between two (or three) slightly different images of the same button.

The first image determines the normal appearance of the button, that is, how it looks while the mouse pointer is anywhere else on the page. The second image is a highlighted button that shows when the mouse pointer is on top. The third image appears when the button is clicked. You can use the button image as a hyperlink to another location, provide text that displays in the Web browser as the viewer moves over the button, and assign a pre-built Go-Live action to the button.

How to add Date and Time Stamps

To add Date and Time Stamps

The Date and Time feature lets you add a date and time stamp—for example, at the bottom of your page—letting viewers see when your site was last changed.

To insert a date and time stamp:

Step 1.

• If you want descriptive text before the date or time stamp (for example "Last revised:"), you ought to type in the text.

Step 2.

• Drag the Date and Time icon from the Cyber-Objects tab in the Palette to the place in the document window where you want the date or time stamp.

Step 3.

• Set up the date format in the Date and Time Inspector:

  1. Choose the U.S. option from the Format menu in the Date and Time Inspector, or choose any other of the numerous country-specific date and time formats if your page contains material in a foreign language.
     

  2. Select a format for the date and time item you have added—for example, 1/28/98.

Step 4.

• To add a time stamp, type in a separator if desired (for example, "at "); then drag another Date and Time icon from the Cyber-Objects tab to the place in the document window where you want the time stamp.

Step 5.

• Choose a time format in the Date and Time Inspectors—for example, 5:43:07 PM.

Step 6.

• Save your page. The date and time stamp will display the exact time when you used the save command.

How to specify the Attributes

To specify the Attributes

Step 1.

• First of all, you have to select the frame that you want to modify.

Step 2.

• To specify a size for the frame in the Frame Inspector, you have to do one of the following:

  1. Choose Scale from the pop-up Size menu if you want to size of the frame automatically when a viewer resizes the browser’s window.
     

  2. Choose Pixel from the Size pop-up menu, and enter the desired size in pixels if you don’t want the frame to be resizable. For example, use this technique if the frame will display a small image of known dimensions.
     

  3. Choose Percent from the Size pop-up menu if you want the frame have a fixed ratio relative to the overall height or width of the frame set. Then use the Size text box to preset a percentage. For frames with horizontal orientation, this attribute controls the relative height. For frames with vertical orientation, it controls the relative width.
     

  4. Choose Pixel or Percent from the Size pop-up menu, and drag the frame border to the desired size.

Step 3.

• In the Name text box, type in a name for the frame.

Step 4.

• And then select an option from the Scrolling pop-up menu:

  1. Auto hides the scrollbar if it you don’t need it and shows it if the content is too large for the frame.
     

  2. Yes shows the scrollbar at all times.
     

  3. No hides the scrollbar.

How to create a Frame Set

To create a Frame Set

Step 1.

• First of all, you have to create the HTML pages that you want in your frame set.

Step 2.

• And then choose the open a new document window, and click the Frame Editor tab at the top of the window.

Step 3.

• From the Frames tab of the Palette, drag a frame configuration into your document window.

Step 4.

• After that select the frame set by clicking any of its horizontal or vertical dividers.

Step 5.

• Set the frame set options in the Frame Set Inspector.

  1. Click an Orientation button in the Frame Set Inspector to arrange the dividers in the frame set horizontally or vertically.
     

  2. To resize the border, click any divider in the document window, select the Border Size option, type a value in pixels, and press Enter.
     

  3. To assign a color to all dividers in the frame set, click any divider in the document window, select the Border Color option, and then drag a color from the Color Palette to the Border Color color field. This color overrides the gray border that most Web browsers display by default.

Step 6.

• Click a frame, and give it a descriptive name.

Step 7.

• Save the frame set document and make sure to save it with an .html extension.

How to add Frames to a Web Page

To add Frames to a Web Page

1. Click to switch to the Frames Editor view.
   

2. The name of the frame appears here.
   

3. Icons representing pages that appear in the individual frames.
   

4. Click the separator to select the frame set, or drag it to resize frames relative to each other.

The Frames tab of the Palette contains a large selection of frame sets that can be dragged to your document window when you want to create a Web page with frames. You can display a preview of the frame content directly in the Frames view, without a browser. You can then make corrections on the spot by double-clicking the frame content or by dragging and dropping an alternative page.

How to preview Cascading Style Sheets

To preview Cascading Style Sheets

The Layout View Controller contains a selection of tools for previewing pages formatted with cascading style sheets.

1. Preview elements with negative margin values.

2. Preview a page on multiple platforms.

To use CSS options in the Layout View Controller:

Step 1.

• In Layout view, click on the Eye button in the upper right corner of the document window to open the Layout View Controller.

Step 2.

• Select Use Style-Sheets to toggle CSS formatting on and off and check if the page looks acceptable in plain HTML.

Step 3.

• Select Allow overlapping paragraphs to preview the elements with negative margin values grow into the adjacent elements.

Step 4.

• Select the options from the Root menu one by one to simulate the look of your page in Windows-based or Macintosh-based browsers.

• This previewing feature is based on the default style sheets stored in the CSS tab of the Web Database.

Step 5.

• Select an option from the Links menu to mark up hyperlinks with extra CSS formatting.

Step 6.

• And then choose the option from the Mark Style menu to mark elements formatted with classes or IDs.

Step 7.

• After that select an option from the Links menu to mark tags formatted with tag selectors.

How to apply an ID from Internal Style Sheets

To apply an ID from Internal Style Sheets

Step 1.

• Note the name of the desired ID from the Style Sheet window.

Step 2.

• In the Source view of the document window, find the paragraph or block of text to which you want to assign the ID, and remove all other formatting to reduce the risk of ambiguity.

Step 3.

• If the text that you have to reformat is a paragraph, hand-edit the

  tag by inserting the ID as an attribute in the start tag.

• For example, if the ID name is #headerbox, edit the code as follows:

Your original source code looks like this:

TravelEZ

After you insert the ID attribute, your source code should look like this:

TravelEZ

Step 4.

• If the text that you have to reformat is a block of text within a paragraph, you will have to enclose that text in a or

  tag and insert the ID as an attribute in the start tag.

• For example, if the ID name is #headerbox, edit the code as follows:

  Your original source code looks like this:

  Welcome to TravelEZ

  After you insert the tag with the ID attribute, your source code should look like this:

  Welcome to TravelEZ

Step 5.

• Switch back to Layout view is to view the effect.

• If you are not satisfied with the result, select the ID style in the Style Sheet window, and edit its properties as desired.

How to apply Classes Styles from Internal Style Sheets

To apply Classes Styles from Internal Style Sheets

Do one of the following:

1. To create an inline style for the selected text in a paragraph, in the Style tab of the Text Inspector, select the checkbox in the Inline column for the style that you want to apply.
   

2. To format an entire paragraph with a style, click on the paragraph and the Style tab of the Text Inspector. And then select the checkbox in the Par column for the style, which you want to apply.
   

3. To create a division that is disconnected from the normal flow of HTML, click on the paragraph and Style tab of the Text Inspector. Select the checkbox in the Div column for the style, which you want to apply.
   

4. To apply a format to the body section of a page, click anywhere in the document and the Style tab of the Text Inspector. Select the checkbox in the Area column for the style that you want to apply.

How to manage Styles in Cascading Style Sheets

To manage Styles in Cascading Style Sheets

You can rename styles in the CSS Selector Inspector and duplicate or delete styles in the Style Sheet window.

To duplicate a style:

• Select the style in the Style Sheet window, and click the Duplicate button in the style sheet toolbar.

• Duplicating a style creates an exact copy that complete with all style properties.

To delete a style:

• Select the style or styles in the Style Sheet window, and choose the Edit tab from the menu bar and select Clear.

To rename a style or view its properties:

• Select the style in the Style Sheet window or the CSS tab of the Web Database.

• The styles properties are listed in the Basics tab of the CSS Selector Inspector.

• To rename the style, select the style name in the Name text box, and type a new name. Don’t forget the pound sign (#) in front of ID names.

How to work with List and others Property of Cascading Style Sheets

To work with List and others Property of Cascading Style Sheets

The List & Others tab of the CSS Selector Inspector allows you to set the appearance of the list item markers.

1. Image used as a list marker
   

2. Style for the list marker
   

3. Position of list marker relative to text
   

4. Unsupported CSS properties
   

5. Unsupported property name and value text boxes

To edit the list item marker properties:

Step 1.

• First of all, you have to select a style in the Style Sheet window, and click the List tab () in the CSS Selector Inspector.

Step 2.

• To use a custom image as a list item marker, select the Image option, type a URL for the image file, and then press Enter.

• You can also click Browse to locate the file, or use Point and Shoot to link to an image in the site window. After that select Absolute to use an absolute path.

Step 3.

• To set the type of the list item marker, choose from the following options in the Style pop-up menu.

  1. For bulleted lists, you can choose Disc, Circle, or Square.
     

  2. For numbered lists, you can choose Decimal, Lower Roman, Upper Roman.
     

  3. For alphabetical lists, you can choose Lower Alpha and Upper Alpha.

Step 4.

• To set the position where the list item marker appears, choose one of the following from the Position pop-up menu:

  1. Inside sets the list item marker flush with the second, third, and following lines of text.
     

  2. Outside adds a first-line indent, letting the list item marker stand out from the rest of the text (like the bullet at the start of this item).

How to work with Background Property of Cascading Style Sheets

To work with Background Property of Cascading Style Sheets

The Background tab of the CSS Selector Inspector lets you set the background of the block (or box) generated by a style. You can use an image or color as a background.

Step 1.

• First of all, you have to select a style in the Style Sheet window, and then click the Background tab in the CSS Selector Inspector.

Step 2.

• To set a background image, select the Image option, type a URL for the image file, and then press Enter.

• You can also click Browse to locate the file, or use Point and Shoot to link to an image in the site window.

• Select Absolute to use an absolute path.

• When you set a background image and a background color that will be used when the image is unavailable.

Step 3.

• To set a background color, choose one from the Colors pop-up menu, or drag a selection from the Web-Safe Colors tab () of the Color Palette.

Step 4.

• To tile image horizontally, vertically, or in both directions, choose an option from the Repeat pop-up menu.

  1. Repeat tiles the image both horizontally and vertically.
     

  2. Repeat x tiles the image horizontally.
     

  3. Repeat y tiles the image vertically.
     

  4. Once sets this property to no-repeat, disabling tiling.

Step 5.

• To set a background to scroll or not scroll with other elements on the page (background-attachment property), choose an option from the Attach pop-up menu.

  1. Choose Scroll if you want the image to scroll.
     

  2. Choose Fixed if you don’t want the image to scroll.

Step 6.

• To set the position of the image within the element block (or box), choose a length unit, a percentage, or any of the Left, Center, Right, or Top, Center, Bottom keyword options from the Top and Left Units pop-up menu, type a number in the Top and Left text boxes, and then press Enter.

How to work with Border Property of Cascading Style Sheets

To work with Border Property of Cascading Style Sheets

The Border tab of the CSS Selector Inspector lets you set the borders of the block (or box) generated by a style, including line width, color, and line style.

1. Line width, color, and line style for each physical border
   

2. All Borders controls

To edit the border properties of a style:

Step 1.

• First of all, you have to select a style in the Style Sheet window, and then click the Border tab in the CSS Selector Inspector.

Step 2.

• To set the border width for the top, right, left, or bottom borders, choose a unit from a Units pop-up menu and type a number in a border text box. After that press Enter.

• Use the All Borders controls to set all of the four borders at once.

Step 3.

• Choose a border color from the Color pop-up menu, or drag a selection from the Real Web Colors tab of the Color Palette.

Step 4.

• Finally, choose a line style from the Line Style pop-up menu.

How to work with Position Property of Cascading Style Sheets

To work with Position Property of Cascading Style Sheets

The Position tab of the CSS Selector Inspector lets you define the positioning properties of any floating element formatted with the style, including position, clipping behavior, rank in the stacking order, overflow behavior, and visibility.

1. Sets control that position floating elements.
   

2. Sets stacking order of floating elements.
   

3. Sets display properties of excessive content in elements.

To edit the positioning properties of a style:

Step 1.

• First of all, you have to select a style in the Style Sheet window, and then click the Position tab in the CSS Selector Inspector.

Step 2.

• And then choose the select a positioning method from the Kind menu:

  1. Choose Absolute, and then type the coordinates (preferably in pixels) in the Left and Top text boxes to specify the position of the floating element with respect to the upper left corner of the browser’s main display area.
     

  2. Choose Static to let the element flow with the text.
     

  3. Choose Relative, and then type the coordinates (preferably in pixels) in the Left and Top text boxes to specify the position of the element with respect to the parent element.

Step 3.

• To specify the size of the element, type in the measurements in the Width and Height text boxes.

Step 4.

• To specify where and how the element is visually cropped when it overlaps with the adjacent elements, you have to select a clipping method from the pop-up menu:

  1. Choose Auto to let the browser determine the clipping properties.
     

  2. Choose Rect to crop the element to a rectangular box, and then type the measurement by which the element is to be cropped in the Top, Right, Bottom, and Left text boxes.

Step 5.

• Set the stacking order of floating elements by assigning a numeral to each layer in the Z-Index text box.

• If two elements overlap, the one with the higher z-index conceals a portion of the other.

Step 6.

• In the Overflow pop-up menu, set the overflow property to determine how the element will behave if the content outgrows to specified size. Choose any of the following options:

  1. Visible causes the element to grow with its content.
     

  2. Scroll adds a vertical or horizontal scrollbar to the element.
     

  3. Hidden hides excessive content.
     

  4. Auto defaults to the browser’s preferences for handling excessive content.

Step 7.

• In the Visibility pop-up menu, set the visibility property to determine whether the element is displayed or not when the browser loads the page.

• The visibility property is useful, as an initial setting that scripting will override. You have choose any of the following options:

  1. Inherited assumes the visibility property of the parent element.
     

  2. Visible lets you display the element when the browser loads the page.
     

  3. Hidden hides the element from view.

How to work with Text Property of Cascading Style Sheets

To work with Text Property of Cascading Style Sheets

The Text tab of the CSS Selector Inspector lets you define spacing, case, and alignment properties for the current style.

To edit the text spacing, case, and alignment properties:

Step 1.

• Select a style in the Style Sheet window, and click on the Text tab in the CSS Selector Inspector.

Step 2.

• To set the text indent, choose a length unit or a percentage from the Units pop-up menu, and type an indentation in the Text Indent text box, and then press Enter.

Step 3.

• To set the word spacing (add to the default word spacing), choose a length unit from the Units pop-up menu, type a number in the Word Spacing text box, and then press Enter.

Step 4.

• To set letter spacing (adding to the default space between letters), choose a length unit from the Units pop-up menu and type a number in the Letter Spacing text box, and then press Enter.

Step 5.

• To set vertical alignment (the vertical positioning) of an element, you ought to type in a value and choose an option from the pop-up menu:

  1. Baseline aligns the baseline of the element with the baseline of the parent element.
     

  2. Sub subscripts the element.
     

  3. Super superscripts the element.
     

  4. Top aligns the top of the element with the tallest element on the line (relative to the formatted line that the element is a part of).
     

  5. Text Top aligns the top of the element with the top of the parent element’s font.
     

  6. Middle aligns the vertical midpoint of the element (typically an image) with the baseline plus half the x-height of the parent.
     

  7. Bottom aligns the bottom of the element with the lowest element on the line (relative to the formatted line that the element is a part of).
     

  8. Text Bottom aligns the bottom of the element with the bottom of the parent element’s font.

Step 6.

• To set the small caps, you have to choose the Small Caps from the Font Variant pop-up menu.

Step 7.

• To set the text case (Capitalize, Uppercase, or Lowercase), you have to choose an option from the Transformation pop-up menu.

Step 8.

• To set the text alignment (Left, Center, Right, and Justify), you have to choose an option from the Alignment pop-up menu.

How to work with Font Property of Cascading Style Sheets

To work with Font Property of Cascading Style Sheets

The Font tab of the CSS Selector Inspector lets you define a font family and make the font style settings, including color, font size, and line height.

1. Font text box
   

2. Moves selected font in the list
   

3. Font Set pop-up menu
   

4. Font pop-up menu

To edit the font properties of a style:

Step 1.

• First of all, you have to select a style in the Style Sheet window, and click the Font tab () in the CSS Selector Inspector.

Step 2.

• And then choose the a font color from the Color pop-up menu, or drag in a selection from the Real Web Colors tab () of the Color Palette to set the foreground color property.

Step 3.

• Enter a font size in the Size text box and choose an absolute, relative, length unit, or a percentage from the Units pop-up menu, and then press Enter.

Step 4.

• Enter a number in the Line Height text box. Line height is the distance between the baselines of two adjacent lines of text. Select a unit (use percent to maintain scalability) from the Units pop-up menu, and then press Enter.

Step 5.

• Choose a font style from the Style pop-up menu.

• After that choose Unchanged to keep an element’s current font style unchanged when the new style sheet is applied.

Step 6.

• Choose a font weight from the Weight pop-up menu.

• Values 100-300 are lighter than normal, and values 500 to 900 are heavier than normal.

• Lighter and Bolder applies font weights that are relative to the weight inherited from the parent element.

• Unchanged keeps an element’s current font weight unchanged when the new style sheet is applied.

Step 7

• Choose the style’s preferred font family and alternate font families to use if the font is not available on the Web viewer’s computer.

• To add font families to the Font Family list, do one of the following:

  1. Choose a font set from the font set pop-up menu.
     

  2. Click New, and choose a font from the font pop-up menu; or type a font name, and then press Enter.
     

  3. To change the order of preference, select an entry from the list, and use the Up button and the Down button to shift the selection.

Step 8.

• Finally, select the font properties in the Decoration section to set a text-decoration property.

How to work with Block Property

To work with Block Property

The Block tab of the CSS Selector Inspector lets you define the properties of the block (or box) generated by the current style, including its visual and no visual properties.

1. Sets invisible element margins.
   

2. Sets floating element position and size.
   

3. Sets distance between border and element content.
   

4. Formats element as a floating box. E. Clears or allows floating boxes on either side of the element.

To edit the block (box) properties of a style:

Step 1.

• Select a style in the Style Sheet window, and click the Block tab in the CSS Selector Inspector.

Step 2.

• To set the margins for a block (or box) element, choose a length unit or a percentage (recommended for better scalability) from the Units pop-up menu, and then type a number in any of the Top, Right, Left, and Bottom Margin text boxes.

• Or use the All Margins text box to specify the margin in all four directions at once. And then press Enter.

• You can also decrease the spacing between surrounding elements.

• Negative values cause two elements to overlap.

Step 3.

• In the Padding section, set the spacing between the border and the content of any element formatted with the current style.

• Choose a length unit or a percentage (recommended for better scalability) from the Units pop-up menu, and then type a number in any of the Top, Right, Left, and Bottom Padding text boxes.

• You can also specify the spacing in all four directions at once, use the All Pad-dings text box and then press Enter.

Step 4.

• Under Block, set the width and height properties for any element formatted with the current style. This property is most useful with referenced elements, such as images.

Step 5.

• In the Float pop-up menu, set the float property to create an element that is not part of the normal flow of text. Choose any of the following options:

  1. Left moves the element to the left, so the text wraps on the right side of the element.
     

  2. Right moves the element to the right, so the text wraps on the left side of the element.
     

  3. None causes the element to appear where it occurs in the text.

Step 6.

• In the Clear pop-up menu, specify how an element accepts floating elements.

  1. Left moves the element below any floating element on the left side.
     

  2. Right moves the element below any floating element on the right side.
     

  3. None allows floating elements on all sides.

How to cascade Style Sheets Formatting Model

How to cascade Style Sheets Formatting Model

To cascade Style Sheets Formatting Model



Cascading style sheets are based on a simple block-oriented (or box-oriented) formatting model. Each element consists of one or more rectangular blocks (or boxes), which has a core content area with optional surrounding padding, border, and margin areas.





1.

Block (or box) width
2.

Margin (transparent)
3.

Border
4.

Padding
5.

Content
6.

Element width



This formatting model gives you much more flexibility in controlling spacing between objects. For example, by setting the top margin of one element to a negative value, you can make it grow into another element directly above it.

To best visualize the block (or box) concept, choose a background color for an element. The result is a colored block that extends over the entire width of the page and the height is controlled by its text content. You should set aside a little time to experiment with those properties—for example, set the padding to move the text within away from the edge of the block.

How to work with embedded the Style Sheets in HTML

To work with embedded the Style Sheets in HTML

Cascading style sheets are embedded in the HTML using the tag. This tag has a TYPE attribute; its value is set to "text/css" by default. TYPE="text/css" tells the browser to interpret any formatting instructions enclosed in the tag as a CSS1 style sheet and build the screen display according to the rules specified within. Although CSS1 is the predominant style sheet mechanism currently in use on the Web, this type description may reduce conflicts with future style sheet mechanisms on the Web.

The following is an example of a basic, yet complete style sheet:

You’ll notice that the rules are enclosed in HTML comment tags. These tags instruct browsers that are unaware of the style tag to ignore the tags (unknown tags are ignored).

How to work with Inheritance

To work with Inheritance

If you assign a style to an HTML tag, the children will inherit those style specifications. Suppose there are an H1 tag with a style property blue and an in-line emphasized element:

The headline is blue.

If no color has been assigned to the in-line EM element, the emphasized "is" will inherit the color of the parent element; that is, it will also display in blue. Other style properties are likewise inherited—for example, font-family and font-size.

As in hardcopy publishing, the value of a style property is often given as a percentage that refers to another property.

H1 { font-size: 24pt }

H1 { line-height: 120% }

If a property can be specified as a percentage, the browser needs to know what property that the percentage refers to. Children of H1 will inherit the computed value of line-height and be set to 28.8 pt, but they will not inherit the percentage.

How to work with Selector

To work with Selector

Unlike in a printed document, the structure of an HTML page determines the formatting. Tags that identify the position within that structure enclose the content makes it difficult to address individual items of text for formatting, thus creating a need for a different addressing mechanism. CSS1 uses selectors to solve that problem. A selector is a string of code that identifies what elements that the corresponding rule applies to. It connects the HTML page with the style sheet.

Selectors may have several components:

1. Tags: All HTML tags are possible selectors. If you use a selector, the enclosing greater than (>) and less than (<) characters is removed.
   

2. Classes: All elements inside the BODY section can be classed by adding a CLASS attribute. Classes can then be addressed in the style sheet to apply the formatting rules. A class definition consists of a period followed by string of text and a rule.

Two major classes of selectors are used with cascading style sheets:

1. Simple Selectors match elements based on the element type and/or attributes, not the element’s position in the document structure. H1 (all level 1 headers) and H1.headline (all level 1 headers with the CLASS attribute.headline) are example of the simple selectors.
   

2. Contextual Selectors match elements based on the position in the document structure. A contextual selector consists of several simple selectors; H1.headline B (all level 1 headers with the CLASS attribute.headline and bold typeface) is an example of a contextual selector consisting of two simple selectors, H1.headline and B. Future versions of Go-Live will support contextual selectors.

The ID selector is a special case that allows setting style properties on a per-element basis. It addresses a single element within the HTML document by adding an ID attribute with an alphanumeric identifier. In the style sheet, the same identifier is combined with a rule to apply special formatting. An ID definition consists of a pound sign (#) followed an alphanumerical identifier and a rule

How to create IDs in Document

To create IDs in Document

Unlike classes, which you can apply to an unlimited number of elements, IDs let you embed a specific style for a unique paragraph or range of text in your document. Use IDs for a headline with special formatting or any other text that needs unique treatment.

To create a style based on an ID:

Step 1.

• With the Style Sheet window in the foreground, click the New Ident in the style sheet toolbar. The new style is listed under ID with its name selected.

Step 2.

• In the Basics tab of the CSS Selector Inspector, type a unique ID name in the Name text box—for example, #my-header-id, and then press Enter.

• You can use any alphanumeric character string with a leading pound sign (#) as the ID name. ID names may not contain spaces.

Step 3.

• In the CSS Selector Inspector add style properties, you can see Defining style properties.

Step 4.

• Applying the ID style requires your hand-edit source code of your page.

How to apply Classes to block of Text

To apply Classes to block of Text

You can apply classes to any selected block of text, independent of the structure of the HTML document. Typical uses of classes include distinctive formatting for warning notes or other special information-carrying elements that need to stand out from the rest of the text. You can also use classes to create typographical effects, such as varying font sizes or font colors within a word.

To create a style based on a class:

Step 1.

• With the Style Sheet window in the foreground, click the New Class button in the style sheet toolbar. The new style is listed under Classes with its name selected.

Step 2.

• In the Basics tab of the CSS Selector Inspector, type a class name in the Name text box, and press Enter.

• You can use any alphanumeric character string as a class name—for example, "myboldclass". You don’t have to type the leading period.

Step 3.

• In the CSS Selector Inspector added style properties to apply the class style, select a range of text (anything from a single character to multiple paragraphs) in the document window, and use the options in the Style tab of the Text Inspector.

How to create Styles with Tag Selectors

To create Styles with Tag Selectors

One of the most useful features of cascading style sheets is the ability to reformat the visible part of an HTML document based on its structure—that is, its hierarchy of tags.

To create a style based on a tag selector:

Step 1.

• With the Style Sheet window in the foreground, click the New Tag button in the style sheet toolbar. The new style is listed under Tags, with its name selected.

Step 2.

• In the Basics tab of the CSS Selector Inspector, name the tag selector in the Name text box, and press Enter.

• Tag selectors are HTML start tags with less than and greater than (<>) characters stripped off—for example, h2 for second-level headers, p for plain-text paragraphs, I for italicized, and b for boldface inline formatting.

Step 3.

• In the CSS Selector Inspector, you have to add the style properties.

Step 4.

• Any new style properties that you add are automatically applied to paragraphs or blocks the text formatted with the tag used as the selector.

1. Basics tab of the CSS Selector Inspector
   

2. Tag selector
   

3. Style properties

How to create a Style Sheet

To create a Style Sheet

To create a style sheet, first you have to define it as an internal or external style sheet—that is either in the head section of a Web page or as a separate file. After you have defined the style sheet, you can create styles and define properties for the styles. Finally, you can reference an external style sheet from your page and apply the styles to your page elements.

To create a style sheet in the head section of a document:

Step 1.

• Click the CSS button above the main content area of the document window to open the Style Sheet window.

Step 2.

• Add styles to the style sheet. You can view the style sheet in Source view after adding the first style; it appears as a STYLE tag in the head section.

To create an external style sheet:

Step 1.

• First of all, you have to choose the File tab from the menu bar and select New Special. And then choose the New Style-sheet Document.

Step 2.

• After that add styles to the style sheet.

Step 3.

• Save the new style sheet in your site folder to ensure it appears in the site window and it’s within reach of the Point and Shoot feature. Make sure to include the .css extension in the style sheet filename.

How to toggle the Binary Format

To toggle the Binary Format

Most HTML tags are binary tags, or container tags. Binary tags enclose their content in a pair of tags, called start and end or open and close tags. A few tags, however, do not need an end tag; these are called unary tags. One of the most frequently used unary tags is the IMG tag for embedding images.

To toggle the binary format on and off:

Step 1.

• In the document window Outline view, select a binary HTML tag.

Step 2.

• Click the Toggle Binary button in the Outline toolbar. By default, both halves of a binary HTML tag are displayed. This command changes only the currently selected tag.

How to insert Attributes

To insert Attributes

You can add and edit tag attributes by using the Outline toolbar. Many tags support special formatting instructions, such as element alignment, color, and directory paths to resource files.

To add a new tag attribute:

Step 1.

• In Outline view, select the tag you wish to add an attribute to.

Step 2.

• After that click on the New HTML Attribute button on the Outline toolbar. A blank attribute appears below the other tag attributes.

Step 3.

• Type an attribute name into the text box, and then press Enter.

Step 4.

• Click the text box to the right of the name field, type in a value, and press Enter. If the attribute is valid, a color box, path pointer, or similar symbol appears to the right of the attribute name.

Step 5.

• If necessary, select options for the attribute that you choose.

How to insert Text or Comments

To insert Text or Comments

Text entered in an HTML Comment box doesn’t appear in your Web page while viewing in a browser window. You can use comments to provide useful hints for editing documents at later dates.

To add an HTML Text box or an HTML Comment box:

Step 1.

• In Outline view, select an HTML element in the outline, and then do one of the following:

  1. To add text to your page, click the New HTML Text button in the Outline toolbar.
     

  2. To add comments to your page, click the New HTML Comment button in the Outline toolbar. You can place comments anywhere in your document, even outside of the HTML container tag.

• A text box containing question marks is inserted below the current selection.

Step 2.

• Type in your text in the box. The text wraps automatically at the border of the text box.

• If you temporarily stop entering text and deselect the text box, you can resume your work by inserting the pointer to where you stopped.

How to insert New HTML Tags

To insert New HTML Tags

While working in Outline view, you can insert HTML tags and define their types and attributes. You can either enter a tag name directly or select one from the Web Database. You may want to define tag attributes to fine-tune the appearance of your Web page. The browser displays attributes control the way for a tag. Many tags support special formatting instructions, such as element alignment, color, and directory paths to resource files. Predefined attributes are available.

To insert a tag and define its type and attributes by using the Outline toolbar:

Step 1.

• In Outline view, select an HTML element in the outline.

Step 2.

• Click the New HTML Tag button in the Outline toolbar, and insert an untitled HTML tag below the current selection.

Step 3.

• To name the tag, do one of the following:

  1. Enter the desired HTML tag name in the Untitled Tag text box, and press Enter. To enter tags directly, you should be familiar with the capabilities of the targeted browser. Unsupported tags will be ignored.
     

  2. To use a tag from the Web Database deselect the tag text box, then Ctrl-click the name, and choose an HTML type from the list in the pop-up menu.

Step 4.

• To define an attribute, click the show/hide attributes triangle, and choose an attribute from the attribute pop-up menu.

Step 5.

• To assign a value to the attribute, click the triangle to the right of the attribute, and choose a value from the values pop-up menu.

How to navigate in Outline View

To navigate in Outline View

The outline that appears when you create or view a document in Outline view contains all of the essential elements of an HTML page. You can use this structure as a template and fill it with your own content.

1. HTML tag appears as box symbols.
   

2. Indents indicate an item’s position within the HTML hierarchy. The HEAD and BODY elements are indented to show that they are contained in the HTML element. The HEAD element in turn contains a TITLE element with a text box.
   

3. Start tag and the end tag are connected by vertical lines to show that they are complementary items.

1. Current selection
   

2. Start and end tag connectors
   

3. Drag and drop handle

To navigate in Outline view:

Step 1.

• First of all, you have to choose the File tab from the menu bar and select Open or File. And then choose the New followed by Outline tab in the document window.

Step 2.

• To collapse or expand the outline, do one of the following:

  1. Click the triangle on the HTML box to collapse the outline.
     

  2. Click the triangle on the HTML box to expand a collapsed outline.

Step 3.

• To navigate through the outline, do one of the following:

1. To move through the Outline view, use the arrow keys. The Up arrow selects the item above the current selection, and the Down arrow picks the one below. If the pointer is in a text box, the arrow keys will move the pointer within the box.
   

2. To move through the attribute list of an element, use the arrow keys. The Up arrow selects the item above the current selection, and the Down arrow chooses the one below.
   

3. To expand or collapse the currently selected tag element, press Enter. Please note that this is only possible with binary tags (tags always used in pairs).
   

4. To repeatedly expand or collapse the current selected tag element, press Shift-Enter. Please note that this is only possible with binary tags.
   

5. To show the tag attribute list, press Enter.
   

6. To hide the tag attribute list, press Shift-Enter.
   

7. To activate the next text box, press Tab. To activate the preceding text box, press Shift-Tab.
   

8. To delete the current selection, use the Backspace key.
   

9. To activate the tag selection pop-up menu, Control-click the tag name.

How to edit in Outline View

To edit in Outline View

When you view a Web page in Outline view, the Outline toolbar will appear. You can use this toolbar to insert and edit HTML elements or use equivalent commands in the Special menu.

You can insert new tags as below for current selection in the HTML outline.

1. The New Tag button inserts a new HTML tag below the currently selected tag.
   

2. The New Attribute button inserts a new HTML attribute in the currently selected tag.
   

3. The New Text button inserts a new HTML text box below the currently selected tag.
   

4. The New Comment button inserts a new HTML comment box below the currently selected tag.
   

5. The New Custom Tag/New Foreign Item button inserts an empty tag so that you can enter non-HTML code in your document.
   

6. The Toggle Binary button toggles the tag format from unary to binary and vice versa. Unary tags don’t have an end tag, while binary tags have a start tag and an end tag.

International script systems selected by using any of the Go-Live Encoding options are displayed as clear text, enabling users to edit foreign-language content—for example, and Japanese or Chinese characters.

How to edit HTML Codes in Outline View

To edit HTML Codes in Outline View

Outline View displays HTML code elements in a hierarchical, structured view. Using the Outline view, you can generate clean, valid HTML without typing a single element of code. You can select tags and attributes from a menu or the toolbar, drag and drop items from the Palette, and use Point and Shoot to link pages and graphics. You can build Web pages from scratch, fine-tine your code; even define new tags and attributes.

To switch to the Outline view of a document, first of all, you have to click the Outline tab in the document window.

1. Outline tab
   

2. Triangle control expands or collapses element or view

To use the Outline Editor, the HTML Outline Module must be enabled in the preferences.

How to work with Linking Pages

To work with Linking Pages

What makes HTML such a unique tool is that it lets authors link the related items of information, either locally within a site or across the entire World Wide Web. Inserting hyperlinks, which use the following basic notation, links information:

A. The HREF reference

B. The visible text for the click able link

The example above shows how to reference a page that is in the same folder as the source page of the link—for example, on your hard disk. The HREF attribute contains the reference to that page. The text that the start and end tags enclose is the click able it to link that appears in the browser.

You can link to any page on the World Wide Web by specifying its exact location with a Universal Resource Locator (URL).

If you use this type of URL specification, you can only access the page via the Internet. It doesn’t work when the file is on your local hard disk.

How to work with List under Format Menu

To work with List under Format Menu

This Format menu includes numbers or characters such as bullets. Numbered lists start with

, unnumbered lists start with
. An
• tag precedes each item in the list. The list ends with a

or end tag, depending on whether it is numbered or unnumbered.

How to work with Paragraphs and Line Breaks

To work with Paragraphs and Line Breaks

It’s used a paragraph tag

or a line break tag
to break HTML text at a selected location. Both of these are start tags without end tags–that is, they do not need a closing tag. The paragraph tag creates an empty line break above the following text. It can include attributes, such as in

or

that control the alignment. The break tag lets the text wrap without creating subsequent white space.

Unlike word processing programs, inserting carriage return characters doesn’t cause the text to break; the browser will ignore them. Moreover, inserting multiple space characters will cause them to show up temporarily; all but one will be removed.

How to work with Font Styles

To work with Font Styles

It includes Bold , Italics , and Underline , as well as Teletype , a moonscape style. Additional logical styles are Strong and Emphasis , which display as boldface and italics in most (but not all) browsers, respectively.

How to work with Headings

To work with Headings

It’s displayed in a larger font size and frequently in boldface to make them stand out from the body text. The digits 1 through 6 represent the different levels in the hierarchy: H1 is a first-level heading, H2 a second-level sub-heading, H3 a third-level sub-heading, and so on.

An Introduction to HTML

An Introduction to HTML

To create an HTML page, you can use any program that can save in text-only format, such as Wordpad and Notepad.

The HTML formatting instructions are written by using markup instructions enclosed in angle brackets.

These markup instructions are referred to as "tags". Tags instruct the Web browser how to display text. The tags are hidden in the Web browser when the text is displayed.

Below is an HTML file using a basic structure:

This is the title appearing in the title bar of the Web browser.

This section contains your text with markup.

This basic structure instructs the browser to receive an HTML page, subdivided into a header and a body section.

&ldots; and the Beside the text enclosed in the section, which will be appeared in the title bar of the browser, the content of the header section is invisible to user.

The text in the body section is the visible content of the HTML page and appears in the main document window of the Web browser.

How to set Source Preference

To set Source Preference

You willbe able to customize the Source preferences that effect the behavior of the HTML syntax checker and the appearance of HTML code in Source view:

1. Source settings turn on and turn off the drag and drop support. The settings control how HTML code appears in Source view.

2. Browser Sets Settings allow you to combine browsers and revisions of the HTML specification into complex sets of HTML syntax rules.

3. Font Settings controls the screen font which displays HTML code and content in the Source Editor window.

4. Colors Settings allows you to turn syntax highlighting on and off to control the way the HTML tags and enclosed text are displayed in Source view.

5. Printing Options controls the formatting options used while printing HTML source codes.

How to check Syntax in Source View

To check Syntax in Source View

In Source View, you can check to make sure that your Web pages contain only error-free HTML codes. The built-in syntax checker will parse your HTML code against the coding rules stored in the Web Database.

To check syntax:

Step 1.

• In Source View toolbar, click the Display Errors button to check for syntax errors.

Step 2.

• Click on the Display Warnings button to check for syntax warnings. The counter next to the button indicates the number of syntax warnings.

Step 3.

• Click the Check Syntax button in the Source toolbar. The source code is verified and the syntax checker highlights the first code element presumed faulty.

Step 4.

• Correct each error, and then click the Check Syntax button again to double check that all errors have been found.

How to highlight Syntax

To highlight Syntax

While entering and editing HTML codes in Source view, the syntax-highlighting feature works in the background. It continuously monitors your code and compares it with the content and rules specified in the Web Database.

When the syntax-highlighting feature recognizes a tag, it will highlight the start and end tags, as well as tag attributes, to indicate that the syntax is completed.

To set syntax highlighting and text wrapping:

Step 1.

• First of all, you have to click the Source tab in the document window.

Step 2.

• In the Source view toolbar, you have to set the highlighting and text wrap options:

  1. Turn Syntax Highlighting Off button deactivates syntax highlighting and shows the HTML source code in the default text color.
     

  2. Detailed Syntax Highlighting button activates syntax highlighting.
     

  3. Highlight Media & Links button highlights images and media items.
     

  4. Highlight URLs button highlights references to other pages and Web locations.
     

  5. Soft Wrap button toggles the wrapping of the source at the margin of the Source Editor window to on and off.
     

  6. Display Line Numbers button indicates the code line numbers.