Help:How to convert a Dreamweaver page to wiki

From MicrobeWiki, the student-edited microbiology resource
Revision as of 14:36, 1 June 2006 by Slonczewski (talk | contribs)
Jump to: navigation, search

First, you need to make sure that your page is wiki-friendly. It should not use tables or DIV tags to separate sections, to place images, or to produce image captions. Wiki has its own way of doing these things, as we'll see later. Wiki also generates its own navigation elements, i. e. table of contents and navigation bar, so all such elements should be removed from pages as well.

For a web page in HTML to be converted properly, each section heading must be formatted as a Heading style, with the highest level formatted as a Heading 2, and lower levels at Heading 3 and below. If you use these Heading styles, then a table of contents will be automatically generated for your page.

Preparing your page for wiki conversion

Remove all navigation elements and set headings to appropriate styles

Before you reformat a page for conversion, you should save it in a new file. Then, do the following in Dreamweaver for each heading on the page:

  1. In the Design view, click on the "KC" navigation bar at the top of the page. It should turn grey, indicating that it is selected. Press the Delete key.
  2. Now there should be a colored bar at the top of the page containing the article's title. Move the cursor to the top of this box. Keep moving the cursor up until it changes to four arrows. Then click the mouse.
  3. Now the box should be surrounded by a black border, indicating that it is selected. Press the Delete key.
  4. Move the cursor to just above the box containing the words NCBI Taxonomy Genome. If it changes to a down arrow, move it gradually up until it becomes a vertical bar again. Then click and drag the mouse to the top of the page. This should highlight the table of contents. Once the entire table of contents is highlighted, press the Delete key.

At this point, all navigation elements should be gone. They are unnecessary, since the wiki system automatically displays them on every page.

Next, you will need to format each of the headings so that the wiki system will automatically generate a table of contents for your page. Perform the following steps:

  1. In the Design pane, highlight the heading text.
  2. Clear any formatting that is currently applied to the text, such as bold or font size. Check the Style, Size, and Size Change submenus under the Text menu, and make sure that each one either has nothing checked or has only Default checked.
  3. In the code pane, add a header tag before and after the heading text. For example, to add a Heading 2, type <h2> before the heading and </h2> after it. After doing this, if you save (which refreshes the design view) the heading should appear larger than the surrounding text.

Remove DIV tags and unneeded tables

When you have finished all of the headings, go through the code and remove all DIV tags, e. g. <div> and <div>. Also remove any extraneous tables. The tags for tables begin with a "t" and include <table> and <td>. Don't forget to remove the closing "/" tags as well.

Performing the conversion

Once you have prepared your page, do the following to convert it to wiki format:

  1. In Dreamweaver, click on the code window and press Ctrl+A to select the code for the entire page.
  2. Press Ctrl+C to copy the code to the clipboard.
  3. Click here to open the htm2wiki converter.
  4. Click inside the "HTML source" box, then press Ctrl+V to paste your page.
  5. Scroll down and click on the "Convert HTML to wiki markup" button.
  6. When the page loads, click inside the MediaWiki markup box and press Ctrl+A.

The wiki markup is now on the clipboard. To create a blank wiki article where you can paste the markup, do the following:

Creating a link and a new article

  1. Open the Microbe Index.
  2. Click on the Edit link near the top of the screen.
  3. Add double brackets before [[ and after ]] the title of your page.
  4. Click on Show Preview. If the preview looks good, save the page, otherwise, fix it using the edit box and then save.
  5. Click on the new link and paste the code from the clipboard into the text box.

Now scroll to the bottom of the page and click on the °Show Preview° button. The page should appear pretty much the same way as it does in Dreamweaver, though you will have to upload the images separately. When you do, however, they should automatically appear inside your page. You may want to adjust the alignment of the images and add captions by using the appropriate wiki syntax.