Tip:
Highlight text to annotate it
X
In this lab I'm going to take lab 03 where we did our single page - table based layout
and I'm going to duplicate this and rename it. And we're going to make this lab 08. OK,
so let's go ahead and open it, and see what we have. Now in the original one all of my
layout is here, there we go, I don't know why it wasn't coming up correctly before.
I'm going to close a bunch of these things right here. So I'm working with a clean. And
I'm going to open my index page again. OK, so I've lost my images, I may need to check
and see, they're updated, I'm going to have to rename. So I'm just going to fix my links
here. It's always nice to start and make sure your images are still working. So I can click
on each picture and they you'll see I'm going into the source and making sure it's the local
one, which is why we copied it over. So it would have all of the images in it. So this
is not pointing at my local images. OK, so here I have my page. Now we can do this a
few different ways, I could start the page completely over, which is probably what I'm
going to do. Let's take a look at how it's set up. I basically have a header here. I
have navigation here, and then I have an article with three sections and two pictures. And
the easiest thing to do is actually going to be to start a new page. So I've got a header,
my aside is really in my footer section, so let's use some of the default. I basically
have here a two column layout, which a header and a footer. So I'm going to choose File,
New, HTML, and we're going to choose HTML5. And we're going to use, depending on what
you created, on mine I'm going to use a two-column layout with a header and a footer. And I'm
going to have my layout CSS, I'll just go ahead and add that to the head because we're
only going to have one page and it will make it a little easier. Then I'm going to hit
Create. And I'm going to Save this just as new.html, once I've got it redone we'll delete
the other one. Now this is heavily commented. And it tells you what to do. In fact, it has
different sections here. You can see if I select one of these, this is a section, this
is a section, this is part of my article, and I pretty much have a really similar layout.
So I'm going to go through and adjust this back and forth. I'm going to close my tab
group here because I don't need it. And I'm going to just start looking at my page. That's
a little bit bigger. I made that one flexible, I made it, I think, set up at the 80% but
I'm using one, it is set up, let's take a look at our styles. Now I can get rid of the
content in each of these, I have the sections here. But if I wanted to, I could pretty much
get rid of all of this. And let's see, that is going to become, I don't really have a
header for that. So let's just take this one piece at a time. I want to re-create the image
with where it says Bouvier Des Flanders. And so in my header here, I'm going to insert
an image, so I want to go into 08, and that should be Eli. I'm going to open and there
he is. And then it's not going to be an exact match because I made this page larger and
have it flexible. So here I'm going to have Bouvier Des Flanders, bring it over here and
paste it in. Now, so CSS is a little different on how we do layout. And I'm going to want
to replicate this, so let's start looking at the CSS styles that are in place. And you
can see all of the styles here and go through them one at a time. So my background of my
original one was black. I'm going to go back and forth. Yup, black. And I think, yeah,
I didn't have any borders or anything. I did leave a little bit of space up here. So we're
going to go back here, I'm going to look at my CSS styles. And I can't remember. That
was dark blue. If I want to look at my CSS styles here, it's 003 for the color. OK, so
let's just start looking at these one at a time. My headings, I can add a property or
I can just go in and make, I can double-click on these. And this is my favorite place to
work and I can change my color to 003, the dark blue. And to make this a heading 1. And
one of the things that's going on here, you can tell that this is underlined. It thinks
that this is a link. And this is why you need to know how to read the code. Because what
has happened here is that typically your logo is a link back to the front page. And this
actually should just go directly into the page that I'm on. I want to save my index
page or say this is new. File, Save As, New, and I want to make sure I'm in 08. So I want
to make sure this goes locally to Eli because I want the one in 08. And there we go, OK.
And so I don't need this alt text of "insert logo here", I want to say "Eli - Bouvier Des
Flanders" and it grabs the actual height and width so that's fine. The id should just be
logo. Style, I don't want a style in here. So I'm going to delete that. And that should
make some changes. But I'm still, I still have this underline because this is a link
and right now it's just a link to itself. And we can fix that by making that a link
to what would be our home page, which here would be itself. I'm just going to delete
it. It doesn't need to be a link at all at this page because it's just a simple page.
So now it's not a link. So let's go back and it needs to be blue and the background needs
to be white. So let's look at our CSS styles again. Go ahead and go back to design view.
And for the, I want to find my header, and I can change the background color right here
or here, background, I want this to be white. That's better. And then sidebar1, I want that
background to be white. You can edit things right here. And it's floating to the right
and I want it to float to the left. OK, so you can see I'm starting to make these look
the same. So I can look at my container, that's 960 pixels, I want to make it match exactly,
I had it at 80%, which you can still do here. And then I want this , I'm going to have to
add a New CSS style to make this work. So I'm just going to hit + and it's a compound
selection so it's h1 in the header inside the container. I'm going to hit OK. I want
the font-size to be 2 em and I want the color to be 003. I'm going to hit Apply. And I'm
going to hit OK. And that didn't impact it because I don't think I've changed, yeah,
it is heading 1 in a container. Container, header, h1. There we go. So it's the right
color. Now I just need to worry about the alignment. I'm going to double click on this
again and to do the alignment, I'm going to go into the box, I'm sorry, the block. And
I want to do the vertical align of middle, and the text align of center. And we'll see
how that works. It works OK, except now Eli is centered as well and this is not lining
up the way I want. To fix this, I'm going to have to go back to our float. So I'm going
to have to add another style. And so it's just going to be, I'm just going to do this
h1 img, my images in my heading tag and I'm going to have to play with this a little bit
to get it exactly the way that I want. So I need to float it to the left and hit Apply.
And then I'm going to look at my box and I want to put a margin on this. And I want the top margin to be 15.
And I'm going to hit Apply. And we hit OK. Now, I sort of made a mess in this because
I've re-float it by using percentages. If I want to fix that, I need to make these percentages
as well. And it's not staying in the header. So I need to go take a look at my header,
and I need to set a minimum height for this. So I'm going to go into my box and set a height
of 250 pixels and see what happens. I got to see what size Eli is, his a little bit
larger than that. So I'm going to have to try 260, 300, that sort of puts things back
where they belong. OK, so now we're going to hit OK here. Now this I want to be aligned
middle with this. So I'm going to have to play with my CSS for that as well. And there
is a couple ways to do that. If I go into my box or my block, middle alignment didn't
work. Center alignment did. So what I'm going to want to do is go into my box and put padding
on the top. And we're going to try 100 and hit Apply. Except that does padding to the
whole thing here. So I want to cancel that, Command Z to undo, so what I want to do is
just go into the, I'm going to have to look at the code because it shouldn't be applying
this as part of the h1. But it is. So you have to be able to read the code. So now it
should not tide those together. So let's go back and on that image, I actually want to
put a margin on the left side of 15 pixels as well I think. OK, let's see how we're coming.
Oh, I may not have the margins exact but it's close enough. This needs to be a little bit
bigger. So we're going to look at the header h1, let's try 3 em. OK, that's pretty good.
And then I want to put some padding on the top of this to get it where I want. I think
it's actually going to be like 2.5 em. And then for my box I want padding of say, 75,
maybe 100. OK so I'm going to get into re-positioning things. That color is different. That was
009. OK. That's why it doesn't look the way I wanted it to. CSS styles, and that way you
can just go in here and fix the numbers like that. OK, so now my header pretty much matches.
And you see you don't really save a lot of time except that the layout for this will
carry through. So now I'm going to want this nav bar to have links, Appearance, Temperament,
History, My First Bouvier. So let's work with that. So we're going to look at this nav bar
and it doesn't have to be exact. Just give yourself the same general feel. I'm going
to delete that. And then I'm going to go into my CSS styles, and I should have, I want to
look at my nav and I want to get rid of those colors. So I'm looking at each of these, I
want those all to be white. I don't want it to change to green later. Because it will
only it a hover effect. sort of like a button but not really what I'm going for. So let's
look again at what I have here. Appearance, Temperament, History, My First Bouvier. So
we can go ahead and, I accidentally closed it, so again it was Appearance, Temperament,
History, My first Bouvier. Make this really float the same. Let's take a look at my footer
here for a second. I should be able to just copy this right there. And then I should be
able to go into my CSS styles, look at the footer, that done. I think I want to go into
my h tags here, and that should be 009. Now I want some padding. Let's see. Oh, I've set
in a paragraph, this is not in a paragraph format. That's why I'm not getting the format
that I want. There we go. I want my body color should be black, so do I re-define paragraph
somewhere here. OK, so let's just take a little walk through here. We have the heading 1,
heading image, content. We can figure out what's going on with each of these. OK, my
article is my content. Alright, so let's look at content here. I'm going to want to make
the, instead of being 780 pixels, we want to make it 80%. And we want to make the sidebar
20%. OK, so we've got the footer, we've got the sidebar. I can go through and change the
link colors on here and would've if I was trying to make it exact. Doesn't need to be.
So what I need now is sections in here with my images. So I'm going to have to take a
look at how I have this set up. So I've got a section with an image here. Then I have
basically two sections there. Let's take a look at how it's set up on this page. So I'm
going to delete that, delete that, and currently in the article content. And what I want to
do is insert a layout object of a div. And it's not letting me do just the article. So
let's take a quick look. And this again I'm getting, article content should exist here,
and it does. We have a heading here, that's fine. What I want to do is put some sections
in here. And it's not letting me just add them. So I'm actually going to have to type
in the start and end of the section. So this is section and inside it, we're going to make
it an id of, and it should be semantic, so appearance. Id equals appearance. And inside
the section I'm going to copy my content. I'm going to go back over here, I'm going
to copy all text including my anchor. And I want to make sure that I'm in the section
id, so that's selected. And let's go back to design view. OK, so that's not bad. I want
to put an image in over here so I'm going to insert my image and that one should be
Nessie, and I'm just going to put in Nessie as an alternate text. And what I need to do
is I need to do a CSS style. I'm going to actually create a class. Float right. What
we want to do is get into the float right and then we're going to, make a height go
for this box, which I want to make a little bit larger. So we'll just do that by doing
padding. And we're going to say we got 20 padding all the way around. Let's see what
happens. We now need to apply that class, that's not bad. Except I want her to be here.
So let's see how that looks compared to our original page. It's not exact but I'm OK with
it. Alright, so I'm going to need another section underneath that one. And we need to
take a look at what I have here. So this section, I'm going to make two sections and put this
image in the first section and set this one to 55% and this one to 45%. So I'm going to
have section id temperament and history. And now I'm going to
have to go in and format them. So I need to add these. When I add these I'm going to add
an id. So I'm going to do the id for temperament and what I really need to do here is get into
the box. It needs to float left. And it needs to be set to a width of, I think I said 55%.
And I want 5 for padding, except at the right I want 15. And I'm going to hit Apply. And
then I'm going to hit OK and that gives me this little position right here. So I'm going
to go back to Design view purely. And over here I'll grab my temperament information.
This should be my temperament section. And now I want to put my image in here. So I'm
going to insert my image, which was Eli and I'll just now put this in as Eli. And then
I'm going to have to have him float to the right. So I'm going to use my content. So
he's, so the container is floating left but he's going to need to float right. And I'm
OK with that. And then I need to have another section right here, which I created, I just
need to format and I need to make that history. So I need to go into my CSS styles and add
a new one for id and make it history. And I need to set up the width for this at 45%.
And we'll have it float left to butt up against my other one. And then I think I got them
too close together. OK, so we're going to make it 42%. OK. And so in there, and that
should look pretty close. So I'm going to go to take a quick look in the Live view.
Not identical. I could go through and keep formatting size and color, so there was black
and bold. One thing I would want to do here, I'm going to take it out of the Live view
is make each of these links go to a spot on the page. So appearance would go here, temperament
would go here, history would go here. Oh, and this is why we run into two ids because
I've got the id for the anchors. That's why you're seeing history2. That's OK. And I don't
think I've got that selected right. Bouvier select, and that goes here. So history should
go to history, temperament to temperament and appearance to appearance. And I've put
two on all of those so I didn't duplicate because you're only allowed one id. So one
I should be able to test this in Firefox. It's not identical but it's pretty close.
Oh, my mouse-overs make it disappear. Gotta watch that. So I'm going to have to, it doesn't
have a title, OK, so I'm going to have to come over here and I'm just going to have
to say Meri's Bouviers. And then I'm doing to have to look at my mouse-overs on my navigation.
We want that to be blue and then we want the color to be, let's undo that. That's a background
color. We want color to be blue and we'll test it again. OK, so mouse-overs are now
blue. I'm happy with that. OK, so again it's not identical. I could keep going but I think
this has been a pretty long lecture anyway. But it's pretty close to that one. I'd have
to go through and finish formatting the colors but you've seen how to do that. So that takes
a table layout and converts it to a CSS layout. I think generally it's better to start with
a complete redesign rather than to try to make something look like something else in
CSS. But you can pretty much replicate it. Table design is a little faster initially.
But the thing is, once i had the CSS done, I could have 50 pages all formatted the same
way and this is also semantic and it's the correct way to do it. So this is how it's
done in CSS as opposed to the table format. So you should recreate yours. And you don't
have to make it the exact match. Take the same content from your first page and do a
new CSS layout if you like. You don't have to make it an exact match but do a CSS layout
with the same content that you did for lab 03.