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.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 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 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 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 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"> </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">
Try It Yourself: Use Find and Replace to Change Multiple Tags at Once
With the blockquote created only, a few more edits are necessary to make the code absolutely clean. If you look at the paragraphs, you see that each of the tags has an added style class call, like this:
<p class="MsoNormal">
You already deleted the MsoNormal style class earlier in this hour, so this call is no longer necessary. You could use the Quick Tag Editor to remove each of these calls manually, but because there are several instances of the same call, it is quicker and easier to use the Replace function instead.
Find and Replace is a great tool to find content and make multiple changes to a document with only a few mouse clicks:
- In Code view, highlight the entire <p> tag (<p class="MsoNormal">).
- Open the Replace dialog by clicking Edit, Replace under on the menu bar or by using the shortcut Ctrl+H.
- In the Find What box, Expression Web 4 has already entered your highlighted selection
<p class="MsoNormal">
. In the Replace With box, type
<p>
(see Figure 4.10).
Figure 4.10 The Find and Replace dialog lets you find and replace any content within both Code view and Design view, just like the similar function would in a word-processing application.
- Click Replace All if you are confident you want to replace all the tags, or click Find Next and then Replace for each instance. If you click Replace All, a dialog opens warning that this action cannot be undone. Click OK and all the instances are replaced. When the operation is finished, a new panel named Find 1 opens up at the bottom of the workspace. It reports that six occurrences have been replaced.
)