Digital Design for the Arts and Humanities website

Digital Design homepageDaily Readings for Digitial Design courseDigital Design Course syllabusE-Mail Digital Design StudentsTechnology, Arts, and Media Program homepageSewall Academic Program homepageCU-Boulder homepage

Student Presentations of Webgenre


Assignment: Students will present Webgenre
websites to class (40 points).

1. Yale Web Style Guide

2. Sewall Digital Design Student Web Portfolios

3. Digital Photography

4. Digital Photography template page

5. Online Art Gallery

6. Web Hosting

1.  Basic Elements of a Basic Webpage for
Digital Design

2. But what do I put on a Website?

  1. The larger answer to this questions
    always depends on your focus.

  2. Just like with an essay, a website should
    have a focus, that is, be about something.

  3. Once you have narrowed down your focus,
    it is a lot easier to determine what should
    go on your website.

  4. Just like with an essay, you can have
    a too-broad focus or too-narrow focus.
    You don't want your focus to include
    the entire world.

  5. Good websites demonstrate this
    careful attention to focus. They should
    always reveal what they are about on
    first glance.

2.  Creating a Page Template for your website

  1. Example of Page Template for Digital Design website

  2. Example of Page Template for Digital Photo website

  3. You can use Fixed-width or variable-length tables
    to create the outer limits or your webpage.

  4. Be careful using variable-width tables because
    your webpage content will look different in
    different browsers with different screen resolutions.

  5. Once you have created your initial table, you can
    now use layers in Dreamweaver to layout the
    grid for your webpage.

  6. Once you have created a basic model for all
    webpages on your website, save it as a

  7. Now everytime you create a newpage for your
    website, you can do so by going to "File" and
    selecting "new from template."

  8. Using templates makes it much faster and
    easier to create additional pages for your website.

  9. See homepage for

3.Make sure you layout your website in terms of:

  1. Site Home Page

  2. Main Topic Pages for the Site

  3. Subsidiary or Secondary Pages

4.  Every page in your site should have links to the Home Page and the Main Topic Pages.  This helps give thePage a clear Information Hierarchy.

5.  Tips for creating your Web Genre Websites.

  1. Create and use a Webpage Template?

  2. Check to make sure your links and images work.

  3. Check for contrast between your text and your
    webpage background.

  4. Use invisible tables and layers to layout a grid 
    to balance the placement of images and text on 
    your page.

  5. Keep a log of what are the names of your image
    files, what fonts you use, what colors you use,
    the size of all your images in Height and Width,
    and the names of your webpage files.

  6. Try to limit your pages to no more than one-and-
    a-half screens in height.

  7. Check your spelling and try to reduce the number
    of words you use in each line of text to the absolute
    bare essentials.

  8. Does your page have a clear focal point, or does it
    have multiple points?

  9. Does your webpage have a clear information
    hierarchy, from most important elements given 
    the most emphasis and the least important 
    elements given lesser emphasis?

  10. Does your webpage look cluttered?  Does every
    thing seem to be balanced and in its place on
    the page?

6. Creating text-based navigation bars for text links

  1. See Digital Design Home Page

  2. See Web Design Portfolio

  3. In Dreamweaver, go to "Insert" and
    select "Special Characters".  Notice
    the special characters you can insert
    into your page

7. Using Dreamweaver to create Image maps

  1. See example of imagemap on

  2. When you use imagemaps, make sure you
    use "Alt" text to let the reader know where
    the link takes you.

  3. Model Buttons and Images page

8. Using Fireworks to create buttons and images for
    your Web genre websites.

  1. Before you really start work on your "web genre'
    website, you need to create a new "site" in
    Dreamweaver and a new local folder on your

  2. Model Buttons and Images page

  3. Model Image page with sun logo

  4. Model Image page with feathered sun logo

  5. Fireworks creates "png" files.  Do not put
    "png" files on the web.

  6. Use "Export Wizard" or "Export Preview" to
    save your "png" files to either "jpg" or "gif"
    files for the web.

  7. Remember, try to compress the file size of 
    your image files so that they don't take
    too long to download on the web.

  8. Demonstrate cropping and feathering an image.

  9. Demonstrate creating buttons and adding text.



















Good Web Design Sites
Award-winning Web Designs
Great Web Design Books
Sewall Class Web Designs

| Home Page  | Readings | Syllabus | Web Resources | Top of Page |

Number of Visitors to this site: 
4455      by Chris H. Lewis, Ph.D.

© 2000 by Chris H.  Lewis, Ph.D.
Sewall Academic Program; University of Colorado at Boulder
Created 1 June 2000:  Last Modified: 25 February, 2005

Digital Design Course homepage