Whenever you see the term “AP Layers” in Dreamweaver, it refers to DIV elements which has been given the “Position:Absolute” setting. From a page layout point of view, the DIV element is essentially a box, an arbitrary container for other HTML elements. Adding the “Position:Absolute” setting allows you to position the DIV precisely in the browser window, using the settings Left, Top, Width and Height. Although you can create all of this manually in code, Dreamweaver treats it as a special item and allows you to manipulate it visually.
To create an AP layer in Dreamweaver, choose Insert – Layout Objects – AP layer. Dreamweaver also has a special tool which allows you to draw a layer located in the Layout category of the Insert panel. Having clicked on the tool, simply draw a rectangle anywhere on the page.
To enable you to easily manipulate layers, Dreamweaver provides the AP Elements panel. First of all, the AP Elements panel allows you to quickly select a layer by clicking on its name. Secondly, you can change the name of layer by simply double-clicking on the existing name, entering a new name then pressing Enter. You can also set the initial visibility of the layer by clicking on the visibility icon (an eye): a closed eye means hidden and an open eye visible. As well as this, you can specify the stacking order of layers by dragging the name of layer up or down in the AP Elements panel.
Once you have selected a layer using the AP Elements panel, you can of course manipulate it directly on the HTML page. You can pick up the layer and move it any location. You can also resize a layer by dragging one of the corner handles.
For a bit more precision, you can use the Properties panel to change the attributes of the layer. The Layer ID setting corresponds to the name displayed in the AP Elements panel and is used to uniquely identify the layer. It is also used to create the CSS rule which controls the layer behind the scenes. The L and T settings represent the absolute position of the layer from the left and top of the browser window, respectively. Similarly, W and H are used to set the precise width and height of the layer.
Another setting you can use is Overflow. This determines what happens when there is more content in a layer than its size permits it to display. If the Overflow is set to Visible, the layer grows to display all of the contents. Perhaps the most useful setting is Auto which leaves the layer at the size specified by the W and H settings but creates scrollbars for the user to display any hidden content.
If you would like to learn more about Dreamweaver training courses, visit Macresource Computer Training, an independent computer training company offering Dreamweaver Classes in London and throughout the UK.