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.
At this point, I hope you are getting an understanding of how helpful snippets can be in reusing code and speeding up the page creation and CSS writing process. In a larger team environment, or working with other developers, they can be a great way to share code from one team member to another, or just to make sure that everybody is using the most up-to-date code. Well, that's true, but there's just one problem. The Snippets panel, as you can see right here from going to the menu and looking at that, does not allow you to export, import or share snippets.
They are local to your machine, and your machine only. But hey, all is not lost. In this movie, I'm going to show you how to locate your snippets and share them with other users. Then in the process, we are going to load some snippets that we'll need for the rest of the chapter. So I'm in Dreamweaver, but Dreamweaver cannot help me here. I need to browse outside into my hard drive. So of course, you guys on the Mac are going to go to a slightly different location than I am. I'm going to open up an Explorer window here in Windows 7. If you are on Mac, you can open up a Finder window, and what you're looking for, there's snippets located in actually two locations, and I want to show you where you can find them.
Now, the first place you can find them is in Program Files, or your Application Folder. So, for example, if I open up Program Files here, go into Adobe, and let me stretch this out a little bit, because I don't have quite enough room just yet, Dreamweaver CS5 and look under configuration, inside that, I'll find Snippets. Now, these are the snippets that come with Dreamweaver. You're certainly welcome to go ahead and change them here; however, a better location for your snippets is in your local application data. That way, if you ever have to reinstall Dreamweaver or have to wipe clean some files, those will still be there.
So what I'm going to do is close my Program Files, and I'm going into the Users. Now, on the Mac, of course, you are going to go into your Users, and you are going to go into your Library. On the PC, I'm going to go into my Local User, which is me, James Williamson > application data (AppData), and I want to find Roaming. When I open up Roaming, I want to open up Adobe and browse down and find Dreamweaver CS5. So this is not in the most intuitive of locations. I'm going to open up Dreamweaver CS5, English US (en_US) > Configuration, and there are my Snippets.
Now, these are my local snippets. You will notice that we have CSS, Structure. So these are the snippets that we've added in our past movies. Now, if you're on the Mac, you are going to go to your User Data, and you are going to go into your Local Library, find your Application Data inside that, find Dreamweaver CS5, and you want a look in your Configuration folder, and you'll find Snippets. So they are in roughly the same location. You need to basically, no matter what system you're on, go into your Users Data, find your Local Application Data, and you should be able to find these.
Sometimes they are little harder to find than others, but you should be able to find them. Okay! Now what I'm going to do now is keep this window open, and I'm going to open up another window that's pointed at my desktop. Looking at my desktop, I'm going to find the Exercise Files folder. Open that up. I'm go inside the Chapter_03 directory, and what I'm looking for is 03_05. There is a folder in there called snippets. Now, inside my snippets folder, I have a folder that's called Explore_Theme. So what I've done here is created a much larger theme here.
In the past, in our snippet movies, we've created one or two snippets and kind of done a little bit from organization, but here, this is on a much larger scale. So what I want to do now is I want to take this Explore_Theme, and I want to copy it. I am going to copy this directly into the CSS folder that we created earlier, because that makes sense for the organization. These are full CSS snippets. So I'm going to drag it over to CSS. Make sure I'm copying it, in case I ever need to go back in, and work with it again, and then it just should copy right over. Now if I go into CSS, there is the Explore_Theme. So now inside my CSS folder, I have the Explore_Theme snippets. Okay! So we know that they've copied there.
Now, let's take a closer look at them, but in order to do that, I need to go back in the Dreamweaver. So I'm going to go ahead and close both of these windows, and you will notice we don't really see a change over CSS folders. We don't see any Explore_Theme. That's because in order to refresh that, we are going to need to close Dreamweaver and then open it back up again. So let me do that really quick. I'm just going up to Dreamweaver File and choose, Exit. Now when I go into my Snippets panel and open up CSS, there is the Explore_Theme. Now I mentioned that we are going to examine this in a little bit more detail. So, if I open up the Explore_Theme, you can see this is a lot larger.
We have folders for CSS Resets that we can use within this theme. We have place for our form styling, Global Classes, Global Constants, Layout Styles, Navigation, Presentation Styles, Tables, and Utilities. So we've got all these different categories of styles that we can sort of build this off of. Now what you're seeing here is what I like to call a theme. The Explore California Web site has that sort of a two-column layout with a small header. It's more like a badge header. It has the footer at the bottom of that. I might want to reuse that from time-to-time.
So in order for me to reuse that, building a theme is really nice. Notice that if I open up Layout Styles, for example, that I have even styles inside that. I have one design to target a 1020 screen resolution and other one designed to target a 930 screen resolution. So you create different layout styles for targeted resolution, sizes. Notice that I've got different headers. I've got a larger header and a smaller header based on the same layout, and with enough proper planning, you can really create a structure that's going to be extremely flexible, that will allow you build any project you want to build that the Explore California theme would be appropriate for.
Now, I'm not going to sugarcoat what we just did here. Sharing and moving snippets is a pain, no doubt about it. Instead of being able to export and import snippets, or even accessing them from a shared directory, you have to manually copy and paste them into local directories on each individual machine. Now, that may seem like a deal breaker, but don't let this little bit of manual labor dissuade you from utilizing snippets. While needlessly complex, the ability to distribute snippets to team members, or even simply moving them from one machine to another, gives you an extremely powerful way to distribute and reuse code.
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.