- Getting started
- Creating a new Web site
- Adding files to the Web site
- Creating a component to be used as a navigation bar
- Adding a layout grid
- Aligning and distributing multiple objects
- Adding text using a table
- Creating a custom color palette and adding color to text
- Specifying keywords
- Adding a component to an existing Web page
- Updating the custom color palette
- Designing a Web page using floating boxes
- Editing a component
- Previewing in GoLive
- Review questions
- Review answers
Creating a component to be used as a navigation bar
A component is an HTML source file that stores text and objects, such as a navigation bar, that you want to add to multiple pages in a site. When a component is added to a page, it's added as a single object and remains linked to its source file. To update a component, you simply update its source file to have GoLive automatically update all pages containing it.
At the top of each page in the Gage Vintage Guitars site, you'll place the company logo and a navigation bar for the site. Instead of creating this page content multiple times, you'll create it once and save it as a component that you can quickly add to each page. Now you'll create a new page that you'll store as a component. You store components in the Components folder, located in the site's data folder.
To display the right pane of the site window, click the double-headed arrow () in the lower right corner of the window.
The right pane of the site window appears with the Extras tab selected. The Extras tab displays the contents of the site's data folder, which includes the Components folder.
Place the site window at the bottom of your work area, so that the window is visible when you create a new page. To move a window, drag its title bar.
Choose Window > Objects, or click the tab if the Objects palette is collapsed.
In the Objects palette, click the Site button ()to display the Site set of icons in the palette. (You can also choose Site from the Objects palette menu.)
Drag the Generic Page icon from the Site set in the Objects palette and drop it on the Components folder in the Extras tab of the site window.
Enter navbar.html to rename the file.
Double-click the navbar.html file to open it.
Select the default page title (Welcome to Adobe GoLive 6) next to the Page icon () in the upper left corner of the document window.
Enter Navigation Bar as the new title.
Choose File>Save.
For more information on working with palettes, see "Creating a custom workspace" on page 80. For detailed information on using the Objects palette, see "Using the Objects palette" on page 85.
A new page, untitled.html, is added to the Components folder and appears in the Extras tab of the site window.
NOTE
To add a new page to a site, you can also choose File > New Page. If you use this method, make sure that you save the page to the appropriate folder on your hard drive.
Now you'll open the navbar.html file.
The navbar.html file opens in the Layout Editor of the document window.
Note that the default window size for new pages is 619. You'll use this default size in this lesson.
Now you'll change the title of the page. Page titles, together with keywords, are used by Internet search engines and browsers to identify content in your pages.
You can check that a file is saved as a component by opening the Site Extras set () of the Objects palette, and choosing Components from the pop-up menu at the bottom of the palette. Your navbar.html file should now be saved in the Site Extras set, ready to be added to any page.
Now you'll begin designing the component by adding a layout grid to the page.