This chapter is from the book
This chapter is from the book
This chapter is from the book
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:
<h1>My Kipple</h1>
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.
Try it Yourself: Use Find and Replace to Change Multiple Tags at Once
Find and Replace is a great tool to find content and make multiple changes to a document with only a few mouse clicks.
- Open the Find dialog by clicking Edit, Find on the menu bar or by using the shortcut Ctrl+F. Click the HTML Tags tab.
- In the Find Tag area, enter i or select it from the drop-down menu. Under Replace Action, select Change Tag from the drop-down menu. Doing so opens a third option called To. Enter em or select it from the drop-down menu (see Figure 4.9).
Figure 4.9 The HTML Tags tab under the Find and Replace dialog can be used to make document-wide changes to specific tags.
- Click either Replace All if you are confident you want to replace all the tags, or click Find Next and then Replace for each instance. When you do so, the program replaces both the beginning and end tags throughout the document.
)
You have now successfully imported and converted the contents of a Word document to standards-based code (see Figure 4.10). The final step is to save the page on top of your old one (Ctrl+S) and test it in multiple browsers to ensure that it looks the way it’s supposed to.
)
Figure 4.10 The new default.html file as it appears in Firefox.