Presentation is loading. Please wait.

Presentation is loading. Please wait.

Frames. Dividing a page, called frameset, into frames, allow the visitor to see more than one page at a time Each frame contains its own Web page, and.

Similar presentations


Presentation on theme: "Frames. Dividing a page, called frameset, into frames, allow the visitor to see more than one page at a time Each frame contains its own Web page, and."— Presentation transcript:

1 Frames

2 Dividing a page, called frameset, into frames, allow the visitor to see more than one page at a time Each frame contains its own Web page, and theoretically could be viewed independently in a separate window One of the disadvantage  they can be hard to navigate

3 Creating a Simple Frameset Think of a frameset as a window with individual panes Each pane shows different information You decide how many panes your windows will have how its border look like should have scroll bars or not Assigning individual URLs to each pane, that is, frame

4 <!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> <meta http-equiv=“content-type” content=“text/html;charset=utf-8” /> FRAMES IN ROWS Create simple frameset with 3 horizontal rows all in the same column no … rows=“20%,60%,*” 3 rows row height name  identify the particular frame’s use

5 Creating Frames in Columns

6 <!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> <meta http-equiv=“content-type” content=“text/html;charset=utf-8” /> FRAMES IN COLUMNS

7 Creating Frames in Rows and Columns

8 <!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> <meta http-equiv=“content-type” content=“text/html;charset=utf-8” /> FRAMES IN COLUMNS

9 Combining Framesets

10 <!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> <meta http-equiv=“content-type” content=“text/html;charset=utf-8” /> COMBINING FRAMESETS

11 Creating an Inline Frame inline If you want to mix text, graphics and a frame all on one page, you’ll need to create a floating or inline frame

12 <!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> <meta http-equiv=“content-type” content=“text/html;charset=utf-8” /> INLINE FRAME COLOURS - colors - colors - colors - colors - colors combiningframesets.htm this part :: type the text that should appear if the browser can't display the frame </body> in the … tag and refer to frame.url

13 Adjusting a Frame’s Margins All browsers display a frame’s contents with a default margin from 8 to 15 pixels on each side You can adjust the margin so that there is more space, or, if you prefer, so that the frame’s contents begin in the top- left corner

14 <!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> <meta http-equiv=“content-type” content=“text/html;charset=utf-8” /> COMBINING FRAMESETS

15 Showing or Hiding Scroll Bars You can decide whether each individual frame should have scroll bar all the time, never, or only needed Only when needed Only when needed :: means that the scroll bars will appear only when there is more information than can be shown at one time in the frame If the visitors makes the window big enough, these scroll bars will eventually disappear To show scroll bars all the time : scrolling=“yes” To hide scroll bars all the time : scrolling=“no” To show scroll bars when needed : scrolling=“auto”

16 Adjusting the Color of the Borders In theory, you can change the color of each frame individually In practice, however, since the borders are shared between frames, the possibilities are more limited Unfortunately, the bordercolor attribute is not standard (X)HTML

17 Adjusting the Frame Borders By default, your visitor’s browser will draw sculpted borders around each frame in your frameset The border tag lets you control the width of the space between frames The frameborder tag lets you choose to fill that space with sculpted borders or leave it blank To hide the sculpted borders:

18 Keeping Visitors from Resizing Frames Frames with relative or variable sizes are always resized when the visitor changes the size of the browser window However, you can also choose whether to let the visitor resize the individual frames To keep visitor from resizing your frame:

19 Targeting Links to Particular Frames You can have other pages appear in the same frame The trick is to add a pointer, called a target, to the links to those pages The target says “open this link in the photos frame”

20 COMBINING FRAMESETS YELLOW text - text - text - text - text - text - text - text - text - text blue green red purple

21 Targeting Links to Special Spots You will want to make more general instructions, like having the link open on a new window. There are 4 special target names: <a href=“content.htm” target=“_blank”  to have the link open a new window target=“_self”  to open the link in the same frame that contains the link target=“_top”  to use the entire current window for the link target=“_parent”  to open the link in the frameset that contains the current frameset

22 Changing the Default Target In a frame contains a link, the link will open up in the same frame, by default, unless you change the target You can change the default target for all the links on a page by using the base tag

23 YELLOW text - text - text - text - text - text - text - text - text - text blue green red purple YELLOW text - text - text - text - text - text - text - text - text - text blue green red purple

24 Nesting Framesets As if frames and framesets weren’t complicated enough, you can nest framesets inside of frames to achieve special effects Build the inner frame == “combiningfra mesets.htm” Build the outer frameset == "Winter.htm" NESTING FRAMESETS


Download ppt "Frames. Dividing a page, called frameset, into frames, allow the visitor to see more than one page at a time Each frame contains its own Web page, and."

Similar presentations


Ads by Google