multimedia authoring
DTC 355 Multimedia Authoring
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 Goals and Objectives
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 Creative Media & Digital Culture Program and so is aligned with the CMDC Program Goals and Objectives. The specific CMDC program goals this course is intended to meet, as well as the objectives for each, are detailed below.
Download a copy of The Ten CMDC Program Goals and their objectives

The assignments and activities for this course reflect and assist students reaching these program goals.
Course Focus
This course focuses on the theory and practice of combining interactive media (text, images, audio, video, animation) elements for the purpose of creativity or communication. The context for such authoring has traditionally been web pages, but evolving mobile interfaces make for interesting opportunities as well. Students read and respond to major works and demonstrate their knowledge by conceiving and constructing various digital, multimedia information objects and interfaces.
Course Resources
Digital storytelling

Critiques

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)

Downloads
Download the following documents to your computer
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
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 "Project Evaluation"
Download this template to prepare your evaluations of your colleagues' project presentations.

Download template

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.