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

Creating & Linking Web Site Content
   

Assignment: (Do before Class):
Dreamweaver MX, pp. 104-112;
Web Page Design, pp. 48-54
Site Design Themes, Site Elements

Assignment: (Do after Class)

1.  Practice creating Anchors to create links within a web page. Now create links to link text to these anchors in another part of your web page.

2.  Practice adding images to one of your web pages using "relative" links. This trick makes adding images and files to a website much easier.

3.   Read and study the diagrams in this website:
      Lynch: Basic Information Structures and
Chunking.   Now go to the Model Sites on webpage and study two or three of them to see if you can figure out how their site structure is laid out.

4. Go look at the online version of the Yale Web Style Guide . It is a great resource for basic tips on Web Design.

1. Getting copies of the 3 assigned books
from Barnes and Noble in Boulder.

2. Getting copies of earlier versions of
Macromedia Studio MX for PC and the
Mac.

3. Creating Web Genre websites

3. See Example of working Web Genre
Travel Page

4. Creating Cascading Style Sheets (CSS)

  1. Example of Style Sheet: basic.css
  2. Here is a webpage using the "basic.css"
    stylesheet.


  3. Always select link to style sheet, this allows you to use the same style sheet for an entire website
  4. You must put "stylesheet" files on the web in order for them to work. Such a file is always -- name.css
  5. You can always go back and edit and changestylesheets, which can change the look of your entire website.

2. Creating Flash Buttons in Dreamweaver

  1. Using Flash Text and Flash Buttons in
    Dreamweaver to add non-default fonts
    into your pages.
  2. See Flash Buttons.
  3. See Flash Text
  4. Make sure you have the latest version of
    macromedia Flash player on your computer.
  5. Make sure you copy your flash button files onto your website.

3. See Web Genre Model sites

  1. Matt Nichols Ski Websites
  2. Mango Web Design Portfolio

3. See Honoring Craig Kelly (Creating in Fireworks)

4. Creating Images in Fireworks

  1. Use DSC02659
  2. Save files in Fireworks as "png" files
  3. 'Png" files can be easily revised and edited
  4. Once you save a file as a "gif" or "jpg"
    it is very hard to go back and revise it.
  5. Never put "png" files on the web
  6. Try to make sure your images for the web
    are no bigger than 60K to 80K in size.
  7. If you want to use a background image,
    try to make sure it is no bigger than 120k

5.. Dreamweaver Lesson 3

  1. Using template pages to make it easy
    to quickly produce pages for a website

  2. See the Sewall Academic Program page ,
    and see the Sewall template page

  3. See the Digital Design Homepage
    and see the Digital Design template

  4. Targeting a Link to open in a different window (This is an example of using an anchor to link to a different place on the webpage)

  5. Creating image maps on a webpage. See
    Digital Design hotspots example

  6. Creating and linking to "Named Anchors"

  7. Using Tables to lay out your webpages. See Chris Lewis Design Portfolio, model 3

2.  Relative versus Absolute Paths for links

  1. See Relative versus Absolute Paths for links

  2. Targeting a Link to open in a different window (This is an example of using an anchor to link to a different place on the webpage)

  3. Remember images that don' t use the proper path names won't be displayed in a browser.

  4. Always make sure your images and links
    use the proper path names:

http://www.colorado.edu/AmStudies/lewis/Design/email.htm
(absolute link)

or

email.htm  (relative link)

4.  Using Anchors:  How to create links within a single webpage

  1. Using anchors to create internal links within a webpage

  2. Remember when you put the link name in the"link box"you want to put a "#" before the link name. For example "#top"

  3. See Anchors example in Anchors.htm

  4. How do I use an anchor to go to the top of the page?

  5. See linking1.htm for example of using
    anchor to go to the top of a page.

  6. The source code for this trick is, assuming that theanchor tag name you use is "top."


    <a name="top"</a>

  7. Make sure you put this anchor right after the code for the <body> tag. For example,

<body>

<a name="top"</a>

5. The Importance of using "Alternative Text" or  "Alt tags" to name images and graphics.

6. Planning a website

  1. Determining what Web genre your site will be in

  2. Find a couple of model websites in the specific
    web genre your website will be developed for.

  3. Create a Website Specification

  4. Who is the "target audience" for your website?

  5. Should your site have its own unique 'Domain Name"?

  6. See www.cclewis.com

  7. See Network Solutions.com

8. Web Genre Website

  1. Web Photo Galleries

9.  How should you layout a Website?

  1. Lynch: Planning Site 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.

9. Creating a navigation structure for your website

  1. Basic Navigation principles that every webpage
    in a website should answer:
  • Where am I?

  • Where can I go?

  • How do I get there?

  • How do I get back to where I started?
  1. Text-based Navigation

  2. Text-based Navigation bar

  3. Linking internally versus linking externally to websites.

  4. Opening links in new windows.

  5. Using Graphics-based Navigation.

  6. Use consistent text-based and graphics-based navigation across webpages in your website.

  Setting Links to Open in New Browser Windows
   

_self

 

This is the default behavior for links in a frameset. The linked content is loaded into the same window as the <A> element. You most likely would use this in the <A> element to override a base target.
   

_blank

 

This name opens a new browser window to display the linked content. This result can cause navigation confusion for the users, who may not realize that they are looking at a new instance of the browser.
   

_parent

 

This name lets you break out of a child frameset and display the link in the parent frameset one level up in the frameset hierarchy. This name only is useful when you have a link in a frameset that displays an embedded frameset. In most cases using embedded framesets is poor navigation design that will confuse your user.
   

_top

 

The most useful of all the special names, top lets you remove frames and display the linked content in a fresh browser window.
 

 

 

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: 
8640      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: 10 February, 2006
E-mail: cclewis@spot.colorado.edu
URL:    http://www.colorado.edu/AmStudies/lewis/Design/linking.htm

Digital Design Course homepage