Dreamweaver CS4 Tutorial - 19 - Code View Video Lecture | How to create Responsive Websites with DreamWeaver - IT & Software

hey what's up guys I'm in the past's
tutorials we have gone over some of the
basics of Dreamweaver and in this next
following series we're gonna be working
underneath the hood on learning
Dreamweavers HTML editing features we're
particularly going to be working in the
code view because we are going to be
checking out what Dreamweaver has to
offer as far as coding as far as text
editing code editing goes there's a few
ways to view the code there's the code
view and split view and there's also the
split code view and there's a toils
we're gonna be checking out the code
view so we can see everything that's
going on underneath the hood there's a
lot of a lot of different formatting
preferences that you can set that it
will all it will automatically fix your
code as you're hand coding your web page
and as a as a web designer myself it is
very important to understand what is
going on underneath the design view
because the design view is it's limited
and its ability to allow you to control
the code sometimes you can type stuff in
design view and it won't come out
exactly as you need it to be seen on the
web page so being able to understand
what's going on the code it's very very
vital to being a good designer and
programmer and Dreamweaver really really
allows us to make all it it makes the
coding much easier even even for
beginners one thing one thing to notice
that's different from a regular text
editor in Dreamweaver
is is that everything is color-coded and
all of this is controllable yourself I
whenever I code I use the defaults but
if you do not like the default colors
that have been set inside of the text
editor here you can change that inside
of the Preferences you go to edit
preferences and you click on color
coding and you can see not only is
Dreamweaver a text editor for HTML but
it also handles a variety of different
document types like ASP ColdFusion PHP
ActionScript c-sharp CSS JavaScript XML
all of these document types have
different color coding features that you
can customize 100% the way you do that
is you go in and you click on whichever
document type that you want to control
and you click editing colors or edit
color scheme and you will have a list of
all of the different tags that you can
change you see let's go and change let's
change the comment color it is default
it's set to to gray we're going to
change it to a lime-green say okay okay
and as you can see all the comments
inside of our HTML document here have
been change I'm going to go back and
change that to the default that it was
before comment change back to gray
okay as you can see that is how you
change the color of the text inside of
the code view you can you can change all
all the tags that you want but for now
we are just going to stick to the
defaults also in the code view there is
something called the coding toolbar if
you look here to the left you can see a
lot of different options up here we have
open documents this little guy right
here if you if I had multiple documents
open this would allow you to click
underneath click on whichever document
you prefer to open there's also the
collapse full tag that is useful
whenever you have a lot of div tags or a
lot of different elements in your code
and you don't want to see them all at
once you can go over here and click on
the main content div and we'll say
collapse full tag and as you can see it
completely collapsed that whole div tag
so if you just want to be sure to look
at one one div tag you can get rid of
all these other ones here by using the
collapse full tag and that allows you to
to be able to focus in your code on one
specific area and if you want to if you
want to get rid of the collapse you can
go back and you can expand everything
and you can also do that with a little
minus sign right here you can click on
the div and you can highlight it right
here by clicking on this and then you
can minimize it just like that
another thing over here in the coding
toolbar is we select parent tag if
you're inside of a div or in you're
inside your code and you want to find
out what is the parent tag
of this div that I've selected right
here go over here and you can say select
parent and it will tell you where the
parent is and this particular div tag
parent looks like is the body also we
have a way to apply comments without
actually manually coding them to say for
instance we do not want this main
content div anymore we'll go down here
and we'll click that to select the whole
main content div and then we'll click on
this apply comment button inside of our
coding toolbar and we'll apply an HTML
comment that way we have just commented
the whole main content div and you can
see that everything right here didn't
turn gray and that's because you already
had a comment inside of the main content
div so what you'll do is you'll take out
this code come this old comment that we
don't need anymore since we're going to
comment out the whole main content div
and we'll just remove the comment just
like that and now you can see that
everything has been commented out so
we're gonna go back and we are going to
remove the comment that we just created
and then we are going to read comment
the other one just like that now it's
back to exactly as it was before also if
you're importing HTML from another
source say say you have a lot of HTML
that is jumbled up and it's not
formatted well and it's hard to
understand you can't really tell what's
going on a Dreamweaver has a feature
called source formatting and I use this
all the time it's one of my favorite
features about Dreamweaver it's as easy
as going in and selecting all the text
and going to commands and apply source
formatting
and as you can see all of those spaces
that I just made they went away
completely and you can also do that
inside of our coding tool bar over here
you can see that it allows us to apply
source formatting by clicking on the
last little bucket down at the bottom
just apply source formatting everything
you've highlighted it will apply all the
source formatting for you and that's all
the time I have for this intro tutorial
to HTML and how it can be edited inside
of Dreamweaver in the next tutorial we
will continue to talk about some more
advanced features and some more features
that the HTML editor or the code view
inside of Dreamweaver has to offer for
us so thanks for watching and make sure
you guys subscribe and continue to watch
our June Weaver cs4 tutorials