Bootstrap in Dreamweaver for beginners (Part 2)

Hello everyone. Uh, in part one of this

video, uh, we made really basic responsive

website using Dreamweaver. It was a very,

very basic structure. So, today we're

going to stylize it using css, and then

also we're going to develop,

um, hyperlinked multiple pages in

Dreamweaver.

If you have missed my part one of this

video, uh, please watch it first. It's

gonna be more helpful.

So, um,

don't forget to subscribe my channel and

set the notification for my latest video,

and let's get started.

Okay, so, this is the where we stopped, uh,

last time, so basic structure.

So, let's take a look.

First, let me preview it on our browser.

So, this is what we did.

Okay, so, one single page,

uh, nothing special,

but it is responsive.

Okay, so, um, first we're gonna change the

background to color,

solid color with the gradient,

or the actual jpeg file images, tiled

image, so let's do that. So, first I'm on

my

index.html and then

we're going to make a styles

stylesheet, cascading stylesheet.

So, first,

go to

your css designer panel.

Okay.

And then

we're gonna make a new css

style file.

Create a new one,

and just to name it, it could be any name,

but, I'm normally style.css.

And ok.

So now,

see that? We have a new style.css file

attach it already.

Now, let me change the background color

first.

So, now in your dom

panel,

I'm gonna change

the background color

in your the container fluid, that's the

the first one we created last time.

Now, go to your selectors panel,

click on the plus.

You see the container fluid.

Add it,

and choose that.

Now, in your properties panel,

we're gonna change your background to

color first. So, background.

If you want to change the solid back, I

want to have a solid background color,

just click here, and choose color you

like to use.

Maybe something like that.

Anything's fine.

Uh, since this is my favorite, um, orange

color,

I'm gonna

copy this xcode.

Okay.

So, see? My background the color is

updated.

So, to view this, uh,

as an updated version, go to select your

style.css tab.

Save it.

Save as.

Just to make sure, in your root folder,

you see that your style.css is already

added to your root folder.

So save it, replace it.

Let me go back to inbox.html by source

code.

I'm going to save it again just in case,

and let's preview it

on my google chrome. Oh, sorry,

not this one.

Index.htc.

It is all already updated. So, this is the

how to change, the, uh, uh,

the solid background color.

Now I want to use,

uh, where's my Dreamweaver?

Uh, some tiled image, so, um, please

download the images the, uh, images folder

I, uh, provided in my, um, my description.

So, um, you will see that there's a one, uh,

background image called the pg.jpg. it's

a kind of a small file, square image.

So, what we're going to do, let me show

you that image first. That is

pg.jpg, this one.

Okay? So we're going to tile it for the

background. So this could be any image.

So, now same thing. Still I'm on the, um, my

style.css selected container fluid,

this time, background.

Instead of using this background color,

background image,

let me scroll down a little bit,

url

is,

I'm browsing

from my root

and pg.jpg.

Open it. See?

Let me save my css style stylesheet

first.

Save it.

So, it is updated already. Let me check

and refresh my page.

See?

So I have a tiled image.

Next one,

this time I'm going to change

my background to color as a gradient

color.

So, uh, in my background

I don't want to use

that image.

Instead of that,

you will see that the gradient panel,

click there,

I'm gonna have some really subtle, uh,

gradient, so, remember that I copied the

hex code. So, go to hex,

paste that color.

I'm gonna paste it another same color on

the bottom.

Command V, and let me add a new color in

the middle.

That's going to be white.

Just like that.

So, my background gradient is

applied. So, go to file,

um,

select your style.css, update it, save it,

and let me check

my web browser. Refresh.

So, I have a gradient background. I think

this looks better.

Okay.

All right, so, next, uh, this time I'm gonna

change the background color of that

the nav bar on top.

So, back to Dreamweaver.

My, uh,

index.html.

So, let me

make my, um, the map simpler.

So, under my container fluid I have a

container,

and under container,

the very first one was my nav bar.

So, that's my navigation bar on top.

Same thing, same way.

Check,

uh, your sources is going to be style.css,

and also I'm going to add a new

selectors,

which is my nav bar,

by clicking on this plus button.

So, it is added.

See?

So, select this selector,

background color.

I'm gonna have a background color as a

gradient this time as well.

So, let me scroll down,

gradient option, choose it. I'm going to

have,

on top,

black.

On bottom point,

kind of a dark gray.

Like that.

So, it is applied.

But we can,

let me change update my style.css.

Command S, file,

just to save it.

Let me check.

update it. So it works. But, um, since my

background in the nav bar, the background

is kind of really dark,

so this black texture doesn't work well.

So, I'm going to update it. So, back to my

index.html,

and select the, just maybe one of them,

one of your

menu.

I'm choosing my about button, my second

one,

and you will see that nav link is

um, highlighted.

Under style.css,

I'm going to add a new selector,

and that is added here.

Choose that, and just let me change the

text color

to

that

orange I made.

I copied.

So, it is updated.

Let me choose my style.css again.

Save it,

and let me check.

Refresh the panel, my web browser,

so it is already all updated.

Okay, so it's getting better.

And next thing is this nav bar. That's

the placeholder, uh, for the logo.

Uh, so we have two logos, on top, on the

nav bar, and then the bottom on the logo,

on the footer.

So, let's do the kind of same thing. Go

back to here,

and then select

your nav bar image.

You will see that in your code area,

there's a nav bar.

We're going to replace this text

with an image, the logo.

So, delete the nav bar text. Go to a

insert tab,

choose the html

option,

and let's insert

the image,

and choose the logo.

Let's choose the logo, the png file.

That is that.

Open it.

It goes there. It's pretty big. Once it is

imported to your nav bar,

click on this dm, drop down menu, there's

a hamburger button thing.

Then

i'm going to make it smaller.

Uh, make sure you the, uh, constraint chain

is linked.

Let's try 200,

and make image responsive.

Yeah, I think that looks good.

Okay, let me do the same thing

on the bottom of my footer.

Okay? So, um, let me scroll down.

I'm gonna choose my footer

here, and go to css designer.

Okay?

And then let me add the other, my footer,

as a new selector,

by clicking on this plus button.

So, footer is selected and the background,

I will use the same,

um, kind of a gradient.

So, from

black

to

dark gray.

Maybe somewhere like that.

Okay?

And then also, this logo,

which is this,

let's see the logo.

Delete the logo text

like we did on nav bar.

Go to insert,

html,

image,

and import,

uh, the logo.

That png thing.

See?

I think it is okay size. I may just keep

it as it is,

and then also

the text.

This one.

It is kind of, um,

too, um, maybe

the color is almost kind of invisible.

So, let me highlight that.

Okay? So to change this, the the text

color in the footer,

select your text which is

highlighted here already.

Okay? And then add the selector.

That is this.

Change your text color

to

maybe white.

So, we have a

white. If you want to,

line in the center,

place your mouse cursor right before

your text copyright

and

hit return.

So, we can move it down. And let me save

it. My style, again,

file, save it,

and my, um,

inbox.

I'm going to save it again.

And let me double check. Let me refresh

my web browser.

So, I have a nav bar

with the logo and the footer with the

logo.

So, we make some changes now.

Okay.

Okay, and one more thing is,

let me reduce

my window size.

As you can see,

my hamburger button for the drop down

menu is kind of a fading.

We know that it is there, but I want to

have some kind of better contrast, or

maybe a different color for that, the

drop down menu button.

So, back to here

and then scroll up.

Let me,

re , oh, not here,

reduce my window size. You see that?

Now choose your nav bar,

I mean the end, that dropped hamburger

button. See that? Nav bar toggle icon.

Toggler.

Choose the toggler.

Okay.

Then

same way.

Under your

dot css,

we're adding

that network toggler

as a new selector.

It is added here.

Now, change the background color.

Let's try something a little bit

brighter.

Brighter gray.

So, it is updated.

Let me pull this back, back to original.

Let me change my style again.

Select your style.css.

Save it.

And let me

refresh.

Looks the same, but,

see? So, now this, the drop down menu is

more visible.

Okay. So, just

remember that if you want to change a

certain section, um,

then what you need to do is, for example,

if you want to change it this color, this

box color,

then

scroll down,

select the object, the element you want

to change,

and that's the other card

button.

This is the text.

That's the button.

Then same thing.

Under style.css

selectors we add.

This is a new selector.

Okay? And the background color. I want to

choose that they're the same color, the

the orange.

See? So, it updates everything.

So, uh, again, style.css let me resave it,

and then let me refresh.

So, I have update.

Okay.

So, we're getting in there.

Okay, so, I think I'm pretty much done, uh,

maybe so far, for now.

And then what I want to do is, I want to

make the other pages will be linked

about volunteer, adopt, and contact.

Okay, but, um, before we make those pages,

I'm gonna make a link first.

So, um,

[Silence]

My NH Humane Society, ah, the logo, and then

the home button will be used as a home

button.

About volunteer, adoption, contact, but we

don't have those pages yet, so let's make

the pages first, real quick.

So, go to files,

page,

okay.

Then,

hold down the control key,

or,

uh, right, right click.

I'm sorry.

I'm on my index.html, select index.html.

Control. Click.

We're making as a new

file.

That's going to be, uhh,

the first one is about.html.

Okay.

And let me make a volunteer, because the

home page is index.html, we don't have to

make it.

Control. Click

New file.

Uh, volunteer

dot html.

Two more to go.

New file.

Adopt dot

html.

And the last one.

New file.

Contact.html, contact dot html.

So, we have already all five pages.

Okay?

Then, now,

select your logo. First,

we're going to, so let me go back to my

source code, not on the style.css. Go back

to your source code on your index.html.

Select your logo.

You will see that

there is a logo, and right before the

image source tag, the coding,

you see the href.

We're going to make a link to

delete the pawn sign.

Href equals quotation mark, and then we're

making a link to index.html.

I will do the same thing

for

my homepage, too.

This home button, here,

href

equals

index.html.

Now, other four buttons.

This is about button.

Href

equals

about.html.

Next one is

volunteer.html.

And the next one is adopt,

not about, adopt.html.

And the last one

is

uh,

contact.html.

So, they're all linked now.

So, let's do this. File,

save this file first,

and then, let me check my root folder.

See? I already have

index.html.

and the all other four pages.

So, let's see how it works

now.

Refresh.

This is a home.

Let me click on about.

There's nothing, but as you can see on

your web browser, this is still

about.html, because we have nothing yet.

We just have pages.

Volunteer,

we're in volunteer page.

Adopt,

we're in adopt.html.

And contact,

we're in contact.html.

So, we have all kind of obvious, we are

ready to

plug in for adding or the putting

some of the, uh, the contents on each page.

The easiest way is,

since we already have some kind of nav

bars and the basic settings of this

pages,

go back to this.

Open your index.html, your source code.

Then,

in your code area,

select all. Click there, your mouse cursor,

in your code window, and select all.

It is all highlighted in blue.

Copy, command C

Now open

about.html, the first one.

So, this level.html page has nothing yet.

Select all code and paste,

and click in your screen.

So, it is exactly the same.

Now, I just need to change the code, I

mean the, um,

the contents.

So, for example, first I want to change

this, uh, New Hampshire Humane Society, I

want to change it to about

[pause]

us.

And also, I don't want to keep this, uh,

this the carousel, the slideshow. I

just want to have a one single image. So,

in your, uh, the files, uh, the

images I provided, uh, you have,

uh, about dot jpeg.

So, we're gonna replace that carousel

with this, uh,

just this the one single image, the jpeg

file.

So,

I'm in about.html,

and I just need to select my carousel,

which is

under

my nav bar.

This is my carousel.

Okay?

Delete it. We don't need it.

What I need to do is,

after

my nav bar,

let me, once you click on your nav bar

in your code area, your nav bar coding

is selected.

So, after this nav bar tag,

let me hit the return key,

and then

go to insert

at html option,

choose the div.

And okay.

So, this div will provide, uh, just one

kind of a space for your jpeg file.

So, in your tab on your code, let me

delete,

uh, the contents for new div tag.

Delete that. See that the blinking cursor?

Now let me insert

the image,

which is about.jpg.

Open it,

and click on this, the drop down menu,

and check

make image responsive.

And let me save this file.

And let me check

my web browser.

Refresh.

Home.

Let me click on about.

Now I have an about page

with this dmr image.

If I want to go back home, go back home.

About.

Or you can click on this logo as well,

So, it is interacting.

Same thing in the mobile version, drop

down menu,

about.

Drop down menu, home.

See? I'm back to here.

Drop down menu,

about page.

Okay, so, I will do the same thing for

other pages, volunteer, adopt and contact.

So, back to here,

uh,

I think I still have a cop, uh, copy of that, uh,

texture on the all entire coding already.

So, back to files.

Uh, this time,

volunteer.html.

Highlight the entire coding.

Paste it.

So, I have that.

Okay.

This page is for

volunteer.

Okay, and then also I don't want to have

this carousel. So, uh, under your container,

carousel,

delete it.

So, we want to have that jpeg image right

after nav bar.

So, select your nav bar coding, scroll

down,

after nav bar,

hit the return key,

then insert

div tag first.

Okay.

And then,

the content for the new div tag, delete

that.

Then insert the image,

which is

volunteer dot jpg.

That is this.

Help us.

Okay? And then click on this drop down

menu. Make sure,

make this image as responsive,

and

okay. Then go to file. Let me save it

again. Let me check this file.

Volunteer.

About.

Volunteer. Go back

home. So, it is working. So, let me finish

the adoption and the contact page as

well. [Long pause...silence]

In my contact page,

paste it.

Okay.

Let me change my text first

as a contact.

Uh, contact,

and then carousel.

I don't want to keep my carousel

slideshow.

So, after carousel

in the after nav bar,

scroll down,

after the other nav bar, hit the return

key to break the line,

and then go to insert menu

html,

div tag.

Okay.

Then,

in this div tag,

delete the content

and insert the image,

which is, this time, the contact,

that jpeg,

contact dot jpg.

Save it. Okay. And then, drop down menu,

make image responsive.

And let me save this file.

And we have one more,

which is, uh,

adopt page.

Open up that html,

delete it,

and paste it.

And I'm going to change the text.

Uh, I will say,

power

of

adoption.

[pause]

Okay.

And then choose the carousel,

delete it.

Now choose the nav bar.

After nav bar,

hit the break, uh, enter key.

Let me insert

div tag first.

So, this is a routine.

Say okay.

And then let me change this content.

Delete it.

Insert a new image, which is,

uh,

out of the jpeg.

That is that.

And

make image responsive,

and save this file.

I think we're pretty much done.

So, now let me go back to my google

chrome, my web browser. So, from my home

page,

about, volunteer,

adopt,

contact,

and back home.

From anywhere you are, we can go back

home by clicking the logo or home button.

Same way

as a mobile version.

Drop down. We can go to the contact page,

we can go back home,

or we can go to volunteer.

We can go back home, anytime.

Okay, so, I'm not going to change the

content for now, uh, just wanted to show

you, uh, how to make a link. So for your, uh,

your personal website, for your content,

so, um, just to visit individual page, each

page,

and then just to change your content.

Then it should work.

Okay.

Uh, and also I'm planning to make the

part three, uh, for the contact page only,

uh, so you can communicate with people. So,

how to get the email, how to add the, um,

the comments on this website.

Stay tuned, and then thanks for watching,

and I'll see you next time.