Home / Articles / Designing Adobe GoLive Web Pages

Designing Adobe GoLive Web Pages

Chapter Description

Adobe GoLive provides you with a variety of tools for laying out your Web pages. It also provides you with several ways to quickly add objects and apply colors frequently used in your Web site, saving you both time and effort. In this lesson, you’ll explore the various tools for page layout as you work on the design of three Web pages.

Adding files to the Web site

You can add Web pages, media files, and other resource files to an existing Web site. To add files from other locations to your site, it's recommended that you use the GoLive Import command or drag the files into the Files tab of the site window. With either of these methods, GoLive copies the files to the site without removing the original files.

Now you'll import a folder of image files into the site.

  1. If it isn't already selected, select the site window. Also, make sure that the Files tab of the site window is selected.

  2. Choose File > Import > Files to Site.

  3. Select the images folder in Lessons/Lesson03/03Start/. Click Add Folder or Add, and then click Done.

    Figure 5Importing images folder to site

    The images folder is copied to the site's root folder and appears in the Files tab of the site window.

    NOTE

    You can also drag folders and files from another location into the Files tab of the site window. Using a system tool (such as Windows Explorer or the Mac OS Finder), simply select the desired folder or files, and drag them to the site window.

  4. In the site window, click the symbol next to the images folder to display the folder's contents.

    The images folder contains several Web-formatted images in GIF that are ready to be added to pages.

    Now you'll add a new folder to the site for storing additional pages.

  5. Choose Site > New > Folder.

    A new folder is added to the site's root folder and appears in the Files tab of the site window. Now you'll rename the folder.

  6. Type pages to rename the folder, and click in the blank space outside the folder to deselect it.

    Figure 6

    NOTE

    To apply text or a value that you've entered in GoLive, you need to press Enter or Return, or change the focus by clicking elsewhere in the work area. Keep this in mind whenever you're working in GoLive.

    Now you'll import an existing page to the site. Later in this lesson, you'll update the design of the page.

  7. Make sure that no folders are selected in the site window, and choose File > Import > Files to Site. (If you accidentally import a file while a folder is selected in the site window, the file will be imported to that folder rather than being imported at the root level.) The Import Files to Site command isn't available unless the Files tab in the site window is active.

  8. Select the file appraise.html in Lessons/Lesson03/03Start/. Click Add, and then click Done.

  9. In the Copy Files dialog box, click OK to copy the file and update the site.

    Figure 7

    The appraise.html file is added to the site's root folder and appears in the Files tab of the site window. Now you'll move the appraise.html file to the pages folder.

  10. In the site window, select the appraise.html file, and drag it to the pages folder. Click OK in the Move Files dialog box.

  11. Click the symbol next to the pages folder in the site window to display the folder's contents.

    Figure 8Displaying folder's contents

    Now that you have finished adding files to the site, you can begin designing its pages. You'll start by creating a component for a navigation bar that you'll later add to each page in the site.

4. Creating a component to be used as a navigation bar | Next Section Previous Section