Dreamweaver MX, Part 2 (Introduction)
Center for Instructional Technology

 

During this workshop, you will understand how to:

Frames


Frames are a dynamic way of loading multiple pages so they can be displayed with minimal download time and plenty of screen real estate. To convert your existing site to a frames environment in Dreamweaver:

 

 

 

1.      On the Files layer, click the Site panel. Highlight the file index.html and right-click.

Select Rename. Enter mypage.htm.

 

2.      Open mypage.htm. Turn on frame borders by selecting View—Visual Aids---Frame Borders.

 

 

 

 

 

 

 

3.      On the Insert panel, switch from Common to Frames.

 

4.      Grab the desired frame layout design and drag it to your document window.

In our case, choose the 2nd design from the right. It has a side, top and mainframe. Your mypage.htm should appear in the main frame.

 

 

 

 

 

 

5.      Go to File—Save All Frames.
The program will ask you to save each frames page, including the entire frameset (the page that contains all of the frames). Save the frameset as index.htm, left frames page as toc.htm; and the top frames page as banner.htm. It will NOT ask you to save your main frames page—it is already saved as mypage.htm.

 

6.      Select each frame and change the document title for each.

 

7.      Add content to the banner frames page by cutting and pasting the personal information from your main frames page to the top frame.

 

8.      Click back into the left frame, and type the following: Home, My Word, My HTML and JMU. Select Home. In the property inspector, make a link to the page “mypage.htm” and change Target to “main frame.”

 

 

 

9.       Set the link and the target to “main frame” for My Word and My HTML. Use http://www.jmu.edu as the link for “JMU” and set the target to a new window (_blank). Save the changes to this frame.

 

10.  Press [F12] or the preview/debug icon  to view your frames page in a browser.

 

 

 

Transfer your entire site to the remote server using the FTP function

 

11.   Select Site from the menu bar. Choose Edit sites. Click Edit. A list of current defined sites will appear in a dialog box.

 

12.    Highlight your site, and click Edit.

 

13.   Select Remote Info on the Category list at the left.

 

Your instructor will give you login and password information. When complete, click OK.

 

 

 

Your host directory will be:  dreamweaver/user__________

 

Your password is __________

 

 

Tables

 

1.      Change your Insert Panel tab from Common to Tables.

2.      Adjust the settings to create a table with 2 rows and 2 columns. Change the border size to 0. (This hides the border when your page is viewed through a browser.)

3.      Enter text into two table cells; images into the other two cells.

 

 

 

Layers


A layer is a container for HTML content that you can position anywhere on a page. Layers can contain text, images, forms, plug-in objects, and even other layers. It is best if you use CSS layers. (Most browsers recognize them.)

 

Create a layer

 

  1. Create a new document.

 

  1. Place the cursor in the document where you want the layer. To insert a layer, choose the Layer icon from the Common tab on the Insertion panel. In the document window, drag the + to draw the layer.



  1. Select the layer: click in the layer, then click the handle. The property inspector will display layer attributes. Change the settings to see the effect those changes make on the layer.

 




  1. In the Property inspector, select the folder next to Bg Image. Select the image file from the Workshop Files folder. Examine the results. Resize the layer to accommodate the image by pulling on the squares surrounding the image.

 

  1. Activate the layer by clicking inside the layer. An activated layer allows you to insert objects inside the layer; the layer itself is not selected. Type some text in the layer. Reformat it through the property inspector.

 

  1. Save your page and call it layers.htm.

 

 

Work with Multiple Layers and Nested Layers


You can use layers to position content on a page. Layers are easier to work with and change the design of than table cells. You can use layers to quickly create complex page designs and then convert the layers to tables for use in browsers (versions 3.0 and above), which do not support the use of layers. You can also move back and forth between layers and tables to adjust layout and optimize page design.

 

1.      To draw multiple layers, click the Layer icon on the Common tab. Hold down the [Ctrl] key and draw a layer. You can draw multiple layers as long as you do not release the [Ctrl] key.

 

2.      Select multiple layers by holding down the [Shift] key and clicking on several layers. Be sure to select the borders of the layer.

3.      In the layer portion of the Property Inspector, change the layer color. This will change the color of all layers simultaneously.

4.      Activate one of the layers (click inside it). Insert the citlogo.gif or another image. Select the image and change its position within the layer by changing the W and H settings in the Property Inspector.

 

 

Create a nested layer

 

1.        Select Edit—Preferences from the menu bar.

 

2.        Select Layers from the categories on the left.

 

3.        Select “Nest when created within a layer.”

 

4.        Close Preferences.

 

 

5.        Select Modify--Arrange. Uncheck “Prevent Layer Overlap.”

 

6.        Create a layer. Name it parent in the Property Inspector.

 

7.        Insert or draw a layer inside the first one. Name it child. An invisible element appears in the parent layer.

 

8.        Press [F2] to open the layer palette. Notice how the nested layer is listed underneath its parent layer.

 

9.        Move the parent layer. Notice that the child layer moves with it.

 

10.    Move the child layer outside of the parent layer, but keep it nested. If you move the parent layer, the child layer will still move with it.


View of nested layer
 (layer shapes will vary)

 

11.    Activate the child layer. Insert an image and add a border around the image.

 

12.    Select the parent layer by selecting the invisible element in the upper left corner of the document. Change the background color to purple.

 

13.    Preview your document in a browser.

 

 

Convert Layers to Tables
  1. Go to Modify—Convert—Layers to Tables.

    Dreamweaver will not allow you to convert because you have nested and overlapping layers.

  2. Press [F2] to open the layer palette.
  3. Select “Prevent Overlap” in the layer palette.

 
View of overlapping layers
  1. Separate your layers and “un-nest” them.
  2. Select Modify—Convert—Convert Layers to Tables.
  3. Save your changes and preview in a browser. Close the browser. To modify your layers, select Modify—Layout Mode—Convert Tables to Layers, readjust layers and convert them back to a table.

 

 

Layer Animation

 

Create a Timeline Animation

Timelines create animation by changing the position, size, visibility, and stacking order of layers. Timelines can also change the source files of images. Timelines can move only layers. To make images or text move, create a layer using the layer button on the object palette and then insert images, text or any other type of content in the layer.

 

  1. Move the layer to where it should be when the animation begins.

  2. From the menu bar, select Window—Others—Timelines.
  3. Select the layer you want to animate.
  4. Select Modify—Timeline—Add Object to Timeline or simply drag the selected object into the timeline inspector.
  1. Click the keyframe marker (the round circle) at the end of the bar.
  2. Move the layer on the page to where it should be at the end of the animation.
  3. Hold down the play button to preview the animation on the page.

 
  1. Create a timeline by dragging a path:

 

    1. Add another layer. Add a background color and text.
    2. Select the layer.
    3. Move the layer to where it should be when animation begins.
    4. Select Modify—Timelines—Record Path of Layer.
    5. Drag the layer around the page to create a path. Make sure it crosses another layer at some point in the path.
    6. Release the mouse at the point where the animation should stop.
    7. Rewind and play the animation.

  1. Select “Autoplay” and “Loop” in the Timeline property inspector.
  2. Save changes (Ctrl+S) and preview page in browser [F12]. Your animation should automatically load. Notice the stacking order of the layers as they cross. Close your browser.
  3. Open the Layers palette. Change the “z” index of the parent layers. Play the animation. The stacking order of the layers as they cross (they should “stack” differently).

    Note: “1” means the layer is closest to the page (on the bottom of the stack).