Tip:
Highlight text to annotate it
X
Welcome to Unit II of Web Design. Today, we're going over how to download
download a template, define a site in Dreamweaver, modify header and footer in Dreamweaver, make a template in Dreamweaver, how to make images/graphics ready for Photoshop. So, first we're going to learn how to download a template. So, we're going to go to this Web site,
right here. It's HTML5up.net.
And everyone in class is going to download a template from here. We're using the templates from here because they are fully responsive,
meaning your Web site will be able to be viewed on a desktop, tablet,
and cell phone. It's build with HTML5, which is the current mark-up language,
it's very easy to customize, and it's 100 percent free under creative
commons. So, here, you can pick from any of the different template layouts
Go through, kinda pick which one you like
and which you want to use how to download. So, for this demo, we're going to use
Verti, so we going to go here, click here, to download,
save file, okay.
And now I'm just going to go to my downloads folder,
which you can see right here.
I'm going to extract all
Ok, after it's extracted,
I wana drag this folder, the
extracted folder, to my desktop. and Now, I'm just going to rename the folder to something I'm going to remember. So, I'll say "Jane
DoeWebsite." You can use your own name.
And now we're going to open up Dreamweaver.
So, go down here, and open up Dreamweaver.
So the first thing you wana do when you open up Dreamweaver, is manage your site
and I'm just going to call it "Jane Doe Website"
and then I wana choose my local folder, which is the one
that is downloaded. So, I'm going to go to my desktop, select that
folder. And then, hit Save. So, it's really
important that every time you work on your web site that you work on the same computer.
and put your folder on your desktop whenever you're working. Later
you can move it to an external hard drive. But every time you're working on it, you want it to be on your desktop. It's just
because Dreamweaver will be sourcing and expecting your file to be on your desktop.
So, right here you can see the contents on you Web site folder.
So, we have our CSS, which are our Cascading Style Sheets, our images
are all in there. Here's our Cascading Style Sheets,
our Java script is right there,
And then our index.html, if you remember, is our homepage. This is if
you want a left side bar layout, and this is if you want no side bar layout.
This is the license. It says "read me" if you don't understand how to use ,
you know the template you just downloaded. This is the right bar layout.
So, we're going to check out the index.html. So, you just double click on that.
You can see that Dreamweaver has opened it up
in what's called a split view. That means that you can see both
the code and then the design view on the right-hand side.
You can also just look at it in code view, so it just displays the code
or just design view. I like the split view because i like to look at the code
and then also see what's happening in the design. On the design view right now,
it does not show what it's going to actually look
like in the browser. So if you hit live view, that kind of shows you how
like in the browser. The problem with live view is that it's harder to edit
the different elements. So, I click live view on and off
a lot while I'm working. We'll keep it on for now. So, let's
check out the code. As you can see it says DOCTYPE HTML
it just means that this document type is an HTML document type.
This section right here, that's greyed out, you can see by this
back carrot, exclamation point, and these two hyphens that this is a comment.
So comments in HTML coding are basically leaving you messages
but it's not actually something that the browser will read. So, it's basically
it's telling the user that this is Verti.html5up.
This is their web site, this is how to follow them on Twitter,
and then this is free for personal or commercial use under Creative Commons free license.
So, this is not necessarily needed for a Web site, so we could delete
this out, but I think it's nice to keep that in there since they were generous
enough to create this template for us to use. And then down here
HTML that just means that "Hey browser,
HTML is starting." And then we can see that we have our head tag, so
we will use our head. And here, you can see
it is saying that our title of
our document. So
the title area, if we were to preview this in a browser, preview this in Firefox
right now it says our title is Verti.HTML5up.
So that you can see that's that part right up there.
So probably for this, we don't actually want that title, we would want to put our name. So, I'm going to put
"Jane Doe."
So, now I can just
save this, File, Save. And then, if I were to preview this...See now
our title head is now in fact, Jane Doe.
So, it's important when you're building your Web site that you change the title out. So that when people
have multiple tabs open, they can easily click and see that oh, okay
and see that this is your Web site. Other things that are in here
this meta stuff, this is for Google search and other search engines.
So you put a description here for your Web site. Say, "Hey, this is Jane Doe's personal
Web site.I'm a photographer, videographer, du, du, du, du, du...." Key words
so say, Jane Doe is a wedding photographer, she might want to put
in "wedding photographer" stuff like that.
And then, as we continue down
this is just a link to some of the fonts used in this layout.
And then down here, this is just linking
out script. So, you do want all these Java scripts because this is one of the functionalities
of the web site, so you want to keep the script in place. And then this is linking our style sheet.
So, our style sheets, you know, are basically the layout:
it gives the font, the color. We don't want to un-link our style sheets either.
Probably later, if you want to go in and edit our style sheets. Say, if you want a different background or color
or something like that, you want to do it there.
So, we'll just continue down. You can see that that's ended the head. So, if you remember, the head
tells the body what do to. So the style sheets you have linked are basically telling the body
what kind of style and format they should be in.
So, now you can see, we have, the body has opened up the class's homepage,
which means this is a homepage layout, and now we can start
reading what's in the body. So, the body is basically what's
being displayed in the browser. So you see the first thing that's being displayed
is the
this is basically the div of the wrap of the header.
So this would be the header area. And, you can see it says "header"
and then we have our logo. So, this is the logo. So, if you did want to change
out your logo, you do that there.
And so things right now
there's a link to the logo. And then, as we
go down a responsive site by HTML5, so we would probably
want to change that to something like "Jane
Doe's website."
If you click over here, you can see that that text
is changed.Now, you might want something completely different.
So, if Jane Doe is a wedding photographer, you might say "Jane Doe,
Wedding Photographer."
So, you can see we have it
changed right over there. And then, here
we want to change Verti to, we might just wana put,
we need to go back up, sorry.
You might want to put "Jane Doe" instead of,
"Jane Doe" instead of.
So you click back over here, see now it says "Jane Doe."
And then we can get rid of "Jane Doe" and put
"Wedding"
we'll just call her a photographer
to make her a little more broad in case she wants to shoot more things than just
weddings. So, you can see
it's very easy to customize these things. So, you could do it over here
and you can in the design view over here, But if you want to edit something in
design view, I would say you want to un-click live view and go to that area,
and you can change it. So, we want photographer lowercase
so then you can just do it here. And you can see the updates in the code over here
so I'll go back to live view. You can see that...
I think I'll make photographer uppercase.
I don't like the look of that either. So I think I'll make it all
uppercase.
If we continue down, we can see that next up we have the nav bar.
So the nav bar you wana update too. Because if you look at it, there's a lock on the left side,
right side bar, and no side bar. Right now, we'll just preview it,
in Firefox. We do want to make these changes.
So we have this updated, but if you click on my side bar, it is basically just telling
and showing you what these different templates would look like.
So, instead, you probably want to change this to home,
about me, contact, resume, and portfolio. So, we just go back
over here, and go back and find where "welcome" is,
click on that, and you can see it's right here. So, I want that to be
"Home." So you can see that
is updated, and now it's linking to that index
.html, and then next we're going to do "About."
So, in left side bar, I'm going to do "About."
You can see that's updated.
And, then I just went up to, instead of linking that to the left side bar, I
linked that to "about.html." We haven't made these pages yet, but
we wana change it to that. And then, right side bar
we wana change to "Contact."
You can see that's changed.
So, I see that change has updated over here. You sometimes have to hit
another window, and hit back and forth. And those side bars have been changed
to "Resume."
And then we just change it to "Resume."
Okay, and now
you can see we need one more list item, which is our portfolio page.
So, now what I'm going to do is just copy this resume. Edit, Copy,
paste it. And
we wana name that one "Portfolio."
You can also name it "Work" or something like that depending on what you prefer.
We want this to be "Portfolio."
And if we go over here, now
we can see that we that link available too.