Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Working in Live view

From: Dreamweaver CS4 New Features

Video: Working in Live view

Any designer that's work with dynamic pages in Dreamweaver is probably familiar with Live Data view, a way of previewing dynamic data on the page without having to test it in the browser. Unfortunately, this functionality has alluded us for other interactive page elements. Well, that is until now. Live view now allows us to preview CSS and JavaScript- based interactivity within the Dreamweaver environment. Live view also gives us the option to see generated source code or to freeze the JavaScript interactivity while previewing it.

Working in Live view

Any designer that's work with dynamic pages in Dreamweaver is probably familiar with Live Data view, a way of previewing dynamic data on the page without having to test it in the browser. Unfortunately, this functionality has alluded us for other interactive page elements. Well, that is until now. Live view now allows us to preview CSS and JavaScript- based interactivity within the Dreamweaver environment. Live view also gives us the option to see generated source code or to freeze the JavaScript interactivity while previewing it.

Pairing Live view with a Split Code view of your CSS or external scripts means you can edit your scripts and see the changes in real time without having to preview it within the browser environment. Well, I've opened up galleries.htm in the 04 folders so if you're following along with the exercise files, you want to go to the 04 folder and open up galleries. Not only does this have our normal CSS-based rollovers we're dealing with, but it also has an neat little Spry widget on it that we'll talk about in just a little bit. Now in order to prepare our workspace for the best possible environment for using Live Data view, I'm going to go to my panels and I'm going to collapse them down to icons so that we have a little bit more screen real estate to deal with when working with our page.

So the first thing I'm going to do is go right up here to our Document toolbar and I'm going to click on the Switch Design view to Live view. And when I do that all the layout elements such as the borders and the div tag elements, all those things go away and you just see your page. Now if I mouse over my CSS rollovers, they all work so that I can sort of preview those guys. Now I'm going to scroll down a little bit and over here on the sidebar, I have a little Spry widget is based off of an HTML dataset so this something that we'll actually build a little bit later on, but if I click on the cameras, I get to see the cameras. Their resolution and megapixels, the weight and all this information is coming from an HTML data source. So I'm able to see the JavaScript interactivity without actually having to preview it in a browser environment which saves me a lot of time.

Now, Live view, as soon as you hit it, any onLoad event is going to fire but after that, you can freeze any of the JavaScript that you want. So let's say I'm working on the Fuji fine pics, which is the second camera and maybe I'm making some edits and I want to see how it affects this, but I really don't care how it affects the rest of it. Well, if I could back up to Live view, there's a little pulldown menu here. And you'll notice that one of the menu options is to Freeze JavaScript and F6 would be the hot key for that. So if I choose Freeze JavaScript, it is frozen in place and anything else that I click isn't going to work. Now, just because you freeze your JavaScript doesn't mean that your CSS-based interactivity freezes. Notice that that all still works. It's just freezing any of the JavaScript that you might have.

At that point, once you're done editing that you can hit either F6 again or you can come right back to this menu to un-freeze it and to go back and do what you're doing. Now, for the most part this looks fine, but I'm not really comfortable with the way the headers are looking, especially in their default view. In the selected view they're fine. They've got a nice sort of dark background color and you can see what they are really quickly, but there's not a whole lot a contrast between just the normal default view so I want to go in and change that. This is one of things that Live Data view really helps me with because even in Live Data view I can still use things like the Code Navigator. So holding my Alt key down and on the Mac, you remember you want to do Command+Option, I'm going to click on one of these headers and when I do that my Code Navigator comes up.

So regardless of whether you're in Live view or not, Code Navigator comes up and you get to see exactly what you're interacting with. Well our problem is in the SpryMasterDetail.CSS file and it's dealing with the MasterDetail MasterColumn class selector. You can see we have that light gray background that we want to change. So using the Code Navigator, I'm going to click that and that will open up my SpryMasterDetail.CSS in Split Screen view. We want to change the background. I'll to highlight background and I'm going to get rid of the background. I'm going to replace it with a border.

So I'm going to type in border-bottom. So I just want a bottom border here and we're going give it a bottom border of one pixel. We're going to do solid and we're going to do #fff, which is white. Don't forget your semicolon. We'll go and save the file, and I'm going to switch back to Design view instead of a Split Screen view and you can see in Live view, Dreamweaver goes ahead and updates it for us and now we can see the interactivity with our new selector in place and the header looks a lot better, which is really cool. Now another thing that Live view does for us which is really neat is the addition of something called Live Code. Now I'll switch over to Code view, and I will go to my source code and you'll notice that in Code view we're looking at placeholder code so the camera goes here. The maximum resolution of the image goes here, that sort of thing. Well, what if we want to see the actual generated code? Well, if I click on Live Code, which is the button right beside Live view, it's going to show us instead of the placeholder code, notice that it shows us the actual generated code and if I switch over to Split Screen view, once I change this, this code will also change out. So notice the camera become Sony DSC and here it becomes the Fuji. You can see the generated code rather than the placeholder code. Turn Live Code could back off again, it goes back to just being the regular generated code, which is neat. So if you need to see the generated code instead of the placeholder code, we have that option using the Live Code feature.

So you're like most designers and you've embraced the practice of clean accessible code, you probably find yourself placing more and more of your styling and interactivity in external files. Dreamweaver allows us to combine tools such as Live view, the Code Navigator and Split Code view together to make editing all the separate content a smooth, seamless process. In the next video we'll explore Dreamweaver CS4's enhanced Properties inspector and how it now gives you another avenue when editing and creating styles.

Show transcript

This video is part of

Image for Dreamweaver CS4 New Features
Dreamweaver CS4 New Features

16 video lessons · 18618 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS4 New Features.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.