Tip:
Highlight text to annotate it
X
[ Intro Music ]
>> In this assignment, you're going to create a table-based site. Here's a very simple sample.
I'd like to talk a little bit about the process that I used in creating the page. This site...and
we're going to look at the html. Oops, nope that's the CSS. The site is based on a table.
So you see I've got my normal head tags and the table forms the structure of the inside
of the page. My table is set to a width of 960 pixels and you'll notice that I have IDs
or the different sections of the page because that allows me to assign cascading style sheets
to set the styling. Now typically historically you probably wouldn't have done that, but
this is the right way to style things now. We're just using the table layout to show
you what was historically done in case you run into it. So we have my table row up here
at the top which is actually two columns merged together. Td colspan "2" contains the text
"Travels with Seamas" and has the ID naming it "headsection." And that's my top row; single
cell merged spinning 2 columns. Then I have 2 cells that form the bottom of my table.
In this table row I have a table td width of "190" and a valign of "top" so that's setting
this column right here. It's 190 pixels wide and the vertical alignment (valign) makes
everything float to the top where the default would be in the middle here. I've given it
the ID of "linksection" and I'll show you how I styled that in a few minutes. Then I
have 3 links in here with just breaks between them. Now when I created this page, I created
all of that and left this part blank and just saved it as each of the 3 files -- index,
Hershey, and food -- because I don't need to change again for the other 2 pages that
I created. The only content that changes is my content area and in here, all my content
goes inside this single table cell. These are all things that you've seen before; you
have a bulleted list, you have some information, and you have some pictures. Now I've done
some interesting things with the CSS here and I'll get into that in just a minute, but
you'll notice my pages are almost exactly the same on the top and the left sides and
the background doesn't change and I'm going to show you how I've styled all of that. The
other thing I want you to notice is that my images have borders, but only on 2 sides.
I was sort of creating a faked-out drop shadow. You could have some arguments on the color
and how authentic that it looks, but is just showing you how you can do a drop shadow effect
with a thick border and you don't have to have a border on every side of the picture.
So let's take a look at that CSS and if you open up my page, right-click, and VIEW SOURCE,
you can get to the CSS just by clicking on that link right there. So we have the body
which we've set a default font for the page and a background color; a pretty shade of
purple. We have set the h1 with a text align of center and padding of 35 pixels. I didn't
set the color here. There are 2 places I could set it, I could have set it for h1; I actually
set it in the ID section for that. This is where I'm setting my image information. Now
remember the content that if I had padding, padding would go between the content and the
border, that's why there's no padding here. I wanted the border next to the image but
I have 25 pixels of spacing around the image in the margin outside of the border to keep
my other content so it's not too close. And so I've got a border on the right and a border
on the bottom, both 5 pixels solid in that shade of purple. I've used some CSS to change
the colors of my links when I mouse over or click on them. The main page, that's just
the big container of the whole table, it's get a margin of "0 auto:" and that will center
my table on the page. The border for the table is none and then I have a background color
which you actually don't see because I put other things on top of it, and then the default
text alignment for the entire table is left. And I have my link section over here that
the font size is to be slightly larger, set the background color, and put in a padding
of 10 pixels so that anything in here will be spaced 10 pixels from whatever is around
it. Then I have my head section -- and you notice they don't have to be the order they
appear on the page -- where I've got a background image. Niagara falls. Color of 609; that's
my shade of purple right here. Padding of 10 pixels doesn't really come into play because
there's nothing else in here. Set the font here; this has a serif font because with the
big h1 tags it's ok to have things that are serif. Text align center and font size. And
then the content portion here, I just set my background color and padding so that there
are at least 10 pixels of padding between each of my page elements. So really basic
CSS; I don't think you've seen anything new here except for the borders on only part of
the images. So to sum up; you're going to create a 3 page site. You should start by
creating and styling 1 page, get your table done, get your links in it, and get the header
in it. When you're that far, do a FILE, SAVE AS and name it as whatever you call the other
2 links and you can just change the content in the center there and voila, you've got
a linked 3 page site.