This content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Download the free Flash Player now!

Go ahead and open the index file, you do that by simply double clicking on the name. Remember, you should always name the main file of your site index.html. Like I said, I am going to give you a few refreshers especially in this opening lesson. If you already know these things, good for you, but I want to make sure that anybody who does not know some of these details, fix them up before they get really to the advance stuff.

So, you can see here the boarders of the table. And I want to show you a little trick here first. The visual aids button up here at the top lets you turn off table boarders. Does not that look better? I did that because I think it is a lot of prettier but also because I wanted you to be aware of this little icon that I think a lot of designers neglect to use. No, that is not an evil eye up there. It is a collection of tools for seeing what is going on in your page designs, whether you build them with tables, layers, other CSS options or even frames.

To use these options, you simply click on the name of the element that you want to turn on or off. When you do, it will appear on the screen and you will see a little check mark appears in this pull down. You also have an option about table wits. Now, table wits appear when you select a table and you are at the top or the bottom of the table. You see here the table wits appearing at the bottom. This table is 800 pixels wide and it is also showing you some of the cells of this table and their wits.

Now, that is a very useful piece of information as you are working on your table, but it also can get in a way when you are trying to select an edge or you really want to be able to see what you are doing. So, the ability to come up here and turn off table wits or turn off table boarders is a very nice trick to know as your fine tuning or designs,

Now, I assume if you are taking this advance training, you will probably know a fair amount about tables already but let me just point out a couple of basics and a couple of more advanced tips. In the basics category, you can create tables to be as big or small as you want and you can create as many cells as you want within them and then merge cells like this or split cells to create spaces so that you can align things in your layout right where you want them.

So, each of this table cells like this one here and this one here are set to hold these images in place and keep my text to my graphic exactly where I want it. Now, a little more advanced and something that even if you know you could do might not occur to you. This jellyfish here in the background is in the background of the table. Now, lots of people know you can put a background behind your page but I inserted this background image into the table itself. And by doing so, I help to make this table better adjust to different browser sizes or different screen sizes.

So, let me show you, if I change the size of this window in Dreamweaver, so, that it is a little smaller or a little bigger. Notice how this table adjusts itself to always stay centered on the page. If I preview this in a browser, you will see it even better. Now, enlarging the screen, you will see that my design is nicely centered and of course all those table boarders disappear when you preview because I have the table boarder set to zero. And if I reduce the size of this browser window, remember, you maybe on the biggest monitor in the world. And if you are a designer, you probably do have one of those huge monitors and if you do not, you probably lust after one.

But most of the people who are going to view your website probably do not have the luxury of a 30 inch Macintosh monitor. In fact, some of them are be on 15 inch monitors which is why so many websites are designed using the centering trick. So again, as I adjust the size of this, you see that the design moves around. And a lot of designers think they cannot use a background image if they want to center their design because when you insert a background image in the background of your page, the background image goes flash align left and stays there and you cannot get it to adjust. But if you create a table like this and you insert the background image into the table itself and then you center the table, then when you change the size of the window and things move around on the page, your background image stays on the right place in relation to the other elements on your page.

So, it is a very simple but deceivingly advanced tip because so many people forget, you can put a background image in the back of a table.

Go ahead and open the index file, you do that by simply double clicking on the name. Remember, you should always name the main file of your site index.html. Like I said, I am going to give you a few refreshers especially in this opening lesson. If you already know... click to read more