Ten Ton Dreamweaver [Electronic resources] نسخه متنی

1.

Create a new, blank web page in Dreamweaver.

As you're drawing layers, you might find Dreamweaver's layout grid helpful. To turn it on, choose View > Grid > Show Grid.

2.

Open the Layers panel by choosing Window > Layers.

The Layers panel is empty because there are no layers yet on your page.

3.

If it's not already onscreen, open Dreamweaver's Insert bar (choose Windows > Insert); then switch to the Insert bar's Layout category.

4.

In the Layout category, click the Draw Layer button.

The cursor changes to a crosshair.

Noteworthy

To draw more than one layer at a time, hold down Ctrl (Windows) or Command (Mac) before you click and drag. This will keep the Draw Layer button activated, allowing you to draw additional layers without having to reclick the button.

5.

Click the cursor on your web page and drag a rectangle to draw a layer.

Don't worry about precision right now, when you're drawing your layers. You'll set their size and position in a moment, so the initial size and placement don't matter.

An alternative way to draw a layer in Dreamweaver is to place the insertion point on your page and then choose Insert > Layout Objects > Layers. The size and properties of the layer are determined by Dreamweaver's layer preferenceschoose Edit > Preferences (Windows) or Dreamweaver > Preferences (Mac); then click Layers in the Category list.

A blue box appears on your page, representing your new layer. If you click outside the layer, the blue highlight disappears. To make it reappear, click inside the layer again. In the Layers panel, you'll see Layer 1, which also represents your layer.

6.

Select the layer by clicking the layer's selection handlethe box above the layer's top-left corner.

Alternatively, you can Ctrl+Shift+click (Windows) or Command +Shift+click (Mac) a layer to select it.

To select more than one layer at a time, hold down Shift and click the layers, the same way you select multiple objects in a word processing program.

When a layer is selected, resize handles appear on all four sides and in all four corners of the layer.

7.

In the Property Inspector's Layer ID field, give the selected layer a unique name.

Dreamweaver sequentially names your layers for you as you draw them. Every layer on your page must have a unique layer ID. Layer IDs are used when controlling layers with CSS or when using Dreamweaver's behaviors to manipulate layers. You can leave the layer's default layer ID, or you can replace it with a more descriptive name. For example, if your layer will hold a navigation bar, you might name it NavBar to help you remember what the layer is for. Layer IDs must begin with a letter and can consist of only numbers and letters.

When you change the layer ID in the Property Inspector, the Layers panel changes to reflect the new name.

8.

Set the position of your layer on the page by doing one of the following:

Drag the layer's selection handle to place your layer visually.

If you're coming from a print design background, you'll find dragging layers very similar to moving objects around in a page layout program. Yayweb design finally catches up to circa 1986 desktop publishing!

Use the arrow keys on your keyboard to move the layer in one-pixel increments.

Hold down Shift and use the arrow keys to move your layer incrementally according to Dreamweaver's layout grid.

Use the Property Inspector's L (left) and T (top) fields to set the position of your layer in relation to the left and top edges of your page.

This is the most precise way to position your layernot only can you enter positive values, but you can use negative ones, too. If you're familiar with X-axis and Y-axis positioning, perhaps from the print-design world, then you should be right at home here.

9.

To size your layer, pull any of the layer's resize handles that appear around its outside edge.

Alternatively, you can enter values in the Property Inspector's W (width) and H (height) fieldsa much more precise way to size your layers than eyeballing them.

Chapter 3 about the visible area within web browsers. Essentially, your layers will be dividing up the visitor's browser window, so be sure to create them so that they appear on the screen in a way that suits the goals of your web site layout.

Noteworthy

When you set values in the Property Inspector to position a layer (the L and T fields) and resize a layer (the W and H fields), the values are measured in pixels (px). However, you can also use millimeters (mm), centimeters (cm), picas (pc), points (pt), inches (in), or percentages (%). Just type the appropriate abbreviation directly after your numeric value in the Property Inspector.

10.

Save your work.

[View full size image]

If you have multiple layers that you want to make the same size, hold down the Shift key and click the layers to select them. Then choose Modify > Arrange and then either Make Same Width or Make Same Height.

Noteworthy

If you want to align two or more layers to one another, hold down the Shift key and click the layers to select them; then choose Modify > Arrange and choose an alignment option: Align Left, Align Right, Align Top, or Align Bottom. All selected layers align with the border of the last selected layer. Sure beats eyeballing it!

11.

Repeat steps 4 through 10 to continue drawing the other layers that you need for your layout.

12.

To remove a layer from your page, select it by clicking its selector handle and then press Delete.

1.

To nest a layer inside another layer, place the cursor inside an existing layer; then choose Insert > Layout Objects > Layer.

You can nest one layer within another layer. Doing so groups the layers together: wherever one goes, the other follows.

Dreamweaver inserts a layer within the existing layer and highlights it in blue. In the Layers panel, the nested layer is shown indented under its parent layer.

[View full size image]

2.

Set the layer ID. Use the L and T positioning fields in the Property Inspector to position the nested layer within its parent layer.

3.

Save your nested layer.

Now you can move the outer layer to wherever you want on your page. The layers will move all together. The outer layer also controls the visibility of nested layers.