beginning html xhtml css and javascript phần 4 pptx

Chapter 6: Frames 232 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 c06.indd 232c06.indd 232 11/20/09 4:46:45 PM11/20/09 4:46:45 PM Chapter 6: Frames 233 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”? > < !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd” > < html xmlns=”http://www.w3.org/1999/xhtml” > < head > < title > A Comedy of Errors < /title > < /head > < /html > 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 < frameset > element instead of a < body > element, which divides the page into the two columns. The < frameset > element holds two < frame > elements, one for each column. < frameset cols=”*,250” > < frame src=”comedyoferrors.html” name=”main_page” / > < frame src=”navigation.html” scrolling=”no” / > < /frameset > < noframes > < 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 > < /noframes > 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. < ?xml version=”1.0” encoding=”iso-8859-1”? > < !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd” > < html xmlns=”http://www.w3.org/1999/xhtml” > < head > < title > Navigation < /title > < /head > < body > < /body > < /html > c06.indd 233c06.indd 233 11/20/09 4:46:46 PM11/20/09 4:46:46 PM Chapter 6: Frames 234 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 < ul > < li > < a href=”comedyoferrors.html#act1_scene1” target=”main_frame” > Act 1, Scene 1: A hall in DUKE SOLINUS’S palace. < /a > < /li > < li > < a href=”comedyoferrors.html#act1_scene2” target=”main_frame” > Act 1, Scene 2: The Mart. < /a > < /li > < /ul > 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 < frameset > 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 < iframe > element, and you specify the URL of the page to appear in the iframe using the src attribute (just as you would with an image). The following is a simple example of a floating frame. If you look at the src attribute you can tell that the iframe embeds a Google map into the page, while the width and height attributes indicate the size of the iframe ( ch06_eg08.html ): < body > < h1 > Floating frame < /h1 > < p > Here you can see a map. < iframe src=”http://maps.google.co.uk/maps?q=Newquay,+Cornwall,+United+ Kingdom & output=embed” width=”425” height=”350” > Cannot see the map? < a href=” http://maps.google.co.uk/maps?q=Newquay,+Cornwall,+United+ Kingdom” > Click here to view our location on Google Maps < /a > . < /iframe > It should show you where to find us. < /p > < /body > When creating an iframe, you should use both an opening < iframe > tag and a closing < /iframe > (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. c06.indd 234c06.indd 234 11/20/09 4:46:46 PM11/20/09 4:46:46 PM Chapter 6: Frames 235 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 < iframe > element. The < iframe > Element The < iframe > element sits in the middle of a normal XHTML page to create an inline frame. The only attribute it must carry is the src attribute, whose value is the URL of the page to be included (wherever the < iframe > element is in the document), although it is also good to add the height and width attributes to control its size. Remember that this element does not have to be part of the frameset document type. In addition to the universal attributes, the < iframe > element can carry these attributes: align height width frameborder longdesc marginwidth marginheight name scrolling src There are no events or CSS styles that are particular to the < iframe > element. c06.indd 235c06.indd 235 11/20/09 4:46:46 PM11/20/09 4:46:46 PM Chapter 6: Frames 236 The src Attribute The src attribute is required on the < iframe > element as it indicates where the browser can find the page to show in the iframe, just as it does on the < frame > element. The align Attribute (Deprecated) The align attribute indicates how the text that is outside of the floating frame will appear. It can take one of the values listed in the table that follows. Value Purpose left The frame will be aligned with the left margin of the page, allowing the text to flow around it to the right. right The frame will be aligned with the right margin of the page, allowing the text to flow around it to the left. top The top of the frame will be inline with the text around it. middle The middle of the frame will be inline with the text around it. bottom The bottom of the frame will be inline with the text around it (the default setting as you can see from Figure 6 - 9). The height and width Attributes The height and width attributes enable you to specify the height and width of a frame just as you would with an image. height=”250” width=”500” The value of the height and width attributes can be given in pixels (as in the preceding line of code) or in percentages of the browser or parent element if it is contained by another element (as in the line of code that follows). height=”20%” width=”40%” Keep in mind, however, that users with different screen resolutions will see different amounts of the screen. If you do not specify a height or width, the browser works out a size based on the full size of the screen. c06.indd 236c06.indd 236 11/20/09 4:46:47 PM11/20/09 4:46:47 PM Chapter 6: Frames 237 The frameborder Attribute The frameborder attribute specifies whether the borders of the frame are shown; the value should be the number of pixels the border should be. A value of 0 means that there would be no border. frameborder=”0” The longdesc Attribute The longdesc attribute allows you to specify a link to another page where there is a description in text of what would otherwise be in the frame. This is particularly helpful if you are putting images, charts, or graphs in the frame, as they make your site accessible to those with visual impairments. It can also be used if the user is having trouble loading the frame. longdesc=” /textDescriptions/iframe1.html” The marginheight and marginwidth Attributes The marginheight and marginwidth attributes allow you to specify the distance in pixels between the border of the frame and the content of the frame. marginewidth=”8” marginheight=”8” The marginwidth attribute allows you to specify the distance between left and right borders and the content, while the marginheight attribute specifies the distance between top and bottom borders and the content. The scrolling Attribute If the iframe is not big enough to show all of the content, then the scrolling attribute specifies whether the frame should have scrollbars (just as it does for the < frame > element). Try It Out Adding a Map to the Caf é In this example you will use an iframe to add a Google map to the contact page of the Example Caf é . 1. Open the contact page for the Example Caf é . The map will go just before the link to the Google Maps web site: < h2 > Contact < /h2 > < p > < address > 12 Sea View, Newquay, Cornwall, UK < /address > < /p > < p > < a href=”http://maps.google.com/maps?q=newquay” > Find us on Google Maps < /a > < /p > < p > < a href=”mailto:info@examplecafe.com” > Email Example Cafe < /a > < /p > 2. Go to maps.google.com and enter a location for your caf é . When you have a map loaded, click the link that says “link” just above the top right-hand corner of the map. You should see a textbox containing an iframe, as in Figure 6 - 10. c06.indd 237c06.indd 237 11/20/09 4:46:47 PM11/20/09 4:46:47 PM Chapter 6: Frames 238 3. After the first paragraph, paste the code from the Google Maps site. You may find that there is a lot more code than we used in the version earlier in the chapter. < iframe width=”425” height=”350” frameborder=”0” scrolling=”no” marginheight=”0” marginwidth=”0” src=”http://maps.google.co.uk/maps?source=ig & amp;hl=en & amp; q=Newquay,+Cornwall,+United+Kingdom & amp;ie=UTF8 & amp;cd=1 & amp; geocode=FShAAQMdHG-y_w & amp;split=0 & amp;sll=53.800651,-4.064941 & amp; sspn=6.881357,14.941406 & amp;ll=50.420058,-5.079117 & amp; spn=0.018513,0.038624 & amp;t=h & amp;z=14 & amp;iwloc=A & amp;output=embed” > < /iframe > < br / > < small > < a href=”http://maps.google.co.uk/maps?source=embed & amp;hl=en & amp; q=Newquay,+Cornwall,+United+Kingdom & amp;ie=UTF8 & amp;cd=1 & amp; geocode=FShAAQMdHG-y_w & amp;split=0 & amp;sll=53.800651,-4.064941 & amp; sspn=6.881357,14.941406 & amp;ll=50.420058,-5.079117 & amp;spn=0.018513, 0.038624 & amp;t=h & amp;z=14 & amp; iwloc=A” style=”color:#0000FF; text- align:left” > View Larger Map < /a > < /small > Figure 6-10 c06.indd 238c06.indd 238 11/20/09 4:46:47 PM11/20/09 4:46:47 PM Chapter 6: Frames 239 4. Note how this code uses the attributes we have met: ❑ width and height specify the size of the frame. ❑ The frameborder attribute has a value of 0 so that the iframe does not have the default border. ❑ The scrolling attribute is set to no because the map is larger than the size of the window and you do not want scrollbars on this frame. ❑ marginheight and marginwidth have a value of 0 to prevent gaps inside the frame. ❑ This is followed by a long URL that contains a lot of information about the location even though the following would be enough: http://maps.google.co.uk/maps?q=newquay, +Cornwall,+United+Kingdom & output=embed Your new contact page should look like Figure 6 - 11. Figure 6-11 c06.indd 239c06.indd 239 11/20/09 4:46:48 PM11/20/09 4:46:48 PM Chapter 6: Frames 240 Summary In this chapter, you learned about frames, which allow you to divide a browser window into separate panes. Each of these panes contains a discrete XHTML document that can be loaded and reloaded separately from the other frames. Frames are particularly helpful if part of your page ’ s content remains the same while the main body changes ; for example, when either the main body is long (and you want the navigation to remain in view) or the navigation takes a long time to load (and you do not want to reload it for each page). The chapter covered two types of frames: The more traditional frameset document, which uses the < frameset > element to divide the screen into rows and columns. The < frameset > element then contains a < frame > element corresponding to each part of the window. These frames belong to the frameset document type and require a different DOCTYPE declaration than other XHTML documents because the < frameset > element replaces the < body > element. The more recent inline or floating frame, which lives in a normal XHTML page, and allows only the content of the frame to be reloaded. Inline frames can appear anywhere within the document. As I have already mentioned, frames are often replaced by the use of JavaScript (or AJAX) to reload parts of pages. Exercises The answers to all of the exercises are in Appendix A. 1. Create a frameset like the one shown in Figure 6 - 12, where clicking a fruit loads a new page in the main window. When the page loads in the main window, it will carry the details for the ap- propriate fruit (to save time, you can use the images and fruit description pages in the code download, but try to create the frameset and navigation on your own). ❑ ❑ c06.indd 240c06.indd 240 11/20/09 4:46:48 PM11/20/09 4:46:48 PM Chapter 6: Frames 241 2. Create an < iframe > like the one shown in Figure 6 - 12, where you can load two different docu- ments inside the iframe window in the current page. Figure 6-12 Figure 6-13 c06.indd 241c06.indd 241 11/20/09 4:46:48 PM11/20/09 4:46:48 PM [...]... encoding=”iso-8859-1”?> CSS Example Basic CSS Font Properties The following table shows you the basic CSS font properties that allow... page CSS rules can live inside the XHTML document, although for this example we will be making a separate file to hold the CSS rules, and the XHTML page will contain a link to this file, which is known as a style sheet Before we meet the CSS style sheet, take a look at Figure 7-2, which shows the XHTML page we will be styling on its own before the CSS rules have been attached Figure 7-2 245 c07.indd 245 ... element it applies to 249 c07.indd 249 11/20/09 4: 49:28 PM Chapter 7: Cascading Style Sheets The way in which some properties inherit saves you from having to write out rules and all the propertyvalue pairs for each element and makes for a more compact style sheet Appendix C contains a handy reference to CSS properties and tells you which ones do and do not inherit Where You Can Add CSS Rules The example... < /html> Now let’s take a look at how to style this page Figure 7-3 shows how the page will look with the style sheet attached 246 c07.indd 246 11/20/09 4: 49:27 PM Chapter 7: Cascading Style Sheets Figure 7-3 You can create a CSS style sheet in the same editor you are using to create your XHTML pages; once you have created a CSS file it is saved with the file extension css The style sheet... confidently writing CSS style sheets and should have learned many of the properties you can use to affect the presentation of any document using CSS c07.indd 243 11/20/09 4: 49:13 PM Chapter 7: Cascading Style Sheets In the next chapter, you will continue to learn more CSS properties, as well as how CSS can be used to position the content of elements within a page Introducing CSS CSS works by allowing... following: ❑ What makes up a CSS rule ❑ How to place CSS rules within your document and how to link to an external CSS document ❑ How properties and values control presentation of different elements within your document ❑ How to control the presentation of text using CSS ❑ How CSS is based on a box model, and how you set different properties for these boxes (such as width and styles of borders) By the...c06.indd 242 11/20/09 4: 46 :49 PM 7 Cascading Style Sheets Having learned how to structure the content of your documents using XHTML s wide variety of elements and attributes, you’re now going to start making your pages look a lot more exciting You’re going to learn how to use cascading style sheets (or CSS for short) to take control of the style of your pages, including the colors and size of fonts,... dedicated to CSS: ❑ www.w3.org/style /css/ ❑ www.devguru.com/Technologies /css/ quickref /css_ index .html ❑ www.w3schools.com /css/ css_reference.asp Controlling Text Several properties allow you to control the appearance of text in your documents These can be split into two groups: ❑ Those that directly affect the font and its appearance (including the typeface used, whether it is regular, bold or italic, and the... instance of the element, the selector indicates that this one rule applies to all elements in the document 244 c07.indd 244 11/20/09 4: 49:26 PM Chapter 7: Cascading Style Sheets Here is an example of a CSS rule that applies to several different elements (in this example, the , , and elements) A comma separates the name of each element that this rule will apply to The rule also specifies... sheets it must carry three attributes: type, rel, and href Here is an example of the element used in an XHTML page indicating that it should be styled by a CSS file called interface .css, which lives in a subdirectory called CSS: In addition to the core attributes, the element can also take the following attributes: charset . page. Figure 6-12 Figure 6-13 c06.indd 241 c06.indd 241 11/20/09 4: 46 :48 PM11/20/09 4: 46 :48 PM c06.indd 242 c06.indd 242 11/20/09 4: 46 :49 PM11/20/09 4: 46 :49 PM 7 Cascading Style Sheets Having. body > < /body > < /html > c06.indd 233c06.indd 233 11/20/09 4: 46 :46 PM11/20/09 4: 46 :46 PM Chapter 6: Frames 2 34 4. In the navigation .html page, there are links to each. the images and fruit description pages in the code download, but try to create the frameset and navigation on your own). ❑ ❑ c06.indd 240 c06.indd 240 11/20/09 4: 46 :48 PM11/20/09 4: 46 :48 PM Chapter