We're going to begin with a very simple page. There are several ways to create new pages
in Dreamweaver. We're gonna create our first lab and we could
choose New, HTML, we could go into here, into the labs, and click and choose New File, or
we can choose File, New, which is typically the way I prefer to begin. And this gives us some defaults CSS layouts. I'm going to choose a one column fixed, centered
layout. I want to make sure that you select HTML5,
and for your layout CSS, we're going to add it to the head of the page. We could do an external CSS file, but we're
not going to start there for our first lab. I'm going to hit Create and it will put me
in this blank page. If I go to the code view, you can actually
see all the code right in here, and typically what I will do, is I will go through and read
the code, and work in here. They have actually put in some pretty good
defaults. This is one of my preferred setups for the
default font list and I'm going to work in code a little bit this time.
I'm actually going to put it in the split
view, and I'm going to take this to Full Screen. I really like Split View, because it let's
you see what I'm doing. So here where I have the title "Untitled Document",
I'm going to call it "Lab 1: Meet Meri", because for lab 1 you're really just going to introduce
yourself. A lot of this stuff i don't need in this page. But it's not hurting anything, so I'm going
to leave it here for right now. One of the things I do want you to notice
is that we've created a container which sets the width of our page to 960 pixels. It's setting our background color to white,
and our margin to 0, which is top and bottom, and to auto, which is making it centered on
the screen. If I didn't like the color here, I could pick
it here, and for the container color, and I do actually typically like it white but
I'm going to just go slightly off white to show you that you can.
And if we wanted to change the background
color of the body, that's where we do it here. So let's look at it live for a second. That will show you what it really looks like,
and then you can select things and it will change in the code view, while it's in live
view, you can't change it over here.
So our background is currently a dark gray. I'm going to change it, just to show you how. So here, now I'm in live view, but should
be able to change my code, while I'm in live view. So I'm going to go into the background color
in the body tag and choose color, and I'm going to choose a really dark purple, and
I'm going to put my semicolon to close it, when I click over here it's changed. Excellent. Now, this is already got code in here. I've got a div with container and a div with
content. And so you'll see that they are each defined
up here, where you have the container defined, and we should have the body. We did not really define anything special. So the content is held inside the container. I don't really need it. All I want is that div class container, so
I'm just going to delete all that. Ok, so here I have my site with absolutely
no content. So I'm going to go back into here, I'm in
the body section, and the div class container, and I could put things here.
So I can start by typing in h1, because good
web design for search engine optimization, you typically have an h1 tag, and I'm just
going to say "About Meri". This sort of replicates, what you would typically
get inside of an "About" page. It's my chance to introduce myself. Let's see, if I'm going to introduce myself
to you, maybe I should have a picture. Now, I could either put my picture in my images
folder here, or I can actually add another images folder inside of my labs. You could do it either way. I'll just show you how to do this. If I wanted to add a new folder here, I can
right click and choose New Folder, and I'm going to call it "images".
All the images in any of my labs are going
to go in here. It's not that hard, I've got a shortcut here
to my, I'm obviously doing a lot of different stuff today. Alright, so I've got a shortcut here to my
files and I'm going to go into my images – Pictures, and let's see if I can find a picture that
I want to put in of me. I have several. These are edited for the web but there are
all my dogs. Well I want to put in a picture of my dog,
so let's see, we have Nessi here. I'm going to add her to the images and you'll
see that she appears in here. And if I wanted to I could find another image
of myself, we'll just drop this one in and then I'll show you how to get into editing
it. Because you should edit things before you
use them. Those are not going to come in the right size
but you can see it's very easy to put them in here. And Dreamweaver knows that you're going to
probably want to edit these.
And it will allow you to Edit, it's just going
to let me rename it, let's see. I should actually just be able to double click
on it. I don't know what I have registered as my
photo software for this. You can go into your setting and set it up
to be something like Photoshop, which I will do later. So right now it's going to try to find that
editor. I'm not sure if it's going to work because
I didn't set that up. We'll just drag in this photo as it is. I'm going to take this into Design mode and
I'm going to turn it off of Live, because nothing is going to work when it's in there
as Live. So I'm going to hit enter, actually I want
to click in "About Meri".
I'm going to double click on that, actually
that should open for editing, so I'm just going to drag it right there. Ok. You should put up Alternate text, "Richard
and Meri Winchester". I'm going to keep that. I'm going to just open the text for a minute. So you want Alternate text. This is "Meri Winchester", so that's good
enough. I'm going to hit OK and that's way way way
way way too big. So what am I editing in? I really want to grab just a piece of this.
It's not what I wanted. I don't think I have the file open the way
I want. I think I'm using Gimp and I really want to
use Photoshop. I'm going to discard changes and I believe
that opened it up in Gimp, which I'm really not familiar with. I want to register that to Photoshop. Ok, so for right now, I'm going to show you
what not to do. I'm going to do something that you really
shouldn't. I'm going to change this, it's locking my
picture size, I'm going to change it to 125 and it should've constrained that, and that's
better. So not perfect but better. Now for the heading 1, I could go in and add
CSS for this, which I'm going to do. I'm going to edit rule, now this is editing
everything in here. That's not what I want to do.
I want to select a New CSS Rule, Edit Rule,
and it's anything in here. It's got the doc in the container, it's h1s
only in the container. In my page it's essentially going to be the
same thing as h1 but it's ok. So then it's going to allow me to go into
the Box, nope, Block, then Text align: center, and I'm going to hit Apply. It is everything up here but it is in my h1
tag. So I need to take a quick look at this. Now, this is when it comes in handy knowing
the code because here I can split the code, I can select the image, and I don't want the
image to be a part of the h1 tag.
This is why knowing that is really critical. So I want the image in the same line, but
I don't want them together, so I'm going to go back to Design. And this actually ends up being in the lower
spot. I could fix this, but I'm not going to worry
about it right now, this is not the pretties page I'm every going to have. I'm really not happy with the way this looks
but I can do various things to fix it. I can get really carried away, which I'm not
going to do right now because I really like to get into CSS, because it is a heading,
and do bunch of stuff with this. But it's really more advanced than I want
you to get. So in your first lab, what I want you to do
is just play. I'd like to see you trying insert a picture
or two, and here on this page I'm not going to care if they are properly formatted.
This is Nessie, she's a Bouvier De Flanders. I'm going to hit ok. And the alt tag is read by browsers to the
blind. And that's really not actually a bad size. Here is where I could have edit it in Photoshop,
that's what I wanted to grab earlier so I could go in and properly edit that. But this is actually the size that I wanted
it to be. I could add a link to it here, and it has
all sorts of different options for me, for the photo. Then I can add a bunch of text here. "Let me tell you about Nessie! She is my youngest Bouvier, and I also own
her father, Eli." I expect you to type a lot more than that
and I will finish this later, when you guys aren't watching me code. So I just want you to play around, I'm not
going to grade on formatting of this, but I'd like you to get a couple of pictures in
there, I'd like you to change the background color of the container, I would like you to
have a few paragraphs about yourself, and I will put up the finished product of when
I'm done.
We're not really going to worry about formatting
because I haven't taught you enough in Dreamweaver to make this align with the picture or anything
like that. But I just want you to create that first layout
where you tell about yourself. It's a good idea to have in your "labs" folder
an "images" folder. So now I need to save this, because currently
it's untitled, so I'm going to have to choose File, Save As, and it's actually not a bad
idea to do this the first thing that you do. So this is going to be inside of "labs", and
I'm going to name it "01lab.html" because that's what I said I would name it, when I
was doing the index page. So I'm going to hit "Save" here and then I'm
actually going to want to go back to my index.html and I'm going to check to make sure that it's
actually linked right.
And the better way to do that, if it's simple
like this, and I'm going to have to go to my html, I'm just going to visually checking
but it's not a bad idea to just go through and link to that to make sure it's linked
right. So your first page and this is really "Your
first page, where you introduce yourself. It should have several paragraphs, an H1 tag,
modify the background colors." So really simple, and then I'm going to save
this. And easily I can go into here and choose File,
Save All. This is my index page, so if I upload this,
and it'll ask "Should dependent files be included in the transfer?". I'm going to go ahead and hit "Yes". And there aren't any because I don't have
any images. Now if I flip over to this one and I put that
up, and choose "Yes". That will also upload my images.So that's
what it means by "dependent files". Then I can go and test this online, and so
let's go out, you can see I've been busily recording and working today in youtube and
other things.
So this is, let's refresh that, and hit Lab
1, and that works. This is obviously not a finished or well designed
page. It's just showing you that you can easily
put content into Dreamweaver, upload it. Dreamweaver handles anything. We're going to get way further into formatting
and making things look good but before we get to that, I'm going to a quick review of
hand coding with you in the next view labs..