How to Make a Website (DW)/Step 8- Make a Text or Document Portfolio Page/Tabbed Panel Content (Spry)

From WSU Technology Knowledge Base
Jump to: navigation, search

Installing Tabbed Panel (Spry)

  1. Insert panel in a blank row—all cells in the row should be merged.
  2. Click to place your insertion point in the row
  3. Using menu Insert>Spry>Spry Tabbed Panel.
    DW installing spry tabs 01.png

    NOTE:The tabs are displaced because of the table script. Normally they show immediately above the panel.
    You may still modify them here by highlighting their text and typing a title to them as you may wish.

  4. Input content to the panel by highlighting "Contents 1"
    —see below for instructions on how to insert documents

    DW installing spry tabs 02.png

  5. Modify each tab as you wish and insert content as you wish.
  6. To add or delete tabs, select the tag for the panel and make changes in the property inspector.

    DW installing spry tabs 03.png

Inserting Documents in the Tabs

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.

Images & Flash

Image Files

Image files can be embedded as images in HMTL pages. Text can be wrapped around them. Tables used in the portfolio design can help position the image files relative to the page and to other images or text.

Use the Dreamweaver menu Insert>Image to place an image where the insertion point is set. If the image is not in the web site on the computer, you will be prompted to add it to the site and place it in the root or other folder. This should always be done.

Flash Files

In the same way Flash files can be embedded in HTML pages. Text can be wrapped around them. Tables used in the portfolio design can help position the image files relative to the page and to other images or text.

Use the Dreamweaver menu Insert>Media>SWF to place a Flash file where the insertion point is set. If the image is not in the web site on the computer, you will be prompted to add it to the site and place it in the root or other folder. This should always be done.

In addition, Flash files may include scripts which you will be prompted to save in the web site. Again, this should always be done.

Other Resources

Design Options for Document Portfolios

Steps to make a website in Dreamweaver