Dreamweaver Tutorial

What a tutorial! I you are using Dream Weaver; you have no choice but to watch this one carefully. It may save you lot of time and energy.

This video is regarding handling compound documents. In the past, compound documents were a little harder to work with inside a Dream Weaver. Not any more. After watching this video, you will be able to play with compound documents with a most ease. You can see the source code for a current file, the external style sheet of the file, the spry effects Java script and things like that without even saving the file.

If you’re like me, your web pages rely more on just one page for the final rendering. It’s not uncommon to have extra documents such as CSS, Java script and Some sating clues all combined together at run time to create my final rendered page. In the past, these types of compound documents done a little harder to work with inside a Dream Weaver.

To test layer and inter activity, you will have to predetermine a browser. To work on the related documents, you will have to remember which document was linked your page. Open it separately, make your edits and again, preview in the browser and as you see access gets more complex.

It can also be difficult to remember exactly which rule is stalling which element. Well I’m pleased to say that in CS4, Dream Weaver has built in functionality to make working on and previewing these pages intuitive and efficient. Live view, good navigator and related documents are going to become an indispensable part of view Dream Weaver work flow.

We start by taking a look at the wonderful new feature, Live view. Now here I have our counter dot HTML page open and although it may not look like it right now. This is a really cool page. We have on this page is we have a spry master detail region. Now spry is Adobe’s a jack’s library and typically using this spry element on the pages, it’s going to require an external Java script following may be an external CSS file. A Master detail region is no exception. I could test this on my browser if I want to preview layer internet activity but the new web –- integration, it’s a Dream Weaver all asked me to do it here now without havening to go outside of Dream Weaver.

Little bit more screen will stay. I’m going to go over to my panels and I’m going to claps them down to icons. Here we go. Now turn on live view. They’re going to my document tool bar and just beside the quotes Split and Design View Icons, I have Live View. So I click on that and now we see the rendering of the page. Wonderful! Well, what’s really nice is that I can also preview here my CSS based and Java script based interactivity directly in Dream Weaver, which is really cool.

Scroll down a little bit and I’m going to show off another nice feature of Live View. Let’s say you are interacting with your page and you decided that you want to freeze it at a certain location, you wanted to see exactly how it looked like in this particular moment of time. Well, if I go up to live view, I can click on a drop down menu and I can freeze the Java Script.

Freezing the Java Script means that when I click or hover over any additional element nothing really happens. It’s frozen at that spot. Really handy for working on a single state of a multi state item. So that’s really really nice. Now I can unfreeze that Java Script by either going back up to Live View or pressing F6 or option F6 keyboard shortcut to unfreeze it which is really cool.

Now after working with compound document, remembering and finding the specific CSS rules that drive that element can be time consuming and frustrating. The good navigator makes —- specific styles —. You may have noticed it but if I click on an element and I just sort of hang out there for a while, eventually this little icon comes up and then looks like the wheel that you used to drive a ship. That is the code navigator. Click on that.

It brings the code navigator up. Now the code navigator is everywhere. If you select an item and wait for a second or two, that’ll show up unless we have —– tells us all clicking will allow to show up now —- command option click. Since its into so many different places, I’ll show you some of other places just a moment, having an icon come up every single time you select something may be a little distracting after a while, especially once you’re seasoned with the feature so did you have a check box that allows you to disable the automatic icon coming up so turn that off and now when I select something, you don’t see the icon.

Now I noticed when I’m interacting with this that the selected items background and hovered items background is exactly the same. That could lead to a little bit of confusion so I want to go ahead and change that. That means a good navigator to isolate the exact rule that we’re going to use another new feature related documents to go and make it change. So I’m going to hold the Alt key down and I’m going to click once, for Mac, that’ll be Option, Command click. And when I do that, up comes the code navigator.

Now understand what I’m saying, all the rules that applying to the selected item in order of cascade they’re being applied. Can also see the external rules as well. Now the background color I can find on this master detail, master column selected rule. Hovering over the rules gives you a summery of the rule which makes it really easy to find the property you are looking for.

So I’m going to click once and I’m taken straight to that rule. Now you may have noticed how easy and effortlessly Dream Weaver displayed the appropriate CSS rule. That’s really cool. That’s another new feature related documents. It lets any first level top documents related to the current page and additionally, CSS files will display even if they are nested up with another documents. Very very nice.

You can see all the related documents to a file by looking underneath the tab of the open file. Here you can display the source code for a current file, the external style sheet of the file, the spry effects Java script; we can just go on and on. Now if you have too many to list in the document tool bar, you have a little drop down menu over here, it’ll allows you to access all of those.
Well, this was in the spry master detail that CSS and it’s the background color. Now let me just move right on over here, so we can see this change take effect. So let me go ahead and select another — and I’m going to make a little change to this rule. Instead of the background color I’ve got… now I’m going to change this to FF9. Now what’s nice is I haven’t even saved the external CSS file yet. But my view goes ahead and changes the preview for me. Isn’t that nice? That way I can decide on whether I like this before I committed to saving it or not. I’m going to go ahead and save it.

Now I mentioned before that a good navigator visit multiple places if you noticed looking encode view. The good navigators now on the coding toolbar can also find it up to the menu under the view. Good navigator. There’s also another keyboard shortcut for there as well and just to make it sure it’s located in every single possible place, also down on your tank selector as well, you can access it by right clicking and choosing Code Navigator from there.

So the folks today we want to make sure that no matter where you are working, you have the access to the code navigator. All right, switch back to design view and we can preview our finished page. Very, very nice!

Now, by combining Live view, code navigator and related documents together, you can accurately preview CSS and Java script based inter activity within Dream Weaver. You can edit specific styles with a single click and work on related documents without having to track them down and opening them separately.

I think you’ll find it’s I have that combining these features together will create a seamless work flow on working on your compound documents in Dream Weaver.

Tags: dreamweaver 8 tutorials, adobe dreamweaver cs3 tutorial, joomla dreamweaver tutorial, dreamweaver macromedia tutorials, dynamic tutorial dreamweaver mysql, free online dreamweaver tutorial

Tags

Dreamweaver Tutorials