Microsoft Expression Web - Building Web Pages with Frames

So let us move on to yet another approach to web design, frames. Again, let me close out this site and then I am going to open the site that I created with frames. Again, expression web is brought all of my files and folders into the folder list and just play it again here. I can double click an either place to open the main page of my site. You can tell this page was created with HTML frames because of this slide bar here.

So as I slide up and down and you will see all of these pictures, what you are really looking at is a separate HTML file. One of the things that make working with frame confusing is that you are not looking at one page here, you are actually looking at the four. This is an HTML document, this top frame. This is one is a HTML document holding this larger version of this image and this is a third HTML document holding this little thumbnails.

The fourth HTML document is behind all three of these instructing the browser how they should be position and how much room to give each page in its frame. Frames have gotten better reputation over the years because they can make navigation a little confusing for many users and because they are more complex to create that simple web pages, but they still have their purpose especially for something like the slide show that you see here. And again, if you a website that somebody else created, there is certainly a possibility that you will have to deal with frames. If you want to create a new frame set in expression web, it is relatively easy. Just choose file, new page and notice there is a frames pages option that lets you choose from many different predesign frame sets.

So I can choose any one of this, click okay and what expression web is doing now is creating as I told you before, three documents. One that is going instruct that these two frames should generated and then it is immediately letting me set what initial page would be displayed here. What is really happening behind the scenes here is that a single HTML page is being displayed within this section of the frame set and another HTML page would be displayed here. So I immediately have the option of setting an initial page. If I click here, I can browse to find a page or creating a new page by choosing this option.

Let me close out of this and come back to the frame that I have already created. One of the most confusing aspects when you work with HTML frames is targeting and targeting applies to more than just frames. So let me take a moment and explain to you what I mean by targeting and why you might use it even if you are not using frames. Targeting comes in a play when you are setting links. So for example, I want to set it so that when I click on this image it opens here. We will preview on browser for a moment so you will see what is happening.

So when I click on a picture here, it opens in the right hand frame. This little picture opens in this frame. Now I could have set it so that this picture opens in that frame or opens in the completely new window. These are all chooses I get to make, but if I do not specify the right target, it will never open in the right place. So here is how you do that.

You will find the targeting options and the same place you will find all of the other link settings. You set hyperlinks and frames much as you set any other links in expression web. First, you will select the element you want to link so I can click on this image or I could click and select this text then you will choose the link icon the you open the edit hyperlink dialog. Now there is a lot going on in this dialog, but all you really have to worry about is what ends up in this address field.

If I want to link to another page within my website, I just find that page and set the link. So this little picture links to a page called making faces and if I were setting that in the first place, I would just go into my pages folder where I have all of the pages with my big images choose making faces. And notice, expression web automatically inserts the information to set that link. If I want to target where that will open, I want to choose target frame and here you will see expression web has a very handy little assistant. If I click on the top here, expression web automatically changes this to banner. If I set the link in this way, this big image would open in this top frame. If I choose the left frame which is called contents in this frame set then it would open in the same frame it is in right now. If I choose this one, I will get it in the main frame where I want it. And here is why you might use this dialog even if you are not using frames. You see this option that says new window, any time I am creating a link in expression web and I want the results when someone clicks on that link to view that a new browser window opens with the contents of that link, I can choose new window here.

Notice the HTML code is actually underscore blink, but you do not have to remember that. All you have to do is choose new window and expression web will take care this for you. So let me choose that and show you how it works. Now I have set my making faces, yes she is making a face there to open a new window. Let us preview it and see that results. I am going to save the page just choosing control +S and now I am going to preview and this time let us choose a different browser. I am going to preview this in Firefox.

In theory, your pages should display the same in any browser. In reality, different browser support HTML and CSS in different ways and that is part of our expression web gives you so many options so you can always test your pages in different browsers. With the option I have chosen for this site, I should get pretty consistent display across all of these browsers and when I click on this link now, I am opening a new page. Let us shrink this down so that you can see exactly what is happening here.

My other links are still set to target in this window. So as I click down this list, they will open into the main frame and because I set this one to new window, it opens in its own browser window when I click on. So let me close out of here.

If I want to change the contents of something within a frame, expression web makes it very easy. For example, if I want this to say my blue hat, all I have to do is insert my cursor into the page and type. Now, here you will see my text is not formatted quite the same as that link. I could reset that link or I could move the text around, but all I want to show you here is that you can change the contents within each of these frames just by clicking to select the page and then editing it as you would any other page in expression web. If you want to edit of the other pages that are link into this, you will just go the page itself. For example, The Mikayla of the Amazing page and can just double click this, make my edits here, save them, and when I click on this link in a browser to display that page, that change will be reflected on that image.

I have to change it again here if I want to change it in this frame. If you are really like using frames or inherit a website that already uses them, you may also want to explore futures that let you do things like turn borders on and off, change border colors and even make scroll bar optional. But for now, I am going to stop looking at frames because there are still one more approach to web design I want to show you and it is quite different from any thing we have seen so far.