Video: Formatting source code

When you're coding pages it's not always easy to keep everything neat and pretty. Not only that, but if you copying and pasting code from one location to the next or inserting items to your code through some of Dreamweaver's automated features, there's no guarantee that the code is going to be formatted exactly as you want. Well, that's where Dreamweaver's Source Code Formatting option comes in. In this movie I want to take a closer look at that. Now I have the Index file open from the 05_07 and one of the reasons why I point that out to you is if I scroll through the code, you can see it just doesn't look as good as the code has in previous titles. Look at this.

Discover how to build web sites, prototypes, and more in this course on Adobe Dreamweaver CS6. Author James Williamson shows designers how to take control of their site by properly naming and structuring files and folders; how to create new documents and web pages from scratch or with starter pages; and how to add content such as text, images, tables, and links. James also provides a background on the languages that power projects built in Dreamweaver—HTML and CSS—and introduces the programming features in the application, for developers who want to dig right into the code. The last chapter shows how to finesse your project with interactive content such as CSS3 transitions and Spry widgets.

Formatting source code

When you're coding pages it's not always easy to keep everything neat and pretty. Not only that, but if you copying and pasting code from one location to the next or inserting items to your code through some of Dreamweaver'sautomated features, there's no guarantee that the code is going to be formattedexactly as you want.Well, that's where Dreamweaver's Source Code Formatting option comes in. In this movie I want to take a closer look at that.Now I have the Index file open from the 05_07 and one of the reasons why I pointthat out to you is if I scroll through the code, you can see it just doesn'tlook as good as the code has in previous titles. Look at this.

I've got a huge thing of white space there.Now that's actually not going to keep the code from displaying properly.Browsers will parse that code just fine, but it's really hard to work with.You know, imagine trying to work through this menu structure right here when youdon't have any line breaks and the codes are not formatted properly.So one of the things that you can do is just with a single-click of the buttonyou can reestablish the formatting option that you want.Now if I go up to my Preferences, I'm going to bring up Preferences again.Remember, we have this Code Format preference and this allows us to controlexactly how much Indentation is happening, when it happens, the Size of the Tabthat's used to ended this, all of the Code Formatting options in terms ofwhether tag should be lowercase or uppercase. That sort of thing. So you have alot of options right in here that you can set.

All right, I'm going to go ahead and click OK, and what I'm going to do is justwith a single click I'm going to go down to the bottom of my Code toolbar.I can see this little Paint Bucket icon.I think they stole that from Photoshop.Don't tell anybody on the Photoshop team, but I think they snagged it from those guys.All right, I am going to click on this and I can see right here I have the Apply Source Formatting option, Now I also have what you were just looking at which isthe Code Format Settings there as well, so if you don't want to go up to yourPreferences you can access it directly from the Code Toolbar there.So when I click Apply Source Formatting, boom!Automagically, look at that.

We get all of our formatting back, we don't have any more of those really uglyawful spaces and our code becomes once again pretty and easy to use.Now there is actually several different creative ways that you can use this.For example, when I go to over to my main.css file, everything in the CSS looks fine.This is easy to work with, it's easy to author, each of the properties are ontheir own line, so it's really easy to read the code and work on it, but this ismaybe not the best way to actually distribute the code.You know, when you're working on larger sites, for example, every little bitof bandwidth helps.

So one of things that people recommend doing is minifying your code, meaningsort of removing all these extra spaces and line breaks, removing all thatand then g-zipping it.Well minifying your code, there's a lot of script out there that they will dothat for you, but one of the nice things about Dreamweaver is we have certainoptions for CSS that we can apply with a simple click of the Source Formatting options. Let me show you.If I go back up to my Format Source Code and I click on my Code Format Settings,there's a little setting here for CSS.If I click on that I can start to turn things off like Indentation.I can turn off Each property on its own separate line.

I can turn off All selectors for a rule on same line, but I actually kind of like that, because that does save me some space. And I can turn off Blank lines between rules.So I can start to sort of reduce the amount of space this is taking up.I'm going to close out of that and notice for example that right now my CSStakes up a total of 671 lines.Well, if I come in and apply those new Source Formatting options to my CSS,notice I've reduced that all the way down to 168 lines, that's asignificant savings.So I can save this file and then upload this and have this with the CSSthat's live online, because frankly our browser parse is just fine and doesn'thave trouble reading it.

You and I might have trouble reading it, but a browser doesn't. And the thing isif I ever need to work on this again, you are like, wow, what if you need towork on it again, I mean how is that going to help you?Well, again, you just go right back to your Code Format Settings, you go rightback in and you start turning all of these things on that you just turned offagain, and as soon as you do that, click OK, you can come right back here, applythe Source Formatting once again, and now you can read that.It's also extremely helpful if you're ever downloading some Libraries;JavaScript Libraries or External CSS Template files that have been minified.

You can open those up in Dreamweaver, apply your Source Formatting options to itand it becomes a lot easier to work with.So those are your Source Code Formatting options inside of Dreamweaver. Be sure to take advantage of them to keep your code maintainable, organized, and easy to author and read.

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.

Already a member ?

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

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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:

new course releases

newsletter

general communications

special notices

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:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.