Start learning with our library of video tutorials taught by experts. Get started

Productivity Tips for Web Designers
Illustration by John Hersey

Productivity Tips for Web Designers

with Sue Jenkins

Video: Cleaning up redundant and unnecessary code

- 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.

Watch this entire course now —plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Watch the Online Video Course Productivity Tips for Web Designers
2h 15m Appropriate for all Jul 31, 2014 Updated Dec 18, 2014

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.

Subjects:
Web Web Design Web Foundations
Author:
Sue Jenkins

Cleaning up redundant and unnecessary code

- 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.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

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.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Productivity Tips for Web Designers.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

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

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

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:

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:

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

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.