Join David Powers for an in-depth discussion in this video Autocompletion and code hints, part of Dreamweaver CC New Features.
As soon as I type the opening angle bracket, code hints pop up. What's different about this version, is there's a description of the highlighted element at the bottom of the list. The description is truncated, but if you hover over it, you get a tool tip with the full description. Now what's been highlighted here is the anchor element, it defines a hyperlink. We're not interested in the hyperlink, what we want is a script element, so type SC, it finds script, hover over that we get the full description of what the script element is for, I'll leave you to read that yourself, To auto complete just press enter or return and then press a space, that brings up code hints for attributes.
There's no description for attributes, but what we want is the source attribute, so press S, that brings up source. Enter or return to auto complete. The source attribute requires the path to an external file, and as soon as I press enter or return, code hints not only offered me the option to browse for the file, but Dreamweaver has inspected the structure of the current site, and it offers hints for folders and files. The file that I want is in the JS folder. So as soon as I type J, it selects that.
I can press enter or return, and it auto completes. I can also use the arrow keys to select the file that I want, it's menu.js, press enter or return. That auto completes at the closing angle bracket and we're done. And that certainly makes hand coding faster and more accurate, particularly when you're working with a path to a file. Menu.js has now been added and it's been added to the related files bar, so I can access it directly through related files, and this brings us to the script that controls the display of the navigation menu, depending on the size of the view port.
What I need to with this, is to add an event template at the bottom of the script for the resize event. So if we scroll down, add a little bit of extra space after line 22 and then we start typing. It's the window element we want. That brings up code hints, again we've got a description. Tool tip, that give us the full description. If you want more details, there's an icon here. If you hover over that, it shows that it takes you to the Mozilla Developer Network with full details of the particular element that you're looking at.
I'll leave you to explore that yourself. Auto complete, press enter or return and then dot or period. What we want is the onresize event and then we're going to assign a function to that, and then as soon as I type that opening parenthesis, Dreamweaver auto completes the closing parenthesis and leaves my insertion point between the two. I don't need to put anything between the two so I just press my right arrow key and then I need a pair of curly braces.
As soon as I type of the opening curly brace, we get the closing curly brace automatically added. So it's just press enter or return and we need a closing semicolon on there and then in here, we need a conditional statement so if, then window, and what I want to do is I want to find the inner width. Now I could find inner width by typing inner first, but you can create your own shortcuts because code hints will look for characters that match anywhere in the string.
If I type RW, both inner width and outer width, have RW in them, and their immediately selected. So if I just press enter or return, it automatically completes that and I want it to be less than break point, break point is one of the arguments that I'm passing to the main function, so Dreamweaver is providing code hints for that as well. And then inside our conditional statement I need to set the class name of menu, menu is one of my variables, so I get a code hint for that, and then class name again, code hints are available.
So let's just scroll down to find the header style definition, there it is. We need to add in a new line on line 30, and I need to set the margin, so start typing margin, we get the code hints. With CSS, we also get the description at the bottom, there it is as a tool tip and there's also a link to the Mozilla Developer Network with far more details. Let's just auto complete that, press enter or return. Code hints pop ups just two suggestions, auto or inherit.
What I need to do is to set the margin to zero auto, see what happens when I press zero, up pops this little panel and tells me that by doing just one value, all sides will be set to zero, and if I press space, and add in another value auto, it tells me that the top and bottom will be zero and the right and left will be auto. The margin shorthand property will take one, two, three, or four values, so if I press space again and add in another value say five pixels, it tells me now that the top is zero, the right and the left are auto and the bottom is five pixels.
So this is very useful when working with shorthand properties or any property in fact that takes multiple values, you get his little popup that tells you what is expected. Now I don't want that third value in there so I'm just going to delete it and then put in my closing semicolon and then we need to change the color of this text here. Just scroll down a little bit, there's header p, add in a new line, then color, again we get color being offered to us with the description.
Press enter or return to auto complete and this time, the first option is to open the color picker, then it lists all of the Creative Cloud libraries that I've defined. I'll come back to that in a minute, just scroll down a little bit more, then we get all of the color keywords with a little color swatch indicating what each one looks like and I'm going to use the Creative Cloud library called Landon, that I gave you the public link to in the video on using the exercise files.
So I'm going to scroll back up to the top, select Landon and this now lists all of the colors that I've defined in that CC library, and what I want is the light purple, there it is, there's dark purple there, light purple here, just click that, it enters the value put my semicolon at the end. It looks a little but strange here, we just click inside live view everything should realign. There is is, and that's working fine now.
So there we are, the code hints in Dreamweaver CC 2017. I think that they really do live up to the claim that they speed up working in code view. The descriptions at the bottom of the pane and links to the Mozilla Developer Network should also help beginners improve their understanding of code and what it's for.
- Restricting the scope of a quick search
- Finding and replacing more selectively
- Advanced find and replace in a specific tag
- Setting the default version of PHP in Preferences
- Applying a link to selected text in Live View
- Changing information displayed in the Files panel
Skill Level Intermediate
Q: This course was updated on 10/18/2017. What changed?
A: The following topics were updated: find and replace and PHP support. In addition, new videos were added that cover code view improvements, Real-Time Preview, and CSS preprocessor integration.
Q: This course was updated on 03/30/2018. What changed?
A: New videos were added that cover using Bootstrap 4 and switching to Bootstrap 3.