|
How to create your own web site - Part 5 Brought to you by The Phoenix On-Line Foundation and Slippy...AKA...Ian
Well here we are again. Seems y'all are having fun on the home pages, and are sorting the basics out real good. This one's a little more advanced and set to challenge ya'll. We are going to take a brief look at "Frames". Frames let you divide the window up into a number of sections. The most popular being to create a left margin for an index. We will look at just such an arrangement, but ANY configuration is possible. Frames orientated sites are set up a bit differently from what we've been doing. The pages are still there but the main index page isn't a normal html page, in the way we have learnt to understand it so far. The index page needs to be a document that sets the site up and defines the page layout. For learning purposes we will be using a new page so that we don't undo all the work we've already done. The easiest way to do this is to go through an example and comment as we go.. so here we go...... Using the Angelfire editor create a new page and (for argument sake) call it "setup.html", however you will need to set it up using the Advanced editor. Therefore enter the new filename in the box provided and click the "ADVANCED" button instead of the EDIT/CREATE. When you do this you will see a blank page with just a few html tags in the document, nothing else. First we need to decide on how to divide up the screen.. lets say we want the window divided vertically so that we create an area 20% of the window size, on the left. That leaves us with 80% on the right of the window. We need to give each of the two areas a name.. so lets call the left part "sidebar" and the other part "main_window". We can now create the setup for a frames orientated page... This is done using a new set of HTML Tags. Look at the html code below, which sets the page up, and I'll explain it as we go! I have put the explanations within {}. <html> {;this identifies the following code as html.}<HEAD> {;this starts the header information as normal.} <TITLE>Title of your web site {;your page title goes here.} </HEAD> {;this marks the end of your header information.}
Now starts the new stuff!!...
<FRAMESET COLS="20%,80%">
<FRAME NORESIZE SCROLLING=YES SRC="sidebar content url" NAME="sidebar">
{; this defines the second frame and uses the defaults for the frame set up, so it is resizable and can have scroll bars. It is still necessary to give the frame a name and tell it what html page to load into it at start up. The example here is taken straight from my own website and loads a page, from my site, called start.html into main_window.} Not all browsers are able to handle frames. So its very important to have a "NOFRAMES" section. this is a section of html that will run if the person loading your page can not handle frames. Its just about self explanatory. and displays a window with a message in it.
<NOFRAME>
<center>
<H1>Doh!</H1>
</FRAMESET> {; this ends the frame set up definition} We have set up frames running in columns, for rows you use <frameset rows=......> .The next thing is to create documents that will be loaded into each of the frames. These are normal html documents just as you have been doing till now. However when you use a link to load another page.. there is a small addition you need to make.. you must add <TARGET="target"> where target tells the browser which frame to load the page into. if you don't do this then the browser loads the page in a new window. If you want to see real examples of a simple frames set up. visit my own homepage at http://ianspage.iscool.net then right click your mouse in the sidebar and select "View source"... that will show you the code loaded into that frame. See how the TARGET command is included in the <a href> tag. It may be that you want a page to load in a separate NEW window.. this is easy to do.. set the TARGET as an unknown frame name.. You may notice I have done this for some of my links!! Here is an example of a different type of frame set up...
<frameset Cols="22%,78%"> sets up column frames Well that's quite a lot to take in to start with.. try creating the frames page and two other simple pages in the normal way to load into it.. then view the frames page and see how it works!! Good luck!!
|