LESSON LEARNING TARGETS

Size: px

Start display at page:

Download "LESSON LEARNING TARGETS"

MargaretMargaret Fields
6 years ago
Views:

1 DAY 3 Frames

2 LESSON LEARNING TARGETS I can describe the attributes of the <frameset> tag. I can write code to create frames for displaying Web pages with headings, menus, and other content using the <frameset> and <frame> tags.

3 Creating a Frame Definition File

4 4 Frame with Header Frame with Menu Frame with Home page; (this is the only frame in which content changes) Project 6: Using Frames in a Web Site

5 Enter these tags: <!DOCTYPE html ENTERING INITIAL HTML TAGS FOR THE FRAME DEFINITION FILE PUBLIC "-//W3C//DTD XHTML 1.0 Frameset/EN" " frameset.dtd"> Needed for working with Frames

6 Enter these tags next: <html> <head> <title> </title> </head> ENTERING INITIAL HTML TAGS FOR THE FRAME DEFINITION FILE Bill Thomas Illustrations </html>

7 FRAME DEFINITION FILE Please Notice: NO <body> tags in the frame definition file <frameset> and <body> tags are mutually exclusive, so they cannot exist in the same file

8 Save your file: Create a Proj5Files Folder SAVING THE FRAME DEFINITION FILE Name of File: framedef.htm

9 COLUMNS AND ROWS IN FRAMESETS Frameset Attributes Attribute: cols Indicates the number of columns, and the size in which to display them in the browser window Examples: <frameset cols= 25%,75% > <frameset cols= 20%,65%,15%> <frameset cols= 150,300 > 2 and 3 columns, relative widths 2 columns, absolute width in pixels

10 COLUMNS AND ROWS IN FRAMESETS Frameset Attributes (continued) Attribute: rows Indicates the number of rows, and the size in which to display them in the browser window Examples: <frameset rows= 20%,80% > <frameset rows= 10%,25%,65%> <frameset rows= 125,425 > 2 and 3 rows, relative heights 2 rows, absolute height in pixels

11 COLUMNS AND ROWS IN FRAMESETS Frameset Attributes Notes on cols and rows attributes: Relative measures: Using percentages means the proportions of the windows in the browser will remain the same when the browser window is resized

12 COLUMNS AND ROWS IN FRAMESETS Frameset Attributes Notes on cols and rows attributes: Absolute measures: Using pixels means the size of the frame is fixed and does not resize when the browser window is resized

13 COLUMNS AND ROWS IN FRAMESETS Frameset Attributes Third option on cols and rows attributes: Using asterisks (called wildcards) Allows the browser to determine how much space is needed for the frame based on information given in the cols or rows attribute

14 COLUMNS AND ROWS IN FRAMESETS Frameset Attributes Third option on cols and rows attributes: Examples using asterisks (or wildcards) <frameset cols= *,*,* > <frameset rows= *,25%,* > 3 equally space columns 3 rows, the middle row of 25%, others equal

15 Recall: Our project includes three frames First, we will create a two-column frameset Then, within the left column, we will create a two-row frameset DEFINING COLUMNS AND ROWS IN THE FRAMESET

16 DEFINING COLUMNS AND ROWS IN THE FRAMESET In Frame Definition File First, add the following to create a two-column frameset: </head> <frameset cols= 25%,75% > </frameset>

17 DEFINING COLUMNS AND ROWS IN THE FRAMESET In Frame Definition File Second, break the first column up into two rows <frameset cols= 25%,75% > <frameset rows= 20%,80% > </frameset> </frameset>

19 SPECIFYING FRAME ATTRIBUTES Frame Attributes Each frame needs its own <frame> tag within the <frameset> tags The src attribute is used to identify the Web page that will appear in the given frame In this project, we have 3 frames: Header page Menu page Home page

20 20 Header Frame Menu Frame Home Page Frame Project 6: Using Frames in a Web Site

21 SPECIFYING ATTRIBUTES OF THE HEADER FRAME Header Frame Top frame of left column Contains logo page (to be created) Will remain constant (i.e. no other Web pages will appear in this frame) Should not allow scrolling - the content is to be displayed without having to scroll Border frames will be turned off (gives a polished, seamless appearance)

22 SPECIFYING ATTRIBUTES OF THE HEADER FRAME Header Frame - Insert the highlighted code: <frameset cols= 25%,75% > <frameset rows= 20%,80% > <frame src="header.htm title= header name= header scrolling="no frameborder="no"> </frameset> </frameset>

23 SPECIFYING ATTRIBUTES OF THE MENU FRAME Menu Frame Bottom frame of left column Contains navigation menu page (to be created) Will remain constant (i.e. no other Web pages will appear in this frame) Should allow scrolling, to ensure all users will have access to all links, no matter the size of the browser window Border frames will be turned off (gives a polished, seamless appearance)

24 Menu Frame - Insert the highlighted code: <frameset cols= 25%,75% > <frameset rows= 20%,80% > <frame src="header.htm title= header name= header scrolling="no frameborder="no"> <frame src="menu.htm title= menu name= menu frameborder="no"> </frameset> </frameset> End of the first column

26 SPECIFYING ATTRIBUTES OF THE MAIN FRAME Main Frame Entire right column of window Will contain the home page at startup Will NOT remain constant; will display the linked content identified in the menu frame Should allow scrolling, to ensure all users will have access to all page content, no matter the size of the browser window Border frames will be turned off (gives a polished, seamless appearance)

27 Main Frame SPECIFYING ATTRIBUTES OF THE MAIN FRAME (continued) Identifying the frame as a target of other pages Attribute: name= Indicates the name of the frame so that it can be used as a target The links in the navigation menu will use the target name to indicate all linked Web pages that should be displayed in the frame could be any frame, but in this project, only the main frame will be used as a target

28 SPECIFYING ATTRIBUTES OF THE MAIN FRAME Main Frame - Insert the highlighted code: </frameset> End of the first column <frame src="home.htm title= win-main name="win-main frameborder="no"> </frameset> End of the second column </html>

30 Worksheet 5C HOMEWORK

32 DAY 4 Linking Web Pages to Frame Definition File

33 LESSON LEARNING TARGETS I can describe the attributes of the <frameset> tag. I can write code to create frames for displaying Web pages with headings, menus, and other content using the <frameset> and <frame> tags.

34 Creating the Web Pages for the Frames

35 35 Header Frame Menu Frame Home Page Frame Project 6: Using Frames in a Web Site

36 CREATING THE HEADER PAGE Header Page File name: header.htm Top frame of left column Displays company logo Also used as a link back to the home page We ll set the link colors to white to match the background of the page

37 CREATING THE HEADER PAGE Header Page - Insert the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset/EN" " frameset.dtd"> <html> <head> <title>bill Thomas Illustrations </title> </head> </html>

38 CREATING THE HEADER PAGE Header Page - Continue with the following code: <body text="navy" link="white" vlink="white" alink="white"> </body> </html> Sets all links to be white

39 HEADER WEBPAGE When Thomaslogo picture clicked Frame named win-main will change as a result this is the TARGET of our link We want our TARGET to change to display the thomaswaterfall picture

40 CREATING THE HEADER PAGE Header Page - Continue with the following code: <body text="navy" link="white" vlink="white" alink="white"> <a href="thomaswaterfall.jpg" target="win-main"> </a> </body> </html> <img src="thomaslogo.jpg" width="179" height="81" /> When thomaslogo clicked, thomaswaterfall picture will appear in the frame named win-main href can link to an image (like here) or webpage

42 42 Header Frame Menu Frame Home Page Frame Project 6: Using Frames in a Web Site

43 CREATING THE MENU PAGE Menu Page File name: menu.htm Bottom frame of left column Displays menu for navigating the Web site Contains both graphics links and text links We ll set the link colors to navy to match the color scheme of the page can t be white, as the text links wouldn t be visible!

44 MENU WEBPAGE When each picture/text link is clicked Frame named win-main will change as a result this is the TARGET of our link We want our TARGET to change to display the correct picture or page.

45 CREATING THE MENU PAGE Menu Page - Insert the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset/EN" " frameset.dtd"> <html> <head> <title>bill Thomas Illustrations </title> </head> </html>

46 CREATING THE MENU PAGE SETTING LINKS Menu Page - Finishing base code of page: <body text="navy" link= navy" vlink= navy" alink= navy"> </body> </html>

47 CREATING THE MENU PAGE Menu Page - Uses table for menu two columns two rows each cell has both text link and image link link at bottom, after table

48 CREATING THE MENU PAGE Menu Page - Creating table and first cell of menu: <body text="navy" link= navy... > <table border="0" cols="2"> <tr> <td> <a href="thomascross.jpg" target="win-main"> </a> </td> Identifies Target Frame for the Hyperlink Cross Hatch<br/> <img src="thomascrosssm.jpg" width="72" height="98" />

49 CREATING THE MENU PAGE Menu Page - Creating second cell for menu: <td> <a href="thomasfull.jpg" target="win-main"> </a> </td> </tr> Full Color<br /> <img src="thomasfullsm.jpg" width="72" height="98" />

50 CREATING THE MENU PAGE Menu Page - Creating third cell for menu: <tr> <td> <a href="thomasink.jpg" target="win-main"> </a> </td> Ink Wash<br /> <img src="thomasinksm.jpg" width="72" height="98" />

51 CREATING THE MENU PAGE Menu Page - Creating fourth cell for menu: <td> </a> </td> </tr> </table> <a href="orderform.htm" target="win-main"> Order Form<br /> <img src="orderformsm.jpg" width="72" height="98"/>

53 Menu Page - Creating link: CREATING THE MENU PAGE <p><em><font size="-1"> questions and comments to <a href="mailto:billthomas@isp.com"> billthomas@isp.com</a>. </font></em></p> </body> </html>

55 USING TARGETS FOR FRAMES Note on Naming Target Frames If no frame name is specified as a target, the linked page opens in the current frame (i.e. the frame that contains the link)!

56 56 Header Frame Menu Frame Home Page Frame Project 6: Using Frames in a Web Site

57 CREATING THE HOME PAGE Home Page File name: home.htm Right column of the frameset Displays a simple graphic with no text

58 CREATING THE HOME PAGE Home Page - Insert the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset/EN" " frameset.dtd"> <html> <head> <title>bill Thomas Illustrations </title> </head> </html>

59 CREATING THE HOME PAGE Home Page - Finishing the code: <body> <img src="thomaswaterfall.jpg" width="309" height="384" /> </body> </html> Picture we want displayed at the beginning when the frame definition file is first loaded.

60 60 DOWNLOAD PICTURES Go to my classroom website download all picture files and save them in the Proj5Files folder Project 6: Using Frames in a Web Site

61 VIEWING THE FRAME DEFINITION FILE USING A BROWSER Using the browser, open: framedef.htm Navigate the pages to be sure: the links work correctly the page format is correct Be sure to test the home link in the Header Frame by clicking the logo! NOTE: Each page could be view independently without using frames

62 VIEWING THE FRAME DEFINITION FILE USING A BROWSER

63 None HOMEWORK

65 DAY 5-7 Project Work Days

66 DAY 8 Review

67 DAY 9 Test

COMSC-030 Web Site Development- Part 1. Part-Time Instructor: Joenil Mistal

COMSC-030 Web Site Development- Part 1 Part-Time Instructor: Joenil Mistal Chapter 10 10 Working with Frames Looking for a way to enhance your Web site layout? Frames can help you present multiple pages