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:
Outreach Project homepage
Outreach Project template
4.. Creating Splash Pages
to create a fancy Splash Page
of Sewall Splash Page
for creating an Automatic Refresh Effect
Automatic Refresh on your Page to
create a Splash page
- Let the User Skip the Splash Page
- Free Flash intros and Splash Pages
- Flash Splash Page: Volleyball.com
of Splash Page for Digital Design
- Chris Lewis Splash Page Demo
- Chris Lewis Splash Page Demo 2
Pages may Drown your Site
- Two Examples of Automatic Refresh Splash Page
1. Basic Example of a Webpage--CNN.com
2. Basic Example of a Webpage--slpash.htm
Code for Automatic Refresh Splash Page.
Add this code just above the </head> tag:
5. Adding a Splash page to an Older Website
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"?
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.
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
to Frames Usage
Frame or not to Frame
Example: American History and Film
Example: American Studies 2010
7. Creating Frames Pages
Test Frames 1
Test Frames 2
Test Frames 3
Test Frames 4
HTML Code for Test Frames 1
8. Creating Frames in Dreamweaver MX
In Dreamweaver, select "Insert" and
choose "Frames" Dreamweaver gives you
a choice of the Frames layout you can use.
To edit your frame properties, select "Windows"
and choose "Frames." A "Frames" toolbox
will now open.
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.
Using the "Objects Menu" will allow you to
select a number of preselected Framesets.
To link from the "left frame" to the "main
put a link in the left frame and then select
"main frame" as the target."
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.
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.
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.
Be wary of using borders around your Frames.
Try not to create two vertical scroll bars on the
Try to use fixed width Frames for the lefthand
link scroll bar column and then make the next
column Frame variable width.
Make sure you set your Frame for the
lefthand link scroll bar column to "no scrolling."
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.
Design your Frames page knowing that people
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.
If you use Frames, make sure they correctly
solve the design problem that forced you to
9. Creating webpages to be called up in a Frames page.
If your frameset contains a variable-width main
contents frame, design the webpage to come up
in this frame using a variable-width table.
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.
Design the webpage for the lefthand link scroll bar
column frame as a fixed-width table matching
the exact size of the frame.
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
Editing a Frames Height and Width
Editing a Frame to Add or Exclude Scroll Bars
Targeting links in Frames (See Sklar, p. 180)
4. You can mix Fixed and Variable
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:
<!--if (window != top)
top.location.href = location.href;//-->
11. Sklar on the Drawbacks of Frames
It is difficult in most browsers to bookmark individual webpages because the pages are all referenced from a single HTML Frames file.
It can take longer to download Frames webpages because there are more files to download from the web.
It is often difficult to use the back button to go to
the previous page in Frames.
It is often difficult for Search Engines to categorize
pages within Framesets.
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
I don't need to. Frames don't provide any
additional utility to my webpage design.
Using Invisible Tables makes Frames unnecessary.
Frames are old-fashioned and cumbersome.
Frames often require too much vertical and horizontal scrolling.
Using variable-width tables creates cleaner, more
compact grid layouts.
Using invisible tables, transparent spacer gifs, and
<div> tags makes Frames obsolete.
Frames were the wrong solution to wrong problem.
Frames websites were thought to be easier to
manage because everyone was using them.
We have more powerful precise web editors such as Frontpage 2003, Dreamweaver 5, and Adobe Golive that make Frames a wasted effort.
Frames are doing it the Hard Way.
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
Go to Smart
Force's E-Learning Site at:
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"
From the Smart Force homepage, go to
"E-Learning Paths" and select "Assigned
You will now have a choice between two CU-Boulder IT curricula: 1) IT Certification and 2) IT Curricula. Select "IT Curricula."
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
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.
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.