NOTE: This webpage provides resources for this course. It is NOT the course syllabus and DOES NOT provide information about course assignments, requirements, or expectations. Please consult the course syllabus for these types of questions.


Course Rationale
DTC 355 Multimedia Authoring focuses on "writing for new computer-based media, multimedia authoring, and new rhetorics of information technology" (Course Catalog). This course is integral to the overall vision for the DTC program and so is aligned with the 10 Program Goals. The specific goals this course is intended to meet, as well as the objectives for each of these goals are detailed below. Thus in this course, students will learn to:
The assignments and activities for this course reflect these objectives and serve to assist students with reaching program goals.

Back to Top
Course Focus
As noted above, this course concerns itself with "writing for new computer-based media, multimedia authoring, and new rhetorics of information technology." The focus is in the phrase "multimedia authoring."

By "multimedia" I mean any combination of media (text, images, audio, video, animation). Generally, such media are digital in nature, and are, as the phrase says, "computer based." In fact, it is fair to say that if you have no computer then you do not have multimedia.

The word "authoring" I take to mean "creating" in the broadest sense, not as in creating a particular drawing, painting, or photograph, but rather as in creating and arranging (remixing) various content elements so that they come together in a meaningful and pleasing way. These content elements are generally defined as text, images, sound, video, and animation. They can be presented, together or alone, in various computer-based multimedia contexts, like advertising, animation, comics, cyberspace, fashion, film, Internet, television, tradidtional artistic media, music concerts, music videos, video games, and other media.

But, one of the more common, and popular, computer-based multimedia contexts, where these content elements come together, is that of the web page.

So, "multimedia authoring," for this course, will focus on the construction of web pages into which we can place and program interactive media, including textual, visual, and audio content.

Back to Top
Course Structure
This course is envisioned as a discussion-based workshop focusing on the manual creation of web pages and other digital interfaces. The course knowledge base comes from substantial reading, engaged discussion of concepts raised from this reading, and application of theory through multiple projects demonstrating engagement and ability to work conceptually and creatively with ideas explored in this course.

Back to Top
Required Course Texts and other resources
See course syllabus

Suggested Additional Course Texts
See "Web Design / Web Building—Books," below

NOTE: All required course texts should be available in the University Bookstore. Students concerned with finding these texts at lower costs should shop at www.Amazon.com with its network of thousands of used book dealers, and www.nerdbooks.com with its wholesale prices to the public.

Back to Top
Course Projects Resources
  1. Personal Portfolio Website

  2. Digital Narrative Website

  3. Critiques

  4. Putting Your Website Online
    Any current student can request a web space account on the University web server, Phoenix. The processes of creating an account, and transferring your files to your web folder are described HERE

Back to Top
Other Resources
VIS HTML Workshops
A series of 7 two-hour workshops (HTML 1-6 and Web Accessibility) offered by Vancouver Information Services (VIS).
All are free and offered at least twice each semester.
Earn certificates by completing the HTML workshops.
Workshops in Photoshop and Dreamweaver also offered.
See HERE for more information.

Web Design / Web Building—Websites
Web Design / Web Building—Tutorials
Web Design / Web Building—Books
Background Patterns
Background patterns can add interest and "zip" to your webpages. They can also create a train wreck if you are not careful to match the background with the foreground. Use these resources to find/create a background pattern image for your webpages/
Bling for your Web Pages

Cascading Style Sheets (CSS)
Color
Color Blindness
Communication
Content

Downloads
Download the following documents to your computer.
Media Conversion
Sometimes you need to convert audio, video, presentation, document, or spreadsheet files from one format to another—.WMA to .MOV, for example. The "Media-Convert" website can help. It's free, and requires no registration or software. All conversion is done through your browser. Media-Convert website

Royalty Free Music
This webpage (part of the Incompetech.com website) provides royalty free music, with a use agreement, that use in your multimedia projects. The service is free, although an optional donation of $5.00 is appreciated. Complete instructions are provided about how to get your music, and how to place credit for the music in your website. Royalty Free Music website

Typography—Online
Typography—Books/Print
Visual Display of Information
Back to Top
Templates
Template "Laurel"
Basic Webpage Template with no provision for styling page contents. Information that you should change in your webpage(s) is indicated ***like this***. Copy the code below and use as the basis for your own webpages . . .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>*** Your title goes here ***</title>

</head>

<body>

*** All content (including images) goes here, in the <body> section of your webpage

</body>

</html>

Template "Hardy"
Basic Webpage Template, with "divisions" pagewrapper, header, menu, and content <div> areas, all styled by an external stylesheet (see below). The light blue box indicates the code to call for the external style sheet. Copy the code below and use as the basis for your own webpages . . .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>*** Your title goes here ***</title>

<! -- Start link to external stylesheet -->

<link rel="stylesheet" href="***your stylesheet name here***.css" type="text/css" />

<!-- End link to external stylesheet -->

</head>

<body class="bodytext">

<! -- Create a holder for the entire page; center page in browser window -->
<div id="pagewrapper">

<! -- Start header division. Any header content goes in this division -->

<div id="header">
***This is the header division, with example content.***
<h1>My Web Page</h1>

<! -- End header division -->
</div>

<! -- Start menu division. Any menu content goes in this division. -- >

<div id="menu">

***This is the menu division, with example content.***
<ul>
<li><a href="apples.html">Apples</a></li>
<li><a href="peaches.html">Peaches</a></li>
<li><a href="pumpkin.html">Pumpkin Pie</a></li>
</ul>

<! -- End menu division -- >
</div>

<! -- Start content division. Any page content goes in this division. -- >

<div id="content">
***This is the content division, with examples of text, a table, and an image as content.***
<h3>Subheading: Text</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi orci ligula, volutpat ac, consectetuer in, tempor id, tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis congue. Suspendisse mi neque, condimentum at, viverra a, bibendum at, turpis. Mauris sit amet arcu eget tortor dapibus auctor. Integer urna orci, gravida eu, tempor a, aliquet eu, ligula.
<br /><br />
<h3>Subheading: Table</h3>
***Notice the differences between these lists and those used in the menu and footer divisions. No styles are applied here.***
<br /><br />
<table border="1">
<tr valign="top">
<td>Apples
<ul>
<li>Fuji</li>
<li>Macintosh</li>
<li>Granny Smith</li>
</ul>
</td>

<td>Peaches
<ul>
<li>Texas Red</li>
<li>Georgia Sweet</li>
<li>Washington Gold</li>
</ul>
</td>

<td>Pumpkin Pie
<ul>
<li>Mamma's</li>
<li>Grandmamma's</li>
<li>Fred Meyer's U-Bake</li>
</ul>

</td>
</tr>
</table>
<br />
<h3>Subheading: Image</h3>
***Notice the alt tag displays when the image does not.***
<br /><br />
<img width="x" height="y" src="images/mypicture.jpg" alt="A picture of me. If you see this text and not my picture, something is wrong." />

<! -- End content division -- >
</div>

<! -- Start footer division. Any footer content goes in this division. -- >

<div id="footer">
***This is the footer division, with example content.***
<ul>
<li>Apples</li>
<li>Peaches</li>
<li>Pumpkin Pie</li>
</ul>

<! -- End footer division -- >
</div>

<! -- End pagewrapper division -- >
</div>

</body>

</html>

Template "HardyCSS"—External Stylesheet
This external stylesheet controls the styles for the various "divs" in the "Hardy" web page template above. Comments are provided for each style, to explain its purpose, etc. Styles shown here are examples only. You will want to change these styles and add others to give your webpages an individual look and feel. Copy the code below and use as the basis for your own external style sheet . . .

/* Basic, universal styles for each web page; will appear on every page */

body {
padding: 0;
margin: 20px 0 0 0;
background-color: #ffffff;
text-align: center; /*To make IE 5 for Windows center pagewrapper division on screen */
font-family: verdana, arial, helvetica, sans-serif;
font-weight: normal;
}

/* This division facilitates the centering of your webpage in the browser window */

#pagewrapper {
/* Styles borders, colors, margins, etc. for entire page */
width: 760px; /* Set width for entire page contents container */
padding: 12px; /*To provide consistent padding between all inner content containers and edge of page wrapper div */
margin: 0 auto 0 auto; /*Center pagewrapper div on screen*/
text-align: left; /*left align all content within pagewrapper */
border: 2px solid #c00;
background-color: #ffffff;
}

/* Styles for the header division of all web pages */

#header {
border: 1px solid black;
background-color: yellow;
text-align: center;
}

/* Styles for the menu division of all web pages */

#menu {
float: left;
width: 160px;
border: 1px solid black;
background-color: green;
}

/* Styles for all unordered lists in the menu division of all web pages */

#menu ul {
padding: 0;
margin: 0;
list-style: none;
}

/* Styles for all list items in the menu division of all web pages */

#menu li {
padding-top: 10px;
padding-left: 15px;
}

/* Styles for the content division of all web pages */

#content {
margin-left: 165px;
padding: 8px;
border: 1px solid black;
}

/* Styles for the footer division of all web pages */

#footer {
clear: both;
border: 1px solid black;
height: 50px;
text-align: center;
}

/* Styles for all list items of all unordered lists in the footer division of all web pages */

#footer ul li {
display: inline;
list-style: none;
margin-left: 20px;
}

/* Styles for text display in all web pages */

.bodytext {
color: #000000;
font-family: arial;
font-size: 12px;
}

/* Styles for all uses of the H1 tag */

h1 {
color: red;
font-size: 48px;
font-family: verdana, arial, helvetica, geneva, sans-serif;
}

/* Styles for all uses of the H2 tag */

h2 {
color: blue;
font-size: 36px;
padding: 10px 20px 8px 50px;
margin: 0;
}

Template "Artist Statement"
Use this template to prepare the Artist Statements to accompany your projects

Artist Statement

[***Your name here***]

****SCREENSHOT IMAGE from one of your web pages here****

Statement of Purpose
[A statement of what you wanted to accomplish by creating this work]

Influences
[A statement of whom (and what works) influenced you in the creation of this work of yours]

Fit within Larger Notion of Aesthetics
[A statement detailing how your work fits within the context provide by previous work by others]

Materials
[A statement regarding the materials or programs used to create your work]

Methodology
[A statement regarding how you created this work so as to assure reaching your purpose. What techniques did you use? What steps did you take? How did you proceed?]

Desired Results
[A statement regarding what you hoped to achieve by producing this work]

Actual Results
[Provide a brief statement of the actual results of your efforts. Did you accomplish your stated purpose? If not, what were the results?]

Outcome
[How do you judge your success? Does your work achieve its stated purpose? If so, provide specific details showing how. If not, how can it be improved for greater success?]

Template "Project Evaluation"
Download this template to prepare your evaluations of your colleagues' project presentations.

Download template

Template Embedded Video
This code places a selected QuickTime video in your webpage, and provides a control interface for users. Copy the code below and use as the basis for embedded video in your own webpages. As currently configured, this code will start your movie automatically when a user opens your webpage. If you don't want this feature, change "param name="autoplay" value="false" to "param name="autoplay" value="false". Remember that QuickTime video files must have the .mov suffix. Be sure and change the video file name, ***.mov, to match your own . . .

<! -- Embed Quicktime movie -->

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256">

<param name="src" value="***.mov" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<embed src="***.mov" width="320" height="256" autoplay="true" loop="false" controller="true" pluginspage="http://www.apple.com/quicktime/">
</embed>
</object>
<! -- End Embedding of Quicktime movie -->

Template Embedded Audio
This code places a selected MP3 audio file in your webpage, and provides a control interface for users. As currently configured, this code allows the user to start and stop the audio file. Copy the code below and use as the basis for embedded audio in your own web pages. Remember that MP3 audio files must have the .mp3 suffix. Be sure and change the audio file name, ***.mp3, to match your own . . .

<! -- Embed MP3 audio file -->

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="106" height="16">
<param name="src" value="***.mp3" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<embed src="***.mp3" width="106" height="16" autoplay="false" loop="false" controller="true" pluginspage="http://www.apple.com/quicktime/">

</embed>
</object>

<! -- End Embedding of MP3 audio file -->

Back to Top
Tips and Techniques

Spacing around elements
Each different browser has its own ideas about how much space to allow around elements in your webpages. The result: your webpages do not look as uniform across different browser platforms as you might like. One solution is to use CSS to remove ALL margins and padding throughout your webpage, right at the start. To do this, use a style in your style sheet like this:

* {
margin: 0;
padding: 0;
}

This sets all margins and padding for all page elements to "zero." There is no need to declare this style in your webpage. The browser will apply it automatically from your stylesheet. You can then create styles for each element on your webpage, add the desired padding or margins, and be assured that they will look the same on different browsers.

Nested lists
Lists are very powerful for detailing and presenting information in a very readable way on your webpages. Sometimes you want to use a list within a list, a "nested list," like this:
Both the concept and the code are simple enough, but can be maddening if you don't think about what you are doing in terms of writing the code for proper display of your "nested list." Here is the code and explanations:

CODE EXPLANATION
<ul> Open main unordered list
<li>Apples Don't close this main list item until you complete the sublist under it
<ul> Open unordered sublist
<li>Fuji</li> Sublist item; open and close
<li>Macintosh</li> Sublist item; open and close
<li>Granny Smith</li> Sublist item; open and close
</ul> Close the sublist <ul>
</li> Close the "Apples" <li>
<li>Peaches</li> Main list item; open and close
<li>Pumpkin Pie</li> Main list item; open and close
</ul> Close main unordered list

Merging table cells
Tables are very useful for formatting information on your webpages. Sometimes the layout of the table cells (based on the dimension of the contents they contain) is not the most advantageous for your design concept. You can overcome this somewhat by combining table cells in either horizontal (table rows) or vertical (table columns) directions. For example, here is a table:

CODE RESULTS
<table border="1">
<tr>
<td>Cell A</td>
<td>Cell B</td>
<td>Cell C</td>
</tr>
<tr>
<td>Cell D</td>
<td>Cell E</td>
<td>Cell F</td>
</tr>
<tr>
<td>Cell G</td>
<td>Cell H</td>
<td>Cell I</td>
</tr>
</table>
Cell A Cell B Cell C
Cell D Cell E Cell F
Cell G Cell H Cell I

To combine Cell B and C, two horizontal cells, write your code like this (note "colspan" tag highlighted in red):

CODE RESULTS
<table border="1">
<tr>
<td>Cell A</td>
<td colspan="2">Cell B and C combined</td>
</tr>
<tr>
<td>Cell D</td>
<td>Cell E</td>
<td>Cell F</td>
</tr>
<tr>
<td>Cell G</td>
<td>Cell H</td>
<td>Cell I</td>
</tr>
</table>
Cell A Cell B and C combined
Note reference to Cell C is removed from code
Cell D Cell E Cell F
Cell G Cell H Cell I

To combine Cell A and D, two vertical cells, write your code like this (note "rowspan" tag highlighted in red):

CODE RESULTS
<table border="1">
<tr>
<td rowspan="2">Cell A and D combined</td>
<td>Cell B</td>
<td>Cell C</td>
</tr>
<tr>
<td>Cell E</td>
<td>Cell F</td>
</tr>
<tr>
<td>Cell G</td>
<td>Cell H</td>
<td>Cell I</td>
</tr>
</table>
Cell A and D combined
Note reference to Cell D
is removed from code		 Cell B Cell C
Cell E Cell F
Cell G Cell H Cell I

Transporting your Work
The program "Text Wrangler" on the Macintosh computer makes it quite easy to write and edit XHTML code for your webpages. It is much easier to use than "Note Pad" on the Windows side. However, there can be a problem when you create code using "Text Wrangler" and then try to edit it using "Note Pad." To be able to work with your code at both school and home, using both "Text Wrangler" and "Note Pad," follow these steps: Now, you should be able to create code at school using "Text Wrangler" on a Macintosh computer, save it onto your portable storage device, take it home, open it with "Note Pad" on a PC, and work with no trouble.

Back to Top