Dreamweaver Tutorial

Hey guys, you have already learned the basics of Dreamweaver in few last videos. In this video, you will learn the HTML editing features of Dreamweaver. We will mainly work in the code as we are going to check what Dreamweaver has to provide is as for as coding and text editing.

Hey, what’s up guys. In the past tutorials we have gone over some of the basics of Dreamweaver and in this next following series we are gonna be working underneath the whole on learning Dreamweaver’s HTML editing features. We are particularly be working in the code view because we are gonna be checking out what Dreamweaver has to offer us as far as coding, as far as text editing, code editing goes. There’s few ways to view, there is the code view and split view, there’s also a split code view.

In this tutorials we are gonna be checking out the code view, as you simply see everything is going on underneath the whole . And there’s are lot of different formatting, ammm preferences that you can set that are formatting fiction code as you are encoding your webpage. And, as a, as a web designer myself, is very important to understand what is going on underneath, the design view. Because, the design view is it’s limited and it’s ability to allow you to control the code, ahmm sometimes you can type something inside the design view and out exactly as you need it, to be seen on the webpage. So, being able to understand what’s going on the code is very very wide too, being a good designer and programmer. And Dreamweaver really really allows us to make, it makes the coding much easier even for beginners.

Ahmm ,one thing, one thing you notice it’s different from the regular text editor in Dreamweaver, is everything and all this is controllable yourself, 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 have 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 category of different document types ASP, code fusion, PHP, Action Script, C Sharp, CSS, Java Script, XML all of these document types have different color coding features that you can customize one hundred percent. The way you do that as 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 have a list of all the different tags that you can change. You see, let’s go on change, let’s change the comment color, it is default, is set to grey, we are gonna to change it to light green, say ok. Okay and as you can see, all the comments inside of our, your document here has been changed. We go back and change that to default that it was before, comment change back to grey 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 you are, gonna stick to the defaults. Also, on the code view there is something called the coding toolbar, if you work here to the left you can see a lot of different options, up here we have open documents , So look at here making if I have most of the documents open, this will allow you to click, click on the whichever document you prefer to open. There is also the Collapse Full Tag that is useful whenever you have lot of div tags or lot of different elements in your code and you don’t want to see all at ones. You can go here, click on the main content div and we will say collapse full tag. And, as you can see it completely collapse that whole div tag. So, if you just wanna, you wanna look at one, one div tag you can get rid of all this other ones here by using the collapse full tag.
And that allows you to be able to focus in your code on one specific area ammm and if you wanna , you wanna get rid of the collapse you can go back and you can expand everything. You can also do that with a little minus sign right here, you can click on the div and you can highlight it here by clicking on this and then you can minimize it, just like that. Another thing over here in the coding toolbar is the Select Parent Tag, so if you are inside of a div or you are inside of your code and you want to find out what is the Parent Tag of this div that I have 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 this the body. Also, we have the way to apply comments without actually mainly encoding them, for safe reasons we do not want this main content div any more. We go down here and we will click that you select the whole main content div and then we will click on this apply comment, but inside our coding toolbar and will apply HTML comment. That way we have just commented the whole main content div and you can see that everything right here didn’t turn grey, that’s because you already had a comment inside of the main content div. So, what you do is you take out this old comment that we don’t need any more, so it gonna come out of the whole main content div and we will just remove the comment just like that. And now, you can see that everything has been counted out.

So, we are gonna go back and we are going to remove the comment that we just created and then we are going to recommend, it looks like that, now it’s back to exactly as it was before. Ammm also if you are importing HTML from another source, say say you have lot of HTML and it is not formatted well, it is hard damaged and can’t really tell what’s going on. A Dreamweaver has a feature called source formatting and I use this all the time, it is one of my favorite features about Dreamweaver. It is easy as going on and selecting all the tags and going to Comments and Apply Source Formatting and as you can see all of this spaces that I just made, they went away completely and you can also do that inside of our coding toolbar over here, you can see that it allows us to apply source formatting by clicking on to last row bucket down the bottom, apply source formatting and everything that you highlighted it will apply all the source formatting for you.

And that’s all I have for this, intro tutorial to HTML and how it can be edited inside the Dreamweaver. In the next tutorial we will continue to talk about some more best features and some more features that the HTML editor where code view inside the Dreamweaver has to offer for us. So, thanks for watching, and make sure you guys subscribe and continue watch our Dreamweaver CS4 tutorials.

Tags: macromedia dreamweaver, dreamweaver software, dreamweaver navodila, dreamweaver drop down menu, actinic extension for dreamweaver 8, video tutorial on dreamweaver

Tags

Dreamweaver Tutorials