Home > Articles > Web Development > Microsoft Expression Studio

  • Print
  • + Share This
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.6). By highlighting the heading at the top of the document, you see that the code is no longer as clean as it was earlier.

Figure 4.6

Figure 4.6 Although the new content looks right in Design view, the content imported from the Word document is littered with style code that needs to be removed.

Depending on what word-processing software was used to create the original .doc file, you can get anything from basic style elements like in this example (.doc file created using Microsoft Word 2007) to hugely cluttered styles and deprecated elements and inline hard coding. Expression Web 4 tries its best to get rid of the worst of the clutter, but if clean and tidy markup is what you want, it's up to you to make the document that way.

The easiest way to clean up the code is to open the page in Split view and use the Code view toolbar that is explained in detail in Hour 8, "Cracking the Code: Working in Code View." Using these tools, you can easily navigate through the content in the Design view panel and clean up the code in the Code view panel. What you want in the end is clean tags, such as <h1> and <p>, without any additional style coding.

To start off, open the Code view toolbar by clicking View on the Main menu, selecting Toolbars, and clicking Code view from the pop-out menu. The Code view toolbar docks directly under the Common toolbar. There is no right or wrong way to do this, so let's start from the top. In Code view, scroll to the top of the page and find the string of code that reads

<style type="text/css">

This is the beginning tag of the Cascading Style Sheets (CSS) code that defines what the different elements look like in the document. You learn about CSS and how they work from Hour 10, "Bringing Style to Substance with Cascading Style Sheets," and forward in this book. Right now, you want to delete all the style code from the document. To highlight all the style definitions in one easy motion, place your cursor anywhere inside the preceding string listed and click the Select Tag button on the Code view toolbar (see Figure 4.7).

Figure 4.7

Figure 4.7 The Code view toolbar has a series of tools that make navigating, selecting, and editing code quick and easy.

If you scroll up and down inside Code view, you see that the Select Tag function highlighted all the code between the beginning <style> and end </style> tags. All you have to do now is press the Delete button and the style code is gone! To make sure, click inside the Design view area and note that the headings that were blue just a moment ago are now black and bigger. That's what you want.

Next, you need to make sure that all the content has the correct tags attached to them. The headings (<h1>, <h2>) and paragraphs (<p>) are fine, but the long quote is not. In HTML, long quotes like this have a special tag, called blockquote, that uses the tag <blockquote>. But, right now, the section is defined as a paragraph with some added style code, like this:

<p class="MsoNormal" style="margin-left:36.0pt">

To apply the correct tag, use the Quick Tag Tools built in to Expression Web 4. You get a full description of the Quick Tag Tools in Hour 10. To edit the tag, place your cursor anywhere inside the preceding tag code and move your mouse to the box that reads p.MsoNormal, which is found directly under the page tabs at the top of the view panel (see Figure 4.8). Hovering over the box brings out a down arrow. Click the down arrow to display the Quick Tag Selector tools and select Edit Tag from the menu. This opens the Quick Tag Editor dialog. You can also open the Quick Tag Editor from Edit on the main menu.

Figure 4.8

Figure 4.8 The Quick Tag Editor gives you instant access to editing tools for the selected tags.

In the Quick Tag Editor, replace all the content within the two brackets with the word blockquote (see Figure 4.9). To apply the change, click the green check mark on the right side of the dialog. In response, Expression Web 4 changes the code in the beginning tag and changes the end tag to match so you don't have to do it manually. This simple substitution ensures that your code stays valid and makes the Quick Tag Editor an incredibly useful and powerful tool.

Figure 4.9

Figure 4.9 The Quick Tag Editor dialog lets you edit single tags without messing with the code.

To finalize the cleanup of the indented section, find the <span> code that inserts a further indent on the first line (<span style="mso-spacerun:yes">&nbsp;</span>) and delete it using the Select Tag tool or highlighting the entire code string.

The final step is to get rid of the calls to the style code you just deleted. If you look at one of the paragraphs in Code view, you'll note that they each start with a tag like this:

<p class="MsoNormal">
  • + Share This
  • 🔖 Save To Your Account