Animation and style sheets

L E S S O N 6 Animation and style sheets Lesson objectives To learn about animation and style sheets, you will: Suggested teaching time 35-40 minutes a b Animate text, outlines, and web pages with Dynamic HTML. It s becoming increasingly difficult to make your web pages stand out from the pack. You ll use DHTML to add motion to your text, create collapsible outlines, and apply presentation-like transitions to your web pages to help distinguish your site. Use style sheets to have greater control over how styles are applied to a web and its elements. Because of their inherent flexibility, style sheets can control entire webs, specific web pages, or even single text characters. You ll create a simple external style sheet modifying the H2 heading, and then apply it the entire web. Then you ll embed a style sheet that modifies the H3 heading within a web page. Finally, you ll create an inline style, to control a single element in this case, a hyperlink. 6-1

FrontPage 2000: Advanced Ashbury Training a Introduction to Dynamic HTML what s new The following new software feature is discussed in this topic: Dynamic HTML toolbar. Concepts > Easier to use than more complex methods, such as JavaScripts or web components, Dynamic HTML (DHTML) can be just what you need to bring your web pages to life. With this developing web page specification, you can create collapsible outlines, text animations (such as text flying in from off the screen or displayed word by word), and page transition effects (such as dissolving one page into another). You can even apply DHTML to pictures! FrontPage has a variety of features that enable you to incorporate these Dynamic HTML effects into your web site without having to program the actual code. To take advantage of Dynamic HTML effects, you ll need a browser that supports DHTML, such as Microsoft Internet Explorer 4.0 or later. Text animation Animating text in small doses adds visual interest to any web element. With FrontPage, you can use DHTML to create text animation very quickly without any programming! For example, you can select text to fly onto the screen from several directions, spiral in as a whole sentence, or drop in word by word. To use text animation, select the text you want to animate and choose Format, Dynamic HTML Effects to display the DHTML Effects toolbar (see Figure 6-1). Then select when you want the animation to occur, define the animation you want to apply, and finally adjust its settings. Save the page and preview it in a browser to test your creation. Remember, visitors to your web site will see the animations only if their browser supports DHTML. Figure 6-1: The DHTML Effects toolbar. Don t be afraid to experiment with different effects. You can easily remove a text animation by first selecting the animated text in FrontPage. Then choose Format, Remove Formatting. (Clicking on the Remove Effect button on the DHTML toolbar will also return your text to normal.) Task A-1: Animating text What you do Comments/Prompts 1. Open animationweb Display links.htm in Page view 2. Select the text VOP Links Page! You will add Dynamic HTML elements to this page. This text will be animated. 6-2

Ashbury Training Lesson 6: Animation and style sheets 3. Choose _Format Dynamic_HTML_Effects_ Use ScreenTips to identify the toolbar s various items 4. From the On drop-down list, select Page Load From the Apply drop-down list, select Fly In From the Effect drop-down list, select From Right To display the DHTML Effects toolbar. (You may want to position or dock the toolbar so it s out of the way but still accessible.) (Use Figure 6-1 as a guide.) Whenever the selected event occurs, it will trigger the DHTML effect. Apply determines how the text will be animated. Effect determines the animation s behavior when the event is triggered. 5. Observe the VOP Links Page! heading Because the Highlight Dynamic HTML Effects button on the DHTML Effects toolbar is active, the selected text area is boxed with a light shading behind it. This shading won t appear in your browser. It s just there to help you identify which elements have an effect applied to them. M If you don t have a browser that supports Dynamic HTML, then you won t see the animation. 6. Save the page, and preview it in a browser 7. Close the browser To return to FrontPage. 8. Observe the files in the Folder List The VOP Links text flies in from the right. Refresh the page to repeat the effect. FrontPage created a JavaScript called animate.js to control the DHTML effect. 9. Verify that the insertion point is within the shaded text area On the DHTML Effects toolbar, click on Remove Effect Note: This doesn t remove the supporting JavaScript (animate.js). You ll need to delete that manually. 10. Save the page 6-3

FrontPage 2000: Advanced Ashbury Training Practice Task 1. Apply a Page Load DHTML effect to the VOP Corporate Accounts! heading on accounts.htm. Save the page and preview it in a browser. 2. Close the browser. 3. Close the DHTML Effects toolbar. Page transitions Concepts > You can create page transitions, similar to those found in a presentation package, to create visual effects when viewers navigate between pages on your web site. For example, you can choose to blend, box in, circle in, wipe left or right, and many others. You can select the event for which the transition happens, such as when the user enters the page, exits the page, enters the site, or exits the site. You can also select how long the effect will last. To create a page transition effect, open the page you want in FrontPage, and choose Format, Page Transition. In the Page Transitions dialog box, select the appropriate Event, Duration, and Transition Effect. Save the file and preview it with the Preview tab or in a browser. Note: Page transitions may not be displayed consistently when you re testing them in a browser. That s because they may conflict with other page elements. For instance, if you create a collapsible outline (which we ll do in the next task) before you assign a page transition, the page transition probably won t work. However, if you assign the page transition before you create the collapsible outline, the transition will work fine. The rule of thumb is experiment. Try applying page transitions a couple of times to see if you can get them to work. If you can, you ll appreciate the effect. If you can t, look closely at other page elements to see if they may be interfering. Task A-2: Adding a page transition What you do Comments/Prompts 1. Display links.htm in Page view, if necessary 2. Choose _Format Page_Transition..._ To display the Page Transitions dialog box. 6-4

Ashbury Training Lesson 6: Animation and style sheets You might want to discuss exactly when each event will happen, and why you might want to choose certain events over others. 3. In the Event drop-down list, select Page Exit In the Duration (Seconds) text box, type 3 From the Transition Effect list, select Box Out Click on OK 4. Save the page 5. Preview the page in a browser 6. Click on the Corporate Accounts link Observe the page transition 7. Close the browser To view the effect when users exit the page. To set the time of the effect to 3 seconds. To accept the changes and close the Page Transitions dialog box. To move to the Corporate Accounts page. The accounts.htm page is revealed. Concepts > Nested lists In a bulleted or numbered list, you might want to provide supporting information to enhance a topic in the main list. You can do this by creating a nested list a list within a list. To create a nested list, add an extra blank line below the list item you want the nested list to support. On the Format toolbar, click on the Increase Indent button twice, and type the first item. Press Enter for each additional item you want to add to the nested list. Generally speaking, it s a good idea to create the full main list first, and then go back and create nested lists. Collapsible outlines and lists If a web page has outlines with multiple sublevels or bulleted lists with several second- and third-level bullets in them, it can appear overwhelming to the site visitor. To make the information easier to access, you can use FrontPage to create outlines that visitors can expand or collapse. (FrontPage uses DHTML and JavaScript to do this.) These collapsible outlines allow visitors to view as much or as little of your lists as they want by just clicking on the list or outline item kind of a now you see it, now you don t effect. You can apply collapsible outlines before you begin creating a new list, or you can apply the feature to an existing list. To create a collapsible outline for an existing list, place the insertion point on the first list item. Right-click, and from the shortcut menu, choose List Properties. Check Enable Collapsible Outlines and select whether you want the list initially collapsed. Then click on OK. When you apply this property to the top list level, it affects all list items at that level and all levels below. 6-5

FrontPage 2000: Advanced Ashbury Training Because collapsible outlines use DHTML and JavaScript, you ll need to preview the page on the Preview tab or in a browser. To expand or collapse the outline, just click on the item that contains the sublevels or nested list. Very important: Don t forget to provide some instruction or indication in your web page so visitors will know how to expand and collapse the dynamic outlines, especially if the outline is initially collapsed. Task A-3: Creating a nested list and a collapsible outline Before you begin: Make sure the DHTML Effects toolbar is closed. What you do 1. Display links.htm in Page view, if necessary Comments/Prompts Observe the Note above the bulleted list When using a collapsible outline, you need to either provide obvious visual cues (with icons) or explain to visitors how to expand and collapse the outline. 2. Place the insertion point at the end of the Telecom Trends bulleted item 3. Press R To create a new line. A new bulleted list point is displayed. M Make sure students do not press T! 4. Click on the Increase Indent button twice 5. Type AT&T: www.att.com Press s Press R 6. Type MCI: www.mci.com Press s To create a second-level bullet (a nested list). Don t press Enter. The text is recognized as a URL, and hyperlink formatting is applied. The new line is automatically entered as a nested list item. To add a second item to the nested list. Don t press Enter. (We won t be needing another bullet.) 6-6

Ashbury Training Lesson 6: Animation and style sheets 7. Right-click on Telecom Trends M Make sure students don t select List Item Properties. Choose _List_Properties..._ The List Properties dialog box is displayed. You can use the List Properties dialog box to create custom bullet points and number styles. You might want to show students the HTML code for the collapsible outline. 8. Verify that the Plain Bullets tab is selected Check Enable Collapsible Outlines Check Initially Collapsed Click on OK When a visitor first sees the outline, the sublists will be hidden. Nothing seems to have changed in FrontPage. To see the collapsible outline, you ll need to preview the page in a browser. Remind students again that the asterisk means the bullet has a nested list. Also remind them to somehow indicate nested lists in their own web pages so visitors will be able to use them. 9. Save the page, and view it in a browser Click on Telecom Trends Close the browser Maximize the browser, if necessary. To expand the list. 10. Observe the Folder List The JavaScript outline.js has been added to the list. 6-7

FrontPage 2000: Advanced Ashbury Training b Using style sheets and styles what s new The following new software feature is discussed in this topic: Template-based style sheet creation. Style types Concepts > Style sheets contain rules that determine how specified HTML styles affect web page elements. By defining all styles before applying them to web elements, the developer can quickly create a consistent look by applying the same style across an entire web, on a specific page, or for a particular web element. Using cascading style sheets (CSS) gives web developers greater control over how their pages look and how elements are displayed. Cascading refers to the hierarchical order in which different style sheet types interact when conflicts arise. The prevailing principle of cascading order is that rules cascade from general to specific and from external to local. Before you can use style sheets, the web page s CSS options need to be active. (Choose Tools, Page Options. Select the Compatibility tab, and under Technologies, check at least the CSS 1.0 option you may want to check CSS 2.0 as well, if you intend to use style sheets frequently.) In a style sheet, style rules are formed as follows: selector {property: value; property: value} In the following example, H1 is the selector, font-size and color are properties, and x-large and green are values. All properties and values must be contained within curly braces. This style rule would make all text formatted as Heading 1 green with an extra-large font size. H1 {font-size: x-large; color: green} Styles come in three flavors external style sheets, embedded style blocks, and inline styles. We ll first address external style sheets. External style sheets External style sheets are individual text files that contain style information for web elements (like the preceding H1 style example). External style sheets are called external because they are separate files and can be stored anywhere on the Internet, just so long as the web pages that use them can access them. For instance, if a web page tries to access an external style sheet that resides on your Personal Web Server, and you computer is turned off it won t be able to link to the style sheet. Template-based style sheet creation FrontPage 2000 enables you to create external style sheets right in your web. Choose File, New, Page. Select the Style Sheets tab and double-click on the Normal Style Sheet template. Use the Style toolbar to create new styles or modify existing ones. 6-8

Ashbury Training Lesson 6: Animation and style sheets The greatest benefit of using external style sheets is their change once, use many trait. For example, if you want to change the font for all H1 styles in your web, you no longer have to change every instance of the H1 style. You can link your entire web to an external style sheet that contains the specified H1 attributes. Then if you want to change the style, just change it once in the external style sheet and all H1 styles in the web will adopt the change. No fuss, no muss. Task B-1: Creating an external style sheet in FrontPage What you do Comments/Prompts 1. Choose _File New Page _ M If the Style Sheets tab isn t an option in the New dialog box, close the dialog box. Choose Tools, Page Options, and select the Compatibility tab. Under Technologies, verify that the CSS options are checked. Select the Style Sheets tab Double-click on the Normal Style Sheet template 2. Display the Style toolbar, if necessary Click on the Style button 3. In the Styles list, scroll down and select H2 Click on Modify 4. Click on Format To display the Style dialog box. To display the Modify Style dialog box. Choose _Font_ Select Arial as the Font, Bold as the Font Style, and 18 pt as the Size Click on OK twice 5. In the Styles list, observe the entry Click on OK To return to the Style dialog box. Only the modified H2 style is listed, because the List drop-down list is set to User-defined Styles instead of All HTML Tags. 6. Observe the modified style H2 { font-family: Arial; font-size: 18 pt; font-style: bold } 6-9

FrontPage 2000: Advanced Ashbury Training 7. Choose _File Save_As _ Verify that animationweb is in the Save In dialog box Name the file customstyle Click on Save Because we created the page as a new style sheet, the file type is already set to Hyper Text Style Sheet. To add the customstyle.css style sheet to the web. (See the Folder List.) 8. Close the Style toolbar Close customstyle.css Linking a page to an external style sheet Concepts > You can link a page to an external style sheet by choosing Format, Style Sheet Links. Then enter the path and location of the style sheet you want to link. You can choose to link individual pages or your entire web to a particular style sheet. Task B-2: Linking to a style sheet q Objective: To link a web page to an external style sheet. What you do Comments/Prompts 1. Display links.htm in Page view, if necessary Observe the heading VOP Links Page! 2. Choose _Format Style_Sheet_Links _ Select All Pages Click on Add It has a Heading 2 style applied, which is currently Times New Roman. To display the Link Style Sheet dialog box. If you wanted to use the style sheet for just one web page, you could click on Selected Page(s). To display the Select Hyperlink dialog box. 3. Follow your instructor s directions to locate and link to the file customstyle.css Click on OK twice 4. Observe the VOP Links Page! heading To link the page to the style sheet. The font has changed to Arial, Bold, 18 pt. The modified style in the linked style sheet (H2) affects any text in the web that uses the Heading 2 style. 6-10

Ashbury Training Lesson 6: Animation and style sheets 5. Switch to HTML view Observe the <link rel > tag near the top of the page Switch to Normal view Save the page 6. Display the Home Page in Page view Observe its heading 7. Display links.htm in Page view ( Welcome to VOP! ) It s also Arial, Bold, 18 pt because it was already tagged with the Heading 2 style when you applied the style sheet to All Pages. (Choose Window, Links.htm.) Concepts > Using embedded style blocks Another way of creating your own styles is to use an embedded style block. An embedded style block is put right into a web page s HTML code by using the <style> tag, and using the same selector, property, and value construction as an external style sheet. Because of the cascade order, embedded style blocks override any linked external style sheet, but they affect only the pages in which they re embedded. You don t have the choice to affect other pages. Consider the following example. Premise: A linked external style sheet declares that all level-one headings (H1) are displayed in blue. A web page linked to the style sheet contains an embedded style block that declares that each level-one heading will be displayed in red. Outcome: The embedded style block takes precedence over the linked style sheet because it s more local text on this web page that is contained by H1 would be displayed in red. Embedded styles are best used if you don t know where your web pages will be located. By embedding a style sheet, you guarantee that the styles will go with the web page and you don t have to worry about broken links to external style sheets. The drawback is that if you change any embedded style information on one page, you ll need to change it in every similar page. To create an embedded style block, open the web page where you want the block to reside, and choose Format, Style. Select the HTML tag you want to change, click on Modify, then Format. Change the tag s characteristics, and then close all open dialog boxes. 6-11

FrontPage 2000: Advanced Ashbury Training Task B-3: Inserting an embedded style block Before you begin: Links.htm is displayed in Page view. What you do 1. Place the insertion point in the subheading Bringing you the best... Comments/Prompts Observe the text s style information 2. Choose _Format Style _ A Heading 3 style is applied. To display the Style dialog box. In the Styles list box, scroll down and select H3 Click on Modify Click on Format Choose _Font_ To display the Font dialog box. 3. Select Arial as the Font, Italic as the Font Style, and 14 pt as the Size Click on OK three times 4. Observe the Bringing you the best heading It still has the Heading 3 style applied, but the font properties have changed to Arial, Bold Italic, 14 pt. 5. Switch to HTML view Observe the </style> tag near the top of the page Switch to Normal view The new style sheet definition for Heading 3 (H3) is embedded directly into the file. Save the page 6. Display the Home Page in Page view Observe its Distributing office products heading 7. Display links.htm in Page view It, too, has a Heading 3 style applied, but it s in Times New Roman. That s because you embedded the style block in links.htm, so it doesn t affect other web pages. (Choose Window, Links.htm.) 6-12

Ashbury Training Lesson 6: Animation and style sheets Applying inline styles to page elements Concepts > Sometimes you may want to make the formatting of a single instance of an HTML tag different from what s specified in a web page s embedded style block or its linked external style sheet. This is done by using an inline style. An inline style inserts the STYLE attribute directly into an HTML tag. (Inline styles affect only the HTML element they are inserted into.) To apply an inline style, select the element (such as a paragraph, table, or image) and choose Format, Properties. In the Properties box, click on Style to display the Style dialog box. (If the Properties box doesn t have a Style button, then you cannot change that element s style.) From the Modify Style dialog box, choose Format and then the trait you want to adjust font, paragraph, and so on. Click on OK until all the dialog boxes are closed to apply the inline style. Note: Themes use cascading style sheets. If you ve applied a theme to a page or web, try to avoid using additional embedded style blocks or inline styles. Because embedded styles override linked style sheets, pages with themes to which you apply embedded styles may not be displayed as you d expect. Finally, you shouldn t edit a theme s.css files because you might render the theme unusable. Task B-4: Using an inline style What you do 1. Right-click on the VOPlinks@vop.com hyperlink 2. Choose _Hyperlink_Properties..._ In the lower right-hand corner of the dialog box, click on Style... Comments/Prompts You will apply an inline style to the hyperlink text. The Edit Hyperlink dialog box is displayed. The Style dialog box is displayed. Click on Format Choose _Font _ 3. On the Font tab, from the Font list, select Arial Click on OK three times To select Arial as the font for the hyperlink. To close the Style and Edit Hyperlink dialog boxes. 4. Deselect the hyperlink text The hyperlink font is now Arial. 5. Switch to HTML view 6-13

FrontPage 2000: Advanced Ashbury Training 6. Observe the VOPlinks.com hyperlink code The style property is inserted within the hyperlink tag. Because it s an inline style, only this hyperlink will have this formatting. The remaining hyperlinks on the page are still set in the Times New Roman font. 7. Switch to Normal view Close the web, saving pages as necessary 6-14

Ashbury Training Lesson 6: Animation and style sheets ( Practice Unit for Lesson 6 In this activity, you will animate headings by using DHTML, create a collapsible list, and build an external style sheet and link the page to it. 1. Open practiceanimate and display the Home Page. 2. Apply a DHTML effect of your choice to the heading Welcome to my web site! 3. Make the two nested lists, below Reading and Cooking, collapsible (set them to be initially collapsed). 4. Create a new normal style sheet and use the Style toolbar to modify the H1, H2, and H3 styles so the font is Arial. Save the style sheet as mystyles 5. Link the new style sheet to the Home Page. 6. For the email address, create an inline style so the font is Arial. 7. Save the page and preview it in a browser. 8. Close the web. 6-15

FrontPage 2000: Advanced ) Wrap-up for Lesson 6 a What are some of the things you can do with Dynamic HTML? You can create text animations, collapsible outlines, and page transitions for your web pages. b What s the difference between an external style sheet and an embedded style block? External style sheets are stored as a separate file and, when linked, an external style sheet can affect individual pages or entire web sites. Embedded style blocks affect only the pages in which they re embedded and their styles override external style sheets. How does an inline style affect a web page? It doesn t. An inline style affects only a specified element within a web page. 6-16