1 – Introduction to Dreamweaver Tutorial (CS5)


well and welcome any introduction to
Dreamweaver tutorial series in this series of Dreamweaver tutorial videos you learn how
to create clean and professional looking websites which aren’t easy to update
maintain and are also optimized for search engines at the end of the series you love
created to complete web sites and have a solid avenger standing out
how you created them using Dreamweaver tutorial in the process of learning Dreamweaver tutorial
in the series you’re also going the basics of writing
html and c_f_s_ if you want to go deeper into warring
these topics html ansi s_s_ there are a couple of video series on my chair of
the cover these topics in depth you don’t need any prior experience in
designing websites or using Dreamweaver tutorial to successfully
complete this course but if you do have some experience it
won’t hurt either the for several videos uncover the
basics of using Dreamweaver tutorial if you already use Dreamweaver tutorial inner
from may with the basics you can successfully jump ahead to video number
eight in this series which is where we actually start to create the project websites for this course that during this course for a complete
two websites both are very similar to each other and provide eight good well-rounded
introduction to web design using Dreamweaver tutorial if you want to download the completed
projects for the series and the framework that i used to create
them these are available for download an
alarming section of my website you don’t need these materials to
complete the videos but they will save you a lot of time in
typing out the examples preparing the images and finding the different scripts that
we’re going to use the framework includes all the resources
you’ll need to complete uh… blurring projects on my channel
for during the first again you don’t need these materials but
they’re very helpful they also contain the completed projects
a resources for all the other Dreamweaver tutorial videos on my channel and again the framework than they used
to create them the websites we completed the series
will all be created using html and css for a house yell traded him to see layouts are
table based layouts and table base layouts are inflexible
and problematic many different reasons but probably the
largest issue with table base layouts and the reason why you want to avoid
them are the issues around accessibility and search engine optimization answers we want to make it as simple as
possible for search engines to understand our
site and list them in their results this will become important so let’s go ahead and take a look at the
two project website will be completing in the series these states were completed and
especially for created especially for this series they’re not
websites for real companies again you can see the completed versions of these
websites by going to my website in going to
learning section the first web site that we’re a look at
is called cheers design and again this is a clean professional
layout that’s going to actually have two different page layout super out work
with one is going to have a to calm way out and the other layout that we create is
going to be full width layouts we can put content into that as well well here we are and the first project
website that we’re going to be completed or fictitious company cultures design and you can see here the basic layout we
have a better off the top followed by a top navigation menu right
here with send links to our main pages and then we have a rotating banner
underneath it and then below that we’re going to have
all the content for our page you can see Adobe Dreamweaver tutorial that this is a to call me
out with the latest news being in the
right-hand column and this welcomed this year’s design
section taking up the full width of the content area here and then finally we have a flutter down
here at the bottom and if you go several other web pages
you’ll see the design here and again you can go
preview this web design on my site here’s a page that does not have that
rotating banner on it but does have some additional
information on it if i go to the contact page you’ll see
that right there now they’re going to be several special
features that we’re going to add to this website to make it more interesting to her
visitors the first of which is we are actually
going to create this rotating banner here and you can see the images fade in fade
out and you can also see over to the right we have that semi
transparent box but actually have some text inside of it described the information the second special feature that we’re
going to add to this website were actually going to be able to see on
the services page so many jump to services and you can see here as opposed to the
other layouts this is a tune called way out but on the
services layout this is just a one column layout and we actually have the section here
called featured services and you can see that this is going to
rotate through the different features that are
contained in this box living room dinning room family room and you’ll see a scroll through in your
so see the animation effect failing this image via email now when you want to go to a particular
page you can just simply click on these icons right here and jump you to that point if you click this item right here that’s
the latest can actually take you to that section of our website and i’m glad to click on that i went to
the dining room section again you can see the same basic layout
way this is a full with white house and the feature that we’re going to
demonstrate on this page is going to be Dreamweaver tutorial creating a gallery
lightbox and you can see a got some thumbnails
for some images here when i click on the thumbnail you’ll see
that i get a large room of the image all along with um… caption close
button right down here this is called again I’ll light box and you can see i’ve got next and previous button so i can scroll
through the different images that are in the gallery and if i
want to buy can put a caption on it down here and close this whenever i want and go back to my page to receive an addict gallery tour pages
as well we come back here to the services page and let’s go ahead and try another page
of a click on a living room for a year and you can see this page is slightly differently health full width right here but the way scroll down a bit we have
the shaded inboxes actually formed three columns soared earlier and had it not only do a
full with playing out and the to calm way out that we saw
earlier we’re also going to be he will to create hybrid layouts way up to the
certain place have a certain number of columns like here we can see we just
have one column and then we’re gonna switch into
multiple columns and then finally switch back to a single call we’re also see how to use what are
called mortal pop-ups mobile and detail pop-ups and in the previous example we saw how
we can create pop-ups for images on the screen we’re
going to are in this page risky how we can create a pop-up foursome taxed for example you can see here at the
bottom of use one of my boxes and click here for more information and when i click on that you’re going to
see this mobile pop-up appears that has a heading and then some descriptive text here as well as will close but and you can see and go to another one right there another one right here and this is really useful for creating pop ups of the information so what’s the difference features that
we’re going to go ahead and play with on this website because the about page again we’re back to this standard two
column layout if we were of the projects page you’ll
see that we have on the to calm when i hear again finally we’re going to see how to do
some image roll over a fax in this series and you can see here one roll my mouse over these images the image changes right now they’re just
simply to color sepia tone images or roll-over is add some color we’ll see how to do that a fact and that if i can be very dramatic like
this you can see what’s a color appears or it can be a more subtle effect if i
hover over here you can see i have a much more subtle image working finally we’re came here to the contact
page and we’re going to have a creepy simple
form on our website we’re also going to see how to add
validation to the uh… form for example we would not want the user to be able to
submit this form until they’ve entered in their name email address comment here so i can go ahead and type in john smith
here looks and this is it Dreamweaver tutorial comment but i left out the metal and you can see
this is required fields were hit submit it’s going to say email is a feel so that validation script is going to
make sure that your visitors enter the necessary information before they actually submit the form to you and will also include a male script that
you can use to actually process this fall so this is the first project web site
that we’re going to go ahead a look at now let’s go ahead and take a look at
the second project that we’re gonna do in the series so here’s the second project website
that we’re going to complete in this series and you can see it’s very different from
the first web site that we created but it’s going to use all the different
skills and techniques that we learned that first project always think spend on them and show you
a way to use them in a different context so same skills applied in a different way but expanded to show you some additional
options you can see the fading banner here at
the top the only difference between mess in the
previous one is that we don’t see that transcending transparent barred rock band with text
inside so this is going to be a pure image rotator you can see here we’ve got a top mania
in this case we’re going to add some rollover affects to make these appear more like buttons and if i scroll down a little bit you
can see most of our pages here are going to have
a one column layout autism but we are going to go ahead and created
to calm way out for pages that might want to use that
you can see here on the location tab we’ve got one column with their text in
it and the second column has this images
inside and if i go back to the other pages
you’ll see can the layout that works there on our about page we’re getting can see
how this gallery works in this case i’ll click on the image and
you’ll see the pop-up comes up here and i’ve got the previous and next
buttons along with a close button here so i can go through the different images and close singer turned the page when i
am ready so we’ll see how to use that gallery plugin for images and again we’re going to see how to do these mold
or pop-ups in this case i’m on the menu page here if i say c nutritional information in this case again pop-up appears Sort of like Dreamweaver tutorial it did with the images only
this time all its containing is some text and you’ll see how to create these
pop-ups and format the text that is inside of
them and finally if i go to my reservations
page you can see here i didn’t get a simple contact form so you’ll see how that at a four
two-year websites and also how to add the validation
plugin that to make sure that people enter the information in that uni before they submit as well as a male script that will actually process this former intuit email message to send to you so this is the second project website
and again all the same skills from the previous
project just expanded in use in a different
context aniket if you’re interested in getting
the completed these completed sites you go to download
them from my website they complete contain the completed site
as well as all the images here that you’ll need to complete these projects and again you can use your own images
create them and fireworks armed m creature untaxed whatever you
want you don’t need the project files to complete the videos they’re just
there to speed things up for you into help you out they really save time and
typing up the code so i’ve definitely take a look at those now one of the advantages of using a
consistent framework or consistent project employed or series of templates is it really speeds up creating a website to prevent you from having to recreate
the wheel every single time you can see here in this way out what were using this structure for for a restaurant website but if i come over here you’re going to
see an alternative that uses the exact same website
structure the only thing that we’ve changed is
that content that we put into the structure we’ve added new images here we obviously changed or color scheme
from orange to blue we’ve got these rollover effects that
are on the menu items again and there we’ve got are content area so you can see how similar these layouts
army uh… welcome page here you can see how similar the structure is
but just by changing the color scheme and by adding new content images and tax we get a completely different appearing website so not only are these project template
in the framework intended to you speed up learning they are also very practical that you
can actually use them to create real websites that show a variety lady of different things so that’s where we’re going in this
series of videos begin if you have a little bit of
experience using Dreamweaver tutorial the basics of creating a website you may want to skip ahead to video
eight that’s where we actually begin to create
these different project websites for you and that’s about it for right now policy
in the next video we get started learning to use Dreamweaver tutorial hike before we actually get started with
the learning exercises i wanted to go over several things to you based upon on the questions and feedback
i’ve gotten other videos and the first thing that i want to press
on everybody is that Dreamweaver tutorial is something that everybody
can learn to use it’s not a difficult piece of software all that said it’s also not microsoft word it’s not something you can just sit down
and begin typing at sort of figure out of a flock it does take time to learn to use
Dreamweaver tutorial what i would recommend that you do
instead as you’re going through the different videos i would recommend that
you watch the video wants without working along just watch me as i go through the material or that particular video after that watch the video a second time and work through the example with me and the process of watching the whole video once through will allow you to focus on more on what
you’re doing rather than what i’m saying the second time do you go through the
video subcloned watching mostly as a couple of
different times one just watching and the other just working on and again some people you know they can
his work along as i’ve gone through the video but i found most people it’s very
helpful if they watch once and then fall along of the second hand watch the video the next thing i would bring up is that
i’d really encourage you to download the completed project from my website and the reason for this is not only is
it valuable for creating new websites or using the templates to create your
own website but there are the actual on templates that i’m working on in these videos so
what you can do is you can compare your code with mine when you have a problem and you can see possibly where the problem all lives so that will really help you whatever you do don’t become discouraged
with learning Dreamweaver tutorial it’s going to take time answering just
like math you need to spend some time working
through problems to really understand and just like you
had to work through numerous problems endowed read really
understand what was going on you don’t need to do the same thing here and that’s one of the reasons why i have
to complete projects in this one series that’ll take you from beginning to end through a complete project and the Dreamweaver tutorial intermediate series
injury weaver projects that i have posted again all follow the same sort of philosophy taking you from the start to the and of actually building a
website and just like those math problems the first time you know one it may not make sense once you’ve got a few more it’s going to
make more sense and went to work through a few more you’ll finally understand own don’t get discouraged if you don’t
completely understand everything the first time through and again the reason why i created
multiple projects from multiple sites is just for show you things from different
angles a different perspectives and also the so you wouldn’t get bored
with watching the same project yet built over and over
and over again so whatever you do don’t become
discouraged right off the back the other thing that i would say is
don’t expect a totally understand html and csf after the series after you’ve watched through these
videos and worked along with them and have sort of a basic idea of html at
c_s_i_s_ and again that’s the goal of this series
is to get you basically familiar with html cssc and had to use them in Dreamweaver tutorial i’d recommend that you go watch the
introduction html videos and the introduction to see s_s_ videos and what
those are meant to do is to take somebody with a modest amount of
knowledge in web design and really expand upon wage dml is and what see assesses if all you’re doing is creating a single
website let’s say for your small business you may not need to do this but if your
goal is to really understand how to build websites your next step
after this may be the information on the intro to cssc res and then obviously i have a bunch of
Dreamweaver tutorial series that start you by or the taking from
beginning to and through entire prod project the other thing that i would recommend
that you bom never do please don’t try and take any shortcuts on there are lots of websites out there
that will tell you all sorts of little shortcuts and fancy little tricks which is fine in a lot of cases when you
really know what you’re doing shortcuts can speedup the process for you but when you’re just learning
Dreamweaver tutorial it’s best to sort of follow a standard formula for building websites and not to take in the short cuts work through the material and i think
that you’ll find once you get through the two projects
there in this unserious you will have a really good at your senior
Dreamweaver tutorial and you will feel comfortable working with Dreamweaver tutorial and that comfort will always increase as
you watch more videos and learn more things sold right off the back don’t do any shortcuts just go ahead and work through the
material and that sort of trust that at the end
of the day project you’re going to know more lot more that when you started and every time you work through a
project you’re going to know more each time onto those would be my suggestions for working through this series and some of the other series go through this series from watch the video and that watch a video a
second time to follow through and then after you done with that you
can either watch more of the Dreamweaver tutorial project videos or you can watch the introduction to
html and see a sense all video but whatever you do don’t get
discouraged stick with it it’s again just like math it’s something everybody can do they
just have to work through the problems and when she worked through the problem
several times everything is going to sort of fall into
place aren’t so good luck calcium annex video

Add a Comment

Your email address will not be published. Required fields are marked *