- Introduction
- Opening and Editing an Existing File Using Code View
- Importing Styled Text from a Document
- Cleaning Up Imported Text
- Summary
- Q&A
- Workshop
- Quiz
- Answers
- Exercise
This chapter is from the book
This chapter is from the book
This chapter is from the book
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 word processors attach a large amount of invisible styling code to their documents—code that becomes very difficult to work with after import into an HTML file. To get rid of most of this superfluous code, Expression Web 2 can import this content and translate basic layout and styling for you. It’s not a perfect solution, but it’s far better than cutting and pasting.
In the set of files you downloaded from the book site is a Microsoft Word document called MyKippleHome.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 MyKippleHome.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 code. To import the content, you use the File command.
Try it Yourself: Add the Insert File Command to the Common Toolbar
Expression Web 2 is loaded with functions, many of which are not part of the standard toolbars. The Insert File command is one such function. But because you’ll use it often in real life, add an Insert File command button to your toolbar.
- Select Add or Remove Buttons and Customize under the Toolbar options as explained in Hour 1, “Get to Know Microsoft Expression Web 2.” Alternatively, select Tools, Customize from the menu bar.
- With the Commands tab selected, click Insert under Categories.
- Scroll to the bottom of the Commands menu and find the File option with a paperclip icon next to it (see Figure 4.6).
Figure 4.6 From the Customize dialog you can add new functionality like the Insert File command to your toolbars.
- Click the File option and drag it to the far right side of the Common toolbar. Release the mouse button and the paperclip appears on the toolbar next to the Font Color button (see Figure 4.7). Close the Customize dialog.
Figure 4.7 When you add new functions to the toolbars they will appear in the first open space to the right.
)
)
Before inserting new text, delete all the old content from the default.html file. In Design view, highlight all the content and press the Delete button on your keyboard. You should now have a blank page in Design view and the basic framework of an HTML file in Code view.
To import the content of the MyKippleHome.doc file into your project, click the Insert File button you just added to the Common toolbar. This opens a standard Select File dialog. Browse to the location where you saved the MyKippleHome.doc file. By default, the Insert File command looks for HTML files. But if you click the Files of Type drop-down menu, you see the program supports a long list of file types including Rich Text Format (.rtf), many different versions of Microsoft Word documents (.doc), Microsoft Excel worksheets (.xls), WordPerfect documents (.wpd), and many more. Simply clicking All Files (*.*) shows you all the available files. Select the MyKippleHome.doc file and click Open.