Web Site Design and Navigation

   

Assignment: (Do before Class):
Dreamweaver MX, pp. 30-38;
Web Page Design, pp. 40-42, 56-58;
Page Design

Assignment: (Do after Class)

1. Go to the Digital Design class Website.  See if you can figure out what the site structure for this website is.  How have I laid out the site so that a user doesn't have to click more than three times to get to any page on the site?

2.Practice creating a model grid template layout that you can use to create any future webpage?  Here is an example of such a model grid template layout:

• Modelgridlayout
• Web Editor View of Modelgridlayout file

3.  You could copy this Modelgridlayout file or you can create a couple of different versions of this gridlayout   page.  I colored the backgrounds to show you how the modelgridlayout page would look on the web.

1. Basic elements of a Digital Design class Website

2. Looking at Webgenre pages for Ideas

1. Wild Oats Market
   
   
2. Birkenstock.com
   
   
3. BMX Online
   
   
4. CMT.com
   
   
5. Maccosmetics.com
   
   
6. Led Zeppelin.com
   
   
7. FreeTommyChong.org

 

2. Web Design Tools

• Web Design Color Scheme Generator (old)
  
  
• Web Design Color Scheme Generator (new)
  

3. Creating borders around images and text gifs. See Surfboader collage with border.

3. Creating Transparent Gifs

4. Adding hotspots (links) to images and text gifs.

5. Creating Collages

1. See collage.jpg: Sewall Snow Days
   
2. See surf1.jpg: Surfing Days
   
3. See hotspt.htm : National Parks and Surfing
   

5. Using the Gradient tool to create cool color schemes.

6. Creating Webpages with a table and layers

7. Use "Alt tags" on images because people
use the mouse to scroll over "dynamic web pages."

8.  How should you layout a Website

1. Lynch: Basic Information Structure
   and Lynch: Creating Site Diagrams
   
   
2. Create flowchart diagrams to help you 
   layout a website.
   
   
3. Remember your site structure depends on how you want the user to access and use the information and related pages on your site.
   
   
4. A well-thought out site structure makes 
   linking webpages within your site easier.
   
   
5. A general rule is to try to create a
   site structure that requires no more than
   "3 clicks" to get to anywhere in the site.
   
   
6. Site structure is important because web-
   surfers don't like to have to "click" too
   deep into a website to get exactly the
   information they need.
   
   
7. A good site structure is user-friendly.

9.  Envisioning Site Structure by Using Flowcharts

1. Navig.htm Hyperlink Site Structure Diagram
   
   
2. Use the Dreamweaver Site window to check the layout and links between pages on your site.
   
   
3. Planning Site Structure makes laying out
   the entire website much easer.
   
   
4. Learning to Understand Site Structure from Model Sites
   
   1. UPS Home Page
   2. Adobe Home Page
   3. National Gallery of Art
   4. NASA Home Page
   5. C-Net Home Page

10.  Creating a Page Template for your website

1. Example of Page Template for Digital Design website
   
   
2. Picture Image of the Digital Design Page Template
   
   
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 template.
   
   
7. Now everytime you create a new page 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 template for cclewis.com

11. Using Fireworks to edit images and create graphics

1. Photo Tour of Sewall and Boulder
   
2. Boulder Farmers' Market
   
3. Creating thumbnails of Images
   
4. Creating imagemaps and linking to them
   in Dreamweaver.

12. Using Fireworks to create basic buttons

1. Demonstrate creating buttons and beveling
   
2. Don't overdo beveling and drop shadows
   

13. Creating text-based navigation bars for text links

1. See Digital Design Home Page
2. See cclewis.com Web Design Portfolio
3. In Dreamweaver, go to "Insert" and
   select "Special Characters".  Notice
   the special characters you can insert
   into your page
4. See example of a Textbased bar gif.
   

14.  Web Genre websites

1. Top 100 Photography Sites
2. The Web's top Nature Photographers
3. The Web's top Photography Pages Portal

• UPS Home Page
• Adobe Home Page
• National Gallery of Art
• NASA Home Page
• C-Net Home Page

• Sklar: Planning Site Navigation
• Lynch: Basic Site Structure
• Lynch: Visual Logic
• Patrick Lynch.Net: On Web Design