|
Tables Setting |
|
|
by Craig Walker |
Now it's starting to get fun. Don't you think so?
On this page we will add a half a dozen photos and build a table to control them.
First things first, as they say. Create a new directory called funpage in your buildweb directory. That should be the second subdirectory in the buildweb directory, the other being pictures.
Now copy the 7 pictures below to the funpage directory by right clicking on each picture and then "Save As" to the funpage folder. The really light image of the bike rider will be used as the page background.
These pictures look smaller here than they will on your page. I have set the viewing size to be smaller for each image on this page. You can do that by specifying a HEIGHT= or WIDTH= option after the filename in the IMG SRC tag. That is not something you would normally want to do though. For more information on managing graphics, see the Graphics Guide.
This is going to be a lot of code to copy. When adding the images, you will notice that all the data cells contain the exact same data, except for the very last number in the filename. To make it easier on yourself, type the TR tag, then the first IMG SRC tag, surrounded by the TD tags. Next, copy the TD & IMG SRC tags and paste them on the next line. Type the closing TR tag. Now copy the whole table row code including the TR, TD, & IMG SRC tags, and paste it two times on the page. Close the table and then all you have to do is change the very last number in the filenames. The numbers should be 1 to 6.
If you see patterns, you can save yourself a lot of work. The F - U - N word in the title is a lot of code. Each letter was formatted individually, once you have typed one FONT tag you can copy and paste it in front of each letter & dash. Type the F - U - N first, then add the tags. All you have to do is change the color. Then type, copy, & paste the closing FONT tag after each letter and dash. The F - U - N code is repeated in the last row of the table too. Copy the whole word w/tags and paste it at the end of the sentence. Then just change the SIZE number in all the tags from 7 to 4, done.
If you think I type all this stuff, you're nuts. It's a lot of work but the art of cloning code is a real time saver. Learn how that works and you will be fine.
I think you will really enjoy this page. Pictures are a lot of fun. Page continuity is important to me. Even though I changed the background on this page, I tied it to the previous pages by using the green background color in the title and pictures tables. It works for me. I also like to use colored text. Nothing wild, but even the dark blue on this page makes a happier page to read than black and white. That's my opinion.
Are you ready? Save your favlinks.htm file. Then Save As funpage.htm and delete everything after the BODY tag, down to the HR tag at the bottom of the page. Now, got your fingers warmed up?
You know that at any time you can look at your page to see the progress. After you get to the first closing center tag, </CENTER>, take a look. I think you'll like it. Of course, at any time you can go to the bottom of the code section and view the page I built, and see where all this is going.
Be sure to mind all the spaces, especially those that aren't as obvious like the dashes in the F - U - N code.
The new code is BOLD
|
<HTML>
<HEAD> <BODY BACKGROUND="funpage/funpage_07.jpg" TEXT="#000066"> <CENTER> <TABLE BORDER=5 BGCOLOR="#33ffcc" WIDTH=75%>
<TR>
<B>
<FONT SIZE=2><I>We are having</I></FONT> <!--You don't need to type this. Each line below changes the font properties for each letter in the word F - U - N. Notice the space on each side of the dashes. You can type one line and then copy and paste it 5 more times. Then change the colors & the letter accordingly.-->
<FONT SIZE=7 COLOR="RED">F</FONT>
</FONT>
</TD> </TABLE> </CENTER> <P>
<!--You don't really need to type this. Stop at this point and look at your page. You should have the background and the title.-->
<B> <P> We went to LegoLand the other day. We had lots of fun. As you can see, the boys kept us pretty busy. If it wasn't for the wait in the lunch line, we wouldn't have had any rest. There are many fun things for young kids and parents of young kids to do. We especially liked the fun centers where you could design & build Lego race cars and then race them against other people's cars down a ramp. Older kids might not have as much fun, but then, who knows? I did. <P>
Enjoy the pictures. <P> <CENTER> <TABLE BORDER=5 BGCOLOR="#33ffcc" CELLPADDING=10>
<TR ALIGN=MIDDLE>
<!--You don't need to type this. Notice the pattern for the next two table rows? Copy the first row, the four rows above with the TR and TD tags, and paste it twice below this point. Then just change the last digit on the image, 1, 2, 3, etc. That's code cloning. It's a life saver.-->
<TR ALIGN=MIDDLE>
<TR ALIGN=MIDDLE>
<TR ALIGN=MIDDLE> <!--You don't need to type this. You have already typed the F - U - N code below. Copy it from the title and paste it below this point. Then change the SIZE number from 7 to 4 for each letter. More code cloning.-->
<FONT SIZE=4 COLOR="RED"> F</FONT>
</TR> </CENTER>
<P> Please go to my <A HREF="favlinks.htm"><I><B>Favorite Things</B></I></A> page. (click the link) <P> Email: <A HREF="mailto:cwalker1@home.com"><B>Craig Walker</B></A> </BODY> </HTML> |
With this much code it is easy to make a little mistake. Attention to detail is imperative. While putting this page together, I put a couple tag brackets backwards, which nulified all tags after it. I forgot a closing bold tag and all was bold. Of course if it isn't right, your page is the clue. Look where it starts to go sour. It's right there somewhere.
Did you get this far? Email Me
Aren't tables cool? Tables are a fun way to separate objects on the screen. They help you to retain your hard fought page structure. You can use the tables with or without the borders option. See the Fun Page without borders or the green background color on the pictures table.
We used two tables on the Fun Page. They are both created the same way. Start a table, establish rows, add data cells, end the row, repeat row and data process until done, then end the table.
Notice how I separated the table rows as logical groups on the code page. That makes it easier to review and edit your code. I even typically put the individual data cells on separate lines too. Just as you see it on this page.
By the way, the code section on this page is a table with one big data cell that contains all the code for the Fun Page.
Data cells can contain text, graphics, multimedia events, anything you can put on a web page, you can put in a table. You treat each data cell like it's own little mini page as far as formatting goes.
Here are the new Tags as used:
Find out more about graphics in the Graphics Guide.
BORDER=# The BORDER option places a grid throughout your table. The # option, i.e. BORDER=5 sets an outside border width of that many pixels. The default, without a # designation is 2 pixels, I think.
There are some differences you should be aware of between the way MS Internet Explorer and Netscape Communicator interpret BORDER colors. Netscape seems to take on the color of the page background where MS IE takes on the color of the table background. In this example the border color drabs out the table in MS IE. In netscape it is a little bit cheerier because of the brighter border color. That of course is a personal opinion. I believe there is a BORDERCOLOR option. When I find out I will let you know.
BGCOLOR sets the background color for the table. It can also be used at the row or cell level by adding it to the TR or TD tags. The more local the tag the more priority it has. In other words, if you set the BGCOLOR in the TABLE tag to green, the whole table will have a green background, but if you designate a row or cell to be blue instead, then the whole table would be green except that row or cell which would be blue. Wow, was that all one sentence. This aint no grammar lesson.
Something that came up when the background color was changed in MS IE. The background color extended up into the caption area. That looked real sloppy with the border around the table, but not the caption, and the background color extending past the border and into the caption region. This happened on MS IE at work but not on MS IE at home.
If the BGCOLOR creeps up into your caption region, you might be happier formatting the BGCOLOR in each row, TR, tag instead of in the TABLE tag.
I recommend cross checking your pages on both browsers if you are serious about publishing them on the Internet.
WIDTH can be specified as WIDTH=# (pixels) or WIDTH=#% (percent of available space). In our case we made the title table WIDTH=75%. That means that no matter how wide the screen is, your title will always be 75% of the available space wide. There is one limit to that though. The table can not get smaller than the data in the table. HEIGHT is also variable just like the WIDTH.
CELLPADDING is used to put a buffer around the data in your cells. In this case, I don't like my pictures butting up against each other. I like space between them because it makes each one easier to see. That is another way of controling our width too. The images are all sized to a specific size and the CELLPADDING buffer will make the table a set width and height.
Data can also be aligned RIGHT, LEFT, or CENTER. The BGCOLOR and BACKGROUND options can also be applied at the row or cell level. For more about table options see the Tables Guide.
COLSPAN=2 tells your browser to let the data in the cell span 2 columns, like the last row in our pictures table. You can specify any or all columns. You can also set the ROWSPAN option for data that might need to span multiple rows. You might want to use these options when combining pictures with text in the same table, like our table. Or when you have landscape and portrait style pictures in the same table.
I prefer to use the six digit codes because of the more precise selection of the color you want to use. The text color, dark dark blue, on this page would not be possible with the word codes.
All the pictures on the Fun Page have been specially sized for the page. Each one was reduced to the exact size I wanted you to see and then compressed to about 50% in the jpeg (jpg) format. The six Legoland pictures, in their original state, were about 5.5MB total size. Now they are only 152KB, about 1/36th of the original size. Should take maybe 60 seconds or so on a regular modem service. Now it's worth the wait.
Don't confuse file size with viewing size. File size takes up time. Viewing size is just visual. I can reduce the viewing size of the images, like I did at the top of this page, without changing the file size. At the top of this page I just wanted to conserve space on the page. By reducing the viewable size, I did not save any file size. In this case I wanted the files to stay the same file size but take up less room so when you downloaded them to your computer, they would still be the right size for placing on your Fun Page.
Please visit the Graphics Guide where I will explain the ins and outs of graphics and pictures.
Now for a lesson in Publish It
|
|
by Craig Walker |