Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
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.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.
Your file was successfully uploaded.