Join James Williamson for an in-depth discussion in this video Using Live view and CSS Inspect, part of Dreamweaver CC 2013 Essential Training.
In this exercise, I want to focus on how LiveView can help us when we're working with and editing our CSS. Now we've used LiveView before, and we know its amazing at helping us understand how layouts are going to look in most browsers or at least some of them anyway. But, you're often going to want to troubleshoot your CSS while in LiveView, because it's then that you're going to notice some of the issues and problems. Well, that's where another feature that works in conjuction with LiveView comes in, and that's CSS Inspect. CSS Inspect let's us do well, really what it says.
It let's us inspect the elements on the page and visually explore the box model properties that have been set on those elements. As you're going to see, it is an invaluable way to troubleshoot layout issues. So, I'm here in the Spotlight.htm, and I can find this in the 07_13 folder. I'm just going to turn on LiveView, there we go. And everything looks okay for the most part, but there are a couple of issues. One, I don't like the spacing of this text, both the headline and the student's name. That spacing needs to be fixed, it's too close to the bottom.
And there's equal spacing among all these elements except for down here on the bottom. So, I've gotta, I've gotta track down kind of what's going on there. Well, you know, in a typical workflow if I didn't have inspect available to me, I would sort of see what's going on here and then I'd have to go back in, find all the selectors that are applying to those and sort of figure out who the culprit is by just doing some math and looking at, at who's effecting what. Now, that would be very problematic, that would take forever. So, I can turn inspect on by simply clicking right here, Turn on Inspect Mode. And when I do that I can begin to mouse aronnd my elements. Now, I want to be very careful and not click on anything because as soon as I click on something, I actually focus on that element and I turn inspect off. It's actually one of the side effects of inspect because, it, it figures that hey, when you select something, you want to focus on that, and then use some of the others tools to modify it.
So, I'm just really careful right now to sort of mouse around. Now, as I mouse around, you're seeing different colors show up. Let me explain to you what those mean. That sort of light blue highlight indicates the content of the element itself. The yellow indicates margin. And then any time you see sort of a purple or magenta value, that, that's padding. So, those are things that we can look at and sort of tell what's going on. We can tell when an element has padding, we can tell when an element has margin, and we sort of get a feel for that. Now, if I look at these headlines. When I hover over student spotlight, I can see that bottom margin, and I it's identified in that yellow.
And if I go to the actual text, then I can see that there's a few things happening there, it has a lot of padding above it. So, if I wanted to move those two closer together, I would either remove the margin from student spotlight or remove or modify the padding from the name as well. Right now, I mentioned that I also want to go down and figure out what's happening with my footer. So, if I go down to the footer. If I hover over the footer itself, I see that it has a fair amount of padding at the top of it, but there's no margin above it. If I go to one of these pods, I can see that the pod itself has some margins, but it's not touching.
So, sometimes it's kind of baffling. Sometimes you're like, wait a minute, that's not touching, that's not touching. And so, what's causing the problem? Well, let me show you a really cool feature. Let's say I go over an interior element, like this text out with it, and just hover over that, and just let go of my mouse for a second. Here's where your arrow keys can help you. And if I hit the right arrow key, I go down and inspect children, but if I hit the left arrow key, notice it goes up. So, now I'm going up, and if you look at the tag selector, you can actually watch your progress. Look at the tag selector. If I hit the left arrow key I go to the paragraph.
Hit the next left arrow key, I go to the Div that contains the artwork. Notice the margin on the bottom, and then if I hit left one more time, aha, there's the article spotlight. Now, you can't always find these by hovering over these parent elements, because a lot of times it focuses on the children. So, by using your arrow keys, right goes in left those out, you can create a more static environment where you really being detailed about who you're taking a look at. So now, I can tell that the bottom margin on that article spotlight is the one that's actually causing the problem. So, there's my culprit.
So now, I know which properties will need elements that I'm interested in fixing are causing the issue. Correcting them should actually be pretty easy. Now, before we go and correct these, I want to focus on another feature. But before we talk about that, I want to go back for a minute and talk about this CSS Inspect feature that we've been using here. I know seems like I might be hyping it a little bit, and a lot of times people hype features. And you're think, wow, you're really hyping that more than it deserves. But, I'm actually being honest when I say I view that CSS Inspect feature that we're using here as an invaluable part of my styling workflow.
I use it all the time. If you've ever gone out and the tools within browsers like Firebug or Dragonfly or Web Inspector Kit, you know they all have similar features to this. However, when I take Dreamweaver CSS Inspect and combine it with another feature, the code navigator, they become an indispensable tool for inspecting and troubleshooting your style directly within Dreamweaver. So I'm going to show you that code navigator, and how it works with the CSS inspect in our next exercise.
- Learning how to approach web design
- Managing workspaces
- Defining a new site
- Managing starter pages
- Exploring the authoring options
- Creating links
- Setting CSS preferences and styling a page
- Placing and styling images
- Working with tabular data
- Uploading files
- Checking for broken links