Recommended
More Related Content
What's hot
What's hot (17)
Similar to Wiki to HTML Conversion
Similar to Wiki to HTML Conversion (20)
Recently uploaded
Recently uploaded (20)
Wiki to HTML Conversion
- 1. Copyright © 2017, Dave Derrick Converting and Migrating Wiki Markup to HTML
- 2. • This presentation describes the tasks involved in converting Wiki pages to HTML, however many of the procedures are applicable to creating, updating, and maintaining existing HTML pages. • These procedures describe using Microsoft Expressions because it is free, relatively easy to use, relatively bug-free, and offers Design (wysiwyg), Code, and Split views for easier editing. Other HTML- compatible authoring tools can be used in its place, although many of the Expression-specific details contained in this presentation may not apply. General
- 3. • Converting Wiki markup to HTML: Overview: How to Convert Wiki to HTML • Creating a new HTML site: How to Create a New HTML Site • Preparing a new HTML page: How to Add Formats to a New HTML Page How to Add the Footer to a New HTML Page How to Create and Link TOC Entries How to Add “Return to Top” Links How to Insert Illustrations RESOURCE – Microsoft Expressions Web 4, available at Microsoft Download Center here: https://www.microsoft.com/en-us/download/details.aspx?id=36179 Presentation Contents
- 4. • Open the target Wiki page and copy the page (document) title • Open Expressions • Create a new site using the page (document) title as the name • Copy and paste all Wiki page content into Expressions “default” page • Reformat the page by inserting CSS code • Add footer material to the page bottom • If internal sections use <h1> section headers, demote all h1 (except the h1 document title called “firstHeading”), h2, & h3 headers appropriately • Create hyperlink bookmarks for the page title and all section headers • Link TOC entries to section the headers • Insert Return to Top “(top)” links for all section headers • Save file using “Save as” to new file name using lowercase and underscores for spaces Overview: How to Convert Wiki to HTML
- 5. • Choose an existing folder or create a new folder for the HTML site on your local drive. • Open Expressions. • Click “New Site” icon in the tool bar, and when the “New” dialog box comes up, click “Browse.” How to Create a New HTML Site
- 6. • Browse to the appropriate folder on your local drive and select “Open.” • In the “New” dialog box, paste or type the name of the document into the “Location” box following the folder path name and click “OK.” How to Create a New HTML Site (continued)
- 7. • Double click default.html to open the new HTML page. • When the page opens, copy and paste the complete Wiki page content into the <body> block of the default.html page. • Best Practice: Save the default doc or “Save As…” your new file name at this point. How to Create a New HTML Site (continued)
- 8. How to Add Formats to a New HTML Page • Click the “Code” button at the bottom of your Expressions window. • When the HTML code view appears, scroll to the top of the file. • Click to locate your cursor just under the initial <body> block tag and insert the Embedded CSS code from the HTML Cheat Sheet document.
- 9. • In the “Code” view, scroll to the bottom of the file. • Click to locate your cursor between the final </div> tag and </body> tag, and insert the Footer Foo code from the HTML Cheat Sheet document. How to Add the Footer to a New HTML Page
- 10. • In “Design” view, click to select the full text of a header to which you wish to link. • Press Ctrl-G to bring up the Bookmark dialog box. • Click OK or press Enter to create the new bookmark. How to Create and Link TOC Entries
- 11. • Scroll to the TOC at the top, and click to select the full text of the TOC entry to which you wish to link. • Right click your selection to bring up the actions dialog box, and select the Hyperlink option at the bottom of the box. • When the Insert Hyperlink dialog box appears, click to select Place in This Document. • When the Bookmarks list appears, click to select the bookmark that corresponds to your TOC entry. How to Create and Link TOC Entries (continued)
- 12. • In “Split” view, find the header to which you wish to link. • Click to locate your cursor at the right-most end of the header text. Your “Code” view cursor will automatically move to the corresponding location in the HTML code. How to Add “Return to Top” Links
- 13. • Click to ensure your cursor is located just before the </span> tag and insert the Return-to-Top Link code from the HTML Cheat Sheet document. • Replace First_Header_Goes_Here with the firstHeading <a name=“ ” link. How to Add “Return to Top” Links (continued)
- 14. • The resulting code should look similar to the example shown here. (Note: You must retain the # in the Return-to-Top Link for the href to work.) • When you click into the Detail portion of the screen, the “(top)” link appears as shown. • Once you have created the first Return-to-Top Link in a document, copy the entire statement, from <a style=… to the closing </a> tag as highlighted above, and paste it into the remaining headers in the document. How to Add “Return to Top” Links (continued)
- 15. • Existing illustrations are copied along with text and tables, but the files are saved separately in the HTML site folder. • With the full document contents pasted into Expressions, in the File menu, select “Save As…” • When you enter the file name and click Save, the Save Embedded Files dialog pops up with a list of the files embedded in the copied and pasted document. • Click OK to save the files into your site folder along with the HTML version of the document. How to Insert Illustrations
- 16. • To insert a new illustration, copy the graphic source file into the folder containing your HTML page. • Open the graphic file and copy the graphic. (WEM accepts .JPG and .PNG. It may also accept .GIF.) • In “Design” view, create an empty paragraph where you want your graphic to be located. • Click inside the empty paragraph and select paste to insert your graphic. • When the Accessibility Options dialog appears, enter the Alternate text and Long description as needed. How to Insert Illustrations (continued)
- 17. • Click “OK,” and the graphic appears inside the selected paragraph tag. • In “Split” view, click on the illustration in the Design portion of the window to locate the corresponding HTML code in the Code portion of the screen. • In the Code portion of the screen, delete the path shown in <img src=“ ”, leaving only the file name. • For example, the highlighted portion of the image path name shown below must be deleted. How to Insert Illustrations (continued)