Expression Web:Frames

Objectives
In this tutorial I will go through the basics of how expression web works with frames.

Getting ready
Before we start you will need to create a web site made up of the following pages.



Now for the tricky stuff
Frames are used to allow us to create a layout that can keep a menu in one frame and refresh the contents in another. Unfortunately, while I show you how frames work, they are generally frowned upon, as they are difficult for screen readers to manage, and to hyperlink directly to the correct layout. But, a knowledge of how frames work is useful in that it helps us understand how pages link, and forces us to consider site navigation issues. (Some editing --AdrianLim 18:13, 29 August 2011 (EDT))

What we want to do is create a frame menu page on the left of the screen and the contents will be displayed in the right hand frame.

(I will add frames theory one day in the future)

A revised navigation map showing frames is shown below.



Expression Web and frames

 * 1) With the web site created above open, click on the drop arrow next to the new page button
 * 2) Select Page ..., a dialog box will open, in the left pane select Frames Pages
 * 3) Choose the Contents option in the center frame (To create a two vertical frame layout)
 * 4) Choose [Ok]

The following screen is displayed



What we want to do is create a new page for the Frame Menu (on the left) and use intro.htm for the right frame

So Click [New Page] on the left, and [Set Initial Page] on the right and choose intro.htm

In the left hand page enter the hyperlink text and link to the pages.



Now for the tricky part.

Click Save (the disk button or File Save)

The dialog box will show the left page highlighted .. this is fmenu.htm

The next image shows a blue area around both of the pages (as intro.htm already existed so doesn't need to be saved)

This is the Wrapper (frameset) page. Call this page frames.htm

Finally link up index.htm to frames.htm, and all going well you now have a frames option on your web site.