Features
Merging Word's HTML into Web pages with Freeway
20030925 [MacUser]
[click the images to view full size]
|
1 STYLE THE TEXT. If possible, go through the Word document using your own text style sheets to format the content. The styles used in Word are the names used for the HTML styles in the Web document. If you make these match the stylesheets defined in your Web pages then you can ditch much of Word's final code. Go to the Format menu in Word and pick Style to open the Style editing dialog. Click New, choose formatting options from the Format popup menu at the bottom of the New Style window, then name it after the corresponding style in your site. In Freeway this will be listed in the Styles palette. |
|
|
2 USE YOUR OWN STYLES. Now select portions of the text and, using Word's Formatting Palette (click the Formatting Palette button in the button bar or pick Formatting Palette from the View menu), apply your named styles to the text. Feel free to use the basic styling buttons as you go to make snippets of text bold or italic. Create lists using the Lists buttons in the Formatting palette, but be aware that Word's HTML coding for lists is idiosyncratic and doesn't work well in Safari. This is something we'll address in the next step. |
|
|
3 CLEAN UP THE CODE. Save your Word document when you're done, then choose Save as Web Page from the File menu. Note that this changes the document Word actually shows, which is why we saved as a regular document first. Close the document window now; you're ready to clean up the HTML code into something a little more browser-friendly. Download the prosaically-named Word HTML Cleaner [Mac OS X only; a Classic version is available from www.vortex.co.uk/tools], click the main button and pick your Word-made HTML file. After a few seconds the cleaning will be complete; the unnecessary code will have been removed, list structures tidied up and so on. |
|
|
4 PLACE THE TEXT ON THE WEB PAGE. The next step is to set up where in your Web page design this formatted text is to appear. In Freeway select the Sketch HTML Item tool from the tool palette and draw out a regular HTML box on your page. This defines the width of the area the text will occupy, while anything below it, such as a graphic or a 'return to top of page' link, will just be pushed down as necessary. |
|
|
5 INSERT THE WORD HTML FILE. With the HTML box still selected as an object (it should show the resize handles rather than a flashing text cursor - command-click it if this isn't the case) go to the File menu and choose Import. Navigate to the HTML file you made using Word and choose that. Now your box should show an HTML file icon and the name of your chosen file. Note that if it appears with a plug-in icon instead this won't work; you probably edited it with TextEdit and lost the standard filetype identifiers. Open and 'save as' from BBEdit or even Internet Explorer to fix this. |
|
|
6 PUBLISH YOUR PAGE. When you preview or publish the Freeway page the HTML file will be merged into the code generated to produce the rest of the page. Unlike traditional server-side includes which require the server software to do this on the fly, this 'local include' process creates static HTML files containing the sum total of the layouts plus the included files. By doing this you can build any pre-existing HTML content into new layouts without ever having to work directly with the code itself - a definite bonus for anyone with time pressures or, as in this tutorial, with large amounts of formatted content that needs to be slotted into place. |
|
