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
-
Javascript
to create a fancy Splash Page
--Example
of Sewall Splash Page
-
Javascript
for creating an Automatic Refresh Effect
-
Using
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
- Example
of Splash Page for Digital Design
- Chris Lewis Splash Page Demo
- Chris Lewis Splash Page Demo 2
- Spash
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:
<META HTTP-EQUIV="REFRESH"
CONTENT="5; URL=HTTP://www.cnn.com">
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
-
Guide
to Frames Usage
-
To
Frame or not to Frame
-
Frames
Example: American History and Film
-
Frames
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
frame,"
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
same webpage.
-
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
can use javascript code to bust your frames.
-
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
use Frames.
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)
-
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
-
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:
www.colorado.edu/its/cbt/
-
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.
-
From the Smart Force homepage, go to
"E-Learning Paths" and select "Assigned
E-Learning."
-
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.
|
