Tự học HTML và CSS trong 1 giờ - part 53 pptx

ptg Now return to the red page and click the second link. The blue page opens in a third browser window. Note that the new windows probably won’t be laid out like the ones shown in Figure 17.2; they usually overlap each other. The following target=“blue_page” statement in the parent.html page is what causes the new window to open: <a href=“blue.html” target=“blue_page”>Open</a> the Blue Page in a new window.</p> The previous two examples opened each of the web pages in a new browser window. The third link, however, uses the target=“yellow_page” statement to open the green page in the window named yellow_page. You accomplish this using the following code in parent.html: <p><a href=“green.html” target=“yellow_page”>Replace</a> the yellow page with the Green Page.</p> Because you already opened the yellow_page window when you clicked the link for the yellow page, the green page should replace the page that’s already in it. To verify this, click the third hyperlink on the red page. This replaces the contents of the yellow page (with the yellow_page target name) with the green page (green.html), as shown in Figure 17.6. 496 LESSON 17: Working with Frames and Linked Windows FIGURE 17.6 green.html displayed in the web browser window named green_page. ▲ , The <base> Tag When you’re using the target attribute with links, you’ll sometimes find that all or most of the hyperlinks on a web page should point to the same window. This is especially true when you’re using frames, as you’ll discover in the following section. Download from www.wowebook.com ptg In such cases, instead of including a target attribute for each <a> tag, you can use another tag, <base>, to define a global target for all the links on a web page. The <base> tag is used as follows: <base target=“window_name”> If you include the <base> tag in the <head> </head> block of a document, every <a> tag that doesn’t have a target attribute will be directed to the window indicated by the base tag. For example, if you had included the tag <base target=“yellow_page”> in the HTML source for parent.html, the three hyperlinks could have been written as follows: <!DOCTYPE html> <html> <head> <title>Parent Window - Red</title> <style type=”text/css” media=”screen”> body { background-color: #ff9999; } </style> <base target=”yellow_page”> <!— add base target=”value” here —> </head> <body> <h1>Parent Window - Red</h1> <p><a href=”yellow.html” target=”yellow_page”>Open</a> <!— no need to include a target —> the Yellow Page in a new window.</p> <p><a href=”blue.html” target=”blue_page”>Open</a> the Blue Page in a new window.</p> <p><a href=”green.html” target=”yellow_page”>Replace</a> <!— no need to include a target —> the yellow page with the Green Page.</p> </body> </html> In this case, yellow.html and green.html load into the default window assigned by the <base> tag (yellow_page); blue.html overrides the default by defining its own target window of blue_page. You also can override the window assigned with the <base> tag by using one of two special window names. If you use target=“_blank” in a hyperlink, it opens a new browser window that doesn’t have a name associated with it. Alternatively, if you use target=“_self”, the current window is used rather than the one defined by the <base> tag. Working with Linked Windows 497 17 Download from www.wowebook.com ptg 498 LESSON 17: Working with Frames and Linked Windows If you don’t provide a target using the <base> tag and you don’t indicate a target in a link’s <a> tag, the link will load the new document in the same frame or window as the link. Working with Frames Frames make it possible to split a single web “page” into multiple independent parts, each of which can display a document on its own. When frames were originally intro- duced, this was a much bigger deal than it is today. One of the key benefits of frames is that they enable you to make part of a site visible all the time even while other parts can be scrolled out of view. This can now be done using CSS positioning. Frames enable you to load new content into one section of a layout while leaving the rest of the page in place, but that can be accomplished using JavaScript. That is not to say that there’s no place for the use of frames any more, but they are much less popular than they were in their heyday. There are some situations where frames are absolutely the best solution to the problem at hand, but these days there are a lot of solid alternatives, too. Working with frames involves describing the frame layout and then choosing which documents will be displayed in each frame. Figure 17.7 shows how five separate documents are needed to create the screen shown earlier in Figure 17.1. The first HTML document you need to create is called the frameset document. In this document, you define the layout of your frames, and the locations of the documents to be initially loaded in each frame. The document in Figure 17.7 has three frames. Each of the three HTML documents other than the frameset document, the ones that load in the frames, contain normal HTML tags that define the contents of each frame. These documents are referenced by the frameset document. NOTE Download from www.wowebook.com ptg The <frameset> Tag To create a frameset document, you begin with the <frameset> tag. When used in an HTML document, the <frameset> tag replaces the <body> tag, as shown in the following code: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <frameset> your frameset goes here </frameset> </html> It’s important that you understand upfront how a frameset document differs from a normal HTML document. If you include a <frameset> tag in an HTML document, you can- not include a <body> tag also. The two tags are mutually exclusive. In addition, no other formatting tags, hyperlinks, or document text should be included in a frameset document. (The exception to this is the <noframes> tag, which you learn about later in this lesson in FIGURE 17.7 You must create a separate HTML document for each frame. Working with Frames 499 17 HTML FILE Frame Definition HTML FILE 13 2 4 Frame 1 Contents HTML FILE Frame 4 Contents HTML FILE Frame 3 Contents HTML FILE Frame 2 Contents Download from www.wowebook.com ptg the section called, appropriately enough, “The <noframes> Tag.”) The <frameset> tags contain only the definitions for the frames in this document—what’s called the page’s frameset. The HTML 4.01 specification supports the <frameset> tag along with two possible attributes: cols and rows. The cols Attribute When you define a <frameset> tag, you must include one of two attributes as part of the tag definition. The first of these attributes is the cols attribute, which takes the following form: <frameset cols=“column width, column width, ”> The cols attribute tells the browser to split the screen into a number of vertical frames whose widths are defined by column width values separated by commas. You define the width of each frame in one of three ways: explicitly in pixels, as a percentage of the total width of the <frameset>, or with an asterisk (*). When you use the asterisk, the frames- compatible browser uses as much space as possible for that frame. When included in a complete frame definition, the following <frameset> tag splits the browser into three vertical frames, as shown in Figure 17.8. The fifth line in the following code example creates a left frame 100 pixels wide, a middle column that’s 50% of the width of the browser, and a right column that uses all the remaining space: Input ▼ <!DOCTYPE html> <html> <head> <title>Three Columns</title> </head> <frameset cols=”100,50%,*”> <frame src=”leftcol.html”> <frame src=”midcol.html”> <frame src=”rightcol.html”> </frameset> </html> 500 LESSON 17: Working with Frames and Linked Windows Download from www.wowebook.com ptg Output . FIGURE 17.8 The cols attribute defines the number of vertical frames or columns in a frameset. Working with Frames 501 17 Because you’re designing web pages for users with various screen sizes, you should use absolute frame sizes sparingly. Whenever you do use an absolute size, ensure that one of the other frames is defined using an * to take up all the remaining screen space. NOTE To define a frameset with three columns of equal width, use cols=“*,*,*”. This way, you won’t have to mess around with percentages because frames-compatible browsers automatically assign an equal amount of space to each frame assigned a width of *. The rows Attribute The rows attribute works the same as the cols attribute, except that it splits the screen into horizontal frames rather than vertical ones. To split the screen into two frames of equal height, as shown in Figure 17.9, you would write the following: Input ▼ <!DOCTYPE html> <html> <head> <title>Two Rows</title> </head> <frameset rows=”50%,50%”> <frame src=”toprow.html”> <frame src=”bottomrow.html”> </frameset> </html> TIP Download from www.wowebook.com ptg Alternatively, you could use the following line: <frameset rows=“*,*”> 502 LESSON 17: Working with Frames and Linked Windows Output . FIGURE 17.9 The rows attribute defines the number of horizontal frames or rows in a frameset. If you try either of the preceding examples, you’ll find that the <frameset> tag doesn’t appear to work. You get this result because there are no contents defined for the rows or columns in the frameset. To define the contents, you need to use the <frame> tag, which is discussed in the next section. The <frame> Tag After you have your basic frameset laid out, you need to associate an HTML document with each frame using the <frame> tag, which takes the following form: <frame src=“document URL”> For each frame defined in the <frameset> tag, you must include a corresponding <frame> tag, as shown in the following: Input ▼ <!DOCTYPE html> <html> <head> <title>The FRAME Tag</title> </head> <frameset rows=”*,*,*”> <frame src=”document1.html”> <frame src=”document2.html”> <frame src=”document3.html”> </frameset> </html> NOTE Download from www.wowebook.com ptg This example defines a frameset with three horizontal frames of equal height (see Figure 17.10). The contents of document1.html are displayed in the first frame, the contents of document2.html in the second frame, and the contents of document3.html in the third frame. Working with Frames 503 17 Output . FIGURE 17.10 You use the <frame> tag to define the contents of each frame. When you’re creating frameset documents, you might find it help- ful to indent the <frame> tags so that they’re separated from the <frameset> tags in your HTML document. This has no effect on the appearance of the resulting web pages, but it does tend to make the HTML source easier to read. The <noframes> Tag What happens if a browser that doesn’t support frames navigates to a frameset document? Nothing. You get a blank page. Fortunately, there’s a way around this problem. A special tag block called <noframes> enables you to include additional HTML code as part of the frameset document. The code you enclose within the <noframes> element isn’t displayed in frames-compatible browsers, but it’s displayed in browsers that don’t support frames. The <noframes> tag takes the following form: <!DOCTYPE html> <html> <head> <title>Frameset with No Frames Content</title> </head> TIP Download from www.wowebook.com ptg <frameset> your frameset goes here. <noframes> Include any text, hyperlinks, and tags you want to here. </noframes> </frameset> </html> Using the frames’ content and tags inside <noframes>, you can create pages that work well with both kinds of browsers. Later in this lesson, you add some <noframes> content to a frameset. 504 LESSON 17: Working with Frames and Linked Windows The way the <noframes> tag works is actually kind of interesting. It works because web browsers are designed to ignore tags that they don’t understand. So, browsers that don’t support frames ignore the <frameset> and <frame> tags. They also ignore the <noframes> tag and just display whatever is inside it. Browsers that do support frames know to render the frames and ignore the text inside the <noframes> tag. You might wonder which browsers lack frame support these days. The answer is that browsers on mobile browsers often do not support them. These days you should take mobile devices into account when you create websites, because their use is growing rapidly. Changing Frame Borders Notice that all the frames in this lesson have thick borders separating them. A number of attributes can be set to control the appearance of frame borders or prevent them from appearing altogether. Start with the <frame> tag. The frameborder attribute is used to enable or disable the default, browser-generated border between frames, which is usually gray and has a beveled edge. frameborder takes two possible values: 1 (to display borders) or 0 (to turn off the display of borders). Frames can be styled using Cascading Style Sheets (CSS), so if you want to add your own border to a frame, disable the browser-supplied borders using the frameborder attribute and add your own using the CSS border property. NOTE Download from www.wowebook.com ptg Changing Frame Borders 505 17 If you turn off the border, frames-compatible browsers won’t display its default three-dimensional border. However, a space will still be left for the border. For example, the following code adds a deep red border around the middle frame in the frameset using CSS: <!DOCTYPE html> <html> <head> <title>The FRAME Tag</title> <style type=”text/css” media=”screen”> frame.middle { border-top: 3px solid #cc3333; border-bottom: 3px solid #cc3333; } </style> </head> <frameset rows=”*,*,*”> <frame frameborder=”0” src=”document1.html”> <frame frameborder=”0” class=”middle” src=”document2.html”> <frame frameborder=”0” src=”document3.html”> </frameset> </html> As you can see, you can use classes (and IDs) with frames just as you can with other HTML elements. Of course, there’s room for confusion when borders are defined. In the following frameset definition, a conflict arises because the top frame has the frame border enabled, but the middle frame does not. In this case, if either frame has the border turned on, it is displayed. <!DOCTYPE html> <html> <head> <title>The FRAME Tag</title> </head> <frameset rows=”*,*,*”> <frame frameborder=”1” src=”document1.html”> <frame frameborder=”0” src=”document2.html”> <frame frameborder=”0” src=”document3.html”> </frameset> </html> NOTE Download from www.wowebook.com . in FIGURE 17 .7 You must create a separate HTML document for each frame. Working with Frames 499 17 HTML FILE Frame Definition HTML FILE 13 2 4 Frame 1 Contents HTML FILE Frame 4 Contents HTML FILE Frame. target=“yellow_page”> in the HTML source for parent .html, the three hyperlinks could have been written as follows: <!DOCTYPE html& gt; < ;html& gt; <head> <title>Parent Window - Red</title> <style. rows=”*,*,*”> <frame frameborder= 1 src=”document1 .html > <frame frameborder=”0” src=”document2 .html > <frame frameborder=”0” src=”document3 .html > </frameset> < /html& gt; NOTE Download