Laying Out the Page in GoLive

Now it's time to pull everything together, so let's switch back to GoLive. You'll begin by creating a new web page. First Ctrl+click (right-click) in the left side of the Site window to bring up the contextual menu, and then choose New, HTML Page (see Figure 16.25). Rename the file index.html and double-click on the page file to open it.

Figure 16.25. Creating a new HTML page.

For this page, you'll use CSS to define your layout instead of using tables. This will result in more efficient code and a page that will work better on a variety of browsers and devices. Select the Layer tool from the toolbox, and draw a layer across the top of your page (see Figure 16.26).

Figure 16.26. Creating a CSS layer in your HTML page.

In the Extras tab of the site window, click on the triangle for SmartObjects to reveal the content of the folder. You'll notice that all the art that you created before appears there. Drag the navigation file that you created using Photoshop and ImageReady from the SmartObjects folder into the layer that you just created (see Figure 16.27). This creates a smart object in your layout automatically. When the Variable Settings window appears, just click OK because you don't want to change any of the text in the file.

Figure 16.27. Dragging a smart object into the CSS layer.

In the Save for Web dialog box that appears next, set the slice optimizations for each of the slices and click Save. Choose to save the contents in the site's Root folder (see Figure 16.28). You should now see the navigation bar in your layout (see Figure 16.29).

Figure 16.28. Saving the components of the smart object in the Root folder.

Figure 16.29. The navigation bar as it appears in the layout.

Use the Layer tool to create another CSS layer just below the first one (see Figure 16.30), and then drag the Illustrator text headline from the SmartObjects folder into it. Because GoLive sees the native Illustrator file, it asks whether you want to have the object converted to a bitmap format or other vector formats that are supported on the Web. In this case, choose Bitmap Format. Optimize the file in Save for Web, and click the Save button to save the image in the root folder (as you did earlier).

Figure 16.30. The second CSS layer beneath the first one.

The graphic is a bit small, so switch the Standard Editing tool and grab one of the corners of the graphic while holding the Shift key and make the image bigger (see Figure 16.31). Because it's a smart object, you'll notice that after you resize the graphic, GoLive rerenders it so that it looks perfect.

Figure 16.31. Scaling the smart object to be larger.

Draw yet another CSS layer near the lower-right side of the page, and drag the image of the couples walking along the beach into this layer. Because it's a photograph, you should choose to optimize the file as a JPEG in the Save for Web dialog box. Save the image to the Root folder as you did the other files. The image is obviously too big (see Figure 16.32), so you're going to scale it and crop it to look better.

Figure 16.32. The image is too large for this layout.

With the image selected, click on the Crop Image button in the Inspector palette and draw a box around the area of the image you want to remain (see Figure 16.33). It might be helpful to enlarge the page window so that you can see more of the image. Click on the Crop Image button in the main toolbar (see Figure 16.34) to crop the image; the image appears cropped.

Figure 16.33. Specifying the crop area.

Figure 16.34. Applying the crop setting.

Using the Standard Editing tool, resize the image to fit better within the page design (see Figure 16.35).

Figure 16.35. The final cropped and scaled image in place.

You're now ready to add some text. Drag one more CSS layer on the left side of the page. Add some copy (I copied and pasted the first paragraph of text from the brochure file in InDesign) and apply the Paragraph tag (see Figure 16.36).

Figure 16.36. Adding copy and applying the Paragraph tag.

At the top of the document window, click on the title of the page and rename it to "Relax. Revive. Refresh."

Adding a Favicon

Before wrapping up this project, let's add a favicon to the web page. This will display an icon in the URL area of the web browser when the page is viewed.

Start by first creating the necessary .ico file. From the SmartObjects folder in the site window, click once on the sunflower icon file that you created in Illustrator to highlight it. In the Inspector palette, click on the Smart button and then click on the Create Smart Favorite Icon button (see Figure 16.37). When the Settings dialog box appears, click OK to create the needed files. Save the .ico file in the Root folder of the site.

Figure 16.37. Clicking on the Create Smart Favorite Icon button in the Inspector palette.

At the top of the document window, click on the triangle that appears to the left of the word "Head" to toggle the head section of the page (see Figure 16.38). From the toolbox, choose to view the Head group of objects (see Figure 16.39), and drag the Favorite Icon object into the head section (see Figure 16.40).

Figure 16.38. Viewing the head section of the page.

Figure 16.39. Choosing to view the Head group of objects from the toolbox.

Figure 16.40. Dragging the Favorite Icon object to the head section of the page.

From the Inspector palette, point the source to the .ico file that you saved in the root folder of the site (see Figure 16.41). Save the document.

Figure 16.41. Pointing the source for the favorite icon to the .ico file in the site window.

Preview the Web Page

Click on the Preview button at the top of the document window to see what your page will look like in a web browser. Notice the favicon in the URL field and how the rollovers work when you run your mouse cursor over the buttons in the navigation bar (see Figure 16.42).

Figure 16.42. The final web page, as previewed in the Firefox browser.

Did you Know?

Depending on the web browser you are using, you might not see the favicon display correctly when using the Preview in Browser feature. Some browsers, such as Apple's Safari, require that the favicon be loaded on the site's server before it will display correctly.

Congratulations, you've created a web page!