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

Code hinting and code completion

From: Managing CSS in Dreamweaver

Video: Code hinting and code completion

To some, hand-coding can seem like a real chore. And I could certainly understand that, especially when you constantly have to make sure you're following proper syntax and writing your selectors properly. That's why I want to take a moment to explore Code Hinting and Code Completion for CSS in Dreamweaver. Both can make writing your styles faster and help ensure your styles are being written correctly. So I have the resources, and we have our main.css attached to this page. I'm just going to go to Split view so that I can see the code on one side and the design on the other. Now, if you have a limited amount of screen real estate, like I do, when you're working in this environment, one of the things I like to do is collapse these panels down to icons.

Code hinting and code completion

To some, hand-coding can seem like a real chore. And I could certainly understand that, especially when you constantly have to make sure you're following proper syntax and writing your selectors properly. That's why I want to take a moment to explore Code Hinting and Code Completion for CSS in Dreamweaver. Both can make writing your styles faster and help ensure your styles are being written correctly. So I have the resources, and we have our main.css attached to this page. I'm just going to go to Split view so that I can see the code on one side and the design on the other. Now, if you have a limited amount of screen real estate, like I do, when you're working in this environment, one of the things I like to do is collapse these panels down to icons.

So I'm just going to go ahead and do that, and you can expand those panels at anytime if you want to see the labels on them and if you want to use one, you can simply click on the panel, and it shows up, or you can expand the whole dock back again. So that's really kind of nice. It gives you enough room so that you can see what you're doing in both panes. Okay. So now what I'm going to do is I'm going to scroll down a little bit, and I'm going to write a new rule beneath these two existing rules. So I'm just going to hit Return to go down on line below the last rule. Now, we're going to write a selector for the h2 tag. So I'm just going to type in h2, and then open up a curly brace.

Now again, we see this list comes up. So where is this list coming from? Well, this is called Code Hinting and since we're working with the CSS Document, Dreamweaver is giving us our Cascading Style Sheet Code Hints. So where to get those from? Well, if we go up to our Preferences, if we go to Edit and choose Preferences, that will be Dreamweaver Preferences on the Mac, I can go to Code Hints, and I can see which items I can turn Code Hinting on and off for. Notice that CSS Property Names is on, and I want to leave that on. I don't want to change that. But if, for whatever reason, you go in to Dreamweaver and start typing, and you don't see these lists come up, this is where you would go to make sure that check box has been selected. All right! I'm going to go ahead and click OK.

Now, notice my code hinting has gone away. If I return to go down to the next line, it comes back again. But if you lose focus on that for whatever reason, if you go to a line, and you want code hinting to come up, there is a couple of different ways that you can force that to happen. Number one, you can right-click, Ctrl+ Click on the Mac, and you can say Code Hinting tools, and there are couple of things here like the Color Picker, the URL browser, and the Font List that will bring those particular items up. But if you want all of the list back like we had a second ago, the way to force that is to do Ctrl+Spacebar. Now, that's the same shortcut key on the PC and the Mac: Ctrl+Spacebar.

So it's not Command+Spacebar on the Mac. It's Ctrl+Spacebar. So that list comes right back up, and we can just begin typing. Now, if I type in F, notice that it goes right down the list into the Fs. I'm also free to scroll through the scroll- bar if I want, or I can just continue to type. It will start narrowing down the properties that are available to me. I'm actually going to go down and choose font-family from the list. So rather than continuing to type, I can just use my arrow keys to go up and down to the list, and at this place, I want to go to the font-family. I'm going to hit Return or Enter. What's going to happen is it not only types out the property for me, but notice that it adds the colon at the end of the property.

So I get proper syntax out of that as well, and I don't have to remember that colon. Now, here's another really nice thing that Dreamweaver does for me, and this is one of the reasons why I really like this Code Hinting tools. Because I chose font-family, it's not bringing up a list of available font stacks. Now, these font-stacks are customizable. You can make your own. Notice if you scroll down through the list, you can see right down at the bottom, it says Edit Font List. So if you don't see a font stack that you want to use, you can just go ahead and create your own. So in this case, I could say Arial, Helvetica, sans-serif, hit Return or Enter.

It's going to finish typing all that for me. So I don't have to worry about remembering the font-stack, spelling all of the fonts correctly, which I am really bad at, that sort of thing. I'll type in a semicolon and go down to the next line, and here I'm going to do color. So I'm going to type in co. Let Color show up. I always take just a moment to make sure that the property that I want is indeed the property that's selecting, and then I'm going to hit Enter or Return. Now, as soon as I do that, notice that it finishes that for me, and it brings up this menu of properties. One of those properties is Color. It's this nice little color palette. If I double-click that, it's going to bring up the Color Picker.

Notice that it brings me a Swatch panel with all of the Web safe colors on it. It also brings me a RGB Color Picker, so I could click on that and just mix together any RGB color that I want. Again, anytime this stuff goes away, remember I can right-click or Ctrl+click, go to my Code Hint tools, and say I want the Color Picker back and bring it back. That's really nice. But what if one of these colors is not the one you want to use? Well, that's fine too. You're free to just go ahead and type in any hexadecimal value that you want. So I'll type in the hex value here, and then I'm going to type in 51341a, and then type in a semicolon color.

Now, I'm going to go down to the next line, and I'm going to type font-weight. As soon as I do that, notice that I get a brand-new list that comes up, and here I have all of the different settings that I can choose for font-weight. If I type in n, it goes down to normal. I can hit Return and have that finish for me. So not only does it help you with the properties, it helps you with the values for those properties, as well. Let's do margin-top. Again, I can scroll through that list if I'd like. Here I'll do 1.2ems. Then I'm going to do margin-bottom. Notice that I don't have to type out the whole thing.

I can just go right to margin-b. It will isolate it, and I hit Return and finish it. So a lot of times I'll type just to a certain point where I know everything else is isolated, and then I'll finish that. We'll do 1em, and we'll finish that up. Cool! So there is our h2 rule. We've used almost all of our Code Hinting tools. There is one more property I want to show you. So to do that, I'm going to scroll up, and modify our body selector. So just after the font I'm going to hit Return to create a brand-new line, and I'm going to type in b, for background. Now, notice what happens when I hit Return or Enter if I'm isolated on background.

A couple of things come up. The background property can have colors applied to it. It can have background images, all sorts of things. So the first thing I'm going to do is a color. Now, I could choose the Color Picker like we've just seen, or I can just type in a hex value. So I'm just going to do that. So I'm going to type in #e1d8b9, then I'll hit Space. Now, Dreamweaver again is very intelligent. It says, okay, I know what you can do next. You could put a URL or whatever you want. If I type in u, notice that it goes right to URL, and it allows me to choose a background image. Now, what I really like about this is if I hit Return right now, or Enter, or click on this, it's going to allow me to browse for my background image.

So I'm not going to have to type out the path for it. I'm not going to have to remember all of that. So I'm just going to go in the 01_09 folder/Images directory. I'm going to switch to Details view, so I can see this a little bit better, and I'm just going to move this up a little bit. I'm going to scroll down and find my page background right there. I will click OK, and notice it goes ahead and finishes typing out that for me. So that URL, all that stuff, I did not have to type that. I did not have to know the path to that. I can just let Dreamweaver finish that for me. Then I'm going to type in repeat-x, so it will repeat along the x axis.

And I'll do a Save All, and I'm going to switch over to Design view now. Now, I can see that background image showing up behind my page. Cool! Now, hand-coding can be a little tedious at times. But if you take advantage of Code Hinting, Code Completion and many of the shortcuts that we have available to us, it can really dramatically speed up that code writing process. Once you're familiar with those techniques and begin to use them like they are just second nature to you, you're going to find that hand-coding is the quickest and easiest way to create styles within Dreamweaver.

Show transcript

This video is part of

Image for Managing CSS in Dreamweaver
Managing CSS in Dreamweaver

41 video lessons · 20867 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
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 Managing CSS in Dreamweaver.

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.