Learn how to work between the code interface and the design interface in Adobe Dreamweaver.
Grab video code:
One of my favorite features in Dreamweaver is the ability to work easily in design view or in the HTML code. If you click on code, you will see all of the HTML and CSS code that is behind this page. As I scroll up, you come to the top or you see the dock type or the head elements. We will go over this more in the survival HTML lesson in part 2. But for now, I just want you to be aware that you can choose to be in design view, encode view or in my favorite, split view.
The cool thing about split view is that it lets me work in a design environment so I can see how my page is going to look or at least more or less how it is going to look when I preview it in the browser. But, it also lets me keep an eye on the code so that I can be sure that the codes are coming out exactly the way that I want it to.
And, one of the cool features of the way Dreamweaver integrates code view and design is that if you want to find a particular piece of code, you can simply select whatever you want to work on in design and Dreamweaver will immediately highlight that in the code so I can see right away that this headline is formatted with an H1 tag. Similarly, if click on this image, I should go right to the image source in the code. Sometimes you have to click twice and I don’t mean twice in close succession. But click once and then click one more time a little bit later and you should get the image source in the HTML code.
So now I can see very easily where different elements on the screen are if I want to double check for example how this is formatted in the code itself. Of course, I can also tell how it is formatted by looking at the property inspector and by looking at the tag selector at the bottom of the screen. For the most part, I prefer to work in design view or in split view but I will design view for most of the series.