1. HTML Comprehensive Concepts and Techniques Second Edition Creating Frames on a Web Page

2. 2 Today’s Agenda  Introduce Frame tags.  Worksheet – Another frame!

3. 3 Introduction  Frames divide a Web page into more than one window  A frame is a rectangular area (window) in which text or graphics can appear  A frame definition file contains the layout of the frames on the Web page  You will need a separate HTML file for each frame on your Web page

4. 4 Creating Web Pages with Frames  Frames can be used: –To allow a Web site visitor to view more than one page at a time –For navigation –To display information that must stay on the screen as other parts of the page change

5. 5 Creating Web Pages with Frames frames frame

6. 6 Using Frames  To use frames, create a frame definition file using these three tags:

7. 7 Using Frames two rows created two columns created header.htm in frame 1, scrolling off menu.htm in frame 2 home.htm in frame 3 target name frameset ending tags

8. 8 Using Frames  The frame definition file also contains additional information:

9. 9 This code produces… Sample of Two Horizontal Frames

10. 10 … this frames page border row

11. 11 This code produces… Sample of Two Vertical Frames

12. 12 … this frames page columns

13. 13 This code produces… Andrews High School Class of ’90

14. 14 … this frames page no border

15. 15 Planning and Laying Out Frames  Sketch the frame structure on paper before writing the HTML code two rows two columns

16. 16 Start Notepad

17. 17 Enter Initial HTML Tags

18. 18 Setting Frame Rows  Use the ROWS attribute in the tag to set the number and sizes of rows sizes of rows as a percentage of the screen

19. 19 Setting Frame Rows  Additional rows may be added by simply specifying the height in percentage of screen height or number of pixels  Asterisks may be used instead of numbers to evenly divide the remaining space available

20. 20 Setting Frame Rows first row is 30% high second row is 70% high Enter the FRAMESET tag on line 6 of your document

21. 21 Identifying the Header Content  The frame in the first row will display the header Web page  A tag must define each frame in the frame definition file  Use the SRC attribute to identify the Web page that will display in the frame  You will turn off scrolling because the header can display without having to scroll

22. 22 Identifying the Header Content Enter the FRAME tag on line 7 of your document Web page that displays in first frame scrolling turned off for first frame

23. 23 Setting Frame Columns  Columns divide the screen vertically  The COLS attribute works like the ROWS attribute  If you need more than two columns, you must include the dimensions for the columns in the tag

24. 24 Setting Frame Columns Enter the FRAMESET tag on line 9 of your document first column is 25% wide second column is 75% wide

25. 25 Identifying the Column Content  The first column will display the navigation page that will remain constant  Do not turn off scrolling, in case further links are added in the future –The default scrolling setting is AUTO –The scroll bar will automatically be available for the frame, if needed

26. 26 Identifying the Column Content  The second column will display variable information  Use the NAME attribute to give that frame a target name –Links can use this target to direct the display of subsequent Web pages to that frame

27. 27 Identifying the Column Content Web page menu.htm displays in a second frame Web page home.htm displays in a third frame Name of third frame; other Web pages can use as a target Enter the FRAME tags on lines 10 and 11 of your document

28. 28 Ending the Framesets  You must enter a tag for each tag begin frameset 1 begin frameset 2 end frameset 1 end frameset 2 Enter the /FRAMESET tags on lines 13 and 14 of your document

29. 29 Saving the HTML File  Save the HTML file on your flash drive or desktop with framedef.htm as the file name file name

30. 30 Creating the Header Page  The header frame always displays on the AHS Web site  The image (screagle.jpg) that will go in the header is contained on the HTML Data Disk

31. 31 Entering Initial HTML Tags  Select New from the File menu  Enter the initial HTML tags, as usual, and type AHS Header Frame as the title  Make the background color navy:  Press ENTER twice  Click the blank line (line 6)

32. 32 Entering Initial HTML Tags background color

33. 33 Adding an Image and a Heading  Create a one-row borderless table that contains the image and heading text  Enter this HTML code starting on line 7

34. 34 Saving the HTML File  Save the HTML file on your flash drive or desktop with header.htm as the file name file name

35. 35 Entering Initial HTML Tags  Select New from the File menu  Enter the initial HTML tags, as usual, and type AHS Menu Frame as the title  Set the colors of the background, body text, and the links by entering the following tag:

36. 36 Entering Initial HTML Tags  Press the ENTER key twice  Click the blank line (line 7)

37. 37 Adding Hypertext References and Targets  Enter this HTML code starting on line 7 to create the navigational links:

38. 38 Adding Hypertext References and Targets The target attribute tells the browser in which frame to open the link

39. 39 Saving the HTML File  Save the HTML file on flash drive or desktop with menu.htm as the file name file name

40. 40 Creating the Home Page  Select New from the File menu  Enter the initial HTML tags, as usual, and type AHS Home Frame as the title  Set the color of links to red:  Press ENTER twice  Click the blank line (line 6)

41. 41 Creating the Home Page  Enter this HTML code starting on line 7 to create the navigational links:

42. 42 Saving the HTML File  Save the HTML file on flash drive or desktop with home.htm as the file name file name

43. 43 Viewing the HTML Files Using your Browser  Start your browser  Type a:\framedef.html in the address box and then press the ENTER key  The three Web pages created in this project display on the Web site home page

44. 44 Viewing the HTML Files Using your Browser frame 1 header.htm frame 2 menu.htm frame 3 home.htm