Layers
Forms
Frames

DREAMWEAVER FRAMES

 

 

 

Frames can be very labor intensive in when hand coding. Dreamweaver makes it easier to construct large Frame based sites. Even nested framesets are pretty easy to deal with.

Remember that frames act like picture frames, in that they hold more than one web page for display simultaneously. Each frame will need a unique name so that it can be targeted by links later on.

When building frames in Dreamweaver, you will need to make use of two palettes, the Properties Palette and the Frames Palette. Both can be found in the WINDOWS pull down menu.

 

Tips for Building Pages for Frames

  1. Dreamweaver will allow you to visually build pages inside frames, but you will only be able to build the initial page inside of the frame. Other pages to be displayed in that frame will have to be built outside. Remember that you can change the viewable size of the Dreamweaver window by changing the size setting in the lower right corner. If you know how large your frame will be, you can set the page to display that size window. This will help you when designing pages meant to be displayed in frames. Custom sizes can be achieved by clicking "edit sizes" (see below graphic)

 

  1. When viewing a frameset in Dreamweaver, you will always be viewing at least three HTML pages, the frameset and two or more html pages. You will need to save each page as you do work on it.

 

Creating Frames in Dreamweaver

We are going to create a simple two-column frameset.

  1. Start with a blank page. Make sure you have both the Properties and Frames pallets are open.
    WINDOWS-> PROPERTIES and FRAMES
  2. Click INSERT FRAMES-> FRAME-> LEFT
    This will split the page into two vertical frames.

 

Your page should now look like this:

Your Frames palette should look like:

Notice that the frames palette is laid out just like the page and that it reflects the default frame names. Youll use the frame names later on to target a link at a specific frame.

 

Selecting the Correct Item in a Frameset

There are a fair number of properties to set when dealing with frames. You need to set properties for the entire frameset, for each frame, and for each page in each frame. Heres how it works:

 

What am I supposed to click to set properties for

�.       The Whole Frameset: Click the Frames Palette then click "frameset" in the lower left corner of the Dreamweaver window.

 

 

�.       Each Frame: Click the box representing that frame on the Frames Palette. The Properties Inspector will look like:

 

�.       The Pages Kept in Each Frame: Click the page itself and edit normally. The Properties Inspector will look like:

 

You will click the pages to edit them normally. You will have to click the frame border to specify modifiers for the <frameset> tag. You will have to click the Frames Palette to specify modifiers for the <frame> tag. If you dont remember which goes where, dont worry. The important thing to remember is that youll need both the Properties palette and the Frames palette open. If you get lost, just look around for a while. Youll find what youre looking for.

 

Setting Frameset Properties

You can set the border size, border color, and size of each frame.

 

To Select the Frameset

  1. Click the Frame Palette.
  2. Click the frameset selector in the lower left corner of the Dreamweaver window.

After selecting the frameset, youll change its properties on the Properties Inspector.

 

Setting Border Size

Set the border size in Border Width.

By default, Dreamweaver 4 inserts frames without borders. In earlier versions, If you dont want borders, youll have to set both:

Borders: No

Border Width: 0

Netscape and Internet Explorer sometimes use different tags to control frames. To make sure that youll always get what you want, change the setting for anything that remotely sounds like it will effect what youre trying to change.

 

Changing Frame Sizes

You can change the size of each frame while you have the frameset attributes showing on the Properties inspector (click the line between frames on the screen). Look on the right side of the Properties inspector. Do you see the small model of your frameset?

You will have to select which frame you are setting the size for. On the above graphic, the left frame has been chosen.

Notice that you can set Frame widths to Pixels, Percent, or Relative. Relative means "whatevers left".

Be careful to set frame sizes for every frame.

 

Setting Individual Frame Properties

Youll also need to set individual frame properties like the frames name and its border sizes. To set individual frame properties, you must click on the desired frame in the Frame Palette. In the below graphic, the left frame is being selected.

 

After selecting the frame, properties can be set on the Properties Palette:

 

The most important part of the frame properties is the Frame Name. Each frame needs a name to allow targeting later. Remember that targeting allows you to command a linked page to open in a different frame. Dreamweaver names your frames for you, but you can change the frame names if you wish.

While a frame is selected, you can set the margin height and width, scrolling and resizing features, and border information on the Properties palette.

 

Placing Pages in Frames

You can also name the initial page by clicking the yellow folder next to Src. Ive found its usually easier to build the page directly inside the frameset if you dont already have it.

 

Saving Your Frameset

You have to save the frameset as a separate HTML file. If you want the frame page to come up first, remember to call your frameset "index"

To save the Frameset:

FILE-> SAVE FRAMESET

 

Try This:

  1. Try to make a two-row Frameset in which:
    1. The frame borders are invisible
    2. The top Frame is 200 px high, and named "top_frame"
    3. The bottom Frame is left to occupy whatever space is left on the screen, and is named "main_frame"

 

Creating Nested Frames

Its very easy to split frames in Dreamweaver. Click inside the frame you wish to split and click:

INSERT FRAMES-> FRAME-> (split frames in the direction that youre trying to go)

Each frameset is separate from the others. You will need to set all of its properties and the properties for the frames it contains.

 

Creating Pages Inside Your Frameset

When you initially create the frameset, Dreamweaver inserts blank pages into the frames. You can replace those pages by setting a "src" on the Properties Palette, or you can simple create the pages inside frames. Simply click inside the frame and make changes as you normally would.

 

Saving Pages inside a Frameset

You must individually save pages kept in a frameset.

  1. Click inside the page.
  2. FILE-> SAVE

 

Setting Targets in Dreamweaver

After youve saved a page inside a frameset, Dreamweaver will remember the names of your frames, allowing you to choose targets from a pull-down menu.

To set a links target frame, simply create the link as normal and choose the target frame from the "target" pull down menu:

If you dont see your frame name, you can type it in the target window. Sometimes Dreamweaver forgets frame names.

_blank: Will open a new browser window for the linked page.

_top: Will bust the page out of frames.

 

QUICK REFERENCE STEPS TO BUILDING FRAMES

  1. Open both the Frames Palette and the Properties Palette
  2. INSERT-> FRAME
  3. Click on frame palette and the "frameset selector" in the lower left corner of the Dreamweaver Window, and set frame properties (border, frame width, ect.)
  4. Click on Frame Palette and name all Frames (in the Properties Palette)
  5. FILE-> SAVE FRAMESET
  6. Insert pages into frames by clicking "src" on the Properties Palette, or modify the individual pages in each frame, saving each one.
  7. Set links on the Properties Palette. Dont forget about "Target"

 

Using Frames to Get Rid of Page Borders

A normal web page displayed in Netscape will always have a border on the right side of the page. This isnt too great if you have a image that youd like to display from wall to wall like the one at our web design course homepage.

You can get rid of borders using frames.

  1. Create a two-row frameset.
    1. The top frames height is set to 100%
    2. The bottom frames height is set to "relative".

The top frame will hold the displayed page. The bottom will hold a dummy page, with nothing on it.

 

  1. You must set the border of both pages to "0". You can do this in
    Modify-> Page Properties

You must set Left Margin, Top Margin, Margin Width, and Margin Height to "0"

 

  1. In the Frames palette, select a frame and set its border to "no" and Margin Width and Height to "0"

Make sure you set margins and borders in both frames.

 

  1. Click the Frame border to bring up the Frameset properties.
  2. Set the Borders to "No" and Border Width to "0"

 

  1. Set the Height for the top row at 100%
  2. Set the height for the bottom row at "relative"

| Back to Courseware