Adobe GoLive 6.0- P5

Adobe GoLive 6.0- P5: This book, as well as the software described in it, is furnished under license and may be used or copied only in accordance with theterms of such license. The content of this book is furnished for informational use only, is subject to change without notice, andshould not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibilityor liability for any errors or inaccuracies that may appear in this book
Nội dung trích xuất từ tài liệu:
Adobe GoLive 6.0- P5 ADOBE GOLIVE 6.0 117 Classroom in a Book • If you want to preserve multiple layers of a Photoshop design, you can import the layers of the image as individual Web images in floating boxes (DHTML layers). Because the Web images are displayed in floating boxes, you can completely reposition them, overlap them, and apply other actions to them such as the Show Hide action. (See “Hiding and showing floating boxes” and “Working with Photoshop layered files” in the Adobe GoLive 6.0 online Help.) • You can use your Photoshop-based design as a tracing image and save individual cutouts as Web images in floating boxes. If you want, you can create a duplicate page that places the tracings in a table-based design by converting the floating boxes to a layout grid. (See “Converting floating boxes into layout grids” and “Building a Web page using tracing images” in the Adobe GoLive 6.0 online Help.)Aligning and distributing multiple objectsNow that you’ve added all of the images, you’re ready to align and distribute them. You’llalign the tops of the three images for the navigation bar using the Align palette.1 To display the Align palette, choose Window > Align. The toolbar lets you align objects relative to a layout grid, while the Align palette lets youalign and distribute objects relative to each other or their parent.2 Click the Items In Stock image to select it. Then Shift-click the Repairs image and theAppraisals image to add them to the selection.3 In the Align palette, click the Vertical Align Top button ( ) under Align Objects. (Ifthe tops of the selected objects are already aligned, this button is dimmed.)The tops of the selected images are aligned.118 LESSON 3 Designing Web Pages 4 With the three images still selected, click the Vertical Align Top button ( ) under Align to Parent. The three images are aligned with the top of the layout grid. 5 Choose Window > Align to close the Align palette. Now you’ll move the three images together using a keyboard shortcut. 6 Click away from the three images to deselect them, and select only the Items In Stock image on the page. Then hold down Ctrl+Alt (Windows) or Option (Mac OS), and press the Left Arrow key until the image moves no further. 7 Select only the Repairs image on the page, and use the same method to move it to the left until it moves no further. Then select only the Appraisals image, and move it to the left until it moves no further. The selected objects are moved horizontally on the page so that their edges touch each other. Note: By default, a layout grid has options set to snap objects to the grid. To move a selected object 16 pixels (the default spacing between the horizontal and vertical lines of the grid), press an arrow key. To move a selected object 1 pixel, hold down Ctrl+Alt (Windows) or Option (Mac OS), and press an arrow key. When you have finished placing objects on a grid, it’s a good idea to optimize the grid, which you’ll do now. Optimizing a grid reduces its size, so that it takes up less space on the page. ADOBE GOLIVE 6.0 119 Classroom in a Book8 Click the layout grid to select it. Then click Optimize in the Layout Grid Inspector.Optimized layout gridFor the purposes of this lesson, you won’t add navigation links to the images. You’ll addthese links later in Lesson 5, “Creating Navigational Links.”9 Choose File > Save to save navbar.html. Then choose File > Close to close it.Designing the home pageNow that you have finished creating the component for a navigation bar, you’re ready todesign the home page for the Web site. The home page will provide information thatintroduces users to Gage Vintage Guitars. First you’ll open the home page and change itstitle.1 In the Files tab of the site window, double-click index.html to open it.2 Change the title of the page to Gage Vintage Guitars. Select the default title nextto the Page icon ( ) in the upper left corner of the document window, and enter thenew title.120 LESSON 3 Designing Web Pages Applying a background image You can apply an image or color to the background of your page to visually enhance it. You can also apply an image or color to the background o ...