Viewers: in countries Watching now:
Managing CSS in Dreamweaver with James Williamson shows how to create cascading style sheets that are efficient, reusable, and easy to navigate. In this course, James shares tips on how to find and use panels and tools, and how to deploy style sheets to screen, print, and mobile environments. Course topics include creating customized starter pages, learning to rapidly hand-code CSS through using Snippets, and using Dreamweaver's CSS preferences to deploy lightweight styles. Exercise files are included with the course.
Once you have gone through the process of creating your layout and presentation styles, chances are that you won't want to do it again to achieve the exact same, or even similar, results. As such, finding ways of reusing your styles, whether it's for other projects for the same client or just a way of reusing the same layout with a different design, can save you a considerable amount of time. In this chapter, we are going to focus on techniques in Dreamweaver that allow you to reuse your CSS and your code for future projects. We will start by taking a look at how you can create your own custom starter pages as a way of helping you jump start future projects.
Let's take just a moment to review what it is that we are going to be building. In Dreamweaver, if you go File and choose New, you can go to Blank Page HTML, and you have some Preset Layouts that you can choose from. Notice there are 1 column versions, 2 column versions, 3 column versions, that sort of thing. And these are very solid layouts, but from time to time you might create a layout that you want to reuse over and over again for different projects, and you might want to go through the same process, stripping out all the presentational markup, just having Layout Only styles, or being able to rapidly build pages based off a certain point.
This is a really good way of doing this. So Dreamweaver also allows us to create our own custom starter pages. This requires a little bit of know- how in understanding which files within Dreamweaver you have to update. So I am going to hit Cancel and just take a moment to take a brief tour of our starter page. So what we have done here - now, a good bit of this has already been done - but the strategy and the theory behind what we are doing here is we are trying to make everything as neutral as possible, and by that I mean not related to Explore California. We want a layout that we could use really for anything. So what I have done here is stripped out a lot of the Explore California-specific styling.
We are going to talk more about that in just a moment. But we have also given some instructions. So we just opened up one of the regular Explore California pages, stripped things out, started changing things around a little bit, so that we could get a more neutral layout. Notice, for example, that we have some instructions in the body copy on how to do certain things. We have instructions for the way the header should be treated. We have instructions for the navigation, instruction for breadcrumbs, footer. So these are all things that we are basically just passing along to either ourselves, or whoever might be creating pages based off of starter page in the future.
Now, notice also that the Footer has been changed. It has been neutralized a little bit. We don't have that sort of Explore California-specific graphic in the background. We have sort of descriptive items here for where certain content goes. You will also notice that the navigation has been changed. Instead of those Explore California- specific navigation links, we just have the sample links there. And if you want to delve in that a little bit more deeply, if I switch over to the main.css and scroll down to about line say 320 or so, you are going to find these base navigation selectors, and they have been modified and commented.
So we are telling folks if you are going to use background images for your navigation instead of text, uncomment that out. We also have comments explaining how to use the background images, that sort of thing. So the code has been modified and commented to make things a little bit easier for you. It's a great recommendation. If you are going to work with starter pages, you want to add more comments to your code rather than less, so that you kind of leave yourself or other people's instructions on how to build pages with that. Okay. Now, that being said, a lot has been done, but we still have more left to do.
You will notice, for example, that the Header is still the Explore California graphic. This image probably will not be available to us when we create starter pages. Starter pages consist of HTML and CSS. So links to images are going to show up as broken links. So we certainly don't need that image there, but we need to be able to represent that image that's supposed to go there. So we are going to use a placeholder image for that. And even though we can't really see it, maybe I am going to collapse my panels down, so we can see this a little bit, we still have this background graphic in the background. It's that sort of gradient that's going down there, and that's really sort of Explore California-specific.
So those three things we want to go ahead and deal with. Okay. Let's first turn our attention to this accent image that we have on the page. I am going to go ahead and select that. Just click on it one time to select it. And I am going to Delete it, so Backspace or the Delete key now. I am going to be very careful about doing this. When I hit Delete, I am not going to move my cursor at all. I am going to leave my cursor at exactly where it is. You can see it's blinking right here. Then I am going to go up to my Common Objects. I am going to go to my Insert Images, and grab that pulldown menu, and I am going to insert an Image Placeholder. An Image Placeholder is a neat little Dreamweaver device.
It's going to give us a square or rectangle the size of the image that we need in that place, and we can name it, and even give it alt text. So I am going to say Image Placeholder. I am going to go ahead and name the one, accent_image. It has to be all one word. I just like being descriptive with it. I am going to go ahead and give it a Width of 350 pixels, and I am going to give it a Height of 315. I could give it a Color as well. I think I will just stick with sort of a neutral gray color, like this sort of light gray there. And then I can give it Alt text if I needed to, but I don't really need to. So I am going to go ahead and click OK, and now our placeholder image shows up on the page.
Well, it's the exact size that our image is going to be, but we want it to behave like that image as well. So I am going to go ahead and select this placeholder image, and the cool thing about it is I can do anything to this placeholder image that I could do to a normal image. I could Add a link to it. I could All Tag it. I could do all sorts of stuff. What's really neat is I also have this little Fireworks Create button. So when I am ready to go ahead and build this graphic, I could double-click it, or hit the Create button and go out to Fireworks or Photoshop, build the image, and have it brought back in. I am going to select this class. Grab the pulldown menu, and I am going to choose articleImage.
You will notice that it goes ahead and floats, just like the image was doing before that. Text wraps around it. And the only thing that's really kind of weird about doing this is notice the padding actually displays as a gray background. So you might be tempted to think that the image is really close to the text, but it's not. Make sure you select it, and double-check that padding to make sure that that is okay. So that takes care of the actual image tag that was on the page, but it doesn't help us with these background images that we still have. So we need to identify the rule that's driving these, and go ahead and make that rule a little bit more neutral in regards to any type of image.
So we will replace the image with color. So what I am going to do now is just click inside Explore California. This way I don't have to hunt down where that rule is. I am going to go ahead and hold down the Alt key and click on that image. And on the Mac, you would hold down the Command+Option key to bring up the Code Navigator. Now, when I bring up the Code Navigator, I notice something really weird here. I have starter_page, and I have main.css, and they have the exact same cascade. What is going on here? Well, this is something very important about starter pages. The CSS for a starter page must be located in the head of the document.
So it must be using embedded styles only. Well, all of our styles were moved to an embedded style, but it's still linked to the external style sheet, as well. So during the process of creating a starter page, the CSS styles were moved to an embedded style, but the link to the external style sheet wasn't broken. As you can see, this could cause a lot of confusion. What if I edit this instead of this? That would be a problem. So before we do any of this, what we are going to do is go right over here to the CSS Styles panel, highlight the main.css, and then just click the Trashcan icon. Now remember, don't have an individual rule selected, have the actual CSS selected.
Click the Trashcan icon one time. Clicking it repeatedly will result in other things being taken away, and you don't need that. We also don't need the link to the print style sheet, so we are going to Delete that, too. Don't have any links to external style sheets in your starter pages, because it's going to be document-relative, and you might not use the same naming conventions or even locations for styles in the next project. All right. So now all we have are embedded styles. That's going to make life a little easier. Let's come back to our header graphic here. Again, I am going to Alt+click this or Command+Option click, depending upon my platform.
And we have two header selectors. The first one gives positioning, height, that sort of thing. The second one is giving the background image. That's the one we need to edit. So I am going to go ahead and click on that, and that's going to give me the sort of Split Screen View. I am going widen that up just a little bit. And sometimes when you widen it, you have to scroll back up a little bit, but that's okay. So about line 238, I see the #header background URL. I am going to change that. I am going to highlight the entire property, which is the link to the external graphic, and I am just going to go ahead and change that to a color.
So I am going to type in #193742, and now if I click back in Design View, the graphic goes away, and the color just shows up. So that's replacing the graphic with sort of a relatively neutral color, that dark blue color, and when I create a brand-new page off of this, I will know to go in there and edit that and switch that out with the graphic. Now, how would I know that? Well, I would know it because I created this page, but somebody else wouldn't, would they? So one of the things that you can do for people, if you really feel like being nice to them, and I am going to use the Code Navigator to navigate back up into my styles, is it's not a bad idea to go ahead and add a comment to this.
And you can comment things out any number of different ways. I like commenting them out like this, right beside the property. So I can just hit space and type in: replace color with background image. And it wouldn't hurt to let somebody know what size that image needed to be, as well. So I can go up here in the header and find that the height is 237px. The width is 192. So we are 192 x 237. I found my other header, and I am going to say 237px x 192px, and I am going to highlight that, wrap it with a CSS comment, and now anybody building a page off of this will at least have some instructions on how to deal with that.
Now finally, we need to do the body tag. I am going to move up to the body tag. You will notice that the body tag is also using a background color and an image. I think color is a little too specific for this site, so I am going to go ahead and highlight that. Make it a little bit more neutral by doing #333, which is a gray, almost black, and as soon as I do that, if I switch back to Design View, I can really see that all the way around the edge, just that sort of dark color. So I am going to go ahead and save that, preview that in my browser, and now I can see there is really no Explore California-specific stuff anywhere. Neutral colors.
We have our Image Placeholder going on. We have sort of the Header area, right here, that doesn't have an image in it. This page is ready to go. So the last thing that we need to do to this page in order to make it a starter page is to give it a descriptive name. So I am going to go to File and choose Save As, and save in the 03_01 folder, and I am going to save it as 2ColExplore.htm, so 2ColExplore. So this would tell somebody it's a 2 column layout. It's based off of the Explore California Web site, or theme, or whatever you were doing.
You just want to be really descriptive with the name, or at least as descriptive as you can be within that. So I am going to go ahead and Save that, and we are ready to move on to our next exercise. Now, in this case, our page had to undergo really extensive changes before we could use it as our started page. You could tell by all of the stuff that was already done. The goal of saving a starter page is to have a neutral page layout that's not dependent upon any specific images or content. Now, in the case of the Explore California site, the one that we have been working on, this required us to pay attention to the page navigation, background images, and element styling to make sure we stripped away enough specific content to create an effective starter page.
I would really recommend going and checking out a version of the Explore California page in one of the other Exercise Files, and comparing it to the starter page and looking at the changes that have been made, so that you can sort of understand some of the decisions that were made as well. Okay. So now we have got a neutral page, with the desired layout and structure. Now, we need to let Dreamweaver know that we want to use this as a starter page, and we are going to do that in our next movie.
There are currently no FAQs about Managing CSS in Dreamweaver.
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.