Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Productivity Tips for Web Designers is the weekly series for web designers who want to enhance their design, software, and freelance business skills and streamline their workflow. Whether you're new to web design or working professionally as a seasoned designer, you'll discover techniques that can help you become more proficient at your craft. Tune in every Thursday for a new tip on topics including typography; SEO; design software like Illustrator, Photoshop, and Dreamweaver; and web coding in HTML and CSS.
- Hello, Friends. This is Sue Jenkins with productivity tips for web designers. In this week's lesson, I'll show you two methods for quickly cleaning up redundant and unnecessary HTML code in Dreamweaver. As a professor teaching web design, I observe students making a lot of typical coding mistakes as they learn how to design and code with HTML and CSS. Some of their mistakes are minor, like a missing hash tag on a hex value, or inserting images without alternative text attributes. Other mistakes are more egregious, like using zillions of non-breaking space entities for positioning, using negative numbers in their CSS without cause, and applying inline CSS style code on every single line of text.
While learning how to code, one of the things I strive to teach my students is how to embrace their mistakes and really learn from them. Plus, it's completely satisfying to find a coding error and fix it yourself. While some code cleanup tasks must be performed by hand, Dreamweaver offers an efficient way to correct some common coding mistakes. Dreamweaver includes two code cleanup commands that can instantly strip your code of rogue markup. The first tool with spiffy up your HTML, and the second tool will get rid of unnecessary content and markup from any Microsoft Word HTML files to make your pages a little more browser friendly.
You can access both tools through the commands menu in Dreamweaver and run them at anytime on any open file. Let me show you how they work. First, let's take a look at the HTML. In this file, I've deliberately added some coding errors like empty tags, redundant nested tags, a comment, and some inline font tags. So, for instance, here. There are two sets of mtags and we really only need one. Here, there's a set of span tags around the word 'legs', but there's no class style applied to the opening span tags, so that's unnecessary.
There's also two sets of nested font tags, and we try to stay away from font tags and use CSS instead. There's a couple of other things at the bottom of the page. We have an empty set of span tags here and an empty set of paragraph tags here. To run the cleanup HTML command, you go up to the commands menu, and choose 'Clean Up HTML'. This opens the cleanup dialogue box where you can select the items you'd like Dreamweaver to clean for you. Options include: empty container tags, redundant nested tags, non-Dreamweaver comments, or Dreamweaver special markup like template or library markup, and specific tags.
So, you could put anything in there, such as span tags, and you can also combine nested font tags and view a change log upon completion. For the biggest cleanup, select all the options and for demonstration purposes, I'll also add the span tag to the specific tags field. Click the 'OK' button to run your cleanup and almost instantly, Dreamweaver presents a change log identifying all the changes to the code.
Not bad. Let's take a look now at how Dreamweaver can cleanup Word HTML. If you weren't already aware of this, when you create a Word document, and then save it as an HTML webpage, Word will write markup code into your HTML file, which isn't the most standards compliant, or browser friendly thing it could do. To see what I mean, let's check out the code in this file. Take a moment to look through this file and you'll see what I mean. There's a lot of extra stuff in the HTML and CSS that we simply have no need for.
To run the cleanup Word HTML command, select 'Commands', 'Clean Up Word HTML', this opens the clean up Word dialogue box where you can pick your specific markup that you'd like Dreamweaver to clean. Here the options include: removing Word specific markup like when you save a Word doc as an HTML file. To cleanup Word specific CSS, which you definitely would want to do. To cleanup any font tags, fix any invalidly nested tags, and also apply source formatting.
Here, too, you can view the change log with this option and if you'd like to specify which Word specific markup in CSS will be cleaned, you can click over to the detail tab and select, or deselect any of these. I tend to just say do it all, do as much as you possibly can and when you're ready, you'll just click 'OK' and that'll give you the biggest cleanup. Again, when you're finished, Dreamweaver presents you a change log identifying all the changes to the code, so a lot of stuff can really be removed.
If you look at your code again now, you'll really see how much of the Word markup is gone. Code cleanup is a great habit to develop. To help you ensure you only publish pages that are clear of typical coding mistakes. Whether you clean up as you go, or occasionally need to strip out specific code from your HTML files, let Dreamweaver do some of the dirty work for you with these two easy cleanup commands.
There are currently no FAQs about Productivity Tips for Web Designers.
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.