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

Working with Frames & Splash Pages
   

Assignment due on Friday: Come to class on Friday,
March 11, with a short description of the larger goal
and focus of your next website. (40 points)



1. Image Websites: Many students did not do the
assignment that was due on Friday, which was a
short description of the purpose and goals of
your image website. Your image website will be
due on Monday, March 28th.

2. What is the purpose of the Image website:
To design a website that focuses on using images
to draw the reader into the site and tells a larger
story through the use of images.

3. Example of an Image Website:

--Cambodian Outreach Project homepage

--Cambodian Outreach Project template

--Pebblebeach.com

--The Masters.org

--JackJohnsonMusic.com

4.. Creating Splash Pages

  1. Javascript to create a fancy Splash Page

    --Example of Sewall Splash Page

  2. Javascript for creating an Automatic Refresh Effect

  3. Using Automatic Refresh on your Page to
    create a Splash page

  4. Let the User Skip the Splash Page
  5. Free Flash intros and Splash Pages
  6. Flash Splash Page:  Volleyball.com
  7. Example of Splash Page for Digital Design
  8. Chris Lewis Splash Page Demo
  9. Chris Lewis Splash Page Demo 2
  10. Spash Pages may Drown your Site
  11. Two Examples of Automatic Refresh Splash Page

    1. Basic Example of a Webpage--CNN.com

    2. Basic Example of a Webpage--slpash.htm


  12. Code for Automatic Refresh Splash Page.
    Add this code just above the </head> tag:

    <META HTTP-EQUIV="REFRESH" CONTENT="5; URL=HTTP://www.cnn.com">

5. Adding a Splash page to an Older Website

  1. What do you do if you want to add a Splash Page
    but you already have a URL for your website
    such as "index.htm"?

  2. This is a simple trick.  Change your website's
    home page to "index1.htm" and give the 
    Splash page for this site the "index.htm" URL.

  3. This way every time a user clicks your "index.htm"
    URL they will be taken the Splash page for this
    website and then taken to the site's homepage.

6. Creating Frames

  1. Guide to Frames Usage

  2. To Frame or not to Frame

  3. Frames Example: American History and Film

  4. Frames Example: American Studies 2010

7.  Creating Frames Pages

  1. Test Frames 1

  2. Test Frames 2

  3. Test Frames 3

  4. Test Frames 4

  5. HTML Code for Test Frames 1

8. Creating Frames in Dreamweaver MX

  1. In Dreamweaver, select "Insert" and
    choose "Frames" Dreamweaver gives you 
    a choice of the Frames layout you can use.

  2. To edit your frame properties, select "Windows"
    and choose "Frames." A "Frames" toolbox
    will now open.

  3. Another way to create Frames is to go to
    the Dreamweaver "Objects Menu" and  
    select the "arrow" right next to Common
    and a menu will pop up.  Now select
    Frames from that Menu.

  4. Using the "Objects Menu" will allow you to
    select a number of preselected Framesets.

  5. To link from the "left frame" to the "main frame,"
    put a link in the left frame and then select
    "main frame" as the target."

  6. You can also open the link in the sameframe--
    "for example, left frame"-- as you are in.
    To do this, chose "left frame" as your target.

  7. You can nest frames inside other frames.  Just
    like you can nest tables inside other tables.  But
    be careful, some browsers have trouble with this
    nested frames and tables.

  8. Remember that the "Frames Page" contains
    two Frames--"left frame" and "main frame."
    Make sure you have a clear title for this main
    "Frames Page" because the content of the
    internal frames will change but the page title won't.

  9. Be wary of using borders around your Frames.

  10. Try not to create two vertical scroll bars on the 
    same webpage.

  11. Try to use fixed width Frames for the lefthand
    link scroll bar column and then make the next
    column Frame variable width.

  12. Make sure you set your Frame for the
    lefthand link scroll bar column to "no scrolling."

  13. Don't put too many links in the lefthand link
    scroll bar column.  Frames are difficult enough
    without having to scroll down the lefthand  link
    scroll bar column.

  14. Design your Frames page knowing that people
    can use javascript code to bust your frames.

  15. If you use Frames, try to make your layout as
    easy to use and user-friendly as possible.  
    Otherwise, Frames can feel like an extra hassle.

  16. If you use Frames, make sure they correctly
    solve the design problem that forced you to
    use Frames.

9.  Creating webpages to be called up in a Frames page.

  1. If your frameset contains a variable-width main
    contents frame, design the webpage to come up
    in  this frame using a variable-width table.

  2. Design the  webpage to fit into the lefthand link 
    scroll bar column frame.  Don't allow it to be so
    big that it won't fit in the frame.

  3. Design the webpage for the lefthand link scroll bar
    column frame as a fixed-width table matching
    the exact size of the frame.

  4. Remember when you design webpages for frames
    that these pages should be a little smaller than
    your regular webpages because they have to fit
    into a limited frame space.

10.  Editing Frames Properties 

  1. Editing a Frames Height and Width

  2. Editing a Frame to Add or Exclude Scroll Bars

  3. Targeting links in Frames (See Sklar, p. 180)

  • Target=  _self

  • Target=  _main

  • Target=  _parent

  • Target=  _top

     4.  You can mix Fixed and Variable Width Frames

      5.  Eliminate Frame Borders

      6.  Frame Buster:  CNN.com:

     7. Example of Frame Buster: Test Frames 1. Select "Spash Page 3" link to see how this works

     8. Code for Frame Buster:

<script language="JavaScript">

<!--if (window != top) top.location.href = location.href;//-->

</script>

11. Sklar on the Drawbacks of  Frames

  1. It is difficult in most browsers to bookmark individual webpages because the pages are all referenced from a single HTML Frames file.

  2. It can take longer to download Frames webpages because there are more files to download from the web.

  3. It is often difficult to use the back button to go to
    the previous page in Frames.

  4. It is often difficult for Search Engines to categorize
    pages within Framesets.

  5. Individual Users can open a webpage out of your Frames format and get a very different view of that page than you intended them to have.

12.  Why I don't use frames today in my Web Design

  1. I don't need to.  Frames don't provide any 
    additional utility to my webpage design.

  2. Using Invisible Tables makes Frames unnecessary.

  3. Frames are old-fashioned and cumbersome.

  4. Frames often require too much vertical and horizontal scrolling.

  5. Using variable-width tables creates  cleaner, more
    compact grid layouts.

  6. Using invisible tables, transparent spacer gifs, and
    <div> tags makes Frames obsolete.

  7. Frames were the wrong solution to wrong problem.
    Frames websites were thought to be easier to
    manage because everyone was using them.

  8. We have more powerful precise web editors such as Frontpage 2003, Dreamweaver 5, and Adobe Golive that make Frames a wasted effort.  

  9. Frames are doing it the Hard Way.

  10. Finally, as bandwidth increases Frames become
    even more obsolete.  There is no real advantage to
    loading pages in a endless rolling left column scroll bar.

13. Logging on to and using Smart Force's E-Learning Site

  1. Go to Smart Force's E-Learning Site at:

    www.colorado.edu/its/cbt/

  2. Smart Force's E-Learning Site is open to all
    CU faculty, students and staff.  All you need
    is your CU login name and your "Identikey"
    password.

  3. From the Smart Force homepage, go to 
    "E-Learning Paths" and select "Assigned
     E-Learning." 

  4. You will now have a choice between two CU-Boulder IT curricula: 1) IT Certification and 2) IT Curricula. Select "IT Curricula."

  5. In "IT Curricula," notice all the online E-Learning
    IT appplications courses you can take.  Select
    one of these that interest you and explore the material

  6. If you are interested in the full features of Smart Force's E-Learning website, select "Take a Tour" to get a full tour of all the material available to you on this site.

  7. Smart Force's E-Learning website provides CU-Boulder faculty, staff, and students invaluable IT and computer learning resources.  So take advantage of the Smart Force website.


         

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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: 
12535      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: 11 March, 2005
E-mail: cclewis@spot.colorado.edu
URL:    http://www.colorado.edu/AmStudies/lewis/Design/problems.htm

Digital Design Course homepage