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

Using snippets and shortcuts

From: Dreamweaver CS3 Beyond the Basics

Video: Using snippets and shortcuts

Another technique that can really speed up the coding process is using snippets. If you have never used snippets, you are really going to be happy about exploring these. So we are just starting out with another blank XHTML document, so feel free to go ahead and open one of those up, and you will notice that I am in Code View. So a lot of times you are going to rewrite the same code over and over again, and you might even go through the process of copying it from an earlier document and pasting it into your new one. There is a much more efficient way of doing that, and that is saving blocks of codes as snippets. So let's say for example, every time you are opening up a document, you are writing a div tag that has an id of wrapper on it. Again, that's a very standard way of working, and you might find yourself doing that every single time you open up a file. It doesn't take that long. As you can see, it didn't take me that long to do that. But it would be nice if I could sort of automate that process so that I didn't have to do that every single time I open up a document. So I am going to go ahead and get rid of that code. I want you to turn your attention to the Snippets panel, which is actually on the right side of the screen, over here, docked with the Files and the Assets panel. So I am going to click on Snippets, so that we can view that. One of the things that you will notice is that there is already a lot of snippets in here for us.

Using snippets and shortcuts

Another technique that can really speed up the coding process is using snippets. If you have never used snippets, you are really going to be happy about exploring these. So we are just starting out with another blank XHTML document, so feel free to go ahead and open one of those up, and you will notice that I am in Code View. So a lot of times you are going to rewrite the same code over and over again, and you might even go through the process of copying it from an earlier document and pasting it into your new one. There is a much more efficient way of doing that, and that is saving blocks of codes as snippets. So let's say for example, every time you are opening up a document, you are writing a div tag that has an id of wrapper on it. Again, that's a very standard way of working, and you might find yourself doing that every single time you open up a file. It doesn't take that long. As you can see, it didn't take me that long to do that. But it would be nice if I could sort of automate that process so that I didn't have to do that every single time I open up a document. So I am going to go ahead and get rid of that code. I want you to turn your attention to the Snippets panel, which is actually on the right side of the screen, over here, docked with the Files and the Assets panel. So I am going to click on Snippets, so that we can view that. One of the things that you will notice is that there is already a lot of snippets in here for us.

There are some Comments, some Accessibility snippets. So if I click on, for example, the Content Tables, I can see no-border, and here is a lot of different snippets of text. When you click on a snippet, and I am going to sort of increase this window up here a little bit, you can actually see a preview of what that code will generate if its a visual code. There is no limit to what you can store as a snippet. So JavaScript code, CSS, anything that you use a lot of, that you reuse over and over again, really should be a snippet. Now, you can go ahead and create your own snippets, and generally you want to do that by creating your own folder, you don't want to put them into existing folders, unless Categories over here describe exactly what you want to do. So what I am going to do is make sure I don't have any existing folder selected, and I am going to go down and I am going to click on my New Snippet folder, and maybe I am just going to call these my General tags. So you can see that when you create a new folder, it just creates a folder to store all of your individual snippets. So what I will do now is we will generate a brand new snippet, and you could do that from already existing code or you can do it the way that we are going to do it here, which is just to create one from scratch.

So again, if you look at your Snippets panel, down at the bottom right hand section of that, you are going to see four icons there. We are looking at the icon, the second one from the left that looks like a new little page with a plus symbol. That's your New Snippet, so you want to click on that. Now, when you click on your snippet, the first thing it's going to ask you is what do you want to name this? And we are going to go ahead and just name this wrapper div. It should probably be something that makes sense to everybody, if you are on a team, but if it's just you, make sure that it's descriptive enough so that you understand it. Speaking of that, you can give it a Description, and I am just going to call this basic div tag with wrapper id. Now, you have got two choices when you look at the type of the snippet. You can either Wrap selection in.

What that will do for you is if you have code already selected, it will wrap that particular tag around your selection. Or you can choose Insert block, and that's for code that maybe isn't going to wrap the selection, but just needs to be inserted at the insertion point. Well, since the div tag typically wraps around other content and you might be applying this to pages that you have already created, we are going to choose Wrap selection. So where I say Insert before, I am just going to type in a div tag, and I am going to type in id=wrapper. You will notice I am not adding a closing div tag, because the closing div tag is going to go down here at the bottom where it says Insert after. So I will click there, type in my closing div tag. So that's all there is to creating a snippet. If we had Insert block selected instead, we just have one big window where all of our code would go, so you could just copy and paste it into that. When I click OK, you can see over here in my General folder now, I have a wrapper div tag. You can see up in the Preview, it's not showing me anything visually, it's just showing me the code itself. Anytime you want to use a snippet, it's really, really simple. You can drag and drop it on the page, you can use the Insert button, or you can simply double click it. So when you want to use your new snippet, and it's actually extremely simple to do, you can drag and drop the snippet onto the page. You will notice on the Snippet palette, there is actually an Insert button down there on the lower left hand corner. I actually prefer to use that when I have really complex code going on, because I have a habit of dragging it into the wrong place or just to the left or just to the right, so I generally like to get my cursor exactly where I want it. Then I can go down and click on the Insert button and it inserts my div tag. You can see exactly what it did for us here. That is awesome. You will find yourself in no time building a really large library of snippets. One of the problems that I have with Dreamweaver from this regard is it would be really nice if you could save these snippets and share them with other people.

So if I come up to the File menu item up here, I don't really see any type of Save Snippet or Load Snippet feature, and I don't see it because it doesn't exist. So hopefully the fine folks at Adobe will add that feature a little bit later on. However, you are occasionally going to want to save snippets and give them to other people, so predefine them, because you can just copy and then give them to somebody, or take them to another machine and then sort of reinstall them. Well, if you are looking in the configuration folder for Dreamweaver, you won't find them. So you have got to go to a specific location, and it's specific to each user. So what I am going to do is I am just going to, once again, minimize Dreamweaver. Go ahead and do this with me if you would like to see them. I am going to go to my hard drive and I am going to look for my file. So I am going to click on James. Now, if you are on a PC, you are going to want to browse to your hard drive and you are going to want to look at Documents and Settings. Once you actually get there, the path is the same, but for the PC, you are going to go to Documents and Settings, Local User, Application Data, Adobe, and Dreamweaver 9. Here on the Mac, I am going to go to James, Library, and then I have got to go to Application Support, Adobe, and here the paths converge, it's Dreamweaver 9, Configuration. Once I click on Configuration, I will find my Snippets folder, and when I click on that, I can see here is my RecentSnippets, but there is that General folder that I created.

When I click on that, inside that there is my wrapper_div snippet right there with the .csn extension. So I could save these folders of snippets and copy them to other locations or give them to other people and then they can use them. So that's a real quick and easy way to use snippets. I want to take just a moment to go back into Dreamweaver for a second, because the last thing I wanted to show you in this video was selecting tags quickly and easily. So I am going to go back into our blank file, and I am going to just add a couple of more tags here, just so we have got multiple tags to deal with. So I am going to go into my Code View and I am going to place my cursor right in between the div tag that I have created. I will give myself a little bit of space there.

Now, of course applying them by using the Insert button or dragging them over, or double clicking on them is easy enough, but if you are going to use a certain snippet over and over and over again, then it's a really good idea to go ahead and map a keyboard shortcut to it. So what we will do now is we will take a real brief look at the keyboard shortcuts. I am going to go up to Dreamweaver and choose Keyboard Shortcuts. Now, on the PC, you will find Keyboard Shortcuts under the Edit menu at the very bottom. So if you are on a PC you are going to find it there. So I am going to click on that and load up my shortcuts up. Now, you will notice that I just got the Dreamweaver standard set loaded, and I can't modify these. So if I grab my pulldown menu, if I had multiple sets, I would be able to see those, and I don't, so I need to make a copy of this and make my own set. So I am going to go right back over here to the right, and you can see there is an icon right over that says Duplicate set.

I am going to click on that, and I am just going to name these James keyboard shortcuts and click OK. That creates a duplicate set of this. Now, finding my snippets, if I look at my menu Commands, obviously I am not going to find them. So I have got to grab that pulldown menu, and you can see right there, fourth option down, we have Snippets. So I am going to go ahead and select that. It loads up all the snippets that you have. So if I go into General, there is my wrapper div tag snippet, and I just go right down to my Shortcuts and click Add item, and it will then activate this Press key. Now, the trick here in Dreamweaver is trying to find a keyboard shortcut that's not already assigned.

To be honest, there are a lot of keyboard shortcuts that you are never going to use, so don't feel bad about reassigning something that you are not going to use. I am just going to go ahead and do Shift+Command+5, and on the PC you might want to do Ctrl+Shift+5, because I just happen to know that that one has not assigned anything currently. If I hit Change, it will go ahead and set that. While we are modifying our keyboard shortcuts, there is one glaring error in the keyboard shortcuts that Dreamweaver has mapped by default. We are going to go ahead and correct that, because a lot of times you are going to be working on multiple files, you are going to have cascading style sheet files open, maybe even external JavaScript files, you will be modifying those and then previewing the page based off of them, and if you don't save all the files involved, then it's not going to preview. So you had to keep going up to File and choosing Save All, or you end up having to answer Yes to the message that comes up. So we will go ahead and create a keyboard shortcut for that too since we have these open. So I will grab my commands, and I will go back to my menu Commands at the top. If the File is not open, just go ahead and open it up. We will scroll down and you can see right down there we have got Save All. So I am going to go ahead and add a new keyboard shortcut for this and again, it's always tricky to find one that hasn't been mapped already. You can see my Command+Option+S already has been mapped, so let's try something else. So we are going to do Ctrl+Command+S. And again, if you are on a PC, you have already got Ctrl+S, so try a few different keyboard shortcuts until you find something that you can remember pretty easily that hasn't been mapped. So I will just go ahead and hit Change. That's got that. We will click OK. Next time I have multiple files open, I can just hit Ctrl+Command+S and that will save everything for me. So that's modifying and creating your snippets and mapping keyboard shortcuts to them. So what we will do next is we will take a look at selecting tags quickly and efficiently, no matter where you are, whether you are in Code View or Design View or whatever you are currently doing. So we will take a look at modifying our tags in a very efficient fashion.

Show transcript

This video is part of

Image for Dreamweaver CS3 Beyond the Basics
Dreamweaver CS3 Beyond the Basics

102 video lessons · 38723 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 2m 3s
    1. Welcome
      1m 17s
    2. Using the exercise files
      46s
  2. 1h 23m
    1. Reviewing the Coding toolbar
      8m 42s
    2. Customizing the Coding toolbar
      9m 52s
    3. Taking advantage of Code Hinting
      7m 20s
    4. Using snippets and shortcuts
      11m 10s
    5. Using the Quick Tag Editor
      5m 18s
    6. Using Find and Replace
      9m 50s
    7. Regular expressions
      5m 39s
    8. Using Bridge with Dreamweaver CS3
      8m 28s
    9. Round-trip editing with Photoshop CS3
      3m 40s
    10. Leveraging image variables in Photoshop CS3
      7m 32s
    11. Integrating external variables into your workflow
      6m 16s
  3. 37m 26s
    1. Understanding the CSS Styles panel
      7m 59s
    2. Understanding the Cascade
      5m 50s
    3. Understanding Inheritance
      5m 8s
    4. Understanding Specificity
      7m 5s
    5. Managing CSS styles
      5m 4s
    6. Using Design-Time style sheets
      6m 20s
  4. 2h 19m
    1. Using the new CSS template pages
      5m 59s
    2. Understanding DIV tag structure and layout
      12m 0s
    3. Understanding the CSS box model
      10m 0s
    4. Using absolute and relative positioning
      8m 35s
    5. Understanding floating elements
      7m 9s
    6. Clearing floats
      7m 19s
    7. Using floats to control page layout
      3m 45s
    8. Building structure and assigning IDs
      10m 19s
    9. Applying basic styling to structured content
      11m 14s
    10. Positioning container elements
      11m 4s
    11. Enhancing layouts with background graphics
      11m 48s
    12. Creating faux columns with background graphics
      8m 55s
    13. Creating rounded corners with background graphics
      9m 17s
    14. Building navigation with CSS
      16m 57s
    15. Using Dreamweaver's Browser Check feature
      5m 31s
  5. 53m 22s
    1. Creating properly structured forms
      6m 30s
    2. Creating accessible forms
      6m 41s
    3. Using CSS to lay out form structure
      7m 40s
    4. Creating vertical columns for form elements
      7m 48s
    5. Adding user feedback
      5m 52s
    6. Applying advanced styling to forms
      8m 11s
    7. Client-side form validation
      4m 17s
    8. Validating forms with the Spry Validation tools
      6m 23s
  6. 1h 20m
    1. Understanding the Spry framework
      3m 43s
    2. Defining a data source for use in Spry
      3m 56s
    3. Creating a Spry table
      8m 8s
    4. Using the Spry widgets
      8m 11s
    5. Connecting various data sets
      4m 50s
    6. Understanding Spry widget structures
      7m 1s
    7. Applying custom styles to Spry widgets
      6m 24s
    8. Applying additional custom styles to Spry widgets
      8m 46s
    9. Controlling Spry widget behaviors with JavaScript
      6m 0s
    10. Controlling Spry widget animations with JavaScript
      9m 31s
    11. Creating effects with Spry behaviors
      4m 42s
    12. Hand-coding Spry
      9m 11s
  7. 1h 11m
    1. Creating a base template
      8m 6s
    2. Creating editable attributes
      6m 26s
    3. Creating a new page from a template
      7m 42s
    4. Applying a template to an existing page
      4m 36s
    5. Creating nested templates
      5m 24s
    6. Using repeating regions
      6m 34s
    7. Creating editable and non-editable optional regions
      6m 0s
    8. Using template parameters
      7m 26s
    9. Using template expressions
      9m 59s
    10. Using conditional template expressions
      8m 54s
  8. 54m 40s
    1. Examining XML structure
      2m 44s
    2. Creating an XML document
      9m 9s
    3. Using the CDATA structure
      5m 7s
    4. Creating an XSLT file
      4m 33s
    5. Binding data from an XML to an XSLT document
      5m 6s
    6. Inserting repeating regions into an XSL document
      5m 16s
    7. Creating a client-side XSL transformation
      2m 52s
    8. Styling a remote RSS feed
      7m 29s
    9. Creating a server-side XSL transformation
      5m 31s
    10. Writing XSL expressions
      6m 53s
  9. 1h 2m
    1. Overview of building dynamic websites
      1m 35s
    2. Installing PHP, MySQL, and Apache on Mac
      3m 22s
    3. Installing PHP, MySQL, and Apache on Windows
      3m 54s
    4. Creating a MySQL database
      3m 16s
    5. Defining a testing server and database bindings
      6m 14s
    6. Creating a database recordset
      4m 35s
    7. Adding dynamic content to the page
      5m 14s
    8. Creating repeating regions of dynamic content
      7m 6s
    9. Filtering database records
      7m 39s
    10. Using the Live Preview
      10m 22s
    11. Passing URL parameters
      4m 23s
    12. Dynamically generating links
      5m 18s
  10. 57m 9s
    1. Understanding behaviors
      5m 16s
    2. Installing additional behaviors
      3m 39s
    3. Planning to create a custom behavior
      3m 42s
    4. Examining existing behaviors
      5m 32s
    5. Building a behavior function
      7m 23s
    6. Creating an Action file
      6m 48s
    7. Enabling behavior functions
      9m 1s
    8. Initializing the user interface for a behavior
      3m 9s
    9. Loading behaviors in Dreamweaver
      6m 47s
    10. Testing and debugging behaviors
      5m 52s
  11. 27m 12s
    1. Running reports
      7m 41s
    2. Checking and validating links
      3m 40s
    3. Using cloaking
      5m 42s
    4. Using Check In/Check Out
      4m 3s
    5. Using Design Notes
      6m 6s
  12. 20s
    1. Goodbye
      20s

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
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS3 Beyond the Basics.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.