Frames Tutor- Introduction Frames Tutor by Joe Barta PROFESSIONAL WEB DESIGN Also available: Form Tutor, Table Tutor and for the novice- So, you want to make a Web Page! Hello. My name is Joe and I'm going to give you a few simple lessons on how to make frames for your web documents. The intelligent use of frames can give your pages a cleaner look and make them easier to navigate. Note the operative word is intelligent. Nuff said? Dividing a page into frames is actually quite simple. The basic concept goes like this: Each frame is a regular, complete html document. If you wanted to divide your page into 2 side by side frames, then you would put one complete html document in the left frame and another complete html document in the right frame. In addition you need to write a third html document. This MASTER PAGE (I'm coining a new phrase here folks) contains the tags that specify what goes where. As a matter of fact, that's its only function. There are only two main frame tags to contend with: and . The easiest way to explain them is to have you dive right in and start making some frames. I guarantee that in 90 minutes you'll be a feel-no-pain framing machine! Now's a good time to stress that if you want to learn how to make quality html documents, then you would be well served to take the time to teach yourself the tags. If you rely on the so-called "frame wizards" in the "easy as pie html editors" out there, you will have greatly limited flexibilty, and the end result may not be what you are trying to achieve. In my opinion the best html editors to use are text based editors. A few good ones that come to mind are CMed, HTMLpad and HTML Notepad. These editors will make your html coding easier. They don't attempt to do it for you. NEXT--> Introduction Lesson Lesson Lesson Lesson Lesson Lesson Lesson 1 2 3 4 5 6 7 PROFESSIONAL WEB DESIGN ---------- Lesson 1 First things first. For this tutorial we will need a few html documents. Fire up Notepad and copy the following to get you started. My Framz Page We will give each document a name. In Table Tutor and Form Tutor we used guy's names. I think its time to get some young ladies in here. My Framz Page Lisa Create a new folder somewhere and save this as lisa.html (Win3.x users save it as lisa.htm). Note- I will be refering to documents as xxxx.html. Users of Windows 3.x will have to use the file extension .htm when working with documents locally. Many FTP programs allow you to change the filename when uploading if you need to. Now make another html document. My Framz Page Terri Save this in the same folder as terri.html. Now do the same for Kim, Tina, Shannon, and Beth. Save them just like the others. You should now have a folder that contains 6 complete standalone html documents. Ok, now the fun stuff... making your master page. Start with this. My Framz Page- The Master Page Remove the tags. The master page doesn't use them... My Framz Page- The Master Page ...it uses tags instead. My Framz Page- The Master Page To keep things a little cleaner, I'm going to stop writing the , and tags. Needless to say, keep them in your document. <FRAMESET> </FRAMESET> Now's a good time to save it. Save it in your folder (with all the girls) as index.html. If you try to open it with your browser now it will be blank. All you have said so far is "This is my Master Page". Now let's start defining just how things are going to look. Tell the browser to split the main window into 2 columns, each occupying 50% of the window. <FRAMESET COLS="50%,50%"> </FRAMESET> This will still be blank, we have one more thing to do before our 'system is operational'. We must tell the browser what to put in each frame. <FRAMESET COLS="50%,50%"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT. You are now the proud parent of a fully functional Framed page! One last thing before we go on. Note that <FRAMESET> is a container tag, and <FRAME> is not. For those that don't know what that means, a container tag has an opening <TAG> and a closing </TAG>. <--BACK NEXT--> Introduction Lesson Lesson Lesson Lesson Lesson Lesson Lesson 1 2 3 4 5 6 7 PROFESSIONAL WEB DESIGN ---------- Lesson 2 The <FRAMESET> tag does all the dividing. That's all it does... divide up windows. It specifies a few things regarding how to divide them up, but remember, whenever you want to do some dividing- use <FRAMESET>. Can we divide it into more than 2 pieces? Yes, just make sure that you specify a page for each section or the browser's gonna get confused. <FRAMESET COLS="20%,20%,20%,20%,20%"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> <FRAME SRC="kim.html"> <FRAME SRC="tina.html"> <FRAME SRC="shannon.html"> </FRAMESET> VIEW IT It's pretty obvious that we can make the frames all differents sizes. Just make sure your arithmetic is correct or the browser will come up with its own interpretation. <FRAMESET COLS="10%,20%,30%,15%,25%"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> <FRAME SRC="kim.html"> <FRAME SRC="tina.html"> <FRAME SRC="shannon.html"> </FRAMESET> VIEW IT If we specify dividing into ROWS instead of COLS we get something else entirely. <FRAMESET ROWS="10%,20%,30%,15%,25%"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> <FRAME SRC="kim.html"> <FRAME SRC="tina.html"> <FRAME SRC="shannon.html"> </FRAMESET> VIEW IT Let's go back down to 2 frames, divided equally into columns. <FRAMESET COLS="50%,50%"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT We can specify 50 pixels instead of 50%. And, we can use * instead of a number. The * means whatever is left over. <FRAMESET COLS="50,*"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT Here is an important point.. Let's suppose that you make a frame 100 pixels wide on the left, and 100 pixels wide on the right. Since you are running an 800x600 screen you make the 3rd and middle area 600 pixels wide. Everything looks just dandy... to you. My screen is set at 640x480. Those 100 pixel wide frames you put in your page are now 80 pixels wide on my screen. If you use any absolute dimensions in your <FRAMESET> tags ALWAYS have at least one * as an elastic frame. That way everything will look good to everyone and there will be peace across the land once again. This is the cause of a common problem with frames that I want to take the time to draw extra attention to. A popular frame layout is a narrow directory window on the left and a larger main window on the right like so. Here's the problem... If you divide up the windows using percentages (such as <FRAMESET COLS="15%,85%">) everything will probably look just dandy to you. But... to someone with a different screen resolution it might look like this. The reason this happens is because you have specified that the left window should be 15%. 15% of what? 15% of whatever their horizontal screen resolution is. That means that that left window might look a little different to different people. How to fix you say? Glad you asked... Just use an absolute dimension for the left window and make the right window elastic (such as <FRAMESET COLS="120,*">). Bingo. Problem solved. It's good idea to make that absolute dimension just a wee bigger than it needs to be. Give the stuff in that left window a little breathing room. For example, if 100 pixels gives a good but snug fit... make the window 120 or 125 pixels. A good and painless way to check your layout at a couple different screen resolutions is with a nifty little MS PowerToy called Quickres. We can have more than one leftover frame and specify a size relationship between them. <FRAMESET COLS="50,*,2*"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> <FRAME SRC="kim.html"> </FRAMESET> VIEW IT Translated this says: Make 3 frames. Make the first 50 pixels wide. The rest divide between frames 2 and 3 but make frame 3 twice as big as frame 2. Put Lisa in the first frame, Terri in the second and Kim in the third. It is important to note that everything is done in order. The first <FRAME> is displayed according to the first size attribute in the <FRAMESET> tag (50/lisa) and the second with the second (*/terri) and the third with the third (2*/kim). I know that this may be mind-numbingly obvious, but it is very important and I wanted to draw extra attention to it. What if we want to divide kim in half horizontally? Remember that I said that if you want to do any dividing you must use the <FRAMESET> tag. First we must replace Kim with a <FRAMESET> tag pair. <FRAMESET COLS="50,*,2*"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> <FRAMESET> </FRAMESET> </FRAMESET> At this point we have told the browser: Make 3 frames. Make the first 50 pixels wide. The rest divide between frames 2 and 3 but make frame 3 twice as big as frame 2. Put Lisa in the first frame, Terri in the second and the third frame we are going to divide further. Now we have to specify how to divide up that third frame. We were going to divide it in half horizontally. <FRAMESET COLS="50,*,2*"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> <FRAMESET ROWS="50%,50%"> </FRAMESET> </FRAMESET> And I think we'll put Kim back in on the top and Tina on the bottom. And that's that. <FRAMESET COLS="50,*,2*"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="kim.html"> <FRAME SRC="tina.html"> </FRAMESET> </FRAMESET> VIEW IT That was so much fun I think we'll do it again! Let's divide Lisa horizontally into 3 sections. The top window needs to be 50 pixels high. The other two can be split equally. We will put Lisa into all three. Here are all the changes in one big chunk. <FRAMESET COLS="50,*,2*"> <FRAMESET ROWS="50,*,*"> <FRAME SRC="lisa.html"> <FRAME SRC="lisa.html"> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="kim.html"> <FRAME SRC="tina.html"> </FRAMESET> </FRAMESET> VIEW IT I know it doesn't look like much. Actually if a page was divided up that much it would look pretty crappy. A good rule of thumb is don't have more than 3 frames on your page. If you can avoid them alltogether, that's even better. Now's also a good time to think about the poor folks that are using non frames capable browsers. Although most, if not all of your visitors will be able to see frames, there is a hapless minority that's trying to peruse the web with outdated equipment. If you would like to help these folks out you can write a non frames version of your main page and add it thusly... <FRAMESET COLS="50,*,2*"> <FRAMESET ROWS="50,*,*"> <FRAME SRC="lisa.html"> <FRAME SRC="lisa.html"> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="kim.html"> <FRAME SRC="tina.html"> </FRAMESET> </FRAMESET> <NOFRAMES> <BODY> Put your non-frames page down here. If someone is using an old browser, it will skip everything above and come straight down here. Frames-capable browsers will ignore what is between the <NOFRAMES> tags. You may be asking a couple questions right now. Do I have to write a whole nuther page? Probably. How many people will be missing my page if I don't do this? Very few. Do you think I should worry about it? Nope. Do you worry about it? Nope. Why did you put it in this tutorial? Because it's a major feature and I wanted you to at least know about it. Are you always this witty and charming? Of course. </BODY> </NOFRAMES> Note- My personal opinion aside, there is a strong argument for using the <NOFRAMES> tag. Quite a few businesses are still using older, non-frames capable browsers. The handicapped's screen readers have a really hard time with frames. And those outside the US are often left out of framed pages for various reasons. The bottom line is, if your page is "frames only" you will be cutting off some people. If it is important to you to reach everyone, then take the time to use the <NOFRAMES> tag. -----My thanks to Matthew Miller, of the HTML Writers Guild for pointing this out. <--BACK NEXT--> Introduction Lesson Lesson Lesson Lesson Lesson Lesson Lesson 1 2 3 4 5 6 7 PROFESSIONAL WEB DESIGN ---------- Lesson 3 Let's go back to something a wee bit simpler. <FRAMESET COLS="50%,50%"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT We can put pictures in the frames if we want to. In the folder named 'examples' there is a picture called world.gif. Go ahead and copy that into your working folder. <FRAMESET COLS="50%,50%"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT Remember it is always good practice to include HEIGHT & WIDTH attributes for any image tag. Let's try to frame the picture nice and neat. First shrink the left window to 146 pixels wide. Since we are using an absolute dimension should make the other frame elastic. <FRAMESET COLS="146,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT Next we will divide the left frame horizontally into 2 sections. The top section to be 162 pixels high and the bottom section to be whatever is left over. We will put in world.gif and Lisa respectively. <FRAMESET COLS="146,*"> <FRAMESET ROWS="162,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT As you can see, we have a bit of a problem. The scrollbars that you see can be specified as YES, NO or AUTO. YES means the window gets scrollbars- whether they're needed or not. NO means there will be no scrollbars, even if your frame contents are as big as New Jersey... the browser will simply display as much as it can. AUTO is the default. If scrollbars are needed, they appear, if they are not needed they stay convienently out of the way. Let's get rid of our scrollbars. <FRAMESET COLS="146,*"> <FRAMESET ROWS="162,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT We still have a problem. The image is not in the frame right. The next two attributes deal with margins. The browser automatically gives each frame some empty space around its contents. This is normally necessary for asthetics. You can control the size of these margins by using MARGINWIDTH and MARGINHEIGHT. They control the left & right and top & bottom margins respectively. We will set them both to 1. (1 is the minimum) <FRAMESET COLS="146,*"> <FRAMESET ROWS="162,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT Unfortunately that still doesn't quite do it. The frame dimensions are measured center to center. There is also that minimum border of 1 to deal with. Since the default border size is 6 pixels, we have to add 8 to each image dimension (half of 6, plus 1, times 2). If that's confusing, just add 8 to each image dimension to get your window size. <FRAMESET COLS="154,*"> <FRAMESET ROWS="170,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT This will display your image perfectly in the window, or at least pretty darn close. Have you ever seen an image in a frame that was cut off on one or more sides? If you use absolute dimensions, along with an elastic frame... And if you add 8 to the size of the image to get your frame dimensions, by golly you'll look just fine to pert near everyone. * <--BACK NEXT--> Introduction Lesson Lesson Lesson Lesson Lesson Lesson Lesson 1 2 3 4 5 6 7 PROFESSIONAL WEB DESIGN ---------- Lesson 4 Next we'll try a couple minor effects. Not all of them work with all browsers though. If the browser doesn't understand the attribute, it will just ignore it. First we can change the thickness of the borders. <FRAMESET COLS="154,*" BORDER=20> <FRAMESET ROWS="170,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT We can change the color of the borders. <FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO"> <FRAMESET ROWS="170,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT We can turn off borders for individual <FRAMESET>s with FRAMEBORDER. <FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO"> <FRAMESET ROWS="170,*" FRAMEBORDER=NO > <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT We can prevent the viewer from resizing a frame. Unless you have a special circumstance, there really is no reason to use this attribute alot. <FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO"> <FRAMESET ROWS="170,*" FRAMEBORDER=NO > <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html" NORESIZE> </FRAMESET> VIEW IT Ok. Now that we have learned a bit about Framing let's go back to something simple and we'll tear into linking between frames. <FRAMESET COLS="33%,67%"> <FRAME SRC="beth.html"> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT What we're going to do is add a link from beth.html to shannon.html. So open beth.html with Notepad and add the following... <HTML> <HEAD> <TITLE>My Framz Page Beth

You have to visit my friend Shannon Then add the link, and save it. My Framz Page Beth

You have to visit my friend Shannon Now try it. VIEW IT If you click on that link you'll see Shannon's page load into Beth's window. I know, I know... you're not impressed. You want to click on a link in Beth's window and have it load into Terri's window. Well, that's a little more work. What you have to do is NAME the in your master page. So go ahead and give that second frame a name. Let me make a comment here. That second frame is not really "Terri's". It's simply the second frame and we have specified that terri.html is the first thing to be loaded into it. If we had an empty tag the window would be... well... empty. Note- NAMEs must begin with an alpha-numeric character. All other window names will be ignored. (An exception is to begin the frame name with the underscore _ Its use is explained a little later.) Next we have to add a little something to that link in Beth's page, so open beth.html again (with Notepad) and add a TARGET. My Framz Page Beth

You have to visit my friend Shannon This will cause the link to load into the window named WINDOW-1. VIEW IT That kind of linking is great when you want to link together pages in your site. But what if you want to link to something outside your site? Let's add another link to Beth's page. My Framz Page Beth

You have to visit my friend Shannon

And of course you have to visit Joe at Professional Web Design

VIEW IT As you can see, this causes someone elses page to load into your window How can you make an outside link load into the full browser window? Easy, change the TARGET to _top. My Framz Page Beth

You have to visit my friend Shannon

And of course you have to visit Joe at Professional Web Design

VIEW IT Always use this method when linking to an outside page. Believe me, your viewers will appreciate it! _top is one of 4 so-called 'magic targets'. They are _self, _blank, _parent and _top. These are the only targets that can begin with something other than an alpha-numeric character. In addition, any target beginning with an underscore_ that is not one of the 'magic targets' will be ignored. For what we're doing, _top is the only one to concern ourselves with now. Note- It is important to specify TARGET="_top" rather than TARGET="_TOP". Normally HTML is not case-sensitive but in this instance it is. Using _TOP instead of _top will sometimes cause the link to open in a new browser rather than the full window of the existing browser. Since it's been mentioned, that's what TARGET="_blank" does.... loads a link into a new browser window. <--BACK NEXT--> Introduction Lesson Lesson Lesson Lesson Lesson Lesson Lesson 1 2 3 4 5 6 7 PROFESSIONAL WEB DESIGN ---------- Lesson 5 I think what we'll do now is make a Framed Page from scratch. Nothing fancy, just something like this. Before we start, let me stress... keep it simple! A site with a bunch of frames and links pointing all over the place is going to be confusing to build and even more confusing to navigate. That said, let's go to it! First we must think about what we want the end result to be. I think a good simple design would be a banner across the top, a directory window on the left, and the main window on the right. Let's make the Master Page first. A Practice Page Make another new folder and save this as index.html. Also the image we will be using for the banner is the "MY FRAMZ PAGE" image. It is called framz1.gif and it is in the framz folder. Copy it into the working folder you just created. Divide the screen horizontally. A Practice Page Note we get 83 by adding 8 to the height of the image (75+8=83). Also note that since we are using an absolute dimension we are including an elastic frame. Next specify banner.html to go in the top frame (we will make that document in a couple minutes). Also throw in a tag pair because we are going to divide that bottom portion further. A Practice Page VIEW IT You can run this now but you may get error messages because it's incomplete. We will divide the bottom window into two sections. We will also specify that the left window contain directry.html and the right window contain home.html. Once again, we have not made these documents so you may still get an error message (or two) (or three). A Practice Page VIEW IT Since we will have our directory on the left and pages will load into the righthand frame, we should name that frame. Its the only one that will have stuff loaded into it so its the only one we really need to name. A Practice Page VIEW IT OK. We are done with this one... for now. Lets make banner.html. Start with the following and save it. Practice Page- Banner Notice we have specified a background color of blue. VIEW banner.html VIEW Master Page Pop in the image and

it. Practice Page- Banner

VIEW banner.html VIEW Master Page While I'm thinking about it, I just wanted to mention that if you look at the source of my documents to assist you in creating your documents you may find a few things that don't make sense or that may contradict what I say. That is because I have to make my pages jump through a few hoops so that the lessons work right when viewed. Make sense? If not, just don't look at the source of these pages unless you want to confuse yourself. Alright... as you can see we have a problem. We have a scrollbar getting in the way and the image is not positioned in the window very well. Open your Master Page. Turn off the scroll bars and get rid of the margins. A Practice Page VIEW IT Now let's make our Directory page. Start with the following and save it as directry.html. Practice Page- Directory VIEW directry.html VIEW Master Page Give it a heading and write in the text of all the links. We'll add the link info in a minute. Practice Page- Directory

Directory

Home

Go here
or there

or visit
Yahoo
Netscape VIEW directry.html VIEW Master Page Now add the link information. Practice Page- Directory

Directory

Go here
or there

or visit
Yahoo
Netscape VIEW directry.html VIEW Master Page Wasn't THAT fun! No I suppose it wasn't. Take 5. Stretch, go pee, get cup of coffee, scratch yer butt, whatever. Take a break. I am. <--BACK NEXT--> Introduction Lesson Lesson Lesson Lesson Lesson Lesson Lesson 1 2 3 4 5 6 7 PROFESSIONAL WEB DESIGN ---------- Lesson 6 OK, let's make home.html, here.html and there.html. Since you've been working very hard (and I'm sick of typing), just go ahead and copy the following into Notepad and save them. Save the following as home.html A Practice Page- Home

You are home.

Welcome to my homepage! This page should be attractive and easy to navigate because my teacher Joe, besides being VERY handsome, has taught me the right way to build Frames!

Enjoy your stay!

VIEW home.html Save this as here.html A Practice Page- Here

Here

Welcome to here. Here is where everything happens. Here you'll find more neat stuff than you can shake a stick at. Have you ever seen anyone shake a stick at something?? I never have. VIEW here.html And of course this one as there.html. A Practice Page- There

This is There

I would like to make a proposal. We have all seen that little arrow on signs that say "You are here". Wouldn't it be better if there were also another arrow that says "You should be there". It would make things so much easier. VIEW there.html Now view your Master Page. We forgot something. If you caught the problem back when you were making the directory page... good! So open up directry.html and add the necessary TARGETs. Practice Page- Directory

Directory

Go here
or there

or visit
Yahoo
Netscape Now try your Master Page. Works pretty good, doesn't it! Now just for giggles, let's add a link from your home page to me at Professional Web Design. Open up home.html and plug it in. Make sure you add the proper TARGET because although I really like you, I don't want to show up in your window. A Practice Page- Home

You are home.

Welcome to my homepage! This page should be attractive and easy to navigate because my teacher Joe, besides being VERY handsome, has taught me the right way to build Frames!

Enjoy your stay!

Visit Joe at Professional Web Design. View the finished product. <--BACK NEXT--> Introduction Lesson Lesson Lesson Lesson Lesson Lesson Lesson 1 2 3 4 5 6 7 PROFESSIONAL WEB DESIGN ---------- Lesson 7 (last one!) Well folks, that's it! For this tutorial that is. You have learned everything you need to create Framed pages. There is a little more, but 95% of what you'll need to do can be done with what was covered in this tutorial.. Be sure to check out Form Tutor and Table Tutor! Here are some excellent materials that you may want to have a look at. The HTML Reference Library An outstanding html guide and reference source in windows HELP format. I use it all the time. You may even want to visit their homepage. Beginner's Guide to HTML A good concise guide that explains the basics very well. I keep a copy and still refer to it on occasion. Barebones Guide to HTML Another outstanding guide that you will want to keep within easy reach. HTML Elements List For the technoids. From Sandia National Laboratories. A very, very complete listing of html tags. The Web Developer's Virtual Library A great source of information touching on all aspects of web and site design. If you need stuff for your pages... ...like backgrounds, bullets, images, sounds, JavaScript or whatever, come by our Web Page Resources section. Help yourself to armloads of stuff! <--BACK ???--> Introduction Lesson Lesson Lesson Lesson Lesson Lesson Lesson 1 2 3 4 5 6 7 PROFESSIONAL WEB DESIGN ---------- For those that may have looked at the source of "MY FRAMZ PAGE" and found some absolute dimensions (incorect absolute dimensions at that)... I just wanted to include a note to say I deliberately did that so that it would look equally screwed up to everyone. The screw-up you see is what happens when someone using a 800x600 monitor designs a page using % dimensions for images OR uses absolute dimensions without an elastic frame. When a person using 640x480 (like me) gets it, the images are all chopped off. ---------- End of Document