Difference between revisions of "Help:How to convert a Dreamweaver page to wiki"

From MicrobeWiki, the student-edited microbiology resource
Jump to: navigation, search
Line 6: Line 6:
 
# 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.
 
# 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.
 
# In the code pane, add a header tag before and after the heading text.  For example, to add a Heading 2, type <code>&lt;h2&gt;</code> before the heading and <code>&lt;/h2&gt;</code> after it.  After doign this, if you save (which refreshes the design view) the heading should appear larger than the surrounding text.
 
# In the code pane, add a header tag before and after the heading text.  For example, to add a Heading 2, type <code>&lt;h2&gt;</code> before the heading and <code>&lt;/h2&gt;</code> after it.  After doign this, if you save (which refreshes the design view) the heading should appear larger than the surrounding text.
 +
 +
When you have finished all of the headings, go through the code and remove all DIV tags, e. g. <code>&lt;div&gt;</code> and <code>&lt;div&gt;</code>.  Also remove any extraneous tables.
  
 
Once you have prepared your page, do the following to convert it to wiki format:
 
Once you have prepared your page, do the following to convert it to wiki format:
Line 15: Line 17:
 
# Scroll down and click on the "Convert HTML to wiki markup" button.
 
# Scroll down and click on the "Convert HTML to wiki markup" button.
 
# When the page loads, click inside the MediaWiki markup box and press Ctrl+A.
 
# When the page loads, click inside the MediaWiki markup box and press Ctrl+A.
# Now create a new wiki page and paste the code into the page.
+
# Now create a link to your new page by doing the following:
 +
## Open the [[Microbe Index]].
 +
## Click on the Edit link near the top of the screen.
 +
## Add double brakets before <nowiki><code>[[</code> and after <code>(]])</code><nowiki> the title of your page.
 +
## Click on Show Preview.  If the preview looks good, save the page, otherwise, fix it using the edit box and then save.
 +
## 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 [http://en.wikipedia.org/wiki/Wikipedia:Extended_image_syntax using the appropriate wiki syntax].
+
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 [http://en.wikipedia.org/wiki/Wikipedia:Extended_image_syntax using the appropriate wiki syntax].</nowiki>

Revision as of 19:45, 31 May 2006

First, you need to make sure that your page is wiki-friendly. It should not use tables or DIV tags to separate sections or to place images or their captions, since wiki has its own way of doing these things. 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.

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 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 doign this, if you save (which refreshes the design view) the heading should appear larger than the surrounding text.

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.

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.
  7. Now create a link to your new page by doing the following:
    1. Open the Microbe Index.
    2. Click on the Edit link near the top of the screen.
    3. Add double brakets before <code>[[</code> and after <code>(]])</code><nowiki> the title of your page. ## Click on Show Preview. If the preview looks good, save the page, otherwise, fix it using the edit box and then save. ## 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 [http://en.wikipedia.org/wiki/Wikipedia:Extended_image_syntax using the appropriate wiki syntax].