Al's TAFE Certificate IV I.T. (Website Design) Exercises

Client Side Script 3

Lesson 3 » Produce Client Side Script – Controlling Layers on your WebPages with JavaScript.

Layer Basics

• Layers are used to produce pixel precise positioning of elements on your web pages. This means that you can place things overlapping other page elements, such as some text overlapping a picture on your page. But some of the most common use of layers is for things like: -

  1. Image swapping where the images have different dimensions
  2. Display of pop-up text messages
  3. Moving elements around the screen
  4. Incorporating DHTML visual effects
  5. Building drop-down or fly-out menus
     
• One limitation is that layers don’t work well in Netscape, but as only about 1% of people use Netscape it is not so critical, and you can always use a JavaScript browser detect and deliver different pages for your Netscape users.
  
• Layers also bring together some of the things you learned in CSS, and some of the things you are learning in JavaScript, in the cutting-edge CSS positioning techniques.

Activity One

• See http://www.oceanworld.com.au/ . What do you like or dislike about the use of layers on this site?
  
• Like:
  the random movement of the bubbles, the animation effects of the creatures, the mouse over effects,
  
• dislike:
  IE – I could see the joins in the pictures/layers,
  FireFox – with large resolution the page kept refreshing and moving content within the page as each bubble entered the page from the bottom,
  There was a big speed difference with the bubbles in IE & FireFox.
  
• XHTML we learned that the way things should be going with the web is to have the formatting coding separated from the basic page content. In other words by using external style sheets. This should mean that the control of the layers is done by an external style sheet and this approach is known as CSS Positioning or CSS-P. But Dreamweaver uses an inline CSS declaration instead of an external style sheet. Maybe Dreamweaver 7 will do it properly. But even the way Dreamweaver does it now can give you some incredibly powerful design options. With layers in Dreamweaver you can now position elements wherever you like on the page and have them move or overlap with great flexibility and precision.
  
• The big risk with using layers is that only IE4.0 and above support them.

Activity Two

• Check out the support for HTML layers now and see for yourself. Write down the browser support here.
  
• Layers are supported in later versions of browser, but older versions (pre v4.0) don't support all elements. Elements like <LAYER> and a collection of objects like document.layers[ ] (Netscape 4) or document.all (Internet Explorer 5+), for example, are actually not a part of any web standard. Browsers that comply with the W3C web standards, such as Firefox, Mozilla and Netscape 6/7, do not support these non-compliant elements well.
  
• Dreamweaver uses two HTML tags to code its layers; <div> or <span>.<div> which is a block level element and <span> which is an inline element.
  
• The coding for a single layer looks something like this: -

  <div ID="Layer1" STYLE="position:absolute; left:150px; top:80px; width:350px; height:165px; z- index:1"></div>

   

  The code for nested HTML layers is like this: -

  <div ID="Layer1" STYLE="position:absolute; left:150px; top:80px; width:350px; height:165px; z- index:1"></div>

  <div ID="Layer2" STYLE="position:absolute; left:80px; top:50px; width:195px; height:65px; z- index:1"></div>

Layers in Dreamweaver

• In Dreamweaver creating layers is easy, but you need to remember that: -
  1. Plenty of code is being created for you to have these features that you should understand
  2. This code will not work in all browsers well as discussed above.
     
• To create layers in Dreamweaver you need to use the layer tool on the Dreamweaver common toolbar.
  
• To draw multiple layers in Dreamweaver MX you need to hold down the control Key while drawing several layers.
  
• Layers will produce Invisible elements in Dreamweaver MX known as layer markers. These help you to locate where the code for the layer is, because with absolute positioning sometimes it is hard to tell where the code for each layer is in your HTML page.

<div ID="Layer1" STYLE="position:absolute; left:150px; top:80px; width:350px; height:165px; z- index:1"></div>

The Layers panel in Dreamweaver MX

• The Layers panel (F2) or Window/ Others/ Layers, allows you to manage the layers on your page more effectively.
  
• In the Layers panel you can control the visibility of each layer, the z-index of each layer, and even the overlapping of layers. Layers that don’t overlap have better browser support than those that overlap. Also layers that don’t overlap can be converted into tables for even better older browser support.
  
• There are several ways you can select layers and three states of layers that we will explore.
  
• Labels should be named appropriately; especially as later we will be looking at referencing the layers with JavaScript functions. Choose names that are appropriate to what the layer is going to be used for, such as LayerNav or LayerRollover, or LayerMenu.
  
• Layers can be: -
  1. Resized,
  2. Moved around the page. To move one pixel at a time use the arrow key. To move by ten pixels at a time use Shift plus arrows,
  3. Aligned. This allows you to align groups of layers to the position of one of the layers. The last selected layer will be the one that the other layers will align to, and this one will be highlighted by having black handles on it. Align using Modify/Align,
  4. Matched in Layer Size, by using Make Same Width or Make Same Height. They will be aligned to the last layer selected,
  5. Nested inside one another,
  6. Deleted,
  7. and of course content can be put into layers by several means. One method is by using the Insert menu.

Layer Properties

• Some of the properties in the Layer Properties box are: -
  1. Tag – either <div> or <span> will work in IE4+ or Netscpae4+.
  2. Layer ID is a layer name for referencing layers, especially in scripts.
  3. L & T describe the position of the top left corner of the layer relative to the page or whatever element the layer is contained in.
  4. W & H describe the width and height of the layer element.
  5. Z-index specifies where the layer sits in relation to other layer elements on the same page if they overlap. For example Z-index 1 will always be on top.
  6. Background Colours and Background images
  7. Vis (Visibility) allows you to make layers visible or invisible. You may want to reveal a layer that has been hidden by using a JavaScript event to reveal it. For example in a mouseover event.
  8. Overflow allows for text that may be caused to spill out of the layer by some browsers to overflow, rather than being cut-off.
     
• Clip will clip or hide a portion of the layers content

 

Exercise Three

• Create a page in Dreamweaver MX using three layers with three different coloured backgrounds.

• In one of those layers use a background image, and in the other two put some text. Align the three layers to the top of the page and resize then to have an equal width. Allow scroll on one of the layers with text, and clip the other layer with text.

• my layers page
  
• Preview in IE browser, then in Netscape browser.

Layer Preferences

• In Edit/ Preferences/ Layers you can set how all layers that you create will coded. This gives you some control especially if you need to use lots of layers in a web project. When viewing layer pages in Netscape 4 if the browser window is resized the layers may do strange things. If you tick the Netscape compatibility box then this will add some JavaScript to your pages to cause the page to be refreshed when resized so that the layers load properly and don’t mess up.

 

Layers converted to tables

• There are two options that Dreamweaver MX presents for dealing with layers and older browsers. Modify/ Convert/ Layers to Tables, will convert all the layer coding on your page into tables so that the page will work in older browsers. Another similar fix is the File/ Convert/ 3.0 browser Compatible, which will leave the existing page and its layer code intact, but will create a duplicate page with both layers converted to tables and no CSS style code, so that the page works in the older browsers. Then you can use some browser detection JavaScript to serve up the appropriate page depending on your user's browser.

True CSS-P Pages

• As mentioned near the beginning of these notes Dreamweaver MX creates inline CSS styles for layer positioning. You can, however, create true CSS Positioning using an external style sheet, by defining a custom CSS class and then setting the layer positioning for that custom class. This custom class can then be applied to page elements to create CSS-P layers.
  
• The following is taken from Week Three of your CSS Notes and it is where we covered the use of CSS-P layers in Dreamweaver.

Positioning
  

• This is the main means to control where page elements will appear on your page. CSS positioning can be applied to most block level elements, but they are generally used with layers. Layers are really <div> tags that contain an inline style using absolute positioning, (which we learned about in week 2 of CSS). Check for browser support. The options are: -
  1. Type – what kind of positioning are you using; absolute, relative or static.
  2. Visibility – controls the initial visibility of the element. Can be hidden when the page is loaded.
  3. Width – Defines the width of the block element.
  4. Height – defines the height of the block element.
  5. Z index – determines the stacking order of the elements, or what goes behind or in front of what.
  6. Overflow – If the content of a layer is larger than the layer size this determines what happens to the overflow. Options are visible, hidden, scrollbars or auto.
  7. Placement – where the layer will display.
  8. Clip – specifies the part of the layer that is visible, and can be used in combo with JavaScript to create some interesting effects.
     
• To use the CSS-P style in pages you first need to link those pages to that external style sheet. Then use the following method to work with that style information.
  1. Create a layer using the methods we have already shown by drawing the layer on your page.
  2. Apply your custom style class to the layer element.
  3. Then you will need to remove the inline style information from the HTML code, as this inline style info will always override the external style.
     You can do this in the Tag Editor (Modify/ Edit Tag), or in the Tag Inspector (Window/ Tag Inspector)(F9) and remove all the inline style information.
  4. Now the layer will adopt the external Style Class control.
  5. You will now also find that this newly positioned layer is editable by Dreamweaver MX in the Property Inspector as if it were a normal Dreamweaver MX inline style created layer.
  6. If you edit the layer features in the Property Inspector the changes will be applied to the external style sheet settings.
     
• I've attached my CSS to a layer on the bottom of this page. Click here!
  
• You can also apply your external layer style to any Block Element on your page.
  
• CSS-P layers is the way of the future for web design layout!!