Project 6
advertisement
HTML Concepts and Techniques Fourth Edition Project 6 Using Frames in a Web Site Project Objectives • • • • • • • • Design and create a frame structure Change frame scrolling options Name a frame content target Identify Web pages to display at startup Set frame rows Create a header page with text Create a navigation menu page with text links Create a home page Project 6: Using Frames in a Web Site 2 Creating a Frame Definition File • Example: www.student.gsu.edu/~wkim5/project06/framedef.htm • A frameset is used to define the layout of the frames that are displayed Project 6: Using Frames in a Web Site 3 Creating a Frame Definition File Project 6: Using Frames in a Web Site 4 Frame Tag Attributes Project 6: Using Frames in a Web Site 5 Structure of frames framedef.htm header.htm home.htm Menu.htm Project 6: Using Frames in a Web Site 6 Start framedef.htm file <!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Frameset// EN "http://w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <title>Bill Thomas Illustrations</title> </head> </html> Project 6: Using Frames in a Web Site 7 Start framedef.htm file • Note that there is no <body> </body> Project 6: Using Frames in a Web Site 8 Defining Columns and Rows in the Frameset <!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Frameset// EN "http://w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <title>Bill Thomas Illustrations</title> </head> <!-- Define columns and rows in the frameset--> <frameset cols="25%,75%"> <frameset rows="20%,80%"> </html> Project 6: Using Frames in a Web Site 9 Specifying Attributes of the Header and Menu Frames (rows) </head> <frameset cols="25%,75%"> <frameset rows="20%,80%"> <!-- Specify Attributes of the Header and Menu Frames--> <frame src="header.htm" title = "header" name = "header" scrolling="no" frameborder = "no" /> <frame src="menu.htm" title = "menu" name = "menu" scrolling="no" frameborder = "no" /> </html> Project 6: Using Frames in a Web Site 10 Specifying Attributes of the Header and Menu Frames (rows) What if frameborder = “yes”? What if scrolling = “yes”? Project 6: Using Frames in a Web Site 11 Ending the frameset of the first column <frameset rows="20%,80%"> <!-- Specify Attributes of the Header and Menu Frames--> <frame src="header.htm" title = "header" name = "header" scrolling="no" frameborder = "no" /> <frame src="menu.htm" title = "menu" name = "menu" scrolling="no" frameborder = "no" /> <!-- Ending the frame set of rows--> </frameset> </html> Project 6: Using Frames in a Web Site 12 Specifying Attributes of the Main Frame <!-- Specify Attributes of the Header and Main Frames--> <frame src="home.htm" title = "win-main" name = "win-main" frameborder = "no" /> </html> Project 6: Using Frames in a Web Site 13 Ending the Framesets <!-- Ending the frame set--> </frameset> <!-- Specify Attributes of the Header and Main Frames--> <frame src="home.htm" title = "win-main" name = "win-main" frameborder = "no" /> <!-- Ending the frame set--> </frameset> Project 6: Using Frames in a Web Site 14 Creating the Header Page-header.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <title>Bill Thomas Illustrations</title> </head> <body> <a href = "thomaswaterfall.jpg" target = "win-main"> <img src = "thomaslogo.jpg" width = "179" height = "81" /> </a> </body> </html> Project 6: Using Frames in a Web Site 15 Creating the Menu Page-menu.htm <!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Frameset// EN "http://w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html > <head> <title>Bill Thomas Illustrations</title> </head> <! Insert the body with options> </body> </html> Project 6: Using Frames in a Web Site 16 Insert the body with options <!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Frameset// EN "http://w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html > <head> <title>Bill Thomas Illustrations</title> </head> <! Insert the body with options> <body text = "navy" link="navy" vlink="navy" alink="navy"> </body> </html> Project 6: Using Frames in a Web Site 17 Add the tables <! Add linkgs with Targets to the Menu pages> <table> <tr> <td><a href = "thomascross.jpg" target = "win-main"> Cross Hatch<br /> <img src ="thomascrosssm.jpg" width = "72" height = "98" /></a> </td> <td><a href = "thomasfull.jpg" target = "win-main"> Full Color<br /> <img src ="thomasfullsm.jpg" width = "72" height = "98" /> </a> </td> </tr> <tr> <td><a href = "thomasink.jpg" target = "win-main"> Ink Wash<br /> <img src = "thomasinksm.jpg" width = "92" height = "98" /> </a> </td> <td><a href = "orderform.htm" target = "win-main"> Order Form<br /> <img src = "orderformsm.jpg" width = "72" height = "98" /> </a> </td> </tr> </table> Project 6: Using Frames in a Web Site 18 Add e-mail link <! Add email link> <p><em><font size = "-1"> E-mail questions and comments to <a href = "mailto:billthomas@isp.com”>billthomas@isp.com</a>. </font></em></p> Project 6: Using Frames in a Web Site 19 Create the home.htm • Insert an image (see the file) Project 6: Using Frames in a Web Site 20 Viewing and Printing the Frame Definition File Using a Browser • Start your browser • Click File on the menu bar and then click Print on the File menu • Click the Options tab in the Print dialog box • Click As laid out on screen to select it and then click the Print button Project 6: Using Frames in a Web Site 21 Viewing and Printing the Frame Definition File Using a Browser Project 6: Using Frames in a Web Site 22 Testing the Links • Click the Cross Hatch link on the navigation menu • Click the Full Color link on the navigation menu • Click the Ink Wash link on the navigation menu Project 6: Using Frames in a Web Site 23 HTML Concepts and Techniques Fourth Edition Project 6 Complete Using Frames in a Web Site
