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

Lesson 3. Designing Web Pages > Adding the second layer

Adding the second layer

Now you'll add a second layer to the page that will contain a description of the guitar shown on the page.

1.
Position the pointer immediately to the right or immediately below the yellow layer marker.

2.
Double-click the Layers icon in the Objects palette.

The second layer appears.

3.
In the Layers Inspector, enter Description in the Name text box to name the second layer.

For now you'll move the Description layer to an empty area of the page.

4.
Move the pointer over an edge of the Description layer, so that the pointer turns into a hand pointing left. Then drag the Description layer to the right of the Image layer.

Dragging second floating box to right of first one

Now you'll add text to the Description layer. You'll enter a description of the guitar shown on the page.

5.
Click inside the Description layer, and type 1981 Gibson ES-347. Then drag to select the text you've just typed, click the Bold button () on the toolbar, and choose 5 from the Font Size menu on the toolbar. If you have difficulty selecting the text, enlarge the layer slightly.

Now you'll add color to the selected text using the emphasis color stored in the custom color palette.

6.
In the Gage Colors folder in the site window, select the emphasis color, so that it appears in the preview pane.

7.
Drag the color from the preview pane to the selected text on the page.

The color of the text changes to red.

8.
Click in the blank space outside the selected text to deselect it.

Now you'll precisely position the Description layer using the Layer Inspector.

Note

If the values used in this section don't work for you, you can adjust them as necessary. Use the values given as a guide.

9.
Move the pointer over an edge of the Description layer, so that the pointer turns into a hand pointed to the left. Then click an edge of the layer to select it.

10.
In the Layers Inspector, enter 300 for Top, and enter 250 for Left. Press Enter or Return.

The layer is repositioned 250 pixels from the left edge and 300 pixels from the top of the page.

Now you'll resize the layer using the Layer Inspector.

11.
In the Layer Inspector, enter 250 for Width, press Tab to jump to the next text box, and enter 100 for Height. Press Enter or Return.

The layer is resized to 250 pixels in width and 100 pixels in height.

Repositioning and resizing layer

You can also resize a layer by selecting it and dragging one of its handles.


12.
Choose File > Save to save hottest.html.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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