1. CSCI N241: Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Working with Frames

2. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Goals To understand how to work with the Frameset DTDTo understand how to work with the Frameset DTD To understand how to create framesTo understand how to create frames To understand how to create nested framesTo understand how to create nested frames To understand how to format framesTo understand how to format frames To understand how to create inline framesTo understand how to create inline frames

3. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Frames must be defined in a separate document from other HTML codeFrames must be defined in a separate document from other HTML code Because of the many problems and complaints associated with frames, they are deprecated in XHTML in favor of tablesBecause of the many problems and complaints associated with frames, they are deprecated in XHTML in favor of tables If frames are deprecated, then why study them at all?If frames are deprecated, then why study them at all? The Frameset DTD

4. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science You study frames primarily because they are so widely used and will more likely continue to be widely used for some timeYou study frames primarily because they are so widely used and will more likely continue to be widely used for some time The W3C created the Frameset DTD to allow Web page authors to create frames in well-formed documents until the Web completely switches to XML-based Web sites using the Strict DTDThe W3C created the Frameset DTD to allow Web page authors to create frames in well-formed documents until the Web completely switches to XML-based Web sites using the Strict DTD The Frameset DTD

5. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Creating Frames Using frames, you can split a single Web page into multiple windows, each of which can open a different documentUsing frames, you can split a single Web page into multiple windows, each of which can open a different document Frames are independent, scrollable portions of a Web browser window, with each frame capable of displaying a different documentFrames are independent, scrollable portions of a Web browser window, with each frame capable of displaying a different document

6. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Creating Frames

7. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Creating Frames You divide a document into frames using the elementYou divide a document into frames using the element The element and other elements are the only items that you can place inside a elementThe element and other elements are the only items that you can place inside a element

8. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Creating Frames The element replaces the element that is used in non-frame documentsThe element replaces the element that is used in non-frame documents You can create frames in a document in horizontal rows, vertical columns, or bothYou can create frames in a document in horizontal rows, vertical columns, or both

9. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Creating Frames Two attributes of the element, rows and cols, determine whether frames are created as rows or columnsTwo attributes of the element, rows and cols, determine whether frames are created as rows or columns –The rows attribute determines the number of horizontal frames to create –The cols attribute determines the number of vertical frames to create

10. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Creating Frames

11. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Creating Frames It is helpful to use an asterisk (*) in your document to represent the size of frames that do not require an exact number of pixels or exact window percentageIt is helpful to use an asterisk (*) in your document to represent the size of frames that do not require an exact number of pixels or exact window percentage The asterisk allocates any remaining screen space to an individual frameThe asterisk allocates any remaining screen space to an individual frame

12. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Creating Frames You can use combinations of pixels, percentages, and the asterisk to create framesYou can use combinations of pixels, percentages, and the asterisk to create frames The element creates the initial frames within a documentThe element creates the initial frames within a document

13. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Creating Frames You use the empty element to specify options for individual framesYou use the empty element to specify options for individual frames The src attribute of the element specifies the document to be opened in an individual frameThe src attribute of the element specifies the document to be opened in an individual frame

14. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Creating Frames

15. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Using the target and base Attributes One popular use of frames creates a table of contents frame on the left side of a Web browser window with a display frame on the right sideOne popular use of frames creates a table of contents frame on the left side of a Web browser window with a display frame on the right side

16. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Using the target and base Attributes

17. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Using the target and base Attributes The target attribute determines in which frame or Web browser window a document opensThe target attribute determines in which frame or Web browser window a document opens

18. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Using the target and base Attributes When you are using the same target window or frame for a long list of hyperlinks, it is easier to use the target attribute in the element instead of repeating the target attribute within each hyperlinkWhen you are using the same target window or frame for a long list of hyperlinks, it is easier to use the target attribute in the element instead of repeating the target attribute within each hyperlink

19. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Using the target and base Attributes You use the target attribute with the element to specify a default target for all links in a document, using the assigned name of a window or frameYou use the target attribute with the element to specify a default target for all links in a document, using the assigned name of a window or frame

20. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Nesting Frames Each individual frame within a window can contain its own set of framesEach individual frame within a window can contain its own set of frames You accomplish this nesting by including a element inside another elementYou accomplish this nesting by including a element inside another element

21. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Nesting Frames Frames that are contained within other frames are called nested framesFrames that are contained within other frames are called nested frames In Figure 5-9, the first element creates the four parent frames in the windowIn Figure 5-9, the first element creates the four parent frames in the window

22. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Nested Frames

23. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Frame Formatting

24. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The frameborder Attribute One other attribute you should understand is the frameborder attribute, which specifies whether to display a border around the frameOne other attribute you should understand is the frameborder attribute, which specifies whether to display a border around the frame You assign to the frameborder attribute a value of “1” to display a border and a value of “0” to suppress the borderYou assign to the frameborder attribute a value of “1” to display a border and a value of “0” to suppress the border

25. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The frameborder Attribute To completely suppress a border between two frames in Internet Explorer, you must include the framespacing attribute and assign to it a value of zeroTo completely suppress a border between two frames in Internet Explorer, you must include the framespacing attribute and assign to it a value of zero The framespacing attribute (proprietary only to Internet Explorer) determines the amount of space between frames in Internet ExplorerThe framespacing attribute (proprietary only to Internet Explorer) determines the amount of space between frames in Internet Explorer

26. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The longdesc Attribute For accessibility, you should include the longdesc attribute in your elements and assign to it the URL of a Web page containing a long description of the frameFor accessibility, you should include the longdesc attribute in your elements and assign to it the URL of a Web page containing a long description of the frame

27. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The longdesc Attribute The inclusion of the longdesc attribute is especially important for a frame that displays image, video, or other types of multimedia as its contentsThe inclusion of the longdesc attribute is especially important for a frame that displays image, video, or other types of multimedia as its contents You should use the longdesc attribute in a element in addition to a title attributeYou should use the longdesc attribute in a element in addition to a title attribute

28. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The marginheight and marginwidth Attribute The marginheight and marginwidth attributes determine the margins of the frame in pixelsThe marginheight and marginwidth attributes determine the margins of the frame in pixels Figure 5-13 shows the Beowulf Web page from Figure 5-12 after the attributes marginheight= “50” and marginwidth=“50” have been added to the element for the middle frameFigure 5-13 shows the Beowulf Web page from Figure 5-12 after the attributes marginheight= “50” and marginwidth=“50” have been added to the element for the middle frame

29. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The marginheight and marginwidth Attribute

30. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The noresize Attribute The Boolean noresize attribute disables the user’s ability to resize an individual frameThe Boolean noresize attribute disables the user’s ability to resize an individual frame Normally, users can adjust the size of frames to suit their own purposesNormally, users can adjust the size of frames to suit their own purposes

31. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The noresize Attribute You use the noresize attribute when you want to add a title that should always be visible in a frame or on a Web pageYou use the noresize attribute when you want to add a title that should always be visible in a frame or on a Web page To disable resizing of a frame, add the noresize attribute to the element and assign to it a value of “noresize” using the following statement: noresize=“noresize”To disable resizing of a frame, add the noresize attribute to the element and assign to it a value of “noresize” using the following statement: noresize=“noresize”

32. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The scrolling Attribute By default, a Web browser automatically adds scroll bars to a frame when the contents of the frame are larger than the visible areaBy default, a Web browser automatically adds scroll bars to a frame when the contents of the frame are larger than the visible area You can disable a frame’s scroll bars using the scrolling attributeYou can disable a frame’s scroll bars using the scrolling attribute The scrolling attribute can take one of three values; yes, no, and autoThe scrolling attribute can take one of three values; yes, no, and auto

33. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The scrolling Attribute A value of yes always turns on the scroll bars, even when the contents of a frame fit within the visible areaA value of yes always turns on the scroll bars, even when the contents of a frame fit within the visible area A value of no completely disables a frame’s scroll bars, even when the contents of a frame do not fit within the visible areaA value of no completely disables a frame’s scroll bars, even when the contents of a frame do not fit within the visible area

34. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The scrolling Attribute Auto turns the scroll bars on and off, depending on the visibility of the contents within a frameAuto turns the scroll bars on and off, depending on the visibility of the contents within a frame

35. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Element The element displays a message to users of Web browsers that are not capable of displaying framesThe element displays a message to users of Web browsers that are not capable of displaying frames For your frameset document to be well formed, you must place the element within a elementFor your frameset document to be well formed, you must place the element within a element

36. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Element The element must also include a element in order to be well formedThe element must also include a element in order to be well formed The element usually precedes the last elementThe element usually precedes the last element

37. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Inline Frames You can insert an inline frame into a non- frame document using the elementYou can insert an inline frame into a non- frame document using the element The element creates an inline frame that displays another document within the body of the current documentThe element creates an inline frame that displays another document within the body of the current document

38. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Inline Frames You use an inline frame when you want to display another document within the current document, but you do not need to divide the Web browser into multiple framesYou use an inline frame when you want to display another document within the current document, but you do not need to divide the Web browser into multiple frames

39. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Element Attributes Element Attributes

40. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Inline Frames If you use an … tag pair, then you should include as its content a message to users of Web browsers that are not capable of displaying frames, the same as with the elementIf you use an … tag pair, then you should include as its content a message to users of Web browsers that are not capable of displaying frames, the same as with the element

41. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Inline Frames If you use an … tag pair, then you should include as its content a message to users of Web browsers that are not capable of displaying frames, the same as with the elementIf you use an … tag pair, then you should include as its content a message to users of Web browsers that are not capable of displaying frames, the same as with the element

42. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Summary Frames are independent, scrollable portions of a Web browser window, with each frame capable of displaying its own URLFrames are independent, scrollable portions of a Web browser window, with each frame capable of displaying its own URL

43. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Summary The element and other elements are the only items that can be placed inside a elementThe element and other elements are the only items that can be placed inside a element The target attribute determines in which frame or Web browser window a URL opensThe target attribute determines in which frame or Web browser window a URL opens

44. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Summary The longdesc attribute specifies the URL of a Web page containing a long description of the frameThe longdesc attribute specifies the URL of a Web page containing a long description of the frame The marginheight and marginwidth attributes determine the margins of the frame in pixelsThe marginheight and marginwidth attributes determine the margins of the frame in pixels

45. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Summary The element displays an alternate message to users of Web browsers that cannot display framesThe element displays an alternate message to users of Web browsers that cannot display frames

46. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Resources Slides were adapted from the following text & companion lectures:Slides were adapted from the following text & companion lectures: XHTML, Comprehensive First Edition Dan Gosselin Published by Course Technology (2004)

47. N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Questions?