- Introduction
- Opening and Editing an Existing File Using Code View
- Importing Styled Text from a Document
- Cleaning Up Imported Text
- Summary
- Q&A
- Workshop
Importing Styled Text from a Document
What is a website if not a source of information? You need some real content to work with. Right now the default.html file contains whatever text you inserted during Hour 3. The next step is to introduce some real content. In most cases, you will either be provided with or write your own content in some form of word processing software. Your first instinct is probably to cut and paste this content straight into your page. The problem is that depending on what word processor you use, it is likely to attach a large amount of legacy formatting to the documents—code that becomes difficult to work with after importing it into an HTML file. Newer versions of word processors such as Microsoft Word 2007 have less of this code clutter, but you are still faced with a bit of a cleanup when you move the content from paper to web. To get rid of this superfluous code, you need to do a bit of code surgery.
In the lesson files for this hour downloaded from the book site is a Microsoft Word document called homePageText.doc (see Figure 4.5). Open this document in Microsoft Word, and you see a standard document with headings, subheadings, and some text.
Figure 4.5 Homepagetext.doc as it appears in Microsoft Word.
The next step is to move all this content over to the default.html file and translate the styling to standards-based markup.
With the default.html file open in Design view, select and delete all existing content. Then go to the homePageText.doc file in your word processing software, select all the text and press Ctrl+C (universal shortcut for copy) to copy the content. Next go back to the default.html file in Expression Web 3, place your cursor at the top of the page, and press Ctrl+V (universal shortcut for paste) to paste the content into the page. What you get is a page that looks almost the same as the document. But the fact that it looks almost the same means there is style code attached, and that style code has to go if you want to stay on the standards-based path.