Software4me

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Example Frames Coding
Admin
post Feb 14 2007, 02:46 PM
Post #1


Member
**

Group: Banned
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.
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



Software4me
RSS Lo-Fi Version Time is now: 26th July 2014 - 08:08 AM