This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
tags. You can, however, use Shift+Return on the Mac or Shift+Enter on Windows, which writes a ) tag is recognized. Div applies the style to a section of the page that is disconnected from the normal flow of HTML. tag that precedes the selected text and enter the following code: ID=”important” tag and insert the following text: ID=”space” tag. 2. Which style sheet requires you to enter code manually into your source code? a. Internal style sheet b. Element style c. ID style 3. Which style selector can be applied to selected blocks of text? a. Class style b. External style sheet c. ID styles applied as Par
tag to add space. Use Option+Spacebar (Mac) or Shift+Spacebar (Windows) to enter a nonbreaking space. To position your text more precisely, you should consider using tables or grids to lay out your page. Please read Hour 6, “Designing Pages with Tables,” and Hour 7 for more information on tables and grids.
If you have a .txt document from which you’d like to take various selections of text, it might be easier to open it right in GoLive.
,
TO DO
To Do: Copy and Paste Text from Within GoLive To copy and paste text from within GoLive, complete the following steps: 1. In the menu select File, Open, or press Command+O (Mac) or Control+O (Windows). 2. From the dialog box, navigate through your hard drive to the .txt document that you want to open in GoLive. Select the document and click Open (see Figure 4.1).
4
Hour 4
,
78
FIGURE 4.1 Navigate through your hard drive, choose the text document you want to open in GoLive, and click Open.
, GoLive opens your .txt document in its own window. From there you can copy and paste the text you want to use on your HTML page using the steps described in the previous section.
Opening a Page Exported from a Word Processor Using a page exported from your word processing application is easy to do in GoLive if you follow a few simple rules.
, TO DO
To Do: Open an Exported Page in GoLive To open a page that you created in your word processing application in GoLive, follow these steps: 1. Open the document in your word processing application and resave it as an HTML file. You typically do this by choosing Save As from the File menu. In the Save dialog box, name the file using .html or .htm as the file extension. 2. Place the file into the Site Root folder of your Web site either by saving the file directly into the Site Root folder, copying and pasting it into the folder (PC), or dragging the file from the Mac Finder or Windows Explorer into the Site file. 3. Click the Refresh View button in the Toolbar, which prompts GoLive to add the new file in the Files list of the Site file.
,
4. Double-click the file in the Files list to open it.
You can open an individual page exported from your word processing application even if it is not part of your Site file. Simply choose File, Open and navigate through your hard drive to the file. However, if you intend to use
Formatting and Stylizing Text
79
the page as part of a site, it’s better to place it into your Site file and work with it from there.
Dragging from a Text Document or Another HTML Page You can also drag text from one document to another in GoLive. This can be done from both a text file (.txt) and an HTML file (.htm or .html).
, TO DO
To Do: Dragging Text to Another Document To do this, you need two documents: one containing the text you want to move, and the document to which you want to move it. Proceed with these steps: 1. Position the two documents next to each other on the screen. 2. Select the text that you want to move. 3. Click the mouse button down on the selected text and begin to drag it to the other page. 4. You will be able to see the insertion point of the cursor as you drag your selection onto the new page. Release the mouse button when the insertion point is where you want it to be (see Figure 4.2). FIGURE 4.2 Release the mouse button when the insertion point is where you want it to be.
, To easily see both pages simultaneously when dragging items from one HTML page to another, use the viewable width setting at the lower-right corner of the document window to size the pages to 200 pixels.
4
80
Hour 4
Typing Directly onto Your Page The simplest, most direct way of getting text onto your page is to put the cursor on the page and begin typing. But if you have even the most minimal experience with HTML you know that without the use of some additional formatting tools, your text will run as if it were in one long text path. The example shown in Figure 4.3 shows a page with and without a table. A table is just one way to format a page and is discussed in great detail in Hour 6. FIGURE 4.3 HTML pages need some formatting or else the text and images will just flow and flow.
Page without Table
Page with Table
Formatting and Stylizing Text
81
A nice feature in GoLive for new users is the layout grid. A layout grid is essentially a table, but you don’t have to think about the complexities of creating it as you add objects to your page. You will use one in this example just to get you familiar with using a text box in a layout grid, but layout grids are discussed in more detail in Hour 7. A text box creates a cell to type into and is placed on top of a layout grid. It can be moved around the page for a more precise layout.
, TO DO
To Do: Adding a Text Box To use a text box, complete the following steps: 1. Select Window, Objects from the menu. 2. Click the Basic button, which is in the first section of the Objects palette. 3. Drag the Layout Grid icon to your document window and drop it onto the page, or double-click the icon to insert it at the point of your cursor (see Figure 4.4).
FIGURE 4.4 Drag a layout grid onto your HTML page.
4
4. Drag the Layout Text Box object from the Basic section of the Objects palette onto the layout grid and drop it into position where you want it. 5. You can resize the text box by dragging one of the blue handles that appear along its edges (see Figure 4.5). If you do not see the blue handles, you might have deselected the text box. Select it again by clicking once on its border.
,
FIGURE 4.5 Drag a text box onto your layout grid and resize it.
Hour 4
,
82
,
6. When your text box is sized to your liking, place your cursor into the text box and type your text.
Viewing Your Text with the View Palette When working with text, it is important that you preview your pages in several browsers, on both major platforms, and even on different monitor sizes to see for yourself the differences between them all. Text size varies greatly from Macs to PCs, and your carefully planned layout might end up looking entirely different (read: nasty) when you see how it looks on another platform. GoLive has a little feature that simulates the differences in how text will display across browsers and platforms. It is called the View palette.
With basic HTML coding you have little control over this problem, but you learn some tricks to help in Hour 18.
, TO DO
To Do: Using the View Palette To use the View palette, complete the following steps: 1. Open an HTML page. 2. Select Window, View from the menu. 3. In the View palette, there is a Profile pop-up list of browsers and platforms. Select one and your page is temporarily altered to mimic the way it will look on that browser and platform. To remove the view, select Adobe GoLive from the pop-up list (see Figure 4.6).
FIGURE 4.6 Select the browser and platform from the popup list to get a general idea of how your page will look.
,
Formatting and Stylizing Text
83
Formatting and Stylizing Text Adding a bit of formatting and a style or two to your text can add just the right visual punch. Lines and lines of text flowing from one margin of the page to the other, with no formatting, can be difficult for the eye to follow and discouraging for the reader. Adding headings, bulleted lists, and a bold word here and there goes a long way toward making your text easier to read. This section uses standard HTML tags to create text formatting, but you can be much more consistent and create more text effects with less work by using cascading style sheets. The only drawback is that the cascading style sheets require a browser that is version 4 or higher. Follow this lesson to get familiar with text formatting in general. Then check out Hour 18 if you want more information about new ways to format your text.
Aligning Text Up on the Toolbar, you will see a number of buttons that you can use to set your text the way you want it. • To align left—Click the Align Left button on the Toolbar; or choose Type, Alignment, Left from the menu; or press Shift+Command+L (Mac) or Shift+Control+L (Windows) on your keyboard. • To align center—Click the Align Center button on the Toolbar; or choose Type, Alignment, Center from the menu; or press Shift+Command+C (Mac) or Shift+Control+C (Windows) on your keyboard. • To align right—Click the Align Right button on the Toolbar; or choose Type, Alignment, Right from the menu; or press Shift+Command+R (Mac) or Shift+Control+R (Windows) on your keyboard (see Figure 4.7). FIGURE 4.7 Aligning text to the right lines up the text at the right margin of the page or Layout text box.
4
84
Hour 4
When aligning text in HTML, the formatting will be applied to the entire paragraph. You cannot justify by line. This is not a limitation of GoLive, but rather of HTML. The
tag enables you to separate lines and align them independently.
Creating Headers Creating a header, which is akin to making a headline, is simple to do in GoLive. Header sizes range from 1–6, with 1 being the largest and 6 the smallest. Most often you will use Header 1, 2, or 3, and seldom, if ever, use 4, 5, or 6, which produce such a small headline as to be pointless. Header styles affect entire paragraphs, not merely one word or sentence.
, TO DO
To Do: Applying a Header Size To apply a header size to a piece of text, complete the following steps: 1. Select the text you want to change into a header. You can also just have your cursor in the line of text that you want to change. 2. In the Toolbar, select a header size from the drop-down list all the way to the left; or choose Type, Paragraph Format, and then a Header size (1–6) from the menu; or press Shift+Option+Command+(0–6) (Mac) or Shift+Alt+Control+(0–6) (Windows). Choosing 0 removes the header from the text (see Figure 4.8).
FIGURE 4.8 Applying Header 1 to a piece of text turns it into a large, bold headline.
, As with justification, applying a header size to text in HTML will affect the entire paragraph. This is not a limitation of GoLive, but rather of HTML. Also, if using the keyboard commands, you must use the numbers above the letters on the keyboard rather than the numerical keypad on an extended keyboard. Finally, be careful about applying other formatting—such as bold or font size 4—to text that has had a header size applied to it. This often leads to inconsistent results among various browsers.
Formatting and Stylizing Text
85
Applying Bold, Italic, or Teletype Styles to Text You might want to emphasize a word or phrase by making it bold or italicize text that is a quote. Applying styling to text in GoLive is quite simple. First, select the text to which you want to apply a style. Then choose one of these options: • To make the selection bold, click the B in the Toolbar; or choose Type, Style, Bold from the menu; or press Command+B (Mac) or Control+B (Windows) on your keyboard. • To make the selection italicized, click the I in the Toolbar; or choose Type, Style, Italic from the menu; or press Command+I (Mac) or Control+I (Windows) on your keyboard. • To make the selection teletype, click the T in the Toolbar; or choose Type, Style, Teletype from the menu; or press Shift+Command+T (Mac) or Shift+Control+T (Windows) on your keyboard. There are other style options in the Type, Style menu, including Underline, Strikeout, Superscript, Subscript, and Blink. Some of them (on Mac only) have corresponding keyboard shortcuts. To see the keyboard shortcuts, pull down the style menu and take a look at the list.
Setting the Font Size A font size of 3 is the size that a browser will display text when no particular size is specified. If you so desire, you can change the font size in GoLive. Setting the font size to 2 will display text one size smaller than the default, whereas a font size 4 will be one size larger. The font size differs from the header size in that it can be applied to a few words, or even one word, without affecting the rest of the paragraph. You can select a font size from 1 (the smallest) to 7 (the largest).
,
, TO DO
To Do: Applying a Font Size To apply a font size to a piece of text, complete the following steps: 1. Select the text. 2. Choose the size from the drop-down list in the Toolbar. You can also choose Type, Size, (1–7) from the menu. You can also elect to use a plus sign (+) or minus sign (–) to designate the size of the text. Choosing +1 means one size larger than the default size. –1 means one size smaller, and so on (see Figure 4.9).
4
Hour 4
,
86
FIGURE 4.9 Select some text and apply a font size to it using the drop-down list in the Toolbar.
, Changing Text Color You can make a header stand out even more by giving it a color, or if you have a dark background color on your page, you might need to make the text lighter.
, TO DO
To Do: Applying Color To apply color to a piece of text, complete the following steps: 1. Select the text to which you would like to add the color. 2. Control+click (Mac) or right-click (Windows) the text color cell in the Toolbar to reveal the Web safe color palette (see Figure 4.10). 3. Click the color of your choice. The color you selected is applied to the text. To change it to a different color, repeat the process. You can also Option+Click (Mac) or Shift+Click (Windows) to display the system color palette.
,
FIGURE 4.10 Control+click (Mac) or right-click (Windows) the text color cell in the Toolbar to reveal the Web safe color palette.
,
Formatting and Stylizing Text
87
Here is another way to add color to text: 1. Select the text to which you would like to add the color. 2. Click the text color cell in the Toolbar to open the Color Palette, or choose Window, Color from the menu. 3. The color palette is comprised of several individual color palettes. Select an individual color palette by clicking one of the buttons across the top of the color palette, or by choosing from the or the fly-out menu (see Figure 4.11). 4. Click the color of your choice. As long as your text remains selected, you can apply a different color to it by simply clicking another color in the palette.
FIGURE 4.11 Select an individual color palette from the fly-out menu.
4 , If you have misplaced the buttons in your Color palette, use the Palette menu to choose Show Buttons and they will reappear!
To remove color from a piece of text, choose Type, Remove Color from the menu.
Creating Lists from Text Bulleted and numbered lists are a very handy way of organizing information, particularly when you have large amounts of text to manage. Creating lists in HTML is not terribly difficult, but in GoLive it’s a no-brainer. Here’s how to do it.
,
TO DO
To Do: Making a Numbered List To make a numbered list, complete the following steps: 1. Type your list, separating each item with a return. 2. Select the list you have just typed. 3. Click the Numbered List button in the Toolbar, or choose Type, List, Default Numbered List from the menu (see Figure 4.12).
Hour 4
,
88
FIGURE 4.12 To make a numbered list, type your list, select it, and then click the Numbered List button on the Toolbar.
, , TO DO
To Do: Making a Bulleted List To make a bulleted list, complete the following steps: 1. Type your list, separating each item with a return. 2. Select the list you have just typed. 3. Click the Unnumbered List button in the Toolbar, or choose Type, List, Default Unnumbered List from the menu (see Figure 4.13).
Want to create a new line without causing it to become a list item? Use the Line Break command
Shift+Return.
FIGURE 4.13 To make a bulleted list, type your list, select it, and then click the Unnumbered List button on the Toolbar.
, , TO DO
To Do: Increasing the List Level Increasing and decreasing a list level is ideal for creating an outline where text is grouped hierarchically. To increase the list level, complete the following steps: 1. Select all the items in your list.
,
2. Click the Increase List Level in the Toolbar; or choose Type, List, Increase List Level List from the menu.
Formatting and Stylizing Text
89
TO DO
To Do: Decreasing the List Level To decrease the list level, complete the following steps: 1. Select all the items in your list.
,
2. Click the Decrease List Level in the Toolbar; or choose Type, List, Decrease List Level List from the menu.
Many GoLive users logically assume that if you click the Numbered or Unnumbered List button to create a list, you would click it again to remove the list. It doesn’t work that way. To remove a list, you must select your list and click the Decrease List Level button on the Toolbar. If the list level has been increased several times, you must click the Decrease List Level button enough times to move the selection flush to the left margin.
Adding Web Page Fonts HTML is fairly limited in terms of font usage. Sure, you can select a beautiful font to apply to the text on your page, but that in no way ensures that your visitors will see the same thing. Why? Well, for an HTML page to be displayed in a particular font, that font must be installed on the user’s computer. Although you can apply any font that is installed on your computer to the text on your pages, if the visitor to your site does not have the same font installed on his machine, the text will appear in the default font as set in the visitor’s Web browser. The default is often plain old Times New Roman. One way of dealing with this problem is to create font sets. A font set is a listing of fonts that the browser will look for on the user’s computer when a page is loaded. In this way, you have more of a chance of loading a certain font or one similar to it. If you have five fonts in your font sets, the browser will look for the first one in the list. If it is not found, it looks for the second, and so on. Often Web developers include sans serif or serif at the end of the list to ensure that the browser will find any font in that category if there is one.
Serif fonts have little tails hanging off the edge of the letters, whereas sans serif fonts do not. An example of a serif font is Times New Roman, and Arial is a sans serif font. Generally, sans serif fonts are easier to read on a computer screen and are often used for body text, but serif fonts are reserved for larger type such as headers.
4
90
Hour 4
Using Font Sets GoLive ships with a few ready-made font sets for you to use. They have conveniently included a serif set, a sans serif set, and a monospaced set. As you will see as you read further, you can edit these sets or create your own.
TO DO
To Do: Applying a Font Set To apply a font set to text, complete the following steps: 1. Select the text to which you would like to apply a font set.
,
2. Select Type, Font, preferred font set from the menu, where preferred font set is one of the sets in the list.
, TO DO
To Do: Creating and Editing Font Sets If you would like to create your own font set, you can do so by using the Font Set Editor. 1. Choose Type, Font, Edit Font Sets from the menu, or press Option+Command+F (Mac) or Alt+Shift+Control+G (Windows) on your keyboard to open the Font Set Editor. 2. Note that two groups of font sets exist. One named Default Font Sets and another named by the title of your document. Choosing Default allows the new font set to be available to any page, whereas choosing the titled page font set restricts the font set to being available only to the page currently open. 3. Choose a font name. This name will be the first choice for your font. 4. Click The Create a new Fontset button (see Figure 4.14). The new font set appears and is the same name as the font you selected under the Font Sets column. 5. To add additional fonts, click on the Add a Fontname button. These fonts are used if the previous font is not available. They go in order, so choose your preferred fonts first.
,
6. Repeat the previous step to add as many fonts as you want to your font set (see Figure 4.15). 7. Click the OK button to exit the Font Set Editor.
91
,
Formatting and Stylizing Text
FIGURE 4.14 The first step to creating a new font set is to pick the font you want selected as the first choice.
FIGURE 4.15 You can add fonts to your font sets using the Font Set Editor.
, To delete a font name from the set, select it in the Font Names list and click the Delete button (Trashcan) in the lower-right side of the Font Sets window. To delete a font set from the list of font sets, select the font set and click the Delete button.
4
92
Hour 4
Creating Hyperlinks from Text Hyperlinks are the threads that hold your site together, enabling visitors to jump from place to place at the click of their mouse. Creating hyperlinks, or links, is simple to do in GoLive. As usual, GoLive offers more than one way to approach this task. I strongly suggest that you always work in GoLive using a Site File—the file that GoLive generates that keeps track of all the other files and the links between in your Web site. (For more on creating a Site File, read Hour 2, “Creating a Site File.”) Although you can open and create links in a single HTML page in GoLive without opening the Site File, it’s best to work with your Site File open to avoid problems with your links later on. You’ll start by creating an e-mail link on your HTML page.
Creating an E-mail Link E-mail links are very useful; they enable the visitor to send feedback to the Web site owner instantly. Most surfers today have their browsers configured to open their e-mail program automatically when they click an e-mail link. Creating e-mail links in GoLive is easy. Let’s first examine the anatomy of an e-mail address. There are three parts to an e-mail address. The first part is the addressee, the person to whom the e-mail is going, and it precedes the @ sign. The second part is the @ sign, which indicates the break between the addressee and the destination. The third part, which follows the @ sign, is the destination. An e-mail link uses the HTML anchor tag just like a regular hypertext link, but is preceded by mailto: instead of http://, which is used to link to pages on the Internet. An e-mail link would look like this in HTML: Send me mail
The user clicks on the Send opens.
me mail
text and the mailform for the user’s e-mail program
Setting the Auto Add mailto Preference
, TO DO
GoLive automatically writes the mailto part of that link by setting a preference. When creating an e-mail link, all you have to do is type the e-mail address, without the mailto portion of the link, and GoLive automatically recognizes it as an e-mail address and adds the mailto for you. If you ever want to change this option, follow the steps in the next exercise.
To Do: Changing the mailto Preference To change the mailto preference, complete these steps: 1. Choose Edit, Preferences. 2. Expand the General tab and select URL Handling.
,
Formatting and Stylizing Text
3. Check or uncheck the box next to Auto add ‘mailto:’ to addresses.
,
4. Click OK to exit the Preferences dialog box.
93
, TO DO
To Do: Creating an E-mail Link To create an e-mail link in GoLive, complete the following steps: 1. Select the text that you want to use to create the link. (You can also use an image; see Hour 5, “Using Graphics on a Web Page,” for more on using images as links.) 2. Click the Link button in the Toolbar. Or, choose Special, New Link from the menu; or press Command+L (Mac) or Control+L (Windows) on your keyboard. 3. Open the Inspector, if it is not already open, by choosing Window, Inspector from the menu. 4. Type the e-mail address you want to link to into the URL field of the Link Inspector. GoLive will automatically add mailto: in front of the e-mail address to insert the correct syntax into the HTML code (see Figure 4.16). FIGURE 4.16 You type in the e-mail address, and GoLive automatically enters the mailto: needed in the syntax.
, Linking to Another Page Within Your Site There are lots of ways to create a link in GoLive. This section covers some of them.
,
, TO DO
To Do: Using the Link Button To use the Link button to add a link, complete the following steps: 1. Select the text that you want to use to create the link. (You can also use an image; see Hour 5 for more on using images as links.) 2. Click the Link button in the Toolbar. You can also choose Special, New Link from the menu; or press Command+L (Mac) or Control+L (Windows) on your keyboard. 3. Open the Inspector, if it is not already open, by choosing Window, Inspector.
4
Hour 4
,
94
4. Use one of these methods to complete the link: Point and Shoot—Click the Point and Shoot button below the URL field in the Inspector and hold the mouse button down. Drag over to the Files tab of the Site File and point at the file to which you want to link (see Figure 4.17). If the Site File is hidden, drag up to the Toolbar and point at the Selected Window button, which will bring the Site file forward, and then point to the file in the list. Let go of the mouse.
You can also access the Point and Shoot function by selecting a piece of text or an image, pressing the Command key (Mac) or Alt key (Windows), and pointing your cursor at the selection. The Point and Shoot icon appears next to the arrow cursor, at which point you can complete the point and shoot operation by dragging the line to the file to which you want to link.
FIGURE 4.17 To link using point and shoot, drag over to the Files tab of the Site File and point to the file to which you want to link.
Browse—Click the Browse button in the Link Inspector. Browse through the Site Root Folder of your site until you locate the file to which you want to link. Select the file and click the OK button. Type—Type the URL directly in the URL field of the Link Inspector.
,
Drag the file icon to the selected text—Drag the file icon of the file you want to link to, and drop it on top of the selected text. You could also drag the page icon at the top-left corner of a page, and drop it onto selected text on another page to create a link.
To have a new browser window open when a link is clicked you can use an HTML tag attribute called TARGET. GoLive makes it simple to use this attribute. When making your link, look for the drop-down list to the right of the field named Target in the Link Inspector. Simply select _blank from the list.
Formatting and Stylizing Text
95
Linking to a Page Not in Your Site To create a link to a page not in your site (an external URL), you must know the full URL of the page to which you are linking. A full URL begins with a protocol. Most often it is http://, but it might be https:// (used for secure servers), ftp:// (used for file transfers), or another protocol.
, TO DO
To Do: Linking to an External URL To make the link, complete the following steps: 1. Select the text that you want to use to create the link. (You can also use an image; see Hour 5 for more on using images as links.) 2. Click the Link button in the Toolbar; choose Special, New Link from the menu; or press Command+L (Mac) or Control+L (Windows) on your keyboard. 3. Open the context-sensitive Inspector, if it is not already open, by choosing Window, Inspector, from the menu; or by pressing Command+1 (Mac) or Control+1 (Windows) on your keyboard. 4. Type the URL into the URL field of the Link Inspector.
,
5. Press Return/Enter, or click the arrow button at the right end of the URL field for your change to be accepted.
If the URL you want to use is long and complicated, have that page open in your browser, and copy and paste it directly into the URL field of the Link Inspector. This lessens the possibility of typo mistakes.
Using Anchors to Link to a Particular Spot on Your Page Anchor links are useful in a number of situations. For example, assume that you have a Frequently Asked Questions page on which you want to list all the questions at the top of the page and link them to the answers listed below. By using anchors, you can do exactly that. You place the anchor on your page in the spot you want the link to go to, and then link to the anchor. You can also use an anchor to instruct a link to open a new page at a particular spot.
4
96
Hour 4
, TO DO
To Do: Creating a Link Using an Anchor To create a link using an anchor, complete the following steps: 1. Select the text you want to use as the link. 2. Open the Inspector, if it is not already open, by choosing Window, Inspector. 3. Click the Link button in the Toolbar. You can also choose Special, New Link from the menu or Command+L (Mac) or press Control+L (Windows) on your keyboard. 4. Click the Point and Shoot button in the Inspector, and holding the mouse down, drag to the spot on the page you want to create the anchor.
,
5. Release the mouse button.
, TO DO
To Do: Creating an Anchor Link Using Point and Shoot To use point and shoot to create a link, complete the following steps: 1. Select the text you want to use as the link 2. Command+drag (Mac) or Alt+drag (Windows) to the point where you want to place the anchor (see Figure 4.18).
FIGURE 4.18 Select text and then Command+drag (Mac) or Alt+drag (Windows) to the point where you want to place the anchor.
, With the methods used here to create anchors, names are automatically assigned to the anchor. You might have to refer to the anchor at a later time, so choose logical names and keep in mind anchor names are case sensitive.
Formatting and Stylizing Text
97
, TO DO
To Do: Adding an Anchor Link with the Palette To add a link using the palette, complete the following steps: 1. Open the Objects palette, if it is not already open, by selecting Window, Objects from the menu. 2. From the Basic section, drag an Anchor icon to your page. 3. Open the Inspector, if it is not already open, by choosing Window, Inspector. 4. Name the anchor in the Inspector. Keep the name simple and in lowercase.
,
5. Link to the anchor by using the Point and Shoot method described earlier. Besides using point and shoot, you can also type the name of an anchor directly into the Link Inspector. Anchor names are always preceded by the # symbol in the URL that links to them. If you want to create an anchor link on another page, open both the page the link will originate from and the page to which you want to link. Select the text or image from which you want to create the link, and then Point and Shoot from that page to the other. When you release the mouse, an anchor will be created. You can also drag an Anchor icon from the Basic section of the Objects palette and drop it onto a page, and then link to that anchor using point and shoot. Finally, you can link to an anchor that already exists on another page. Pages that contain anchors are identified in the Site File by a little right-facing arrow next to the Page icon. From your selection, press the modifier key to enable the Point and Shoot mechanism, and while holding down the mouse button, point at the arrow. Doing so opens a dropdown list showing the names of the anchors on that page. Continue to hold down the mouse and point until you navigate to the desired anchor. Release the mouse.
Don’t want to go through all of the mouse gymnastics to link to an anchor on another page? You can simply link to the page that contains the anchor. Follow the name in the link textbox with the # sign and the anchor name, no spaces between.
4
98
Hour 4
Spell Checking Your Document Last, but not least, run a spell check on your pages to tidy them up. You can spell check a single page or your entire site. • To spell check a page, bring that page to the front. • To spell check your site, bring the Site File to the front. If your cursor is in the middle of the page, the spell checker runs from that position. To run the spell check from the top, click the From Top check box. You can also select a portion of the text to spell check only that piece.
, TO DO
To Do: Running the Spell Check To check spelling, do the following: 1. Choose Edit, Check Spelling from the menu, or press Option+Command+U (Mac) or Shift+Control+U (Windows) on your keyboard to open the Check Spelling dialog box (see Figure 4.19).
,
FIGURE 4.19 The Check Spelling dialog box offers a number of options.
2. Choose the language you prefer from the language pop-up menu.
,
Formatting and Stylizing Text
99
3. Click Start to begin the spell check. • Change replaces the suspect word with the one in the Suggestions field. You can also choose one from the suggestion list, or correct the word by editing it yourself. • Ignore skips over the suspect word with no correction. • Ignore All skips all occurrences of that word with no correction. • Learn adds the word to your personal dictionary so that it won’t be flagged as an error any more. • Next File takes you to the next document in your site if you are spell checking the whole site.
,
Notice the little triangle at the bottom left of the Check Spelling dialog box. Clicking it reveals more options that you can choose when determining criteria for your spell check, such as “Find uncapitalized begin of sentences” and “Find repeated words.”
Summary In this hour, you learned how to import text into your Web page, and how to format and stylize your text, including how to make numbered and unnumbered lists. You also learned how to add fonts and font sets to your Web page and how to create hyperlinks. Last, but not least, you learned how to use the built-in spell checker in GoLive.
Q&A Q I tried to drag and drop some text onto my grid, but I can’t see all the text. What have I done wrong? A When you drag text onto a grid, GoLive creates a small Layout text box for you and puts the text into it. If the text requires a larger size box, you’ll see a small + (plus) sign in the bottom-right corner of the Layout text box. This visual cue tells you to resize the box to the dimensions necessary to accommodate your text. Q I made some text a header 1 so that it would stand out, but I don’t like the way it looks. How do I get rid of it? A Use the same drop-down list in the Toolbar that you used to create the header, but instead of choosing a header number, choose None.
4
100
Hour 4
Q After I added a font set to a paragraph, I decided not to use it, but I don’t know how to change it back. A Select the text from which you want to remove the font. From the menu, choose Type, Font, Default Font. This will remove the tag from the source code and will return the text to its default state. Q I made some links to other files on my hard drive using the Browse method, and then I uploaded the page. But when I went online to check the page, I got the error message 404, File Not Found. Why? A You linked to files on your hard drive, but then didn’t upload those files—you uploaded only the page containing the links. The result is a broken link and an error message. Even if you had uploaded the other files, they would have to be on the server in the same directories as they are on your hard drive. For example, if you linked to a file called myfile inside a folder called mystuff, which was inside another folder called myWebstuff, you would need to have the same folder structure on the server for the links to remain intact. GoLive calls this problem orphan files, and will help you fix it. See Hour 9, “Using GoLive’s Site Management Tools,” for more details. For more information on links, please visit the Web site at www.golivein24.com.
Quiz 1. When applying a header size to a piece of text, the formatting will affect a. Only the word. b. Only the line. c. The whole paragraph. 2. For a font that you have applied to text to appear correctly on a visitor’s computer, the visitor needs to a. Get the latest browser. b. Have a special plug-in installed in the browser’s plug-ins folder. c. Have the font installed on the computer. 3. When making a link out of a piece of text, in which order do you complete the following steps? a. Press the Link button on the Toolbar. b. Select the text you want to use to make the link. c. Point and shoot, browse, or type the URL into the Inspector.
Formatting and Stylizing Text
101
Quiz Answers 1. c. When applying a header size to a piece of text, the formatting will affect the whole paragraph. 2. c. For a font that you have applied to text to appear correctly on a visitor’s computer, the visitor needs to have the font installed on the visitor’s computer. 3. b, a, c. (To make a link out of a piece of text, select the text you want to use to make the link; press the Link button on the Toolbar; Point and Shoot, browse, or type the URL into the Inspector.)
Exercises Create a newsletter and incorporate the following formatting and styles: • Two headers of varying sizes, each in a different color • A bulleted (unnumbered) list with two levels • One paragraph justified to the right and another to the left • One font set for the headers, another for the body text • Links to other pages, including one to a Web site other than yours • Spell check your newsletter
4
HOUR
5
Using Graphics on a Web Page At its inception, the Internet was predominantly used by academics and was nothing but page after page of black text on a dreary gray background. It served the purpose of publishing information, which was generally scientific or academic in nature. There was no need for graphics beyond a few images and graphs here and there. Then designers became more involved in Web page creation and started to push the limit. Thanks to today’s modern browsers and faster speeds due to wider bandwidths, you have the opportunity to be more creative than in the past, but there are still many limitations. In this section we will talk about the limitations of size and format, and then teach you how to integrate your images into a GoLive page. In this hour we will show you how to create and place different types of images in several ways, including how to create a background image. Make sure to download the appropriate images from www.golivein24.com, before you start.
104
Hour 5
In this hour, you’ll learn about the following: • Resolution issues • Understanding which image types can be used • How to put images into your Site file • Placing an image on your page • Changing the size of an image • Aligning your image with the text • Placing a background image on your page • Adding a hyperlink to your image • Creating an Image Map
Selecting the Proper Image Type An image prepared for the Web is an entirely different animal than an image prepared for print. If you use high-resolution images, like you would for a printed piece, the file size of your image will be enormous and thus, will take a long time for viewers to access your page. Bandwidth, the bits per second (bps) transferred over the Web when a page is loaded into a browser, is of major concern to Web developers and Web surfers alike. You’ll need to compress your images and reduce the resolution to prepare them for use on the Web.
File size refers to the amount of space the file takes up on your hard drive, not the actual dimensions of the image.
Resolution Issues For Web images, dpi (dots per inch) does not matter. Many people feel that making their image 72 dpi is the proper way to adjust the file size for the Web, but that’s not necessarily true. Measuring by pixels is the answer. Don’t buy it? Follow along to see if it makes sense. The display size of an image onscreen is determined by the pixel dimensions of the image plus the size and setting of the monitor. For instance, a typical 13-inch monitor displays 640 pixels horizontally and 480 vertically. An image with pixel dimensions of
Using Graphics on a Web Page
105
640 by 480 would fill the screen. On a larger monitor with a 640 by 480 setting, the same image (with pixel dimensions of 640 by 480) would still fill the screen, but each pixel would appear larger. Changing the setting of this larger monitor to 1024 pixels by 780 pixels would display the image at a smaller size, occupying only part of the screen. So what is the answer? Measure in pixels! Again, preplanning is the key. If you decide that you are going to base your page on a 17-inch monitor, you have 780 pixels to work with. If you want an image to take up half of the viewer’s screen, resize the image in its original application to be 390 pixels wide. One quarter of the size 195 pixels, and so on (see Figure 5.1). FIGURE 5.1 Final image size should be based on the screen size you are building your page to accommodate.
5 Pixel size is really important. If you understand this concept you won’t create a navigation bar that extends beyond the viewing area, or create an image of the President/CEO where only his left eyeball is visible. Trust me, it happens. Although this is a publication on GoLive, we’re going to assume that many of you have Photoshop, any version. This tip will help you to resize images correctly. Open an image in Photoshop and choose Image Size from the Image menu. Web designers work in the top half, whereas print designers work in the bottom. It doesn’t matter what the resolution is, it is the pixel dimension at the top that matters for Web pages (see Figure 5.2). Think in fractions of your total page, and enter the values listed previously. Your image could be 3000 dpi, but if the pixel dimensions are correct, it will work and be the same file size as a 72-dpi image at the same pixel dimension.
106
Hour 5
FIGURE 5.2 When working with images to go on a Web page, it’s the pixel dimensions that matter—not dpi.
Selecting the Proper Image Type File formats for Web graphics have one thing in common: compression. Compression is a way of making files as small as possible so they load quickly. However, depending upon the format you choose to use, compression comes with a price: loss of quality. Couple that with the fact that browsers will display images of only certain file types, and your choices as a Web designer become limited. The three most common image types for the Web are • GIF (Graphics Interchange Format)—Usually pronounced with a hard “g,” but some say that it depends on the peanut butter you ate when you were a child. GIF (.gif) uses a lossless method of compression. Lossless means that during compression an attempt is made to retain the original data; don’t let that fool you into thinking that your image will look great. GIFs compress by reducing the amount of color, so you can get some odd effects in an image if color is reduced too low. GIFs support transparency. If this option is selected you will not see a white box surrounding your image in GoLive. GIFs support animation. So if you want it to move, pop-up, or blink make it a .gif. GIFs can contain a maximum of 256 colors, and must be indexed color images. The fewer colors used, the smaller the file. A good example of a GIF image is shown in Figure 5.3. • JPEG (Joint Photographic Experts Group)—A lossy compression method. To save space, JPEG compression loses parts of an image. However, unlike GIF, you can choose the level of compression used in the process. JPEG (.jpg) is the best choice for photographic images because it supports 24-bit color (16.7 million colors).
Using Graphics on a Web Page
107
JPEGs support antialiasing, which help keep smooth transitions from one color to the next. Any file, whether it is generated from a logo or photograph that has gradations (subtle shading), is best saved as .jpg. FIGURE 5.3 Images with long spans of the same color are good candidates for .gif files.
5
• PNG (Portable Network Graphics)—PNG (pronounced peeng) is a newer graphic format for compressing images that provides the best features and can replace the GIF format. I wouldn’t suggest using it, however, unless you are certain that all your viewers’ browsers support it. PNG (.png) offers variable transparency or opacity, as shown in Figure 5.5. PNG files are compressed in a lossless fashion. However, because PNG is only fully supported by the latest browsers, GIF remains the standard. PNG files will not totally supplant GIF because they do not support animation.
108
Hour 5
FIGURE 5.4 Images with lots of color shades are good candidates for .jpg files.
FIGURE 5.5 Images saved in .png format support different levels of transparency. Notice the shadow is slightly transparent.
In general, you’ll want to use GIF or PNG for graphic images, especially those containing just a few colors, such as logos. Reserve JPEG for photographs. For more info and links to resources on preparing images for the Web, visit www.golivein24.com. Now that you know what types of image formats you can use in your Web site, you can experiment by placing various graphic elements on a page. Images can even be used in the background of your page, enabling you to create winning layouts. Please keep both your Site file and the Inspector open for this entire hour. For details on how to create a Site file, please refer to Hour 2, “Creating a Site File.” To open the Inspector, select Window, Inspector.
Using Graphics on a Web Page
109
From this point forward you might see the term Optimized, as in an Optimized file. This means that an image has been reduced in file size and is saved as a file format supported by the Internet.
Adding Images to the Site File To complete the lessons in this hour, you will need images to work with. If you haven’t done this already, create a folder on your desktop named hour5_images. Then go to http://www.golivein24.com/ to download the images into the folder you just created.
GoLive has a feature called Smart Objects. Using this feature, you can open your Adobe Photoshop/ImageReady, Illustrator, and LiveMotion files for editing within GoLive. For more information on this powerful new feature, please refer to Hour 17, “Using Photoshop/ImageReady, Illustrator, LiveMotion, and Smart Objects.”
You can employ several methods for adding images to your Web site: • Add images using the menu • Drag and drop images into the Site file • Put images in the Site Root folder and update the Site file
, TO DO
To Do: Add Images to Your Site File Method One: To add images to your site using the menu, complete the following steps: 1. From the File menu, choose Import, Files to Site. 2. Navigate through your hard drive until you locate the folder you downloaded (on your desktop) named hour5_images. Open that folder and locate the file named dog.jpg.
,
3. Select the filename from the list in the top pane, and then click Add (see Figure 5.6). The file will be added to the list in the lower pane of the Add Files box. You can repeat this process as many times as necessary to select all the images you want. If you change your mind, you can select a file from the bottom pane and click Remove to take an image out of the list. For now, add only this one file. 4. Click Done.
5
Hour 5
,
110
GoLive creates a copy of the file and adds it to your site. Your original file remains untouched.
FIGURE 5.6 Select a filename from the list in the top pane, and then click Add, or double-click the filename.
Method Two: To add images to your site using drag and drop, complete the following steps: 1. In the Finder or in Windows Explorer, open the folder named hour5_images and locate the file named dog_art.gif. 2. Situate the folder window you’ll be dragging “from” next to the site window you’ll be dragging “to.” In Windows, you might need to reduce the size of the window from full screen to partial screen. 3. Drag the file from its folder and drop it into the Files tab of your Site file in GoLive. A copy of the file is added to your site (see Figure 5.7).
,
FIGURE 5.7 Drag the file from its folder and drop it into the Files tab of your open Site file in GoLive.
,
Using Graphics on a Web Page
111
The two methods we just explored both make copies of the image files and place them into the Site file. In this next method, you are placing the original file into the Site file. You can place an image from any source—including your hard drive, a CD, removable media, or by saving an image directly from your art program—into the Site Root folder of your Web site in the Finder or in Windows Explorer. Method Three: To add images to your site by placing them in the Site Root folder, complete the following steps: 1. Locate the folder on your desktop named hour5_images and open it. 2. Locate the Site Root folder of your Web site in the Finder or in Windows Explorer. 3. Drag the file named flag.gif from the hour5_images folder into your Site Root folder. 4. Switch back to GoLive. Click the Refresh View button, which has two wavy arrows on it, on the Toolbar (see Figure 5.8). GoLive rescans the Site Root folder, recognizes the new file, and adds it to the Files tab of your Site file.
FIGURE 5.8 Click the Refresh View button on the Toolbar.
, If a file needs to be moved after it has been placed into the site, open the Site file and move it from within GoLive. GoLive will track its location and update any pages affected by the move. Do not move files around in the Finder or in Windows Explorer or you will create broken links.
Now that you have placed images files into your Site file, you are ready to start brightening up your pages with them. We’ll begin simply, by placing an image onto your Web page.
Adding an Image to a Web Page As with nearly every function in GoLive, there are several methods for placing an image on your page. You will start by putting an image placeholder onto the page, and then linking the placeholder to an image.
5
112
Hour 5
, TO DO
To Do: Placing an Image Placeholder Icon on a Page To add an image placeholder to your page, complete the following steps: 1. Have a page open, perhaps the index.html page that was created with your site. 2. Open the Objects palette, if it’s not already open, by selecting Window, Objects. 3. Click the Basic button of the Objects palette. (Note that resting your pointer over a button will display the tool tip.) 4. Locate the Image icon. It’s the one with shapes on it. 5. Drag the Image icon and drop it onto the page (see Figure 5.9). FIGURE 5.9 Drag an Image icon from the Objects palette onto your Web page.
, The icon you now have on the page represents the place where the image will go. To complete the process, you must tell GoLive which image to use in that spot. Choose the Point and Shoot or Browse method to do so. The most easy, reliable, and fun method of specifying the image is Point and Shoot.
, TO DO
To Do: Selecting an Image with Point and Shoot To complete the process of placing the image on your page by using the Point and Shoot method, complete the following steps: 1. Select the image placeholder. 2. From the Inspector, click and hold the Point and Shoot button at the left end of the Source field. The button has a little coil on it.
,
3. Keeping the mouse button depressed, drag the pointer to your Site file, locate the image named dog.jpg, and point at it until it’s highlighted (see Figure 5.10). 4. When the filename is highlighted, let go of the mouse button.
113
,
Using Graphics on a Web Page
FIGURE 5.10 Use the Point and Shoot operation to assign an image to a placeholder.
, If you accidentally highlight the wrong file, don’t worry! Simply repeat the Point and Shoot process again and choose the correct file the second time. The newly chosen file will replace the incorrect one without even deleting the old one first. Also note that if the image you want is inside of a folder in the Site file, point at the folder. GoLive automatically opens the folder, enabling you to select the image.
If your Document window obstructs the Site file from view and makes it impossible for you to point at it, point instead at the Select Window icon on the Toolbar. Doing so will toggle the Site file to the front, and you can then drag to the Site file to finish your Point and Shoot process as described. Your mouse button should remain depressed during the whole Point and Shoot operation (see Figure 5.11). Also, if you can see part of the Site window sticking out from behind the other windows, moving the cursor over it during a Point and Shoot operation will bring it to the front. FIGURE 5.11 Pointing at the Select Window icon in the Toolbar during a Point and Shoot operation toggles between the Site file and the Document window.
5
114
Hour 5
You can skip the Inspector! Command+click Point and Shoot (Mac) or Shift+Click Point and Shoot (Windows) right from the image icon to the image in the Site menu.
, TO DO
To Do: Selecting an Image with Browse The second method for linking an image to an image placeholder is to browse through the folders on your hard drive until you locate the file. To select an image using the Browse method, complete the following steps: 1. Select the image placeholder for which you want to designate an image. 2. In the Inspector, click the Basic tab. 3. Click the Browse button to the right of the Source field. It has a little folder icon on it (see Figure 5.12). FIGURE 5.12 The button with the folder icon on it is the Browse button.
4. A dialog box will appear, enabling you to browse through your hard drive to your Site Root folder. Locate the image file named lab.png and select it.
,
5. Click Open.
Not seeing the whole address because of the size limitation of the text input box? Click the Inspector’s fly-out menu in the upper right of the palette, and select Edit. A separate, larger window will appear that you can use to view and edit the location.
Yet another way of putting an image on your page is by using Drag and Drop. This method does not require using an image placeholder at all. Instead, you situate your Site
Using Graphics on a Web Page
115
file and your Document window next to each other and simply drag the image from the Files list and drop it onto the page (see Figure 5.13). FIGURE 5.13 Drag images from the Files list and drop them onto the page.
In addition to placing an image directly onto a page, you can put it inside a table cell, onto a layout grid, or inside a floating box. For details on how to use these three elements, please refer to Hours 6, “Designing Pages with Tables,” 7, “Designing Pages with the Layout Grid,” and 8, “Designing Pages with Floating Boxes.”
Resizing an Image To resize your image, click it to display the three resize handles situated at the right side, bottom, and bottom-right corner. Drag a handle until the image is the size you want it to be. (The cursor will turn to a little blue arrow when it’s hovering over one of the pull areas.) To drag proportionately, hold down the Shift key before dragging. You can also type the dimensions into the Height and Width fields in the Image Inspector’s Basic tab (see Figure 5.14). An image that has been resized will have a little square in the bottom-right corner. To restore the image to its original size, click the matching square in the Basic tab of the Image Inspector (see Figure 5.15).
We strongly suggest that you don’t use GoLive to resize your images. Browsers will display your image at any size you tell them to, but they still must download the entire image first. If you’ve made an image larger, it
5
116
Hour 5
might appear blurred or pixilated; if you’ve reduced it, your viewer still uses the same bandwidth to download it as if it were full size. You’ll enhance your page’s speed and look dramatically if you prepare your images at the correct size in an illustration program such as Adobe Photoshop before placing them on your Web pages.
FIGURE 5.14 You can type the dimensions into the Height and Width fields in the Image Inspector’s Basic tab.
FIGURE 5.15 To restore an image to its original size, click the square in the Basic tab of the Image Inspector.
Aligning Images and Text If you drop an image onto a completely empty page, it will justify to the left margin by default. You can center the image very simply by clicking the Center Justify button in the Toolbar. Or, you can justify the image to the right margin by clicking the Right Justify button.
Using Graphics on a Web Page
117
However, when you drop an image onto a page that already has text or other elements on it, the image might push the text around in such a way that doesn’t always look very nice (see Figure 5.16). That’s where alignment options come in handy. FIGURE 5.16 An image at the default alignment.
, TO DO
To Do: Aligning an Image to the Left or Right of Text To align the image to the right or left of text, complete the following steps: 1. Place the image named Doggie_art.gif anywhere on your page. 2. Open the file doggie.txt located in the hour5images folder named. Copy and paste the text next to the picture. 3. Click the image to select it. 4. At the bottom of the Inspector is an Alignment drop-down menu. To align the image to the right of the text, choose Right from the menu. To align the image to the left of the text, choose Left. Play around with the other options in the menu to see the different effects you can produce (see Figures 5.17 and 5.18).
,
FIGURE 5.17 An image aligned to the left of the text.
5
Hour 5
,
118
FIGURE 5.18 An image aligned to the right of the text.
, Adding Space Around an Image You might like to add some space around your image so that other elements, such as text, do not butt up against the edges of the picture. You can add such space by using Hspace and Vspace, which stand for horizontal space and vertical space, respectively. They enable you to add padding around your image. You designate the amount of space you want in pixels.
, TO DO
To Do: Add Space Around the Outside of Your Image To add some padding around your image, complete the following steps: 1. Click the image to select it. 2. Click the More tab of the Inspector. 3. In the Hspace and Vspace input fields, type the number of pixels you want to add as padding around your image. Hspace adds padding to the sides of the image, whereas Vspace adds padding to the top and bottom (see Figure 5.19).
FIGURE 5.19 Add some space (in pixels) around your image by typing a number into the Hspace and Vspace fields.
,
Using Graphics on a Web Page
119
Want to add space to just one side instead of both at the same time? Consider creating the image with extra space on one side in the original application.
In the Basic tab of the Inspector, you’ll see an Alt Text field. You should type a word or two that describes the image into this field. For example, if you’ve a placed a logo for Adobe GoLive on your page, Alt Text could be “Adobe GoLive Logo.” This places an alt tag in the HTML code, which does several things. It’s used to alternatively display text when an image is not shown; for example, on handheld computing devices and text-based browsers used by the visually impaired. This text can also be seen as the page loads.
Adding a Background Image to a Web Page At this point check to see if you have all the images from the hour5images folder imported into your site. If not, use one of the methods we went through earlier to have them accessible for the next exercises. Some Web pages have a nice background texture or even a large but subtle image behind the text. Adobe GoLive makes it a snap to place such a background image on a page. The following are the three common ways to add a background image to your Web page: • Using Point and Shoot • Using the Browse button • Using drag and drop Begin by opening a page. Perhaps you can continue working on our index.html page. From the Inspector, you have two ways to place the image: the Point and Shoot method and the Browse method.
If you plan to use a background image on your page, remember to make it subtle. If it’s too bright or busy, it might interfere with a visitor’s ability to read the text.
5
120
Hour 5
, TO DO
To Do: Selecting a Background Image with Point and Shoot To place an image in the background of your page using the Point and Shoot method, complete the following steps: 1. Have a page open, perhaps the index.html from our Site file. 2. Click the Page icon at the top left of the Document window. 3. Click the Image check box in the Page tab of the Inspector (see Figure 5.20). FIGURE 5.20 Click the Image check box in the Page tab of the Inspector.
4. At the left side of the input field is the Point and Shoot icon, which resembles a coil. Click and hold down on this icon. 5. Keeping the mouse depressed, drag the pointer to your Site file, locate the image named bg_fur.gif in the Files list, and point at it until it’s highlighted.
,
6. After the file is highlighted, let go of the mouse button. The image will be placed into the background of your page.
, TO DO
To Do: Selecting a Background Image with Browse To select the background image by browsing through the folders on your hard drive, complete the following steps: 1. Click the Page icon at the top left of the Document window. 2. Click the Image check box in the Page tab of the Inspector. 3. Click the Browse button at the right side of the input field. It has a little folder icon on it.
,
4. A dialog box will appear, enabling you to browse through your hard drive to your Site Root folder and to the desired image. Try bg_tall.jpg. When you locate the image file, select it and click Open. It will be placed into the background of your page.
Using Graphics on a Web Page
121
Images used in the backgrounds of HTML pages are tiled, meaning that they repeat endlessly. Small images are usually designed to tile seamlessly, giving the appearance of one large image, similar to the way wallpaper looks. If you prefer to use a large image that you don’t want to repeat, you must make a choice. You can make the dimensions of the image large enough to cover the whole page, so any repeat will occur off the page and won’t be seen. Or you can use a floating box to place your image on the page. For more on floating boxes, please refer to Hour 8. Cascading Style Sheets, which are discussed in Chapter 18, also offer background repeat options.
Drag and Drop Your Background Image An easy way to place an image in the background of your page is by using drag and drop. To do this you must situate your Site file and your Document window so that you can see them both.
, TO DO
To Do: Selecting a Background Image with Drag and Drop To drag a background image to your page, complete the following steps: 1. Have a page open. 2. Select an image from the Files list in your Site file. 3. Drag and drop the file onto the little page icon at the top-left corner of the page (see Figure 5.21).
FIGURE 5.21 Drag the image onto the little page icon at the top-left corner of your page.
5
,
122
Hour 5
If you are uncertain which of the images in your Files list is the one you want to use, you can easily peruse them this way: Select an image file in the Files list of the Site file. Click the Content tab of the Inspector. GoLive previews the image for you. Use the up-arrow and down-arrow keys on your keyboard to look at other files. You can also drag an image right out of the Content tab and place it on your page.
Linking Images to Other Pages Images can be hyperlinked to other HTML pages, similar to the way text can be linked. GoLive makes doing so a breeze.
, TO DO
To Do: Adding a Link to an Image To make your image a link, you must first place the image on the page. Following these steps: 1. Drop the image button.gif onto your index page. 2. Click once on the image so that it’s selected. 3. Click the Link tab in the Inspector, or use Command+L (Mac) or Control+L (Windows) or click the Link button to the left of the first input field (see Figure 5.22). 4. Either point and shoot at or browse to the page you want to link to by using the methods described earlier in this hour. You can use the supplied file named link.html. 5. Test this in your browser. FIGURE 5.22 Click the Link button at the left of the first input field.
,
Using Graphics on a Web Page
123
Regarding frames: If you’re making a link from an image in one frame and would like the new page to load into another frame, remember to target the link or your page will load improperly. To learn more about frames, refer to Hour 7.
Advanced users might prefer to type the path (URL) directly into the Inspector when making a link, placing an image on an HTML page, or placing an image in the background of an HTML page. The path can also be typed into the Outline mode or the Source mode. For more about working in other modes, refer to Hour 21, “Working with Source Code in GoLive.”
Using Image Mapping Image Mapping—the process of dividing an image into areas called hotspots that can then be linked individually—is a tedious and frustrating process when done by hand. But it is as easy and fun as using a drawing program in GoLive. Using the Image Map– drawing tools, you draw the hotspots onto your image. Hotspots can be square, round, or multisided. Each hotspot you draw can then be assigned its own link. This way you can have one image that links to many places. An example of a good use for an Image Map is a navagation bar. We have an image ready to go in the hour5images folder.
, TO DO
To Do: Creating Clickable Regions on an Image Before we get started create three simple pages: one called sales.html, one called locations.html, and one called service.html. Each one should simply have the words “You have reached Sales” or “Locations” or “Service” as text on the page. Save them to your Files folder. To draw hotspots or clickable regions on an image, complete the following steps: 1. Create a new page and save it in your Site file as map.html. 2. Place the image named navbar.gif on your page. Click once on the image to ensure that it is selected.
,
3. Click the More tab of the Inspector. 4. Click the Use Map check box to enable the hotspot drawing tools, which are found in the Toolbar (see Figure 5.23).
5
Hour 5
,
124
5. GoLive automatically assigns a name to your Image Map because a name is required. You can change the given name if you want. Name this Image Map navbar.
FIGURE 5.23 First, access the More tab, and then click the Use Map check box to create an Image Map.
6. Choose the rectangle drawing tool in the Toolbar (see Figure 5.24), and then click and drag to draw a clickable region over the text that says Sales. Resize by grabbing the blue square handles. If the position of the region is not quite right, select the pointer in the region tools and drag it to a new position (see Figure 5.25). FIGURE 5.24 Select the rectangle, circle, or polygonal drawing tool. FIGURE 5.25 After you create a clickable region, you can move it to the desired position on your image.
,
7. Now designate the URL that this region will be linking to. Although the region is active, locate the URL in the Image Map Inspector, shown in Figure 5.26. You can locate the file you created named sales.html by browsing or Point and Shoot. Don’t forget to put a sensible Alt tag in! Repeat the process with the other two regions, Locations and Service. When you are finished creating the map test it in your browser.
125
,
Using Graphics on a Web Page
FIGURE 5.26 Type, browse, or Point and Shoot to link your clickable region.
When an image is created in GoLive an M icon appears somewhere on your page (see Figure 5.27). Make sure that if you copy this image that the M icon goes with it. Otherwise, you will lose all your map information.
FIGURE 5.27 The M icon contains the Image Map information and must travel with the image when copying and pasting.
, Now that you’ve learned about images, it’s time to forge ahead to Hour 6 and learn about tables!
Summary In this hour, you learned the types of images that are acceptable for use on the Web and how to use them in the body and background of your Web page. You learned how to align an image so that text wraps around it, and how to add a hyperlink to it. You also learned how to create an Image Map with clickable regions that are hyperlinked using GoLive’s Image Map drawing tools.
Q&A Q Can I use a PICT, PCX, or TIFF in my Web page? A No. Current browsers don’t support those file types. You should use GIF, PNG, or JPEG, all of which create a much smaller file size.
5
126
Hour 5
Q I scanned my photographs at 300 dpi. Is that an okay resolution for the Web? A Check the pixel dimensions to make sure you are not creating an image too large for your page, not the resolution.
Quiz 1. Where will an image placed in the background of your page appear? a. In the top-left corner. b. In the center of the page. c. It will tile and repeat across the entire page. 2. How can you add space to the sides of an image? a. Use the alignment pop-up in the Inspector. b. Set link in the More tab of the Inspector. c. Use hspace in the More tab of the Inspector. 3. If you want to add a hyperlink to an image in Layout mode, in what order would you complete these steps? a. Click the Link button on the Toolbar. b. Open the Inspector. c. Place the image on the page. d. Browse to or Point and Shoot at the file to which you want to link. 4. What are clickable regions or hotspots? a. Popular Web sites. b. Areas drawn on an image that can then be linked. c. Areas drawn on a Web page that can contain images.
Quiz Answers 1. c. An image placed in the background of your page will tile and repeat throughout the entire page background. 2. c. Use hspace in the More tab of the Inspector. 3. c, b, a, d. (To add a hyperlink to an image in Layout mode, place the image on the page; open the Inspector; click the Link button on the Toolbar; browse to, or point and shoot at, the file to which you want to link.) 4. b. Hotspots are areas drawn on an image that can then be linked.
Using Graphics on a Web Page
127
Exercises Now that you are familiar with how to work with images, you can use these exercises to solidify your knowledge. 1. Place some text on a page, and then add multiple images and align them in different ways. Add vspace and hspace to the images to create white space between the image and the text. 2. Create an Image Map. Make one large clickable region that covers the entire image and add a hyperlink to it. Consider this the default link. Place several smaller hotspots on top of the large one, and add a different link to each one. If the user clicks one of the smaller spots, send him to that link. If he clicks anywhere else on the image, send him to the default link.
5
HOUR
6
Designing Pages with Tables We freely admit it: We love tables. With a little table know-how and finesse, you can take a plain-Jane Web page all the way to spectacular. By using tables to contain your page elements, you can restrain text from flowing clear across the page, put space around the edges of your design, and float your layout in the middle of a page. You can create complex Web page designs by placing images in portions of a table and text in other portions. By positioning tables within tables (called nesting), you can create elaborate layouts. Writing the HTML by hand for complex table designs is beyond challenging. It is difficult, time-consuming, and headache provoking. Working this magic in GoLive, however, is a veritable delight. So, let’s immerse you in the wonderful world of tables.
130
Hour 6
In this hour, you will learn how to • Add a table to your Web page • Adjust the basic table attributes • Select, add, and delete cells, rows, and columns • Color cells, rows, and columns • Format text in tables • Use tables to structure your Web page
Adding a Table to Your Web Page As with all aspects of designing a Web page, preplanning is the key. It is a good idea to have a sketch of what you plan on creating and then putting an overlay over that sketch so you can create the most efficient table possible. See Figure 6.1. FIGURE 6.1 Preplan your page to save time and create the most efficient table.
LOGO
ADOBE LOGO
APPLE LOGO
WINDOWS LOGO
Let’s begin by working with a new blank HTML page. We’ll walk through the steps of putting a table on the page and adjusting it to look the way you want. Later, we’ll show you some ideas for page layout design using tables.
, TO DO
To Do: Adding a Table To add a table to your Web page, complete the following steps: 1. Create a new blank HTML page by choosing File, New from the menu, or pressing Command+N (Mac) or Control+N (Windows) on your keyboard. 2. Open the Objects palette, if it is not already open, by selecting Window, Objects from the menu, or pressing Command+2 (Mac) or Alt+2 (Windows).
,
Designing Pages with Tables
3. Click the Basic button of the Objects palette.
,
4. Drag and drop a Table icon from the palette to your page, or double-click the Table icon to insert a table at the point of the blinking cursor (see Figure 6.2).
131
FIGURE 6.2 Drag and drop or double-click a Table icon from the Objects palette to place a table onto your page.
Adjusting the Basic Table Attributes An HTML table consists of horizontal rows and vertical columns that intersect, similar to what you would see in a monthly calendar. The squares or rectangles created by the intersection of the rows and columns are called cells. By default, GoLive creates a table, consisting of three rows and three columns, which are 180 pixels in width. It has a border of 1 pixel, cell padding of 0 pixels, and cell spacing of 2 pixels. Let’s learn what all that means, and how you can alter those settings to create the kind of table you want.
, TO DO
To Do: Changing the Number of Rows and Columns in a Table To change the number of rows and columns in your table, complete the following steps: 1. Select the table by clicking once on its left or top border. A tiny square will appear next to the arrow cursor when you are in the correct spot. You will know the table is selected by the appearance of a thin line around the outside of the table. 2. Open the Inspector, if it is not already open, by choosing Window, Inspector from the menu, or by pressing Command+1 (Mac) or Control+1 (Windows) on your keyboard. 3. Using the Inspector, you can now indicate how many rows and columns you want in your table. Type 4 into the Rows field and 5 into the Columns field. Your table now has four rows and five columns.
,
4. Type 2 into the Rows field and 2 into the Columns field. Your table now has two rows and two columns. When you have a table selected, the Inspector will show the word Table in the lower-left corner. There are three tabs in the Table Inspector: Table, Row, Cell (see Figure 6.3). All three tabs are visible, and selectable when working on a table, but only the attributes that can be applied to the portion you are working on will be available for use. Those attributes that are unavailable will be grayed out. GoLive helps you work efficiently by switching to the correct tab based on your selection.
6
132
Hour 6
FIGURE 6.3 The Table Inspector has three tabs available that you will use to set the attributes of the table and the individual cells.
Setting the Dimensions of Your Table Take a look at the top portion of the Inspector where you can set the dimensions of your table. You can choose to set the width and height of your table in pixels, by percentage, or to automatic. Choosing Pixels sets your table at a fixed width or height. Percentage allows your table to expand or contract according to the width or height of the page. Auto means that the table will expand to accommodate whatever elements you put into it.
, TO DO
To Do: Changing the Width and Height of Your Table Complete the following steps to change the width and height of your table using the three options in the pop-up. 1. Place a table on the page. 2. In the Inspector, choose Percent from the Width pop-up. 3. Type 90 into the Width field. 4. Change the size of the page you are working on by dragging it open a little wider or narrower. Notice how the table expands to accommodate 90% of the window no matter how large or small you make the window. 5. Choose Pixels from the Height pop-up.
,
6. Type 400 into the Height field. The height of the table remains 400 pixels and does not adjust according to the size of the window. 7. Choose Auto from both the Width and Height pop-ups. The table will collapse to a small size because nothing is in it.
,
Designing Pages with Tables
133
,
8. Drag one image placeholder into the top-left cell and one into the bottom-right cell. Notice that the table resizes itself to accommodate the image placeholder. If you link those placeholders to images that are larger than the placeholders themselves, the table expands further to accommodate the image.
Auto is not recommended because it is somewhat unpredictable and difficult to control. You can dynamically adjust row and column sizes by pressing Option (Mac) or Alt (Windows) on your keyboard, clicking the edge of a row or column, and dragging to the desired size. Doing so will automatically set the size of the altered row or column in pixels.
Setting the Appearance of Your Table Let’s take a look at the middle portion of the Inspector where you can set the appearance of your table. The following is a list of options: • Border—This attribute draws a border around the table, which, by default, has a 3D appearance. Set the size of the border in pixels by typing a number into the Border field. Typing 0 removes the border entirely. • Color—You can set the background color of your table by choosing a color from the Color palette. Click once inside the color well to open the Color palette, and then click the color of your choice to apply it to the background of the table. GoLive has a great feature that enables you to apply a preset style to your table. For details, please refer to “Using Table Styles” later in this hour. • Cell Padding—Cell padding is the space between an element in a cell and the edge of the cell, almost like a margin. For instance, if you placed a graphic inside a cell, and set the Cell Pad field to 5, GoLive will add a 5-pixel space between the edge of the graphic and the edge of the cell. Set the amount of cell padding you desire by typing a number into the Cell Pad field. • Cell Spacing—Cell spacing is the amount of space between adjacent cells. You can set the spacing by typing a number into the Cell Space field. • Alignment—This drop-down list gives you the option of aligning your table to the right or left of other objects or text on the page. For example, if you have text on the page, you could choose Align Right, which would allow the text to wrap around the left side of the table.
6
134
Hour 6
• Caption—Check the box next to the word Caption and choose Above Table or Below Table from the drop-down list to create a space into which you can type a caption above or below the table (see Figure 6.4). Type the caption directly into the resultant space created above or below the table. FIGURE 6.4 You can add a caption above or below your table by using the Caption check box and drop-down list in the Table Inspector.
• BgImage—This option enables you to place a background image behind a table. To place an image in the background of a table, select the BgImage check box, and then point and shoot or browse to the image of your choice. If the table is larger than the image, the image will tile (repeat).
When choosing this feature, be certain to check in several different browsers to see how the table looks. For example, although Internet Explorer 5 for Mac renders the image behind the whole table, the image repeats the pattern in each cell in Netscape.
• Import Tab-Text—GoLive enables you to import data from tab or commadelimited text files, automatically place it into a table, and sort the data as needed. For instructions on this feature, please refer to “Importing Text into Tables,” later in this hour. • Table to Layout Grid—If you so choose, you can convert your table into a layout grid. Simply select the table, and then click the Convert button next to the words Table to Layout Grid. For more information on layout grids, please read Hour 7, “Designing Pages with the Layout Grid.”
Designing Pages with Tables
135
Working with Cells By default, the tables that GoLive creates are three rows by three columns. That configuration probably will not be exactly what you want, so you need to know how to manipulate the table to do such things as adding or deleting rows and columns or combining cells. By using the Table palette, selecting single or multiple cells, rows, columns, or even a whole table for editing becomes easy. You can also sort data in cells, apply a ready-made style to a table, (for instance, alternating row colors), or create and save your own style to use later on other tables. In this section, we’ll learn all the things that you can do to table cells, and how to do them. Throughout this section, please have both the Inspector and the Table palette open. To open them, choose Window, Inspector, and Window, Table.
Selecting Cells We must first make the distinction between selecting a cell and selecting the contents of a cell. If you see a blinking cursor inside the cell, you are in text entry mode. In this mode, you can select items or objects in the cell, drag items in or out of the cell, or type in the cell. When a thin line is drawn around a cell, you are in cell-selection mode, meaning the cell itself is selected rather than the contents of the cell. In cell-selection mode, you can set attributes such as height, width, and color of the cell itself. There are several ways to select cells. You can select cells in the table on your page, or by using the table tools in the Table palette. The methods for selecting cells in the table on the page are as follows: • To select a cell, place your cursor over the bottom or right border of the cell and click. You’ll know the cell is selected if you see a thin line drawn around its border. Shift+click to select multiple cells (see Figure 6.5). FIGURE 6.5 Shift+click to select multiple cells.
The Table palette shown in Figure 6.6 is very handy. Not only does it identify the size of the table and cells, but also it helps you to select the tables, including tables inside of tables. It can be difficult to determine which table you are working on, especially if you
6
136
Hour 6
have turned off the borders on the tables. The Table palette shows the make-up of one table at a time so that you can easily make the correct adjustments. The methods for selecting cells using the Table palette are as follows: • Open the Table palette (Window, Table) and choose the Select tab. Click a table to select it. You’ll see a replica of your table in the Table palette as shown in Figure 6.6. Click any cell to select the cell. Click and drag to select multiple adjacent cells. Shift+click to select noncontiguous cells. • To select all the cells in a table, select one cell, and then press Command+A (Mac) or Control+A (Windows) on your keyboard. Alternatively, you can choose Edit, Select All from the menu. You can also drag the mouse over the whole table to select all the cells. FIGURE 6.6 The Table palette lets you visually select tables and cells.
A hidden way to select cells is to activate the cursor inside of the cell that you want to select, and then Control+Return (Mac) or Control+Enter (Windows). This will select the cell that the cursor is in. When the cell is selected return to the cursor (text entry mode) by pressing Return (Mac) or Enter (Windows). Note that if you start with a cell and use this trick every time you repeat Control+Return (Mac) or Control+Enter (Windows) the selection moves outward from the cell to selecting the table the cell is in and so on.
• To select all the cells in a table, select one cell and then press Command+A (Mac) or Control+A (Windows) on your keyboard. Alternatively, you can choose Edit, Select All from the menu. • You can also click and drag inside the table itself to select multiple cells.
Designing Pages with Tables
137
Selecting Rows and Columns To select rows and columns in a table on your page: • Place your cursor over the left border of the row. The cursor will turn into a black pointer. Click once on the border of the row to select the row. Use a similar technique to select a column, but place the cursor over the top border of the column. You can select multiple rows and columns by repeating the process (see Figure 6.7). FIGURE 6.7 Put your cursor over the left edge of a row, or the top edge of a column and click to select the row or column.
If cells are already selected in a row or column, selecting the entire row or column will invert the selection, meaning that it will deselect those cells while selecting the others.
To select rows and columns in the Table palette: • Place the cursor on the left edge of the row you want to select. The cursor will change to a black pointer. Click once to select the row. Use a similar technique to select a column, but place the cursor on the top edge of the column. Select multiple rows and columns by repeating the process with the Shift key pressed, or by dragging the mouse over the rows and columns you want to select.
6 Sometimes it is easier to select entire rows and columns in the Table palette by clicking on the Blue rule that appears outside of the table.
Adding Rows and Columns Flexibility is the name of the game in GoLive, so there are several ways to add rows and columns to your table:
138
Hour 6
• Select a cell, and then click the Add Row or Add Column button in the Cell tab of the Table Inspector. This method adds a new row above the row containing the selected cell, or a new column to the left of the column containing the selected cell. • Select the table, and then increase the number in the Rows or Columns field. This adds rows to the bottom of the table, or columns to the right. • To add a column, select a cell in the column to the right of where you want the addition and press the + button (plus sign) on your keyboard. • To add rows at the bottom of the table, hold down the Command key (Mac) or the Control and Shift keys (Windows) and drag the bottom border of the table downward (see Figure 6.8). This method also works to add columns to the table. Command+drag (Mac) or Control+Shift+drag (Windows) the right side of the table to add additional columns. FIGURE 6.8 Command+Drag (Mac) or Control+ Shift+Drag (Windows) the bottom border of a table to add rows to the bottom.
• Select a row or column in either the table, or in the Table palette, and then Control+click (Mac) or right-click (Windows) and choose one of the available options from the pop-up list: Insert Column, Insert Column Right, Insert Row, Insert Row Bottom.
Deleting Rows and Columns What if you decide to remove a row or column? You can do so in the following ways: • Select a cell, and then click the Delete Row or Delete Column button in the Cell tab of the Table Inspector. • Decrease the number in the Rows or Columns field. • To delete a column, select a cell in the column and press the Backspace key (Windows) or Delete key (Mac) on your keyboard. • To delete a row, select a cell in the row and press Shift+Backspace (Windows) or Shift+Delete (Mac) on your keyboard.
Designing Pages with Tables
139
Spanning Cells You might find that you want to create a layout that requires a long open column on the left of the table, and small multicell columns on the right. One way to approach this is to “span” cells. Spanning cells means to merge adjacent cells. So, for example, if you have a three-row, three-column table, and span the first two cells in the second row, your table would look like this (see Figure 6.9). Spanned Column
FIGURE 6.9 Here is a table with a spanned column and row.
Spanned Row
To span cells, choose one of the following: • Select a cell, and then type the number of cells you want to merge into the Span Row or Span Column field in the Cell tab of the Table Inspector. You can span only from left to right or from top to bottom. To split the merged cells, reduce the number. • Select a cell, and then press Shift+right-arrow to span across rows, or Shift+downarrow to span across columns. Use Shift+up-arrow or Shift+left-arrow to decrease the span. • Select the cells you want to merge, and then Control+click (Mac) or right-click (Windows) on the selection. From the pop-up list, choose Merge Cells. To split the cells, use the same method, but choose Split Cells from the list.
When spanning cells, content in the selected cell will not be lost, but content in the cells added to the right or below will be lost.
6
140
Hour 6
Coloring Cells, Rows, and Columns You can set the background color of an individual cell, a single row, multiple rows, a single column, or multiple columns. The Row Color field is in the Row tab of the Table Inspector, and the Cell Color field is in the Cell tab of the Table Inspector (see Figure 6.10). You can also apply preset styles to the whole table. For more on table styles, please read “Using Table Styles” later in this hour. FIGURE 6.10 The Row Color field is in the Row tab of the Table Inspector, and the Cell Color field is in the Cell tab of the Table Inspector.
First, select the cells, rows, or columns whose color you want to change. Click inside the color field; doing so will open the Color palette. Click a color in the Color palette to apply it to the row or cells.
If you add color to the background of an empty cell, the color will not show up in Preview mode of GoLive, or in a browser. The cell must have content of some type in it for the color to appear. If you want to use a cell to add color to your page but don’t want to put any text or other items into the cell, simply select a cell (or cells) and Control+click (Mac) or right-click (Windows). From the pop-up menu, choose Insert Nonbreaking Spaces. This inserts a nonbreaking space into the cell or cells, which causes the background color of the cell to appear. The keyboard for inserting a nonbreaking space is Option+Space (Mac) or Shift+Space (Windows). In GoLive 6 you can enter and remove a nonbreaking space in all the cells at once. To do this, have the cells selected in a table. On the Table palette Control+Click (Mac) or right-click (Windows) on a cell. There are all kinds of helpful features in this contextual tool, including Insert Nonbreaking Spaces and Remove Nonbreaking Spaces.
Designing Pages with Tables
141
Formatting Text in Cells, Rows, and Columns It might seem odd, but if you want to format text in multiple cells, select the cells, not the text. Selecting cells would only work on one cell at a time. After you have made your selection, proceed to format the text as you learned in Hour 4, “Formatting and Stylizing Text.” You can apply fonts, types, text color, and styles such as bold and italic.
With the Contextual tools, Control+Click (Mac) or right-click (Windows), you can even apply Cascading styles across multiple cells. Read more about this in Hour 18, “Formatting Text with Cascading Style Sheets.”
, TO DO
To Do: Aligning Content in Table Cells You might want to align text and other elements inside a row or a cell. The alignment options for rows appear in the Row tab, whereas the alignment options for cells appear in the Cell tab. The options in both tabs work the same way. To align content in your table, complete the following steps: 1. Drag a Table object from the Objects palette to your page. Set its width to 500 pixels and height to 400 pixels. 2. Drag an image placeholder into the top-left cell. 3. Select the cell containing the placeholder by clicking on its bottom or right border. This brings the Cell tab of the Inspector to the front. 4. Select the pop-up options in the following list one at a time and see how each option affects the placement of the image placeholder in the cell. Vertical Alignment: • Default—By default, text or objects placed into a cell will align to the middle vertically. • Top—Choose this to align text or objects in a cell to the top of the cell vertically.
,
• Middle—Choose this to align text or objects in a cell to the middle of the cell vertically. • Bottom—Choose this to align text or objects in a cell to the bottom of the cell vertically.
6
Hour 6
,
142
Horizontal Alignment: • Default—By default, text or objects placed into a cell will align to the left horizontally. • Left—Choose this to align text or objects in a cell to the left horizontally. • Right—Choose this to align text or objects in a cell to the right horizontally.
,
• Center—Choose this to align text or objects in a cell to the center horizontally.
If you choose to align Center, and are ignored, it could be that you selected the text earlier and tagged it to align left or right using the toolbar. The tag closest to the text wins. In other words, what you do to the text overrules what you do to the cell, and the cell overrules the row.
Setting the Width and Height of Individual Cells You can set the width and height of individual cells in the Cell tab of the Table Inspector. You can choose to set the dimensions by pixel, by percentage, or set to Auto. The default setting is Auto. • Pixel—Use this option to set your cell or row in an absolute pixel size. • Percentage—Use this option to set the cell or row as a percentage of the whole table. For instance, a cell whose percentage is set to 25% will always render as one-fourth the size of the table, no matter how large or small the table is on the page. • Auto—Use this option to let the browser determine how much space is needed by the row or cell. This has proven to be hazardous in some browsers, so it is not recommended. When you set the width of a cell, it affects every cell in that column. Likewise, setting the height affects every cell in the row. By combining settings, you can create different results for your table. For example, assume that you have a two-column table, each column is only one cell, and you set the left column to 200 pixels in width, and the right column to Auto. The left column will always remain the fixed size of 200 pixels, whereas the right column will expand and contract along with the size of the browser window.
Designing Pages with Tables
143
If you don’t make changes to your cells they will be left at Auto. This leads to cells becoming larger as you type and unexpected results in the browser. When you are ready to lock down the size of your cells, select all the cells, and then in the Cell Inspector, choose pixel from both the Width and Height. If they are various sizes no value will be in the text box, and that is okay. If you check the individual cells you will see that they now have values locked in.
Using Table Styles Introducing GoLive’s table styles, a handy feature that enables you to apply preset styles to your tables, and to create and save your own styles. To use table styles, open the Table palette by choosing Window, Table from the menu, and then click the Style tab. In the pop-up list at the top left, you’ll see a list of preset styles that you can use.
, TO DO
To Do: Applying a Table Style To apply a style, proceed as follows: 1. Choose a style from the pop-up list. The chosen style will be shown in the sample below the pop-up.
,
2. When you have made your style choice, select the table to which you want to apply the style and click Apply in the Table palette. To remove the style, click Clear. To try a different style, repeat steps 1 and 2 (see Figure 6.11). Styles Pop-up Menu
FIGURE 6.11 The Style tab of the Table palette.
6
Import Table Style Export Table Style
New Table Style Delete Table Style Capture Table Style Rename Table Style
144
Hour 6
, TO DO
To Do: Create a Table Style To create your own style, proceed as follows: 1. Place a table on your page. 2. Apply the attributes you would like the table style to have; for example, row and column colors, font styles, text colors, and so on. 3. When you are satisfied with the style you have created, click the New button (dogeared page icon).
,
4. Type a descriptive name for your style into the input field, and then click the Capture button (looks like a camera). To remove a style from the list, select the style in the pop-up list. Its name will show in the input field at the bottom of the Table palette. Click the Trashcan to remove the style from the list.
Using Tables to Structure Your Web Page If you’ve read this hour through from the beginning, by now you’ll have a good idea of how to create and manipulate tables. So, let’s have some table fun! In this section, we show you examples of how you can use tables to structure your Web pages. One of the first things to remember is that a table cell can accept more than text. You can also put an image, a layout grid, or even another table into a table cell. By combining these elements, you can create some neat effects.
Example 1: Using Nesting Tables to Create a Design In example 1 (see Figure 6.12), you see two tables. One of the tables is inside the other, which is referred to as nesting. FIGURE 6.12 Example 1 shows a smaller table nested inside the center column of a larger table.
The outer table consists of two rows and three columns. The smaller table is placed inside the middle column in the second row. The smaller table consists of three rows and
Designing Pages with Tables
145
three columns. In this way, we have created a layout that is controlled by one table and yet have organized information in a smaller table inside of it. The outer table has its attributes set like those shown in Figure 6.13. FIGURE 6.13 The outer table has its attributes set like this in the Inspector.
The 575 pixels is a fixed-width size, and will stay the same regardless of how wide or narrow the user opens her browser window.
If you want the table to center in the browser window, select it and click on the center align button in the toolbar.
The inner table has its attributes, set like those seen in Figure 6.14. FIGURE 6.14 The inner, or nested, table has its attributes set like this in the Inspector.
6
146
Hour 6
In the Table palette, you might notice an icon in the upper right. This tool is used to help you zoom in and out of nested tables. It’s not really a tool that you select; just point your cursor to a nested table and click as shown in Figure 6.15. Your nested table will fill the Select window. Click the icon in the upper right to zoom back out.
FIGURE 6.15 Use the Zoom feature in the Table palette to zoom in and out of nested tables.
Example 2: Using a Layout Grid Inside a Table In example 2, <www.bwmotorworks.com>, we’ve nested a layout grid inside a table cell (see Figure 6.16). FIGURE 6.16 A layout grid is nested inside a table cell.
Designing Pages with Tables
147
Figure 6.17 shows the attributes for this layout. FIGURE 6.17 The table in this example has its attributes in the Table Inspector set like this.
If you want to place several images inside table cells that you’d like to have butt up against one another with no space between, you must eliminate the border, cell padding, and cell spacing by typing 0 into their respective fields.
Example 3: Using a One-Cell Table Inside Another Table In example 3, <www.justtap.com>, we’ve nested a one-cell table inside a table cell (see Figure 6.18). We set the vertical alignment of the outer cell to Middle, and horizontal alignment to Center. Using this method, the small one-cell table will float in the center of the larger table cell. One of the table cells contains an Image Map (for more on image mapping refer to Hour 5, “Using Graphics on a Web Page”), and the leftmost cell contains a series of rollovers. (For more on rollovers and other DHTML effects, read Hour 13, “Using JavaScript Actions.”) Let’s take a look at the attributes for the table used in this layout (see Figure 6.19).
6
148
Hour 6
FIGURE 6.18 This example shows a one-cell table nested inside a table cell, an Image Map in another cell, and a series of DHTML rollovers in a different cell.
FIGURE 6.19 The table in this example has its attributes in the Table Inspector set like this.
Example 4: Using Multiple Tables Example 4, <www.graphicinstitute.com> makes use of multiple tables on a page (see Figure 6.20). Not only does this page use multiple tables, but also the top table has been made into a component. Components are pieces of HTML that can be created and dropped onto any number of pages. Later, if you edit the original file, GoLive automatically updates all the other files using the component for you. For details on how to use components, please read Hour 10, “Using Components, Stationeries, Library Snippets, and Page Templates.”
Designing Pages with Tables
149
FIGURE 6.20 This page makes use of multiple tables.
The first table, which is a navigation bar, is actually a table within a table. See Figure 6.21. The outside table is only one row and one column and is set to 103%. It is solid black. This means that the black table will always extend across the browser window. The navigation bar itself is centered inside of the one-celled table. Now if a viewer enlarges or reduces the size of the browser, the navigation bar stays consistent in distance between buttons, but it shifts in its entirety to always center in the back table. FIGURE 6.21 Use a table within a table to make a navigation bar.
6
The GIF format enables you to designate a color to be transparent, which you would do in an art program such as Adobe Photoshop, ImageReady, or Illustrator. If you make a one-color, one-pixel GIF, and then set that one color to transparent, you have a tiny image that you can use as an invisible spacer.
150
Hour 6
You can use countless variations when designing a Web site using tables. The more you use tables, the more you’ll love them! Just be sure to always check your designs in the major browsers and on varied platforms. Browsers often render tables somewhat differently, and you don’t want to be unpleasantly surprised.
Importing Text into Tables If you have a tab-delimited, comma-delimited, space-delimited, or semicolon-delimited text document, you can easily import the data into a table in GoLive.
, TO DO
To Do: Importing Text into Tables To accomplish this, complete the following steps: 1. Place a table on your page by either dragging or double-clicking the Table icon in the Basic tab of the palette. 2. Select the table by clicking the right or top edge. 3. Open the Inspector, if it is not already open, by choosing Window, Inspector from the menu, or by pressing Command+1 (Mac) or Alt+1 (Windows) on your keyboard. 4. Click the Browse button next to Import Tab-text in the Inspector and navigate through your hard drive to the file containing the data you want to import. If you want to create a file to test with, simply type some text separated by tabs in Simple Text or Notepad. Save it with a .txt extension. 5. Select Tab, Comma, Space, or Semicolon as the delimiter type from the drop-down list in the dialog box (see Figure 6.22). A delimiter is a character that separates the data items in a database so they can be imported into another application.
,
6. Click Open.
FIGURE 6.22 Select Tab, Comma, Space, or Semicolon as the delimiter type from the drop-down list in the dialog box.
Designing Pages with Tables
151
GoLive will automatically import the data and create as many rows and columns as needed in your Table. You can then edit the table any way you would like, including applying a preset style to it or sorting the data you have imported. Both of these are covered near the end of the next section, “Sorting Data in Tables.”
Sorting Data in Tables After importing data from your text file into a table in GoLive, you can sort it any way you’d like. You can select any column or row and sort the information in it. You can choose multiple columns or rows to sort, and you can choose ascending or descending order. Also, you can specify secondary and tertiary sorting criteria. We will use some simple examples in the section. In our example, which you can download from www.golivein24.com, the imported data contains the fields Job Title, Location, and Salary in three columns, in that order (see Figure 6.23). We will give you a simple example to help you understand how it can help organize table data. FIGURE 6.23 A sample table containing three columns of data.
Use one of the techniques we discussed earlier in this hour to select the table. Click the Sort button in the Table palette; the Sort palette shown in Figure 6.24 appears. To sort based on the alphabetical listing, choose Column 2 from the first pop-up menu, and then select Ascending. Make sure that you also choose Sort Without Header from the pop-up menu at the bottom of the palette so that your headers do not become included in the reorganization. FIGURE 6.24 Sorting based upon the second column of data.
If you want to sort using two sets of criteria—for example, if you want to sort first by Job Title, and second by Location—you choose Column 1 in the first pop-up menu, indicating that you want to sort the criteria in column 1 first (Job Title), and then choose Ascending order from the pop-up menu. Then choose Column 3 from the second pop-up,
6
152
Hour 6
indicating that you want a secondary sort based on the criteria in column 3 (Salary) and choose Descending from the pop-up menu. See Figure 6.25. FIGURE 6.25 Sorting multiple columns of data using two sets of criteria.
Finally, you can sort using a third criteria. Simply select the row or column you want as the tertiary criteria from the third pop-up in the Sort palette.
Summary In this hour you learned how to add a table to your Web page, how to adjust its basic attributes, and how to select, add, and delete cells, rows, and columns in the table. You also learned how to color cells, rows, and columns, how to format the text inside of them, and how to import text from a delimited file. Finally, you were given specific examples of how tables can be used to structure your Web page.
Q&A Q I have placed a table on my page, but when I click the Cell tab of the Inspector to work on a cell, all the selections are grayed out! How do I get them to work? A You must first select the cell for the settings in the Cell tab of the Table Inspector to be activated. Q My page looks fine in GoLive and in Internet Explorer, but in Netscape Communicator the table is all wacky. What’s wrong? A Check to see that you haven’t done something wrong in the arithmetic. What we mean is, you might have a table cell set to 200 pixels, and have an image inside that cell that is 300 pixels. This might cause the table to render incorrectly in some browsers. Q I have a three-column, three-row table. I wanted to span all three cells in the second row. I selected the rightmost cell, and then tried to type 3 into the Span Columns field in the Table Inspector, but it wouldn’t let me. What am I doing wrong? A You can span columns only from left to right, not right to left. You can span rows only from top to bottom, not bottom to top.
Designing Pages with Tables
153
Quiz 1. Spanning, in reference to table cells, means a. Sending unsolicited e-mail to strangers. b. Joining adjacent table cells. c. Placing text into a cell that runs completely across the cell. 2. To add a background color to a table a. Drag the color chip from the Color palette and drop it onto the Table icon in the Basic tab of the palette. b. Drag the color chip from the Color palette and drop it onto the table. c. Drag the color chip from the Color palette and drop it onto the Color field in the Table tab of the Table Inspector. 3. To import text into a table, you first need to a. Create a table with the exact number of rows and columns. b. Drag a table icon from the palette onto your page. c. Create a new blank page, but put nothing on it. 4. Which of the following items can be placed into a table cell? Select all that apply. a. Text b. Table c. Floating box d. Text box e. Layout grid f. Image
Quiz Answers 1. b. Spanning, in reference to table cells, means joining adjacent table cells. 2. c. To add a background color to a table, drag the color chip from the Color palette and drop it onto the Color field in the Table tab of the Table Inspector. 3. b. To import text into a table, drag a Table icon from the palette onto your page. 4. a, b, e, and f. Text, a table, a layout grid, and an image can all be placed into a table cell.
6
154
Hour 6
Exercise Tables can be tricky. It will help you master them if you play around a little. Use the following exercise to get up to speed. Create a table with three rows and two columns, and set the width to 580 pixels. Span both columns in the top and bottom rows. Add color to the newly spanned rows, type a headline into the top one, and give it a Header 2 size. Type an address into the bottom one and make the text bold. In the middle row, add an image to the left cell, and text to the right. Add a background color to the right cell and change the text color. Create a link from the image to another page.
HOUR
7
Designing Pages with the Layout Grid In Hour 5, “Using Graphics on a Web Page,” you were introduced to tables, and how to use them in GoLive to create complex page designs. Get ready to be amazed even more because you are about to enter grid territory. GoLive’s layout grids give you the ability to drag and drop elements on your page, much like you would in a page layout application. What might take hours of trial and error to create using tables can often take only minutes to put together on a grid. By combining tables and grids, you can create virtually any design of your heart’s desire without even breaking a sweat. So what exactly is a grid? In essence, GoLive’s layout grids are nothing more than elaborate tables, but you don’t see the table or have to worry about cells, columns, rows, or spanning—GoLive does all the work for you! We’ll introduce you to layout grids in this hour, and give you some suggestions on how to use them to their fullest potential.
156
Hour 7
In this hour, you will learn how to • Place a layout grid onto your Web page • Adjust the size of the grid and spacing of the gridlines • Use graphics or text on a grid • Align objects on a grid and distribute the space between them • Decide whether you should use a table or a grid
Adding a Layout Grid to Your Page A GoLive layout grid resembles a piece of graph paper. It is divided into vertical and horizontal gridlines, which aid you in placing objects on your page with pixel precision. By default, the dimensions of a new grid are 201×201 pixels. The grid is easily resizable, and GoLive enables you to alter the number of pixels between vertical and horizontal gridlines, make the gridlines visible or invisible, enable or disable a snap-to feature, color the grid background, and more. You can have multiple layout grids on your page, but for now let’s start with just one. When you are more comfortable with the use of grids, we’ll examine how to combine them to create various looks.
, TO DO
To Do: Placing a Layout Grid As usual, work with a Site file open. For details on how to create a Site file, read Hour 2, “Creating a Site File.” To place a layout grid on your page, complete the following steps: 1. Open a new or existing page. 2. Open the Objects palette, if it is not already opened, by selecting Window, Objects from the menu, or by pressing Command+2 (Mac) or Control+2 (Windows). 3. There are two ways to place the layout grid: • Drag a layout grid from the Basic section of the Objects palette and drop it onto your page. If you have nothing else on your page, the layout grid will be positioned in the upper-left corner of the page (see Figure 7.1). If there are already other items on the page, you can drag and drop the grid to where you want it to appear.
,
• Click your cursor where you want the layout grid to go on your page, and then double-click the Layout Grid icon on the Basic section of the Objects palette. The grid will be positioned at the insertion point of your cursor (see Figure 7.2).
Designing Pages with the Layout Grid
157
FIGURE 7.1 By default, a new layout grid is positioned in the top-left corner of a blank page.
FIGURE 7.2 You can insert a grid into the flow of the HTML by placing your cursor in a particular spot, and then doubleclicking the Layout Grid icon in the palette.
Investigating a Grid Now that we have a Layout Grid on the page, let’s select our Layout Grid and click on the Source section to see what is happening behind the scenes. Even if you don’t know code, you can see in Figure 7.3 that GoLive’s Layout Grid is simply a table. The rows, columns, and size will be determined as you build the page. We’ll keep an eye on this and return to this topic later in the hour when we start placing images on the page. Note that you can place a layout grid directly onto a page, inside of a table, on top of another grid, or inside a text box on another grid. It is not recommended to put a grid (or a table) inside of a floating box.
7
158
Hour 7
FIGURE 7.3 Design carefully! GoLive will be building a page from the placement of your objects on the Grid automatically.
It’s easy to get rambunctious and start piling object on top of object indiscriminately. We urge you to use caution when considering such a maneuver. It will create such complex and dense source code that it could cause the browser to gag upon trying to render it.
Adjusting the Basic Grid Attributes You can use a small grid to hold together a few images, or you can use a larger grid to hold all your page elements together. As you are working, you might find that you’d like to adjust the gridlines, or align the grid so that text on the page flows around it. You can do all these things.
, TO DO
To Do: Setting the Grid Width and Height To set the width and height of the grid, complete the following steps: 1. Begin by placing a grid on your page as instructed in the previous section. 2. Open the Inspector, if it is not already opened, by choosing Window, Inspector from the menu, or by pressing Command+1 (Mac) or Control+1 (Windows) on your keyboard.
,
3. There are two ways to adjust the size of the grid: • Type your desired dimensions into the Width and Height fields in the Inspector (see Figure 7.4).
159
,
Designing Pages with the Layout Grid
FIGURE 7.4 Use the Width and Height fields in the Inspector to set the size of your grid in pixels.
• Select the grid by clicking along the border. You’ll know you are in the right spot when a little square shows at the right side of the arrow (see Figure 7.5). FIGURE 7.5 A little square appears next to the arrow when you are over the grid border. Click to select the grid.
,
When a grid is selected, it will display three blue handles—one centered at the right border, one centered at the bottom border, and one in the bottom-right corner. Click and drag the right border handle to adjust the width of the grid. Click and drag the bottom handle to adjust the height of the grid. Click and drag the corner handle to adjust both width and height simultaneously. Holding down the Shift key while dragging the corner handle resizes the grid while retaining its height and width proportions (see Figure 7.6). Note how the Width and Height fields in the Grid Inspector change as you drag.
7
160
Hour 7
FIGURE 7.6 Drag a handle to resize the grid.
Adjusting the Gridlines When you use a piece of graph paper to align items, you are stuck with the spacing of the gridlines as they are printed on the page. With a grid in GoLive, however, the choice of spacing is entirely up to you. By default, GoLive creates a grid where the gridlines are 16 pixels apart, both vertically and horizontally. You might find that spacing a bit small for your purposes and want the lines to be 32 pixels apart. Conversely, you might prefer lines that are only 8 pixels apart, or 10, or 4, or 100. The choice is yours.
, TO DO
To Do: Setting the Gridlines’ Attributes To designate the amount of space, in pixels, from gridline to gridline, complete the following steps: 1. Type the desired number into the Horizontal or Vertical field in the Grid Inspector (see Figure 7.7).
FIGURE 7.7 Type the desired number into the Horizontal or Vertical field in the Grid Inspector to designate the amount of space, in pixels, from gridline to gridline.
,
2. Select the Snap options for the gridlines: • Leaving the Snap box checked will ensure that items you place onto the grid are lined up perfectly to a gridline. With Snap selected, you cannot position an object between gridlines (see Figure 7.8).
161
,
Designing Pages with the Layout Grid
FIGURE 7.8 Leaving the Snap box checked will ensure that items you place onto the grid are lined up perfectly to a gridline. By default, the Snap option is checked.
You can move an item on a grid to the next gridline by selecting the object and pressing the right-arrow, left-arrow, up-arrow, or down-arrow key on your keyboard. Also, pressing Option+arrow key (Mac) or Alt+arrow key (Windows) nudges the object one pixel at a time.
• Deselecting Snap enables you to place items on the grid in any position at all. Using the directional arrow keys will move the selected item one pixel at a time on the grid, rather than moving it all the way to the next gridline. You will need to deselect Snap if you are trying to place items against one another with no space in between them.
Even if Snap is deselected, you can move the object from gridline to gridline by using the arrow keys on the keyboard by holding down Option (Mac) or Control (Windows).
,
3. Select the Visible check boxes if you want the gridlines to be visible. With Visible deselected, the gridlines are invisible, although they are still in effect (see Figure 7.9).
FIGURE 7.9 You can make the gridlines invisible by deselecting the Visible option.
7
162
Hour 7
Aligning the Grid on the Page Perhaps you have used a layout grid to hold a series of navigation buttons in place. Suppose that you wanted to have such a grid on the right side of your page, with the text flowing around it on the left. This is easily done by using the drop-down menu in the Grid Inspector.
, TO DO
To Do: Aligning a Layout Grid To align a layout grid, complete the following steps: 1. Select the grid by clicking the border. (You’ll know you are about to click in the right spot when a little square appears next to the arrow.)
,
2. In the Inspector, select an Alignment option from the drop-down list. Choose Left, Right, or Default. Align Left aligns the grid to the left of other items on the page. Align Right aligns the grid to the right of other objects on the page. Default places the grid in its own space, with other objects on the page either preceding it or following it, depending on the placement of the grid in relationship to those items (see Figure 7.10).
FIGURE 7.10 You can align the grid to the left or right of other objects on the page.
Applying a Background Color to the Grid
, , TO DO
Layout grids accept a background color, as do tables, layout text boxes, and floating boxes. By applying a background color, you can create visual interest without adding any download time to your page because the color is designated in the HTML without the need for a graphic image to load.
To Do: Setting the Grid Background Color To assign a background color to your layout grid, complete the following steps: 1. Select the grid by clicking the border. 2. In the Inspector palette, click once on the Color cell to open the Color palette (see Figure 7.11).
163
,
Designing Pages with the Layout Grid
FIGURE 7.11 Click once on the Color cell in the Grid Inspector to open the Color palette.
,
3. Click a color in the Color palette; the grid inherits the color you click. Alternatively, you can drag a color chip from the Color palette and drop it into the color cell in the Inspector (see Figure 7.12).
FIGURE 7.12 Drag a color chip from the Color palette and drop it into the color cell in the Inspector to change the background color of your grid.
Adding Objects to the Grid
, , TO DO
Layout grids accept any item from the palette that can be placed onto a page. However, text cannot be typed directly onto a grid, but must be typed into a text box, which you lay onto the grid.
To Do: Placing Items onto a Grid To place items from the Objects palette onto a grid, complete the following steps: 1. There are two ways to place items onto a layout grid: • Drag and drop an object such as a table or Image icon from the Objects palette onto the grid (see Figure 7.13).
7
Hour 7
,
164
FIGURE 7.13 Drag and drop an object from the Objects palette on the grid.
• Select the grid by clicking the border and then double-clicking an object in the Objects palette.
New in GoLive 6 is an improved way to double-click an object and place it in the grid. Simply click once on the grid to place a tick mark. When you double-click an object, it will place it exactly where you marked it!
The new object will be placed in the top-left corner of the grid, if the grid is empty. If the grid contains other items, the new object will be created in the top-left corner only if space permits. If there is not enough room in the topleft corner, the object will appear elsewhere on the grid where there is enough room. If there is not enough room at all on the grid, it will expand to accommodate the new object. Also note that if you do not select the grid before double-clicking an item in the palette, the object will be placed onto the page itself, rather than onto the layout grid.
2. If an object on a layout grid is active (selected), the Toolbar offers a special set of tools for positioning objects on the grid (see Figure 7.14). Horizontal Vertical Position Width (x) alignment
,
FIGURE 7.14 The Toolbar offers several options when an object on a layout grid is active.
Vertical Position
Height (y)
Group and Ungroup
Horizontal alignment
,
Designing Pages with the Layout Grid
165
Choose from the following tools: • Horizontal and Vertical Position—These boxes enable you to type numbers showing the position of the object on the grid relative to the left and top margins of the grid. • X and Y Size—You can designate the size of an object by typing the desired dimensions into the X and Y boxes. • Horizontal Alignment—This aligns an object relative to the grid itself. You can align an object to the left, center, or right of the grid. • Vertical Alignment—The same as Horizontal Alignment, only this aligns the object to the top, middle, or bottom of the grid.
,
• Group and Ungroup—With several objects selected, clicking the Group button locks them in place relative to one another. This is useful, for example, when you want to move a whole set of buttons to another place on the grid without affecting the spacing between them. Ungroup returns grouped items to individual objects (see Figure 7.15).
FIGURE 7.15 GoLive enables you to select two or more objects on a grid and group them.
Select the objects. Shift+Click or Drag over the objects to select more than one at a time.
Click the Group button
Now the objects are grouped
7
166
Hour 7
, TO DO
To Do: Placing Text onto a Grid To put text onto a grid, complete the following steps: 1. Place a Layout text box on the grid either by using drag and drop (see Figure 7.16), or double-click as described in the previous section. (The icon for a Layout text box is in the Basic section of the palette.)
FIGURE 7.16 Add a Layout text box to a grid using drag and drop, or by double-clicking the Layout Text Box icon in the Objects palette.
,
2. You then add text to the text box using any of the methods described in detail during Hour 4, “Formatting and Stylizing Text.”
, TO DO
To Do: Resizing the Layout Grid Text Box To resize a text box that you have placed on a grid, complete the following steps: 1. Select the text box by clicking any of its borders. Small blue handles appear at each corner of the box and in the middle of each side. 2. You can drag any of the handles to resize the text box. Any text inside will reflow to the box’s new dimensions. The cursor will change to a double-sided arrow when it is over a handle (see Figure 7.17).
,
FIGURE 7.17 The cursor will change to a double-sided arrow when it is hovering over a handle. Drag any handle to resize the text box.
167
,
Designing Pages with the Layout Grid
If you create a page that incorporates both graphics and text boxes in a complex layout, you might find that your careful design looks drastically different on a Mac than it does on a PC. Text on PCs appears larger than on Macs. Therefore, if you have lots of text boxes butted up against graphics— which looks perfect on a Mac—it could very well be pushed all out of place when viewed on a PC. It is important that you get into the habit of checking your pages in multiple browsers, versions, and platforms. Keep in mind that the issue with larger text on the PC can be controlled with Cascading Style Sheets (as discussed in Hour 18).
Grids are particularly useful when piecing together a graphic that has been sliced to create rollover effects inside of a larger image. You place graphics onto a layout grid in the same manner that you place them directly onto a page. For details of those methods, please refer to Hour 5.
In addition to text boxes and graphics, other items that are commonly placed onto a layout grid include tables, QuickTime Movies, Flash (.swf) files, horizontal rules, and other layout grids. We do not recommend placing anchor links onto a grid because they might not work properly.
,
Aligning Objects on the Layout Grid A neat feature of the layout grid that is quite handy is its capability to align objects to each other, and to space them out evenly both vertically and horizontally. Open the Inspector, if it is not already opened, by choosing Window, Inspector from the menu, or by pressing Command+1 (Mac) or Control+1 (Windows) on your keyboard. Place several items of varying sizes onto a layout grid, and then select them all by either Shift-clicking, or clicking and dragging. Next, open the Align palette by choosing Window, Align from the menu. The following sections cover what each of the Align palette options does.
Using the Align Palette The first group of buttons under the heading Align to Parent are duplicates of those in the Toolbar described earlier in this hour. They align objects on the grid relative to the grid itself.
7
168
Hour 7
The rest of the buttons (described in the following list) align objects on the grid relative to each other. To use them, you must first select at least two objects on the grid. • Align Objects—There are six buttons in this row. The left three buttons (the Horizontal Alignment buttons) enable you to align all the selected objects’ left sides, centers, or right sides. The three buttons on the right (the Vertical Alignment buttons) enable you to align the objects’ top sides, centers, or bottom sides. Buttons might be grayed out if the alignment option is not possible to achieve because of the placement of the objects on the grid (see Figure 7.18). FIGURE 7.18 The options available to you in the Align palette depend on the position of the objects you are trying to align. Note that if something is already aligned the choice will be grayed. Items before applying alignment
Items after applying alignment
• Distribute Objects—Use this option to distribute space evenly amongst three or more selected objects relative to their left edges, vertical centers, right edges, top edges, horizontal edges, or bottom edges (see Figure 7.19).
Designing Pages with the Layout Grid
169
FIGURE 7.19 The Distribute Objects option enables you to easily line up a row of buttons or other objects on your grid.
Items before applying distribution
Items after applying distribution
• Distribute Spacing—Click the Horizontal Spacing button (on the left) to distribute space amongst three or more objects horizontally so that the amount of space on the left and right vertical axes is equal. Click the Vertical Spacing button (on the right) to distribute objects vertically so that their top and bottom horizontal axes are equally spaced (see Figure 7.20).
7
170
Hour 7
FIGURE 7.20 Distribute Spacing distributes horizontal or vertical space evenly among the selected objects.
Items before applying Distribute Spacing
Items after applying Distribute Spacing
Optimizing a Layout Grid When you have all the elements on your grid just the way you want them, select the grid, and then go to the Grid Inspector and click the Optimize button. This will lop off any excess grid at the bottom and right sides (see Figure 7.21).
Designing Pages with the Layout Grid
171
FIGURE 7.21 Click the Optimize button in the Inspector to remove any extra space from the bottom or right side of the grid.
Before optimizing
After optimizing
Summary We hope you enjoyed this hour as much as we did! To recap, you learned how to add a layout grid to your Web page and adjust its basic grid attributes including the size of the grid, its placement on the page, the amount of space between gridlines, the snap-to-grid feature, and the visible gridline feature. We discussed the fact that the GoLive layout grid accommodates many types of objects. You learned which objects you could use on a grid, how to place them onto the grid, and how to select and arrange them. We explored the Align palette, which enables us to align objects both relative to the grid, and relative to other objects. The palette also enables us to distribute space among objects on the grid. Finally, we talked a little about how the layout grid compares to tables.
Q&A Q I keep trying to put an object onto my grid in a certain place using drag and drop. But when I let go of the object, instead of going in the spot where I want it, it lands in a different place altogether! Why? A One of two things could be happening. Perhaps the space on the grid into which you are trying to place the object is insufficient to accommodate the size of the object. In that case, you must either move other objects to allow enough space for the new one, or increase the size of the grid. The other thing that might keep you
7
172
Hour 7
from being able to place your object exactly where you want it is that you might have the Snap feature selected for your grid. If so, GoLive allows you to place the object on the grid only according to the gridlines. If you want to put an object between lines, turn off the Snap feature in the Inspector. Q I’m working on a staff page that has staff members’ photos lined up on the left of the page, and a short bio across from the photo on the right. But when I look at the page on my friend’s PC, the spacing is all out of whack, and the images and text don’t line up properly. It looks great on my Mac. What have I done wrong? A What you are experiencing is the result of the way text is rendered on the two different operating systems. Text appears larger on PCs than on Macs. What happened in your case is that the text expanded but the images stayed put. Because users can control the default text size in their browsers, the way your page looks can vary greatly from machine to machine. You would be better off using a table when you need a flexible layout because tables can expand and contract to accommodate the contents they hold, or use Cascading Style Sheets to better control the text (as discussed in Hour 18). Q I’m trying to align objects on my grid. I have three photos that I want to have line up at their top edges. When I go to the Multiselection Inspector, the button I want is grayed out! How do I get it to work? A The reason the button is unavailable to you is because the objects you want to align are too close together. In order for them to line up at their top edges, they would have to overlap at the sides. You cannot have objects overlap on a grid; therefore, the option you are trying to use is grayed out. It is possible that the button is grayed out because the objects are already aligned as well.
Quiz 1. Which of the following items cannot be placed onto a layout grid? a. A text box b. A floating box c. A table d. An image
Designing Pages with the Layout Grid
173
2. Checking the Snap check box in the Layout Grid Inspector causes the grid to do what? a. Snap to the bottom of the page b. Collapse c. Place objects precisely on the gridlines 3. To align an object to the center of the grid, use a. The Alignment buttons in the Toolbar b. The Alignment buttons in the Inspector c. The Alignment option in the menu 4. The Optimize button in the Grid Inspector performs what function? a. Reduces the space between objects b. Reduces the number of colors in the images on the grid c. Reduces the dimensions of the grid
Quiz Answers 1. b. A floating box cannot be placed onto a layout grid. 2. c. Checking the Snap check box in the Layout Grid Inspector causes the grid to place objects precisely on the gridlines. 3. a. Use the Alignment buttons in the Toolbar to align an object to the center of the grid. 4. c. The Optimize button in the Grid Inspector reduces the dimensions of the grid.
Exercises Complete the following exercises to solidify your understanding of Layout grids and objects that you place onto the grid. 1. Create a layout grid that is 580 pixels wide and any height you choose. Place several objects on the layout grid side by side with some space in between, and then align their centers horizontally and distribute the space evenly between them. 2. Place several objects on a layout grid and butt them up against each other with no space in between by deselecting the Snap option in the Grid Inspector and positioning the object using the arrow keys on your keyboard.
7
HOUR
8
Designing Pages with Floating Boxes Welcome to the last of three lessons about page layout strategies. If you are reading this book cover to cover, you learned about tables and layout grids in the previous two lessons. This final page layout strategy uses GoLive’s floating boxes features. During this hour, you’ll learn about the following things: • Considering Web browser compatibility with floating boxes • Designing a Web page with floating boxes • Changing floating box attributes • Adding content to a floating box • Managing floating boxes with the Floating Boxes palette • Converting floating boxes to a layout grid
176
Hour 8
Considering Web Browser Compatibility with Floating Boxes By now you should be familiar with using tables (refer to Hour 6, “Designing Pages with Tables”) and GoLive’s layout grids (refer to Hour 7, “Designing Pages with the Layout Grid”) to add structure and design to your Web pages. We’ve saved the coolest alternative for last. This technology is called layers—technically, DIV tags (DIV is the tag that Web browsers understand)—and GoLive calls them floating boxes. They allow unprecedented control and design possibilities. After you have spent some time designing Web pages with tables and layout grids, you will probably become frustrated by some of the inherent limitations of these technologies. Two of the greatest frustrations will be the lack of exact control over where objects are placed on your Web page and the inability to stack objects on top of each other. The good news is that both of these limitations can be overcome with the use of floating boxes. When you use floating boxes on your Web page, you gain the ability to place things exactly where you want them. That means you can place a photograph at specific pixel coordinates such as 80 pixels down from the top and 20 pixels right of the left edge of your Web page. Floating boxes also enable you to stack or layer objects on top of each other on your Web page. If you’ve already tried to do this with tables, you’ve seen that it’s impossible with that technology. However, floating boxes enable you to place different items, such as graphics and text, on top of each other. You can even stack several floating boxes on top of each other for a layered effect and really creative page designs. In Hour 14, “Creating DHTML Animations,” you’ll take this technology one step further by learning how to animate these floating boxes. However, there are several trade-offs to consider when using floating boxes. The main concern is that floating boxes do not render correctly in older Web browsers such as Microsoft Internet Explorer 3.0 and Netscape Navigator 3.0.
The minimum requirement to render floating boxes correctly is a version 4.0 browser.
Designing Pages with Floating Boxes
Unfortunately, getting floating boxes to work consistently in different browsers, even if they are the newest versions, is not always easy. However, it would be far outside the scope of this book to document all the inconsistencies between how different Web browsers render floating boxes. Instead, we recommend that you install different Web browsers on your computer and test your pages yourself. We’ve told you how cool floating boxes are, but you must use them judiciously. So, how are you supposed to know if enough of your Web site visitors are using version 4.0 or newer browsers to justify using floating boxes? We recommend that you contact your Web hosting provider and ask whether it can provide server statistics. These statistics will present a summary of the Web browser versions that your visitors use and can help you make the decision whether to use floating boxes. Figure 8.1 shows recent browser statistics for visitors to www.graphicsinstitute.com. FIGURE 8.1 These statistics reveal that only about 5% of visitors to www. graphicsinstitute.com
use Web browsers older than version 4.0. Statistics for your Web site might vary.
Five percent is a large amount of users to lock out of your site by using advanced features. Consider using the Browser Switch action described in Hour 18, “Formatting Text with Cascading Style Sheets,” to send viewers with older browsers to a less dynamic version of your site.
Adding and Adjusting Floating Boxes Now you understand some of the benefits and cautions of using floating boxes to design your Web pages. Perhaps you have decided to start using floating boxes on your Web sites right now or maybe you feel it’s best that you wait until more of your visitors use version 4.0 and newer browsers. Either way, floating boxes are such an important technology (and way too fun) that we’ll spend the rest of this hour learning about them.
177
8
178
Hour 8
Adding Floating Boxes to Your Web Page The good news is that GoLive makes working with floating boxes incredibly easy. To add floating boxes to your Web page, drag the Floating Box icon from the Basic section of the Objects palette to the top of your Web page in Layout mode (see Figure 8.2). FIGURE 8.2 Drag a Floating Box icon from the Objects palette to your Web page in Layout mode to create a floating box.
When you let go of your mouse, you will notice that GoLive actually adds two objects to your Web page. The most obvious object is a large empty box that is 100×100 pixels in size. You should also notice that a small yellow square is added to your page. Because your floating box can be located anywhere on your Web page, this small yellow square serves as a placeholder for the HTML source code required to draw the floating box. You can see these two objects in Figure 8.3. FIGURE 8.3 GoLive uses a small yellow square marked with the letters SB as a placeholder for the corresponding floating box.
After placing a floating box on your Web page, you’ll want to change its attributes (such as position, size, depth, and visibility) in the Inspector. See the next section for details.
,
, TO DO
To Do: Adjusting Your Floating Boxes To change the attributes of a floating box on your Web page, follow these steps: 1. Select a floating box by single-clicking anywhere on the perimeter of the floating box with the sideways hand cursor as shown in Figure 8.4. 2. Each floating box should have a unique name so that it is easier to manage when you have several on one page. To change the name of a floating box, enter a short and descriptive name in the Name field of the Floating Box Inspector as shown in Figure 8.5.
179
,
Designing Pages with Floating Boxes
FIGURE 8.4 Your cursor will become a sideways hand near the perimeter of a floating box so that you can select the floating box instead of its contents. FIGURE 8.5 Give each floating box on a page a unique name in the Floating Box Inspector.
3. Change the position of a floating box by clicking its perimeter and dragging it anywhere on the page. 4. To gain even greater control over exactly where the floating box is positioned, you can edit the values in the Left and Top fields of the Floating Box Inspector as shown in Figure 8.6. The values in the Left and Top fields of the Floating Box Inspector indicate the distance, in pixels, between the upper-left corner of your Web page and the top-left corner of your floating box.
,
FIGURE 8.6 Adjust the position of a floating box with pixellevel precision using the Floating Box Inspector.
8
Hour 8
,
180
5. You can easily resize a floating box by selecting it and clicking one of the blue resize handles. Your cursor will change to a double-headed black arrow and you can dynamically resize the floating box.
If you select the blue resize handle at the corner of a floating box and hold the Shift key at the same time, GoLive constrains the proportions of the floating box as you resize it.
6. For pixel-level control over the size of a floating box, edit the width and height as pixel values in the Floating Box Inspector.
Gain more resize control by clicking on a floating box corner point and holding down the Shift+Opt (Mac) or Shift+Control+Alt (Windows) and using the arrow keys.
7. GoLive offers you two additional ways to size the width and height of a floating box. When Auto is chosen, the floating box will be just wide or just high enough to fit its contents such as text or graphics. The second alternative is a percent value that allows the floating box to be displayed as a relative percentage of the width or height of the open browser window. This means that if a floating box is assigned a width of 25% and the browser window is open to 600 pixels wide, the floating box will render as 150 pixels wide. Figure 8.7 shows an example of the possibilities.
,
FIGURE 8.7 This example shows the Inspector settings for a floating box with a fixed width of 175 pixels and a height value of Auto.
181
,
Designing Pages with Floating Boxes
You can use floating boxes for pixel-level control of your content, but a floating box can never be smaller than its contents. In other words, you cannot use floating boxes to crop images as you can in a page-layout program such as Adobe InDesign.
8. To change the background color of a floating box, click the check box next to the Color field in the Floating Box Inspector and drag a color chip from the Color palette to the color cell next to the Color field, as shown in Figure 8.8. FIGURE 8.8 Change the color of a floating box by editing the Color field of the Floating Box Inspector.
When coloring an element in GoLive, you can rotate through color choices faster by clicking on the Color field in any inspector. A black border appears around the Color field and the Color palette is brought forward. As long as the black border is visible, you can keep selecting new colors and they will update immediately.
,
9. To change the background of a floating box, select the check box next to the BgImage field of the Floating Box Inspector. Now click the Browse button in the Inspector and choose the Web graphic you want to use as your background image. You can also use the Point and Shoot tool from the Inspector to use a graphic from the Files tab of the Site window.
8
182
Hour 8
If you add a background color or image to a floating box and preview that Web page in a Netscape browser prior to version 6, you are likely to see that Netscape does not show the color or show the tiled background image. This is because of a bug in older Netscape Web browsers. An alternative solution is to fill the floating box with a table that has the same background color, or create a one pixel colored gif and select it as the background image.
Stacking Floating Boxes on Top of Each Other A great feature of floating boxes is that they can stack on top of each other. To edit the depth of a floating box, simply select it and enter an integer in the Depth field of the Floating Box Inspector. For programmers this is referred to as the Z-index. Floating boxes with higher numbers appear higher in the stacking order. For example, a floating box with a Depth value of 5 would display on top of another floating box with a Depth value of 0. Understand that if you place certain objects in a floating box, such as flash (.swf) or QuickTime movies, they are embedded tightly into the page and they cannot overlap or be overlapped.
, TO DO
To Do: Stacking Floating Boxes In this lesson we will practice stacking one floating box on top of another. Our example will place text on top of an image. 1. Create a new document. 2. Drag a floating box onto your page. Using the Inspector, name the floating box headline. 3. We will cover adding text and graphics with more detail in the next lesson, but we will touch on a little bit of both for this lesson. Click in the floating box to get the cursor, and then type the words DoggieWorld.com, the place for happy pups. Or, type any other ridiculous headline.
,
4. Drag another floating box onto your page and name it image. Set the width to auto and the height to 200 pixels. 5. Drag an image object from the basic section of the Object palette into the floating box. The image that is used in this example, floating_dog.jpg, is available at www.GoLivein24.com. Select the image and choose Align Center from the Toolbar. See Figure 8.9.
183
,
Designing Pages with Floating Boxes
8
FIGURE 8.9 When an image is selected in a floating box and Center Align is applied, the image will center inside the boundaries.
6. Have the floating box named image selected, and type a 0 value into the Depth text box in the Inspector. It can’t be stacked correctly if you don’t put a number in. The lower the number in the Depth field, the closer the layer is to the page. 7. Select the floating box named headline. Change its depth to 5.
When stacking floating boxes always use depth numbers in jumps of 5 (0, 5, 10, 15, and so on). Otherwise you might create hours of work when you insert a new box between existing ones. You can also use negative numbers to put floating boxes under Z-index zero.
,
8. Reposition the floating boxes so that the floating box containing text is on top of the image.
It is very easy to grab the text or image when repositioning a floating box. If you do this and the image or text gets pulled out, simply drag it back in. Look for the sideways mitt before dragging the floating box.
Adding Text and Graphics to a Floating Box Now that you have learned how to create floating boxes and adjust their basic attributes, you will add content to the floating boxes and see how to use them for creative and flexible designs not possible with HTML tables. Think of a floating box as nothing but an HTML unit that you can create anything in. In other words, a floating box could have a table, image, text, and a movie all in the same box. You design within a floating box the same way that you would design an individual
184
Hour 8
HTML page. The benefit is that you can break your layout into many smaller units and in Hour 14, “Creating DHTML Animations,” we will even animate these boxes! If you are comfortable with the material from Hour 4, “Formatting and Stylizing Text” and Hour 5, “Using Graphics on a Web Page,” you have all the skills you need to add text and graphics to floating boxes.
, TO DO
To Do: Using a Floating Box to Format In this lesson we will place a table, an image, and text into a floating box. 1. Create a new document. 2. Drag a floating box onto the page. 3. Drag a table object into the floating box. 4. Make the table 1 row, 2 columns, 300 pixels wide, 200 pixels high. Then lock in the cells to be 50%. If you need help with tables refer back to Hour 6, “Designing Pages with Tables.”
You might notice that it gets difficult to differentiate whether you have the floating box or the table selected when their edges are so close. If it helps, resize the floating box to give yourself some more workspace, or use the markup tree in the lower left of the page. Click on the table tag to select the table or the div tag to select the floating box.
5. Place an image in the left cell. The image that we are using is called exchange.jpg and is available at www.golivein24.com. 6. Click in the right cell and add the text, Sign Student Program. See Figure 8.10.
up for the 2002 Exchange
,
7. Play around with repositioning the entire floating box to other locations on the page.
FIGURE 8.10 Add text, graphics, and other objects to a floating box just as you would on an HTML page.
Designing Pages with Floating Boxes
Managing Floating Boxes with the Floating Boxes Palette The features of the Floating Boxes palette (see Figure 8.11) make designing Web pages with floating boxes much easier by allowing you to show, hide, lock, and unlock floating boxes temporarily. If the Floating Boxes palette is not already visible, you can choose it from the Window menu. FIGURE 8.11 This is what the Floating Boxes palette might look like for a page with three floating boxes.
Locking and Unlocking Floating Boxes If you are designing a page that uses multiple floating boxes, it can quickly become difficult to manage all the floating boxes gracefully. In many cases, you’ll find yourself accidentally selecting and moving floating boxes that are in your way. To avoid this annoying problem, use the Floating Boxes palette to temporarily lock and unlock specific layers. To lock a floating box, click the Pencil icon in the middle column of the Floating Box Inspector. The pencil will become dimmed (as in Figure 8.12), which indicates the floating box cannot be selected or moved in Layout mode. When you are ready to select, move, or edit your locked floating box, just click the Pencil icon again to unlock it. FIGURE 8.12 The floating box containing the headline text is now locked, which allows easier editing of adjacent floating boxes.
185
8
186
Hour 8
Hiding and Showing Floating Boxes Sometimes your page will become so complex that you’ll want to temporarily hide certain floating boxes instead of—or in addition to—locking them. This can minimize clutter on your Web page to enable you to do some fine-tuning on other floating boxes. To hide specific floating boxes temporarily, click the Eye icon in the left column of the Floating Box Inspector and the eye will disappear as shown in Figure 8.13. This indicates that floating box is now temporarily hidden, which enables you to edit other areas of your Web. When you are ready to turn the floating box back on, just click the Eye icon again and your floating box will reappear! FIGURE 8.13 The floating box named “headline” is now hidden, which allows easier editing of other adjacent floating boxes.
You might have noticed a check box for visibility in the Floating Box Inspector. This is different from what was reviewed in the Floating Box palette. The visibility check box in the Inspector is used to make the contents of the box visible or invisible on the actual Web page. We will be using this check box later in Hour 13, “JavaScript Actions.”
Converting Floating Boxes to a Layout Grid When you’re done designing a Web page with floating boxes, you might consider converting your floating boxes to a layout grid so that you can provide a version of the page that is compatible with older Web browser versions. When you convert floating boxes to a layout grid, you lose the ability to stack and animate the objects in a Web page, but the flattened page will not cause problems in version 3.0 browsers. Before you convert your floating boxes to a layout grid, you first need to check your floating box grid settings. To change these settings, choose the fly-out menu from the Floating Boxes palette and choose the Floating Box Grid Settings, as shown in Figure 8.14.
Designing Pages with Floating Boxes
FIGURE 8.14 Edit the floating box grid settings to change how floating boxes behave.
The floating box grid settings include several options you can change: • Horizontal Spacing and Vertical Spacing are the number of pixels between the horizontal and vertical lines in the floating box grid. These options help you place and align floating boxes. • Snap forces floating boxes to snap to the floating box grid. • Visible While Dragging makes the floating box grid visible when you drag a floating box in Layout mode. • Prevent Overlapping forces floating boxes not to overlap each other. This is especially important if you intend to convert your floating boxes to standard HTML with the Convert to Layout Grid command. When you are done designing a Web page with floating boxes and none of the floating boxes are positioned off the page or overlap each other, use the Convert To Layout Grid command in the fly-out menu of the Floating Boxes palette as shown in Figure 8.14. The Convert To Layout Grid command creates a new page based on the current page, but uses standard HTML instead of floating boxes. This means the page will be more accessible to visitors with older browsers. Save the new “flattened” page and link to it as appropriate.
Summary In this hour you learned how floating boxes work, when to use them, and how to design Web pages with them. You should also be familiar with tables and layout from the last two hours. These different technologies complete your arsenal of Web page design options. In the next hour, you will learn how to combine multiple Web pages into a Web site and manage all those pages and assets. GoLive is a real power tool when it comes to managing Web sites, so don’t delay in reading on!
187
8
188
Hour 8
Q&A Q I want to design my Web pages with floating boxes, but my Web server statistics show me that many of my visitors are still using version 3.0 Web browsers. What should I do? A The last thing you want to do is chase away visitors, so we recommend two possible solutions. The first solution is to include a note on your home page that encourages your visitors to upgrade their browsers and includes hyperlinks to http://www.netscape.com and http://www.microsoft.com. The second idea is to convert your floating boxes to layout grids by using GoLive’s Floating Boxes palette. This will give you two versions of the same Web site, but also require more maintenance. Q I moved the yellow square placeholder, but the floating box did not move. What’s wrong? A The yellow square indicates the insertion point of your floating box code, but your floating box can be positioned anywhere on your page. If you want to move a floating box, grab its perimeter or edit the Left and Top values in the Floating Box Inspector. Q Why do my floating boxes look so different in the Microsoft and Netscape Web browsers? A Although a version 4.0 or newer Web browser is the minimum requirement for floating boxes to work properly, there are still astonishing differences in how the two main browsers render floating boxes. One of the most commonly seen differences is that Netscape browsers prior to 6 had a difficult time properly displaying a background color or background image attributed to a floating box.
Quiz 1. What is the minimum version of Microsoft Explorer and Netscape Navigator required to view floating boxes? a. Any version will do b. 4.0 c. 6.0 2. Can floating boxes overlap? a. Only in version 5.0 browsers b. Yes c. No
Designing Pages with Floating Boxes
3. What floating box attribute do you edit to change the stacking order of multiple floating boxes? a. Depth b. Order c. Sequence 4. How should you determine whether visitors to your Web site use 4.0 or newer browsers and can correctly view pages that use floating boxes? a. Just guess b. Ask some friends c. Statistics for your Web server
Quiz Answers 1. b. 4.0 is the minimum version of Microsoft Explorer and Netscape Navigator required to view floating boxes. 2. b. Yes, floating boxes can overlap. Their capability to overlap is part of what makes them more flexible than tables and layout grids. 3. a. Edit the Depth value to change the stacking order (Z-index) of multiple floating boxes. 4. c. Examine statistics for your Web site that reveal what browser versions your visitors use.
Exercises To extend your knowledge of floating boxes, try these exercises: 1. Create a Web page that places text and graphics in overlapping floating boxes, and then rearrange their stacking order by editing their depth values. 2. Place an animated GIF in a floating box and stack it above another floating box that contains a still image. This creates a unique multimedia effect not easily achieved with a table or layout grid. To learn about animation and other dynamic effects possible with floating boxes, make sure to study Hour 14.
189
8
PART III Building a Web Site Hour 9 Using GoLive’s Site Management Tools 10 Using Components, Stationeries, Library Snippets, and Page Templates 11 Designing Pages with Frames
HOUR
9
Using GoLive’s Site Management Tools One of the best reasons for using an HTML-editing and site-management application such as GoLive is the capability to change filenames, hyperlinks, fonts, and color usage without causing inconsistencies and broken links throughout the site. Anyone who has hand-coded HTML can appreciate the time that it takes to rewrite code when a referenced image or URL name has changed. In this hour, we will learn how to use the Site window to keep track of files, external URLs, colors, and font sets. Before working in this hour’s lesson, you should be familiar with the basic steps required to create a site. They are covered in Hour 2, “Creating a Site File.” In this hour, you will • Manage files in GoLive’s Site window • Use e-mail addresses in your Web site
194
Hour 9
• Manage and check external links in your Web site • Organize and keep track of colors in your site • Keep track of font sets in your site
Managing Files in GoLive’s Site Window The Files tab of the Site window appears as a default when a new site is created. In this tab, you will see all the files in your site. The Files tab is essentially a directory system similar to the Macintosh Finder or Windows Explorer. The difference is that if you change names and move files in the Files tab, GoLive will edit the code of Web pages referencing those files. If this were done in the Finder (Macintosh) or Explorer (Windows), the results could be catastrophic. Relocating and linking files without a site management tool can be tedious and time consuming.
Managing Site Files In this section, you learn how to use the Files tab of the Site window to help organize files. But before you can investigate a site, you must have a site open. Follow the steps to create a site that you can use for lessons throughout this hour.
, TO DO
To Do: Creating a Site for This Hour’s Exercises In this lesson, we create a site for exercise purposes. The index page doesn’t have to win awards, but it must reference images and external links. 1. Choose New Site, Blank from the File menu. 2. Name the site hour9 and browse to an appropriate location on your computer. 3. Choose File, Import Files and locate at least two images. You can choose your own or go to www.golivein24.com to download sample images. When an image is selected, choose Add. When all your files are in the lower window, choose Done as shown in Figure 9.1. They will be added to the Files tab. 4. Double-click the index.html file in the Files tab of the Site window to open the index page. Place the two images on the page.
,
5. Type the text Read More Good Books and link the text to an external URL by typing http://www.samspublishing.com/ into the URL text box of the Text Inspector. 6. Use a font set to define the typeface of the text (covered in Hour 3, “Creating a Web Page”).
195
,
Using GoLive’s Site Management Tools
FIGURE 9.1 When Add Files is used, the files are copied, not moved, from their original location into your Site folder.
7. Use at least two colors on this page. You can color the text differently than the background of the page.
,
8. Save the file and close it, leaving the Site window open. The finished page can look any way that you want as long as it has the elements we discussed included. A sample using a table is shown in Figure 9.2.
FIGURE 9.2 Our practice file should include images, external URLs, font sets, and colors.
9
196
Hour 9
TO DO
To Do: Managing Files by Using the Files Tab Now that we have an open site, we can investigate the Files tab of the Site window. 1. Click an image file in the Files tab and note the File Inspector shown in Figure 9.3. There are two important file management features that we will investigate: how to keep track of filenames and file content.
FIGURE 9.3 The File Inspector helps us update names and view content.
2. Change the name of one of your images. Note that changing the name on the File Inspector will automatically change any references. In other words, if you change the name of an image, GoLive will notify you, as shown in Figure 9.4, that the image is referenced in an already created file. It will ask you to verify that you would like to update the HTML. FIGURE 9.4 When a filename has been changed, GoLive will edit the source code of all files referencing it.
,
3. With the renamed image selected, choose the Content tab of the File Inspector. An image preview will appear.
Using GoLive’s Site Management Tools
197
The Content tab can really come in handy if you’re not quite sure that you remember exactly what you named your image files. Select an image in the File tab and choose the Content tab. Voilà! An image preview.
File Organization Many of us think about organizing our sites after we have already started saving files. You might find your site becoming unwieldy and decide later that separate folders would be a better way to keep track of files. But if you start moving files around on your hard drive, any references to those files in previously created HTML files will be broken. The Site Toolbar comes to our rescue with lots of tools, as shown in Figure 9.5, including the New Folder button. If we create a new folder in GoLive, the files that we drag into it will automatically have their paths updated wherever used, helping us to avoid missing files when the site is posted. Show Info Open
FIGURE 9.5 When the Site window is active the Site File management tools become available.
Refresh View
Delete Find Files
Open In Out Links Palette
Change All References
, TO DO
To Do: Creating a New Folder By using the Site tools to add directories and relocate images we can be assured that our links will not be broken. In this lesson, we cover how to correctly add folders to our Site window. 1. Open a GoLive Site window. 2. Click the New Folder button in the Site Toolbar as shown in Figure 9.6.
,
FIGURE 9.6 Create new folders in the GoLive Site to organize files.
9
Hour 9
,
198
3. Rename the folder images.
,
4. Drag an image into the folder. A dialog box will open, verifying that the HTML of pages referencing the image will be updated.
Adding Files to a Site File Perhaps you have been working on a site and saving files from your image-editing application into your Site folder. When you return to GoLive, the files aren’t listed in the Files tab. Not a problem—GoLive simply needs to rescan the Site folder. By choosing the Refresh View on the Site Toolbar (it has a double wavy arrow icon) shown in Figure 9.7, GoLive will rescan the directory and make available any newly added files. Alternatively, you can choose Refresh View from the Site menu. FIGURE 9.7 If you have files in the Site window that are not being recognized, use the Refresh View button from the Site Toolbar or Choose Rescan from the Site menu.
External Tab: Using E-mail Addresses in Your Web Site Links to e-mail addresses are as simple as typing the address. You can choose to do this to receive viewers’ comments or for nonsecure transactions. A link to an e-mail address does not automatically send a message, but will open a new message window from the viewer’s e-mail program with the To: line already filled with the e-mail specified as a link. We cover the steps to creating a link to an e-mail address in the following lesson.
Linking an Image or Text to an E-mail Address Linking to an e-mail address involves using the mailto: attribute in the href tag. First, choose an image or text and create a link. Then, type an e-mail address into the URL text box of the Link tab. GoLive automatically adds mailto:. If you prefer not to have GoLive automatically add this, locate the URL preferences (under General) and uncheck the mailto: check box.
Using GoLive’s Site Management Tools
199
Managing E-mail Addresses If you have pages on your site reference e-mail addresses, GoLive will list them in the External tab of the Site window as shown in Figure 9.8. FIGURE 9.8 Links to e-mail addresses and other external URLs are listed in the External tab of the Site window.
9
If you recently added e-mail links in your page, choose Get References Used from the Site pull-down menu. This will add them to your External tab.
If you change an e-mail address here, it will change all references to it in the site. Suppose that viewer comments need to be sent to a new address. Using the site management tools, we can change all references from one e-mail address to another.
, TO DO
To Do: Changing an E-mail Address In this lesson we take advantage of the site tools available when working in the External tab of the Site window. 1. Have a GoLive site open that has a link to an e-mail address. If you can’t think of one, type [email protected]. 2. Choose the External tab of the Site window and select an e-mail address. 3. Change the e-mail address in the Reference Inspector or in the External tab. If you need an example, change it to [email protected].
,
4. GoLive will alert you to all e-mail references in the site and ask you to verify the change. You can choose to cancel or confirm the change.
Adding Addresses Directly to the External Tab Add addresses ahead of time to make referencing them easy by selecting the Site button of the Objects palette and dragging the Address object to the External tab, shown in Figure 9.9.
200
Hour 9
FIGURE 9.9 Add new addresses to your External tab by using the Address object on the Site tab.
After an address is placed in the External tab, you can use the Inspector to change the name and the URL.
Managing and Checking External Links in Your Web Site Just as e-mail addresses are listed on the External tab of the Site window, so are referenced external links. An external link is one that goes to a page outside your file system, one in which the address begins with http://, ftp://, and so on. Just as with the e-mail links we discussed earlier, you can use the External tab to update and redirect external links.
, TO DO
To Do: Redirecting an External Link In this lesson we take an existing link to a URL and redirect it to a new URL. 1. Have a GoLive site open that has a link to an external URL. The site we created in the first task will work. 2. Choose the External tab of the Site window and select a URL. This will activate the Reference Inspector. If you don’t see the URL that we created, select Get References Used from under the Site pull-down menu. 3. Change the URL in the Reference Inspector as shown in Figure 9.10.
,
FIGURE 9.10 Redirect an external URL by typing a new location in the Reference Inspector.
,
Using GoLive’s Site Management Tools
4. GoLive will alert you to all URL references in the site and ask you to verify the change.
,
5. You can choose to cancel or confirm the change.
201
Typing e-mail addresses and external URLs can be time consuming and not always accurate. Use the Point and Shoot tool in the Image and Text Inspector, as shown in Figure 9.11, to link to a specified address in the External tab of the Site window. FIGURE 9.11 Save time by using the Point and Shoot tool to link to external references.
Eliminating Unreferenced E-mail Addresses and External URLs If you have collected URLs and e-mail addresses in the External tab and find that you didn’t use them all, eliminate the unused ones by following these steps. Add an unreferenced URL into a page by Control+clicking (Mac) or right-clicking (Windows) in the External tab of the Site window and choosing New URL, as shown in Figure 9.12. Make sure that the External tab is active. Select Removed Unused References from the Site menu. FIGURE 9.12 Add URLs directly to the External tab for future reference.
9
202
Hour 9
You can easily import your Favorites or Bookmarks to have URLs loaded and ready to use in GoLive. To import a URL or address file from a Web browser to the site: 1. First, choose File, Import, Favorites as Site Externals. 2. Locate either your Internet Explorer Favorites or Netscape Bookmarks or the address book you want to import. On the Windows side, the Favorites are in the User Profile folder.
Checking External Links Verifying by hand that a few external URLs exist is relatively easy. Start compounding the number of URLs as your site grows, and they can become unmanageable. Using GoLive’s site capabilities, we can make sure that all links are accurate. To verify external links, make sure that you are connected to the Internet and that a site with external links is open. With the External tab active, choose Site, Check External Links. The Status column of the External tab shows a Broken-Link icon for any invalid external links (see Figure 9.13). Link is not verified and is not working
FIGURE 9.13 GoLive will verify that links are active by checking external links.
Link is verified and is working
Using the Site Tab Use the Site section of the Objects window to speed up many tasks. Many of the icons that you see in Figure 9.14 can be dragged and dropped to the Site window.
Changing References Change All References is an excellent tool that is discussed in more detail in Hour 22, “Cleaning Up Your Web Site.” But, its usefulness has to be mentioned as it applies to this hour’s lesson.
Using GoLive’s Site Management Tools
FIGURE 9.14 Use the Site section of the Objects palette to create new external links, colors, folders, and other items directly in your Site window.
203
Font Set Generic URL Group Page Address
URL
Address Group
Color
Folder
Font Set Group Color Group
The Change All References button enables the designer to choose virtually any item in the Site menu and replace it with something different.
, TO DO
To Do: Changing References from One URL to Another In this lesson, we learn how to change a URL listed in our Site window to a new URL address. 1. Select a URL from the External tab of the Site window. 2. Choose the Change All References button from the Site Toolbar as shown in Figure 9.15.
FIGURE 9.15 Quickly redirect from one external URL to another using the Change All References tool.
3. When the dialog box shown in Figure 9.16 appears, type a new URL or use the Point and Shoot tool to point to another listed URL.
,
FIGURE 9.16 Type a new URL or use the Point and Shoot tool to redirect a URL.
9
Hour 9
,
204
,
4. If the changed URL is used, an alert window appears. Verify the pages that you want to update with the new URL and click OK. After experiencing the capabilities available through the GoLive site-referencing tools, you will want to use the site tools to globally change any references that need to be updated.
Organize and Keep Track of Used Colors in Your Site Using our site tools we can predetermine a color scheme or verify used colors in a site already created. This is especially useful in terms of design consistency; for example, we can avoid using navy blue for our headline on one page and royal blue on another. In this section, we will cover finding used colors, adding new colors, and applying the colors when designing pages.
Finding Used Colors in a Site If you have been working on a site, you might find all but the recently applied colors listed in the Colors tab of the Site window. If this is the case, make sure that all new pages are saved and closed, and then choose Get Colors Used from the Site menu, as shown in Figure 9.17. All colors applied to the Web pages appear in the Colors tab. FIGURE 9.17 When in the Colors tab of the Site window you can update color usage by choosing Get Colors Used from the Site menu.
Using GoLive’s Site Management Tools
205
The available options in the Site menu vary depending upon which Site tab is activated. If Get Colors Used is grayed out, click the Colors tab.
Adding Colors to a Site GoLive enables you to choose a color scheme and load it into the Colors tab of the Site window, thereby giving you access to a select number of colors in either the Site window or in the Site Color List tab of the Colors palette, as shown in Figure 9.18. FIGURE 9.18 The Site Color List tab of the Color palette.
, TO DO
To Do: Adding Colors to the Site Window Follow this lesson to prepare a color scheme for your site by loading colors into the Colors tab of the Site window. 1. Open a GoLive site and select the Colors tab. 2. Open the Color palette and choose a color. 3. Drag the Color pane from the Color palette into the Colors tab of the Site window as shown in Figure 9.19. It appears in the tab named Untitled Color. FIGURE 9.19 Adding a color from the Color palette to the Colors tab of the Site window.
,
4. Rename the color in the Inspector or directly in the Colors tab.
9
206
Hour 9
Remove colors that are no longer referenced by activating the Colors tab in the Window and selecting Remove Unused Colors from the Site menu.
Applying Site Colors to Your GoLive Page When you have added and renamed your colors, they appear in alphabetical order in the Site Color List of the Color palette. The Site Color List is the last button in your Color palette. It is also accessible through the color pop-up menu as shown in Figure 9.20. FIGURE 9.20 Find the Site Color List in the pop-up menu in the Color palette.
It’s easier to use the Site Color List than to use the standard Web-safe color list. It is much easier to find Corporate Red from six swatches than from 216!
Keeping Track of Used Font Sets in Your Site Assigning font sets instructs the browser to use custom fonts for building the page display. If the fonts in the font set are not installed, the browser uses its own font preferences. For this section, you should have a site that has font sets assigned to text. For more information about font sets, refer to Hour 3.
If you have recently applied a font set and it is not visible, make sure that the page is saved and closed. Also rescan the Site folder using the Site menu.
, TO DO
To Do: Managing Font Sets in the Site Window Follow the steps in this lesson to learn how to better manage your font sets. 1. Activate the Font Sets tab of the Site window. 2. Note any used font sets. If you haven’t already named them, they will appear as untitled font sets, as shown in Figure 9.21.
207
,
Using GoLive’s Site Management Tools
FIGURE 9.21 When font sets are applied from the Type menu, they will appear in the Fonts Sets tab as untitled.
9 3. Select a font set and rename it using the Inspector. You might consider giving it a more logical name such as Headline or Body. Notice in Figure 9.22 that under the Type, Font menu, not only is a font set identified by the first font in its list Arial Black, but also by the set name that you assigned in the Font Sets tab, headline_set. FIGURE 9.22 Naming font sets in the Site window enables you to create font categories for different text on your page.
,
You can edit the fonts on a list in the Site window, but this will not change all occurrences of that font set where already applied. The font set would have to be reapplied to make the changes effective. This type of control is available when using Cascading Style Sheets. Style sheets are covered in Hour 18, “Formatting Text with Cascading Style Sheets.”
4. Open a GoLive page and type on the page. Select the text and drag the font set from the Font Sets tab over the selected text, as shown in Figure 9.23. Save and close the page.
Hour 9
,
208
FIGURE 9.23 Font sets can be applied by dragging them right from the Font Sets tab and over selected text in a page.
5. Just as with the other Site tabs we covered in this section, you can use the Site menu item to discard any unused font sets, or get font sets that are not immediately recognized. Get Font Sets Used and Remove Unused Font Sets are both available as choices under the Site menu, as shown in Figure 9.24. FIGURE 9.24 Scan your site for used font sets that are not immediately recognized, or remove unused sets from the Site menu.
Select Window, In & Outs Links from the menu to check pages that are referencing files, external URLs, colors, and font sets.
,
Using GoLive’s Site Management Tools
209
Summary In this section we covered how to keep track of some very essential items in your Web site. By managing your external links, colors, and font sets, you can control building and maintaining a site and avoid errors and inconsistencies throughout the site. You should feel comfortable applying changes in the files or in the External, Colors, and Font Sets tabs. You can be confident that GoLive will update any necessary changes on your Web pages.
Q&A Q What if I linked pages to an e-mail address that no longer exists? A Using the External tab of the Site window, you can change the URL in the Inspector. GoLive will alert you of changes being made to correct the HTML links throughout your site. Q I just linked to a bunch of external URL links, and they are not appearing in the External tab. What can I do? A Sometimes simply saving and closing the file will list the URLs in the External tab. If not, click the Refresh View button in the Site Toolbar. Another option is to choose Get References Used from the Site menu. Q I was told that some of my links are not working. Do I have to check each URL? A No, simply choose Check External Links from the Site menu. Q Can I copy files, font sets, external links, and colors from one site to another? A Yes. With both sites open, you can copy font sets, external links, and colors from their respective tabs in the Site window and paste them into the respective tabs of other Site windows.
Quiz 1. Will a change to an item listed in the External tab change references throughout a site? a. Yes, but only if it is an e-mail address. b. No, references must be changed manually. c. Yes, all links listed on the External tab will be updated.
9
210
Hour 9
2. What is the most efficient method to delete unused URLs? a. Select each URL and look in the Link Inspector to see whether it is referenced. If not, click the Trashcan in the Toolbar. b. When in the External tab of the Site window choose Remove Unused References from the Site menu. c. Select the URL and look in the Inspector. All pages referencing the URL will be listed. 3. Why would the Site Colors List of the Colors palette be empty? a. You are not working in an active site. b. Colors need to be dragged from the Colors palette’s Color pane into the list. c. The colors you used are not Web safe. 4. What won’t a font set do? a. Update all uses if you make a change to the font list. b. Help you to organize fonts. c. Let you use it in several sites.
Quiz Answers 1. c. Yes, all pages containing links on the External tab will be updated. 2. b. Choose Remove Unused References from the Site menu. 3. a. You are not working in an active site. 4. a. Update all uses if you make a change to the font list.
Exercises Gain more confidence in using the site management tools by completing these exercises. 1. Create a blank site (refer to Hour 2). a. Before creating pages choose three colors from the Web Color List palette and drag the colors into the Colors tab of the Site window. b. Rename the colors to descriptive names, such as orange, blue, and so on. c. Open the index.html page and use the newly created site colors by selecting the Site Colors List tab of the Colors palette and dragging them to selected elements on your page.
Using GoLive’s Site Management Tools
211
2. Use a blank site and create a link to at least two e-mail addresses and one external URL. a. Save the file and close it. b. Choose Get References Used to show the links in the External tab of the Site window. c. Select one e-mail address and use the Change All References tool to change all references from one e-mail to another. 3. If you have existing sites, copy font sets from one site to another.
9
HOUR
10
Using Components, Stationeries, Library Snippets, and Page Templates Planning your Web site to be consistent not only makes your site easier to navigate but also makes it easier for you to update and revise as the site grows. GoLive offers many tools to help develop a foundation for complete pages (Stationery and Page Templates), as well as elements on the pages (Components and Snippets). Some of these features are meant to aid you in site creation, whereas others are dynamic and offer the opportunity to change the elements or page throughout a site with one edit.
214
Hour 10
You will soon discover that this hour is well worth the reading when you learn how to take advantage of time-saving features that are available for GoLive sites. In this hour, you’ll learn about the following: • The differences between Stationeries, Components, Libraries, and Page Templates • Creating and applying Stationeries • Creating and applying Components as dynamic page elements • Storing and reusing Snippets in the Site Library • Using the Library button on the Objects palette • Using Page Templates
To use the Component, Stationery, and Site Library features, a site must be open. If you have questions about how to build a site, please refer to Hour 2, “Creating a Site File.” Practice sites to use for this hour are also available at http://www.golivein24.com/.
Comparing Stationeries, Components, Libraries, and Page Templates Before we start discussing Components, Stationeries, Libraries, and Page Templates in more detail, we will discuss the differences between them. A Component file is one that can be embedded in other pages. Components are actual pages that can contain text, images, rollovers, hyperlinks, and so on. Components are dynamic, meaning that any changes to the component page will update all uses in embedded pages. This makes components ideal for navigational tools and information tables that frequently need updating.
Components can be used for rate schedules, navigational tools, or any frequently updated items.
A Stationery file is used to create a page that can be used as a template for an entirely new page. This page could include source code, tables, images, and anything else that is to remain consistent on pages that are created from this template.
Using Components, Stationeries, Library Snippets, and Page Templates
215
Unlike a Component file, Stationery files are not dynamic, which means that any pages created from them are no longer linked to changes made to the original file. A change in a Stationery file does not update all the pages based on that file.
Improve the design and viewing experience by planning your site. Use layout grids and tables on a Stationery file to build a consistent feel to your Web pages and create the foundation for all future pages.
Site Library Snippets are frequently used elements that are site specific. These include text, objects, or even groups of objects (along with any corresponding source code). Think of elements placed in the Library as a resource of elements frequently used. Those elements might include logos, empty tables, or even commonly used source code. Unlike a component, these elements are not dynamic, and do not update if the original is edited.
Inputting e-mail and URL addresses is trying, even for the best typist. Keep contact information such as the Webmaster e-mail address as a Library Snippet to insert it easily on many pages.
A Page Template is an exciting new feature in GoLive 6. You can create a page with just certain regions of the page defined as editable using a Page Template. When opened as a page, all other areas are locked. Here is the best part: If a change is made to the original Page Template, all pages created from it are updated! If you are trying to keep your Web site consistent in format throughout and make life easier with edits you will want to take advantage of this feature right away!
Before We Start: Site Extras Because all the features discussed during this hour are site resources, we need to be familiar with the Site Extras window. The site extras are found in two places in GoLive and include Components, Diagrams, Libraries, SiteTrash, SmartObjects, Stationeries, and Templates. Site extras are site resources located in the .data folder of your GoLive site. This data file is not just a GoLive feature, but also an actual folder that exists in the site folder. It will contain the Stationery and Component files that we create in this hour.
10
216
Hour 10
There are two ways that we will access site extras: through the Site window and through the Objects palette.
, TO DO
To Do: Access the Site Extras Tab Through the Site Window To access the Site Extras tab of the Site window, follow these steps: 1. Have a site open. If you do not have a working site to use for practice, create a new blank site from the File menu or refer to http://www.golivein24.com/. 2. Choose the pop-up menu from the upper right of the Site window and choose Extras as shown in Figure 10.1.
FIGURE 10.1 The Site window does not show the resources until Extras is selected from the Site pop-up menu.
,
3. The Site window splits in half, with the right side showing the site extras (see Figure 10.2).
FIGURE 10.2 The site extras include resources such as Components, Diagrams (discussed in Hour 20), Libraries Site Trash, SmartObjects, Stationery, and Templates.
, TO DO
To Do: Access the Site Extras Through the Objects Palette In this lesson, we access the site extras through the Objects palette. This can be handy when you don’t want to have the Site window in front of your document. 1. Have a site open. If you do not have a working site to use for practice, create a new blank site from the File menu. Practice sites are also available at http://www.golivein24.com/.
,
Using Components, Stationeries, Library Snippets, and Page Templates
217
2. Choose the Site Extras button of the Objects palette. 3. The palette is empty at this point unless elements have been previously saved.
,
4. To access the site extras, choose the pop-up menu from the lower-right side of the palette, as shown in Figure 10.3.
FIGURE 10.3 The site extras we use in this hour can also be accessed through the Objects palette.
10
Creating and Applying Stationeries as Template Files Pages that are to be used as a foundation for future pages are referred to as Stationery files. Multiple files can be saved as stationeries. In this section, we create a file, save it as a stationery page, and use it to create new pages.
, TO DO
To Do: Create the Stationery File 1. Have a site open. If you do not have a practice site, create a new blank site from the File menu, or refer to http://www.golivein24.com/. 2. Select New from the File menu to create a new blank page. 3. Create a one-row, three-column table by dragging out the Table object from the Basic button of the Objects palette. Enter the following data into the cells: Sales; Service; Locations.
,
4. Choose File, Save from the menu. As shown in Figure 10.4, choose Stationery from the pop-up menu to save the file in the appropriate folder. You can name this file basic.html. 5. Leave this site open for the next exercise.
Hour 10
,
218
FIGURE 10.4 When working in GoLive, additional save options are available.
, , TO DO
To Do: Applying the Stationery File To create a new Stationery file you can simply choose New Special, Page from Stationery file from the File menu or these two other ways: • Creating a new page from the Site window • Creating a new page from the Objects palette Method 1: Creating a new page from the Stationery file using the Site window. 1. Have the same GoLive site open. Remember that stationeries are specific to the site to which they are saved. 2. Open the Site Extras window by choosing Extras from the Site window pop-up menu. 3. Open the Stationery folder. Double-click your saved file. A dialog box will appear as shown in Figure 10.5. Choose Create to create a new document from the Stationery file. FIGURE 10.5 Double-clicking the Stationery file offers the option of creating a new page or modifying the original.
,
4. A page containing your table will open. At this point, you could complete the document and save the page as you would any other page in your Web site. 5. Keep this site open for the next exercise.
,
Using Components, Stationeries, Library Snippets, and Page Templates
219
Method 2: Creating a new page from the Stationery file by using the Objects palette. 1. Have the same Site window open. Again, remember that stationeries are specific to the site to which they are saved. 2. Locate the Site Extras button in the Objects palette. 3. Choose Stationery from the pop-up menu in the lower right of the Extras palette (see Figure 10.6).
FIGURE 10.6 Stationery files can also be accessed through the Site Extras button of the Objects palette.
4. Locate the Stationery File icon and double-click it or drag it to the Files tab of the Site window. A new page named New from [yourfile].html appears as shown in Figure 10.7. An Under Construction icon will appear to the right of your new page until it has been opened and resaved. FIGURE 10.7 Drag the Stationery file from the Site Extras tab to the file menu in the Site window to create a new page.
,
5. Double-click to open the file and continue designing the page.
10
220
Hour 10
Many files can be saved to the Site Stationery folder. If you choose to use the Objects palette, note that the name of the file will appear as a tool hint in the lower-left corner of the Site Extras palette as you cross over the Stationery icon.
Creating and Applying Components as Dynamic Page Elements GoLive components enable you to reference a page’s elements dynamically in multiple pages. Essentially, a component is a page of elements that can be embedded into other pages. For example, consider how many pages in your site use the same navigation element. Now consider the amount of work involved to make changes to these elements. With the component feature, making a change involves changing only the component page containing the navigational elements; all others are dynamically linked and are updated as soon as the original component page is saved. Needless to say, this is an extremely helpful tool when working on elements that frequently need to be updated. In this section, we create a component, embed it in a page, and then edit the original. Because this is a dynamic element, all uses of the component will be updated when the original is resaved.
Only Netscape/Internet Explorer 4.0 or higher can correctly read a component. For most viewers this is not an issue, but keep it in mind if you believe that the majority of your viewers are not Web savvy.
We will now create a component and cover two methods of embedding it into another Web page. The first method uses the Site Extras button of the Objects palette and the second takes advantage of Smart Objects.
, TO DO
To Do: Creating the Component In this lesson, we build a component. A component can be truly appreciated only when you have the opportunity to take advantage of this feature. In this lesson, we place a table that includes schedule information. We then place the table on two other pages, and then update the original component page. For this lesson, use the sample provided at http://www/golivein24.com/ or create your own blank site.
,
Using Components, Stationeries, Library Snippets, and Page Templates
221
1. Components are a site resource, so make sure that you have a GoLive site open. If you need help creating a GoLive site, refer to Hour 2. 2. Create a new document, drag the Table object on to the page, and enter the data provided in Table 10.1 into the table’s cells.
TABLE 10.1
Enter This Data into Your Table Object
May
June
July
9-4
9-5
closed
M-Th
M-F
closed
Some real-life examples are navigation bars, tables with schedules, and an image that must be changed frequently—the “special of the day,” for instance. 3. Click the Page icon in the upper left of the page, next to the page title. This opens the Page Inspector as shown in Figure 10.8. If you do not see the Inspector, make sure that you have it set to be visible. Choose the HTML tab of the Page Inspector and click the Component button. This ensures that the page code is set up correctly as a dynamic element. FIGURE 10.8 Select to change the settings for a component in the HTML tab of the Page Inspector.
4. Choose File, Save from the menu. As shown in Figure 10.9, choose Components from the pop-up menu and save the file as schedule.html in the Root folder of your site.
,
5. Keep this site open for the next lesson.
10
222
Hour 10
FIGURE 10.9 When working in a site, you can choose to save a page as a component and embed it into other pages.
Note that tag information in the head and body tags (for example, background color) is not embedded in pages. If you would like a background color in a component, apply it to a layout grid or table as described in Hour 6, “Designing Pages with Tables.”
, TO DO
To Do: Embed a Component in a Page Now that the component has been saved, we will embed the component into pages using two different methods. Method 1: Embedding the component in a Web page. 1. Make sure that the GoLive site is still open. 2. Select New from the File menu to create the blank page into which we will embed the component. 3. Locate the Site Extras button of the Objects palette as shown in Figure 10.10. Choose Components from the pop-up menu in the lower right. An icon representing your component appears.
,
ToolTips in the lower-left corner of the Objects palette inform you of the saved name of the component.
4. Click and drag the Component icon from the Site Extras section to the location on the page you would like the embedded object to appear.
223
,
Using Components, Stationeries, Library Snippets, and Page Templates
FIGURE 10.10 Components can be selected and dragged to a Web page from the Site Extras button of the Objects palette.
The table has now been embedded as a component in the page. Save this page as schedule1.html.
If a component is placed into a Web page, it will span the width of the page. If you want to control the width and placement of a component, drag it into a layout grid or table.
Method 2: Embedding the component into a Web page by using Smart Objects. 1. Make sure that the GoLive site is still open. 2. Choose New from the File menu. 3. Locate the Smart Objects button of the Objects palette. Select and drag the Component Smart Object to the Web page (see Figure 10.11). FIGURE 10.11 Use the Component icon on the Smart Objects section to embed a dynamic element.
4. Either browse or use the Point and Shoot tool to link the Smart Object icon to the component.
TO DO
,
5. Save this page as schedule2.html.
To Do: Modify the Component In this lesson, we will modify a component to show how it dynamically changes all pages linked to it.
,
1. Have a page with an embedded component open. 2. Double-click the embedded component. This will open the original component file.
10
Hour 10
,
224
3. Change the table data to state that the hours are 9–5 in July instead of closed. Save the file.
,
4. A dialog box will appear, as shown in Figure 10.12, giving you the opportunity to choose whether to apply the new changes to the pages that use the component. If left checked all of the listed pages will be updated.
FIGURE 10.12 When a component is updated, it will verify whether you would like to update all pages into which it has been embedded.
Storing and Reusing Site Library Snippets As we discussed earlier, Site Library Snippets give you the ability to build a resource of text, code, or objects that you will frequently use. Because Snippets are part of the site resources, you can save elements that are specific to the site without combining them with Library Snippets from other sites.
, TO DO
To Do: Create a Site Library Snippet There are two ways that you can create a Site Library Snippet: by using the Objects palette or by using the Custom tab of the Site window. Method 1: Creating a Site Library Snippet by using the Objects palette. 1. Create an element that you want to reuse. This could be an image, a group of elements, or text.
,
2. Make sure that the Site Extras section of the Objects palette is visible. Choose Library from the lower-right pop-up menu as shown in Figure 10.13. This opens the window that we will drag Library Snippets in and out of. 3. Select the desired item and drag it to the Site Extras palette. You will know that it has reached the palette when a black border appears around the Site Extras button.
225
,
Using Components, Stationeries, Library Snippets, and Page Templates
FIGURE 10.13 Library Snippets including text and other elements can be saved for use within the Site Extras button of the Objects palette.
Text Snippet
Image Snippet
4. Double-click the icon of the snippet to give it an appropriate name. The name will appear as a ToolTip in the lower-left corner of the Site Extras palette when you cross over the image.
If you want to create a Library Snippet from a group of items, hold the Shift key while selecting the elements. If you are copying text and other elements, such as tables or images, it is best to place your cursor outside of them and drag as though you are selecting text, right over all those elements.
Method 2: Creating a Site Library Snippet by using the Library tab on the Site window. 1. Create an element that you want to reuse. 2. Have the Library tab of the Site window visible. 3. Select the desired item and drag it to the Library tab. A generically titled snippet appears as shown in Figure 10.14. FIGURE 10.14 Frequently used elements can be dragged to the Custom tab of the Site window.
,
4. Use the Inspector to change the name of the snippet.
10
226
Hour 10
The Library snippet that you created automatically adds an .html extension. Don’t let that fool you; it is not a valid HTML page. It has no head or body, as shown in Figure 10.15. It is essentially a snippet of HTML code. You can open that snippet to change it in the layout mode or other modes by double-clicking it. FIGURE 10.15 A Site Library snippet is a stored piece of HTML code specific to the open site. Make changes to a snippet by opening it and saving the file.
Using the Library Button on the Objects Palette Different from a Library Snippet, GoLive also features a Library button on the Objects palette. This button enables you to drag items to the palette that are not specific to a site, and does not require a Site window to be open. This is good for items that are needed in multiple sites, perhaps frequently used tables of generic logos.
, TO DO
To Do: Saving Elements to the Library Button To use the Library button in the Objects palette, follow these steps: 1. Select an element or a group of elements from your Web page that you want to reuse. 2. Click and drag the element(s) over to the Library section of the Objects palette, as shown in Figure 10.16. Let go of the mouse when a black border appears inside the border of the palette.
,
3. Double-click the custom object to name it.
Using Components, Stationeries, Library Snippets, and Page Templates
227
FIGURE 10.16 Save elements that are not site specific for reuse in the Library section of the Objects palette.
Using Templates One of the most exciting new features in GoLive 6 is the addition of Page Templates. Page Templates, like Stationary Pads, are HTML files that can be used as a template for a whole page. Unlike Stationary Pads, however, Page Templates can contain editable regions that you define. Using the Template Region palette, shown in Figure 10.17, elements can be assigned as editable, whereas everything outside the regions are automatically locked. If you later modify the Template, GoLive will automatically update the locked content in any document based on it, while preserving the content of the editable regions! Just imagine the hours this can save for those of you managing large sites, or trusting others to update your site! FIGURE 10.17 Create Page Templates to lock a page into place, leaving only designated editable regions for updates.
Undefine Editable Region Select Region New Editable Region
, , TO DO
To Do: Building a Page Template In this lesson, we will set up a template with several editable regions. Because this is a site-specific feature, you will need to have a site open to complete this exercise. Refer to Hour 2 if you need information about how to create a site, or you can download a sample site at www.golivein24.com. 1. Have a site open and create a new document. Place some elements on the page. For this lesson have at least one empty table on your page.
10
Hour 10
,
228
2. From the Window menu, select Template Regions. 3. Notice in the lower part of the Template Regions palette the New and Trash icons. Select a table, and click the New Editable Region icon, as shown in Figure 10.18. Notice that the selected region becomes colored, signifying that this region is the only section of the page that can be changed when a page is created from the template.
FIGURE 10.18 Use the Template Regions palette to specify editable regions on the Page Template.
4. Save the file by selecting Templates from the Save pop-up menu as shown in Figure 10.19. FIGURE 10.19 Select Templates from the pop-up menu when saving the file.
,
Using Components, Stationeries, Library Snippets, and Page Templates
229
Applying the Template
, TO DO
In addition to creating a page from your File Menu (New Special, Page from Template), there are two other ways that you can create a new page from your Page Template: using the Site Extras section in the Objects palette and using the Site window. In this lesson we will go through both.
To Do: Using Templates in the Objects Palette Using the drag-and-drop method we are going to create a new page from the Objects palette. Before we start, make sure that you have a site open that has a Page Template saved in it.
If you are not sure whether you have a Page Template in your site, open the Extras tab in the Site window. If you have a saved Page Template, it will be visible in the Template folder.
1. Have your Site window open with your Files tab active. 2. In the Objects Palette, select the Site Extras button. 3. In the lower right of Site Extras, select Templates from the pop-up menu, as shown in Figure 10.20. FIGURE 10.20 Select Templates from the pop-up menu.
4. Drag the icon of your Page Template to the location you want the new page in the Files tab of the site folder. A new page is created with a triangular, under construction icon beside it. When the file is opened, edited, and saved, the under construction icon will disappear.
,
5. Open the page and note that you can only type the area you determined should be edited.
10
230
Hour 10
, TO DO
To Do: Using a Template from the Site Window You can create a page from a Template file using the Site window. This method will also allow you to open and edit the Page Template. 1. In the Site window make sure that the Extras are visible. If they are not, select Extras from the fly-out menu as shown in Figure 10.21. Then, open the Templates folder to reveal your Page Template.
FIGURE 10.21 The Templates folder is in with the other Site Extras. Open the folder to reveal any saved Page templates.
2. Double-click or drag and drop the Template file from the Extras window to the Files tab of the Site window. A message will appear, as shown in Figure 10.22, asking whether you want to move the template file, thereby disabling it as a template, or create a new file. Choose Create to build a new page. FIGURE 10.22 When you drag or double-click a template file, a dialog box will appear. Select Create from the dialog box to make a new page from the Page template.
,
3. Choose Modify if you want to make changes to the template. Remember that any changes you make on the template can be updated to the pages created from it! There are additional options to make your life easier when using Templates. If you take a look under the Special menu, shown in Figure 10.23, you will see that not only can you detach a Template from an existing page, but even apply a Template to a page that has already been created!
Using Components, Stationeries, Library Snippets, and Page Templates
231
FIGURE 10.23 Select to attach or detach a template from the Special menu.
Summary By the end of this hour, you should feel comfortable using the timesaving features available when working in a GoLive site. Proper planning is still essential, but combine it with using the right tools and you are well on your way to creating a clean, consistent Web site.
Q&A Q I used a Stationery file to build several pages. When I change the Stationery file, will it update the other pages? A No. Stationery files are meant to be the foundation for new pages, but they are not dynamic. If this is important to you, use a Page Template. Page Templates can be changed and it will update all files created from it. Q I have already posted a site using a component navigational bar. I updated my component on my system. Do I now need to replace all uses of my pages on the server? A Yes. When the Component was updated on your system, it updated all uses only on your system. You now need to upload those updated files to your Internet service provider’s (ISP) server. Q Can Stationery files contain components? A Yes. That is a good way to make your Stationery files more dynamic.
Quiz 1. What is the best way to save a line of source code that you want to reuse? a. Copy and paste it into a new document until needed. b. Put it in a Stationery file. c. Save it as a Library Snippet.
10
232
Hour 10
2. How can you control the width of a component embedded on a page? a. Drag the window down in size. b. Use a layout grid or table and place the component in a cell. c. Type a width in the Inspector. 3. What attribute won’t a component carry to embedded pages? a. Background color b. Imagemaps c. Hyperlinks 4. Why might the pop-up window in the Save window not be there when you want to save a Stationery, Template, or Component file? a. The page is not labeled .html. b. A GoLive site is not open. c. The page contains a component.
Quiz Answers 1. c. The best way to save a line of source code that you want to reuse is to save it as a Site Library Snippet. 2. b. To control the width of a component embedded on a page, use a layout grid or table and place the component in a cell. 3. a. Background color is the attribute that a component won’t carry to embedded pages. 4. b. The pop-up window in the Save window won’t be present if a GoLive site is not open.
Exercises Become more familiar with the site resources by practicing and forcing yourself to use them in a site building workflow. 1. Create a practice site (see Hour 2). Use this file to set up stationery, components, and Site Library Snippets. 2. Create a Stationery file that contains a component. Use the Stationery file to build several files and then update the component. 3. Place an image and text on a practice page and create a Site Library Snippet from the two items. Apply the snippet to the same or another page.
HOUR
11
Designing Pages with Frames Have you ever visited a Web site where it appears as though one portion of the page remains fixed, while the content of another portion changes? You are not imagining it! What you are experiencing is a common use of frames. Although creating complicated frame sets can be a challenging proposition, simple frame sets are fairly easy to master and can be very effective when used properly. In this hour, you learn how to • Create a frame set • Edit the basic frame set attributes • Assign pages to the frames in your frame set • Target pages from within your site • Target links to pages outside of your site • Target two frames with one link • Target using the base URL head tag
234
Hour 11
Creating Frame Sets First, you must learn a little terminology to establish the difference between a frame and a frame set. Imagine a glass window split vertically down the middle into two panes. In the HTML world, the two glass panes are comparable to individual frames. The wood around the outside and down the center of the window, which holds the panes in place, would be considered the frame set. When you build a frame set you are creating a very simple HTML file that does nothing more than tell the browser how to split up the window into frames. Each frame then displays a separate HTML page in the area designated to it. In our analogy, there are two such panes, so two additional HTML pages are needed—one for each frame. Consequently, you need three HTML files to create a two-frame layout. The first file is the frame set document, an HTML page that instructs the browser to divide up the page into two frames and which HTML pages to display subsequently in those frames. The other two files are the HTML pages that will load into the individual frames. Before you begin creating a frame set, you should have a good idea of how you want to set it up. Do you want a skinny navigation bar across the top of your page, with the content area below? Perhaps you prefer a series of navigation links in a narrow left frame with the content in a larger right frame? (See Figure 11.1.) You can choose from a number of pre-made frame sets in GoLive, but remember that the pages that loaded into each frame must be designed with the layout of the frame set in mind. FIGURE 11.1 Here is an example of a two-frame layout utilizing left-frame navigation links and right-frame content.
Designing Pages with Frames
235
, TO DO
To Do: Create a Frame Set To create a frame set in GoLive, follow these steps: 1. Create a new page by selecting File, New from the menu, or by pressing Command+N (Mac) or Control+N (Windows) on your keyboard. 2. Switch to Frames Layout mode by clicking the second tab from the left, titled Frame Editor (see Figure 11.2). The icon on the tab resembles a three-frame frame set.
FIGURE 11.2 Access the Frame Editor by clicking the second tab from the left.
3. Open the Objects palette, if it is not already open, by selecting Window, Object from the menu, or by pressing Command+2 (Mac) or Control+2 on (Windows). 4. Click the Frames button of the Objects palette (see Figure 11.3). 5. Drag the Frame Set icon of your choice from the Objects palette and drop it into the Frames Layout window. FIGURE 11.3 GoLive offers an array of pre-made frame sets from which to choose.
, If you change your mind and want to use a different frame set layout, simply click once inside a frame and press the Delete key on your keyboard. This will remove the selected frame. You can delete one frame or as many as you like. If you delete all the frames, your page becomes blank and you can start over by dragging another Frame Set icon to the page. You can also add the single Frame icon or another Frame Set icon to an existing frame set to create a new layout.
Editing Basic Frame Set Attributes Open the Inspector, if it is not already open, by choosing Window, Inspector from the menu, or by pressing Command+1 (Mac) or Control+1 (Windows) on your keyboard.
11
236
Hour 11
After you have dragged a Frame Set icon to the Frames tab of your document, you will notice that the Inspector shows Frame in the lower-left corner. You will use the Inspector to set the attributes for each individual frame by clicking on the frame you want to edit. In the Inspector, you name the frame, set its size, indicate which HTML page will show in the frame, choose whether you want scrollbars, and decide whether the frame will be resizable by the user. You must do that for each frame in the frame set. If you click on one of the borders around a frame, the Inspector will show Frame Set in the lower-left corner. At that point, you can set the attributes for the frame set itself, including the border size and color. You must set the attributes for every border separating the frames. Let’s discuss each of the options in the Frame Set Inspector (see Figure 11.4). FIGURE 11.4 The Frame Set Inspector.
• Size—The Width and Height input fields are disabled because you cannot set an absolute size for a frame set. • Orientation—Clicking the Horizontal radio button arranges the frames in your frame set horizontally, whereas clicking the Vertical radio button arranges the frames vertically. Click on Matrix to create a frame set that has the attributes “row” and “col” at the same time, defining a matrix. • Rows and Columns—After a frame set is placed you can edit the amount of rows and columns. If you add more rows and columns than existing frames, a blank frame set is created. • BorderSize—To set the width of the border between frames, click the check box next to BorderSize and type the desired size into the input field. Border size is set in pixels, so if you choose a border of 10, it will show in the browser as 10 pixels wide. If you set the BorderSize to 0, no border will show.
Designing Pages with Frames
237
• BorderColor—If you choose a border size of 1 or greater, you can define a border color to it. Click once on the color cell next to the word BorderColor to open the Color palette. Select the color of your choice from the Color palette, and then drag and drop the color chip from the Color palette into the color cell in the Frame Set Inspector. • BorderFrame—Choosing Yes from the pop-up gives your border a 3D appearance, whereas selecting No means the border will be 2D.
To have a seamless frame set, where you have no evidence that the pages are separate, set the border size to 0, and the BorderFrame to no.
• Preview Set (Mac only)—Click the Preview Set button to see how your frame set will look. If you have not yet assigned an HTML page to each frame, the Preview Set button will not have an effect. • Stop Preview (Mac only)—Stops the preview and returns you to frame set editing mode.
11 To preview your frameset, click the Frames Preview tab (Mac) or Layout Preview tab (Windows) at the top of the page. Note that GoLive will not display a frame that references an external URL. You must use a Web browser to preview that frame.
Assign Pages to the Frames in Your Frame Set A frame set alone is only part of the equation. You need to fill the individual frames with content, which means you must assign an HTML page to each frame. For a frame set that has two frames, you must create two HTML pages, one for each frame. Figure 11.5 shows the individual HTML pages that went into our sample frame set. One page contains a series of links, whereas the other page contains the content. You use the Inspector to set the attributes of each frame, and to assign an HTML page to each frame. Let’s explore the Frame Inspector (see Figure 11.6).
238
Hour 11
FIGURE 11.5 The frame on the left acts as a navigation tool by offering a series of links. The frame on the right holds the content.
FIGURE 11.6 The Frame Inspector.
If the Inspector does not show Frame in the lower-left corner, you are not in Frame mode. Click once on a frame in your frame set to switch the Inspector to Frame mode, where you can set the attributes for that particular frame. You must set attributes for each individual frame in your frame set.
• Size—Three choices are available in the pop-up tab next to Height and Width: • Scale—Scale automatically resizes the frame if the viewer resizes her browser window. • Pixel—Pixel enables you to set the size of the frame in pixels. You cannot set all frames in a frame set in absolute pixel sizes. For example, if you have a
Designing Pages with Frames
239
two-frame vertical setup, you can have the left frame in pixels, but you must leave the right frame set to Scale. By setting one frame in the frame set to Scale, the frame set will adjust itself to accommodate the size of the browser window it is occupying. • Percent—Percent enables you to choose the percentage of the browser window that you would like the frame to inhabit. For example, you could set a left frame to 25% and a right frame to 75%. No matter how small or wide the user sets his browser window, the left frame will always fill 1/4 of the whole window. • Name—You must name each frame in your frame set. Simply choose a descriptive name and type it into the Name field. For a two-frame vertical layout, you might choose Left Frame as the name of the left frame, or you could use something more descriptive, such as Table of Contents, or Navigation Frame.
What you name the frame is not important, but you will have to remember it and possibly retype it, so keep it simple. Also, keep names in lowercase; frame names are case sensitive and won’t work if you target a frame with an uppercase name when you typed it in lowercase.
• URL—The URL field is where you designate the HTML page to display in the frame. There are four methods for setting the URL: • Type—Type the URL directly into the URL field in the Frame Inspector. • Browse—To choose an HTML document from anywhere on your hard drive: 1. Click the Browse button. 2. Navigate through the hierarchy of folders on your hard drive until you arrive at the file you want to display in the frame. 3. Select the file and click Open, or double-click the file. • Point and Shoot from Inspector—To use the point and shoot method, you must have a Site File open: 1. Click the mouse down on the Point and Shoot button at the left end of the URL field. 2. Continue holding down the mouse button while you drag the resulting line over to the Site file. 3. Point at the document you want to display in the frame. 4. Let go of the mouse button.
11
240
Hour 11
• Drag and Drop—With your Site file open to the Files tab, drag the HTML file you want to display from the list and drop it onto the frame (see Figure 11.7). FIGURE 11.7 Drag the HTML file you want to display from the Files tab of the Site window and drop the file onto the frame.
You can also point and shoot directly from a frame to choose the HTML file you want to display in the frame. Command+Click (Mac) or Alt+Click (Windows) on the frame. Continue holding down the mouse button while you drag the resulting line over to the Site file. Point at the document you want to display in the frame. Let go of the mouse button.
• Scrolling—Indicates whether or not a scrollbar for the frame will be available to the viewer. There are three options: • No—Choosing No removes scrollbars from the frame, whether or not the user needs them to see all the content on the page. Use No only when you are completely certain that scrollbars will not be needed. • Yes—Choosing Yes displays scrollbars whether or not the frame’s contents are fully displayed. • Auto—Selecting Auto allows the browser to choose whether scrollbars are needed. If all the contents of a page are being displayed, the browser will not offer a scrollbar, but if there is additional content the scrollbars will automatically be added. • Resize Frame—By default, this option is deselected. If you want your viewers to have the ability to resize the frames of your frame set in their browser windows, check the check box for this option.
Designing Pages with Frames
241
• Preview Frame (Mac only)—Clicking the Preview Frame button displays the HTML page assigned to the frame without switching to the Frames Preview tab of the Document window.
To open the HTML page that is assigned to a frame, simply double-click anywhere in the frame.
Targeting Pages from Within Your Site Earlier in the hour, we mentioned that you must name every frame in your frame set. There is a very good reason for that. When you click a link in one frame, you must tell the browser whether to open the link in the same frame, open the link in one of the other frames, in the whole browser window, or even in a brand-new browser window. As default, if you click on a link the page replaces itself. This can defeat the purpose in a framed page, especially when the navigation bar replaces itself! When you name each of the frames in your frame set, you make it easy to designate where a link will open when a user clicks it.
You must have a frame set document open in GoLive for the names of its frames to appear in the Target pop-up list of the Inspector.
, TO DO
To Do: Select a Target for Your Link To select a target for your link, complete the following steps: 1. Select the text or image you want to use as the link. 2. In the URL field of the Inspector, either type in, point and shoot at, or browse to the HTML file to which you are linking. (For more information on how to make links, please refer to Hour 4, “Formatting and Stylizing Text.”)
,
3. Click the button with the little up and down arrows on it at the right side of the Target field. 4. Choose the target for your link from the pop-up list. The list will include the names of all the frames in your frame set, plus the default target options of _top, _parent, _self, and _blank (see Figure 11.8).
11
Hour 11
,
242
FIGURE 11.8 Select the target for the link from the pop-up list in the Inspector.
, If you target a link using the name of a frame that does not really exist, the page will open in a new browser window.
Let’s define the choices available in the Target pop-up: • Default—This loads the new page into the frame from which the link originates. It is the same as using Self. • Frame Name—If you want a link to load a page into one of the frames in your frame set, choose the name of the frame from the Target pop-up. • Top—If you want the page to load into the whole browser window rather than into one frame, choose _top. • Parent—If you have nested frame sets on your page (advanced users only!), choose _parent to load a new page into the parent of the current frame set. • Self—To load a page into the same frame from which the link originates, select _self. • Blank—To open a brand-new browser window in front of the current one, choose to target the link to _blank. This can be useful even when not using frames to open a link in a new window without leaving your site. For instance, if you want a link to go to an external site, but yet allow viewers to click back to your site at any point.
If no target is selected for a link, by default the new page loads into the same frame as the link.
Designing Pages with Frames
243
, TO DO
To Do: Create a Frame Set and Target Links To create a two-frame frame set complete with links and then target those links, complete the following steps: 1. Open a new GoLive project. 2. Create an HTML page with a black background and a series of words in one line across the top. Type the words as shown in Figure 11.9. Change the color of the words to white so that you can see them on the black background.
FIGURE 11.9 Type these four words across the top of the page: Home | About | Links | Contact. The straight line, or pipe character, is above the Return key on the Mac, or above the Enter key on the PC.
11 3. Save the page into your Root folder and name the file navigation.html. 4. Next, create four HTML pages, each with one of the four words listed in step 2 as a heading. Give each page a different background color (use four colors that coordinate well with each other). Save the page that has the Home heading as home.html. Use the same process to save the other three pages so that you end up with five files: navigation.html, home.html, about.html, links.html, and contact.html.
,
5. Create a frame set that has a narrow navigation frame at the top, and a wider content frame below it (see Figure 11.10). Name the top frame Navigation in the Name field of the Frame Inspector. Name the bottom frame Main. Save the page into your Root folder and name it frameset.html. Set the FrameBorder to No and BorderSize to 0. 6. Load the page called navigation.html into the frame named Navigation. Load the page called home.html into the frame called Main.
Hour 11
,
244
FIGURE 11.10 Drag the Frame Set icon showing a narrow top frame and a wider content frame from the Frames button of the Objects palette and drop it on your page to create the frame set.
7. Open the page called navigation.html by double-clicking inside the Navigation frame in the frame set, and create links from the words. That is, link the word Home to the file home.html, and so on. Target each link to the frame called Main. Save again. 8. Open the page frameset.html in a browser and test your newly created frame set!
When working in frames it is common to forget that you must always preview your page from the frame set page, not the individual pages that belong within the set. Make sure that after you save changes that you return to the frame set before previewing.
,
Targeting Links to Pages Outside Your Site There might be times when you want to load a page at an external URL into a frame in your frame set. This is quite easy to do, but we strongly suggest that you consider several things before you load someone else’s page into your frame set. If you load an external page into one frame of your frame set and that page is itself a frame set, you will end up with nested frames. This presents a very difficult navigation problem for the viewer. It is confusing and distracting, and many people do not know how to break out of a frame set. Loading an external page into your frame set might also produce a copyright infringement if you attempt to pass off someone else’s work as your own by presenting it on your site, through your frame set. This is a bad idea, and we suggest you don’t even consider it. If you find information on someone else’s Web site that you would like to
Designing Pages with Frames
245
present to your audience, link to it and set the Target field to _blank. This results in the external page loading into a brand-new browser window that opens in front of the current one. This way, your visitor can look at the material on the external site, and then simply close that window to return to yours.
, TO DO
To Do: Linking Your Frame to an External URL To load a page that is outside of your Web site into a frame, complete the following steps: 1. Select the text or image you want to use as the link. 2. In the URL field of the Inspector, either type in the URL, or point and shoot at an external URL in the External tab of the Site window (see Figure 11.11). For more on using external URLs in GoLive, please refer to Hour 9, “Using GoLive’s Site Management Tools.”
In both Internet Explorer and Netscape Navigator, you can drag and drop the icon from the left end of the browser’s address bar to the desired frame to set an external URL. For long, complicated URLs, it’s easier and more accurate to use this method, or to copy and paste the URL, rather than to type it.
FIGURE 11.11 Point and Shoot at an external URL in the External tab of the Site window.
3. Click the button, with the little up and down arrows on it, at the right side of the Target field.
,
4. Choose the target for your link from the pop-up list.
11
246
Hour 11
You must assign a Target to every link you create in a frame. If you do not do so, you might end up with pages opening in the wrong place!
Targeting Two Frames with One Link Adobe GoLive ships with prewritten JavaScripts, which are called GoLive Actions. One Action is used to target two frames with one link. For example, assume that you have a two-frame setup for your Products section. The left frame acts as a table of contents, listing the product names as links. The content frame welcomes the visitor to the Products section of the Web site. When clicked, the links in the left frame load information about the products into the content frame. But you also have a link in that table of contents to your Services section. When the user clicks that link, you want to load into the left frame a new table of contents that displays links to your various services. At the same time, you want a page to load into the content frame welcoming the visitor to the Services section. The way to do that is by using the Target2Frames Action.
, TO DO
To Do: Setting Up the Target2Frames Action To use the Target2Frames Action complete the following steps: 1. Select the text or image that will be the link. 2. Click the Link button in the Inspector. 3. Type # in the URL field to create a blank (null) link. 4. Choose Window, Actions from the menu. Make sure that the Actions tab is selected. 5. Choose Mouse Click from the Events list. 6. Click the New Action (page) icon to the left of the Trashcan.
,
7. From the Actions pop-up, choose Link, Target2Frames (see Figure 11.12). 8. Enter the URLs and targets into the corresponding fields marked Frame 1 and Frame 2 (see Figure 11.13).
247
,
Designing Pages with Frames
FIGURE 11.12 Select Link, Target2Frames from the pop-up in the Actions palette.
FIGURE 11.13 Type the name of the first frame into the Frame 1 field, and then link it to its corresponding page. Do the same for the second frame, with appropriate changes.
, Using Base URL To simplify the target process, use a great head tag that will allow you to choose a base target. In other words, every link on the page can be set up to go to the frame name of your choice, automatically. This works well with Navigation bars where the links are always targeted to the same frame.
11
248
Hour 11
, TO DO
To Do: Using Base URL In this exercise we will set up a default frame name for the target for all links on the page. 1. Open a page that has links that are to be directed to a frame. 2. Open the Head section by turning down the pointer to the left of the page icon, as shown in Figure 11.14.
FIGURE 11.14 Open the Head section of a page by turning down the pointer to the left of the Page icon.
3. From the Head section of the Objects palette, drag the Base icon to the Head section of the page as shown in Figure 11.15. FIGURE 11.15 Use the Base icon from the Head section of the Objects palette to set up a default target for all of the links on the page.
,
4. Ignoring the Base check box, choose the target pop-up menu and select the default frame name for all of the links on this page. If it is not listed, you can type it. By choosing this you never have to specify a target for the links on this page again. You can override this default by setting a different target on individual links on the page. Keep in mind that this must be checked in your browser or it will not preview in GoLive.
Summary In this hour, you learned the difference between a frame and a frame set, how to create both, and how to set their attributes. You also learned how to target links within frame sets, and how to target two frames with one link by using GoLive Actions. You also learned how to save time with the Base URL head tag.
Designing Pages with Frames
249
Q&A Q I created a frame set that has a narrow frame across the bottom of the page with links in it, and a wide frame above it in which the new page is supposed to load. Instead, when I click the link, the page is loading into the narrow frame! What have I done wrong? A You did not properly set up the target for the link. Select the link, and then in the Inspector, choose the name of the frame you are targeting from the pop-up list. Q My frame set has a big ugly border around it, which messes up the design I had in mind. I want the frames to butt right up against each other with no space between them. How do I accomplish that? A Select the frame set by clicking once on a divider between the frames. In the Frame Set Inspector, set the FrameBorder field to 0.
Quiz 1. How many HTML files do you need to create a frame set constructed of three frames? a. One b. Two c. Three d. Four 2. Why is it necessary to give each frame a unique name? a. So that you know which page to load into the frame. b. So that the browser can properly render the frames. c. So that the links in the frames can be properly targeted. d. So that the frame set is the proper size. 3. Is it possible to allow the viewer to resize a frame? a. Yes; set the Scrollbars option to Yes in the Frame Inspector. b. Yes; select the Resize Frame check box in the Frame Inspector. c. Yes; set the size to Scale in the Frame Inspector. d. No, it is not possible.
11
250
Hour 11
4. Before constructing a frame set, you should… a. Create your design, and build the individual HTML pages that will load into the frames. b. Open a new GoLive project. c. Create the links in the individual HTML pages. d. Brew a pot of coffee.
Quiz Answers 1. d. You need four HTML files to create a frame set constructed of three frames. 2. c. It is necessary to give each frame a unique name so that the links in the frames can be properly targeted. 3. b. Yes, it possible to allow the viewer to resize a frame; select the Resize Frame check box in the Frame Inspector. 4. a. Before constructing a frame set, you should create your design, and build the individual HTML pages that will load into the frames.
Exercises The following exercises are designed to familiarize you with the flexible nature of frames and to aid you when making decisions about how to lay out your frame sets. 1. Create two blank HTML pages, each with a different background color. Name one page left.html and name the other right.html. Create a third page. Click the Frames tab at the top of the page to enter the Frames Editor mode. From the Frames tab of the palette, drag the icon representing a two-frame layout (narrow left frame and wider right frame) onto the page. Click the left frame. In the Inspector, name the left frame “left” and set its size to 25%. Click the right frame, name it “right,” and set its size to 75%. Assign the page named left.html to the left frame, and assign the page named right.html to the right frame. Save the page, naming it index_frameset.html. Next, preview the page in your browser. Open the browser window to various sizes. Notice how the left frame always takes up 1/4 (25%) of the page width, whereas the right frame inhabits 3/4 (75%) of the page, no matter what the width of the browser window is. 2. Switch back to GoLive. Using the same files, open the index_frameset.html page and click the Frames tab. Click the left frame and set its size in the Inspector to 200 pixels. Click the right frame and set its size to Auto. Save the page, and then
Designing Pages with Frames
251
preview it in your browser. This time, as you resize the browser window, the left frame remains at a fixed size of 200 pixels, and the right frame resizes itself to occupy the remaining space. 3. Switch back to GoLive. Again using the same set of files, click the border between the two frames. In the Inspector, set the BorderSize to 0 and BorderFrame to No. Click the left frame and select No from the Scrolling pop-up in the Inspector. Save the page and preview it in the browser. Notice how the border between the two frames and the scrollbar for the left frame have been removed.
11
PART IV Adding Interactivity to a Web Page Hour 12 Designing Forms for User Feedback 13 Using JavaScript Actions 14 Creating DHTML Animations 15 Using Plug-ins and Multimedia Content
HOUR
12
Designing Forms for User Feedback If you’ve surfed the Web much, you’ve probably filled out hundreds of forms. Some common uses of forms include submitting a comment or question via e-mail, making a contribution to an online discussion, or completing a purchase at an e-commerce site. All these activities require the Web site designer to create a form so that you can submit your information. During this hour, you’ll learn how to create a professional-looking form for your Web site that makes it convenient for your visitors to submit information, ask a question, or simply send you an e-mail. To learn this, you’ll create a form that asks the visitor a few basic questions about himself and his computer. In this hour, you learn about the following: • Understanding how forms work • Starting with a form container • Using a table to give structure to your form
256
Hour 12
• Working with text entry fields • Creating check boxes and radio buttons • Adding pop-ups and list boxes to your form • Adding large text areas for comments to your form • Adding Submit and Reset buttons to your form • Making your form e-mail you the results
Understanding How Forms Work Although you probably fill out forms on the Web all the time, it’s unlikely that you’ve given serious consideration to how the information gets from a form on a Web page to an e-mail address. There are many different ways to get your Web page to e-mail you the contents of a form, but they all work in a similar manner. After a visitor completes your form, he clicks a Submit button at the bottom of the page that sends the information from the completed form to a CGI on the Web server. CGI stands for Common Gateway Interface and is a standard protocol used by programs to handle form data. That’s why CGIs are referred to as server-side programming. After the CGI receives the information from the form, it processes that data and e-mails it to you. You could also use a CGI to add the information to a database or complete an e-commerce purchase, but sending the results to an e-mail address is the most common option. This process is illustrated in Figure 12.1. FIGURE 12.1 Data moving from a Web page to a CGI on a Web server to an e-mail address.
When creating a form, it’s important to understand the difference between the client-side form and the server-side CGI. The HTML form is downloaded to the visitor’s Web browser, also known as a client, inside a Web page created in GoLive. After the visitor completes the form and clicks the Submit button, the data entered in the form is sent to the CGI, which resides on the Web server, not on the Web browser’s computer. During this hour, you learn to complete the HTML part of the form in GoLive. At the end of the hour, we make some suggestions for finding help with the more complicated CGI, or server-side, part of a form.
Designing Forms for User Feedback
257
Starting with a Form Container Start your form by placing a Form object on your Web page in Layout mode. The Form object is the first object in the Forms section of the Objects palette, as seen in Figure 12.2. FIGURE 12.2 Place a Form object in your Web page to start your form.
This Form object behaves like a container for a form and includes the necessary opening and closing HTML form tags to make a form work in a Web browser. Everything else you add to the Web page to create a form must be placed inside this Form container. There is a thin black line surrounding the Form container that shows you the bounding region of the form. Now let’s start designing a form.
Creating a Table for a Form If you’ve filled out 100 forms on the Web, it’s likely that 50 of them weren’t very userfriendly and 25 of them were downright ugly! Adding structure to your form makes it easier for your visitors to complete it and helps ensure a more consistent presentation across a variety of Web browsers and computers.
, TO DO
To Do: Using a Table to Give Structure to Your Form To add structure to your form, you’ll use a table to separate and align the form fields and their text labels: 1. Drag a table from the Basic section of the Objects palette into the Form object you just placed on your page. 2. For this example, we assume that you want to ask for the following information from your visitors: • Name • E-mail
,
• Gender • Operating System
12
Hour 12
,
258
• Connection Speed • Comments Because you have six questions combined with a place for Submit and Reset buttons, you need to adjust your table so that it has seven rows. Change the table to include seven rows by adding the number seven to the Rows field of the Table tab of the Table Inspector. See Hour 6, “Designing Pages with Tables,” for more information about changing the look of your table. 3. Divide the table into two columns so that you can put your text labels in the left column and the form elements in the right column. Change your table so that it has two columns by placing the number two in the Columns field on the Table tab of the Table Inspector. 4. Set the Width field of your table to Auto so that it will stretch to fit all the content you’re about to put in it (see Figure 12.3).
FIGURE 12.3 Create a table inside the Form container with seven rows and two columns.
It’s a good idea to include a few pixels of cell padding or cell spacing so that your form elements aren’t too cramped. Cell padding is the space between the content of the cell and its borders. Cell spacing is space added between the cells of the table. We also prefer to set the Border field to 0 so that the form doesn’t look amateurish.
,
5. Before you’re done with the table structure, insert some text labels in the first column of the table as shown in Figure 12.4. Put each label on its own row in the left column. Leave the bottom row blank for the Submit and Reset buttons.
Designing Forms for User Feedback
259
I made all my text labels bold and added a gray color to the left column of the table. These minor adjustments add contrast to the form so that it’s easier for a visitor to use and complete it. A more detailed description of editing tables is found in Hour 6.
FIGURE 12.4 Add text labels for your form fields in the left column.
Adding Text Entry Fields to a Form All the elements required to create a form are located in the Objects palette’s Forms section (third from the left). As with all other elements in GoLive, these items can be placed on your Web page by dragging them from the Objects palette.
, TO DO
To Do: Working with Text Entry Fields The first fields you’ll create are the Name and E-mail fields. Use simple Text Field objects for these because you want to gather only a short piece of text for each one: 1. Drag two Text Field objects from the Objects palette into the first two rows of your table’s right column, as shown in Figure 12.5.
FIGURE 12.5 Add form elements to your Web page by dragging icons to it from the Objects palette.
,
2. Now select the text field you’re using for the Name field. Notice that the Inspector changes to the Form Text Field Inspector. This enables you to customize the basic properties of the form. 3. Type name in the Name field of the Inspector. Naming the form elements distinguishes them from one another and identifies the field for the person receiving the form data. Then enter the word e-mail to name the Form Text Field for e-mail.
12
Hour 12
,
260
4. Set the width of the field with the Visible option. The default visible width of a text field is 24 characters, which is just right for most purposes. Sometimes a field like e-mail should be longer because people have long e-mail addresses. Try changing the visible width of the e-mail field to 32 instead of 24 (see Figure 12.6). If you have a good reason to limit the number of characters that a visitor can type in a text field, you can set that property in the Inspector’s Max field. For example, if you ask for a visitor’s United States ZIP Code, you might want to set the Max value to 10.
FIGURE 12.6 Name the fields in the Form Text Field Inspector.
5. If you want text to appear as bullets or asterisks as the user types, select the Is Password Field check box. This is perfect for sensitive information such as passwords and credit-card numbers.
,
6. To place some default text in the text field, type the text in the Text Field Inspector.
It’s a good idea to name all your form elements with numbers, lowercase letters, and underscore characters. Avoid spaces, special characters, and mixed uppercase and lowercase. All the form elements on a single page should have unique names. Check with your hosting provider to see if it has any other naming constraints. For example, your hosting provider might require that your form field names match the field names in the CGI script, especially for scripts that pass information to a database or delimited text file.
Designing Forms for User Feedback
261
Adding Radio Buttons and Check Boxes to Your Form Radio buttons are organized in groups and enable the user to choose only one of multiple options. For example, a visitor would have to choose Male or Female from a group of radio buttons labeled Gender. Check boxes look similar to radio buttons, but they function differently. They enable visitors to give multiple answers to questions. For example, the visitor can indicate the kinds of operating systems he uses, and his response isn’t limited to one choice. Instead, he can choose any number of options (Mac, PC, Unix, Other). Using radio buttons and check boxes in a form is also a good way to help eliminate data entry errors your visitors might make. Clicking a radio button or choosing check boxes also eliminates the need to type answers.
Adding Radio Buttons Although the possible names and e-mail addresses you can have are practically infinite, there are only two options when it comes to gender: male and female. You used a text box for the name and e-mail fields so that people could type their answers, no matter how long or strange those answers might be. But for the gender field, you’ll use radio buttons so that visitors are forced to choose either male or female.
, TO DO
To Do: Working with Radio Buttons To create the gender options, complete the following steps: 1. Add two radio buttons to your form by dragging two radio button icons from the Forms section of the Objects palette to the third row of your table. 2. Type the words Male and Female next to the radio buttons so that your visitors know which button corresponds to which gender, as shown in Figure 12.7.
,
FIGURE 12.7 Add two radio buttons to your form and label them Male and Female.
12
Hour 12
,
262
3. Now that you’ve added the radio buttons to the form, you need to adjust their properties to make them function properly. Click the first radio button next to the word Male. Notice that the Inspector changes to the Form Radio Button Inspector. This enables you to edit your radio buttons much like you edited your Name and E-mail text fields. 4. Type gender in the Group field. The group attribute tells the radio button which question it belongs to. 5. Next, you need to assign a Value field to the radio button. In this case, it makes sense to give the first radio button a value of male, as you can see in Figure 12.8. The value you assign to a radio button or a check box is the data that will be passed on to the CGI. As the Name field stores the name that the visitor types in the text field, the Gender group will save the text data of male or female.
FIGURE 12.8 Set the group to gender and the value to male in the Inspector.
6. Now edit the second radio button with the Form Radio Button Inspector. Because Female and Male are both options of the same question of gender, you should also make the Group field gender for this radio button. Now set the Value field for this radio button to female.
To make a radio button the default selection, click the check box next to Selected in the Form Radio Button Inspector.
, Adding Check Boxes Now you want to ask your visitor what kinds of computers he uses. It’s common these days for people to use many different kinds of computer operating systems, so use check boxes to enable the visitor to answer however he wants. I’ve decided to give visitors the options of Mac, PC, Unix, and Other.
Designing Forms for User Feedback
263
, TO DO
To Do: Working with Check Boxes To create the operating system check boxes, complete the following steps: 1. Add four check boxes to your form by dragging four Check Box icons from the Forms section of the Objects palette to the fourth row of your table. 2. Type the text labels Mac, PC, Unix, and Other next to each check box so that your visitors know which box corresponds to which system, as shown in Figure 12.9.
FIGURE 12.9 Add four check boxes to your form and give them text labels.
3. Setting the properties of a check box in the Inspector is a little simpler than setting up radio buttons. Select the first check box, which corresponds to Mac, and notice that the Inspector changes to the Form Check Box Inspector. 4. Now enter the Name and Value fields of the Inspector for each check box. The Name field is so that you know what the check box field is; the Value field is what the data is stored as when the box is checked. Each Name field must be unique for each check box. See Figure 12.10 for an example.
12 To make a check box the default selection, click the check box next to Selected in the Form Check Box Inspector.
, FIGURE 12.10 The Form Check Box Inspector should look something like this for the check box that corresponds to Mac.
264
Hour 12
Unless instructed otherwise by your ISP or CGI programmer, it’s usually a good idea to make the Value and Name fields the same. Also make sure to use short labels, using only numbers and lowercase letters and no special characters such as spaces, commas, and quotation marks.
Adding Pop-Ups and List Boxes to Your Form Pop-up form elements are a great way to include a lot of information in a small space, and they make completing a form easier for your visitors. Instead of typing information, the visitor can select from a list of set options. For example, these elements are frequently used in forms to enable visitors to choose their state, country, or credit card type. This example uses a pop-up form element to give visitors a long list of Internet connection speeds to choose from without taking up too much room on the page.
, TO DO
To Do: Working with Pop-Ups To create the connection speed pop-up, complete the following steps: 1. Drag a Pop-up object from the Form section of the Objects palette to the fifth row of your table. 2. Type speed in the Name field of the Form Pop-up Inspector. 3. Click the Inspector row where the Label displays First and the Value displays one. To change the label for this first option, type over the word First at the bottom of the Inspector with the phrase 56k. Then edit the value for this option by typing over the word one with the phrase 56k again. Change the second and third options to DSL and Cable Modem, as shown in Figure 12.11.
,
FIGURE 12.11 The Form Pop-up Inspector should look like this after entering three options.
4. To add one more option to this pop-up, click the New button at the bottom of the Inspector and add Unknown for people who do not know how fast their Internet connection is.
,
Designing Forms for User Feedback
265
5. To duplicate an option, select it in the list and click the Duplicate button in the Inspector. 6. To delete an option, select it in the list and click the Delete button in the Inspector.
,
7. Set the default pop-up content by checking the check box next to the Label field in the Inspector.
Want to change the order in which the pop-up list items appear? Reorder your list using the arrows in the lower left of the Pop-up Form Inspector.
As with radio buttons and check boxes, the Label and Value fields should both be completed in the Inspector. The Label field is so that you know what the pop-up option is; the Value field is what the data is stored as when the box is checked. The Labels and Values are the same in this example, but they do not have to be. Form list boxes are very similar to pop-ups except that form pop-ups have only one visible row of options, whereas list boxes have two or more visible rows of options. You can change this property in the Rows field of the Pop-up Form Inspector. Deciding to use a pop-up or a list box will depend on how much space you have on your Web page. Keep in mind that both Form lists and Form pop-ups can have the option checked for multiple selections in the Inspector.
Adding a Large Text Area for Comments The last area to add to your form is a place for visitors to make a comment or ask a question that doesn’t fit into one of your specific questions. The best way to do this is to use a large text area.
,
, TO DO
To Do: Working with Text Areas To create a comments area, complete the following steps: 1. Drag a Text Area icon from the Forms section of the Objects palette to the sixth row of your table. 2. The first property to set in the Form Text Area Inspector is the Name field. Label it something simple, such as comments. 3. To change the size of the text area, change the values in the Rows and Columns fields. The number of rows is how many lines of text are visible to your visitor, and the number of columns is how many characters wide the area is. See Figure 12.12 for an example.
12
Hour 12
,
266
To place some default text in the text area field, type the text in the Content field of the Form Text Area Inspector. This can be helpful to prompt users for a response.
, FIGURE 12.12 Use the Form Text Area Inspector to change the name, rows, and columns of your Comments field.
Adding a Submit and Reset Button to a Form Now that you’ve created all the form elements, you need to add only two more things to your page to make it complete: a Submit button and a Reset button. A Submit button is what your Web site visitor clicks to send the form contents to the CGI on the server. A Reset button enables the visitor to clear all the fields in the form if he wants to start over again.
, TO DO
To Do: Adding Submit and Reset Buttons To add Submit and Reset buttons to a form, complete the following steps: 1. Drag a Submit Query button and a Reset button from the Forms section of the Objects palette to the bottom row of your table, as shown in Figure 12.13. Reset buttons are not necessary, but they make most forms easier to use for your visitors.
,
2. Now click your Submit Query button so that you can change a few of its properties in the Form Button Inspector. 3. Select the Submit option in the Inspector so that the button will work as a Submit button and type the new button name Submit Survey into the Name field.
267
,
Designing Forms for User Feedback
4. Click the check box next to the Label field to change the button text that the visitor sees. Submit Query sounds too technical, so rename the label something more friendly, such as Submit This Survey, as shown in Figure 12.14. FIGURE 12.13 Add Submit and Reset buttons to your form like this.
FIGURE 12.14 Edit the properties of your Submit button in the Form Button Inspector as shown.
12
,
5. Now select the Reset button in your form so that you can change its properties in the Inspector. Make sure Reset is selected so that it performs the reset function. If you want it to have a custom label, click the check box next to the Label field and change the button text to Reset This Form, as shown in Figure 12.15.
268
Hour 12
FIGURE 12.15 Edit the properties of your Reset button in the Form Button Inspector as shown.
Making Your Form E-mail You the Results Your form is almost done except for a few final steps. Now you are ready to connect your HTML form to the CGI on your Web server. If these directions do not work for you, contact your hosting provider or a Web programmer for extra help. The following steps will work for most server setups.
, TO DO
To Do: Setting the Form Action To connect your form to a CGI, complete the following steps: 1. Select the Form object on your page by clicking the small square in the upper-left corner. Notice the Inspector is now the Form Inspector. 2. Name the form in the Name field of the Form Inspector. This is especially important if you have multiple forms on one page or have to program custom-built CGIs. 3. In the Action field, type the path to the CGI as provided by your Web host. This might be something similar to /cgi-bin/formmail.pl.
,
4. Change the Method to Post so that the data is posted to the Web server and you are almost done. Your Form Inspector should look something like the one shown in Figure 12.16.
Designing Forms for User Feedback
269
FIGURE 12.16 Set up the form tag in the Inspector. The value for the Action field must be provided by your Web hosting company or Webmaster.
, TO DO
To Do: Creating Hidden Fields The last thing you might have to do to your form is add one or two hidden fields. These hidden fields are invisible to your visitor, but they store important information such as the recipient’s e-mail address that can be sent to the CGI. Adding hidden form fields might not be necessary based on the instructions you receive from your hosting provider. To add hidden fields to your form, complete the following steps: 1. Drag a hidden form field object from the Forms section of the Objects palette anywhere inside your form container. I placed mine after the word Name. 2. Select the hidden form field to edit its properties in the Inspector. Give the hidden form field a name and value. The name and value will depend on your hosting provider, but a common example would be a name of e-mail and a value of the recipient’s e-mail in the form [email protected], as shown in Figure 12.17. FIGURE 12.17 Follow the instructions of your Web hosting provider when using and customizing hidden form fields.
,
Hidden form field object
12
270
Hour 12
When your form is done, it’s time to upload and test your form. You can learn about using FTP to upload your page to the Web server in Hour 23, “Uploading Your Web Site to Your Web Server with FTP.” When you are done uploading your page, launch your Web browser, surf over to your form, and complete your own survey!
Summary In this hour, you learned how to build a form that includes many different kinds of form elements, such as text and password fields, radio buttons, check boxes, pop-ups, and list boxes. You’ve also learned how to include necessary form elements, including a Submit button and a Form container. Lastly, you learned the basic process of connecting your form to a server-side CGI to have the results of the form e-mailed directly to you. In the next hour, you’ll learn more ways to add exciting interactivity to your Web pages, with features such as JavaScript rollovers and pop-up navigation elements.
Q&A Q Why do I see my form labels but no form fields when I preview my form in a Web browser? A You forgot to put your form elements inside a Form object container. Q When I fill out my form in a Web browser and click Submit, nothing happens. What could be the problem? A You probably forgot that creating the HTML form is only half of the equation. When the HTML form is completed, you need to contact your hosting provider for details of how to make it work with their CGI.
Quiz 1. Which of the following would make the best form element name? a. How old are you? b. Age c. Visitor’s age 2. What’s the best way to create a text field form element to be used for secure information such as passwords? a. Make the text field really short. b. Don’t include the text field form element on the page because it’s too risky. c. Check Is Password Field in the Inspector.
Designing Forms for User Feedback
271
3. What form field would work best with Age (Under 25, 26–40, 41+)? a. Radio button b. Check box c. Text field 4. What form field would work best with Education (BA, BS, MBA, MS, PhD, Other)? a. Radio button b. Check box c. Text field 5. Which of the following is not necessary on a form? a. Submit button b. Reset button c. Form tags
Quiz Answers 1. b. Age is a good form element name because it uses only lowercase letters or numbers and no special characters such as spaces or punctuation. 2. c. Check Is Password Field in the Inspector to create a password field. 3. a. Radio button is the best option because there’s only one appropriate option. 4. b. Check box is the best option because there’s more than one option. 5. b. The Reset button is nice to have in a form, but completely optional.
Exercises If you want to learn more about forms, try these exercises: 1. Create a pop-up or list box form element that enables multiple selections, and then play with it in a browser. 2. Ask your Web hosting provider to show you the CGI code for your form. It will probably be very confusing at first, but you might learn how to customize your own forms. Be careful, be patient, and always work on a copy of the CGI.
12
HOUR
13
Using JavaScript Actions Not so long ago, if you wanted to have special effects on a Web page, you had to learn JavaScript, or at least how to copy and paste it into your page! Now thanks to GoLive many of the popular JavaScript actions are built right into the application. They are called Actions and are essentially turnkey scripts ready for you to use. Actions are very easy to implement when you understand the logic and sequence of steps that need to be followed. In this hour we will introduce you to some common Actions, and show you how to customize them for your own use. GoLive stores these JavaScripts and other ready-made HTML snippets in two locations. Several of the most commonly used are held in the Smart section of the Objects palette, and the rest reside in a folder called Actions, which is inside your GoLive application folder. Some of the neat things you can do with objects and Actions are image rollovers—in which a button changes its appearance when your mouse passes over it—pop-up menus, and links that open a new browser window of a specified size.
274
Hour 13
In this hour, you’ll learn • How to use the Modified Date object • How to configure a Rollover object • How to configure a pop-up navigation element • How to make a link open a new window of a specified size • How to configure a remote rollover • Where to find and install Actions
Using Objects from the Smart Section In this hour, you’ll learn how to use three of the objects in the Smart section of the Objects palette. The three objects you will work with are the Modified Date, the Image Rollover, and the URL pop-up. Later in the hour, you set up two Actions: the Open Window Action and the Set Image URL Action, which creates a remote rollover.
Setting Up and Using the Modified Date Object The Modified Date object is simply a way for you to tell your viewers the last date that the page they are visiting was changed. This is the easiest object to set up in the entire GoLive arsenal. To use this object, drag it from the Smart section of the Objects palette onto your page. The icon for the Modified Date object has a number 5 on it, and resembles a tiny calendar (see Figure 13.1). It can be placed directly on the page, inside a table cell, or inside a text box on a layout grid. FIGURE 13.1 Let viewers know the last time the page was revised by using the Modified Date object.
To configure the Modified Date object, open the Inspector and select the format in which you want the date or time to be displayed (see Figure 13.2). If you want both the date and the time to be shown, use two Modified Date objects. Set one to show the time and the other to show the date. Type Page last Modified on in front of the object to make it clear to the user.
Using JavaScript Actions
275
FIGURE 13.2 The options available to the Modified Date object.
Some users mistakenly think that the Modified Date object will show the current time and date on the page the user is visiting. That is not the case. It shows the last time that you made a change to the page the user is viewing. If you have a page that will seldom be modified, it might not be wise to use this object or visitors might get the impression that your site is stale.
Setting Up an Image Rollover Before you use GoLive to configure an image rollover, you must first create the images for the rollover states. You will need to do this in an art program such as Adobe Photoshop, ImageReady, or any other application that will allow you to save Weboptimized images. Depending on how many states you want for the rollover, you will need two or three images. The first image will be seen when the page loads, and is called the Normal state. The second image state appears on the rollover (Over), meaning when the mouse rolls over the image. You can use another image for the third state, called Down, which briefly appears when the user clicks the mouse on an image. The main state returns when the cursor is moved away from the button.
If you use an image of a button and apply a drop shadow to the main state of the button, and then remove the drop shadow on the over state, the button will appear to be depressed when the mouse hovers over it.
Name the images in a simple way that you can easily identify, such as image_main.gif, image_over.gif, and image_click.gif (see Figure 13.3). (Don’t really use image as a name for your image. Use something appropriate.)
13
276
Hour 13
FIGURE 13.3 A rollover can consist of two or even three states, such as the three shown here.
Images you use for the various states of a rollover must be of exactly the same dimensions for the rollover to execute properly. Otherwise, the images will stretch or shrink to fit the dimensions of the original image…not a pretty site.
, TO DO
To Do: Create an Image Rollover If you don’t have files to use for this exercise, download some from www.golivein24.com. To create an image rollover, complete the following steps: 1. Open the Objects palette by selecting Window, Objects, from the menu or by pressing Command+2 (Mac) or Control+2 (Windows). 2. Click the Smart section of the Objects palette, which is the second tab from the left. 3. Drag a Rollover icon from the Objects palette to your page and drop it where you want it. The Rollover icon has a question mark with a hand pointing to it (see Figure 13.4). You can place a Rollover object directly on a page, inside a table cell, on a layout grid, or in a floating box.
,
FIGURE 13.4 The Rollover icon makes it easier to create interactive graphics on your page.
4. Open the Inspector. Notice the three preview squares. Drag your first image (new_main.gif) on top of the Rollover icon. GoLive automatically fills in the path to that image and assigns it to the normal state. Of course you could also use any other of the linking methods we discussed in Hour 4, “Formatting and Stylizing Text,” such as browsing and point and shoot.
,
Using JavaScript Actions
277
5. Click the second square, labeled Over. You cannot select an over state until the check box for the URL is checked, as shown in Figure 13.5. Once checked the text field is active and you can locate the image (new_over.gif).
FIGURE 13.5 You must check the box to the left of the text field to assign an Over and Down state to your image.
6. Click the square labeled Down, if you want to add the third state (new_down.gif) when the user clicks the image (see Figure 13.6). Save your page and preview your work in a browser. FIGURE 13.6 The Normal, Over, and Down icons in the Inspector palette.
,
13 Adding a Link to a Rollover Rollovers are as extremely popular as buttons are. They add interactivity to the page and direct interest to the navigation tools. To make your rollover also act as a link, replace the # sign in the URL text field of the Inspector with an address. Don’t forget to put in alternative text to help those who aren’t viewing graphics!
278
Hour 13
You might see a text field for messages in some of the inspectors that involve links. Any text entered as a message will appear in the status window of the viewer’s browser. Typically, viewers do not want your message blocking important link information, so keep that in mind.
Adding a URL Pop-Up A URL pop-up is a great navigation tool for those trying to save precious page space, but still trying to provide multiple links. A viewer can choose to link from a list of URLs that you define using a URL pop-up, as shown in Figure 13.7. Think of the organization that this can add to a page with subgroups linking to many documents. For example, a training company with URLs to all the Web creation courses, and another pop-up for print creation courses, all neatly stowed away in their own URL pop-up. FIGURE 13.7 The URL pop-up saves precious space when many URLs are listed.
GoLive makes it easy to create one of these pop-ups. In the next exercise, you will learn how to create a URL pop-up with three choices.
, TO DO
To Do: Place and Edit a URL Pop-Up In this exercise, you add a URL pop-up to your page, and create a list of products to appear in the pop-up. Before you begin, please create three new pages and add them to your Site File. Name them as follows: site.html, logo.html, and database.html. To add a URL pop-up to your page and set up the links, complete the following steps: 1. Open the Objects palette by selecting Window, Objects, from the menu or by pressing Command+2 (Mac) or Control+2 (Windows).
,
2. Click the Smart button of the Objects palette, which is the second button from the left. 3. Drag a URL pop-up icon from the palette onto your Document window. The URL pop-up icon has a double arrow on it, facing up and down (see Figure 13.8). A URL pop-up can be placed directly on a page, on a layout grid, inside a layout text box on a grid, inside a table cell, or in a floating box.
279
,
Using JavaScript Actions
FIGURE 13.8 Drag the URL pop-up icon from the Smart section of the Object palette to your page.
4. Open the Inspector. In the Inspector, shown in Figure 13.9, you will see a listing provided as an example. After explaining how these are set up we will replace the Adobe Label with one of our own. The Label field represents the words the viewer will see in the pop-up list, whereas the URL field is the actual link to which the selection will lead. FIGURE 13.9 Some items are placed as an example in the Label and URL fields of the URL pop-up Inspector.
The very first item in the list reads Choose, and does not have a URL associated with it. That happens because most often you will want a label to appear on the pop-up that gives the user a hint as to the contents of the pop-up, and you might not necessarily want that label to be a link. Like we discussed in the earlier example, one pop-up for print training courses and another for Web training courses. 5. Select the word Choose in the Inspector. In its place, type Web Figure 13.10).
Page Design
(see
,
There is a check mark (Mac) or a bullet (Windows) next to the first item in a URL pop-up. The check mark or bullet indicates that that label will be shown when the pop-up is in its collapsed state.
13
Hour 13
,
280
FIGURE 13.10 Replace the word Choose with a label that will describe the subject of the links.
6. Select Adobe
Systems Inc.
in the list.
7. Click the Delete (Trashcan) icon, as shown in Figure 13.11. This removes that entry from the list. 8. Click the New (dog-eared page) icon. This creates a new entry. In the Label field, type Web Site Design. In the URL field, point and shoot to the file you made called site.html. 9. Click New. In the Label field, type Logo Design. In the URL field, link to logo.html. Click New again. In the Label field, type Database Design. In the URL field, link to database.html. Label
URL
FIGURE 13.11 Delete the sample label and then start adding your own.
Duplicate Item Delete Item
,
New Item
Move up Item Move Down Item
281
,
Using JavaScript Actions
If you need to edit a long URL in the Inspector, just Option+click (Mac) or Control+click (Windows) the Browse button at the right end of the URL input field. A larger editing box will open, allowing you more space to edit your URL.
,
10. Save and preview your work. It is strongly advised that you preview in more than one browser because Internet Explorer and Netscape Navigator display form elements, such as pop-ups, quite differently. The order in which you enter the labels is the order the viewer will see them, so place them in importance of value. Should you decide you want to change the order rather than select an item, click the up or down arrow at the bottom left of the list field (see Figure 13.12.) You might also use links to external pages, and target them if you choose. For more on targeting links, please read Hour 4.
FIGURE 13.12 You can move a selected item up or down in the list by clicking the up or down arrow in the URL pop-up Inspector.
Using Actions Two of the most popular Actions are the Open Window Action, which opens a new window of a predetermined size when a link is clicked, and Set Image URL, which is similar to a rollover except that the link triggers an image change elsewhere on the page. In the following section, you will learn how to create and configure both of these Actions.
Adding an Open Window Action Have you ever wondered how a Web page designer controls a window to appear cropped accurately to a specific window and clear of all the browser extras such as addresses, buttons, and so on? This is done using JavaScript. Fortunately, you don’t have to learn how to code it manually; it is built right into GoLive as an Action.
13
282
Hour 13
In this exercise, you will use a small thumbnail image as the link, and have a full-sized version of the image load into the new window. You can download the images for this exercise from this book’s Web site by pointing your browser to http://www.golivein24.com. The image files used are named brochure_small.gif, Web_small.gif, logo_small.jpg, brochure.gif, web.gif, and logo.jpg. It is always best to work in a site. Create a new blank site named design before starting. If you need help creating a site, refer to Hour 2, “Creating a Site File.” 1. On the initial index page, created with a site, arrange the thumbnail images (the ones with the word small in their filename) on a page, save the page, and name it samples.html. Figure 13.13 shows a table used to contain the images. FIGURE 13.13 We created a page using a table to place small thumbnails. When clicked, larger images will appear in a new window.
2. Now we need to create the pages that will open when the thumbnails are clicked. Even though you can link directly to optimized images—JPEG, GIF, PNG, and even multimedia files—we want entire pages for this exercise. Create a new page and place the larger image named brochure.jpg, center it, save the page in the Root folder (remember the Site button at the bottom of the Save dialog box), and name it brochure.html. See Figure 13.14. FIGURE 13.14 Save this file in the Site folder by selecting Root from the Save pop-up menu. This button appears only if a site is open.
Using JavaScript Actions
283
3. Continue by creating new pages for the logo and Web design. Place the large images on each page and save them in the Root as logo.html and web.html.
When using this action you might want get rid of the default page margin placed on HTML pages. Select the page icon in the upper left of the GoLive page. In the Page Inspector set the Margin Width and Margin Height to 0. This will flush the elements on your page to the edges.
, TO DO
To Do: Configuring the Open Window Action To configure the Open Window Action, complete the following steps: 1. Open samples.html and select a thumbnail image. 2. Open the Inspector and click the Link tab. Empty reference will appear, but because we don’t want to link to a URL just yet, we have to replace the Empty reference with a # sign. The # sign essentially tells the browser to stay put so that an Action can be activated (see Figure 13.15).
FIGURE 13.15 Click the Link tab in the Inspector and change Empty Reference to a # sign.
3. Open the Actions palette by choosing Actions from the Window menu. If you open this and everything is grayed out, a link was not generated. Go back and make sure that there is a # sign in the link text field of the Inspector.
,
4. Many user interactions can trigger a script. If you note on the left side of the Action palette you can scroll through lots of choices. For this exercise we will select the Click state in the Events list. 5. Click the New Item button in the Actions palette, as shown in Figure 13.16.
13
Hour 13
,
284
Event (Trigger)
FIGURE 13.16 To add an Action select a state (user interaction to trigger the script) and click the New Item icon.
Move Up or Down Action Delete Action New Action Pop-up List of Actions
6. Choose Link, Open Window from the Actions pop-up list (see Figure 13.17). Notice in the Inspector that this Action offers a number of options that will affect the appearance of the new window.
,
FIGURE 13.17 The Actions are categorized into related subgroups so they are easy to locate.
7. Enter 150 in the first size text field (width) and 325 in the next text file (height). Deselect all the options that have check marks, except for the Resize button, see Figure 13.18. This eliminates the scrollbar, status bar, menu bar, Toolbar, and location bar from the window. We are letting the user still resize the window. The result of turning off these options will be a small compact window that acts as a picture frame.
285
,
Using JavaScript Actions
FIGURE 13.18 Enter values for the width and height of your window and click the check boxes to determine what options should appear in the browser window.
Options For Browser Window
Width
Height
8. Finally, create the link to the new page by using point and shoot, browsing, or by typing the URL into the Link field. Save and preview your work in a browser (see Figure 13.19). FIGURE 13.19 The window opens in the upper left when you click the thumbnail image in your browser.
13 In the Web design world, the scrollbar, status bar, menu bar, Toolbar, and location bar of a browser window are collectively known as the chrome.
,
9. Continue this exercise by creating links with # signs and the Open Window Action for the logo and the Web page. Note: logo.html should open to 325 wide by 125 high. web.html should open to 325 wide by 225 height.
286
Hour 13
Adding a Close Window Action to Your Page Be nice to your viewers and offer an escape to the new window by adding a Close Window Action to the page. This is very simple and follows the same procedure we went through for the Open Window Action.
, TO DO
To Do: Adding a Close Window Action Have one of the pages open that is going to open as a new window. In our example we will work with brochure.html. 1. Click the cursor to the right of the image of the brochure, and press Return. Underneath the image, type Close Window, as shown in Figure 13.20.
FIGURE 13.20 Type Close Window underneath the image.
2. Select the text and create a link (Command or Control+L, or click the link tool in the Link tab of the Text Inspector). Replace Empty Reference with a # sign. 3. From the Actions window select the State Click, and click the New Action icon (dog-eared page).
,
4. From the Action pop-up menu, select Close Window from the Link group of actions, as shown in Figure 13.21. 5. Test in the browser. Depending upon your text you might have to go back to the options for the Open Window Action and increase the page height.
287
,
Using JavaScript Actions
FIGURE 13.21 Close window offers no options, but is a nice addition to a page that opens in its own window.
, Congratulations! You have successfully used the Open Window and Close Window Actions in GoLive. Next, you will learn how to create a remote rollover by using the Set Image URL Action.
Adding a Set Image URL Action Have you ever visited a Web page and noticed that when you move your cursor over an element, an image appears somewhere else on the page? Then, when you move your cursor away, the image disappears. This technique can be used in many imaginative ways, and thanks to the Set Image URL Action that comes built into GoLive, it’s an easy effect to create. In this exercise, you create a menu with two product names in it. As the user points to each item, an image comes into view. To complete this exercise, you use three images of exactly the same size. You can download the images used in this exercise from this book’s Web site, by pointing your browser to http://www.golivein24.com. The image files you will use are named brush_start.jpg, brush_one.jpg, brush_two.jpg, and brush_three.jpg. Add the images to a Site File before you begin. You can use the site named Design that we had open earlier in this hour.
13
288
Hour 13
, TO DO
To Do: Create a Remote Rollover Using the Set Image URL Action To create a remote rollover using the Action Set Image URL, complete the following steps: 1. Create a new page. For our example we will design a page that interacts with the type of design a viewer is interested in. 2. Create a page with a simple table on it. (See Hour 4 if you need help.) The completed page can also be downloaded at www.golivein24.com. In the table type the following text into cells, as shown in Figure 13.22. Customer Survey: I Want My Designer To Be…Conservative | Colorful | Ultra Creative
3. Add an image object and locate the first image named brush_start.jpg. FIGURE 13.22 Use a table or layout grid to contain the text and the initial image.
4. If you know anything about JavaScript you realize that an element must have a name to have the script act properly. To name an image click the More tab of the Image Inspector, and type a name in the Name text field. We will name this image brushes, as shown in Figure 13.23. 5. Select the word Conservative. 6. Use Command+L (Mac) or Control+L (Windows) to create a link, or click the Link button on the Toolbar.
,
7. Replace the Empty Reference with a # sign. 8. In the Actions palette, choose Mouse Enter from the Events list. Mouse Enter is commonly known as Mouse Over.
289
,
Using JavaScript Actions
FIGURE 13.23 Type the name brushes into the Name text field in the Inspector.
9. Click the New Action (dog-eared page) icon. 10. From the Actions pop-up choose Image, Set Image URL. 11. From the Image pop-up, choose Brushes (see Figure 13.24). FIGURE 13.24 Select the name you gave the image in step 2 from the pop-up list in the Set Image URL Action palette.
12. In the Link field, browse or point and shoot at the image named brush_one.jpg. 13. Test what you have in the browser. The image will switch to the new image, but not go back to the original…yet. Follow these steps to add an additional Action. 14. Return to your page in GoLive and select the word Conservative. We initially set up an Action to swap the brush image when this was crossed over, but now we will add an action to swap the image back to the original when you leave the word.
,
15. In the Actions palette choose the State Mouse Exit. This is commonly known as Mouse Out. Click the New Action icon and select Set Image URL. 16. Select the Brushes image again and choose to go back to the original image brush_start.jpg when the viewer exits the word.
13
Hour 13
,
290
17. Test this in the browser. When you cross over the word Conservative, the image swaps, and when you exit the word, it goes back to the original image. 18. Use the other images to practice using the Set Image URL on the other two words. Don’t forget to set up an Exit Action, too!
If you don’t want viewers to see any image when they initially hit your page, create a blank white GIF to act as a placeholder.
,
Locating and Installing GoLive Actions GoLive Actions are individual JavaScripts written to work in GoLive as a visual interface. That means instead of having to write JavaScript, all you need to do is drag an icon representing a prewritten JavaScript onto your page, and set it up to your liking. GoLive 6 ships with a large collection of Actions already installed, but there are a number of independent authors who have developed additional Actions for GoLive. Some are free, and others can be purchased for a small fee. You can obtain info and other resources at the Adobe GoLive Actions Xchange at http://www.actionxchange.com. Most third-party Actions come with a full description of what they do and how to use them. But after you have a new Action in your possession, you will need to install it into GoLive to use it. This is a very simple process. To install an Action, place it inside a subfolder of the Actions folder, in the GoLive application folder. You can find the proper folder by following this path on your hard drive: GoLive Application folder, Modules folder, JScripts folder, Actions folder, Actions subfolders (see Figure 13.25). Place the new Action inside any of the existing subfolders, or create a new subfolder if you like. After installing the Action, you must restart GoLive to have access to the new Action.
Using JavaScript Actions
291
FIGURE 13.25 Install Actions by placing them in the subfolders inside the Actions folder.
Summary This hour was jam-packed with lots of fun and easy ways to enhance your Web pages with prebuilt HTML and JavaScript. You learned how to use and configure image rollovers, and Modified Date and URL pop-up objects from the Objects palette. You also experienced some of the neat things you can do with Actions. Experiment with the other Actions in GoLive to see how you can create effects easily without writing any JavaScript code at all. Also, be sure to check out the many additional Actions that are available on the Web. Actions can be combined to interact with each other, which leaves the combinations almost endless! GoLive actions are editable and extensible. You can edit the existing Actions or even create your own.
Q&A Q Yesterday, I put a Modified Date object on my Web page. Today, when I looked at the page, it still showed yesterday’s date. Why doesn’t it show today’s date? A The Modified Date object does not show the current time or date, but the time or date that you last updated the page.
13
292
Hour 13
Q I set up an image rollover on my page, but when I preview it in the browser, the images are all distorted. Why? A Chances are that one of your images is not the same dimensions as the other, which is causing it to either squish or stretch to fit into the same space. In some browsers, notably Netscape, it might not work at all. Q Why won’t my URL pop-up work? A You might have used unacceptable characters, such as quotation marks, in the label of an item. Doing so will cause the URL pop-up to break. Q I’m trying to set up a remote rollover using the Set Image URL Action. When I try to select an image from the pop-up list in the Inspector, there are no choices. Why? A You need to name the image in the More tab of the Image Inspector for its name to be listed in the Image pop-up of the Actions palette.
Quiz 1. Where are ready-made drag-and-drop objects such as the Modified Date Object found? a. In the Objects palette b. In the Actions palette c. In the Inspector palette d. In the Site window 2. Actions are premade… a. JavaScripts b. CGI scripts c. VBScripts d. AppleScripts 3. How do you install additional Actions into GoLive? a. Use the CD installer. b. Drop the Actions into the Actions folder inside the main application folder. c. Use the File menu. d. You can’t install additional Actions.
Using JavaScript Actions
293
Quiz Answers 1. a. Ready-made drag-and-drop objects are found in the Objects palette. 2. a. Actions are premade JavaScripts. 3. b. You install additional Actions into GoLive by dropping the Actions into the Actions folder inside the main application folder.
Exercises The following exercises will help you become accustomed to using the URL pop-up and Set Image URL. After you feel comfortable with these, dig into some of the other Actions in GoLive. Access the online help files in the application and run a search on the word Actions to find descriptions of the Actions and instructions explaining how to use them. 1. Build a mock catalog. Start by making a page for each of three main categories: Football, Baseball, and Tennis. Name them football.html, baseball.html, and tennis.html. The pages can be blank because this is just an exercise. Next, build three additional pages for items pertaining to each of those categories. In the football category, name the pages: footballs.html, helmets.html, and cleats.html. Name the baseball pages bats.html, mitts.html, and caps.html. In the tennis category, create rackets.html, gloves.html, and shorts.html. Next, create a main URL pop-up to use on all the pages that contain the three main categories with links to the main category pages. Then create a secondary URL pop-up for each category that lists the items available for that category. Place that URL pop-up on the pertinent pages. You can copy and paste the whole pop-up from one page to the next. 2. Create a family picture album using the Set Image URL Action. Get an image of a mother, father, boy, and girl and make them all equal sizes. Make links called Mom, Dad, Suzy, and Nick. Set up the remote rollover to show the appropriate picture when the mouse rolls over each person’s name.
13
HOUR
14
Creating DHTML Animations Dynamic HTML, or DHTML as it is often called, enables you to create striking navigation devices and animations that give your Web site that extra flair. Even though it is possible to build incredibly complex DHTML Web pages using the GoLive Timeline Editor and floating boxes, our goal in this hour is to introduce you to some simple, but effective, creations that you can tackle right away. In this hour, you learn • What DHTML is and what it can do • How to create animations in GoLive • How to add Actions to your animation • How to trigger your animation with an Action • How to work with multiple objects in an animation • How to use the Timeline Editor
296
Hour 14
What Is DHTML? DHTML stands for Dynamic Hypertext Markup Language. With DHTML you can create simple or complex animations, allow users to move items on a Web page, hide and show layers, and more. It can be effectively used to create elegant navigation devices, and when applied properly, it can be fun! It’s worthwhile to note, however, that DHTML will only work in version 4+ browsers. If you think this might cause problems for your viewers add the Browser Switch action to your page, as discussed in Hour 19, “Controlling How GoLive Writes HTML.” Using DHTML in GoLive 6 is a matter of utilizing floating boxes and the Timeline Editor. With these tools you will learn how to build some visual excitement into your Web pages. If you are not yet acquainted with floating boxes, we suggest you read Hour 8, “Designing Pages with Floating Boxes.” Before you proceed any further in this hour, collect images to use in the lessons, or download samples from golivein24.com. Also, we suggest that you create a new site for this hour, and name it animation. If you need help creating a new blank site see Hour 2, “Creating a Site File.”
Recording a Simple DHTML Animation Many Web designers these days use .swf (pronounced swiff, it stands for ShockWave Format) files to create complex animations as an entry into their Web sites. .swf is one of the formats output by Adobe LiveMotion, Macromedia Flash, and a few other programs. People often refer to these files as Flash files, although in actuality, they are .swf files. Although there are a lot of great things you can do with .swf files, and particularly with LiveMotion SmartObjects in GoLive, there are similar effects you can create with DHTML in GoLive alone. Employing DHTML for animation eliminates the need for the user to have the Flash plug-in installed in his browser. The one caveat is that for DHTML to work properly, the user must have a browser of version 4 or greater.
, TO DO
Let’s create an animated intro to your Web site by using DHTML. You’ll build an entry page featuring an image that enters the browser window from the left, circles around, and then exits on the right. After the image exits the pages, a new page will load into the browser window.
To Do: Record the Movement of Your Floating Box Before we start, make sure you choose Floating Boxes from the Window menu or Command+4 (Mac) or press Control+4 (Windows).
,
Creating DHTML Animations
297
As mentioned in Hour 8, it is important to name floating boxes so not to confuse yourself when your page becomes more complex. To record a simple animation, follow these steps: 1. Open a new page. 2. Drag a Floating Box icon from the Basic section of the Objects palette into your Document window. By default, the floating box will situate itself in the top-left corner of the page. 3. Type a descriptive name for the floating box into the Name field of the floating box in the Inspector, as shown in Figure 14.1. If you are using the flying saucer image file from the www.golivein24.com site, you can name it saucer.
FB Marker
Floating Box Object
FIGURE 14.1 After dragging the floating box onto the page, name it in the Inspector.
Floating Box
,
4. Place an image inside of the floating box. (For details on how to place images onto your page, please refer to Hour 5, “Using Graphics on a Web Page.”) 5. Select the floating box by clicking the edge of the floating box when you see a sideways mitt, or by clicking on the FB marker as shown in Figure 14.2. You can also select the floating box from the Floating Box palette (see Figure 14.3).
14
Hour 14
,
298
FIGURE 14.2 The FB marker can be clicked on to select the floating box.
That little FB marker looks innocent enough, but if placed in the wrong location it can wreak havoc! Make sure that you never drag an FB marker into a table and always have it after a layout grid. Simple rules, but if they’re not followed your floating boxes might not appear correctly. Keep this little special thing in mind: If a version 3 or less browser opens your page, the floating boxes will appear where the FB marker is. Remember our suggestion for a Browser Switch.
FIGURE 14.3 The Floating Boxes palette will help you keep organized.
6. Click the Record button in the Inspector (see Figure 14.4).
,
FIGURE 14.4 Click the Record button in the Floating Box Inspector.
,
Creating DHTML Animations
299
7. Drag the floating box across the page, making a loop in the middle (see Figure 14.5).
FIGURE 14.5 GoLive records the movements of the floating box as you drag.
, As you can see, GoLive recorded a path indicated by a line on the page. The path is based on the movements you made when you dragged the floating box, and is dotted with little gray squares. Each of those squares corresponds to a keyframe in the time track of the DHTML Timeline Editor. Open the Timeline Editor so that you can see the actual keyframes that have been recorded in the time track. To open the DHTML Timeline Editor, click the icon that looks like movie film at the top-right of your Document window (see Figure 14.6). FIGURE 14.6 Click the Movie Film icon at the top right of the Document window to open the DHTML Timeline Editor.
Examine the Timeline Editor (see Figure 14.7) to familiarize yourself with its various parts: • Autoplay button—Enables you to specify whether a scene should automatically play. We will turn this off later when we want an Action to trigger our animation. • Scenes—This pop-up button enables you to create, delete, rename, and select a scene. This is important when using animations in multimedia Actions. • Actions track—Enables you to insert Actions that will be triggered during playback. • Time track—Each floating box on the page has its own time track. • Keyframe—Indicates points on the time track.
14
300
Hour 14
• Time cursor—Indicates the current location in the scene. • Loop button—Instructs the scene to play repeatedly. • Palindrome button—Instructs the scene to play forward and then backward, repeatedly. (You must first select Loop to choose Palindrome.) • Playback buttons—Go to beginning, stop, play, go to end. • Counter—Indicates the position of the keyframe in seconds and in frames. For example, if you set the speed to 30 fps (frames per second) the keyframe at 15 is half a second; 30 would be one second. • Frames per second (fps)—Enables you to choose how many frames per second are used in a scene. Increasing this number makes your animation faster, whereas reducing the number makes it slower. Autoplay Button Scenes Pop-up
Actions Track
Time Track
Keyframe
FIGURE 14.7 The Timeline Editor.
Frames Palindrome Button Counter per Second Loop Button Playback Buttons
Using the Timeline Editor to Edit Your Animation Before we start, let’s get a little more used to working in the Timeline Editor. First, locate the Time Cursor (yellow triangle) and drag it back and forth on the timeline. In the multimedia world this might be referred to as “scrubbing” the timeline. Note how you can see the position of the floating box and how it corresponds to the keyframes in the timeline. Now that you have the basic animation in place, you need to fine-tune it a little. Your goal is to have the image float onto the page from the left, and completely exit the page on the right. To do this, use the Timeline Editor and set the placement of the floating box at the first and last keyframes.
Creating DHTML Animations
301
, TO DO
To Do: Set the Beginning and Ending Placements of the Floating Box Follow these steps to set the beginning and ending keyframes: 1. Drag the time cursor left to the beginning of the time track, as shown in Figure 14.8.
FIGURE 14.8 Drag the time cursor to the beginning of the time track.
2. Click the very first keyframe in the time track. This moves the floating box into its position for that keyframe (see Figure 14.9). FIGURE 14.9 Select the first keyframe in the time track to move the floating box to its opening position.
3. Type a negative number into the Left input field in the Floating Box Inspector. Our sample image is 200 pixels wide, so to place it out of the viewable area of the browser, it must move to the left at least that many pixels. Enter -210 in the Left field to be certain that the image is completely off the page (see Figure 14.10).
,
The numbers in the Left and Top fields in the Floating Box Inspector represent the number of pixels between the floating box and the left and top edges of the page, respectively. The placement of a floating box is always determined relative to these two positions.
4. Move the time cursor right to the end of the time track.
14
Hour 14
,
302
FIGURE 14.10 Type a negative number in the Left field to place the image off the left side of the page.
5. Select the very last keyframe in the time track. This moves the floating box into its position for that keyframe.
,
6. Type a large number in the Left input field. We’ll use 1500 because few browser windows will be more than 1,500 pixels wide and, therefore, the last position of the floating box will be out of the range of the browser window. Save and preview your work in a browser. To save your work, choose Edit, Save from the Menu, or press Control+S (Windows) or Command+S (Mac). Then click the Browser Preview button in the Toolbar, or press Control+T (Windows) or Command+T (Mac) to launch your preferred browsers and preview the animation.
Insert additional keyframes between existing keyframes by Control+clicking (Windows) or Command+clicking (Mac) on the time track. Modify an animation by clicking a keyframe, and then adjusting the placement of the floating box for that frame by dragging the floating box to the new position. Clone keyframes by Option+dragging (Mac) or Alt+dragging (Windows). Select multiple frames by Shift+clicking, or dragging a selection around them. Delete frames by selecting them and pressing Delete, or Command+x (Mac) or Control+x (Windows). Keyframes can be copied and pasted through the Edit menu.
Using Actions in Your Timeline When you use the Timeline Editor in GoLive to create animations, you have the additional benefit of being able to attach Actions to the time track. When the scene reaches
Creating DHTML Animations
303
the Action marker during playback, the Action will be triggered. Actions perform a variety of functions such as showing or hiding another floating box, triggering a scene (meaning another animation) to play, or loading a new page into the window.
When a page is loaded into a browser window, the timeline automatically begins to play unless you specify otherwise by deselecting the Autoplay button in the Timeline Editor.
In the next “To Do,” you add an Action at the very end of the animation that will trigger the loading of a new page. The result will be that the image will appear to float onto the page, move around, and then float off the page. When the image exits, a new page will load into the window. You already are familiar with the time track in the Timeline Editor. Now you will use the Action track.
, TO DO
To Do: Add an Action Marker to the Action Track To add the Action that will load the new page into the browser window, complete the following steps: 1. Move the time cursor to the very last keyframe in the time track. 2. Place your cursor into the Action track just above the last keyframe in the time track. Command+click (Mac) or Control+click (Windows) to insert an Action marker into the Action track (see Figure 14.11).
FIGURE 14.11 Insert an Action marker into the Action track.
, Now that you have the Action marker in place, you need to specify the Action you want to use and configure it to do what you want. In this case, you want the Action to load a new page into the browser window. Before you can tell GoLive what page to load, you need to know the URL of the page. Let’s make a new page for this purpose. Create a new page; type Welcome to my New Page! into the body of the Document window, and then save it into your Files list with
14
304
Hour 14
the filename newpage.html. (For more on creating and saving pages, please refer to Hour 3, “Creating a Web Page.”) Now we can finish setting up the Action.
, TO DO
To Do: Configuring the Goto Link Action To set up the Action that will load the new page into the browser window, complete the following steps: 1. Select the Action marker. 2. Open the Inspector palette. 3. From the Actions pop-up, choose Link, Goto Link (see Figure 14.12). FIGURE 14.12 Choose Link, Goto Link from the Action pop-up in the Inspector.
4. In the Link field, point and shoot at, browse to, or type the URL of the page that you want to load.
,
You should now save your page and preview the animation in a browser.
Animating Multiple Floating Boxes In this section, you will add four floating boxes to a newly created page and put an image in each one. Then you will assign the depth of visibility of each box and use the time track to have each one appear at a specified point in time. Start by making a new page, naming it fourboxes.html, and saving into the Root folder of your site.
Creating DHTML Animations
305
, TO DO
To Do: Add Four Floating Boxes to the Page and Set Their Attributes To add the multiple floating boxes to the page and set them up to work with the time track, complete the following steps: 1. Open the newly created page named fourboxes.html. 2. Open the Timeline Editor by clicking the Timeline button at the top right of the page. 3. Double-click the Floating Box icon in the Basic section of the Objects palette to add a floating box to the page. Repeat three more times so that you have four floating boxes on the page (see Figure 14.13). FIGURE 14.13 As you add additional floating boxes they will stack up on top of each other in the upper left of your page.
4. Open the Floating Box palette by selecting Window, Floating Boxes, or by pressing Command+4 (Mac) or Control+4 (Windows). 5. Click the right-facing arrow at the top left of the Floating Box palette to reveal the palette menu options (see Figure 14.14). FIGURE 14.14 The Floating Box palette menu options.
6. Select Floating Box Grid Settings from the palette menu options in the Floating Boxes palette. The Floating Box Grid Settings dialog box will appear.
,
7. Enable the check boxes next to Snap and Visible while dragging (see Figure 14.15). 8. Arrange the four floating boxes into a diamond pattern (see Figure 14.16). Notice that you can see the underlying grid as you drag the floating boxes, and that when you stop dragging, the floating box snaps into alignment with the gridlines.
14
Hour 14
,
306
FIGURE 14.15 The Floating Box Grid Settings dialog box.
FIGURE 14.16 Using the grid for alignment, drag the four floating boxes into a diamond pattern on the page.
, Open the Floating Box Grid settings once again and take a closer look at the options. Access the settings dialog box as you did in step 6, by selecting Floating Box Grid Settings from the Floating Box palette menu. • The underlying grid that the floating boxes will use for exact placement is partitioned into 16-pixel×16-pixel gridlines by default. To change the grid spacing, simply type the numbers you prefer into the Horizontal spacing and the Vertical spacing input fields in the Floating Box settings dialog box. • Enabling Snap means that floating boxes will snap to the gridlines, ensuring that you can line up boxes easily. The floating boxes will snap to the gridlines whether or not you have Visible While Dragging enabled. • Visible While Dragging means that the gridlines will become visible as you drag a floating box, enabling you to see the grid. • Prevent Overlapping keeps floating boxes from overlapping one another. If you intend to convert your layout from floating boxes to grids, use this option. Doing so will ensure that you don’t have any conflicts during the conversion. GoLive has automatically created a scene for you based on the steps you just completed. Notice that each floating box you have placed onto the page has its own time track in the Timeline Editor. Clicking a keyframe in a track selects the floating box that keyframe
Creating DHTML Animations
307
represents. In the next section, you set the depth and visibility of the floating boxes, and add keyframes to their time tracks so that one appears after the next when viewed in a browser.
Naming the floating boxes does not change the fact that numbers represent the floating boxes in the Timeline Editor. The numbers represent the order in which they were created. If you get confused simply click a keyframe and the floating box that correlates to the keyframe will then become selected.
An empty floating box won’t show up in a browser window, so before you go any further, you will drop a small image into each one. You can download the sample files used in this hour from www.golivein24.com. Click the Download link, and then choose Hour 14. After you have downloaded the image files, add them to your Site File. For this exercise, you will use the four image files named bam.gif, oof.gif, pow.gif, and wow.gif. Place one image into each of the four floating boxes.
, TO DO
To Do: Set the Visibility and Depth of the Floating Boxes To set the visibility and depth of the floating boxes on your page, complete the following steps: 1. Leave the keyframe in time track 1 as it is. 2. Select the first keyframe in the second, third, and fourth time tracks by dragging the mouse across them (see Figure 14.17). Press Option+drag (Mac) or Alt+drag (Windows) to make a copy of the keyframes, and then drop them at frame 5 on the time track (see Figure 14.18).
FIGURE 14.17 Drag across keyframes to select them.
14
,
By default, the frames per second in a new scene will be set to 15 frames per second. If you want the scene to play faster, increase the number of frames per second. To play a scene slower, reduce the number of frames per second.
Hour 14
,
308
FIGURE 14.18 Press Option+drag (Mac) or Alt+drag (Windows) to copy one or more keyframes.
3. Leave the keyframe in time track 2 as it is. 4. Drag the second keyframe in time track 3 to frame 10 on its time track. 5. Drag the second keyframe in time track 4 to frame 15 on its time track (see Figure 14.19). FIGURE 14.19 The new keyframes should appear at frames 5, 10, and 15 as shown here.
The Z-index, or stacking order, of floating boxes is determined by the number you type into the Depth field of the Floating Box Inspector. Also known as a Depth, this number determines how overlapping floating boxes will appear. If you have two floating boxes that overlap, and one is set to a depth of 5, whereas the other has a depth of 10, the one with the lower depth will appear beneath the one with the higher depth.
6. We will now change the stacking order, or Z-index of the floating boxes. Select the keyframe in time track 1 (see Figure 14.20). Set its Z-index to 5. Select the second keyframe in track 2, and set its Z-index to 10. Select the second keyframe in track 3 and set its Z-index to 15. Select the second keyframe in track 4 and set its Zindex to 20. This places the images in the following stacking order: • Floating box 1, Z-index 5, bottom of the stack • Floating box 2, Z-index 10, next highest in stack
,
• Floating box 3, Z-index 15, third highest in stack • Floating box 4, Z-index 20, top of the stack
309
,
Creating DHTML Animations
You could achieve the same order using 1, 2, 3, 4, but it is best to get into the habit of numbering by 5s. This way you have the ability to add new floating boxes in between existing ones later.
FIGURE 14.20 You set the Z-index (stacking order) of a floating box by typing a number into the Z-index field in the Inspector.
7. Select the first keyframe on time tracks 2, 3, and 4, and disable their visibility by deselecting the Visible check box in the Inspector (see Figure 14.21). The result will be that only the first image will be visible to the viewer when the page loads. Then, as each time track progresses to its second keyframe the visibility is toggled on, thus showing the previously invisible image. Notice that the keyframes that have been specified as invisible become dimmed in the Timeline Editor. At this point save your work and preview it in a browser to see the effect so far before completing the rest of the steps. FIGURE 14.21 A keyframe for a floating box that has been specified as invisible is dimmed in the time track.
,
14 Next you’ll take floating box 2, which is higher in the stacking order than 1, but lower than floating box 3 and 4, and move it around so that you can see how it appears to move under and over another image.
Hour 14
,
310
8. Control+click (Windows) or Command+click (Mac) in time track 2 at frame 25 to add a new keyframe at that point. 9. With the newly created keyframe selected, press the “Record” button in the Inspector. Drag floating box 3 over floating box 4, then up and over floating box 1, and finally over floating box 2, so that floating box 3 ends up to the right of floating box 2 (see Figure 14.22). Switch to the Preview tab to see the animation so far.
FIGURE 14.22 Drag floating box 2 in a zig-zag pattern over the other three floating boxes.
10. Select the last keyframe of the recording you just made in time track 2. In the Inspector, change the Z-index of the floating box from 10 to 25. This will cause floating box 2 to rise to the top of the stacking order. 11. Press the “Record” button in the Inspector again. This time, drag floating box 3 back over floating box 2 ending with floating box 3 in its original place (see Figure 14.23). Note that we changed the stacking order as part of the animation!
,
FIGURE 14.23 Drag floating box 2 back to its original position.
To ensure that floating box 2 is positioned exactly the same as it was when you started, click the first keyframe in time track 2. Note the numbers in the Left and
,
Creating DHTML Animations
311
,
Top fields in the Inspector. Use the same coordinates for the last keyframe in time track 2. You can now save your page and preview the animation in a browser. Congratulations! You are ready to get creative and build your own DHTML pages in GoLive.
Triggering a Scene to Play You might want your scene to play only when the viewer triggers it. In this next section we will create a simple action that will only occur when the mouse clicks.
, TO DO
To Do: Triggering a Scene to Play In this exercise we will create an animation that will occur only when triggered by the viewer. When the viewer clicks on a contact link, a phone will appear to slide out onto the page. The image of the phone is included in the Hour 14 images that can be downloaded from www.golivein24.com. 1. Create a new page and place a floating box on it. 2. Place the image of the phone inside of the floating box. 3. Select the floating box by crossing over the side, and then click when you see the sideways mitt. Keep in mind that you must deselect the image by clicking outside of the floating box before you are able to select the box. From the Toolbar select the align center button, as shown in Figure 14.24. FIGURE 14.24 Choose to align the floating box to the center of the page using the Toolbar.
4. Open the Timeline editor and select the first and only keyframe for the floating box.
,
5. In the inspector type these coordinates, Left -200 and top 15. The floating box is now off the page. 6. The next thing that we are going to do is set up the floating box to slide out on to the page. Command+click (Macintosh) or Control+Click (Windows) to create a keyframe at 15 (see Figure 14.25).
14
Hour 14
,
312
FIGURE 14.25 Add a keyframe to the time line at 15 by Command+clicking (Mac) or Control+clicking (Windows) on the keyframe track.
7. While the second keyframe is still selected, click on the Align Center button in the toolbar. Then test it out in the browser. The floating box should slide out. Next, we will turn off the Autoplay and have a mouse-over trigger it. 8. Turn off the Autoplay by clicking on the Autoplay button, as shown in Figure 14.26. Then, test it out in your browser. If you did this right nothing will happen! FIGURE 14.26 Scenes will automatically start playing as a default. Turn off the Autoplay for this animation so that we can set up an action to trigger it.
9. From the scene pop-up window select rename scene. We will give this a more logical name like contact. 10. Slide the Current Time Marker (CTM) back to the beginning of the timeline to make the trigger. Anywhere on your page, create another floating box and type the words Contact Us into it.
,
If you want the floating box and its contents to be visible on the page, make sure that when you create the CTM it’s at the beginning of the timeline. Otherwise, it will appear at the time that the CTM is located. To correct this, click on the keyframe where the floating is not visible and check the visibility box in the Floating Box Inspector.
11. Select the Text for the first step in making an Action, creating a link, by pressing Command+L (Mac) or Control+L (Windows) or just click the link in the Toolbar.
,
Creating DHTML Animations
313
Replace the Empty Reference in the Inspector with a # sign, as shown in Figure 14.27. 12. From the Action palette, in the Window menu, select the Mouse Enter Event and click the New Action icon (dog-eared page). Select the Play Scene Action from the Multimedia set, as shown in Figure 14.27.
FIGURE 14.27 Have the viewer trigger the scene to play using a multimedia Action.
,
13. Test this Action in a browser. When the text Contact mation will slide out to the center of the page.
Us!
is crossed over, the ani-
Summary You covered a lot of territory in this chapter. First, you learned how to record a simple animation by using a floating box and the Record button. Then, after viewing your recorded animation in the Timeline Editor, you learned how to add an Action into the Action track, as well as how to trigger an animation with an Action. You also discovered how to work with multiple floating boxes on a page, and how to use the Timeline Editor to make them appear at a certain point in the scene. Finally, you learned how to make the floating boxes visible or invisible by setting the visibility attribute in the Inspector.
Q&A Q I created an animation that I want to play once and then stop. For some reason, when I preview it in the browser, it keeps playing over and over. How do I stop it? A You must have enabled the Loop button in the Timeline Editor. Simply open the Timeline Editor for your page and click the Loop button again, which will disable it.
14
314
Hour 14
Q I’m trying to drag a floating box so that it partially covers another one. As soon as I let go of it, it pops back to where it was! How can I make it stay put? A Open the Floating Box palette, and choose Floating Box Grid Settings from the palette menu. Then, in the Floating Box Grid Settings dialog box, deselect Prevent Overlapping. Q I’ve added an Action to the Action time track, but when I open the Actions palette, everything is grayed out. Why? A When using an Action in the Action track of the Timeline Editor, you set up the Action in the Inspector, rather than in the Actions palette. Q I just spent hours creating an animation and it won’t play! Why not? A The Autoplay button in the Timeline Editor is probably set to off. Click it to turn it back on.
Quiz 1. What is the term for describing the depth of a floating box? a. Stack-index b. D-index c. Z-index d. Pitch 2. What does fps stand for? a. Format page source b. File page size c. Fixed point stage d. Frames per second 3. The left and top positions designated for a floating box in the Inspector are based on that floating box’s position relative to what other object? a. The left and top of the page b. The left and top of another floating box c. The left and top of the grid d. None of the above
Creating DHTML Animations
315
Quiz Answers 1. c. Z-index describes the depth of a floating box. 2. d. fps stands for frames per second. 3. a. The left and top positions designated for a floating box in the Inspector are based on that floating box’s position relative to the left and top of the page.
Exercises The following exercises are designed to show you some of the creative effects you can generate using DHTML, and to familiarize you with a few of the many ways you can utilize the GoLive Timeline and Actions to create animations and multimedia effects. 1. Create a new page. Record a simple animation using one floating box with an image or a few words in it. Select New Scene from the Scenes pop-up in the Timeline Editor. Name the scene Scene 2. Record a second simple animation using a new floating box with an image or a few words in it. Now go back to the first scene by selecting it from the list in the Scenes pop-up. Add an Action midway through the time track of the first scene. From the Actions pop-up in the Inspector, select Multimedia, Play Scene. Select Scene 2 from the pop-up list. Now save your page and preview it in a browser. 2. Add a floating box to a new page and name it Menu One. Inside the floating box, type Item One. Add a second floating box to the page and name it Menu Two. Inside the second floating box, type Item Two. Go to the Inspector and disable the visibility of this floating box so that it becomes invisible. Now, select the words Item One in the first floating box, and make them a link. Change the “(empty reference)” in the URL field to the # sign. Open the Actions palette. From the pop-up list, choose Multimedia, ShowHide. From the pop-up, choose Menu Two. Now, when the page is loaded, the only thing shown will be the linked words: Item One. When clicked, the other floating box will appear and show the words Item Two. The words in the second box can be linked to a page if you choose.
14
HOUR
15
Using Plug-ins and Multimedia Content Plug-in technology opens up a whole new avenue for design and interactivity of Web pages. In this hour, we discuss how you can place multimedia clips into your GoLive page. GoLive has taken away the confusion of placing multimedia clips on your page by providing specific Plug-in icons with predetermined MIME (Multipurpose Internet Mail Extensions) settings. Defining the correct MIME settings enables browsers to interpret files that require plug-in technology. In this hour, you’ll learn about • Deciding whether plug-in technology is appropriate for your Web site • Adding a QuickTime movie to your Web page • Adding Flash content to your Web page • Adding RealVideo content to your Web page • Adding SVG content to your Web page • Adding generic plug-in content to your Web page
318
Hour 15
Deciding Whether Plug-in Technology Is Appropriate for Your Web Site Adobe GoLive supports a variety of third-party plug-ins that enable you to add movies, animations, music, and other multimedia files to your site. We have all seen them; fantastic pages that animate, play music, and perform like a Broadway show. At one time or another, we have also seen the error stating that we are missing the plug-in required to view a page. A browser plug-in is a free program that adds functionality to a Web browser. For example, most browsers do not support movie playing until a plug-in is installed into the browser’s Plug-ins folder. Even though browser plug-ins are free, building a library of them can take time and effort. When designing a site, think about your viewers: Are they a technology-savvy audience or barely computer literate? For this lesson, we will consider our audience savvy and take advantage of the multimedia features that can be added to a GoLive page. In this hour, we will prepare GoLive to recognize plug-ins, and then insert files that use the QuickTime, Flash, RealVideo, and SVG plug-ins. If you do not have these plug-ins in your Web browser’s Plug-ins folder, download them from the URLs listed in Table 15.1. Note that with a full installation of GoLive, the SVG plug-in is already loaded, and the QuickTime plug-in is included on the CD.
Another source for the latest plug-ins is http://www.plugins.com.
TABLE 15.1
Locating Required Plug-ins
Plug-in Name
Extension
URL
QuickTime
.mov
www.apple.com/quicktime/
Shockwave Flash
.swf
www.macromedia.com/shockwave
RealPlayer Basic
.rm, .ram
www.real.com/player/
SVG
.svg
www.adobe.com/svg/main.html
You can also use the URLs in Table 15.1 to download sample files for practice purposes.
Using Plug-ins and Multimedia Content
How to Set Up GoLive to Preview Your Plug-in Content When it is installed, GoLive is prepared to function with plug-ins. In fact, the icons are present in the Basic section of the Objects palette. Because of constant updates and changes in plug-in technology, GoLive installs only the SVG plug-in. For GoLive to recognize additional plug-ins, they must be placed in the Plug-ins folder of the GoLive application folder, as shown in Figure 15.1. If you already have the plug-ins loaded in your Web browser, you can create an alias (Mac) or a shortcut (Windows).
Create an alias on the Macintosh operating system by selecting the plug-in and choosing Make Alias from the File menu. Relocate the Alias icon to the GoLive Plug-ins folder. Create a shortcut using the Windows operating system by right-clicking and dragging the plug-in, and selecting Create Shortcut when you reach the GoLive Plug-ins folder.
FIGURE 15.1 If you want additional multimedia capabilities, place plug-ins in GoLive’s Plug-ins folder.
319
15
320
Hour 15
Adding a QuickTime Movie to Your Web Page A QuickTime movie can be an effective way to demonstrate a product, show real estate, or see a movie trailer. Its uses are virtually unlimited and as bandwidth increases, we will see QuickTime movies used in more creative ways. Embedding a QuickTime movie into your Web page is rather simple, and GoLive even offers QuickTime editing features that enable you to customize your movie. We will discuss those features in Hour 16, “Using the QuickTime Editor.”
, TO DO
To Do: Adding a Movie to Your Web Page Before we start, you must have a .mov file ready to place on a page. Sample QuickTime movie files are located at http://www.golivein24.com. 1. Open a page and drag the QuickTime icon from the Basic section of the Objects palette to the page as shown in Figure 15.2.
FIGURE 15.2 Use the QuickTime icon to place .mov files on your page.
2. Select the Basic tab of the Plug-in Inspector and click the Browse button to locate a .mov file, as shown in Figure 15.3.
,
FIGURE 15.3 The Basic tab has preconfigured settings for QuickTime movies.
Note that a MIME type is preassigned based on the plug-in selected. The MIME type determines the rest of the basic settings. Remember that selecting the correct
,
Using Plug-ins and Multimedia Content
MIME type helps the browser interpret the plug-in file correctly. If you choose the correct Plug-in icon, you should not need to change anything on the Basic and Attribs tabs except perhaps the size. 3. Select the More tab if advanced scripting requires the movie to be named. Adjust for extra space or padding around the movie by using the Vspace or Hspace field. 4. Choose the QuickTime tab of the Inspector as shown in Figure 15.4.
FIGURE 15.4 Controls to customize how the movie interfaces with the viewer are in the QuickTime tab.
Customize the QuickTime movie with settings available in the QuickTime tab: • Show Controller—Check this box to enable visitors to view playback controls.
If you choose to show the controller, you must add 16 pixels to the height of the movie back on the Basic tab. Otherwise, the controller will be cut off.
• BGColor—Set a background color by dragging a color from the Preview pane of the Color palette into the BGcolor’s Color field. The background will show up if the movie does not fill the specified size. • Cache—Check this box to enable caching through the browser when the movie is played back.
,
When a file is cached, it is stored temporarily in the memory of your computer, enabling the viewer to play back the movie without downloading it again.
321
15
Hour 15
,
322
• Volume—Type a value from 0 (mute) to 100 (full volume) to set the sound volume for the movie. • Scale—Adjust a movie’s size by selecting a scale amount. A setting of 2, for instance, makes the movie twice the size. • Autoplay—Check this to have the movie play automatically when the page loads. You can uncheck it if you are working with a script that will play the movie when requested. • Loop—Be careful with this one! Check this box to play your movie on an endless loop. • Palindrome—Palindrome will not only play your movie forward, but also backward in an endless loop. Loop must be checked to activate the Palindrome check box. • Play Every Frame—This option will play all frames of a movie. This can cause playback problems with QuickTime movies where the viewer gets a message that the movie could not download properly. • Link—Check the Link check box to reference a plug-in file. Read about the Target field for important information. • Target—Targets are discussed in detail in Hour 11, “Designing Pages with Frames.” When defining a link, you can specify a location in which to load a movie. • Open Movie—When this option is enabled, the movie will open in the QuickTime movie viewer.
,
5. After selections for options are made, test the movie in your Web browser.
Adding Flash Content to Your Web Page Flash (.swf) files are one of the hottest rages in Web design. These vector-based animations offer viewer interaction never before available. Flash files include Flashbased cartoons, interactive interfaces, and information graphics. Flash files can be generated out of several applications, including Macromedia Flash, Adobe Illustrator 9 and 10, and Adobe LiveMotion. You can also find demonstration files at http://www.golivein24.com.
Using Plug-ins and Multimedia Content
323
, TO DO
To Do: Embedding a Flash File in a Web Page In this lesson, we use the Flash object from the Basic section of the Objects palette to place a Flash (.swf) file onto our GoLive page. 1. Open a page and drag the Flash icon from the Basic section of the Objects palette to the page, as shown in Figure 15.5.
FIGURE 15.5 The Flash icon in the Objects palette is preconfigured for .swf files.
2. Select the Basic tab of the Plug-in Inspector and click the Browse button to locate an .swf file. The MIME type field has been predetermined. You should not need to change anything on the Basic and Attributes tabs except for the size. 3. Select the More tab. In the More tab, Page and Code values are predefined in the Plug-in Inspector. When a Flash plug-in is selected, these values are already assigned and will prompt the viewer to a download area if he does not have the Flash Shockwave plug-in installed. Also, adjust the Vspace and Hspace values in the More tab. 4. Choose the SWF tab as shown in Figure 15.6.
,
FIGURE 15.6 Options specific to Flash files are in the SWF tab of the Inspector.
15
Hour 15
,
324
Customize Flash file options on the SWF tab: • Autostart—Check to have the Flash animation play as soon as the page is loaded. • Loop—Have the movie play in an endless loop. • Quality—Choose an appropriate setting based on the quality you want to achieve. There are noticeable differences between the Quality settings, so make sure that you test the final presentation and the time it takes to download. • Scale—Adjust the size of the Flash file by selecting a scale amount. A setting of 2, for instance, makes the Flash file twice the size. You can also choose Exact Fit and Noborder from the pop-up menu.
,
• Plug-in—If you have loaded the plug-in to GoLive’s Plug-ins folder, you can preview the Flash file in GoLive.
Adding RealVideo Content to Your Web Page RealVideo is a streaming technology developed by Real Networks for transmitting live video over the Internet. In this section, we build a GoLive Web page that uses a RealVideo clip. If you do not have any .rm files, locate demos at www.real.com.
, TO DO
To Do: Adding a RealVideo Object to a Web Page In this lesson, we add a RealVideo object to our GoLive page. Sample Real files can be found at http://www.golivein24.com. 1. Open a GoLive page. 2. Drag the Real icon from the Basic section of the Objects palette to your page as shown in Figure 15.7.
,
FIGURE 15.7 Drag the Real object to the GoLive page to embed a RealVideo file.
3. Select the Basic tab of the Plug-in Inspector and click the Browse button to locate the RealVideo file that you want to include on the page.
,
Using Plug-ins and Multimedia Content
The Basic tab should require no additional changes except for size. 4. Select the More tab as shown in Figure 15.8.
FIGURE 15.8 Additional options are available on the More tab of the Real Plug-in Inspector.
• Page—The Page text box in the More tab can be set up with an assigned page that gives a destination link for installation instructions. This link essentially directs the viewer to a Web site where he can download the proper plug-in. • Code—The Code check box is used to assign a destination link for any necessary code base. This control, like many others in the plug-ins, should be used only if you are familiar with the plug-in applications and what code base is needed. • Vspace and Hspace—Set these vertical and horizontal spacing values in the More tab. • Is Hidden—Check Is Hidden if this video is not to show up until triggered by an action or other script. 5. Select the Real tab as shown in Figure 15.9. Customize the Real file by selecting options from the Real tab of the Plug-in Inspector: • Autostart—Choose Autostart to have the RealVideo clip start when the page loads. • No Labels—Check No Labels to suppress the display of information such as title, author, and copyright. • Controls—Select controls for the RealVideo clip:
,
325
Note that you can assign only one control to each Real icon. In other words, to set up Play and Stop controls, you would need two Real icons. By using consoles, you can create unique sets of buttons arranged in a table.
15
Hour 15
,
326
FIGURE 15.9 The Real tab of the Inspector enables you to customize the viewer controls.
If Default is selected, the display will contain Play, Pause, Stop, Forward, and Rewind buttons, and Position and Volume controls. • Using the Console pop-up menu (see Figure 15.10), you can choose to group several Real controls to work together with a single file. For instance, you can create an HTML table and drag multiple Real object icons into the cells of the table. You can use the Control pop-up menu to assign one Real Object icon to represent the Image window, another to the Play button, and another to a volume Slider. By typing a unique name or assigning one of the predetermined console names (_master or Unique) to each Real icon, the controls will act as a unit, thereby enabling you to customize the layout and the controls the viewer will see. FIGURE 15.10 Create a table with your own set of viewer controls by assigning a console name.
,
• Plug-in—View the Real file in GoLive by using the Plug-in button. You must have the plug-in loaded correctly for this to work.
Using Plug-ins and Multimedia Content
Adding SVG Content to Your Web Page SVG (Scalable Vector Graphics) is an open-standard vector graphics language that, by using plain-text commands (XML), enables you to design Web pages with high-resolution graphics that can contain complex elements such as gradients, animation, and filter effects. SVG technology is a new standard and a plug-in is required to play the file. To learn more about SVG technology, check out http://www.adobe.com/svg/main.html, http://www.sun.com/software/xml/developers/svg/, or http://www.w3.org/ Graphics/SVG/Overview.html. You can also visit http://www.golivein24.com for demo .svg files to use in this section.
If you create vector art using Illustrator 9 or 10, you can generate your own SVG files from the Export menu.
, TO DO
To Do: Placing an SVG Image on Your Web Page GoLive provides an SVG icon on the Objects palette that is used specifically for placing SVG files. 1. Open a GoLive page. 2. Select the SVG icon, shown in Figure 15.11, and drag it to your page.
FIGURE 15.11 The SVG icon is preconfigured for the Scalable Vector Graphics format.
3. Using the Browse button on the Basic tab, select an .svg file. 4. In the More tab, Page and Code values can be predefined to prompt the viewer to a download area if she does not have the SVG plug-in installed. The More tab also enables you to set up additional space around the SVG file by setting the Vspace and Hspace values. 5. Click the SVG tab.
,
6. You can link to only an uncompressed SVG file. If you are familiar with creating SVG files and want to link to a compressed SVG file, make sure that you export both a compressed and uncompressed file and save them in the same location.
327
15
328
Hour 15
Adding Generic Plug-in Content to Your Web Page The generic plug-in icon shown in Figure 15.12 enables you to load files that require plug-ins not supported by GoLive. FIGURE 15.12 With the proper knowledge and the generic plug-in, you can configure plug-ins not normally supported by GoLive.
Unlike the QuickTime, Flash, Real, and SVG icons, a generic plug-in icon is not configured in the Inspector. You must be familiar with the necessary settings to get the plug-in to work correctly. If you are an advanced user and you know the proper MIME type and extension for the plug-in, you can add the plug-in through the plug-ins Preferences dialog of GoLive as shown in Figure 15.13. If you enter a MIME type and extension that GoLive already supports with a plug-in, that plug-in will appear in the top text box. FIGURE 15.13 You can configure additional plug-ins by using GoLive’s plug-in Preferences dialog, which is located in the Edit menu.
Delete a file type
Assign a new file type to a plug-in
Using Plug-ins and Multimedia Content
Summary At the conclusion of this hour, you have configured GoLive to accept QuickTime, Flash, Real, and SVG files. Any additional plug-in requirements can be manually defined through the GoLive plug-in Preferences dialog (select Preferences under the Edit menu). You are now familiar with placing plug-in files into GoLive and the options that are available for each type. Keep in mind that, as with any other Web pages you design, you should verify that the pages work on various platforms and browsers. Also, keep an open ear for comments from viewers. The ultimate goal is to provide them with the information that they are looking for without causing unnecessary complications.
Q&A Q Can I help my viewers locate plug-ins that are necessary for my page to open? A Yes, by selecting the More tab of the Plug-in Inspector, you can define a page to which the viewer will be directed if he does not have the plug-in installed. Q Why don’t I get plug-in options in GoLive? A Make sure that you have installed copies or shortcuts of your plug-ins into the Plug-ins folder of GoLive. Q Can I change the viewer controls when I use QuickTime movies? A Yes. If you select the QuickTime icon, a QuickTime tab enables you to choose whether you want controls available to the viewer. Q How can I get several controls to work together when using RealVideo? A You can group several Real icon controls by entering the same name in the Console text box of the Real tab. Find more information on the Web at http://www.realnetworks.com.
Quiz 1. Why would you choose not to use plug-ins on your Web page? a. They carry viruses. b. They make your page file size larger. c. Not all viewers will have them loaded.
329
15
330
Hour 15
2. Why would you not be able to preview a .mov in GoLive? a. The RealVideo plug-in is not installed in GoLive. b. The QuickTime plug-in is not installed in GoLive. c. The SVG plug-in is not installed in GoLive. 3. When would you need to know and enter the MIME settings into GoLive’s plug-in Preferences dialog? a. Every time that a plug-in is used. b. When a plug-in is added to the GoLive Plug-ins folder. c. When a plug-in is not supported by GoLive. 4. What will happen if I use a Flash file on my page and someone does not have the Flash plug-in loaded in her browser? a. The viewer will be referred to a page specified on the Inspector to download the plug-in. b. The user’s machine will crash. c. The page won’t load. 5. What is SVG? a. A plug-in technology that uses the Flash plug-in. b. An open-standard vector graphics language that, by using plain-text commands, enables you to design high-resolution Web pages. c. A streaming video plug-in used for live telecasts and radio programs on the Web.
Quiz Answers 1. c. You might choose not to use plug-ins because not all viewers will have them loaded. 2. b. You would not be able to preview a .mov in GoLive if the QuickTime plug-in is not installed in GoLive. 3. c. You need to know and enter the MIME settings into GoLive’s plug-in Preferences dialog when a plug-in is not supported by GoLive. 4. a. If I use a Flash file on my page and a visitor does not have the Flash plug-in loaded, the viewer will be referred to a page specified on the Inspector to download the plug-in. 5. b. SVG is an open-standard vector graphics language that, by using plain-text commands, enables you to design high-resolution Web pages.
Using Plug-ins and Multimedia Content
Exercises Now that you have experienced using the plug-in capabilities in GoLive try some exercises on your own. 1. Create a page and place a QuickTime movie in it. Experiment with the different looks and volumes that you can achieve on the QuickTime tab. 2. Build an HTML table using several Real icons, each with its own controls. Make one a Stop button, another a Play button, and another an image window. Group all the controls together by identically naming the consoles in each Inspector. 3. Place a .swf file into GoLive and experiment with different quality settings.
331
15
PART V Using Advanced Features Hour 16 Using the QuickTime Editor 17 Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects 18 Formatting Text with Cascading Style Sheets 19 Controlling How GoLive Writes HTML 20 Creating a Site Diagram
HOUR
16
Using the QuickTime Editor GoLive 6 includes a powerful built-in video editor that enables you not only to create new movies but also to combine existing movies with transitions, filters, audio, text, and animation. GoLive also offers compression capabilities to optimize movies for the Web. In this hour’s lesson, you learn how to open and edit movie files in GoLive using the QuickTime Editor and the QuickTime section of the Objects palette. If you have experience in video editing, the TimeLine will be familiar to you. Don’t worry if this is your first introduction to using a time-based feature; think of this hour as an opportunity to gain an understanding of how multimedia applications work. Before delving into this section with plans to make a site packed with lots of movies, consider your viewers’ wants and needs. Design your pages with options to download movie files instead of surprising the viewers with long
336
Hour 16
download times. Increased bandwidth is improving download times of movies, but not everybody can take advantage of the latest technology. In this hour, you’ll learn about the following: • Making sure that your computer is ready for QuickTime • Understanding the QuickTime Editor interface • Adding additional Sound and Video tracks to your QuickTime movie • Making adjustments to the tracks on the Timeline • Compressing video for the Web
Making Sure That Your Computer Is Ready for QuickTime Before starting, you need to make sure that the QuickTime plug-in is installed. To see whether QuickTime is loaded, choose Edit, Preferences from your menu. Select Plugins. If QuickTime is installed, it will be recognized as the plug-in used for QuickTime movies, as shown in Figure 16.1. FIGURE 16.1 Make sure that QuickTime is installed by checking the Plugins preferences.
If you need more information about installing the QuickTime plug-in onto GoLive, refer back to Hour 15, “Using Plug-ins and Multimedia Content.”
, TO DO
Using the QuickTime Editor
To Do: Previewing a QuickTime Movie in GoLive Have a .mov file ready for this session. You can find sample movies to download at http://www.golivein24.com/. 1. Drag the QuickTime icon from the QuickTime section of the Objects palette onto your page as shown in Figure 16.2.
FIGURE 16.2 Use the QuickTime icon to load a movie into your GoLive page.
2. Use the Browse button on the Inspector to locate a QuickTime movie. 3. Preview the movie by clicking the Plug-in button on the Basic Inspector, shown in Figure 16.3. When you are finished previewing the movie, make sure that you deselect the Preview button by clicking it again. FIGURE 16.3 Movies can be previewed in GoLive by clicking on the Plug-in button in the Inspector.
,
Understanding the QuickTime Editor Interface Now that you can preview a movie in GoLive, let’s take a step further and investigate the QuickTime Editor.
To Do: Opening a Movie in the QuickTime Editor
, TO DO
337
Many people discover the QuickTime section of the Objects palette but do not know how to use the objects. This is because the objects contained on this palette can be dragged onto a QuickTime timeline only. In this lesson, you will open a movie file to reveal the timeline and progress into lessons using the QuickTime objects.
16
Hour 16
,
338
1. Locate a placed QuickTime movie on your page and double-click it to open the movie file. Note that this opens the movie within GoLive. Information about the movie, such as size and control settings, can then be found on the Movie Inspector, shown in Figure 16.4.
FIGURE 16.4 The Movie Inspector provides basic information about the movie.
2. Choose Movie, Show Timeline from the menu. 3. Notice that there is a track for each video or sound in the movie. The movie in Figure 16.5 has a Video track and a Sound track.
,
FIGURE 16.5 The movie in this example has both a Video and a Sound track.
4. Select the Time cursor shown in Figure 16.6 and drag it across to the right. Notice how you can move the cursor back and forth and watch the movement of the Video track. You should frequently check your sequence of events by dragging the Time cursor.
339
,
Using the QuickTime Editor
FIGURE 16.6 Drag the Time cursor to move forward or backward in a movie.
,
16 The Timeline Defined What you are looking at when the Timeline is open is a video-editing tool available within GoLive. You will be using many of the tools shown in Figure 16.7. Selection and Editing Sample Tool tools
Marker Time pop-up cursor
Time ruler
FIGURE 16.7 The Timeline of a QuickTime movie as it appears when open in GoLive.
Track information Time scale slider Playback controls Palindrome control Loop Show/Hide Track Information
About Tracks A track is a data structure that represents a single stream of information. A track can include sound, video, filters, and other data. Each track runs independently of the others in a timeline, creating a total synchronized QuickTime composition. A QuickTime movie is made up of one or more tracks. In GoLive you have the capability of adding the tracks shown in Figure 16.8, which are located in the QuickTime sections of the Objects palette.
340
Hour 16
FIGURE 16.8 You can add additional tracks from the QuickTime section of the Objects palette.
Movie—This feature allows you to load a child movie (audio, video, QTVR, text, and so forth) inside the main parent movie. Sprites can be used to load and unload them. A good example would be a Jukebox. Video—This track contains video; you can add multiple video tracks to a movie. Color—This track gives you the capability to add a color or blend of colors to a movie. Picture—The Picture track is used to present “stills,” like a slideshow, as part of your QuickTime movie. Generic Filter—This includes the generic QuickTime filters such as Cloud, Fire, or Ripple. One-Source Filter—One-source filters are applied to a single track only and change its visual presentation. This filter needs one Video Source track. Two-Source Filter—Two-source filters, or transitions, can fade out one track and into another. This filter needs two Video Source tracks. Examples include Cross Fade, Explode, Implode, and Gradient Wipe. Three-Source Filter Track—Much like the two-source filter track, this feature allows you to create transitions between three source tracks. MPEG—Use this track to place MPEG files into your movie. This is a Macintoshonly feature. Sprite—A Sprite track contains image objects, which you can apply actions to, such as setting individual mouse states (main, over, click inside, and click outside). SWF—Insert a Shockwave Flash file (.swf) into a movie with this track. 3D Track—Import QuickDraw 3D files by using the 3D track. HREF Track—The HREF track enables the designer to link to URLs either by viewer interaction or with time. This can be combined with a Text track or even set up so that a movie appears in one frame while changing the page displayed in another frame. Chapter Track—The Chapter track enables the designer to divide the movies into logical segments.
Using the QuickTime Editor
341
The QuickTime plug-in displays the Chapter track as a pop-up menu in the standard controller of the movie. Text Track—Text tracks display text within a movie. This could be used to add subtitles to movies, or to add messages to your movie. You can also link the text to a URL so that when visitors click the word or phrase, a Web page will appear. Sound—Several formats for sound are supported in GoLive, including AIFF/AIFC, System 7 Sound, WAV, .mp3 files, and Sound Designer II, as well as standard MIDI files. Midi—Use this track to place MIDI files into your movie. Instrument Track—Use the Instrument track to select an instrument—an action can then be created using text or a sprite to play a note upon clicking the mouse, pressing Enter, or performing another event. Streaming Track—Adobe GoLive enables you to export movies as Real-Time Streaming Protocol (RTSP) movies for use on an RTSP-dedicated server. Folder Track—As you add tracks you can keep organized by using a Folder track. Using this track, you can organize tracks into groups. For example, you can group together all the Video, Pictures, or Sound tracks.
To create a slideshow, choose New, Special, QuickTime Movie from the File menu. Use the Image tab of the Picture Track Inspector to import several images. The default is to play back in order one second apart from each other creating the slideshow. Adjustments to the time can be set in the Inspector. Test the playback in GoLive by using the controller at the bottom of the Movie window.
To help you understand how QuickTime tracks work, you will add additional Video, Filter, and Sound tracks to a movie’s timeline (see Figure 16.9). The goal is that when the concept of the timeline is clear, you will feel comfortable taking advantage of the other QuickTime features available in GoLive. FIGURE 16.9 The timeline shows the tracks that are associated with the movie.
16
342
Hour 16
Adding Additional Sound and Video Tracks to Your QuickTime Movie Using the QuickTime section of the Objects palette, you can import other Videos tracks. An additional video track could include the first video track of another movie file or an image file. Video tracks can also be copied and pasted from one movie timeline to another.
, TO DO
To Do: Adding a Video Track into Your Movie In this lesson, you add a video track to an existing movie. Using this feature, you can combine many small clips or even create a slideshow effect. Have two movie files ready for this lesson. Note that sample movies can be found at http://www.golivein24.com. 1. Using the Basic section of the Objects palette, drag the QuickTime plug-in onto your GoLive page. 2. From the Inspector, browse to locate a QuickTime movie. 3. Double-click the movie to open it in GoLive. 4. From the Movie menu, select Show Timeline Editor as shown in Figure 16.10. FIGURE 16.10 To edit a QuickTime movie in GoLive, choose Show Timeline Editor from the Movie menu.
5. Select the QuickTime button of the Objects palette. 6. Drag the video object to an empty track as shown in Figure 16.11.
,
FIGURE 16.11 To load additional Video tracks, drag the video object from the Objects palette.
,
Using the QuickTime Editor
343
,
7. From the Inspector, browse to select a file. Remember that GoLive will take the first Video track of another movie, or an image file. If you select a file that is not compatible as a Video track, the Video track that you placed will disappear from your timeline.
Adding Sound to a Movie Adding sound can improve the impact a movie has on viewers and varies in its usage. You can use sound to add narration or add mood by using music.
, TO DO
To Do: Adding a Sound or Music Track to a Movie In this lesson, you add sound to an existing movie. If you do not have an appropriate sound file, you can locate one at http://www.golivein24.com/. 1. Place a movie on a GoLive page, double-click it to open the movie, and choose Movie, Show Timeline Editor from the menu. 2. Select the QuickTime button of the Objects palette. 3. Select the Sound icon as shown in Figure 16.12, and drag it into the Timeline window. FIGURE 16.12 To add sound to a Movie file, use the Sound icon from the QuickTime section of the Objects palette.
If you want to import a music file (MIDI), choose the Music icon and drag it onto the Movie Timeline as shown in Figure 16.13.
,
FIGURE 16.13 The Music icon supports standard MIDI files.
16
Hour 16
,
344
,
4. Use the Browse button on the Inspector to locate a sound or music file. GoLive supports AIFF/AIFC, System 7 Sound, WAV, .mp3 files, Sound Designer II, as well as standard MIDI files.
Making Adjustments to the Tracks on the Timeline After you have added tracks, you have options that differ depending upon the track selected. Most include name, setting start time, and duration time.
Naming a Track Name a track by selecting it and typing a name in the Title text box of the Inspector.
Adjusting the Start Time The start time of any track can be set by one of two methods. You can select the track in the timeline and drag it to a new start point as shown in Figure 16.14, or you can type in a new start time in the Track Inspector. FIGURE 16.14 Position the entire track on the timeline to set a start time.
Adjusting the Duration Time As with the start time, the duration time of a track can also be set in the timeline by selecting the track and expanding or shrinking the track (see Figure 16.15). Typing a value in the Track Inspector can also set the duration time.
Just because you can shorten or lengthen the duration time of a Sound or Video track does not mean that you are extending the file. The QuickTime
Using the QuickTime Editor
345
Editor changes the rate of the sound or video file to adapt to the new size. This could lead to some interesting, but possibly unexpected, results.
FIGURE 16.15 Set the duration of a track either by typing a value in the Track Inspector or expanding/shrinking the track in the timeline.
16
Working with Sample Tracks This section covers several steps to create a transition from one Video track to another. It will give you the opportunity to see how more complex tracks work and how to use the Sample tools. Sample tracks are used for filters that require more information than can be determined in one track alone. For instance, if you choose a Filter track, a Sample track determines which filter you want to apply to the movie, the duration of the filter, and how the track blends in with the other tracks. Sample tracks give you the opportunity to run a movie and have transitions from one track, as well as to apply QuickTime effects such as Fire and Ripple to a movie file. The Sample tools shown in Figure 16.16 are used to create, divide, glue, and delete Sample tracks. You can use these tools in the Filter track later in this hour’s lesson. Create Sample Glue Samples
FIGURE 16.16 Use the Sample tools to add and edit Sample tracks.
Swap Samples Move Samples
Delete Sample Divide Sample Selection and Editing Tool
346
Hour 16
, TO DO
To Do: Creating a Transition Between Two Video Tracks In this lesson, you take two separate movies and incorporate them into one longer movie. Using the two-source Filter track, you create a transition between the end of the first movie and the start of the next. Find movies to use for this lesson at http://www.golivein24.com/. For this lesson, I refer to two movies that are included on the site: space_one.mov and space_two.mov. 1. Open the movie named space_one.mov in GoLive, and reveal the movie’s timeline by selecting Show Timeline Editor from the Movie menu. Rename the Video track in the Inspector movie1. 2. From the QuickTime section of the Objects palette, drag the Video icon to the Timeline window to add an additional Video track. 3. Use the Browse button on the Video Track Inspector to locate the movie named space_two.mov. Rename the imported Video track movie2. 4. Position the start time of the second Video track toward the end of the first Video track. Leave a little overlap for the transition as shown in Figure 16.17. FIGURE 16.17 Position the second Video track to start close to the end of the first Video track.
5. From the Objects palette, select and drag the Two-Source Filter icon to the Timeline window as shown in Figure 16.18.
,
FIGURE 16.18 For transitions from one Video track to another use the TwoSource Filter icon.
6. In the Two-Source Filter Track Inspector, select movie1 for Source A and movie2 for Source B as shown in Figure 16.19.
347
,
Using the QuickTime Editor
FIGURE 16.19 In the Two-Source Filter Inspector, select Video tracks to create a transition between Source A and Source B.
7. Now you will edit the Sample track in the Filter track. Start by clicking on the arrow to the left of the Two-Source Filter track as shown in Figure 16.20. FIGURE 16.20 Open the Filter track to reveal the Sample track by clicking the arrow to the left of the track name.
8. As a default, a Sample track has been added. Click it to reveal its attributes in the Inspector as shown in Figure 16.21. As a default, GoLive automatically adds the Crossfade transition. Test it and then proceed to see how to change it. FIGURE 16.21 Select the Sample to reveal attributes for it in the Inspector.
9. In the Sample Inspector, leave the radio button indicating that the transition is from Source A to Source B. Click the Select button, and the Select Effect dialog box opens, as shown in Figure 16.22.
,
10. The preview pane displays each effect. For this example, you will choose Implode. 11. Click OK. The Sample content bar will be labeled with the name of the actual effect, and you’ll be able to play the movie in the Movie Viewer window to see the
16
Hour 16
,
348
filter. You can also work with the Filter tracks in the Layout tab of the Movie Viewer window.
FIGURE 16.22 The Select Effect window for the TwoSource Filter track.
,
Saving and Exporting Movie Files for the Web The last step in preparing your movie for the Web is compression. You must now decide what the final size, frame rate, and compressors will be. Some Web designers like to provide the viewer with the option to download different quality settings and film sizes. Creating a link to the different sized movies (put the file size in parentheses) is a nice feature to add to your page. Because movie files can be rather large, compression is the best way to provide the best quality movie at the smallest possible size. First, this section discusses flattening, which is essentially saving the file with all references to other sources into one file.
Flattening a Movie If you add a Sound or Video track to a movie file, it contains a reference to the source file on your hard drive. For instance, if you add a Video track from another movie file and then relocate the source movie file, you will not be able to open or play the movie until that Video track is relocated. To avoid errors, select Flatten Movie from the Movie menu. All tracks that were referenced are now built into your movie file. Even though this increases the size of the movie, it is necessary to avoid errors on the Web.
Exporting a Movie for the Web This section takes you through the export process in GoLive, explaining each step as it applies to saving a standard movie for the Web.
Using the QuickTime Editor
349
Export Movie, the window shown in Figure 16.23, is located under the File menu and is available when a movie file is open. Double-click a movie placed in GoLive. FIGURE 16.23 You can access the Export window from the File menu when a movie has been opened in GoLive.
16
Ex
po
rt
as Sk St ew re Tr ac am in Lo k g ck an d Br U in nl g oc to k Tr Fr a on t/B ck ac k
M
rt po
k k ac ac Tr Tr ze i e at es ot R R n/ tio w k si do ac in Po r T W e in
po
Ti
rt
ow
Ex
Sh
m
eL
FIGURE 16.24 Many of the QuickTime options are also available on the QuickTime toolbar.
Ex
Sh
ow
M
ov i
e
ov i
e
W
in
do w
You can also use the QuickTime toolbar that appears when editing a movie, shown in Figure 16.24, to export a movie. It can also be used for other options.
The Export window is where the name and destination are determined. The Export popup window should be set to Movie to QuickTime Movie. Most Recent Settings is selected in the Use pop-up menu. Because you might not know what the last settings are, you should check by clicking Options. This will open the Movie Settings window shown in Figure 16.25.
Settings The compression settings are determined in the Compression Settings window (see Figure 16.26). To open the Compression Settings window, click Settings in the Movie
350
Hour 16
Settings window. This is where the type of compression is selected. In the pop-up menu, you will find all the standard QuickTime compressors. FIGURE 16.25 The Movie Settings window is where compression, filters, and size are determined when a movie is exported.
FIGURE 16.26 Use the Compression Settings window to select compression methods.
There is no single compression setting that is going to be perfect for every video. After compressing a video, check the final size as well as the visual quality before posting it to a live site.
Compressor The Compressor default is Video, but there are others available in the Compressor popup menu shown in Figure 16.27.
Using the QuickTime Editor
351
FIGURE 16.27 The standard QuickTime compressors are available in the Compression Settings window.
16
One compressor method might work great for one movie and horribly for another. This section discusses the differences among some of the common selections. • Sorenson Video 3 is the compressor many professionals prefer because it offers good quality and creates small files. A drawback of using Sorenson Video is that the viewer needs a PowerPC or Pentium processor. • Cinepak won’t achieve the low data rates that Sorenson Video will, but it is good for viewers who might have slower machines. A Pentium or PowerPC is not required for this compressor. • H.263 is designed for real-time streaming and videoconferencing. It provides good quality at low data rates. The H.263 compressor breaks images into a 16×16 grid. This way, if packets are lost in the transmission, the movie can still be functional. For this compressor, your movie dimension size should be divisible by 16. • Animation works best with graphics images with large areas of color, but it will only work for Web delivery if used for slideshows.
Quality Determine the quality of the movie with the Quality slider. Just as with most other compression methods, the higher the quality, the bigger the file! Try leaving the Quality slider in the middle range setting for your first experiments. A preview window in the upper-right corner of the Settings window will show you the effects of compression.
352
Hour 16
Frames Per Second The fewer the frames, the smaller the movie’s data size. A movie might look great at 30 fps, but be too large for a reasonable download. To lower the file size, you can reduce the present frame rate, but do it in submultiples of 1/2, 1/3, or 1/4. You will want to experiment with this; most movies on the Web use between 8 and 12 frames per second.
Keyframe A keyframe contains all the information needed to create an image. A keyframe is inserted every so often in the movie to save on bandwidth and correct errors. Because of compression, errors can build up over time. A keyframe helps by supplying a clear frame with all the necessary video information. You might have witnessed keyframes in action when watching a movie that is fragmented or blurry, which then seems to collect itself to make a clearer image. Movies with lots of movement generally require more keyframes than those without. Again, experimentation is the best method for finding out what works best with your movie. For example, most QuickTime professionals use 10× the frame rate for the Sorenson Video compressor, and 1–2× the frame rate for Cinepak.
Data Rate Not all compressors will give you the opportunity to set the data rate. The data rate represents the number of kilobytes per second required to deliver your video. This setting requires some knowledge of the viewer base. The higher the value, the better the download quality, but the longer the download takes. If you are using the Sorenson compressor, a data rate below 100 provides a good quality image at a low data rate. Keep in mind that this setting overrides other compression settings. Unless you feel qualified to determine a good rate, you should leave it alone and let your other compression settings determine the speed. Close out of the Compression settings to return to the Movie Settings window.
Filter This section covers the filter options available when exporting a QuickTime movie. To access the filters, click the Filter button in the Movie Settings window. Believe it or not, QuickTime filters—Emboss, Lens Flare, RGB Balance, and Brightness & Contrast, to name a few—are determined upon export of the movie (see Figure 16.28). After you are in the Filter window, you can select a filter and preview it to see how the effect will alter your movie. Depending on the filter you have selected, you will have options available to customize it. If you plan to use the same filter settings in other movies, save them by clicking the Save button and providing a logical name for your filter and settings. Load them again at a later time by clicking the Load button.
Using the QuickTime Editor
353
FIGURE 16.28 QuickTime filters are applied upon export of a movie.
16
Close the Filter window to return to the Movie Settings window.
Size To reduce download time, take into consideration your movie’s dimensions. When a movie file is opened in GoLive, you can find the pixel dimensions in the Movie Inspector, as shown in Figure 16.29. FIGURE 16.29 Double-click a movie to open it in GoLive and find the pixel dimensions.
To change the movie size, click the Size button in the Movie Settings window to open the Export Size Settings dialog box as shown in Figure 16.30. Naturally, a movie that is 640 pixels wide will take longer to download than one at the same quality setting but that is 320 pixels wide. If the size can be reduced, it’s best if the height and width are divisible by four to avoid degradation of the image. Reducing a movie to half the original size is a safe reduction. Close the Export Size Settings dialog box and return to the Movie Settings window.
354
Hour 16
FIGURE 16.30 A custom size is entered into the Width and Height text boxes when exporting a movie.
Sound Settings Adding sound to a QuickTime movie is great, but without the correct compression selection it can be a nightmare for viewers to download. This section reviews some typical compression methods for both narration and music. If you are saving a movie with sound, check the box to apply compression. Click the Settings button to open the Sound Settings window shown in Figure 16.31. Although there are many compression options, this section will cover only the most popular methods. FIGURE 16.31 Sound compression methods are selected in the Sound Settings window.
Compressing Music for the Web A large selection of sound compression methods is available from the Compressor popup window. QDesign Music 2 works well for music. It produces quality sound at low data rates. The QDesign compressor lets you select the bit rate of the final product. When QDesign is selected, the Options button becomes available. Click it to select 24 kbits/s, as shown in Figure 16.32. This will allow the music to play smoothly over most dial-up connections. Set the value to 20 kbps if you don’t mind a loss in quality in exchange for reliability.
Rate Even though sound is not as data heavy as video, it still should be compressed to keep the file size small. As with any data rate, higher quality means a larger file, but with
Using the QuickTime Editor
355
sound, the added compression might not be warranted. This section discusses sound compression exporting examples at a high level of compression. It takes only a few tests to find that compressing sound to the lowest data rate loses the integrity of the sound with very few reductions in file size. FIGURE 16.32 Setting the QDesign Music 2 options for sound compression.
In the Sound Settings window, set Rate to 44.100 KHz. This is a higher rate of sampling the sound, but it maintains the quality. If you do choose to reduce the sound rate, use lower values from the pop-up menu; 22.050 and 11.025 are good alternatives. With most sound compression, the only option for size is 16-bit. 16-bit provides 65,536 possible values for sound, whereas 8-bit provides only 256. Leave the sound size set to 14-bit. Choose Stereo; for narration, you can set this to Mono.
Compressing Sound Used for Narration Qualcomm PureVoice will reduce a sound’s data size 90% in comparison to an uncompressed sound. Choose this option for narrated sound that you want delivered in real-time over the Web. Open the Sound Settings window. Because quality of sound is not as much an issue with narration as it is with music, set Rate to 22 KHz, Size to 16-bit, and choose Mono. Click the Options button in the Sound Settings window to reveal further options for the Qualcomm compression method (see Figure 16.33). Because you want to reduce the sound file to the smallest amount of data, leave the option setting for Qualcomm Half Rate. The best way to test files for quality of sound is to export several versions of the same movie with different compression settings, and then place them in a GoLive page.
16
356
Hour 16
Preview the movies in your browser. Note that with sound compression, a huge amount of compression might not reduce the entire file size by a huge amount. FIGURE 16.33 Qualcomm PureVoice offers additional sound compression methods in the Options window.
Summary After this introduction to QuickTime editing, you should be ready to dive in and start editing movies on your own. As you create movies, frequently test, experiment, and force yourself through some downloads by setting up test pages on your server. Even professionals who create movies for the Web on a regular basis are not always satisfied with their first attempts at exporting movies that work well on the Web.
Q&A Q I continue to get errors when I try to preview my .mov files within GoLive. What should I do? A Of course, there could be many reasons for errors. The most common solution would be to install the latest QuickTime plug-in into the GoLive Plugins folder. Make sure that you restart GoLive so that it can recognize the plug-in. Q Why can’t I get any filter choices when I drag one of the Filter tracks into my timeline? A A Filter track automatically adds a sample track. To get the filter choices, you must click the down arrow on the track and select the Sample track.
Using the QuickTime Editor
357
Quiz 1. What is the proper extension for a QuickTime movie? a.
.swf
b.
.mov
c.
.wav
2. What is a Sample track? a. Data used in a Filter track to determine the start time and duration of a specified filter. b. A temporary track used for experimenting. It disappears when the movie file is closed. c. A track for playing music (MIDI) files. 3. Which compression method would be a good choice for a movie with lots of motion? a. Sorenson Video b. QDesign c. Animation 4. What does flattening mean? a. Merging all tracks into one. b. Embedding references for tracks into the movie file. c. Compressing the sound into the video.
Quiz Answers 1. b. .mov is the proper extension for a QuickTime movie. 2. a. A Sample track is data used in a Filter track to determine the start time and duration of a specified filter. 3. a. Sorenson Video is a good choice for a movie with lots of motion. 4. b. Flattening means embedding references for tracks into the movie file.
Exercises Entering into the multimedia world of QuickTime editing can be overwhelming at first, but experiment by combining clips and adding sound and you will soon gain the confidence from experience to start utilizing movies on the Web.
16
358
Hour 16
1. If you can’t find movies to manipulate, create your own. Choose New Special, QuickTime Movie from the File menu. Import .swf files with the Flash Track object in the Object Inspector, or add images with the Picture track to create a slide. 2. Combine movies by copying and pasting tracks from one timeline to another. Use the Two-Source filter to create transitions. 3. Create a page with a movie saved in three quality settings. In the text of the page, detail the settings and create links to the movies. Time the download from your computer. Note the differences and save for future reference. Try on various platforms, browsers, and speeds.
HOUR
17
Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects It is hard to describe how awesome Smart Objects are in this version of GoLive. The feature integrates GoLive with image and document editing applications so well that it is difficult to fathom all it can do. But that is the purpose of this hour, to get you excited about using Smart Objects as a tool for more effectively creating Web pages.
360
Hour 17
So, now we’ll try to explain all of the great things you can use Smart Objects for. • Use native files—You can freely drop images, even PDFs (Acrobat Portable Document Format files), into GoLive pages with disregard to their format or size. This is possible because GoLive has the capability to read the original files and optimize them on the fly, maintaining a link to the native file. If you decide that GIF is a better format than JPEG, or that the size should be larger, you simply make the changes in GoLive and the optimized file is discarded and a new one is automatically created!
Optimization is the process of making a file as small as possible for quick download times on the Web. It requires some give and take to get the quality and the file size to a reasonable balance.
• Make multiple variations on one file—Now take it a step further. You use a text layer on top of a button in Photoshop or ImageReady. Perhaps the button is supposed to be used 50-plus times in your site with different text on each button. GoLive enables you to set the topmost layer as a Variable, meaning that you can update the text 50 different times right in GoLive! Here’s something even better, if anything other than the topmost layer is changed—perhaps you add a layer effect to the button or change the color—that will be updated in all 50 buttons. • Create multiple smart objects with different settings—A new feature with this version is that the settings for each Smart Object are maintained with the object. You can use one source for multiple optimized images, each maintaining its own settings. • Turn text into a banner—Type text and automatically turn it into a banner based upon an image already created in Photoshop or ImageReady. The text typed into GoLive takes on the attributes of your text layer in Photoshop and turns itself into a banner. Obviously, Smart Objects do a lot work for you if you know how to use them, so let’s get started! So, how does this work? The process is simple, but varies slightly depending upon the Smart Object selected. Four Smart Objects are located on the Smart section of the Objects palette. They include the Smart Photoshop, Illustrator, LiveMotion, and Generic Objects.
Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects
361
In this hour, you’ll learn the following: • Using the Smart Photoshop and ImageReady Objects • Using native Illustrator files with Smart Objects • Using Smart LiveMotion Objects • Using the Smart Generic Objects • Using variables in Smart Objects
Using the Photoshop/ImageReady Smart Objects Let’s start out by using a simple Smart Photoshop Object to become familiar with the concept of optimizing on the fly. Before starting this hour’s lesson, download some native files from http://www.golivein24.com/. We will then use the Smart Objects shown in Figure 17.1. Smart Illustrator Object Smart Photoshop Object
Smart LiveMotion Object Smart Generic Object
FIGURE 17.1 Smart Objects are on the Smart section of the Objects palette.
As usual, you want to work with a GoLive site open, especially because GoLive 6 has added a folder to store your original files in, as shown in Figure 17.2. Remember, when you use Smart Objects they maintain a link with the original file, so it’s helpful to have a place to store them that’s not in your Site folder (they don’t need to go to the server) but is easily located when working in the site. Using GoLive’s Smart Photoshop Object, you can bring in native Photoshop and ImageReady files and then determine file format, size, and quality. When an image is placed using the Smart Photoshop Object, an optimized copy of the source file is created and a link, called a Smart Link, is maintained between the original and optimized files. If you later resize the Smart Object, GoLive automatically updates the optimized copy by resaving it from the original.
17
362
Hour 17
FIGURE 17.2 Store Smart Objects in the folder provided for safekeeping.
Smart Links work both ways. Double-clicking on a Smart Linked image opens the original image. If changes are made, they are reflected in the optimized files back in GoLive.
The Smart Photoshop Object supports the following formats: • 8-bit RGB and CMYK Photoshop or ImageReady files Layers will be flattened, and sliced images are supported, but sliced rollovers and imagemaps created in ImageReady are ignored. • GIF • JPEG • BMP • PCT (Mac OS only) • PCX • PXR • IFF • TIF • TGA
You can double-click a Smart Photoshop Object in the Document window to open the original source image in Adobe Photoshop. Any changes made on the original are updated on the GoLive pages.
Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects
363
, TO DO
To Do: Adding a Smart Photoshop Object In this lesson, we place a Photoshop file and discuss the recommended settings to optimize a photographic image for the Web. 1. Create a new GoLive document. 2. From the Smart section of the Objects palette, drag and drop the Smart Photoshop Object onto the page, as shown in Figure 17.3. The Smart Object can also be placed by double-clicking it.
FIGURE 17.3 Place the Smart Photoshop Object on the page by dragging and dropping or double-clicking the object.
17
3. Using the Source Browse button on the Inspector, select a Photoshop image. As soon as the image is selected, the Save For Web dialog box appears, as shown in Figure 17.4. FIGURE 17.4 The Save For Web dialog box appears as soon as an image is selected.
,
You can also select an image by dragging from the Point and Shoot button to an image file in the Site window, or by dragging and dropping an image from the Site window, the Finder (Mac), Windows Explorer, or desktop.
Hour 17
,
364
4. In the Save For Web dialog box, click a tab at the top of the image display to select a view, as shown in Figure 17.5. For our purposes, set this view to 2-up.
FIGURE 17.5 Select a view to compare optimization settings.
The views from which you can choose are as follows: • Original view—The image with no optimization • Optimized view—The image with the current optimization settings applied • 2-Up view—Two versions of the image, side by side • 4-Up view—Four versions of the image, side by side 5. The next step is to choose the best optimization setting for our image. Assuming that this is a photographic image, select the JPEG format. From the Settings menu, choose one of the predetermined JPEG settings, as shown in Figure 17.6. Try low, medium, and high to view the quality and file size differences in the image. FIGURE 17.6 Choose from many predetermined optimization settings in the Settings pop-up menu.
,
6. Resizing an image: If you are placing a large file and planning to use a much smaller version in your page, change the pixel dimensions on the Image Size tab, as shown in Figure 17.7. Remember that the average monitor size is between 600–780 pixels wide, so images that are 200 pixels wide will cover roughly 25% of the window. Resizing here does not affect your original, and can be changed on the page after the image is placed. You must click the Apply button to adjust your image and remain in the Save For Web dialog box. 7. Look out for the file size! As you compare file formats and enter pixel dimensions, keep an eye on the file size. Important image information such as format, file size, and download time is located in the lower-left corner of the image preview (see Figure 17.8).
365
,
Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects
FIGURE 17.7 Adjust the final size of your optimized file in the Image Size tab.
FIGURE 17.8 Know how large the file will be before committing to the settings.
17
8. Click OK in the Save For Web dialog box. Another dialog box will appear. You now need to tell GoLive where to save the optimized file. Save the file in a logical location such as the Root folder of a site.
,
9. The image is now placed on your page. Resize the image by making it dramatically smaller and then larger. Notice how the original file is referenced and a new optimized image is saved and replaced right before your eyes!
It is a good idea to have the source of any of your smart images tucked safely away in the Smart Objects folder in your site.data folder. The Smart link is broken if the source file is relocated.
Using Smart Illustrator Objects The Smart Illustrator Object works almost the same as the Smart Photoshop Object. When a native Illustrator file (.ai) is selected, the Save For Web dialog box appears.
, TO DO
We will approach this in a way that teaches you the best formatting options for typical colored line art, such as logos, clip art, maps, and other graphics with large flat areas of color.
To Do: Placing an Illustrator File Using the Smart Illustrator Object Adobe Illustrator files are used on the Web to create logos, maps, graphs, and other graphics including clip art. Illustrator graphics have been able to be exported as SVG (Scalable Vector Graphics) and .swf (Flash) files since version 9. Because Illustrator
Hour 17
,
366
creates vector art (paths and points are mathematically created and are scalable to any size), you have a choice when optimizing to save the optimized image as bitmap (pixels), SVG, or .swf. 1. Drag the Smart Illustrator Object from the Smart section of the Objects palette onto your Document window, as shown in Figure 17.9.
FIGURE 17.9 Use the Smart Illustrator Object to place a native Illustrator file onto your GoLive page.
2. In the Smart Illustrator Inspector, click the Source Browse button, and select an Adobe Illustrator file (.ai). 3. You will be asked which format you would like the optimized file saved; bitmap, SVG, SVG compressed, or .swf. Choose bitmap for this exercise. For more information about the SVG and .swf formats, see Hour 15, “Using Plug-Ins and Multimedia Content.” 4. The familiar Save For Web dialog box appears, but in this instance we will use different settings. Make sure you are viewing the images 2-up, as shown in Figure 17.10.
,
FIGURE 17.10 View your Illustrator file as 2-up to compare the differences in optimizing.
,
Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects
367
5. Click the image in the right pane to select it. From the File Format pop-up window choose GIF, as shown in Figure 17.11. (GIF is the best format in which to save Web graphics with large areas of flat color. The GIF format also supports transparency, which is not supported by the JPEG format. GIFs reduce file size by reducing the number of colors in the palette.)
FIGURE 17.11 Select GIF from the File Format pop-up window.
17
6. Select the colors for your palette by choosing Adaptive from the Algorithm pop-up menu shown in Figure 17.12. The Adaptive palette closely represents the original colors. Using Web-safe colors (216 nondithering colors) is becoming less important, but if you prefer those select Web from the Palette pop-up menu. FIGURE 17.12 Select the Adaptive palette to build a color palette that closely represents the original colors.
,
7. Dithering is the stipple-like effect you might see when a browser cannot accurately represent a color. For our lesson, select No Dither. No Dither posterizes, or creates solid patches of color, rather than stippling several colors to represent one flat color. 8. Check the Transparency box if you want the image to be transparent. A checked background will appear representing transparency.
Hour 17
,
368
Transparency on the Web What files can be transparent and how is transparency determined? There are some key factors to creating transparency in your optimized files: • The most popular Web format that supports transparency is GIF. • JPEGs can appear transparent by selecting a matting color that matches the background color of the Web page, but they are not actually transparent. • In an Illustrator file, anything that has not been filled with a color will be transparent automatically. • In a Photoshop file, transparency is created by putting the image on a transparent layer. Whatever is transparent in Photoshop can be transparent on the Web page when the Transparency option is checked in the Save For Web window. Here’s a neat layer trick to use in Photoshop: Select what you want to have transparency around, then use Command+J (Mac) or Control+J (Windows) to lift the selected object to its own transparent layer. Throw away the background layer by dragging it to the Trash icon in the lower right of the Layers palette.
9. Choose the Colors pop-up window, as shown in Figure 17.13. Note that as you choose greater and lesser numbers of colors from this pop-up menu, you increase and decrease the file size, as shown in Figure 17.14. Try to determine the lowest number of colors you can use and still represent your graphic well. You can use the arrows in Colors to add or decrease one color depth at a time. When you’re done, click OK. FIGURE 17.13 Increase or decrease the Color palette by selecting the pop-up menu in Colors.
,
Lock colors so they don’t get deleted as you reduce the amount. Click the color you want to lock, and then click the padlock in the bottom of the Color palette. You can also select individual colors to be Web-safe by selecting them and clicking the Cube icon in the Colors palette.
369
,
Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects
FIGURE 17.14 As you reduce or increase colors, the file size is affected.
,
10. Specify the folder where you want to save the converted image. A logical place would be in the Root folder of your site.
Just as with a Smart Photoshop Object image, you can resize this image and it automatically updates the optimized file.
17
Using the Smart LiveMotion Objects LiveMotion is a sophisticated animation program that supports both vector and raster graphics, and can export files in the .swf format. In this section, we cover how you can take a native LiveMotion file (.liv) and generate a Shockwave Flash (.swf) file from it. You must have LiveMotion installed to use this feature. GoLive launches LiveMotion to access the export features. GoLive creates a copy of the source file in the Flash format and maintains a link between the two files. If you later make changes to the source image, GoLive automatically updates the Flash format copy when you return to the page containing the image. Note that the Smart LiveMotion Object is different from other Smart Objects in that the default export settings in LiveMotion are applied to the saved .swf file.
Setting the Export Format in LiveMotion Follow these steps before we start our lesson: 1. Start LiveMotion, if it is not already open. 2. If the Export palette is not already showing, choose Window, Export. 3. Select SWF (Flash) from the top pop-up menu of the Export palette, as shown in Figure 17.15.
If the export setting is not set up in LiveMotion for Flash (.swf), you will not be able to add a Smart LiveMotion Object to a Web page in Adobe GoLive.
370
Hour 17
FIGURE 17.15 The Smart LiveMotion Object reads the LiveMotion Export settings that should be set up for a .swf file.
, TO DO
To Do: Adding a Smart LiveMotion Object Adobe LiveMotion creates vector animation that can be exported in the Flash (.swf) format offering interactive capabilities in a small file size. Fortunately, if you are a LiveMotion user, you don’t have to export a file every time you want to place it on a page. GoLive can read and link to the original LiveMotion (.liv) file to keep edits and changes to the original up-to-date on the GoLive page. 1. Drag the Smart LiveMotion Object from the Smart section of the Objects palette into your Document window. 2. On the Live Image Inspector, click the Source Browse button and select a LiveMotion file. LiveMotion launches and comes to the front. 3. LiveMotion requests the location at which to save the .swf file. Choose to save the file in the Root folder of your site. After a few moments, Adobe GoLive returns to the front.
,
4. This placed .swf file is now linked to the original. Any edits to the LiveMotion file are reflected on the GoLive page.
Opening Files in Their Native Application When artwork placed on a GoLive page using Smart Objects is double-clicked, it launches in the native application. If this feature does not work, make sure that GoLive recognizes the presence of the other applications by opening Preferences, General in the menu and checking Launch other programs to edit media files, as shown in Figure 17.16.
Using Variables in Smart Objects Now that we know the fundamentals of Smart Objects, let’s throw an extra feature in that will be an enormous help to you as you create files, adding a variable. GoLive enables you to take an image that has text as a top layer and edit that top layer right in GoLive. We are going to go through the steps in this exercise. If you don’t have an appropriate image, download one from www.golivein24.com.
Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects
371
FIGURE 17.16 Images placed using the Smart Object can open in the native application if the preference is checked.
17
, TO DO
To Do: Using Variables In this exercise we will create several buttons from one source. Each button will have the top layer of text changed in GoLive. We will then edit the button (not the text) in Photoshop so that you can see how the Smart links keep your images updated. 1. Drag a Smart Photoshop Object onto a GoLive page. 2. Select the image named button.psd or an image of your own that has text as the top layer. A dialog box will open asking you if you want to use variables. Check the box to the left of Topmost Textlayer. 3. Type the text that you want to appear in the button in the bottom dialog box (see Figure 17.17). FIGURE 17.17 Let GoLive know that the topmost text layer is going to be a variable and enter the text you want to see on the button.
,
4. Click OK, and choose to optimize this file as a JPEG. Save the file in your root folder. Did you notice how it let you pick the text? The style of the text, font layer styles, and so on was already determined in Photoshop; you just changed the word!
Hour 17
,
372
5. Do this again with the same button image, but type the words in service in the Variable dialog box…viola! It keeps the same image with new text. 6. Try this neat trick if you know Photoshop. Open the button.psd in Photoshop and double-click the color swatch on the shape layer, see Figure 17.18. Pick a new color and save the file. Your buttons are updated in GoLive, but not the text!
FIGURE 17.18 In Photoshop change the color of the button by double-clicking the shape layer. Click a new color in the picker and save.
, Using Text To Banner Along the same lines of using a variable is the new Text To Banner feature, available from the Special menu. This feature enables you to take text that you have already typed and convert it to an image banner.
, TO DO
To Do: Converting Text to Banner In this exercise we will type a word on a page in GoLive and convert it to a banner. To do this you need an image where the topmost layer is a text layer. If you do not have one, download the sample images from www.golivein24.com. Place it into the SmartObjects folder in your site’s .data folder. 1. Type the word Sales on a page in GoLive.
,
2. Choose Convert Text to Banner from the Special menu. 3. Select the image named headline.psd. Notice that the variable window appears and the word Sales is already keyed in as the variable (see Figure 17.19).
373
,
Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects
FIGURE 17.19 When Convert Text to Banner is selected the typed text is used in the topmost text layer.
,
4. Click OK to accept the variable window and locate a place to save the optimized file. The image will appear with your text in the top text layer. Keep in mind that you can change the settings and the variables at anytime by clicking the Settings or Variable buttons in the Inspector (see Figure 17.20).
FIGURE 17.20 Change your settings or variables at any time by clicking the buttons in the Inspector.
What Does Scale Mean? You might have noticed a pop-up menu called Scale in the Smart Objects Inspector. In the menu are three choices, Exact Fit, No Border, and Show All. Here are the definitions of those choices: • Exact Fit—Scales the image to the exact bounds. Be careful; this will distort the image if it needs to make it fit. • No Border—Keeps the proportions, but might cut off parts. • Show All—Keeps the proportions while adding transparent/matte colored borders to the image. These are helpful if you have image areas already defined in Templates and you don’t want resizing to distort any placed images. See Hour 10, “Using Components, Stationeries, Library Snippets, and Page Templates,” for more information on Templates.
Using the Generic Smart Image Last but not least we cover the Generic Smart Image. This Smart Object handles the file formats such as PDFs and eps. In our example we will use this to place a PDF onto our page.
17
374
Hour 17
, TO DO
To Do: Placing a PDF We will use the Smart Generic Object to place a PDF (Acrobat Portable Document Format) file. If you do not have access to a PDF, download one from our Web site at www.golivein24.com. 1. Drag the Smart Generic Object onto a GoLive page. 2. Browse to locate a PDF file. We will use our sample file named annual.pdf. 3. Optimize the PDF as a JPEG, and save the optimized file in your root folder.
,
4. This PDF is now linked to the original. If you have the full version of Acrobat, not just the free reader, you can open the file, make changes to it, and they will be reflected back on the GoLive page!
Summary Designing a page using Smart Objects is a revolutionary way to create Web pages. You no longer need to worry about saving multiple versions, or lacking enough data to build the best image. All of the Smart Objects leave the original file intact, so experiment with multiple placements of the same image, in different sizes and optimizations, until you learn what format and quality combinations work best for your site.
Q&A Q What happens if I move a source file after it has been selected for a Smart Object? A The file will no longer be linked. The optimized copy still exists, but you will not be able to use the update features to resize or edit the original. Relink the image by clicking on the Source Browse button on the Inspector. Q What if I change my mind on quality settings after I have already placed a Smart Object? A On the Smart Object Inspector, click the Settings button. This gives you an opportunity to change the optimization settings. Q Can I break the Smart link after I have created something as a Smart Object? A Absolutely. With the Smart Object selected Control+click (Mac) or Right+click (Windows), and select Convert to Regular image from the Contextual menu.
Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects
375
Quiz 1. Which Smart Object is best for importing photographs? a. Smart Photoshop Object b. Smart Illustrator Object c. Smart LiveMotion Object 2. Generally, what is the most common format that an image with large amounts of flat color is saved in? a.
.JPEG
b.
.SWF
c.
.GIF
3. What is one reason why a Smart Object might not update correctly? a. Photoshop is not loaded. b. The source file has been relocated. c. You are not working in an active site.
Quiz Answers 1. a. A Smart Photoshop Object will import a JPEG file. 2. c. .GIF is the most popular format for saving images with large amounts of flat color. 3. b. A Smart Object might not update correctly if the source file has been relocated.
Exercises Smart Objects are a true timesaver when designing Web pages. Try some of the exercises to get used to the workflow. 1. Use the Smart Photoshop Object and place the same image several times, naming each optimized file something different. For instance, fish1.jpg, fish2.jpg, fish3.jpg, and so on. Double-click one of the placed images to update the original and watch as all instances of the file are updated in GoLive. 2. Perform the same exercise as in exercise 1, but this time try saving the same source image once as a GIF and another time as a JPEG.
17
376
Hour 17
3. Place a Smart Object on a GoLive page. Use the same original image to place another Smart Object on the page, this time changing the optimized filename to something different. Resize one of the objects and notice that the one image being resized has no effect on any other Smart Objects based on the same original image.
HOUR
18
Formatting Text with Cascading Style Sheets Cascading Style Sheets (CSS) are a powerful design tool for Web designers. Cascading Style Sheets not only give you the ability to format text in ways not possible in standard HTML, but they also provide a method to change multiple text attributes at the same time to text that has had the style applied. Keep in mind that not all style sheets are compatible with all browsers. Generally, a browser version 4x or higher will view style sheets properly, but even then, some attributes will work on one browser but not another. We will address this subject toward the end of this hour, but in the meantime, check your pages in both browsers and avoid checking in just the GoLive preview. In this hour, you’ll learn about the following: • Creating Element, Class, and ID style sheets in GoLive • Defining fonts with style sheets • Defining text attributes with style sheets • Applying style sheets to existing pages • Avoiding Web browser incompatibilities with style sheets • Prioritizing style sheets to set style override levels
378
Hour 18
Creating Style Sheets in GoLive When you understand the fundamentals, using style sheets in GoLive is not difficult. This hour covers three selectors used to define style sheets: Element, Class, and ID, in that order. Element is the simplest of all style sheets to apply.
When style sheets are used, a set of characteristics is defined or referred to in the head section of the Web page. A selector is a string of code that connects the HTML page with a specific style sheet, telling the browser that the tagged text should follow the rules defined by that style.
When reviewing style sheets, you will build examples as internal style sheets, meaning that the style sheets will only be available on the page they were created in. This will help keep you focused on the specific differences between the Selectors. Later in the hour, you will review external style sheets, which can be applied to multiple pages.
Types of Style Sheet Selectors There are several types of indicators that determine what defined style should be applied and where. In this section, you will learn about three selectors: Element, Class, and ID.
Element Selectors As stated previously, the Element selector involves the smallest number of steps to apply. In fact, after they have been created, an Element style sheet’s attributes are automatically applied. Here is an example: You want your headline text to be 25 pixels. By creating an Element style selector, you can instruct the browser that every time you use the tag, the text enclosed is to be 25px (pixels). It is as simple as that. One of the benefits to using Element selectors is that they are downward compatible with old browsers. Browsers that do not recognize style tags will usually ignore the unknown tags, leaving the recognizable tags for at least some text formatting.
, , TO DO
To Do: Creating a Style Based on an Element Selection In this lesson, you create an Element style sheet that eliminates the underline that appears when text is tagged as a hyperlink. 1. Open an HTML page that contains linked text. 2. Click the CSS icon (looks like a cascading staircase) in the upper right of the GoLive page, as shown in Figure 18.1. A CSS Editor will appear.
379
,
Formatting Text with Cascading Style Sheets
FIGURE 18.1 Internal Cascading Style Sheets are created by clicking the CSS icon in the upper right of your GoLive page.
In the CSS Definitions tab of the CSS Editor are the controls for creating or removing Element selectors, Class and ID styles, as well as importing external style sheets (see Figure 18.2). FIGURE 18.2 The CSS Editor gives you the controls to create, delete, and import style sheets.
New ID style New link to External style sheet Delete style New Class style New Element style
3. Click the New Element (<>) selector. 4. The Inspector becomes a CSS Style Inspector as shown in Figure 18.3. Click the Basics button (pencil icon) and name the style a (for the HTML Anchor tag). This is the tag that informs a Web browser that a link reference is to follow.
,
FIGURE 18.3 Name and text attributes for style sheets are done in the CSS Selector Inspector.
5. Click the F (Font) button. This section represents text attributes that can be applied to the style sheet.
18
Hour 18
,
380
6. Check None under Decoration, as shown in Figure 18.4. The underlines from links are removed. To continue working on your page, simply click the GoLive page.
FIGURE 18.4 Type size, height, color, and decoration are set in the Font section of the CSS Selector Inspector.
, , TO DO
To Do: Editing the Element Style Sheet Perhaps you change your mind and want your links to be burgundy, or larger. Follow these steps to make changes to the style sheet just created. 1. To make further changes to the Element style sheet, click the CSS icon. 2. When the Style Sheet window appears, select the tag a.
,
3. Choose the F (Font) button and make additional attribute changes. Every tag instance will be automatically updated.
You have been using simple element styles, but GoLive supports Contextual element selectors as well. This means that if you create an element style named H1 b, the attributes that you define will only appear when you bold and apply the tag! All contextual style sheets might not preview in GoLive, but will show up in the browser.
Using Classes for Style Sheets The Class Style selector is similar to those used in word processing and page layout applications, in that font attributes are applied to selected blocks of text. Styles can be created for body text, or headlines and subheads, and so on. These styles can then be applied to a selected word, paragraph, or even an entire page.
Formatting Text with Cascading Style Sheets
381
, TO DO
To Do: Creating an Internal Class Style Sheet In this lesson, you create a Class style sheet that you will use to define a headline style where the text is defined to a specific pixel size. 1. Open or create an HTML document that contains several paragraphs of text. Make sure that the text has no size attributes. To verify this, select all the text and choose None from the size pop-up menu in the Toolbar, as shown in Figure 18.5.
FIGURE 18.5 Choose None to put the text size back to its default.
2. Click the CSS button in the upper right of the GoLive page. 3. From the CSS Editor, choose New Class style, as shown in Figure 18.6. FIGURE 18.6 Create a Class style sheet by clicking the New Class Style in the CSS Editor.
4. In the CSS Style Inspector, choose the Basics button and name this style .headline. (The “.” must appear in front of Class style sheets.) 5. Click the F (Font) button and choose to make the .headline text size 25px (pixels).
,
Surprised to see your font size dramatically changes between platforms? By choosing px (pixel) for the text size, the text will stay relatively the same size between platforms and browsers.
18
Hour 18
,
382
6. Select a word in a paragraph of text and open the CSS palette from the Window menu. 7. The .headline style appears followed by several check boxes. Class styles can be applied to a selected text (Span), a paragraph (Par), or a section of a page (Div), as shown in Figure 18.7.
FIGURE 18.7 Choose to apply a class style as Span, Par, or Div.
8. Check the box for Span, and the selected text increases in size to 25px.
,
9. Check Par and all the text in the paragraph resizes to 25px. A Par selection continues until a paragraph (
Creating an ID Tag 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. In other words, one headline could be defined with totally different attributes than all others. Applying an ID style requires the designer to edit the source code. Editing source code might or might not be familiar to you. Either way, you won’t find it difficult to apply the ID style.
, , TO DO
To Do: Creating an Internal ID Style In this lesson, you create an ID style sheet that will instruct the defined text to be colored. 1. Open or create an HTML document that contains several paragraphs of text with no color attributes. To verify that no color has been applied, select all the text and choose Remove Color from the Type menu. No color is applied if Remove Color is grayed out.
,
Formatting Text with Cascading Style Sheets
383
2. Choose the CSS icon from the upper right of the GoLive page. 3. From the CSS Editor palette, choose New ID style, as shown in Figure 18.8.
FIGURE 18.8 The ID tag is created by choosing the New ID style (“#”) from the CSS Editor palette.
4. In the CSS Style Inspector, choose the Basic button and name the style #important. The # (pound sign) must precede the name, and the name cannot have spaces in it. 5. Choose the F (Font) button; from the Color pop-up menu, select Red. 6. Click the GoLive page and select a line of text. 7. Choose the Source tab. The line of text is still activated in this window. 8. Find the
The finished code appears as
,
9. The text on the page turns red.
, TO DO
To Do: Understanding the Benefit of Style Sheets Now that you understand the differences in the style sheets, try taking advantage of them by revising the styles you have created. 1. Open a page that uses an Element, Class, or ID style sheet. 2. Click the CSS button. The Style Sheet window appears displaying styles categorized by type. 3. Click the style that you want to revise.
,
4. Choose the F (Font) section and change the color. Note that any place where the style sheet has been applied will change. Quite the time saver!
18
384
Hour 18
Defining Fonts with Style Sheets You know by now that you can’t define a font and expect it to invariably appear on the viewer’s end. As discussed in Hour 2, “Creating a Site File,” font sets can be used to request a font. If it is not available, the next font in the set is requested. If that font is not available, the next font in the set steps up, and so on. So, how do you apply font sets to style sheets, and what is the benefit? If in the previous example, you chose to display the headline in Arial, it would be much easier to apply the font once in a style. If you then decide to be daring and use Arial Black, you have one simple revision to make, and all occurrences of Arial, used in the .headline style, are replaced by Arial Black.
, TO DO
To Do: Using a Style Sheet to Define a Font Set In this lesson, you create a style sheet that defines a font. If you want to find some textheavy pages to use for this lesson, go to http://www.golivein24.com. 1. Open a page that has several paragraphs of copy on it. Make sure that no font sets have been applied to the text on this page by selecting All and choosing Type, Font, Default Font, as shown in Figure 18.9.
FIGURE 18.9 Use the Type menu to set text to the Default Font set.
2. Click the CSS button. 3. For this example, you will use an Element style. Click the New Element Style button from the CSS Editor. 4. In the CSS Selector Inspector, choose the Basics button and name this Element B. This is the HTML tag for bold.
,
5. Choose the F (Font) section and change the color to Red. From the font pop-up menu shown in Figure 18.10, choose the Arial font set. 6. Be careful not to apply the font set again. You can add additional font sets after the initial one, but if you do this by accident, select the font and choose Edit, Clear (Mac), or Edit, Delete (Windows).
385
,
Formatting Text with Cascading Style Sheets
FIGURE 18.10 Apply a font set to a style by choosing it in the F (Font) section of the CSS Style Inspector.
,
7. Click the GoLive page and select some text. Choose bold from the Toolbar. The text will not only change to the color red, but also to the Arial font.
Defining Text Attributes with Style Sheets This section covers in more detail how to apply font attributes to style sheets. In addition to changing the color, size, and additional attributes as you have already done, you will use line height (creates the same effect as leading in typesetting terms) and spacing between words, characters, and margins.
, TO DO
To Do: Changing the Line Height (Space Between the Lines) In this lesson, you create a style sheet to do something you can’t do in regular HTML: define the space between the lines of text, or control leading. 1. Open a GoLive page that has several lines of copy. 2. Create a Class style sheet by clicking the CSS button and selecting New Class Style from the CSS Editor, as shown in Figure 18.11.
,
FIGURE 18.11 The New Class Selector button.
3. Name the style .bodycopy. Remember, always include a period in front of the name.
18
Hour 18
,
386
4. Select the F (Font) section, and set the text to be 10px and the line height to be 20px. This would be the same as double spacing on a typewriter.
,
5. Click the GoLive page and put the cursor in a paragraph of text. From the CSS palette (Window, CSS) set the .bodycopy style to be Par. The entire paragraph will become double spaced.
Line height does not work well as a Span style. Multiple lines must be selected in order for it to take effect.
As you are creating and using styles, pay attention to the fact that GoLive not only displays the code working behind the scenes in the CSS Definitions tab of the CSS Editor (see Figure 18.12), but also allows you to edit the source code in the Source tab; see Figure 18.13.
FIGURE 18.12 The source code is displayed in the CSS Definitions tab of the CSS Editor. FIGURE 18.13 Edit the source code of the style sheets in the Source tab of the CSS Editor.
, TO DO
To Do: Spacing Between Words and Letters In this next example, you’ll learn how to apply spacing between words and letters. Because letter spacing is the most popular option, the exercise covers it. If you are from the old school of HTML, you might remember inserting 1-pixel transparent GIFs between each character to get this effect!
,
1. Open a GoLive document with several lines of text on it. 2. Choose to create an ID style sheet by selecting the CSS button and choosing New ID style from the CSS Editor, as shown in Figure 18.14.
387
,
Formatting Text with Cascading Style Sheets
FIGURE 18.14 The ID Selector.
3. Select the Basics button and name the style #space. 4. Select the Text button (third from the left) and note Word Spacing and Letter Spacing. In Letter Spacing, type 5px to define five pixels of space between each character, as shown in Figure 18.15. FIGURE 18.15 Space out letters in the Text section of the CSS Selector Inspector.
18
5. Click the GoLive page and select the Source tab. Find a
The completed tag should look like this:
The letters in the following text are spaced out by five pixels, as shown in Figure 18.16. FIGURE 18.16 When the ID style has been applied, your text should appear with an extra space between each letter.
,
388
Hour 18
When editing source code, you can also click the Show/Hide Split Source button in the lower left of the page window. This option keeps the layout and source code available at the same time so that you can see what you are doing in the code as you create new styles.
Adjusting Margins in Style Sheets You can adjust margins of text from all sides using style sheets. Enter positive amounts for more space or negative amounts for less space. You can even overlap copy by setting negative margins!
, TO DO
To Do: Editing the Margins of a Style To edit the margins of a style, follow these steps: 1. Open a GoLive page with several lines of text on it. 2. Choose New Class style from the CSS Editor. 3. Name the Class style .description. 4. Select the Block button (fourth button in from the left) and set the left margin to be 15px, as shown in Figure 18.17. FIGURE 18.17 Create margins around text by using the Block section of the CSS Selector Inspector.
,
5. Click your page and insert the cursor in a paragraph. In the CSS palette (from the Window menu), apply .description as a Par style. The text indents to the left by 15 pixels.
Formatting Text with Cascading Style Sheets
389
Applying Style Sheets to Existing Pages This section discusses how to create external style sheets and apply them to existing pages. The external style sheet is a separate document that is linked to multiple pages. The biggest benefit to using external style sheets is that, when they are updated, any references to the style are automatically updated.
, TO DO
To Do: Creating an External Style Sheet In this lesson, you create an external style sheet that can be linked to several pages. 1. Choose File, New Special, Cascading Style Sheet from the menu. 2. An untitled.css Style Sheet window appears that looks similar to the CSS Editor you have been using in the previous exercises. 3. For this example, you will use an Element style sheet. Choose New Element style from the External CSS Editor. 4. In the CSS Style Inspector, choose the Basics button and name the tag i (the HTML tag for italic) as shown in Figure 18.18. FIGURE 18.18 Create a new Element style and name it i in the CSS Style Inspector.
5. Select the F (Font) button and change the color of the italic style to red. 6. Save the Style Sheet document as newstyle.css. Of course, it is best to save this in the root of a Site folder to avoid losing it. 7. Open a new GoLive document and type some text. Select several of the words and apply the italic style from the Toolbar to them.
,
8. Click the CSS button in the upper right of your GoLive page. 9. Click New Link to External CSS in the CSS Editor as shown in Figure 18.19.
18
Hour 18
,
390
FIGURE 18.19 The New Link to External CSS button in the CSS Editor is used to link your page to an External Style.
10. Browse, point and shoot, or type in the location of the Cascading Style (newstyle.css). 11. The text that you italicized is now red. 12. Save this document and create a new one with italic text on it as well. Apply the same external style sheet to this file by following steps 9 and 10. 13. Choose Open from the File menu and select the file named newstyle.css.
,
14. Change the color of the italic tag to green. All occurrences of italic text on both documents change to green.
Using Import and Export from the File menu, you can export an internal style sheet to an external style, but you can also import style sheets into your documents.
Working with External Style Sheets in Sites Now that you see how external style sheets are applied, you probably realize the importance of keeping the style sheet in a location where linked pages can locate it. In this next example, you will create a new site and save the .css file in it. You will then apply the external style sheet another way, utilizing the Site window. By saving the .css file in the site, you reduce the risk of style sheet errors when the linked style sheet cannot be found.
Formatting Text with Cascading Style Sheets
391
, TO DO
To Do: Saving an External Style Sheet into a Site In this lesson, you create an External style sheet and save it into a site for future reference. 1. From the File menu, choose to create a single-user blank site. 2. Name the site Style, and save it on your hard drive in an easy-to-find location by using the Browse button. 3. You could create a new style sheet, but for this example, you will add your existing style to this site. Make sure that you have the Site window forward and choose File, Import, Files to Site. 4. Locate the file named newstyle.css and add it to the new site. 5. Open index.html and create text that is italicized. 6. Position the Document window so that you can see the Page icon to the left of the title and the Site window, as shown in Figure 18.20.
FIGURE 18.20 Position the site and page so that the .css file is visible.
18
,
7. Drag the file named newstyle.css, and drop it on the Page icon to the left of the title in the upper left of the main Document window. This applies the style sheet to the index page.
Want to apply a style to the contents of a table? Select a table and Control+click (Mac) or Right-click (Windows) to select Apply CSS Style to TD or Table (depending upon what you have selected from the contextual menu, as shown in Figure 18.21). Choose any available Class styles from the submenu.
392
Hour 18
FIGURE 18.21 Apply a Class style to a selected cell or table using the contextual menu.
Avoiding Web Browser Incompatibilities with Style Sheets Cascading Style Sheets, as great as they are, are supported by only 4x or higher browsers. To keep pages compatible with older browsers, you can use the Browser Switch object. The Browser Switch redirects viewers with older browsers to a different page than that seen by those with the 4x or higher browsers. This page could be nothing more than a plain text page that provides e-mail and other contact information. You might even include links to Microsoft and Netscape so that viewers can update their browsers. In this section, we will take you through the steps to create an Intro page for your site. Most viewers will not see this page. This page is set up with the switch so that anyone with a 4x or higher browser moves on to the rest of your site, and anyone with a lower version browser is redirected to the text Intro page. The reason you use an Intro page is that some older browsers might not even understand the Browser Switch. In this case, you can add a Refresh Head item to redirect them to the text-only page.
,
, TO DO
To Do: Creating the Browser Switch Head Item In this lesson, you insert a script into a GoLive page to aid viewers with older browsers. The script can direct older browsers to a Web page that does not use style sheets. 1. Create a page to be used as the Intro, and name the page intro.html. Do not include any floating boxes, style sheets, or Action items on this page. 2. Click the triangle to the left of the Page icon to open the Head section of your page, as shown in Figure 18.22.
393
,
Formatting Text with Cascading Style Sheets
FIGURE 18.22 Click the triangle to the left of your Page icon to toggle open the Head section of your page.
3. Drag the Browser Switch icon from the Smart section of the Objects palette into your page’s Head section, as shown in Figure 18.23. FIGURE 18.23 Drag the Browser Switch icon into the Head section of the page.
The Inspector is now the Browser Switch Inspector. 4. Check the supported browsers that are required to advance to the rest of your site, and browse to locate the main page of your site, as shown in Figure 18.24.
,
FIGURE 18.24 The checked browsers are the supported browsers.
5. Drag another Browser Switch icon into the Head section and choose to send viewers with browsers lower than version 4x to your text-only page, as shown in Figure 18.25.
18
Hour 18
,
394
FIGURE 18.25 Send the viewers with older browsers to a simplified page.
7. Drag the Refresh icon into the Head section of your page, as shown in Figure 18.26. FIGURE 18.26 The Refresh icon looks like a clock and is in the Head section of the Objects palette.
8. Set the refresh for five seconds. If there is no response to the Browser Switch in that time, the Refresh will direct the viewers to the plain-text page specified, as shown in Figure 18.27. FIGURE 18.27 If there is no response to the Browser Switch, the Refresh will direct viewers to the text-only page.
,
Formatting Text with Cascading Style Sheets
395
Using Netscape CSS Fix Using the Head Action object from the Smart section of the Objects palette, you can add the Netscape CSS fix to your page. This corrects a Netscape 4x problem with style sheets where the text reflows incorrectly when the browser window is resized. This can even be placed in your Stationary file to be present for future pages.
, TO DO
To Do: Using the Netscape CSS Fix In this lesson, you use a GoLive Action to add the script necessary to correct for Netscape style sheet errors. 1. Open a GoLive page. 2. Open the Head section by clicking the arrow to the left of the Page icon. 3. From the Smart section of the Objects palette, drag the Head Action object into the Head section of your page. 4. Click the Action button to reveal the pop-up window, and then select Others, Netscape CSS Fix (see Figure 18.28). FIGURE 18.28 Applying the Netscape CSS Fix action to a GoLive page.
,
5. The fix has now been added to your page.
External Style Sheet Priority What if you choose to incorporate two external style sheets into one document? Depending on its priority, one style will overrule another. For instance, if I applied an external style sheet that states italics are to be red, and then apply another external style sheet that states they should be green, the priority defines who wins the battle.
18
396
Hour 18
The rule to follow is that the tag closest to the text “wins.” In other words, if I have an internal and external style sheet, and both define the color of the text, the internal style sheet wins. Why? Because the internal style sheet is actually defined on the page. If I then select the text and change it to another color, that tag will win because the text is right inside of the tag. So, that makes sense in a perfect world in which you have only one external style sheet, but what happens when you have two or three style sheets, all ruling on a specific tag or style? That is what you read about in this section.
, TO DO
To Do: Defining a Style’s Priority In this lesson, you import two external style sheets and change their priority by using the Inspector. 1. Create an external style sheet that defines the tag to be red. Save it as stylea.css. 2. Do a Save As naming the file styleb.css and change the color of italic to green. 3. Create a new document, click the CSS button, and choose the New Link to External CSS button shown in Figure 18.29. Locate stylea.css. Repeat the same procedure for styleb.css. FIGURE 18.29 By choosing New Link to External CSS several times, you can import many external style sheets.
In the CSS Editor, select one of the two external style sheets listed. Notice the arrows at the bottom of the palette. See Figure 18.30.
,
FIGURE 18.30 When multiple external style sheets are used on a page, one can gain priority over the other by using the arrows on the Inspector.
,
Formatting Text with Cascading Style Sheets
397
,
4. With an external style sheet active, try moving the Priority up and down. Notice how when a competing style is requested, the top style will gain priority.
Individually applied (inline) attributes gain priority over any internal or external style sheets. If you choose to change the color of selected text, for example, the color will not be overridden by applying a style.
Summary Manually selecting individual text and choosing limited attributes will become a thing of the past as browsers advance in capabilities and designers become accustomed to using Cascading Style Sheets. Understand that style sheets have yet to be used by a large number of Web designers. In this section, you have gained the knowledge to decide whether to use an Element, Class, or ID style and the steps necessary to use styles in multiple pages. The recognition of tremendous time savings is obvious after experimenting with style sheets. If you haven’t already incorporated styles into your Web site, try using them on one page, keep an ear out for viewer complaints, and then progress into developing them further in your site.
Q&A Q Can I have one external style sheet that includes Element, Class, and ID styles? A Yes, you can add as many styles to an external style sheet as you can manage. Q What are the drawbacks to using style sheets? A The main drawback is that only browsers 4x or higher will recognize the style sheets. If you feel that a large majority of your viewers have older browsers, you could use the Browser Switch discussed in this hour. Q Do external style sheets have to be uploaded to the server with my pages? A Absolutely. External styles are documents linked to the pages using them. Also, don’t change the location or name without using the File tab of your Site window! Q Can I use style sheets on my Stationary files? A Yes, this can be a timesaver as you create additional pages.
18
398
Hour 18
Quiz 1. What is one reason why an Element style might not work? a. It is not named a recognizable HTML tag name. b. The “.” (period) is missing from the beginning of the name. c. The proper code was not entered into the
Answers 1. a. An Element style might not work if it is not named a recognizable HTML tag name. 2. c. ID style requires you to enter code manually into your source code. 3. a. Class style can be applied to selected blocks of text.
Exercises Now to try your hand at creating your own Cascading Style Sheets. Use these exercises to help build up your style sheet experience to a level where you will feel confident applying this feature on your Web pages. 1. Create a practice site (refer to Hour 2). Create an external style sheet with an Element style that removes the underlines from links and also includes a Class style for a headline. Choose to simply change the color and size of the Headline style. Apply this style to many pages, and then reopen the external style sheet and modify the text attributes.
Formatting Text with Cascading Style Sheets
399
2. Experiment with margins and indents. Set a positive margin value (10px) in the Block section of the CSS Style Inspector. In the Text section of the Inspector, change the text indent to a –10px value. You have created a hanging indent. 3. Experiment with Element styles and tables. Each cell’s contents are in a