New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

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

Importing snippets

From: Managing CSS in Dreamweaver

Video: Importing snippets

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.

Importing snippets

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.

Show transcript

This video is part of

Image for Managing CSS in Dreamweaver
Managing CSS in Dreamweaver

41 video lessons · 20777 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 4m 12s
    1. Welcome
      1m 10s
    2. Who is this course for?
      1m 5s
    3. Using the exercise files
      1m 57s
  2. 1h 21m
    1. Controlling CSS in Dreamweaver
      2m 34s
    2. Style formatting options
      4m 59s
    3. Controlling shorthand notation
      6m 9s
    4. Building a style-focused workspace
      6m 10s
    5. CSS Styles panel overview
      8m 18s
    6. The Properties Inspector
      6m 39s
    7. Creating styles visually
      11m 32s
    8. Hand-coding styles
      8m 15s
    9. Code hinting and code completion
      7m 11s
    10. Modifying styles visually
      5m 24s
    11. Using the Code Navigator
      4m 47s
    12. Using CSS Inspect
      9m 52s
  3. 1h 14m
    1. Structuring style sheets
      4m 52s
    2. Writing a style header
      2m 40s
    3. Building a color guide
      6m 5s
    4. Writing a style sheet table of contents
      8m 46s
    5. Creating sections for styles
      9m 10s
    6. Using the CSS Styles panel to organize styles
      10m 29s
    7. Resolving conflicts
      7m 3s
    8. Organizing style properties
      9m 33s
    9. Writing a CSS reset
      5m 20s
    10. Writing global classes
      3m 57s
    11. Creating a style guide
      6m 6s
  4. 1h 7m
    1. Preparing custom starter pages
      11m 32s
    2. Building custom starter pages
      10m 8s
    3. Working with code snippets
      9m 54s
    4. Writing snippets
      11m 30s
    5. Importing snippets
      6m 3s
    6. Understanding snippets libraries
      8m 11s
    7. Building a CSS framework using snippets libraries
      10m 36s
  5. 52m 15s
    1. Writing a print style sheet
      10m 3s
    2. Creating print-specific styles
      10m 45s
    3. Preparing modular styles
      4m 33s
    4. Creating modular style sheets
      7m 9s
    5. Checking browser compatibility
      6m 25s
    6. Using conditional comments for Internet Explorer
      6m 58s
    7. Optimizing CSS with Dreamweaver
      6m 22s
  6. 38s
    1. Goodbye
      38s

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

Are you sure you want to delete this note?

No

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.