Tip:
Highlight text to annotate it
X
In this assignment we're going to go through some of the basic functions in Dreamweaver
to create an old-style table based website. Now, a really good question would be: this
is not the best way to do things, why the heck am I teaching you to make a table-based
site? Well I want you to recognize what they look like and next week you're going to convert
it into CSS site. Because i do think it is important to recognize what a table-based
site looks like because there is a chance that you could, in your employment future
run into an older site that you have to redesign and make modern. So that's what the exorcize
is. We're going to do an old version this time. We're going to re-design it into a proper
format next week. Before you ever start coding a web page, you should have all of your text
done in something like word, where you can copy and paste it. I'm not going to make you
guys watch me type extensive amounts, I think that's insanely boring. I actually have, most
of this site I took from my Web Scripting class where I have properly set it up for
a good layout. But I'm going to do this as a new one so I'm going to be, I'm in my file
structure, my labs3, this is just a file copied in so then I had something to work with. And
I'm going to put in a new file and I'm going to name it index.html. Don't worry about the
markup HTML, again it's just my work there. And so I'm going to start with a blank page.
And we're going to go into Design view. I do prefer HTML5, a better way to do this because
of its defaults, I'm going to kill that and instead of it doing it that way, I'm not going
to work this way. I'm going to choose File, New, doctype HTML5 and I'm just going to choose
layout of none, and I'm going to hit create. And then we're going to do File, Save As,
make sure you're saving frequently. And I'm going to put it in, yes I'm working on a Mac,
I'm going to put it in labs, lab03, and I'm going to name it index.html. I do want you
working exclusively in HTML5, even though I'm showing you the old way to do things,
I just want you to get in a habit of working in HTML5. It's the right way to do things
now. Now, historically and you can go ahead and put a title on this, just call this "Table
Layout". And I want to show you some of the quick ways to set up a page in Dreamweaver.
We're going to go ahead and use some of the page properties, which actually sets CSS for
you. So I'm going to select Page Properties, and we're going to look at the CSS Appearance.
Now, for most web pages, you want to use one of the sans serif font families. So pick nay
one you want that sans serif. There is many in here. Sans serif just tends to look better.
Size, you can leave it to the default or I like to work with ems instead of pixels. That
just bases it on the user's computer. You can pick any dark text color you want. I want
something reasonably high contrast. Generally I like black. Background color, we're going
to play with this. I'm going to make my background color black, we'll play with that. I'm not
going to worry about margins, I can get into the HTML appearance, not going to. Links,
not really going to worry about that. Headings, I'm just going to set the font size for a
few of these. I want the heading 1 to be 3 em. Heading 2 - 2 em. And that's as far as
I'm going to go. And let's give them some colors. Blue and purple. OK, now I don't like
black backgrounds but it's not going to stay this way. Typically if I were doing the old
style layout and would go and insert a table, and I would typically make it, 3 by 3 is good,
table width 80%. Border thickness usually I leave it a 0. Padding that's fine. And I'm
going to hit OK. Now, I'm leaving the borders in now, but I'll delete them in a little bit
after I show you how this sets up. I want the whole table aligned and one of the things
that you can do here. Now I'm using CSS, which back when they did table layout, you wouldn't
necessarily have done this. They did overlap for a while because table layout was really
reliable. It would just really always work. With CSS, when we were transitioning in the
early 2000's, could be unpredictable. So I can actually add a new style and I'm going
to choose table and hit OK. I'm going to change the background color of my table. And I'm
going to make that white. And that's really, this is really how I would have done a table
layout. Now, typically I would start sort of like this. And often I would go in table
and I would merge cells here and this would be, I'm going to choose h1. And I'm going
to say, this is name of my site. I would put a logo or an image here. Let me bring out
my file for a second here. Window, Files, now I'm going to do something that I don't
really encourage you to do. Generally I should have moved these in before I started working.
I'm not always that organized but I set up my work before I started. I brought it, put
it together a couple of images which I'm going to drag into my folder. Oh, it doesn't let
me do that on a Mac. OK, it's cranky, so I'm going to open up Finder and go to where I
have my files stored, which should be in my web175, which I believe I have in my, yup,
merimccdgm.net. I obviously have couple different things in here. And web175 and labs and lab03. OK,
so I've taken these, I took the time to go and find photos. And you'll see lots of photos
of my dogs, not because I particularly want to show you my dogs, but because I don't particularly
care if you see my dogs. I don't tend to put up kid photos or anything like that. Dog photos
and Shameous, my stuffed sheep. But I want you using all original photos. I use my dogs
because they are not copywriter to anybody but me. I own them. So if I refresh this here,
Eli and Nessie are now in here. Now I'm going to end up putting in content in a few different
ways in here. I'm going to do something that I sort of frown upon but in this particular
case I'm going to do it anyway. And I'm going to explain why I frown upon it and why I'm
going to do it anyway. So this is Bouvier Des Flanders. It's a braid of dog I have.
And this is Eli. And this alt text would be shown if you couldn't see the image. Now,
this image is actually larger than I'd like a logo to be. But I want to re-size here.
Yes, that works. Don't do it in general because the larger image loads. It won't matter here
and the reason it's not going to matter here is because I'm going to have a larger version
of this anyway, so you'd have to load the image anyway. So it doesn't really matter.
So here on this side I'm going to put links. And here I'm going to put text and images.
And so this is just showing you how I would do layout. It's a really good idea to have
your text written and then you can just copy and paste it from word. And don't completely
love that font but that will do. Not going to worry about it right now. And then I might
drag in an image here so I will put Nessie right there. Nessie, bouvier female. OK, so
i have Nessie, I have This is Bouvier Des Flanders, don't really need that. This is
the appearance section. And it's way way easier to, again, do this. Now, it's sort of centering
this and I don't really want that. So I'm going to get my information in here and then
I'm going to edit. I think I'm going to put Eli here. Now, there is some issues with the
table structure that I'm going to see here. So to get this the way I want, I can split
my cell. This is where you get a lot of control. And I want to split columns. And so really
I want Eli centered here in the middle and I want to grab text here. And text here. And so you can see and this I actually
want to be. I'm going to just sort of play with it, put it where I want it. I might want
to in my table possibly add another row. Or maybe put this. Insert row, I will put one
above, that's OK. I'll just move these up. And again, I left the borders of the table
here so you can see where they go. But since you can merge cells, so I can put this here
on the bottom. And then here I would typically merge these. And typically this is how I would
do my layout and I would have links. OK, I actually can change spacing here and this
is decent but not perfect layout. So now I'm going to start doing some basic formatting
and this is really taking me back in time. So basic formatting. That shows you how the
layout is working. And there is lots of different ways I can lay this out but let's play with
this. OK, so in this table I would typically go up here and you've got choices in HTML
and each of these cells where I can center and I can have vertical alignment. This I
actually want in the middle. Generally text alignment, I'm going to want vertical alignment
to top, which appears to be what's going on there. I usually want my images, again this
is a cell alignment. I want to set my vertical alignment to middle and my horizontal to center.
I want the horizontal left, vertical, not middle, vertical top. Vertical top. Pretty
much set where I want it. Could play with that cell. And middle align and center. And
here let's vertical align top. Make sure I don't have any, and if it doesn't look the
way you'd expect, you can always go look at the code. And for the links, I definitely
want the links to be vertically aligned to the top. That's a pretty decent, not phenomenal,
but OK layout. And it would look better if I go back into my table and set my padding
higher. And you can see that get's these a little away from the lines. I actually want
the higher yet. Again, select table, padding 8. There, and that padding is giving me the
spacing in between those and the edge. And border of 0. That just became invisible. So
now I'm going to preview in Firefox and that shows you that I can do some interesting and
fairly decent layout just with table structure. And while that works OK, it makes for very
complicated layout. Not too bad here but you can nest a table inside a cell of another
table and that gets really complex. So let's show you a couple more things in Dreamweaver.
I would also put in named anchors. So here I'm going to insert named anchor, and I'm
just going to call it first. And I'm going to do that for each of my headings here. Insert,
Named Anchor, history, that's OK. Except, I did not want to loose that. So let's put
it right next to it. Insert, Named Anchor, history. That should have, that gotten rid
of "My first Bouvier". Insert, temperament. Insert, you can see that these named anchors
are way easier when you're just putting them in. Now, I can link to each of these multiple
ways. If I put in a hash mark and appearance. That will work. If I was linking to an outside
page, I would be able to drag it. I'm not sure if this is going to let me drag it to
the anchor. Let's see. Oh, it does. That's nice. So I can just highlight and drag to
the image of the anchor. And that's going to drop it right in place. I kind of like
that. Usually you're pointing to an actual page, but that's pretty, pretty site. That
works very well. OK, so that's really simple page layout. And again I can preview this
in various browsers. And you'll see that even though it's not the recommended layout, browsers
will honor it. And you should test in a different browser each time. I just get in that habit.
You want to make sure it's going to look good in everything. So appearance is really, isn't
going to move it much, it takes you there. Temperament does, History, not a big change,
My first Bouvier you can already see that. If I was here, it would link it and move it
on the page. So again, very basic table based layout. You're going to do a similar one on
the topic of your choice. Do a simple table-based layout. Next week we're going to re-do that
as a proper layout using HTML5 and we'll use some of the templates that they have in Dreamweaver.
But for right now this shows you how it used to be done.