Unit 8. Using Frames (I)

Unit 8. Using Frames (I)

We are going to see what Frames are and when they must be used. We will also see how to insert a simple frame into a website and how to work with it.

Introduction

Frames are used to distribute the data in a web site. They help to keep some parts straight such as they are, as the logotype and the browser bar, while the others can change. In addition they usually improve the appearance. Each page's frame has its own HTML file. For example, in the image on the right you can see a page with two frames. The left frame has the menu.htm file, and the right frame has the dogs.htm file. To see the page this way, we have opened the browser's file frames.htm, which is the page that has grouped the frames.

It is possible to edit the frame's files from the page that containts the set of frames. This simplifies the work as it is easier to figure what the final page is going to look like. This is something that you cannot do if you edit each framed file individualy. Working with frames can be a bit complicated, and even more so in the begining. We are not going to go too much into the theme, and we will only look at some of the basic concepts with a few easy examples.

Creating frames

There are many ways of creating a frame. We will only learn one. To create a frame, you first need to open a file. It can be new or an existing one. After this, you need to go to the Insert menu, HTML, and Frames. Through this option you can select the type of frame you want to create. We are going to look at the Left frame option. If we click on Left, a new frame will be created in the left side of the current file.

As you can see in the image, there is a line splitting the document. In this case we will have three files: the left one, the right one, and the one which has the set of frames. The right one is the file we had at the start. It is in the frame known as Main Frame. To select the file that has the set of frames you have to click on the line that splits the frames. This is only possible in case of not having been previously saved.

In case of inserting a right frame instead of a left frame, the empty frame will be shown to the right of the original file. In this image you can see an example of a right frame. A right frame has been inserted over an existing file, menu.htm. As in the previous case, we have three files: the left, the right, and the one which has the set of frames. In this case the file we had at the begining is the left one, while the previous was the right one. For this reason Main frame will be at the left. Main frame is the frame that is always in the initial file, into which the rest of the frames have been inserted. Unit 8. Using Frames (II) Selecting frames   If you want to select the frames of a document you have to go to the Frames panel which can be opened through the Window menu. If the Frame option isn't in this menu, it may be in Others option. You can also open the Frames panel by pressing the combination of Shift+F2 keys. The frames that are in the frame document are found in the Frames panel, and we can go through them by clicking on them in the panel. You can also select the frame Page by clicking on the border that sorrounds the frames. Select the frames to edit the document they may contain. Select the frames to specify the specific properties of each one of them. Saving Frames   All documents that have frames must have a Page inside each one of them. This is why when you create a frame, new pages are loaded by default in each one of them (apart from the frame that has the original page). These new pages can be replaced later by other existing pages as we'll soon see. If you save the page that has the set of frames, each one of the pages included in their frames we'll be saved too. It is not recommendable to save the frames for the first time using the Save all option, because we can make mistakes when naming the new files. It's preferible saving each file (one by one) unless all the frames had an already existing page, because in this case the unique file that will have to be named will be the one that has the set of frames. To save a file that has a set of frames, you have to previously select it. To save each one of the documents, you just have to place the cursor on one of them and click on the Save button. Setting up Frames   After selecting a frame through the Frames panel, its properties can be established through the properties inspector. Each frame has a name assigned that can be changed through the Frame name option. The name cannot have blank spaces. Src is the HTML file name that is displayed in the frame. In Borders you can select a line that splits the frame from the rest of the frames. In case of showing the border, a color for this can be specified through Border color. You can also establish a width for the border through the Width option. Scroll will indicate whether scrolling bars will be shown or not when the frame file cannot be completely seen. If the No resize option is activated, it indicates that users won't be able to change the frame size in the browser. The Margin width and Margin height set the separation between the content of the frame and its right-left and top-bottom borders. If all the sets of frames are selected, then the Properties inspector will display the following options: In Borders you can add a line to split the frame from the rest of the frames. In case of showing the border, a color for this can be specified through Border color. You can also establish a width for the border through the Width option. The Column field (or Row) is used to set the frame size, and it can be introduced as Pixels, in Percent (of the window) or Relative (proportional to the rest of the frames). You will usually use two frames, one of them with size in Pixels, which will contain the browser bar, and the other frame with a Relative size, to adjust it to the rest of the browser window. Frame content   As you have seen, the frame content can be established through the Src field of the properties inspector. When we work with frames, our aim is to load different files in at least one of them. Through the Src field of the properties inspector, it's only possible to specify the file that will be loaded in the frame in first time, but we can change this later using links. As you remember, in the hyperlinks unit we learnt the possible links destinies. Those destinies could be _blank, _parent, _self, and _top. Let's see again what are they used for. You now know how to work with frames and they will be easier to understand. _blank: Opens the file linked in a new browser window. _parent: Opens the linked file in the frame window that has the link or the set of main frames. As you know, the main frame is the frame where the initial file is and where the rest of the frames have been inserted. _self: Is the predetermined option. It opens the linked file in the same frame or window as the link. Opening the linked file in the whole browser window means that the window frames will disappear when you open the link in it. In addition to these destinies, you can also set the name of one of the frames in the Page as one of them, so the page will be loaded in that frame. We can add all these destinies to any element of the Page that has any link, it can be a text, an image, an image map, a flash element, etc. Thanks to this we can make our links work as we please, loading Pages in some of the frames, in a new window, in the whole window, etc. This task can be difficult and complicated at the begining, but it leads to good final results. teacherClick courses can be seen on the net using a top frame with pull-down panels. To practice you can perform the Step by step exercise in Creating and configuring frames.