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

From WSU Technology Knowledge Base
Jump to: navigation, search

In this Step we will suggest ways you can create a Document portfolio which can offer online access to publications, PowerPoint presentations, essays, fiction, poetry and text content.

Two basic portfolio options are suggested for your choice. The Multiple-page Document Portfolio, like the Gallery Media Portfolio, provides a catalog or list and description of your documents and then gives links to those files for display on separate pages. The Single-page Portfolio uses one of the Spry Widgets to display multiple pages inside some tabbed, or collapsible display on the single page.

  • The Single-page Document Portfolio may be the easiest for contents which are in image files or have been converted to HTML such as Word documents.
  • The Multiple-page Portfolio will be better if you are going to display PowerPoint presentations, or mixed media with video or audio content, or Flash.

The choice is yours....

What Documents Can Go into the Text/Document Portfolio?

You may wish to display various documents as examples of your work. For example:

  • Word documents
  • PowerPoint presentations
  • Illustrator, InDesign publications

You can display these items in several ways:

  • As graphical images (especially if the item is a single page); or
  • As a PDF file (especially if the item has multiple pages); or
  • As a downloaded file which opens to the native application; or
  • In special cases as embedded files(e.g, Flash, video, audio, and some others); or
  • Or as HTML formatted text—this is the most common web page format.

Recommended: unless the document can be "embedded", you should convert the document to either HTML or PDF format for display.
See below for more information about embedded formats and converting to HTML/PDF.

How Documents Get Displayed When Linked to Your Web Page

If you include a document file on your web site, it will be stored there.

If it has been formatted to HTML (and in certain other cases—e.g. embedded files), the document will be displayed in the web browser.

Generally if the document is in a format other than HTML or has not been embedded, it will show as a hyperlink.

The hyperlink will generally open a reader or native application to view the file, if one is available. This reader may be outside the browser and will launch and open the document in another window.

In some cases the web browser will display the document in a new page or tab in the browser using a "plug-in" for that reader or application.

How to Get Document Files Hosted

You can load document files onto your student web server, provided that you do not exceed the total permissible storage (currently 200 megabytes).

If you need more storage, there are several web hosting services available, including some that are free such as:

In addition, there are web hosting services that specialize in hosting video, audio or PowerPoint files by embedding.

  • SlideShare specifically to embed your PowerPoint presentations.
  • YouTube (for audio and video only)

When the hyperlink is activated, it will either display the video, audio or PowerPoint in the same or a new web page.

See Converting to and Using HTML Documents for more details and instructions on using HTML conversions in Dreamweaver pages.

We do not directly support these hosting services; they have their own online help.

First Things First: Determine the Format for Your Documents

Browsers will display HTML text and common image files and certain special formats which have been scripted for display in a web page, such as Flash.

Documents created by Word, PowerPoint, InDesign, Illustrator, etc. are all created in special "native" formats. For example, a Word document is created in the .docx, or .doc format.

Generally web browsers do not display documents or files that are in their "native" format. There are some exceptions.

When "native" documents (files) can be displayed by the browser as separate window or tab....

Sometimes certain native file format or document will be displayed in the browser, opening to a separate tab or window.

However, in these cases the menus and banners of your web site will be lost to this display. So users will need to understand that they have opened a separate window so they can navigate back to your web site.

  • Windows Internet Explorer (PC) will display Word documents, PowerPoint and Excel in the web browser if hyperlinked.
    • NOTE: no Mac browser and no other PC browser will do this.
    • Google Chrome (PC/Mac) can add an "extension" which will launch a "viewer" for a wide variety of files, including Word and PowerPoint
  • Some Browsers (Windows Internet Explorer, Safari (PC/Mac), Google Chrome) will display PDF files in the web browser window using a plug-in or extension. Firefox does NOT display PDF files in the browser window. However, none of the browsers will "embed" PDF files.
  • Virtually all browsers will display some video or audio content inside the browser, typically as content inside another tab or window, using plug-in players; however, not all video or audio formats are supported. The most reliable video source is MP4 and the most reliable audio source is MP3.

When "native" documents (files) can be embedded in an HTML page....

An embedded file or document is one that will show as a part of body of the web page.

The menu and banner of your web site will persist on the page for ease of navigation.

  • Virtually all browsers will display embedded Flash content using a plug-in.
  • Virtually all browsers will display embedded images in PNG, JPG, GIF, and other common image file formats.
  • Virtually all browsers can display embedded video and audio files, if the link on the page is specially configured to deliver the content by a stream to the window. This will require some script in coordination with a host of that streaming video or audio. Some uses of this embedding are discussed in these instructions.

Multiple-Page Document Portfolio: A Table of Links

A table design shows thumbnails or text links that take the viewer to a separate display of the selected item. The item can be a native file, an HTML page, an embedded item (e.g., Flash), an image file, or a PDF document.

A table design with an index, like a catalog, is easy to set up and easy to modify and expand.

Steps for Making a Text or Thumbnail Index from the Model Page

  1. Open the textportfolio.html page and modify the table to the column and row configuration you want.
  2. Determine your layout. Will you use text or thumbnails for your hyperlinks to your document files? Will you include descriptions of your documents.
  3. Copy your document files and thumbs (if any) into a separate folder inside your local web site (root) folder, in the format for each that is appropriate.
  4. Input text link or thumbnails, and descriptive data, as desired for your index.
    Recommended: Go to Create thumbnails and scale your graphics with Fireworks.
    —See Converting to and Linking to PDF Documents for guidance on using PDF documents in your portfolio.
  5. If any document is to be placed as a full image or as an HTML text, open your index.html or your model.html page and save a copy for each item, giving it an identifying name such as document01.html. Name them with a consistent convention, such as sample01.html, sample02.html, etc. You will be placing your "full-sized" graphic files or importing/pasting your complete HTML text onto these pages, and linking your text/thumbnail index to them.
  6. In the new page—Document01.html—insert the full-sized image, and align it (V=top;H=center). Or paste/import text/files as appropriate.
    —See Converting to and Using HTML Documents for guidance on copy/paste/importing of text and Word documents.
    —See Converting to and Using Embedded Documents (Image or Flash Formats) for guidance on pasting/importing of Image and Flash documents.
  7. Repeat for each image file and "Sample" page.
  8. Highlight the text or thumb you want to use for the hyperlink and use use pointer to create the link to the appropriate page (e.g., Sample01.html).
  9. Repeat for every link.

Single-Page Document Portfolio: Using Spry Widgets

Using one of the SPRY widgets you can create a portfolio with a single HTML page. The page will display one of three kinds of panels which can be selected to display HTML contents or other embedded content (e.g., images or Flash).

In this way a single page can serve as the display for multiple documents.

Tabbed Panel Content (Option 1)

Go to details and instructions on the use of a Tabbed Panel (Spry) Widget for a Document Portfolio.

Accordion Panel Content (Option 2)

Go to details and instructions on the use of a Accordion Panel (Spry) Widget for a Document Portfolio.

Collapsible Panel Contents (Option 3)

Go to details and instructions on the use of a Collapsible Panel (Spry) Widget for a Document Portfolio.

How to Paste/Import/Embed Documents to SPRY Panels

HTML content and embedded content are placed inside SPRY panels in the same way as they are placed inside tables or the body of any HTML page.

Other Resources

Design Options for Document Portfolios

Steps to make a website in Dreamweaver