Cleaning Up Imported Text
Although the new imported content looks the same in Design view as it did in Microsoft Word, the code tells a different story (see Figure 4.8). By highlighting the heading at the top of the document, you see that the code is no longer as clean as it was earlier:
<font FACE="Arial" SIZE="5"><b> <p>My Kipple</p> </b></font>
Figure 4.8 Although the new content looks right in Design View, the content imported from the word document is littered with “bad” code that is not standards based.
You can see that rather than setting the heading to the h1 heading style, the font type and font size are set with two commands: FACE and SIZE. Although this way of styling content works, it is both cumbersome and messy and creates a lot of extra work for anyone who wants to change the content later. For instance, if you have several headings like this throughout your document, you have to insert all that style code every time you add a new heading. As you will see when you start adding more advanced styling to your document, this way of defining the look of your text is also limiting. Furthermore the font element is deprecated meaning it is no longer supported by the W3C and should be avoided if at all possible.
You need to get rid of all this extra code and to clean up the new document. To do this, you can make use of both Design view and Code view. First attach the proper styles to the content. As you can see when you click the heading, Expression Web 2 defines it as a paragraph with some extra styling attached. To fix this, simply set the style to Heading 1 <h1> by using the Style menu as you did before. Use the same technique to set the three subheadings to h2. HTML has a dedicated tag, blockquote, for indented or highlighted paragraphs. Select the indented paragraph and use the Style menu to restyle the paragraph with Block Quote.
Now that all the sections have the proper tags, you can start deleting all the unnecessary code. In Code view, take away all the code before and after the heading tags. Afterward each heading should look like this:
Next you need to get rid of all the extra code attached to the indented section. Because the Block Quote style automatically indents the paragraph, all the other tags are now unnecessary. Right now you have this:
<dir> <dir> <span LANG=”EN-CA”> <blockquote>Kipple is useless objects, like junk mail or match folders after you use the last match or gum wrappers of yesterday's homeopape. When nobdy's around, kipple reproduces itself. For instance, if you go to bed leaving any kipple around your apartment, when you wake up the next morning there's twice as much of it. It always gets more and more.</blockquote> </span> </dir> </dir>
With the superfluous <dir> and <span> tags deleted the section should now read
<blockquote>Kipple is useless objects, like junk mail or match folders after you use the last match or gum wrappers of yesterday's homeopape. When nobody's around, kipple reproduces itself. For instance, if you go to bed leaving any kipple around your apartment, when you wake up the next morning there's twice as much of it. It always gets more and more.</blockquote>
Finally, change the italicized and bolded words to emphasized and strongly emphasized. You can either do this manually by replacing each individual tag in Code view or in Design view by highlighting each section and clicking its respective emphasis button twice—once to get rid of the old code and once to insert the new code. This document has only a few emphasized and strongly emphasized sections, so it’s easy to make the changes manually. But because you often have to work with larger documents with many such instances, Expression Web 2 has a dedicated function to do all this work for you.