1.4 Timesavers

It this final video, we're going to look at the features that will save you time when using Dreamweaver. Dreamweaver is great for automatically formatting messy code. Even if I haven't been using Dreamweaver as my main editor, I find myself going back in just to use the tools available, copying code in and out and cleaning things up. So if I create a file and imagine this is your messy code, very messy. Go to the commands option and apply source formatting and there we go. It's all beautifully tidied up and tapped or spaced in and you can choose whether you want these types of spaces in the settings. You can also clean up the HTML with the second option. And that will, obviously my code's perfect here. That will sort out various nested problems, especially from old code. Code that you may have copy and pasted from an old WYSIWYG in a CMS, that kind of thing. Similarly Word HTML that's cropped up time and time again especially from old projects or old content or Word files that people have given you you've had to deal with those and copy and paste things in and out. That can be very useful for sorting those out directly and cleaning up the files, very useful indeed. Here's a quick little tool which might be useful for testing your work on different devices. It's called Device Preview and it's down here in the bottom toolbar. You can also, down here, whilst I'm here, you can preview your work in different browsers which you'll set up and you can edit that browser list and change the order. But if you click here, you'll get a little QR code which takes you straight to this link. So if you've got a phone, you can scan this with a QR reader and it will basically give you this link to save you typing it in. If you click on that link then you can see it kind of reroutes you to a local URL and previews the page. So that can be quite handy, very handy for mobile devices when you don't wanna type in a link. And it will do the hosting for you so you don't have to set up some kind of hosting environment locally. But you do have to be logged into Creative Cloud to use that feature as it uses your ID to access their servers. Another quick little thing in live view is this ability to show some different responsive widths and to add media queries directly into your style sheet. It could be useful cuz it gives you some predefined advice settings and you can click on the little plus and the ruler up here. You can add these media query width specifications directly to your style sheet. So if we go back into the style sheet now we can see that that's been added for us. Might save a bit of typing. It can be a nice little shortcut. You can also drag this, it'll sizer along. Again, click, add it to the style sheet. It's just a useful shortcut and helps you perhaps visualize what you're doing. Another feature I love about Dreamweaver and a feature that I find myself coming into Dreamweaver just to use is a feature I've not really found in any other end package. And that's the fact that Dreamweaver knows all about your files and your filenames. It is about the HTML file names. And all image files names. And if you change them at some sort of later point in the project those changes will get rippled across the entire site. So for example here I've got a link linking to a page called Section HTML. Around an image called image1.jpg. Now if i change the name of that page at some point, say I call it Landing.html, Dreamweaver will scan through all the files and it's identified here that i've used in this particular page. And it will update that for me so there you go, it's changed the name. Now if I also change the image name which is being used here for example, decide I want to give it a proper semantic name, while Dreamweaver has Detective List found it in three different places, the index file, the landing page and in the style sheet. And I can choose to update all of those, okay. That's now become landscape. It was also used in the style sheet here. So, it's found in each one and replace it with landscape. An absolute brilliant time saver. Especially as sites get larger and larger. And you don't want to be trundling through thousands of files, changing filenames if you have to change them, or just decide to change them to make things actually kind of more logical as you go. So Dreamweaver has a useful panel called Snippets, which allows you to create and store your own set of little patterns or atoms of code that you wanna repeat across different sites. So Dreamweaver comes of the built in library of all kinds of snippets, sad little bits of code. For example in here there's all kinds. There's Lorem Ipsum, which would be useful. So if you double click, position the mouse where you want it. It will insert some Lorem Ipsum or things like metatags. You can see you get the idea, it's inserting general blocks of code which are all stored in here. And of course you can create your own. So I'll just create a new folder, snippets, and in here I'll create my own. I call this one and you get dialog box taken over and set blocks of code so like we saw the meta tags that's a block of code or you can create things that wrap around a selection. Say you want to create say a strong paragraph, say. That's a good description. So, before the selection, I would create a Paragraph tag that might have a class on it. It might also have, say, a strong tag. So that will go before the selection. That will go after it but then have a selection and double click by snippet here. You'll see we'll wrap those tags around it. So it's pretty useful, two ways of using it, blocks of repeatab;e code or elements that you want to wrap around. So another nice thing about Dreamweaver is the fact the Adobe's allowed it to be extended by the use of plug-ins, which are called extensions in Dreamweaver speak. These are things for ranging from frameworks, like big strap foundation, that kind of thing. Various grid systems, integration gate various functionality, server of various websites around which include all kinds of things from paid options to a number of free extensions. As you can see, slide shows, Palette, Pecos, PayPal, Google add-ons Htpasswd Generator, another one just Googling at random, because these things are very prolific. Support for site map generator, that could be useful. All kinds of things. So these will add functionality into Dreamweaver, which will allow you to use them kind of seamlessly. So HairNet is a really great time saving syntax that allows you to automate code creation. It's got its own little scripting syntax, which, imagine you wanted to create a nav tag with a list inside of, say, ten items with anchor links around them. Well, you can type this kind of thing using the forward arrow each time. So I want ten list items. And then when you press the tab key this gets translated into exactly what I wanted. So there's a whole syntax available on the Met to IO site and it shows you all kinds of different things that you can achieve with this syntax. So once you've learned this you can really power through your coding. Although nowadays we tend to use things like git and automatic deployment systems to upload our sites. There's still great use for an FTP client inside your coding environment and Dreamweaver's got a very good one. Is right here from the files panel. And if you expand the file viewer you get access to the remote sever and local view window. I don't really understand why remote is on the left, always feels like local should be on the left to me. You can change that in the preferences and once your FTP details are set up, there we go, we can access our files remotely and drag things between them. Another useful thing which I have used extensively in the past is the synchronization options which allows you to keep a local site in sync with a remote site. That can be really useful as long as you're very careful. So when you coming to the end of your project and you've been testing things, it could be useful to just run your code through some validation services like W3C. That's built into Dreamweaver. If you go to Window Results Validation, you can run the validation for the current page. And there we go, it's picked up but I missed out the source attribute in the image tag which is quite fundamental to the image tag itself so this can be very useful just for running things through and checking them in and it's in the diary within Dreamweaver. As also, the link check is quite useful. It can look for broken links and you can find any orphaned files that are sitting around not being used anymore.