Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Adding Layers
In this exercise, you will learn how to create Layers on your page and insert images and text inside them. Then—presto, you'll be able to move everything around. Ahh, the beauty of Layers!
-
With index.html still open from the last exercise, choose Insert > Layer. This will insert an empty Layer in your document, in the form of a rectangle on the top left of your screen (see Figure 6).
-
Click the white Layer Selection Handle. This will cause eight resizing handles to appear around the Layer (see Figure 7).
-
Using the Layer Selection Handle, move the Layer so its upper-left corner aligns with the photo of the desk that is visible in the Tracing Image (see Figure 8).
-
Click inside the Layer. You should see a blinking I-beam cursor inside the Layer.
-
Choose Insert > Image.
-
Browse to monterey3.jpg inside the images folder on the H.O.T CD-ROM (see Figure 10). Click Choose.
-
In the Common Objects palette, click the Draw Layer object (see Figure 12). If you have a different Objects palette visible, click on the small arrow at the top and select Common to switch back to the Common Objects palette.
-
With this tool selected, draw a Layer around the large center image of the bed (see Figure 13). You've just inserted a Layer by using the Objects palette instead of the Insert menu. Either way works fine, and you have now been exposed to both.
-
Click inside this Layer and click the Insert Image object in the Objects palette (see Figure 14).
-
Browse to monterey1.jpg inside the images folder. Click Choose.
-
Add another Layer around the small image of the window. You can use either the Objects palette or the Insert menu to accomplish this.
-
Choose Insert > Image and browse to monterey2.jpg inside the images folder. Click Choose.
-
Add another Layer around the words "The Monterey Room" at the upper-left corner of the page.
-
Click inside the Layer around the words "The Monterey Room," then choose Insert > Image and browse to monterey.gif inside the images folder. Click Choose. If you have trouble aligning the image, select it by using the selection handle and use the arrow keys on your keyboard to nudge it into place.
-
So far you have inserted images into Layers. Inserting text is just as simple. Add another Layer around the two lines of text at the bottom of the screen (see Figure 15).
-
Click inside the Layer and type "The Monterey Room. A charming brass double bed completes this cozy room with a balcony affording both city and mountain views. This room has a private bath." For the purpose of this exercise, don't worry about matching the type of the original layout. If you need a refresher on type, revisit Chapter 7, "Typography."
-
Press F12 to preview this page in a browser. When you are finished, return to Dreamweaver and save the file. Leave the file open for the next exercise.
){kind=link}
){kind=link}
){kind=link}
Using the bottom-right resizing handle, resize the Layer so that it fits around the edge of the desk image. Notice the yellow thingie in the upper-left corner? (See Figure 9) It's called an Invisible Element in Dreamweaver. If you deselect the Layer by clicking outside its boundaries, you'll see that the Invisible Element is deselected as well.
){kind=link}
){kind=link}
An image is now inside the Layer. Notice how this image is darker (see Figure 11), while the Tracing Image is screened back? That's because you set the Tracing Image's opacity to 50% in the last exercise. This makes it easy to decipher between the layout and the final artwork.
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
This is what your page looks like now. Most likely your text won't perfectly match the Tracing Image. That's all right—the Tracing Image is there only as a guide.
){kind=link}