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)