Unit 12. Unit 13 Working with Layers

Unit 12. Working with Layers

We're going to a look at some of the characteristics of layers, and then work with them and apply some behaviors to them.

Introduction

Layers are squares that can be placed wherever you want in the Page, we can insert HTML content in them. Those layers can be hidden and overlapped between them. This gives you a great variety to design.

Layers can be moved from their positions by just clicking on the the white square in its lerft top corner, and whilst keeping the mouse pressed, dragging it to the new position. They can also can be resized by clicking on the black squares and dragging them until the size you want is reached.

You can insert text, tables, images, and flash animations inside the layer's square, and also all the elements that an HTML file can contain. This icon is used to select the layer when you click on it, and when you clear it, you are also clearing the layer.

Inserting a layer

Layers can be inserted in a Page through the Insert menu, and then selecting the Design object option, and Layer. Once the layer is inserted, you can edit its attributes by selecting it. You can select layers through many different ways. One of them is clicking on the icon. This is not useful when there are many layers in the same file because all layers have an image like this one associated, and it's very easy to select the wrong one.

When there are many layers in the same file, it's recommendable to select them through the Layers tab in the Design panel, which can be opened through the Window menu, and then the Layers option. If the Layers option isn't in the menu, it may possibly be in the Others option. Also, it can be opened just by pressing F2. In the panel are the names of all existing layers in the actual file, and you only need to click on the layer name to select it.

Layer format

Layer's properties are shown through its properties inspector Layer ID is the layer's name. You can change it through the Layers panel, and double-clicking it. L and T indicate the pixels distance between left and top limits of the document and the layer. W and H indicate the layer's width and the height. Z-Index is the depth order of the layer. This value can be changed through the Layers panel. A layer will be overlapped by others which greater Z-index. Vis indicates the inital view of the layer. Visibility can accept four types. Default (Browser view), Inherit (the layer of the Page that is being displayed is shown) Visible (It shows the layer although the Page isn't being seen) Hidden (the layer is hidden). You can also change the view through the Layers panel by clicking on the eye image. The open eye indicates Visible, and the closed eye indicates Hidden. Through Bg Image and Color you can indicate an image or a background color for the layer. Overflow controls how the layers appear in a browser when the content exceeds the specified size of the layer. Visible indicates that the layer would be amplified to make its content fit. Hidden specifies the additional content will not be shown in the browser. Scroll specifies that the browser should add scrolling bars to the layer although they are or not needed. Auto makes the browser show the scrolling bar when they are needed (when the layer content is bigger than its limit).

To practice you can perform the Step by step exercise on Inserting a Layer. 

Unit 13. Using behaviors (I)

In this unit we're going to learn the basic characteristics of the behaviors, and also look at a pair of examples of possible applications.

Introduction

behaviors are actions that happen when the userdoes something over an object, for example moving the mouse over an image, clicking on a text, double-clicking on an image map, etc. behaviors don't exist as HTML code, they are programmed with JavaScript. Dreamweaver allows you to insert them through the Behaviors panel, so it is not necessary to write a JavaScript code line to program them. The image below has a behavior associated. Place the mouse over it to see what happen. You are visualizing a layer that was hidden. If you move the cursor off the image, the layer will be hidden. The image has two behaviors associated to show and hide the layer. We'll look at this kind of behavior later. Other behaviors you have seen are the ones applied to sustitution bars and browser bars, they are predefined, and for this reason it isn't necessary to introduce the set of behaviors through Behavior panel. To validate forms you saw some of the caracteristics of Behavior panel. Let's remember which we need to insert behaviors later. The Behavior panel can be opened through the Window menu, and then the Behaviors option, also by pressing Shift+F3.

In this panel you need to click on the button, and in Show events for selecting a version from the browser list. Some behaviors don't work with some browsers. Depending on the selected browser, you will see or not some of the possible behaviors. There are many behaviors for Internet Explorer but they don't work with Netscape. As most users use Internet Explorer, let's select this browser. You can select from one of its latest versions: IE 5.5 o IE 6.0. Once the browser is selected it's not necessary to re-select it the following time you want to insert any behavior.

Inserting a behavior

When there is an established browser, you can insert behaviors. The first thing to do is to select the object on which the behavior is going to be applied, it can be an image, a text fragment, etc. When you click on the button of the Behavior panel you will see the Show Events for option. Also, you will see a list of all possible actions in the browser previously selected, so you can select one. Depending on the element on which you want to apply the behaviuor, you can select some actions, and others not.

In this case the Validate form action cannot be selected because there isn't any form in the Page. After choosing any action, the corresponding behavior appears in the Behaviors panel. In this case, two behaviors have been inserted. As you can see, each behavior has an action and an event associated to it. Actions are the ones which have been selected in the previous list, and the event indicates the action by itself (when it is done).

To clear any behavior, you need to select it in the Behaviors panel and click on the button. You can also change the order of the behaviors applied to an object, by selecting them and arranging their order through the buttons.

Unit 13. Using Behaviors (II)

Show and Hide layer behavior

One of the most habitual and interesting behaviors is Show and Hide layers. It is obvious that when you want to apply this behavior there need to be layers present in the document.

In the previous Page you had an example of this type. Let's see which events and actions you need to establish in order to produce the behavior. After selecting the image you need to select an action from the list by clicking on the button. In this case the action has to be Show-Hide layers After selecting the action, you must specify which layers have to be shown and which hidden for the event. For this you need to click twice on the action in the Behavior panel. A new window is then shown, with the list of all the layers in the page, where you can indicate the view variation for each one of the layers.

You can indicate whether they are going to be Shown, Hidden, or if they are going to acquire the initial view (Predetermined). To determine the state of each one of the layers it's necessary to select them one by one, indicating the state through the buttons at the bottom of the window.

It's not necessary to apply a different view to all the layers of the page, only the ones you want to change at the moment of producing the event. For example, in this case the "catmonth" layer has not been applied a different view, because we don't want it to change when the event plays out. If you want to clear an established view for any of the layers, you only need to click again on the button of the applied view. For example, to clear the view applied to the "catweek" layer, we would have to click again on the Show button. You need to be careful about what you want - in this case it is that when you place the mouse on the image the layer is shown, and when the mouse is out of the image the layer is hidden again. For this you need to insert two Show-Hide layers behaviors with the action. One of them will show the layer for the event onMouseOver (when the mouse is over), while the other will hide it for the event onMouseOut (when the mouse is out).

Using JavaScript Code

Another behavior that can be applied on any object is Call JavaScript. This behavior allows us to insert JavaScript code inside the file. For example, it's possible to make the browser window close when you click on an object. To do this you need to insert a "window.close();" JavaScript line. The same as the layers example, the first thing to do is to select the object on which the behavior is going to be applied. After this you need to select the Call JavaScript action through the button. Then a new window shows up and you now need to introduce the JavaScript line.

Once the behavior is inserted in the Behavior panel, you need to establish an onclick event to produce the call to JavaScript when clicking on the object. By clicking twice on the action the previous window is opened again, and it's possible to modify the line code.

To practice you can perform the Step by step exercise on Inserting behaviors