Not ready for prime time.

The Goals

• Learning how to Create, Name, and Modify Layers, and Change Stacking Order of Layers

Notes about the sections below

• section 1 - Goals and Notes
• section 2 - Creating Layers
• section 3 - Naming Layers
• section 4 - Modifying Layers
• section 5 - Changing the Stacking Order of Layers
• section 6 - Reserve
• section 7 - Reserve

This tutorial requires the Yoga Songha files be placed in the expected folders.

And the Yoga Songha site has to be created correctly (if it does not exist).

• 307 a layer is a rectangular container for HTML content
•     that you can position at an exact location in the browser window
•     layes can contain text, images, tables, and even other layers
•     anything you can place in an HTML document can be placed in a layer
•     layers are especially useful for placing elements atop each other or making them overlap
•     layers are supported by version 4.0 and later browsers
•     they can control layout and appearance when used in combination with Cascading Style Sheets (CSS)
•         and they provide interactivity when used in combination with behaviors
• 307 in this lesson you will learn several ways to create layers in Dreamweaver
•     you will draw a layer on the page to the size you want
•         and place a layer on the page using a predetermined width and height
•     you will learn to modify layer attributes including size, placement, and visibility
•     you will also convert your layers to tables to make it possible for users with older browsers to view your pages
• 307 you will create layers, place text and images in them, move them to exact locations on the page, and change their properties
•     you will also learn about layer-based animations that make use of multiple layers in a timeline with keyframes to control visibility and create movement
• 308 you will learn how to create layers, name layers, modify layer sizes and locations
•     use layers to control content on your page, change the stacking order of layers
•     nest and unnest layers, change layer visibility, set rulers and grids
•     use a JavaScript fix for a Netscape bug, learn about timelines
•     make pages designed with layers compatible with earlier browsers
• 308 Lesson Files
•     Media Files
•         Lesson_09_Layers/Images/... (all files)
•     Starting Files
•         Lesson_09_Layers/layers.html
•     Completed Project
•         Lesson_09_Layers/Completed/layers.html
•         Lesson_09_Layers/Completed/layers_table.html
•         Lesson_09_Layers/Completed/transparent.gif
• 309 a layer is simply a container, known as the (div) tag, that makes use of soecific CSS properties (absolute positioning and z-index) that allow it to overlap other elements
•     there are several different ways to create a layerthe method you choose might depend on how you plan to use the layer and where you want to place it
•     309 open the layers.html from the Lesson_09_Layers folder
•     switch to the Layout category on the Insert bar and verify that the Standard button is selected
•         to accomplish this, underneath the menu bar, you should see Common with a down arrow
•         click the down arrow, a submenu is displayed
•         click on Layout
•         to the right are three buttons, than you see a white fourth button that displays Standard
•         if the Standard button is selected it will be white
•         if the Expanded or Layout button is selected, that button would be white
•     Standard view is the default, you must be in Standard view to create a layer
• 309 click the Draw Layer button (just to the left of the Standard button) in the Layout category of the Insert bar
•     move the pointer into the Document window, then click and drag to create a new layer on the right side of the page
•         the pointer changes to a crosshair (+) when you move the pointer into the Document window
•         when you do this, you will see a blue bordered rectangle, with a little square in the top left corner, this is a new layer
• 310 Edit, Preferences
•     in the Category list, select Invisible Elements
•     to the left where all the checkboxes are, select the checkbox for Anchor points for layers
•     click the OK button
•     you should now see a layer marker at the top left of the Document window
•         thats the yellow icon with the letter C in it, thats the layer marker
•         in the Document window, the layer marker may shift the container to the right
•             this will not happen on a browser, only the Document window of Dreamweaver
•         to hide the marker, do the following
•             View, Visual Aids, Invisible Elements
•             when you click Invisible Elements, you remove the checkmark, and you hide the Layer Marker
•             if you select Invisible Elements again
•                 you place the checkmark into the submenu
•                 and unhide (show) the layer marker
•     by default, the layer code is inserted at the top of the page
•         just after the (body) tag
•     Dreamweaver uses the (div) tag to create layers that use absolute positioning to determine the placement of the layer in relation to the top and left sides of the browser window
•     the (div) tag is a block-level element
•         which is a container that structures portions of your page
•         it begins on a new line or a new block
•     other block-level elements include (p) paragraph and (ul) unordered lists
•         block-level elements can contain other block-level elements as well as inline elements
•         inline elements usually contain only text and other inline elements
•             and are used within block elements
•             they do not create new blocks or lines
•             some examples of inline elements include (span), (br) line break,
•                         and (a) anchors, otherwise known as links
• 311 position the pointer over the border of the layer
•     when the pointer changes to a four-headed arrow, click to select the layer
•     when the pointer rolls over the lines that indicate the border of the layer
•        the lines turn red to indicate that you can select the layer
•        note the square handles on the border
•        the square tab at the top left is the layer selection handle
•        the blue squares on the border are the sizing handles
• 311 place the insertion point inside the layer
•     you should notice a yellow blinking line, thats the insertion point
• insert a table into the layer with the following attributes
•     1 row
•     1 column
•     width - 300 pixels
•     border of zero
•     cell padding of 5
•     cell spacing of zero
•     no header
•     no caption
•     no summary
•        here is how to do it
•        click the Table button to the right of the Layout down arrow
•        the Table dialog box is displayed
•        use the attributes described above to create the table the way the book wants you to
•        after setting all the attributes
•            click the OK button
•        the Table dialog box disappears
•        the table is in the container
•        you see two green lines, the bottom one displaying the fact that the width of the table is 300
•        the layer expands if necessary to accomodate the size of the table and the text that table contains
•               layers expand to show you all their content unless you change the overflow setting in the Property inspector
•               the layer does not change size if the container is larger than the image
•     the Properties Inspector, the pane at the bottom of the window
•               is displaying the attributes of the table
•               hoover over the buttons to look at their screen tips
•     the Status bar displays (body)(div#Layer1)(table) on the left
•               on the right side of the status bar are several buttons
•               hoover over them
•               here are the names of the buttons
•                             Select tool, Hand tool, Zoom tool, Set magnification-set at 100%, Window Size-which changes when you resize the Dreamweaver window, then you might see (1K/1 sec)
•     click the border of the layer
•               use the square tab at the top left of the layer, known as the layer selection handle
•                             drag the layer to the right side of the document
• now we are ready to insert a text file from the Lesson_09_Layers/Text folder
•     the name of the text file is about.txt
•     here is how to do it
•         311 from the Files panel, select the plus sign in from of the Lesson_09_Layers/Text folder
•             you should see the reference to the about.txt file
•             double-click the file to open it in the Document window
•         notice the insertion point in the beginning of the document
•         from the File menu
•             Edit, Select All
•                 all the text inside about.text is selected
•             Edit, Copy
•             from the Document window, click the tab for layers.html
•             place the insertion point inside the table from the layer
•             Edit, Paste
•                 all the text from about.txt is now displayed inside the table from the layer
•             close the about.txt from the document window
• 312 place the insertion point outside the layer
•     click the Draw Layer button and draw a small second layer on the left side of the page
•     from the Lesson_09_Layers/Images folder
•         insert studio-om.jpg image into the layer
•     here is how to do it
•         click inside the second layer to place the insertion point
•     select Insert from the menu bar
•     select Image from the submenu
•         the Select Image Source dialog box is displayed
•     navigate to the Lesson_09_Layers folder, and double-click it
•     double-click the Images folder
•     click the studio-om.jpg file
•     the image should display itself in the Image preview pane of the dialog box
•     click the OK button to close the dialog box
•         the Image Tag Accessibility Attributes dialog box is displayed
•     in the Alternate text box, type OM
•     click the OK button to close the dialog box and insert the picture
•         the image is inserted into the second layer
• 313 I could not find Layer Borders
•     layers that are not selected and not activated are displayed with a faint, thin gray line marking their borders
•     you can turn this on or off by choosing
•         View, Visual Aids, Layer Borders
•     but like I said, I could not find Layer Borders
• 313 place the insertion point in the document outside the first and second layers
•         then do the following
•     Insert, Layout Objects, Layer
•     do not move the layer, let it stay where it is
•     insert the teaching.jpg image from Lesson_09_Layers/Images folder
•     type teaching for the alternative text for the image
•     the image might overlap the previous layer
• 313 Dreamweaver's default size for the layer is 200 pixels for width and 115 pixels for height
•     you can change these options in the Layers category of the Preferences dialog box
•     to open the Preferences dialog box, do the following
•     Edit, Preferences
•     select Layers from the category list
•     for now do not change anything
•     you can change the default of the visibility, background, nesting, and compatibility options
•         all of which is covered later in the book
• 313 place the insertion point in the document outside the existing layers
•     do not place the insertion point inside the layer
•         that will cause that layers to be nested
•     then do the following
•         drag the Draw Layer button from the Insert bar
•         and drop it in the document without placing it in another layer
•         if it automatically sits ontop of another layer, drag it below the two layers
•     as the pointer enters the document
•         notice that the pointer includes a lightly shaded rectangal and a plus sign
•     insert the class.jpg image from Lesson_09_Layers/Images folder
•     type class for the alternative text for the image
•     a fourth layer with the default width and height is created in the Document window, over top and offset slightly to the right of the last layer you created. After inserting the last layer, the insertion point will automatically be in that layer
• 314 the book says to save the document as layers.html within the Lesson_09_Layers folder
•     I suggest that you save it as layers1.html so that you keep the original in case you want to try the exercise again

315 Continue using index.html

• 315 open the layers1.html file from the Lesson_09_Layers folder
•     Dreamweaver assigns generic names automatically in a numeric order, Layer1, Layer2, and so on
•     these names are not very descriptive
•     its best to get in the habit of giving your layers short descriptive names
• 315 to open the Layers panel
•     do one of the following
•         Window, Layers
•         or you can open the CSS panel and select the Layers tab
•             the Layers panel is displayed
• 315 about the Layers panel
•     located in the CSS panel group
•         gives you a list of the layers on a page
•     you can use the Layers panel to
•         select a layer
•         name a layer
•         change the layer's visibility
•         change the layer stacking order
•         select multiple layes on a page
•     layers are listed in descending order
•         a new layer is placed on top of the list
•         descending order, is that alphebetically, z-order, or the order they were placed in to the page
•     if the layer is hidden or placed off the page
•         using the Layer panel and layer markers might be the only methods for selecting the layer
•     if the insetion point is in a layer, the name of the layer is displayed in bold
•         and the selection handle for the layer is exposed in the Document window
• 315 to change the name of a layer
•     double-click the Layer1 layer in the Layers panel
•         type textlayer for the layer name
•         press ENTER
•     double-click the Layer2 layer in the Layers panel
•         type om for the layer name
•         press ENTER
•     do not change the name to Layer3
•     double-click the Layer4 layer in the Layers panel
•         type class for the layer name
•         press ENTER
•     click anywhere in the document window to deselect the last layer
•     save the layers1.html file
•     do not use spaces, special characters, or underscore character
•         layer names must be unique
•     use a consistant naming scheme for all layer names
•     layers cannot have the same name of another element such as a graphic
•     you can also type the name of a layer in the Layer ID text field on the Property Inspector
•         if the layer is selected

316 after creating a layer

• You might want to add a background to it, move it around, or resize it
•     the advantage of using layers is that you can place them in precise locations on the page
•     you can use the Property inspector to type in values for placement
•     you can align layers to other layers
•     you need to select a layer before making any adjustments to it
•     there are several methods for selecting a layer
•     the method you use depends on the complexity of your layout
• 316 in the layers1.html Document window
•     position the pointer over the border of the textlayer layer
•     and click the border when the pointer turns into a crosshair with arrows
•     and the border turns red
• 317 Note: if no layers are selected
•     shift-clicking inside a layer selects it
•     simply clickicking inside a layer places the Insertion Point in the layer and activates it
•         but does not actually select the layer itself
•     you can select multiple layers by Shift-clicking other layers
•     additional ways to select a single layer
•         click the yellow layer marker that represents the layer's marker in the Document window
•         the layer's tag in the tag selector
•             the tag selector is displayed on the status bar like so
•             (body)(div#textlayer)
•         or the name of the layer in the Layers panel
•     when the layer is selected
•         square black (I see it as blue) sizing handles appear around the layer
•         the name of the layer is highlighted in the Layers panel
•     the Property inspector changes to reflect options for the selected layer
•         to see all the properties
•         click the expander arrow in the lower-right corner of the Property inspector
• 317 Tip: to delete a layer, select it and press BACKSPACE
• 317 resize the textlayer layer
•     by typing 320px for the width in the W text field
•     on the property inspector and pressing ENTER
•     in the Property inspector
•         the W and H text fields display the specified width and height of the layer
•     resizing a layer changes these values
•     the default unit of measurement is px (pixels)
• 317 Note: you can also specify the following units
•     pc - picas, pt - points, in - inches, mm - millimeters, cm - centimeters
•     or % - percentage of the parent's value
•     the abbreviations must immediately follow the value
•     with no space between
•     example: 3mm
•     pixels or percentage are the recommended units
• you can also resize the layer by dragging any sizing handle
• to resize the layer one pixel at a time using the keyboard
•     select the layer
•     hold down the CTRL key, and use any of the Arrow keys from the keyboard
•         to go in the direction you want
• to resize the layer by the current grid increment
•     right now that is 10 pixels at a time
•     hold down the SHIFT CTRL keys, and use any of the Arrow keys from the keyboard
•         to go in the direction you want
• 318 when the layer expands to fit its content
•     the width and height values are overridden
•     the Overflow setting in the Property inspector controls how layers behave when this occurs
•     there are four Overflow options
•         Visible, Hidden, Scroll, Auto
•         Visible - the default option, increases the size of the layerexpanding the layer down and to the right as much as needed for all the layer's contents to be visible
•         Hidden - maintains the size of the layer and clips any content that does not fit without providing scroll bars
•         Scroll - adds scroll bars to the layer, whether or not the contents exceed the layer's size
•         Auto - makes scroll bars appear only when the contents of the layer exceed its boundaries
•     you might need to click the expander arrow on the Property inspector to make these options visible
• information about the clipping area of the expanded Property inspector for layers
•     318 Note: you can also set the clipping area to specify the part of the layer that is visible
•     the clipping area can be smaller, larger, or the same size as the layer
•     use the Property inspector to define the visible area by typing values in all four Clip text fields
•         L-left, T-top, R-right, and B-bottom
•     any content outside of the clipping area is hidden
•     this setting is available with all four Overflow options
• 318 with the textlayer still selected, type 375px in the L text field
•     and 50px in the T text field
•     on the Property inspector
•     select the om layer and type 125px in the L text field
•     and 100px in the T text field
•     be sure to select the om layer
•         not the image it contains
•         before trying to modify the left (L text field) and the top (T text field) distance properties for the om layer in the Property inspector
• Note: the layer positions can be off the page if the values in L and T are set to negative numbers
•     you might purposely do this if you want to animate the layer and want it initially placed off the page
• be sure to use the L and T fields on the top half of the Property inspector
•     do not use the Clip text fields for this step
• the L text field on the top half of the Property inspector
•     defines the space between the layer and the left side of the browser windowthe T text field on the top half of the Property inspector
•         defines the space between the layer and the top side of the browser window
•     to move the layer
•         Note: you can drag the selection handle (located on the top left of the layer) or border of the selected layer to move it to a different location on the page
•         to move a layer from the keyboard one pixel at a time
•             select the layer and use the arrow keys
•         to move the layer from the keyboard by the current grid increment
•             select the layer, hold down the SHIFT key, and use the arrow keys
• 319 moving the layers for the practice exersize
•     select the class layer in the Layers panel
•     and drag the layer selection handle in the Document window
•     down the page so the layer is below the om layer
• select the Layer3 layer
•     and drag it farther down the page
•     below the class layer
•     dragging the layer selection handle assures you that you are dragging the layer
•         not the contents of the layer
•     when layers cannot be seen in the Document window, because they are below the window
•         select the layer by using the Layers panel
• 320 to change the background of a layer
•     select the textlayer layer
•     in the Property inspector, click the Bg color box
•         and select pale tan or type #CCCC99 into the text field
•     the background color of the layer changes to pale tan
• 320 there are two options for the background of the layer
•     Bg image or Bg color
•     Bg image: specifies the background as an image for the layer
•         type the path for the image in the text field
•         or click the folder icon to use a dialog box to navigate to the image
•         the background of a layer might not display in all browsers
•     Bg color: specifies the background as a color for the layer
•         either choose a color or use tranparency
•         to use transparency
•             leave the text field blank
•             or choose the default no color
•             the empty color swatch with the red line through it
•                 located at the top of the color menu
•         to use color
•                 either use the down arrow and select a color from the palette
•             if the palette is displayed and you do not want it displayed
•                 press the ESC key from the keyboard
•             you can type the hex code for a color in the text box
•                 you can find the hex code when you hoover the mouse pointer over the palette
•                 include the (#) number sign when you type the hex code for the color
•         when using either the image or color for a background
•             test this in two browsers
•             Microsoft's Internet Explorer or Mozilla's Firefox
•         you can download Mozilla's Firefox from here
•         you can download
•             Microsoft's Internet Explorer 6.0 for Windows 2000
•             or Microsoft's Internet Explorer 7.0 for Windows XP
•             from here
•         testing this in both browsers will give you results you will not expect
•             depending on the contents of the layer
•         the text might exceed the defined length of the layer if the individual user has text size set to large or larger
•             if the text size is set to small or smaller, the text will take less room than you might expect
•         this is true especially for Firefox
•         one way to fix that is to set the Font Size with CSS
•     the pale tan background will not be the background for the entire layer in Firefox
•             two ways to fix this for this exercise
•             define the background color for the table, not the layer
•             expand the hight size of the layer
•         you obviously need to save layer1.html to see this in both browsers
•             I would save layer1.html as layer2.html
•         when you are done playing with this, go back to layer1.html to resume the exercise
• 320 to resize the width or height of two or more layers at once
•     select the om layer, press and hold down the SHIFT key
•     select the class layer
•     the most recently selected layer displays solid handles
•         and the other selected layers have outlined handles
•     in the Property inspector
•         change the width to 190, then press ENTER
•     note how both layers now have the same width
•     when you are done, undo the changes so you can resume the exercise
• 321 another way to resize the width or height of two or more layers at once
•     select two layers as we did before
•     Modify, Arrange, Make Same Width
•         note how the selected layers have the same width
•         you can press CTRL Z to undo the change
•     Modify, Arrange, Make Same Height
•         note how the selected layers have the same height
•         you can press CTRL Z to undo the change
• 321 to align two or more layers at once
•     you can align more than one layer to the top, bottom, left or right
•     select the om and textlayer layers
•     Modify, Arrange, Align Top
•         note how the selected layers are aligned at their top's
•         the alignment matches the last layer selected
• 321 save the layer1.html document

322 you can use either the Property inspector or the Layers panel

• 263 to change ...
•     in the Document window
•     double-click the Flash button you just created
•     the Insert Flash Button dialog box appears
• 263 make changes to the Flash button settings
•     set the options however you want

263 using Flash

• you can create
•     vector-based graphics
•     animations
•     and movies
• a Flash animation has been created for you
•     Dreamweaver cannot produce these types of files, only Flash

263 open the chakras.html document

• from the Lesson_07_Multimedia folder
•     add an extra paragraph above the text
•     and place the insertion point on the new line

265 Flash Elements enable you to quickly add interactivity to your pages

• the Image Viewer Flash Elements creates a
•     this interactive presentation format
• 265 Note: the Image Viewer is the only Flash Element that Dreamweaver 8 initially contains
•     additional Flash Elements may be created in the future