• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 3. Designing Web Pages > Adding images by dragging

Adding images by dragging

Now you'll add a third and then a fourth image to the page by dragging. These images also are part of the navigation bar for the site. You don't need to worry about aligning these images perfectly; you'll do that in a later section of the lesson.

1.
Drag the Image icon from the Basic set () in the Objects palette to the right of the Items In Stock image on the page.

2.
Drag repairs.gif from the images folder in the site window to the image placeholder on the page.

3.
Click the newly added image in the document window to select it.

Dragging image file from site window to placeholder

4.
In the Basic tab of the Image Inspector, enter Repairs in the Alt text box.

Now you'll add the fourth image to the page.

5.
Drag the Image icon from the Basic set in the Objects palette to the right of the Repairs image on the page.

6.
Drag appraisals.gif from the images folder in the site window to the image placeholder on the page.

7.
Click the newly added image to select it.

8.
In the Basic tab of the Image Inspector, enter Appraisals in the Alt text box.

9.
Choose File > Save to save navbar.html.

To add an image to a page, you can also drag the image file from the site window to the page, without using an image placeholder. Using a placeholder, however, gives you more control over the placement of the image.


Creating Web pages using Photoshop-based designs

The majority of Web design firms and professionals create their Web page layouts in Adobe Photoshop, including rollovers and animated GIFs, and then bring the designs into their Web pages. When you design a page layout in Photoshop, you can slice it into a table of individual images and GoLive will automatically put the slices into a custom HTML table in your page. When you save the Photoshop image for the Web, you can reformat the HTML and JavaScript code so that any rollovers are fully editable in GoLive. You can use any of these methods to add your Photoshop designs to your Web pages in GoLive:

  • Dragging a Photoshop image file from the site window into the page automatically creates a Smart Object link between Photoshop and GoLive. If the image is sliced, GoLive places the slices into a new table and saves each slice as a separate Web image. You can continue to update the design in Photoshop and GoLive automatically optimizes the sliced images for the Web. (See the Adobe GoLive CS Online Help.)

  • If you want to preserve multiple layers of a Photoshop design, you can import the layers of the image as individual Web images in layers (DHTML layers). Because the Web images are displayed in layers, you can completely reposition them, overlap them, and apply other actions to them such as the Show Hide action. (See the Adobe GoLive CS Online Help for information on hiding and showing layers.)

  • You can use your Photoshop-based design as a tracing image and save individual cutouts as Web images in layers. If you want, you can create a duplicate page that places the tracings in a table-based design by converting the layers to a layout grid. (See the Adobe GoLive CS Online Help for more information.)



PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint