- Introduction
- Opening and Editing an Existing File Using Code View
- Importing Styled Text from a Document
- Cleaning Up Imported Text
- Summary
- Q&A
- Workshop
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 should 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 3 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 just 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 (or 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 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:.5in">
To apply the correct tag, use the Quick Tag Tools built in to Expression Web 3. 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 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 on 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 3 changes the code in the beginning tag and also 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 take a 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 3 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. You should replace a total of six instances.
)
You have now successfully imported and converted the contents of a Word document to standards-based code. 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.