Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
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.
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 you don'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 button you 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 control exactly how much Indentation is happening, when it happens, the Size of the Tab that's used to ended this, all of the Code Formatting options in terms of whether tag should be lowercase or uppercase. That sort of thing. So you have a lot 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 just with 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 is the Code Format Settings there as well, so if you don't want to go up to your Preferences 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 ugly awful 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 on their own line, so it's really easy to read the code and work on it, but this is maybe not the best way to actually distribute the code. You know, when you're working on larger sites, for example, every little bit of bandwidth helps.
So one of things that people recommend doing is minifying your code, meaning sort of removing all these extra spaces and line breaks, removing all that and then g-zipping it. Well minifying your code, there's a lot of script out there that they will do that for you, but one of the nice things about Dreamweaver is we have certain options 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 CSS takes 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 a significant savings. So I can save this file and then upload this and have this with the CSS that's live online, because frankly our browser parse is just fine and doesn't have trouble reading it.
You can open those up in Dreamweaver, apply your Source Formatting options to it and 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.
There are currently no FAQs about Dreamweaver CS6 Essential Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.