Frames & Tables Tutorial

Pagini: 1

Child
Membru RSB
Din: HELL
Postari: 85

How Do Frames Pages Work?

Frames pages are basically an HTML file which breaks the browser window up into separate parts or frames. In each frame a different HTML file can be loaded. Links in one frame can then be used to change the content in any frame on the page. If a frame is not re-loaded, changes to the others do not affect it.

Frames In A WYSIWYG Program

The free WYSIWYG HTML editors are not particularly good at creating frames but you can do it using some of the more expensive ones. If your program does not have a frames option you will need to do the coding in HTML.

To create a frames page in FrontPage 97/98/2000 all you need to do is choose 'Frames Pages' in the new page dialog box (File, New, Page). It will really do the rest. You can change the size of the frames and set the target (the frame that is reloaded when a hyperlink is clicked) from the normal menus.

The two things you are likely to need to change are the frame borders and the option to resize them in the browser. These can be changed from the frame properties dialog box. To open this right-click on the frame you want to edit and choose frame properties. Turn off the option resizable in browser then click Frames Page Properties... and turn off the Show Frame Borders option.

FrontPage is actually very good at coping with frames and, if you are quite used to the program, youshould be able to use frames very easily.

Frames In HTML

To explain how to create frames in HTML code I will give you some sample code and then explain it. This code creates a page with a left frame for contents.

<html>
<head>
<title>My Frames Page</title>
</head>
<frameset border="0" cols="150,*" frameborder="0">
<frame name="contents" target="main" src="contents.htm" scrolling="auto" noresize>
<frame name="main" src="main.htm" scrolling="auto" noresize>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>

I will now explain this code:

<html>
<head>
<title>My Frames Page</title>
</head>

This is the standard start for an HTML document. The title will appear in the browser's title bar for every page on the site as it is contained in frames.

<frameset border="0" cols="150,*" frameborder="0">

This declares a frames page. It sets the border as none and the frames borders as none. The part:

cols="150,*"

Says that the frames should be columns. One should be 150 pixels wide and the other should fill up the rest of the screen. This is a very versatile tag. You can use percentages instead of the values and any number of frames can be added by just adding another comma.

You can also change this to rows= to make the frames rows instead.

<frame name="contents" target="main" src="contents.htm" scrolling="auto" noresize>

This is the tag for the first frame. It tells you the frame should be referred to as contents, links in it will open in the frame called main, the page to be loaded in the frame is contents.htm and that scrollbars should be used if needed. It also tells the browser not to allow the user to resize the frame. Other values which could have been used for scrolling could be yes and no. These would set the browser to always display scollbars or never display them respectively.

<frame name="main" src="main.htm" scrolling="auto" noresize>

This is the tag for the second frame.

<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>

This is the area where you can put the information to be displayed by browsers which don't support frames. It is a normal HTML page between the <body></body> tags.

</frameset>
</html>

This text c
loses the frames and HTML tags.

The final thing you need to know to use the a tag to make hyperlinks refer to another frame. To do this you add target="framename" to the hyperlink tag. For example to make a page load in the main frame you would use:

<a href="page.htm" target="main">Click Here</a>

You can also use:

_self - Opens in same frame
_top and _parent - Opens over the top of the frames page, removing the frames
_blank - A new window (not necessarily for frames pages).

_______________________________________

Child
Membru RSB
Din: HELL
Postari: 85

What Are Tables?

Tables are the same as a table in any other application. They are like a spreadsheet. They have rows, columns and cells. They are quite complex to make in HTML but can be very effective (this page is made up of many big and small tables). If you are going to create one in HTML read the section below first as it will explain how the table works.

Tables In A WYSIWYG Program And Table Terms

I would strongly suggest that you use a WYSIWYG (What You See Is What You Get) program to create tables even if you don't normally use one. This is because it is difficult to create a table in HTML as it is difficult to visualize it.

You will be able to either insert a table by choosing Table, Insert Table... or Insert, Table... depending on the program you are using. You will probably now get a dialog box.

You can specify the number of rows and columns here (although you can add or delete them later). You can also specify the width and height of the table. If you do not it will resize with the things you put in it. You can either specify these as a percentage of the browser screen or as a size in pixels.

Next you can specify the border size, cell padding and cell spacing. The border size is how thick the border around the cell is. It will be invisible (like on this page) if you set it at 0. Cell spacing is the space between each individual cell. A value of 1 or 2 is usually common here. A value of 0 will leave no space between cells. Cell padding is the space between the edge of the cell and the content inside. The values in here are the same as for cell spacing (1 or 2 is common, 0 is none).

Once you have inserted the table you can put text, images or anything else in it. Two more things you may need are merging cells, splitting cells and changing the background color.

Merging and splitting cells can usually be done by highlighting the cell(s) and right clicking to get a menu. If you select 2 (or more) cells and choose to merge them they will become one cell. This will not effect any of the other cells so you can have cells spanning more than one row or column in your table.

If you choose to split a cell it will split in two (or more). This allows you to have multiple cells where there would normally be one.

Finally changing the cell background can be done from the cell properties (usually in the right-click menu). You can either select a color or an image (like with a page background) and it will be applied to the cell. An example of this is the cells at the top this page which have a background color.

Tables are an excellent design tool and if you use them properly you can create complex designs, far beyond the normal HTML limitations.

_______________________________________

Pagini: 1

Mergi la