Xem mẫu

Chapter 6: Frames Try It Out A Frame-Based Play Viewer We don’t have a need for frames on our café site, so in this Try It Out you’re going to create a frame-based viewer for finding the different acts of Shakespeare’s A Comedy of Errors. The idea behind the viewer is that you have one long page that contains the entire play, and then there is a frame on the right that allows you to navigate between the scenes of the play. Before you start to build the example, it would help to have a look at what you are going to create. You can see the page in Figure 6-8. Figure 6-8 Three files actually make up this example: viewer.html, which contains the frameset for play and navigation navigation.html, which is the right-hand frame comedyoferrors.html, which is the page with the play 232 Chapter 6: Frames You will work through these pages in this order: 1. Start your text editor or web page editor and create a skeleton of a frameset document, remembering that this will be slightly different from the documents you have been creating so far. The following code is for viewer.html: ?xml version=”1.0” encoding=”iso-8859-1”?> A Comedy of Errors 2. Divide the page up into two frames. The one on the right is fixed at 200 pixels wide, while the one on the left takes up the remaining part of the screen. As you can see, this requires the use of a element instead of a element, which divides the page into the two columns. The element holds two elements, one for each column. <body> This site uses a technology called frames. Unfortunately, your browser does not support this technology. Please upgrade your browser and visit us again! <a href=”comedyoferrors.html” >Click here to view A Comedy of Errors without links to scenes.</a> <body> 3. The A Comedy of Errors file is created for you (you probably don’t have time to type it all out), but it is worth noting that it contains id attributes that indicate the start of each section. The next step is to create a new file called navigation.html to form the content of the navigation frame in the right pane. This is just a normal XHTML document, so start the skeleton as you usually would. Navigation 233 Chapter 6: Frames 4. In the navigation.html page, there are links to each scene in each act of the play. Note how the target attribute has a value of main_frame to ensure that the link opens in the left-hand pane: Act 1 Try the file by opening viewer.html; the result should look like the screen shot you saw at the beginning of the chapter. Inline or Floating Frames with < iframe > There is another kind of frame known as an iframe (sometimes referred to as an inline frame or floating frame), which can appear anywhere within a standard XHTML page; it does not need to appear either in a element or even in a document that uses the frameset document type declaration. An iframe acts like a window cut into an XHTML page through which you can see another web page. You can specify the URL of the page to appear in the window, the width and height of the window, and whether or not it should have borders. Any text that surrounds the frame would flow around it in the same way text can flow around an image. You create an iframe with the It should show you where to find us.

When creating an iframe, you should use both an opening (it should not be an empty element). Anything between these is shown only to those whose browsers do not support iframes (in this example you can see that a link to the map has been offered to users that do not see the iframe). If your iframe contained information that you would want a search engine to index, you could include the text that you want it to index in here. 234 Chapter 6: Frames You can see what this page looks like in Figure 6-9. Figure 6-9 Let’s take a closer look at the syntax for the