Tip:
Highlight text to annotate it
X
Hello and welcome to early introduction to Dreamweaver tutorial
video series
in this series you're going to learn how to use adobe Dreamweaver CS6
to create a professional easy to maintain
website
and I’d very much believe that the best way
to learn how to use Dreamweaver tutorial
is to actually use it to create a
real project a real website that time you might them
you do
and really this video series is going to be divided into com
three different segments
the first segment he's just going to be sort of an introduction to
the basics of Dreamweaver
which you see on the window where all the controls of our
are not just some basics
the second part of this series we're going to learn the two fundamental
languages of website
and those are html
and CS6
were not for everything about those lag which is
all but we're going to learn enough about those languages so that we can
effectively use them
to create daily website
don't be
afraid of wording all either one of these languages
there are a lot of computer language is out there that are very
difficult to learn
there're syntax grammar
is very
convoluted but html Dreamweaver tutorial
they're very simple very straightforward languages something of that
on anybody can easily grasp a little bit of arms
a little bit of time and efforts when you go to the basics of arm
those two languages
and the third part of this series is going to be actually working on a couple
of projects
and let me go ahead and show you those two projects right now
that we're going to be working on
here is the first project that were at work on
I’m calling at manchester
and you can see the basic design
of our website here
and
you can see that it's got a top application here
where you have a
quite a few special features in this website
on you can see we've got of a rotating banner right here
with anyhow dropdown box that has caption inside of that
we'll see how to do that
on you can also see that are
top evocation menu here has a drop-down exam
and so we'll see how to use i had had dropped out links
to our navigation
system
please scroll down here we'll see how to do some simple rollover of facts
on our site
had to add a twitter feed to our site
and also some social media sharing tools
you can see a face book shared a twitter
item down here at Google plots
so quite a few special features
on this page
if we go to another one of the pages
you'll see again the basic away off that we're going to learn how to do
and more importantly you can see how you could adapt this website with your
content
your your text in your pictures
and you could actually use this design
four are real website
and on this page we're going to incorporate a couple of things are going
to be
very useful to you
arm one are sort of all tables in the city Evelyn table of information here
and you can see is a click on the different headers here
eye care resort the information
so we'll see how to create tables
and not only just tables but
sort of all tables
and the second thing where learn how to do on this page
is how do you try to create work were called modal popup windows
now you may not know what humble little pop-up window is when you hear it
but everybody has seen them before
and for example when I click on this link here
you're going to see that the background fades out
and this little pop-up window appears
and these can be very obnoxious our websites
if they're used properly
they can be really useful and adding content ages
and you can see here
I’ve got another pop up with an image here
through see how did you different kinds
pop-up windows
they did have a cool calm out
indebted into on that
popup window
and here we have a pop-up window that four
inside
and again none of this is difficult to do you're going to see step-by-step
how to do it
in this series
if we come to the products page here
you can see the
wherever slightly different
lay out here
on this page
and you can see that we can very easily have some products here
well clear of the services page we don't really have anything
different on this page at all
but when we come to the gallery page
this is something that
a lot of people walk aren't their website and that some sort of photo
or video gallery and you can see here I’ve added of photo gallery on this page
and when I click the images
the full-size version of the image comes up
we can play this is a slideshow
we can use the controls here to move back and forth through them
and there's even
twitter in face book wife buttons there as well as a close button
add up here at the top there's a spot for you to put the caption
schism really great photo gallery to all
and the other thing that makes a stool great is that you can not only use it
with
photos but you're also use it
with videos
and here you see I’ve got a video gallery right click this
it's going to bring up
sample you too
video
they didn't have here the background not music
coming out of my speakers there
all mute happens you can see have got that video from YouTube on this page
I can be reasonably expand out
into full-screen mode if I wanted to it
and again
there's another example
of a video
on that dot braille
spray see how you photo and video gallery this
in this series
if I come to the east
fop_ the frequently asked questions page
again
very similar in design
the differences here we have a was commonly call eight frequently asked
questions tool
where I can
have a title
and when I clicked that title
you can see that some information appears
so I can expand
they collapse
different sections
of information
and that's frequently a tool that a lot of people
want to up work into their website
and then finally I have our contact page here
and the contact page
is going to have
a forum on it
so you'll see how to alone
create a contact for
and place at all in your
on your site
you're also going to notice
as I click these different pages
in my internet's a little bit slow right now
you can see that the background here
and the basic color scheme
changes a little bit from page two page
and this is actually called skidding skinning
and we're going to see how to do about simple example of creating some
skins
inside out by Dreamweaver tutorial here we've
completely change the color screen from sort of that
ravishing orange
to this blue collar
right here
mms
and that's something that
especially if you have a larger website with lots of different sections on it
can be very useful for you
and by the way if you want to go see the you why you version of this project it
simply Manchester template
dot info
you know anything about dot him now they're just Manchester template dot
info and you'll be able to see this live
website
be aware that the contact form here
the submit button
is disabled seawater actually be able to send the email from here
so I don't want the sap_
so that's going to be the first project that we're going to work through
in this series
and again at the end of a
you will have a
professional
easy to use
website that you could actually use for project for your business
for a personal project for an organization
whatever you want to do with the problems with it
and the second project that we're going to work on here
I’m calling Krakow
as my home town in Poland in Keisha Rwanda or my family's from Tampa
lad
and you can see here
a lot of the same features but of very different
style of design
and you can see up we began to have
sum drop-down menus up here
we have
the rotating banner image
with the drop down on it in this case the drop definitely coming partially
down the page
and as we scroll down we'll see
the footer area here
with a simple our contact form
that we can sell out
as they go to the about page you're going to see up again and sorry my
internet connection a little bit slow right now
you're going to see this page
right here
noticed that the layout
of the content here is different
we've got
full width
title area here
and then we sort of on the left hand side bar
and then a continent area
and then we've got
another area that goes
two-thirds of the way over
and that picture
the footer
is the same way out
but here goes the colors match
the colors of this page
whereas they go to the welcome page
it's a small color
right here
and this goes back to that idea of skidding
and that this is a more complex
version of skiing
that we saw in the first project
all but again it's not something that's are terribly
terribly difficult to do its history taking what you learn in the
first project
and expanding it out and making a little bit bombs
more useful
if I could have a products page here you'll see again we have a different
color scheme
I have again we're going to see had to do the photo and video gallery
so I come to the services page here
again
we've got a little different layouts edited blowing the full width
we've got eight content area that takes up most of the area
and their right hand side bar
and special feature the we're going to add on this page
is tablet
box area here
you can see I’ve got a customer's Allah consulting services here
when I click on a bit management
our team
the content
changes
souls he had to do those tabs boxes on this page
if I go to the fava_ here page
again you're going to see
frequently asked questions tool
that we use before so you'll see how to do that again
and again a slightly different
of layout
action matches the about page there
and then the contact page
for this project is going to have
assembler contact form
bombs
audit
and again I apologize to my internet connections
slow
right now
saw the simpler
contact page here
but the special feature that we're going to have incorporate into this page
is going to be this here
and this is actually called an accordion slider
if I clicked these different sections here you can see a lot like the
frequently asked questions tool
those different sections will expand
and collapse spray see how to
create
that item
so those are the two projects that we're going to work with in our work
through in this series and again the goal of this is to make sure that at the
and of the series on your very comfortable creating a professional
website using Dreamweaver tutorial and also I forgot to mention if you want to see
the actual version of this
website
Jakarta Krakow template dot info here
Krakow template
dot info
and you'll be able to bomb
see the actual website
as it appears you can see also here
the hot my internet connections we give them the trouble today sorry about
that you can see that this rotating day removes a lot faster
on this item
are on this site that it does on the other you can adjust that speed
as need be
so again our series is going to have three different parts to it the first
part is going to be
just after seeing some of the basics of Dreamweaver tutorial and setting up by your
site in Dreamweaver the second part is going to be the basics of html in c
assassin Lorena become comfortable with that
and then the third section we're going to work through both
this Manchester project
and the crack house projects so you can unseen practical example of had accuse
what we learned in the first couple of sections
so in the next video we're going to actually come open at Dreamweaver tutorial and
start to alert about the basis of the air base
so I’ll see you in the next video