- 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
Editing a component
An additional benefit of using a component to place frequently used page content throughout your site is that you only need to edit a single file to make changes to it. When you save your changes to the component, GoLive automatically updates all pages containing it.
Now you'll edit the component for the navigation bar. You'll move the images in the navigation bar down so that they're vertically centered on the layout grid.
In the document window, notice that the Items In Stock, Repairs, and Appraisals images are aligned to the top of the layout grid. Try to click the Items In Stock image to select it for editing. Notice that you selected the entire component instead.
You can't edit the objects in the component from this page. Instead, you must edit them in the source file in which you created them.
Double-click the component on the page to open the component's source file. (You can also double-click navbar.html in the Components folder, located in the Extras tab in the right pane of the site window.)
In the navbar.html window, click the Items In Stock image to select it. Then Shift-click the Repairs image and the Appraisals image to add them to the selection.
Click the Align Center button () on the toolbar to center the images vertically on the grid.
Choose File > Save to save navbar.html.
Click OK for GoLive to automatically update the pages that use navbar.html as acomponent. When the update is finished, click OK to close the dialog box.
Choose File > Close to close navbar.html.
Make the hottest.html window active, and notice that the component has been updated automatically.
Save and close the file.