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

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

Number of Visitors to this site: 
6970                   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: 6 February, 2006

Using a Table and Layers to
layout your webpages


Assignment:  (Do before Class):
Dreamweaver MX, pp. 80-90, 154-162;
Interface Design

Assignment for Friday: come to class with
a list of three or four links to websites
you want to use as models for your
Webgenre websites.
Download and install
Install Fireworks 8 trial (PC)
Install Firewoworks 8 trial (Mac)
on your
computers. These should be 30-trial
versions for both the PC and the Mac.

Assignment for Monday : Create a simple
webpage with links to three or four websites
that you want to use as model websites to
create your "Web Genre" website. Put a link
to this page on your Web Design portfolio page.

Assignment: (Do after Class)

1.  Practice using tables and layers to create grids to aid 
     your Webpage layout.

2.  Practice adding text and images to different layers in your table  layout grid.

3.  Practice changing the background color of your main table and the background colors of individual layers.

4.  Practice changing the table's dimensions from variable width to different fixed widths, for example, 640 pixels or 800 pixels  wide.  How does changing the table width from variable to  fixed width change how your webpage looks? Look at these different versions of the Digital Design class Home Page:

5. Practice saving your tables as web pages.  First select
    the "Table" and then save it as an htm file, for example,  "table.htm." The server will display this file using theexact dimensions of your table. Look at these examples:

6.  Look at some of the advertisements in your "Good Design" Notebooks.  Can you now see how they use tables and layers as grids to lay out the elements of the page.

1. Make sure you have completed your Web
homepage and Design Portfolio web page. I
will start grading them on Saturday. Here are
the requirements I will be using:
Criteria for Design Portfolio webpages . If
you are still having trouble getting your pages
on the web, please come see me this afternoon
between 12:30 and 2:30.

2. Download and install Install Fireworks 8 trial (PC)
Install Firewoworks 8 trial (Mac)
on your
computers. These should be 30-trial
versions for both the PC and the Mac.

2. Students' Favorite Websites

  2. Seedless

2.. Using non-default fonts in Dreamweaver

  1. Download "The Font Thing" onto your computer.
  2. See and Free fonts on the Web
  3. Running "The Font Thing" manage fonts on
    your PC.
  4. Using Flash Text and Flash Buttons in
    Dreamweaver to add non-default fonts
    into your pages.
  5. See cfonts example.
  6. Make sure you have the latest version of
    macromedia Flash player on your computer.

2. Dreamweaver Lesson 4: Using tables for laying out Webpages

  1. Table 1
  2. Table 2
  3. Table 3
  4. Table 4
  5. Table 5
  6. Table 6
  7. Digital Design Home Page (640 pixels wide)
  8. Digital Design Home Page (800 pixels wide)
  9. Digital Design Home Page (1000 pixels wide)

3. Size of webpages for Digital Design Class

  1. 800 x 600 pixels

  2. 1024 x 768 pixels

  3. Variable width table that open page to
    the size of the browser (Note: this is a lot
    harder to control)

4. Examples of Webpages for classwork

5. Creating a Portfolio page from scatch

  1. Scratch
  2. Sewall Portfolio 1
  3. Sewall Portfolio 2
  4. Sewall Portfolio 3

6. Use Tables and Layers to layout all your
     your Dreamweaver webpages

7. Setting Layer Stacking Order
in order to use overlapping layers

  1. You can place layers on top of each other in
    a webpage in order to hide certain sections
    of certain layers, creating a sort of collage
  2. See slayer.htm
  3. You set the stacking order of different
    layers by changing the layer's "Z-index."
  4. The lower a layer's "Z-index", the lower
    it will be in your stack of layers.
  5. See Stacking layers for an example of this.

7 Nesting Layers within Layers for precise control

  1. See Nesting layers within layers for an
    advanced version of nesting layers.
  2. To nest layers you must use the
    "Layers" window in Dreamweaver.
  3. Using the "Control" key for the PC
    and the "Command" key for the Mac,
    select the layer you want to nest
    and drag it into the layer you want
    to nest it it.
  4. You can use this same trick to nest
    multiple layers within layers.
  5. This trick can be helpful when you
    want to move one layer but readjust
    at the same time other layers' positions.

8. Programs to Download:

9.  Free Backgrounds, images, and buttons on the Web

10.  Using Tables to lay out Web Pages: Absolute versus
      Variable Width Tables.

9.  Practice Web Page lay out Basics.

10.  Answering the Question:  But What do I Put on  my Web Page?

  1. What is the purpose or goal of your site?
  2. Who is your target audience?
  3. What does your target audience expect to get at your Web Site?
  4. Do you have content for your Web Site, or do you have to create it?
  5. Who will be responsible for updating your Web Site's content?
  6. Does your Web Site's Home Page answer the "Who, What, Where, When, and Why" Questions?
  7. How can you design your Web Site for the user?
  8. How will you test your Web Site to see if it works with your target audience.
  9. How can I  make my Web Site look professional, even stylish, while at the same time making it easy to navigate and use?
  10. What interests, passions, and hobbies do you want to share with a larger audience?

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