1 / 24

Creating Frames in a Web Site: Design, Scrolling, and Navigation

Learn how to design and create frame structures, change scrolling options, name frame content targets, and set up startup web pages. Create a header and navigation menu page, and a home page.

cgantt
Download Presentation

Creating Frames in a Web Site: Design, Scrolling, and Navigation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Project 6 Using Framesin a Web Site

  2. Project Objectives • Designand 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

  3. 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

  4. Creating a Frame Definition File Project 6: Using Frames in a Web Site

  5. Frame Tag Attributes Project 6: Using Frames in a Web Site

  6. Structure of frames framedef.htm header.htm home.htm Menu.htm Project 6: Using Frames in a Web Site

  7. 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

  8. Start framedef.htm file • Note that there is no <body> </body> Project 6: Using Frames in a Web Site

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. 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

  15. 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

  16. 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

  17. 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

  18. 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

  19. 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

  20. Create the home.htm • Insert an image (see the file) Project 6: Using Frames in a Web Site

  21. 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

  22. Viewing and Printing the Frame Definition File Using a Browser Project 6: Using Frames in a Web Site

  23. 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

  24. Project 6 Complete Using Framesin a Web Site

More Related