Designing the Homepage for a Website

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:

Digital Design Home Page (640 pixels wide)
Digital Design Home Page (800 pixels wide)
Digital Design Home Page (1000 pixels wide)

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:

Digital Design Home Page (640 pixels wide)
Digital Design Home Page (800 pixels wide)
Digital Design Home Page (1000 pixels wide)

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.. Using non-default fonts in Dreamweaver

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

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

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

3. Size of webpages for Digital Design Class

800 x 600 pixels
1024 x 768 pixels
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

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

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

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
effect.
See slayer.htm
You set the stacking order of different
layers by changing the layer's "Z-index."
The lower a layer's "Z-index", the lower
it will be in your stack of layers.
See Stacking layers for an example of this.

7 Nesting Layers within Layers for precise control

See Nesting layers within layers for an
advanced version of nesting layers.
To nest layers you must use the
"Layers" window in Dreamweaver.
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.
You can use this same trick to nest
multiple layers within layers.
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:

C-Net Download.com: Web Developer Tools:
Examine the many Web Design Programs you
can download to help you improve your webpages.

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?

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

Sewall Class Designs