How to Make a Website (DW)/Step 8- Make a Text or Document Portfolio Page/Design Option: Converting to and Using HTML Documents

From WSU Technology Knowledge Base
Jump to: navigation, search

Converting and Incorporating Documents to HTML Formats

Documents can be inserted into your Dreamweaver model page depending upon the file type in several ways.

Word Documents

You have these options:

Option 1: PASTE—Copy and paste the content directly from an open Word document.

  • Works best if the original document has been saved in .docx format (the most current Word format).
  • Do NOT use if your document contains footnotes—if you have footnotes to include in your document, use Option 3: Convert.
  1. Create a document page from the model.html or index.html.
  2. Open the document in Word
    —Select all the text;
    —Copy.
  3. In Dreamweaver Use Edit>Paste Special... to insert document into the Portfolio in the table's cell/row
    — This dialog will appear:
    DW Paste special.png
    —Choose Text with Structure Plus Full Formatting...
  4. Content will automatically be converted to HTML in Dreamweaver
    —Most formatting will be converted (including italics, bold, styles, etc.).


Option 2: IMPORT—Use the Dreamweaver menu File>Import>Word...

  • This option is NOT available in Dreamweaver for the the Mac.
  • Some formatting—footnotes, styles—will be lost with this option.
  1. Create a document page from the model.html or index.html.
  2. Click to place insertion point in the cell/row of the table in the Portfolio Page created where you wish to "import" document.
  3. In Dreamweaver use the Dreamweaver menu File>Import>Word...
  4. If there are images to import, you will be prompted to give them alternate text names.


Option 3: CONVERT—Use the Word menu FIle>Save as Web Page...

  • This method will convert almost all formatting to HTML (including footnotes, styles, paragraphing, fonts, etc.).
  • Some verbose Word HTML code will be generated in this conversion. It can be removed ("cleaned") by Dreamweaver. However, if it is removed, some formatting may be lost.
  1. In Word Use the Word menu File>Save as Web Page...
    —Save the converted document as HTML into a separate folder for each document
    —Place the document folder into the root of your web site on your computer.
  2. In Dreamweaver create a document page from the model.html or index.html.
  3. In Dreamweaver open the HTML file created by Word.
    —Click on the tag for "body" to select the contents of the page.

    DW select body tag.png

    —Copy
    —Paste the contents into the cell/row/table of the document page previously created.

For Other Documents

Most applications provide an option to save or convert a document in to a Web page or HTML:

  • PowerPoint will convert all slides into HTML, into a movie or into pictures, or saved as a PDF. These can all be made into HTML content.
  • Illustrator publications can be saved as HTML, or as PDF or as image files such as PNG or JPG which can be embedded on your HTML pages
  • InDesign publications can be saved as HTML, or as PDF or as image files or Flash files to be embedded on your HTML pages

Recommended Formats for these publications are:

  • Convert PowerPoint to make HTML files if you want to display in browser; or use SlideShare if you want to embed the original slide show
    — Use menu File>Save as Web Page...
  • Convert Illustrator publications to make image files (PNG or JPG) to embed in HTML pages
    —Use menu File>Save for Web & Device....and choose an image file format
  • Convert InDesign publications to Flash
    —Use menu File>Export... and choose SWF

Other Resources

Design Options for Document Portfolios

Steps to make a website in Dreamweaver