Lesson 4: Adding Navigator and Pages Adding Links: Transcript - What really make the World Wide Web powerful is that it's all linked together, right? It's a network of computers basically. And how do we connect things? Well it's typically, at it's very basic level, done through links. So that's what I want to do now. In fact, right down here, starting with something simple, right down here you an see my name, Paul Trani, and I want to link my name to my website. So notice as I highlight it, and keep in mind you might have to click twice in Live View until you see this orange border around it and that will give you these Formatting options and the last one here is Hyperlink. So just select that and type in the URL you want this particular text to go to. In this case it's going to www.paultrani.com, T-R-A-N-I.com. Hit enter, just like that. And what's going on if I go into Split View, you can see it right here. It's added this So that's all I need to do. In fact I can go ahead and Save All my pages and I can preview it a couple ways. Let's go back to Live View. Literally preview it right in here, in Dreamweaver, just by holding down the command key I can click on that link and here you have my webpage right here, paultrani.com. Alright so that's how we can easily set up links. We'll get in to customizing in a little bit. But the short of it is I wanna do that for these items. I wanna do it for, say, the About page. I need that to go to the About page. It's the same process: Hyperlink, and then typing in the page. In this case, where is that page? Well it's not created yet because notice how in here, in the files, the About page is not there. But the short of it is, I would jump in and just start typing in about.html because I'm gonna create that later. So I'll do that for all of these: portfolio.html, contact, just like that, and then lastly we have the home. In fact I don't want to call it home. I don't want it to go to this page because this index.html page is my homepage so notice how I can browse to that file since I already have it created, selecting it, but it's just as easy to type it in right there. OK. So that's what I've done. Here are my different links. I can also build in links here if I wanted to. Say for instance if I wanted this Building brands to also go to the Portfolio page, I can jump in and type that in portfolio.html, just like that. Alright. But blue really doesn't go with my design, at least not this color blue and in fact I wanna sample maybe a red or orange in there. So how do we change the colors of these items? Well, we can go into the CSS Designer panel and really with this just selected, say this Building brands for instance, I can come over here and I can add a Selector. Now if at any time you don't get the Select CSS source to add a Selector, just select the Style CSS because it doesn't know where to put that Selector until you have that selected and now, if I add a Selector, you can see it adds it. And it's alw ...

1. Lesson 4: Adding Navigator and Pages
Adding Links: Transcript
- What really make the World Wide Web powerful is that it's all
linked together, right? It's a network of computers
basically. And how do we connect things? Well it's typically, at
it's very basic level, done through links. So that's what I want to
do now. In fact, right down here, starting with something
simple, right down here you an see my name, Paul Trani, and I
want to link my name to my website. So notice as I highlight it,
and keep in mind you might have to click twice in Live
View until you see this orange border around it and that will
give you these Formatting options and the last one here is
Hyperlink.
So just select that and type in the URL you want this particular
text to go to. In this case it's going to www.paultrani.com, T-R-
A-N-I.com. Hit enter, just like that. And what's going on if I go
into Split View, you can see it right here. It's added this So
that's all I need to do. In fact I can go ahead and Save All my
pages and I can preview it a couple ways. Let's go back to Live
View. Literally preview it right in here, in Dreamweaver, just
by holding down the command key I can click on that link and
here you have my webpage right here, paultrani.com.
Alright so that's how we can easily set up links. We'll get in to
customizing in a little bit. But the short of it is I wanna do that
for these items. I wanna do it for, say, the About page. I need
that to go to the About page. It's the same process:
Hyperlink, and then typing in the page. In this case, where is
that page? Well it's not created yet because notice how in
here, in the files, the About page is not there. But the short of it
is, I would jump in and just start typing in about.html because
I'm gonna create that later.
So I'll do that for all of these: portfolio.html, contact, just like
that, and then lastly we have the home. In fact I don't want to

2. call it home. I don't want it to go to this page because this
index.html page is my homepage so notice how I can browse to
that file since I already have it created, selecting it, but it's just
as easy to type it in right there. OK. So that's what I've
done. Here are my different links.
I can also build in links here if I wanted to. Say for instance if I
wanted this Building brands to also go to the Portfolio page, I
can jump in and type that in portfolio.html, just like
that. Alright. But blue really doesn't go with my design, at least
not this color blue and in fact I wanna sample maybe a red or
orange in there. So how do we change the colors of these
items? Well, we can go into the CSS Designer panel and really
with this just selected, say this Building brands for instance, I
can come over here and I can add a Selector.
Now if at any time you don't get the Select CSS source to add a
Selector, just select the Style CSS because it doesn't
know where to put that Selector until you have that selected and
now, if I add a Selector, you can see it adds it. And it's always
going to be very specific and I don't want it to be that
specific. In fact, I want it to be general so I'm just gonna leave
it with that a, that href. And in fact, as I select it, look right
here, it highlights everywhere where I'm using it.
So in this case, if I wanna change the color for all of these
links, just creating that "a" Selector and then going in to my
Properties panel, right over here, jumping down and just
changing the text color. In this case, I might wanna make it sort
of that orange color, kind of taking a hint from there and some
of the wood background seems to work for me. So that's what I
want. I could always change it later. I think that looks pretty
good. In fact, I'm not crazy about these underlines. I feel like
since this text is a different color, people are gonna know that
it's a linkand we can get more specific but that's the text
decoration.
So if you want to remove that underline, just select Text
Decoration. You can see it's not there anymore. Everything
looks great. We can Save All and we can also, not only just

3. preview it here in Dreamweaver, but you can always Preview it
in the Browser of your choice just to double check. I'm gonna
select Google Chrome. Here it is, my different options. I know
this one is good and in fact, as I select it, it goes out to my
website and everything looks great.
Now, you can go, also, beyond this as well. If you jump in and
say, for instance, start to select this Paul Trani right here and
going into your Properties panel right down here and if it's not
down below, you can go to Window and select Properties
because I wanna show you this is just real easy to do. Any time
you're linking out to an external site, you potentially want to
open up a new browser window and that's when we get in to
Target. We wanna change our Target to blank, OK.
And that's all I want to do there. I'd say that looks good. We can
Save All. Test this one last time. There it is and then as I select
Paul Traniyou can see it opens up this new browser
window with my website. So I do encourage you to visit my
website, but more importantly know that you now have the
power to link content together. Not just webpage to webpage,
but webpages to websites, to files to email addresses, all that
fun stuff, all really through the href.
Creating navigation: Transcript
- As you start to add links and navigation, chances are you're
gonna want your navigation items to look different than every
other text element on your page, you want it to look unique, you
want these items to look selectable as well. That's what I wanna
do next. Now, notice if I select this Home button, this text
here, it's the "a" tag or the href tag right here, and if I change it,
it's gonna change it everywhere. So I need to make something
specific for this Home button. Now let's take a look at our
Design that we're working off of.
Here's the Design, and notice how the font is different and each
one has a different graphic, say, in that background there. That's
exactly what I wanna do is make unique experiences for each
navigation item. So that means adding a specific class by

4. clicking that plus button and we can call it "navhome." That's
what we're calling it, "navHome," we'll do capital H. Hit
Enter. Where do you want to put it? In the Style CSS, so hit
Enter again.
Now it's highlighted over here in the CSS Designer panel,
"navHome." Now I can change it. So I can change the text, for
instance. I can change the font family. I think Bitter was the
original font, but I actually, actually let's see. League is the
original and I actually like Bitter a little better because it's
larger and just gonna be easier to select. But the point is that
you can change this and make it specific for any one of your
navigation items. But let's go beyond that because I need to give
it some breathing room, which is gonna deal with the layout.
So right over here I wanna adjust the margin. Okay, so I want
the margin maybe to be 2% on the left side, and then 2% on the
right side.Percentages, 'cause I want it to scale. If we take a
look, I actually wanna give it some padding as well. I'm gonna
give it a padding of 50px, something like that. Because within
this space in here, this is where I wanna add the graphic. But
I'm already noticing an issue, because I don't want this graphic
to overlap the logo.
Which means, I need to push down this nav bar. In order to do
that, or to change any element, just select the Selector, and then
go down in here to your Properties, and notice how you can
change the margin right here as well. We can change that to
40px. We're able to push it down, just like that. So we do have
room for our graphic right here. All right, now let's get to
adding that graphic. In order to do that, we're gonna make sure
navHome is selected and then we're gonna go down to the
Background right down here.
I wanna add a background-image. So right in here, adding a
background image. Now, if you have access to the Design-
assets, notice how you will find your navHome right there If
you've been following along this whole time, there actually is
already that graphic in the Images folder. Check this out,
whether you're using the Assets provided or the Exercise files

5. provided or your own, you wanna select that graphic and watch
what's gonna happen.
It's gonna say, hey, you need to put this in your local root folder
if you want this all to work. I'm saying, hey, that's a great
idea. It says, hey, where do you wanna put it? Well, we're gonna
put it right in here in this folder. Again, like I said, if you've
been following along you should already have these graphics in
here. Nonetheless, point to the graphic you wanna use. Select
Save. Maybe replace that one in this particular case, but you can
see it right here. Notice how we see it clipped, okay, so we
don't see it really fitting in there correctly.
The easy way to fix this is to jump in and change the
background size. So rather than it just being the full size that it
is, we can change it to "contain." Now you can see it's
contained within that space. And we can make sure it's not
repeated, 'cause we only want one graphic there.Then we can
get into the background position, because technically this is my
final position. I actually want it to start off a little smaller. In
fact, maybe 20px down. Notice how I've just dropped it down
20px and I'm just giving a hint at this graphic, and then when
they roll over it or hover over it, that's when I want it to slide
up.
So I'm creating the initial state for all of these. Jumping in here,
for the About button, navAbout. The same process, hit Enter
twice, and you'll see it right over here. So it's actually pretty
easy. Selecting the navAbout, we can change the font to that
Bitter font, change the layout to 2%on the left and the
right. Just like that, and then the padding, we don't wanna make
it the margin, but the padding needs to be 50px just like that.
So there we are, we have the spacing right, the layout correct,
grabbing that image. And again, if you've been following along
this whole time, they should already be in your Images
folder, just select that About image, which is this guy right
here. That .png file, there it is.Adjusting the size to
"contain," making sure it doesn't repeat, and then changing the
pixels to 20px vertically. So there it is, just gives a little hint at

6. someone.
All right, and that's really the workflow that you want. So
navPort for Portfolio, just keep it simple. Even you can do a
couple things at the same time, I can come in here and add
navContact. I've added both of those now, so there's Port and
there's Contact. Okay, so that looks pretty good and just keep in
mind, the whole time you've been working, if I go into split
view, you're actually adding this CSS right down here.
So you can see it all right in here. That's why you'll see a lot of
developers start to work in this mode, because in this
case, rather than me selecting those various options like I was
doing, I can literally just select all of this, copy it, all of these
Properties go down for the Port section, and then select
Paste. There it is. Same thing for Contact, paste that in as well.
And if we take a look, there we are, there are those three
heads. We don't want those three heads, we want to make them
specific. We can change it a number of ways, and just to make
sure I don't actually select anything wrong, let's go to
navPort, or type anything incorrect, we can change the
navAbout to the navPort right there. So opening that up just like
that. Same thing for Contact, selecting that for that background,
changing that navAbout to navContact just like that.
So there's a number of ways you can do it. You can do it the
manual way of quickly adding content, but any time you're
doing something multiple times, consider copying and pasting
the code. Another way to do this is to define a whole separate
class that does all the spacing and then a specific class for each
one that adds the picture. So there's multiple ways to do it, I
just kept this pretty simple. In general, this is nice, I like how
it's actually set up for me to do some nice hover states, which
would really be the next step for this website.
Building transition on navigation: Transcript
- One thing I love about creating web content is it doesn't have
to be static. You can bring your content to life with animation
and transitions.And that's exactly what I wanna do with this

7. navigation here. So rather than these graphics being static on
the roll over or the hover of each one of these I wanna change
the font color to white and I wanna reveal more of this
image. Okay, all on hover, kind of inviting the user to interact
with the content. And Dreamweaver makes this easy because
you have CSS Transitions built right into Dreamweaver.
Selecting CSS Transitions, all you need to do is come right over
here and Create a New Transition. Now I'm gonna start with
_navHome, so you can see it right here, _navHome, you select
that specific Target Rule, _navHome, and you want it to
Transition On, hover, in this case, as you roll over it. And then
how fast do we want it to go? Well I'm gonna type in .3
seconds, okay? Let's make it kind of fast, something like
that. The Timing Function, you can change this to ease in and
out, so it's gonna start out slow and then end slow, just gives it
this nice feel, okay? Now well, what do we want to transition or
animate? Well that's where this Property comes into play, we
wanna add a Property to animate.
And if we take a look right over here, background-position is
what this is set to. This is set to 20 pixels, which is what pushes
it down. The background-position is set to 20 pixels. I actually
wanna set that back to zero to move it up. So selecting
background-position. In the Value, 0 pixels, just like that. I
wanna change the text color, so scrolling down we can see color
right there, changing that to white, hit enter, and Create
Transition.
So there it is. You can see it mapped out right here and as you
roll over that's what I want, and that popping up and looking
quite nice. And you can just jump in and start doing this for all
elements. So add a new, or Create a New Transition for the
About, right in here, _navAbout, On hover, over the course of .3
seconds, ease in and out, change the background-position to 0
pixels, and color right there, changing that to white.
Now make sure you don't go too fast, because it's easy actually
miss something, just like I almost did there, it wasn't actually
pure white, but that's what I want. This point, Create

8. Transition. And looks like I actually have this paragraph
tag selected while I was adding that transition,you can always
remove it there. So just be mindful of what's selected, but in
general you can see that is working for both of these. Okay, so
again, I'm gonna select _navPort, it's really this one, and
_navPort you can see it right over here, Window, CSS
Transitions, and that's what we're dealing with right over here.
Adding that New Transition for _navPort. _navPort, On
hover, over the course of 3 seconds, ease it in and out, make it
nice and smooth,change the background-position to 0
pixels, keep in mind there's a slew of values you can change
right in here, in this case changing the color as well. And there
it is, Create Transition. Okay, there it is. Portfolio. Lastly,
Contact.
CSS Transitions is what we're dealing with. Coming in here, we
can see it says _navContact there, we have it right here, On
hover, you get the idea. And there's more you can do with this
as well. You can do it on active states, different states, but all
in all we're gonna keep this simple for this project. And then I
also wanna show you the, change this color, CSS that it creates.
So Create Transition and Contact is done as well. Okay, so
that's everything that's created. I can see everything right
here, previewed in that CSS Transitions panel. If we start to
take a look in Code view it's this css, Styles.css content that
was added. So if we take a look at _navHome here's the
transition that it added for different browsers, those are
different browser-specific prefixes, and then even right down
here at the bottom these are the properties that are changing,
okay? So that's what it's added, but it's the nice that I don't have
to deal with that, I can just be in Live view and work the way
that I wanna work and add those nice transitions to really bring
my site to life.
Adding multiple pages: Transcript
- Now when it comes to making multiple pages for your site, all
it really is, is your initial page just duplicated multiple

9. times. But before we do that, we need to make sure it's cleaned
up nice and tight and is looking great before we start
duplicating it. Because I am starting to notice that this text is
going right up against that edge. And even this white is
going right up against the bottom and the top and I wanna give
it some spacing. Now, I need to select the parent tag rather than
this paragraph tag. I wanna select the parent tag so I can right
click and Select Parent Tag.
And we can see that's sectionRight. That's what we need to
adjust. So over here in CSS Designer panel, I can select
sectionRight right here. I can see the width, the margin and the
padding. And really, the padding is what I wanna change. And
the padding, quite frankly, I wanna change all sides and make it
about 2.5%. Now when I do that, look what happens. It actually
moves it down.
And doesn't look very good. Because it actually is beyond
100% when I've added that extra 5%. So if I change the width to
45% to accommodate for that, we can see that it's right
there. And now I have that spacing around all sides on the
inside and that looks pretty good.Now, what I wanna do next is
add some margin on the top and margin on the bottom. So
scrolling down you can see margin right there.
Jump in, say 10px there is fine. 10px here and you can adjust
that as much as you want even if you want to go as high as 20. I
think that looks a little better, giving it some breathing room
just like that. I'm starting to notice even this text is actually
pure black when it needs to be that very dark grey. And it's
really subtle but I do like to correct these things. H2, I can
show the Set Properties. If you check that, you can see the Set
Properties. Or just jump down to that specific color.
And again, you can see that it's pure black and I want it to be
#222325, just like that. It just made it a very dark grey. Same
thing for the H1.And it again, it seems simple enough but it's
good to kinda tighten it up before you start duplicating your
pages. All right, so I'd say that looks pretty good. Lastly, I
noticed this H2 is looking pretty good overall, the H1 is looking

10. good, I can change this stuff later. But I like this format.I'm
gonna Save All these pages 'cause that's gonna save the CSS.
And really this page is my index.html. Now if I preview this in
a browser, say for instance, Google Chrome, notice how it says,
Untitled Document. Well, I need to change the title of my
page so in order to do that, back in Dreamweaver, go up to
Modify, Page Properties and right here for the Title, notice how
it says Title, Untitled Document. We wanna make sure this says,
Paul's Design Shop.
We can even do Home for the home page. Selecting Apply or
Ok. It's actually changed it now and I'm gonna make sure
everything's saved.Now we can start to duplicating this. This
specific home page by the way, this source code page, this
index.html, we'll just do a Save As.We'll change this to about,
just like that. In that same folder as your index.html. And this is
your about page.
So just jump in, I'm just gonna make a quick change. About
Paul. All right, that's done. Save that page. But also for this
about page, I wanna change the background. I wanna make it
unique for the about page. And how would you do that? Because
if you go in here, over to the CSS Designer panel. Now keep in
mind, this Styles.css is where all of these CSS styles are.
So if I select a body and Show Set, you can see that's the
bkgdHome. It's actually in the Styles.css. So that's where that
is. I can't change this because the Styles.css is being used on the
index page as well. So how would you sort of override your
Styles.css? Well, you do that by creating a new CSS element
that's defined in the page. Specific for this page. Define in
Page.
So that's what I've done here, it says,
Lesson 3: Styling Content
Styling content with CSS: Transcript

11. - Now that I have the HTML structure in place I can now get
into designing this content, this is the fun part. In fact, if we
take a look actually in Photoshop this is where I have this
design JPEG open. Feel free to open this up, this is in your
assets folder if you have access to it. And you can see how this
content is laid out, we have a logo, we have the nav, we have a
custom font here, another font here, some content right here as
well. So, I really need to get this formatted correctly, but we're
just gonna start with some of the fonts and these two bars, this
header bar and this footer bar right here.
So that's where we're gonna start, in fact jumping back in here
starting with this h1 is where I wanna start, but really what I
need to do is I need to set up a CSS page, this is gonna
contain all of my Cascading Style Sheets, okay? So in order to
do that I need to go to the CSS Designer Panel. So it's gonna be
filling in the blank starting at the top and moving down. Notice
how it says, "Add a new CSS source", so I can click right there,
okay? So I can attach an existing one, define in page, but really
what I wanna do is I wanna create a new CSS file.
Alright, my new file right here, in fact we will just jump in and
call this "Styles.css", it's gonna be linked, and where do we
want it to go? Well, we wanna go and include it in the same
folder, this "index.html". Again, "Styles.css". I can save, click
Okay, and there it is, okay? Notice on Media it's just gonna say
"GLOBAL" so I can minimize that, but this is where I'm gonna
be working, "Styles.css". Now we get into the Selectors, so the
specific selectors, now my selector here is gonna be h1 right
here, so if I wanted to add a style for this h1 with it selected I
just need to go over here and Add Selector, so when I select
that you can see it says "body h1".
Why does it say "body"? That's a great question, I'm gonna open
up Split View, and you can see this h1 is right here and it's
within this "body" tag right here, it's body and then h1. So that's
what it does, keep in mind I'm in Live View, but that's why I get
that, but I can always double-click and say, "Hey, you know,
let's make this clean, "let's just make this h1", just like that. So

12. go ahead and do that, and I'll say that looks pretty good, and I
can start to stylize this, and that's when we get into the
properties right down here.
Notice how it says "Show Set", you can uncheck that and look
what it opens up, all these different properties for this h1 tag, so
I can jump to those different areas right here as well. But even
for the properties for the text we can keep this simple, we can
jump into Font Size, alright, and I can jump in and make it
ems, ems are, you know, adjustable across devices and
browsers, whether it's a phone to a tablet to a desktop, it's going
to adjust, so I usually do ems but you can also do pixels and
points, okay? So I just made the font size 2 ems.
And I can start to change the font size of all of these if I want
to, but I wanna go beyond that because, really, these fonts, I
need new fonts, I need to go beyond these guys, so what I can
always do is, again, just go in here, Add Selector, and, again,
"body" and then "paragraph", or I could just go with "body",
why not? Let's just add this "body" selector, and now notice
how it highlights everything, it's saying, "Hey, you know, we're
gonna change the font for everything", I'm like, "Great".
So I'm not a fan of that font. Jumping down to the text area we
wanna change the font family right here, "Select set font
family", and you'll notice there's quite a few in here, you can
play with it selecting different ones. They are okay but I wanna
show you what else you can dobecause you go down here to
"Manage fonts" you have access to even more using Adobe Edge
Web Fonts right in here. So I encourage you to kind of peruse
through all of these, there's quite a few, you can start sorting
through different ones whether it's sans serif or serif, whatever
the case may be.
I'm gonna search for Source Sans Pro, that's what I like, Source
Sans Pro, because there's many different font weights, and
really you just check that box right there, check it right
there. And you can add as many as you want, so I can add
Source Sans Pro, I'm gonna do a search for Bitter, Bitter is
another one that I want to add so I'll add that one, again it's just

13. checking that font. And let's search for League Gothic right
there.
Those are the three fonts, in fact down here I can list the
fonts that I previously added, but in general I've added all
three, so select Done. It's added all of them, okay? But it
doesn't change my fonts yet because now I need to jump in
here and you can see, standard ones, my new ones, so this is
nice, I can jump in and say, "You know, for everything change
it to Source Sans Pro", boom, done, right? It does say that, you
know, it won't modify other properties because this font has
different weights, so it's saying "Hey, there's more weights
available to you".
Great. Okay, this doesn't quite look like my Photoshop
document, so I can jump in here, notice right in here this is
actually my League Gothic,that's my heading one, and then we
have Bitter right here, so that's what I wanna do for those
two. My h1 going back in there, selecting h1,going to that
font, changing that font family to League Gothic, there we are,
great. Taking this h2... Now the h2 I haven't made yet, so again,
it's just a matter of selecting h2 and saying, "Hey, let's add a
selector", there it is, clean it up a little just by having it say
"h2", and then change that font family to Bitter, okay? That's
what I've selected, Bitter, and then we have League Gothic.
I'm noticing this font size is kind of large, I'm change this to
ems, let's kind of see where this is at and I can always kind of
scroll through thiswhich is what I'm doing. I would say I want
about a 1.5 ems for that, maybe a 1 em, maybe 1.2. And this is
scalable so it's gonna be flexibleacross different devices. Okay,
so all in all this is starting to come together, and like I said I
actually wanted to do a little bit more for the nav, I wanna put
this in a bar, and I wanna put the footer in a bar.
So selecting this nav right here, same process, adding a
selector, we don't need all of those tags, I just wanna select
nav, and at this point I can start to change more properties. So
right over here, let's actually jump down to background, notice
how I can change the background color, and I can pick anyone I

14. want, I actually wanna do a specific number so I will jump in
here and do #222325, kind of like that light gray,and that's what
I'm going with.
Alright, you can still see the black text in there, well, let's make
it white text by changing that font color just like that. Okay, it
looks pretty good, more I need to do I could probable use to
center this text, well, guys, it's pretty easy, I can select the
alignment to center it and I can start to play with it some
more. In fact, in this case I wanna play with the layout, so
jumping in there, selecting the layout, because I know it's really
tight in there, I just wanna give it a little more breathing room.
So if I scroll down to margin I can jump in here and do a
percentage for the margin, maybe do 5%. So it did 5% on this
side, see how it did that, and even right over here I can change
this to percentage to be 5% as well. You can kind of see how
you're able to kind of move content in and I think that looks
pretty good at least for now and I wanna do the same thing right
down here for this footer. So, again, add that selector, make
sure it's just called "footer", and then just have fun
customizing, you know, changing the background color again to
that specific number in this case, like that, changing the font
color, you get the idea.
And I encourage you to kind of peruse through all of the
different capabilities you have right in here, you know, even for
this footer I know I want the font size to be smaller, I don't
always have to use ems, I can get specific, I can go at some of
the standards or I can even jump in and say, "Hey, you
know, "let's make this extra small", okay? And that's fine,
again, this is a case where I need to add a little more buffer
around it which is gonna deal with the margin, again, as I come
in here. Now, here's something nice that you can do as well, you
can click here to change all the properties at once, so I can go
ahead and type in 5% for that footer and that's gonna change
it around all the sides from top to bottom, all that good stuff.
And a little bit for the padding, which is gonna be on the
inside, so for the top maybe I'll have five pixels, the bottom five

15. pixels, just like that, okay? So that's what I'm working on, I'd
say that looks pretty good for now, hopefully you understand
the basics and I wanna start to reviewwhat we've actually
created, okay? Because we've created this "Styles.css" and I can
see these different styles right here. We've created the separate
page, if I look right over here under "index.html" here's the
"Styles.css", so I can select it and you can see all that
content that I didn't have to type in but I can easily change in
Code View right down here if I want to, and I can change back
to Source Code as well.
So "Styles.css", notice how it has that asterisk, that means it's
not saved so I encourage you to do a Save All, once you're at
that point, okay?So I'll just go back to Live View, there's my
"Styles.css", here's my content, I can select those different
items, and keep in mind you can always jump in and say "Show
Set" and this will just show the set properties for that specific
item, a little bit easier to see, helps out a ton, just remember
you have that checked in case you try to add more
properties you might not see them 'cause that is checked,
okay? All in all even right up here we will see a couple of these
items, and if we take a look that's just an "@fontface", so this is
when we added that font, if I go into Code View for the source
code you can see it's just using those Edge Web Fonts right
there.
So all in all, congratulate yourself on setting that up, don't
worry about those, we're dealing with our "Styles.css"
globally, and we have made various selectors and given them
properties. So really last thing you need to do is just make sure
everything's saved, and I encourage you to play around with
various CSS properties with your design.
Creating a layout with CSS: Transcript
- CSS not only styles content like changing the fonts and
changing the font color and just the color of these bars but you
can add structure using CSS as well as using HTML. That's
what we wanna do, we wanna add structure to this. In fact, if we

16. take a look at the original design,this is in Photoshop but it's
just a JPEG, you can open this up in any program you want. The
short of it is we have this content, this h1 floating off to the
left, kind of off to the side, we have this sort of section floating
to the right.
This is the structure I need to add to my page. Going back in
here, I need to add it using HTML and then customizing that
HTML with CSS.Right here, I can see I have this h1
selected. Now, I could jump over here and select h1 and start
changing it so it floats off to the left but that's gonna do it for
every h1 so that doesn't give me enough flexibility. What I
wanna do is I wanna create a new container off to this
side, some sort of Aside and give it a class that makes it float
off to the side.
This is gonna make it more flexible for all of my pages so it
might seem like some work but it's gonna setup my whole
site to make it real easy to develop. With h1 selected, I want to
insert an Aside. Okay, selecting Aside, where do I wanna put
it? I wanna wrap it around the h1 so I'm selecting Wrap. There
it is, there's my Aside. Now, keep in mind I'm in Live
view. Alright so, again, I can customize Aside and add certain
properties to it but I'd rather create a new class because I wanna
have an Aside that floats left, so asideLeft is what I'm typing in
here,.asideLeft.
Getting enter, saying "Hey, you're making a new class, "where
would you like to put it?" I wanna put it inside of this
Styles.css so hit enter again. What does it do? If I go over here
to my CSS Designer panel, ah, that's what it made right
there, that specific class, alright? Now I can start to customize
it. In fact, let's go ahead and make the width a certain
percentage, let's make it like 30%. Okay, so the width is gonna
be 30%, there it is.
Let's give it some margin on either side because we do have that
margin right up here, 5%, so we will type in 5% down here and
let's give it2.5% on the right side. So 2.5% for this one and
2.5% for the next one. Alright, scrolling down, let's just change

17. the float to float left and we're about halfway there. This is
great, so I can use this .asideLeft or call it left or whatever I
want, anywhere I want on any item that I want.
Let's jump in and let's do this for this h2 as well, so I'm gonna
do Insert and this is the main section so we're gonna select
Section. We're gonna wrap it around that h2. There it is. In fact,
let's take a look at Code view, I'm gonna go into Split
mode, taking a look right down here,here's my aside that I've
added, this aside class="asideLeft." Here's the section, notice
how the section is wrapping around the h2 but I actually wanna
wrap it around the paragraph too, so I can just select it and drag
it down like that and get rid of that line break there.
Now, it encompasses everything here. Alright, now that's setup
it's the same process, let's add a sectionRight just like that, put
it in that same CSS file, there it is. Here's my sectionRight, just
make sure you have it selected. Just because it's selected
here doesn't mean it's selected over here, so select
sectionRight, same process let's say give it a percentage value
of 50%, let's give it some margin off the left side, 2.5%and the
right side 5% like that.
It's still over there on the left side so we just scroll down, let's
have it float to the right. And that's exactly what we want. All
in all, that looks pretty good. I can go back to Live view, I can
see my content, I can see these new classes that I've made and
they're not tied necessarily toany of the Asides or
sections. Now, keep in mind when it comes to selecting things, I
encourage you to either go into Split mode here or Split
view and select things that way or what you can do is you
can do a right click and select Parent Tag to get that Parent Tag.
All in all I'd say that looks pretty good and the great thing about
this is it's actually somewhat flexible or fluid. As I grab this
sidebar, I can see how that content is fluid and it's gonna work
so far for desktop and possibly tablet. Very powerful, what you
can do with HTML in combination with CSS when it comes to
layouts.

18. Exporting images from Photoshop: Transcript
- You can really do a lot with CSS when it comes to styling
your content, but chances are you're probably gonna need to
insert some images,which is what I wanna do now. These
images are actually coming from this Photoshop file, this
PSD. And see them right here? I encourage you to check out
what you can do concerning Extract Assets in Photoshop. But
all in all, I wanna go beyond that. Because what if you don't
have Photoshop but you're still using Dreamweaver? Well, you
actually have what is called Extract in Dreamweaver as well.
So I'm gonna open up the Extract panel. You can see it right
here. You can see this is a PSD actually in Dreamweaver. So
this is a PSD, and this is a web browser. Very impressive. All in
all, what I want to do is I wanna select Upload a PSD, and I
wanna upload my own PSD. Now, if you do have access to the
Exercise Files, I'm just jumping in here to this
Design.psd. That's the one I'm opening. If you don't have access
to it, feel free to use your own PSD as well. And here it is.
Here's the design in Dreamweaver. You can see the content. In
fact, what I can do now is I can access this content and start
putting it in my site. But not only that, I have access to Styles
and Layers. So you can see the backgrounds right there, see the
logo right here. All right, so I can minimize that. Say for
instance, for this background I can easily select it. Again,
anywhere I can select this logo and I can extract this particular
asset.
It's called bkgdHome. I'm gonna browse and put it in a
particular folder. It's gonna go in my Website folder. I'm gonna
make a new one called images. It's where all my images are
gonna go. Select Open. And check this out. It's gonna put it in
that folder, it's gonna call it bkgdHome. I want it to be a
JPG. Selecting JPG, and I'll make it about 30% quality, since
it's so large. Then I'm gonna select Save. Notice how it's saying
Extracting Asset? Well, I can go right over here, you can see
my images folder.
Just give it a refresh. And there it is. Says asset downloaded

19. successfully, there's my background. All right, I can do this
with a number of objects, in fact that was that bkgdHome. I can
also go in the Layers panel and start to do the same
thing, downloading it to the same folderas a JPG, 30%
quality, and we'll see that asset pop up over here as well. So
this is nice. It doesn't require me to have Photoshop, although i
can use Photoshop as well.
This just sometimes makes it easier, especially if you need to
grab a quick graphic. Scroll down. And note that this design.psd
could be anything. It could be your navigation.psd, could be all
of your assets .psd. Could be anything. It doesn't have to
necessarily look like your, the page that you're creating. But at
this point this is helpful. I'm able to I'm able to extract all of
these assets.
Let's just double check to make sure that one is in
there. Contact was good. This About one is not in there. So
we'll just hit refresh, and just make sure it's in there. 30%
quality, selecting Save. Right over here we can hit refresh, and
there's all those images. Also, even for the navigation, so let me
close that Layers panel, and if I set this to 100% and just scroll
over, you can see these assets as well.
So I can come in and start to do the same thing. Now, these
actually need to be a PNG file, and I need to make sure they're
in the same folder, but it's that easy. Okay, so I want this PNG
to have transparency. And notice there's a number of other
things you can actually extract as well. You might be noticing
that. Some CSS and text. I'll point that out in a second, because
you don't necessarily need to retype the text that's in a PSD, you
can literally copy it, or even the CSS.
So placing that there, selecting Save, extracting that asset. You
start to see them all in here. So there they are, About, Contact,
Portfolio. The only one I need is the Home one and then the
logo, because you could even go beyond this. The reason I'm
doing this right now is I actually don't need these images just
yet, but I do need this logo right here. So we'll wait for this
Home icon. There it is.

20. I need this logo, and this is the great thing. I can literally take
this, take this logo or any asset, and say for instance I wanna
put it right here,again, right here in place of this
text. Okay? Keep in mind let's open up the CSS Designer
panel. I wanna place it right in there. Well I can literally take
this and drag it over. And wherever I see that green bar is where
it's gonna put it. And it can actually nest it inside of
elements,but I wanna place it right there. So I'm dropping it
there, and now it gives me image source, so I can say
images/logo.png.
And that's where it's gonna extract it to. So I go to the Files
panel, we'll give it a second, wait for it to export out that
particular graphic. It's pretty large. There it is, refreshed and
there it is as well. Puts it where I want it to go, and now it's
right there. Okay, and obviously I need to resize this, and I can
go ahead and minimize the Extract panel. Open up the
Properties panel. For any element that you have selected, such
as this particular graphic right down here, here's where you can
type in, say 250.
Maybe that's as big as I want it. Okay, so that's pretty good. I
can see that text down below. Well I don't really need that
text. I can start deleting that text just like that. Okay, I wanna
make sure this is in there, by the way, so I'm just gonna grab
it, in fact I can look by going to Split view, and I can see that
it's not quite in the header. So what I wanna do in that case is
just cut that particular line, and paste it right in here.
That's where that text was. There it is. All right, last thing I
wanna do for this header is just center this image, cause it's
kind of bothering me that it's not centered. So I'm gonna say for
every element in the header, I want it to be centered. So here's
my header, and all I need to do is go over here to Selectors, hit
that Add Selector, and now it's gonna give me the chance to
make a header selector. There it is. And as I scroll down, I can
center it just by using text-align.
All right, so that's all I wanted to do. I'd say that looks pretty
good. I do have my image right in there, and all of my other

21. images ready to go,right in here in my images folder. So I
encourage you to use the Extract panel, not only for images,
keep in mind at any time if you wanted to take even the CSS for
particular elements, you could say, "Hey you know
what? "Select all," and you can copy that CSS. or if it's text, it's
just a matter of selecting that text, and you can select Copy
Text. So I encourage you to use the Extract panel.
It's gonna help you out a lot, and bring you well on your
way. And the next step for this design is to add that background
graphic and some more elements.
Adding and manipulating images: Transcript
- When it comes to adding images, you can use the Extract
panel and load up a PSD and literally just drag elements
over, that's one way to do things. Then you also have the Insert
panel right up here, Insert Image and you define where you
wanna insert it and you can drop it in.As you can see, I actually
already have all of images squared away, I even have my logo
right here but let's take a look at something maybe a little bit
more complex. That's adding an image to the
background. Notice as I click on that background, it highlights
this body tag.
Let's go into the CSS Designer panel and just take a peek at all
the different selectors. There it is, there's the body tag. That's
what I want to happen, I want that background to cover that
whole body tag. With that selected, all I need to do is jump
down in the Properties panel to the background. Right down
here, here's the background. Sure, I can give it a color but at
this point I want to actually browse to an image that I already
have created.
Here's the images and I'm gonna select bkgdHome.jpg. This is
also in your assets folder as well, under design assets. But
really, I'm pulling this from my images folder because this
actually came from a PSD. Selecting Open and there it
is. Notice how large that book is, it actually doesn't even look
very good. Overall, what I wanna do is wanna adjust the

22. background size and I wanna take it from auto to actually cover
the entire background so it fits in there.
So the image goes from edge to edge but it never reveals say the
white color of the background. We can even take a look at this
as I scale it down, you can see how it adjusts, it's always gonna
cover the page, alright? You can scale it down, you can see how
that looks. Also notice how the background is actually
attached. Since the background's attached to this text, what I
wanna actually do is I wanna make it fixed. Again, I think that
would just give it a better feel especially for longer pages.
Going back down there to that same area, background-
attachment, currently it's set to scroll because it scrolls with the
content but I wanna change it to fixed so it doesn't scroll with
the content. Now when I scale it down and you get this nice
depth of field as I scroll it up and down.Now, any time you do
this, notice how you're gonna have some issues with the text
potentially not standing out on the page. You will have to make
adjustments to your content as you start adding images just like
I'm having here.
In fact, if I select this paragraph tag, I can select the Parent
Tag to encapsulate all of that information. At that point what
we're dealing with is this .sectionRight. I can select that
.sectionRight and do the same thing but rather than giving it a
background image, I can give it a background color. In this
case, I could just simply change that to white and now it's white
and squared away. As you add images, you might need to
make adjustments to your content even in, this case, for this h1.
Again, I'm gonna select the Parent Tag, you can see that
content, a couple of things I actually need to do
here because I'm noticing the.asideLeft is what I want to
select. We can see the width is 30% and I can actually go up to
like 35% and still be okay. That's one adjustment I wanna
make and I want this text to standout more. Again, that's my
.asideLeft, that's the container, but I wanna deal with that h1, so
selecting h1, coming in here, not only to these properties, sure I
can increase the size to 2.2 if I want to, 2.5 potentially, just

23. make something nice and large, maybe even 3.
I'm kind of digging that, I like how that's looking. I can adjust
that content at any time later if I want to, let's go 2.7. But at
this point, I can just give it a drop shadow on that text. So
coming down here, text-shadow, you can see a little bit of that
text-shadow for that DESIGN SHOP.That graphic that I've
pulled in, well I wanna do the same thing here, let's make it
white, just like that and let's make sure we offset it. I'm just
kind of scrubbing, make it, again, bring it as into the negative
numbers and offset it kind of like that just to make it look kind
of cool.
That's all I need to do, I'd say that's pretty well adjusted so
far. When it comes to adding graphics, it's just a matter of using
Insert Image using the Extract panel over here and then really
adjusting it based on the CSS. Just be mindful of what's
selected and then start adjusting the content.
Lesson 2: Creating a Website
Creating your first website: Transcript
- Now the first thing that's gonna happen when you launch
Dreamweaver, is you're gonna be given this Welcome
screen, which is great for learning. You're gonna have access to
different tutorials and new features, you get the idea, and I'm
just going to close that. Quite frankly, you can always get back
to it right here under the Help menu, and in fact, I just wanna
get us familiar with the interface to begin with. Now, notice
there's quite a few panels over here, off to the right side. Files,
Insert, CSS Designer, Snippets, Assets, all sorts of panels.
And honestly, I don't need all of these right away. While I can
pull out, say for instance, any panel that I want, like this Assets
panel, not gonna need that right away, and I can close it,
okay. Same thing for Snippets, pulling that out, well, I'm not
into Snippets yet, I can close that, and notice how I can always

24. access that through the Window menu right here, okay. But I do
know I need the Files, the Insert, and the CSS Designer
panel. Very powerful, those three, probably the most important
ones.
This panel right down here, this is the DOM, or Document
Object Model. This is really cool, will display the structure of
my HTML pages. I like it, I wanna keep it there, but I actually
wanna minimize it. So you just double-click on that grey, and
we can minimize that. I just like making it look nice and
clean, and I can even minimize that entire panel as well. Right
over here, on the left side, if I click this Expand Panels button
right there, this is my Extract panel right here. I'm not gonna
worry about this Extract panel, I'm just showing you what it
is, I'll just minimize that, but that's how that looks, if you have
things minimized to icon view.
Okay, so you can do that at anytime, with any of these. Alright,
so let's go ahead and create our first file. I'm gonna go to File,
New, and I'm gonna start with a New Document, it's gonna be
an HTML document, it's gonna be absolutely blank for the most
part. Notice how you can create an empty Bootstrap document
as well, and once you get more proficient at
Dreamweaver, notice there's different types, but you're also
given starter templates. So you can jump in and you can
start with a Responsive starter template if you want to, plenty in
here.
Bootstrap Templates in here as well, okay, so that'll help you
get up and running faster. I'm gonna start with a New
Document, HTML, HTML5 to be specific, clicking Create, and
now we're on our way. Here's my Untitled document right
here. Notice how it has Live view selected, and this is actually a
browser running in Dreamweaver, which is just wild, so if I
type in Google for instance, I'm actually gonna get Google's
homepage, you can see it right here, okay. Pretty impressive, so
I can type in anything I want, and I'm just gonna jump back to
my original document.
But that's really cool, how I can actually test my content, as if

25. I'm testing it in a browser, without even viewing it in a browser,
okay. Next up, we have Code View. If I select Code View, you
can see my current HTML code, just sort of not a lot going on
here, but also what you'll see is these little pop-ups. And these
are new feature guides okay, so you can see that it's telling me
about Emmet, which is like shorthand for code, I'm like, that's
great, I can copy it and use it, whatever.
I'm gonna close that though, don't really need it, but if you ever
need to see that again, or any of the feature guides, you can
Reset those New Feature Guides right up here. Alright, so lastly
we have Split View, okay. Split View gives me my Live View at
the top, and then Code View beneath, okay. So I can jump in
here, and say for instance, for the body, I can start typing in the
title of the page, okay, something like that. Or, actually I want
it to be the header.
The header of the page, and even as I change it, it changes
here. And, conversely I can jump in and I can say this is the
header 1 of the page. Okay, as I've changed that, you can see
that it changes right down here, okay. And that's how that
works, but notice how I can't really make anything new down
here. You know, I can start to maybe add to this, if I double-
click, it will give me this sort of gold or orange outline,it means
that I can start typing or adding to it, but you can only add to
what you already have there, or edit what's already there in Live
View.
If you wanna add more content, in this space here, you can
change it to Design View. So when you want to design and
you're adding lots of content, that's what you wanna switch it
to. Notice how it says Design View. This might not be a clear
representation of what it's gonna look like in a browser, but I
can jump in and I can start to, in fact, watch this, when I hit
return, look what it does, it actually adds these paragraph
tags to my content. So just be aware of that, this is a non-
breaking space, is what it's added, okay, so right there, that's
what it's added, and I can say, the header 2 of the page.
Just like that you can see it's added right down there. I don't

26. want these to be paragraphs though, that's the thing, that's what
that
paragraph tag is. Well, I can select if if I want to, and there's a
number of ways to do this, but if I ever want to insert content, I
can go up here to the Insert menu. We have all of these HTML
tags I talked about earlier. Okay, so I can jump in here, and I
want this to be a heading, a header one, or H1, selecting
H1, and there it is, it's now an H1 right over here.
Okay, I could do the same thing for this header 2, but keep in
mind, with this Code View, I could just as easily jump in and
say h2. Now if I change this at the beginning here, the opening
tag, I also need to change it at the closing tag, and that's why
it's giving me those red numbers, saying hey man, you broke
something. Not a problem, h2 there, get it all squared away, and
there's my header 1 of the page, and my header 2 of the page,
okay. So that's sort of a quick crash course into the interface, as
well as changing content different ways, which we're gonna be
doing a lot of that.
Not to worry, but all I wanna do now, is save this file. Now this
seems simple, but this actually pretty important. I'm gonna do a
Save As, and I'm gonna save it to the 01 Final folder, which is
Chapter 02, 01, my 01 Final folder, and I'm gonna call this
index.html. I can call it index.htm, home.htm, but pretty much
the standard is index.html as being your homepage. Keep in
mind, where you're saving this file, 'cause all of my graphics
and everything need to be in this same folder for this site, if you
will, but just click Save, and we're ready to go, and congratulate
yourself on creating, albeit very simple, but your very first
HTML page.
Adding HTML5 content: Transcript
- Now that I have my very basic HTML page created I wanna
start adding content to it. And if could just take a look, this is
what we're going for. This file, I'm just opening up in
Photoshop but this is what I'm designing. So we're gonna have
obviously some sort of heading right here.We have

27. navigation. We have right here, maybe a heading one, heading
two, paragraph text, and even a footer right down there. So
that's the content I need.
Notice I don't really have anything. Well, luckily if you do have
access to the Exercise Files, just go to those Exercise
Files inside of the Assets folder you'll find that content
HTML. If you don't have access to the Exercise Files you can
just type in any text you want. Just try to follow along with
your own content. But notice, as I open this up, look. There's
actually no structure for this homepage. You can see it right
down here. This is actually the content I need so I'm actually
going to select it.
This content, everything from underneath the homepage down to
the Copyright. All of that information. Notice how there is no
structurebecause HTML adds structure and there's no
HTML. So, from there, copy that content. You can close that
file now. Go back into your index HTML. And I really don't
need either one of these but I'm gonna work in code view right
in place of those.
I'll delete them. And right in here I'm going to Paste that
content. Okay there it is. As soon as I click up here, you can see
that mess of unstructured content that we now need to
structure. So this is all withing my body tags and what I wanna
do is I wanna select Paul's Design Shop right here okay? And to
insert HTML go to the Insert menu item. And since this is going
to be part of the header I'll select Header. Just like that.
And you'll sometimes get this Insert Header dialogue box asking
you to define some classes, some different things. Don't worry
about that, just click OK. It'll just say header right there. Next
up is this navigation, Okay? Home to contact. Insert, right down
here, Navigation. Selecting Navigation. We won't worry about
defining any class or ID. But look at what's happening now. It's
starting to put this in boxes if you will. And they are, they are
containers, okay? You can see them right here.
It's starting to add some structure. If you don't see this dotted
lines just make sure you're in Design View and not Live

28. View. But this is what Live View looks like. Going back to
Design View, since we are designing this. Now lets get into this
more visual stuff. Building Brands That Work. Well that's my
heading one. So Insert, Heading, H1. This is important because
search engines will look for an H1 tag. So we wanna make sure
that is my H1 tag.
Handcrafted Design, lets make that an H2. Just like that and you
can see that it's starting to give this a default style. Even right
down here, for this text right here. That looks like paragraph
text. And you would be right. Insert, Paragraph. Just like
that. Adding that structure, you can see it right up there. And
then lastly we have Copyright right here. And I will make this,
you guessed it, a Footer. Now we're not gonna style it yet but it
does give me these dialogs saying "hey you wanna add some
style to this?".
I think it's a great idea. Just not right now. I'd say all in all that
looks pretty good. Paul's Design Shop. Really, these two
containers could almost be one. And I wanted to show you that
you can also move content around, okay? So you can see this
header right here. In fact, I can actually have nested
elements. So, instead of the header just being Paul's Design
Shop, I can make this whole portion from the header from this
text to the Nav.
So I can literally take this content and move it right down
here. In fact, I can hit Return just like that. Okay, so now, those
two items are part of the header. Exactly as I'd want it to
be. And keep in mind, if it helps you, you can add spaces in
here if it makes things more legible for you.In fact, a lot of
people would even do, say a Tab for instance to see how than
content is nested. But all in all, I'd say that looks pretty good.
You could always switch over to Live View to see how it looks
and see the various Tags, the Headers, the H1, the H2. If that's
set up just finejust go ahead and save it. And our obvious next
step would be to style this content but before we do that, we
have to set up a local site so all of our graphics and content
exists in one area. And that's our next step.

29. Creating a local site: Transcript
- Probably one of the most common mistakes people make when
they get into web design is where they're storing their files, and
having files relative and not absolute to where the site is, and
I'll explain it here in a second. 'Cause really what you need to
do is you just need to set up the local site. Okay? And I'm
gonna do that right now. So what we're gonna do is we're gonna
go right over here to the files panel.And always go to "window
files" if it's not open. Select "manage sites". Okay? So you
won't see any sites in here, but eventually after a while,
hopefully you have a lot.
And what I wanna do is I wanna create a new site. This is my
site, it is Paul's Design Shop. Giving it a name. And this really
is the most important thing that you need to do, set up a local
site folder. Okay? This is the folder where your entire
site's going to live. And in this case, I'm gonna go to my
desktop and create a new folder called "Website". Okay?
There's my folder called "Website", on my desktop. And that's
where all my files are gonna go. Okay? So any assets that I use,
I wanna make sure are in this folder, it's gonna be a self-
contained website.
Now, if you do happen to be using say for instance, or have
access to the exercise files, all you need to do is go in to that
particular folderand take that particular file, and just copy it
over to your website folder on your desktop. So just replace
those files if you get behind or whatever the case may be. But
this is the root folder, that's where all my graphics are gonna
go, my entire site lives there. And we'll do other things in this
dialogue, but all you need to do is click "save", see it listed
here, click "done".
Now look at how my files panel has changed. And see right over
here, it gives me my Paul's Design Shop. There's nothing in
there yet, because what we need to do is we need to save this
index HTML to that folder. So you can do a "save as". Save it to

30. the desktop into that website folder. Select "save". You will get
this message saying to "update links?", 'cause like I said, you
could have links that are relative to the current document and
that's why it's asking you if you wanna update them.
If they're relative, well then it needs to point to that new
location. Alright, so you can say "no" or "yes", it really doesn't
matter 'cause there's nothing in here. I'll click "yes" just to be
on the safe side, and we can go right over here, click "refresh"
and you'll see it right here. So we're gonna have an images
folder, CSS folder, all sorts of fun things over here, but that's
why this files panel is so important. But the great thing is our
site's set up and we have comfort in knowing all of our
content is going to exist in this one folder.
Lesson 1: Understanding website design
Understanding the Internet and websites: Transcript
- I'd like to start off by giving you a high level overview of how
the Internet and websites work. Starting with the
Internet, otherwise known as the World Wide Web, and all it
really is just a global system of computers that are all linked
together by a network. This network then carries data, usually
in the form of web pages, so you can have data on one
computer shared, really, with the rest of the world, so it gets to
be really powerful. And really, the most basic form of
something you wanna share is probably gonna be a web page.
So, a web page is really just a document with formatting
instructions, called Hypertext Markup Language. This HTML is
then rendered by web browsers,giving the content
formatting, and to be honest with you, it's actually pretty easy
to read. If we just take a look at this sample HTML, you kind of
pick apart what it says, sure there's some interesting characters
in there, but overall, I could somewhat read this, but the great
thing is, is that I don't have to. Because web browsers read that

31. content, and display my web page exactly how I want it to be
displayed, even when you're on a mobile device.
Now, putting this content together could be complex, but to be
honest with you, there's Dreamweaver CC, the 2015
release, really just does make this easy, 'cause it is a web
development application that makes it possible to easily create
robust websites. So everything from a simple web page, clear to
a very advanced website. So overall it's gonna enable us to
create this site, as you can see here, and then add images to it,
whatever we wanna do,format it the way we want to, across,
say, desktop, to mobile, to tablet, and we can look at the
code, or we don't have to worry about the code in
Dreamweaver, 'cause Dreamweaver gives us that option.
And once you have that content created, then you wanna get
into publishing the website. And how you do that is you
basically publish, or upload, your content to a web
server, which is really just a computer that's connected to the
web, or the Internet. So you can easily do this as well through
Dreamweaver, just taking that content, clicking the Publish
button,and as long as it's setup correctly, you can then make
your site available to the world. Now as far as the end user is
concerned, how do they access this website? Well, it's just
accessed through a web browser using a web address, so it could
be paulsdesignshop.com, for instance, or through a search
engine where they type in Paul's Web Shop, or Design
Shop, and this content can be available everywhere.
So again, you can go onto Google, type in the URL, it's gonna
fetch that information from that specific server, and what gets
returned is going to bethat web page, or website. And since this
is connected to the Internet, it is our World Wide Web, all these
connected computers, all of my content connected and
available anywhere that there's access to the Internet. It's very
powerful, and Dreamweaver makes this really easy to do.
Planning and designing a website: Transcript
- Now it's easy to get excited, and you'll want to dive right in to

32. creating a website, when really you need to take a moment and
start planning out your website from a couple different
angles. Quite frankly, you need to keep in mind the business
requirements, the user requirements, technical
specifications, and design requirements. And starting with the
business requirements, well, it's like what are you trying to
do, what's the goal of your site? Is it to sell something? Is it to
show off your work? Is it just for fun? You need to define that
up front, you'd be surprised how many people don't do this.
And from there, we wanna keep the user in mind, honestly the
whole way through. What are they trying to do? Well, can they
access the site? Is that the first thing they can do, if they type in
say, Paul's Design Shop in Google, are they gonna get my
site? Okay, so is it accessible, is it uploaded correctly, all that
fun stuff. Does it meet the audience's needs? So when they go
there, is it the content that they expect. Okay, and we just need
to be true to the site, true to our content,and the end user will be
happy as well.
And is it easy to use? So all in all, it's fun making cool
graphics, and cool navigation, but is the navigation easy to
use? Is it easy to also use on a mobile device? And that brings
us to technical requirements. And this comes down to it being
browser and device compatible. Is it gonna work across
different browsers? And across different devices, from tablet, to
mobile, to desktop? Is it formatted correctly for those different
devices? It's a big thing.
And is it optimized for these search engines? As they type in
Paul's Design Shop, is it going to come up? And not only that,
does the content download fast? Okay, so it's easy to just work
on your desktop and make a beautiful site, but this is where
testing comes into play. And this really does bring us to our
design requirements. Is the design appropriate for the
content? If you're selling some fun items, let's make sure it's a
fun site. If you're trying to be really straight-laced, let's make
sure that design reflects that, everything clear down to the type
that you use.

33. Does it fit on the user's screen, from desktop, to mobile, to
tablet? Okay, we wanna keep it simple, and clean. We wanna
make sure the navigation is easy to learn. And really the best
thing to do here is just hand it to a friend, on an informal
level, and just see how they experience the site and the
content. And make sure that the text and links are legible, and
you can differentiate between the two, it's easy to tell what's
text and what are links. You do all these things, keep all these
things in mind, and I have no doubt you'll make a successful
site.
Just like this example you see here, you get clear notification of
where you are, Paul's Design Shop. You can see okay, it's
designed well, quite simple and easy to read. I can see the links
versus the text. I have a nice hierarchy of elements.It fits on a
screen just fine, which is gonna be 1280 by 800, okay. Don't
worry, content can be longer, but the important content is
within the first 800 pixels, okay and that's for desktop, and then
also we have mobile.
We wanna make sure this content fits fine just on mobile and
that content is easy to read.
Fundamental of HTML: Transcript
- I'd now like to talk about the Fundamentals of HTML, your
foundation of the web. And really, what is HTML? It's
hypertext markup language, that's what it stands for. It's really
just a language for describing webpages, and just consists of
plain text that you can actually read pretty easily. In fact, right
here we have text, you can see that it says "title", and this text
is just surrounded by markup tags in angle brackets. Okay? So,
this is the HTML, and within that tag you're gonna have some
text.
And this basically tells the web browser that the title of the
webpage is "My Web Page". Now that was just a simple
example, and there's lots of common HTML tags that you might
have seen. There's title, there's h1 through h6, which stands for

34. headings. We have paragraph text, we have href which is just a
link so it's gonna give it that underline by default, and if you
wanna insert an image we have img src, so these tags have been
around for quite a while, and we can go on from there and talk
about HTML 5 tags.
Couple years old now, but in general, it's really clean and easy
to understand, 'cause you have a header for a webpage, well the
tags are header. And you have nav, section, footer, all this stuff
is real easy to read. Even if you wanted to include a video and
audio, it's through those various tags as well. Now that we
understand tags, let's take a look at three parts of an HTML
document. So here's the HTML, you can see the tags, and really
at the top we have the HTML versionof the document,
whichever HTML it conforms to, if it just says "HTML" it
means "HTML 5", 'cause what HTML 5 did is it came in and
like cleaned up everything.
And next up we have in the head tags is the functional or non-
visual content, just like that title I talked about earlier, well
that's the title that goes right in the web browser bar at the
top. And then you have the body, so this is all that visual
content where you're gonna have the text for the page, the
images, all that good stuff right in there. And if we even take a
look at an actual webpage you can see how it's broken
down. Again, the doctype at the top which is HTML, non-visual
content, keywords, things for search engines, and then you can
get into the body which is you know, an image, and some other
text as well.
But the great thing is, is we don't have to just type all of this in
because a Dreamweaver makes HTML creation easy. And what
Dreamweaver's really great at is working with CSS, which is
what I'm gonna talk about next.
Understanding CSS: Transcript
I'd now like to give you a good understanding of CSS because

35. honestly I think it's the most exciting part about the web
because it enables me to style the web, if you will. And what is
CSS? Well, to put it simply CSS means Cascading Style Sheets,
and it's really just the language that's used to describe the
design, the visual characteristics of your HTML. And so it
controls all of these visual properties of your content, even
including animation.
Just a quick example of what CSS looks like. We can see it
here, we see our h1 tag at the bottom, Passionate about visual
storytelling. Well that text is going to be styled by the CSS
above so you can see it's going to make it the Lobster font, give
it a font weight, center the text, change the color and give it a
certain text shadow, all from CSS. Now the benefits of CSS are
more than just styling content because the benefits of CSS
really allows us to separate the visual properties from the
content so you don't have, say a text content intermingled with
CSS, you can have that CSS separate, say for instance at the top
of the page and then it can affect all of the HTML elements on
the page.
And the great thing is it can be internal or external from an
HTML page, so again you can have that content, that CSS
content at the top or in an external page entirely. Now an
external CSS file can be used on multiple HTML pages, which
is really powerful, so again you have internal CSS, which is
again that content at the top, it's affecting everything on that
one HTML page but then you have that external CSS file. It's
linked, okay, so the HTML page sort of pulls in that CSS page
and it affects that HTML content.
Same thing if you have another HTML page that is linked to
that CSS. So it's really powerful, two pages using that same
CSS page or file as a source. And that's really one of the
advantages, is it's going to be easy to update. We update that
one CSS file, it's going to change our entire site, which is
great. It's going to mean it's consistent across all of those pages,
and not only that we're going to get a smaller file size since
we're only making reference to one document in that case.

36. Now let's take a closer look at the actual structure of the
CSS. So really it consists of two things, the selector and the
properties themselves. So you have your selectors, which
identify the element and then we have the properties, which
contain those specific properties and values. So again, if we
take this simple example, we have all these various
properties and you can see the selector at the top, which is that
h1, and then the properties down below, and then you can use
that anywhere and it can really be applied wherever that
selector is used, okay, so in this case for this h1, Building
Brands That Work, okay, it really isn't dealing with the style of
that text at all but if we apply some CSS for that h1it's going to
change that content appropriately.
And not only for this h1 but everywhere on the page where I
have an h1 or h2 or h3, you get the idea, and the great thing is
that Dreamweaver makes this really easy when it comes to
CSS. In this specific case you can see we have that h1 selected,
we can see down below the actual HTML, Building Brands That
Work and then off to the right-hand side we have the h1 tag
selected and we can add or remove or change any one of those
properties that we want very easily, in fact, in a visual fashion
if we want.
And this CSS can not only be applied to say our desktop version
but even for mobile, you have that sort of control when it comes
to Dreamweaver.
Access Lynda.com using the link provided and search for the
following course:
"Creating a First Website in Dreamweaver CC 2015" with Paul
Trani
Review Lessons 1, 2, 3, and 4
Submit a 350- to 700-word paper discussing what was covered
in the lessons to the Assignment Files tab.