 Example Frames Coding |
| | Home | Support | Downloads | Email Marketing | Games Software | SEO Offer | Privacy | Contact | |
  |
 Feb 14 2007, 02:46 PM
Post
#1
|
|
|
Member  Group: Admin Team Posts: 23 Joined: 14-September 06 Member No.: 2  |
In the following example we will be creating a frame site using 3 frames. A header at the top, a navigation down the left with the remainder of the page as our page content. (if you do not have an HTML editor, you can download a superb one free from chami.com called HTML-kit, or you can use a plain text editor like Notepad.)
First we need to define our frame-set, this is done by creating an extra html file which, being the main frame, will call index.html CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Your Page Tile goes here</title> <meta name="DESCRIPTION" content="Description of page goes here"> <meta name="KEYWORDS" content="your, keywords, for, the, content, of, the, page, go, here"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <!--Main Frameset--> <frameset rows="20/,80/" frameborder="no" > <frame src="header.html" marginwidth="0" marginheight="0" scrolling="no" noresize> <frameset cols="129,*"> <frame src="nav.html" marginwidth="0" marginheight="0" scrolling="no" noresize> <frame src="page1.html" name="right_frame" marginwidth="5" marginheight="10"> </frameset> </frameset> <noframes><body>Place the structure of your index.html page here with all links from the links page. You must provide links for the spiders to follow. Netscape requires no frames down here</body></noframes> </html> Copy and paste the above code into your editor and save it as index.html. Next we need to create out header frame. CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Page Title</title> <meta name="DESCRIPTION" content="Page description"> <meta name="KEYWORDS" content="keywords, for, search, engines"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body background="link_to_background_image.jpg"> <img src="link_to_your/logo.gif" align="left" alt="" border="0"> <img src="link_to_your/image.jpg" align="right" alt="" border="0"> </body> </html> Copy and paste this code into your editor and save the file as header.html. Next we can create the navigation frame. CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Page Title</title> <meta name="DESCRIPTION" content="description of page"> <meta name="KEYWORDS" content="keywords, for, search engines"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body background="your_graphic/left.gif"> <div ID="buttons"> <table bgcolor="#000000" cellspacing="0" border="0"> <!--Row 1--> <tr align="center" valign="top"> <td align="center" colspan="1" rowspan="1"> <table background="your_graphic/button.gif" width="129" height="29" border="0"> <tr align="center" valign="top"> <td align="center" colspan="1" rowspan="1"> <a href="page1.html" target="right_frame">Products</a> </td> </tr></table> </td></tr> <!--Row 2--> <tr align="center" valign="top"> <td align="center" colspan="1" rowspan="1"> <table background="gfx/button.gif" width="129" height="29" border="0"> <tr align="center" valign="top"> <td align="center" colspan="1" rowspan="1"> <a href="page2.html" target="right_frame">News</a> </td> </tr></table> </td></tr> <!--Row 3--> <tr align="center" valign="top"> <td align="center" colspan="1" rowspan="1"> <table background="gfx/button.gif" width="129" height="29" border="0"> <tr align="center" valign="top"> <td align="center" colspan="1" rowspan="1"> <a href="page3.html" target="right_frame">Testamonials</a> </td> </tr></table> </td></tr> <!--Row 4--> <tr align="center" valign="top"> <td align="center" colspan="1" rowspan="1"> <table background="gfx/button.gif" width="129" height="29" border="0"> <tr align="center" valign="top"> <td align="center" colspan="1" rowspan="1"> <a href="page4.html" target="right_frame">Support</a> </td> </tr></table> </td></tr> <!--Row 5--> <tr align="center" valign="top"> <td align="center" colspan="1" rowspan="1"> <table background="gfx/button.gif" width="129" height="29" border="0"> <tr align="center" valign="top"> <td align="center" colspan="1" rowspan="1"> <a href="page5.html" target="right_frame">Contact Us</a> </td> </tr></table> </td></tr> <!--Row 6--> <tr align="center" valign="top"> <td align="center" colspan="1" rowspan="1"> <table background="gfx/button.gif" width="129" height="29" border="0"> <tr align="center" valign="top"> <td align="center" colspan="1" rowspan="1"> <a href="page6.html" target="right_frame">Privacy Information</a> </td> </tr></table> </td></tr></table><!--End of buttons table--> </div><!--End of buttons division--> </body> </html> Copy and past this code into your editor ans save it as navigation.html. Now we are ready to create our main content page. CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Page Title</title> <meta name="DESCRIPTION" content="Description of page conternt"> <meta name="KEYWORDS" content="keywords, for, search, engines"> <meta name="AUTHOR" content="Noel Dundas"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body bgcolor="#e3f3f3"> <h1>Title of page</h1> <p>Your page content goes here.....</p> <p>As much or as little as you need... </p> </body> </html> once again, copy and past the code into your editor as save it as page1.html. That is the basic design - albeit rather crude. To test it just point your browser to the index.html file you created. For a more comprehensive site, members can download a complete FrameSite Template from our downloads section free; it comes complete with all the graphics and documentation. |
 |
 
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
