Week 13, May 1 &
3
Announcements
- If you haven't already done so, click
Form Fields.doc
and print it. When you get to Tutorial 6: Publishing a Web
Site, p. 357, Validating Form Fields,
and p. 387, Examining a Form Results File, this handout will be useful.
- If you haven't already done so, click
here to see a
handout that summarizes steps to create frameset pages with link bars
based on navigation structure and shared borders and print it. This handout will be
helpful when you create your frameset pages with me this week for your
Final Web site.
|
|
Planning Analysis Sheet. It's time to start
building the pages, shared borders, and content of your Final Web site.
The goal of the PAS is to guide you to finalize the organization and pages
for your Final Web site without focusing on the details of the content of
each page. We will finish part of this in class together this week and you
will finish the rest for homework. Click
here for an example of your PAS at this point.
|
Navigation
in a Frameset Page:
 I will open
my Lollipop Gifts practice final on the server,
and you will open your
Final Web with me as we create the frameset, main, banner, and
content pages. Your Final Web site should include a home page that is
almost finished, PAS.doc (Heading, Objective, and References sections
completed), and Final.htm (a page with the Final table
copied/pasted). You should have already created your Child 1 pages and a
Guest Book page and you should have decided upon the content of your
frameset page and at least three of your main pages. Your navigation
structure should look similar to my Lollipop Creations navigation at
this point. Click
here
to see my Lollipop Gifts practice final before I create the frameset
pages.
 Today,
we'll create the main pages, frameset page, banner page, and
contents page. Click here to see my Lollipop Gifts practice final
after I create the frameset pages.
Your navigation structure should look similar to my Lollipop
Creations navigation by the end of class today.
Note: The Frames Banner button will be renamed "Lollipop
Creations" so that the banner name will display the Web site name.
Click
here to see a
handout that summarizes all the steps to create
frameset pages.
|
Here are examples of some frameset
pages: |
|
| Picture
Link Bar |
Text Link
Bar |
Text Link
Bar
No Borders |
|
 |
 |
 |
|
Create the main pages:
-
Create and save
Frame_Main1_description.htm.
Insert a 1-cell, 640-pixel borderless table.
(Click
here for steps if you can't see the bottom of the Insert
Table dialog box.)
Type a brief word
or two describing the contents of this page. I will name my
first main page
Frames_Main1_Gift_Jars.htm.
-
Remove the top shared border from this page; keep the bottom
shared border.
- The
main pages should be unified in design; for example, If you use
headings and backgrounds, keep them consistent. The best way to
accomplish this is to create your first main page, get it
exactly right, and save it. Then click File, Save As,
and create your second frameset main page changing the filename,
title, and content as needed. Continue until all main pages (Frame_Main2_description.htm,
Frame_Main3_description.htm,
etc.) have been created. I will name my second main page
Frames_Main1_Gift_Pails.htm. I will name my third main page
Frames_Main1_Gift_Tins.htm.
|
Create the frameset page:
- Create a frameset page named
Frameset_description.htm (File, New, More page templates, Frames Pages
tab, Banner and Contents).
- Assign a title to the frameset page that generically describes the content of
the frames page so that it will make sense as a hyperlink button in the
navigation link bar. Lollipop Gifts is a title that makes sense
in this Web since the main pages display Lollipop Gifts. I will name my
frameset page Frameset_Lollipop_Gifts.htm and title it
Lollipop Gifts.
- Drag Frameset_desctiption.htm into
the appropriate position in the navigation structure of your Web site,
and delete any frameset placeholder page you might have added from the Web entirely.
|
Create the banner page with a banner and link
bar:
- Create a new page named
Frame_Banner.htm. Remove any shared borders from
this page.
- Insert a page banner (Insert, Page Banner) on the
first line. Change the banner title to the title of the frameset
page. I will title my banner Lollipop Gifts.
- Switch to
Navigation View,
right-click on the navigation screen, and click Portrait/Landscape;
drag and drop Frame_Banner.htm from the Folder List to Navigation View
as a child page of your frameset page.
- Insert
a link bar:
Insert, Web
Component;
Component Type—Link Bars, Bar based on navigation structure, Next; Choose a bar style, Next; Choose an orientation,
Finish; add navigation to point to Child pages under Home and
Home page. Do not place the link bar inside a table because
you want it to spread across the entire top of the frameset page.
In Navigation View, right-click the page icon for
Frame_Banner.htm and uncheck Included in Link Bars.
- Open the
frameset page, and set Frames_Banner.htm as the
initial page in the banner frame.
- If the banner frame is taking up too much screen real estate,
double-click the custom link bar and change the style to a simple one
like a dot style or change the banner to text rather than picture. Or remove the banner frame altogether. Click
here for steps.
-
 Preview and test the banner frame links. In order for the custom link bar in
Frames_ Banner.htm to
display the linked pages in a whole page, do this:
From the frameset page, right-click Frames_ Banner.htm, and click
Page
Properties. Under the General tab, Default target frame,
click the Change Target Frame button; in the Target Frame
window, under Common Targets, click Whole Page, OK,
OK.
Create the contents page with a link bar:
- Create a new file named
Frame_Contents.htm. Remove all shared borders
from the current page.
- Switch to
Navigation View,
right-click on the navigation screen, and click Portrait/Landscape;
drag and drop Frame_Contents.htm from the Folder List to Navigation View
as a child page of your frameset page next to
Frame_Banner.htm.
- Drag
your main pages in order from the Folder List to Navigation View
as child pages of Frame_Contents.htm.
- Insert a link bar:
Insert, Web
Component;
Component Type—Link Bars, Bar based on navigation structure, Next; Choose a bar style, Next; Choose an orientation,
Finish; add navigation to point to Child level and Home
page.
- The home page is
already a link in the banner frame and so should not be duplicated
here. However, if you decide not to use a banner frame, you should
create a manual hyperlink that opens the home page in a new
window. Do not add
a home link to the link bar because the home page would open in the
main frame instead of a whole window. Do not
place this link bar inside a table.
-
Open the frameset page, and set Frames_Contents.htm
as the initial page in the contents frame.
-
Preview and test the contents frame links. In order for the custom link bar in Frames_
Contents.htm to display the linked pages in a whole page, do this:
From the frameset page, right-click Frames_ Contents.htm,
and click Page Properties. Under the General tab,
Default target frame, click the Change Target Frame button;
in the Target Frame window, under Current frames page, click the main
frame window in the diagram on the right.
 Trouble? If that doesn't work, do this: Open Frames_ Contents.htm,
right-click, and click Page Properties. Click the Change Target Frame
button; under Common targets, click Whole Page, OK. Then
return to the frameset page to the contents frame and repeat setting the target
of Frames_ Contents.htm
to the main
page as shown below.
If desired, delete the banner frame and
add a home page link to the contents page:
- If your banner frame is taking up too much screen real estate, you
are free to remove it. To remove the banner frame, open the frameset
page and click the banner frame. Click Frames, Delete Frame.
Next, you will need to add a home page hyperlink to the contents frame.
- Open the contents page, create a 2-row borderless left-aligned table
and drag and drop your the link bar into Row 2.
- Click in Row 1 and create a manual hyperlink to the home page and
set the hyperlink Target Frame to open in a Whole Page. You cannot
simply modify the custom link bar and add the home page as a link
because it will open the home page in the main frame, which you do not
want.
Note: If you want to create a custom button using
pictures from your theme with matching text and a hotspot
hyperlink, try this:
Insert the Picture: Tools, Site Settings, Advanced
tab, check Show hidden files and folders;
Insert Picture
From File button; in the Look In box, browse to
_themes/ThemeName; click the View button and select
Preview; point to each picture to preview and double-click the
desired picture to insert it.
You might want to use a different picture to represent the home
page since it has a different behavior than the buttons on the
link bar below it.
Determine the font for the button text: Format,
Theme; in the Theme task pane, point to the thumbnail
for the current theme, click the list arrow, Customize;
in the Customize Theme window, click, Graphics button; Item
box—select Horizontal Navigation; click Font tab, and
write down the font Style and Size; cancel out of all
windows. Select the inserted picture in Row 1; from the PIctures
toolbar, click the Text button to Insert a text label; use the same font style, size, and
position of the buttons as was used on the Contents page link bar.
If desired, eliminate the frameset borders:
- With frameset page open, Frames, Frame Properties, Frames Page,
Frames tab, uncheck Show Borders.
|
|
|
 E-mail assignments
with this e-mail icon to me no later than Sunday at noon unless
otherwise announced. No assignments are accepted late. In all e-mail
messages, the subject line should be Your Name, last 4 numbers of your
student ID, project ID.
|
|
Note:
You will have two weeks to complete this assignment. It is not due this
week but will be due the end of next week. Planning Analysis Sheet (PAS), 20 pts. It's time to
continue
building the pages, shared borders, and content of your Final Web site.
The goal of the PAS is to guide you to finalize the organization and pages
for your Final Web site without focusing on the details of the content of
each page. See the Final Exam page for details on each required item. When the
PAS for your Final Web site and your final Web site are ready for viewing, send
two URLs in one e-mail message. The subject line
should be Your Name, last 4 digits of student ID, PAS. The
URLs should point to the following locations (xx represents your directory
number):
Yuko Kondo's would look like this:
When I receive
your PAS and see your Final Web site next week, I will send you preliminary comments
and final approval of your topic. Click
here for guidelines as to
what constitutes an appropriate topic. The PAS items listed below are
general guidelines. Any exceptions to these guidelines must be approved by
me.
Go to
http://ca112.lacitycollege.edu/ca112a00/FinalB/ to see an example of a
sample Final Web site I created. It is an example of what your Web site
should look like to this point if you have continued to work on it as
directed in past few weeks. Go to
http://ca112.lacitycollege.edu/ca112a00/FinalC/ to see an example of
this same Web site after all the steps listed below have been completed.
Your Final Web site should be similar to this one by the beginning of next
week.
Step 1: Open PAS.doc (the
Planning Analysis Sheet) from the root directory of your Final Web site and continue
working on it as needed until it is finished. You should have already
completed the Objective and References section. You are now ready to
complete the Navigation View and Requirements sections. You will add the
screen shots of the custom link bars to be used in the frameset pages. Click
here for an example of your PAS at this point. See
Yuko Kondo's PAS
as an example of a finished PAS.0
Step 2: In your PAS, the list of Web pages must include a
Guest Book page or some
form with the required fields and the Final page as the last page. If you want to create the form for the Guest
Book page (or a form of your choice with the required fields), you
learned how to do this in Tutorial 6, so feel free to create it if you
have time. If not, just create a blank page and finish it later. The
arrangement of pages in your navigation view must match the list of pages
in the Requirements section of the PAS.
Step 3: In your PAS, identify your frameset page in blue in the
list of Web pages and identify the main frame pages. See
Item 15.
Step 4: Your navigation structure should be finished as much as
possible to this point. Include all the pages you are planning to include
in the Final Web site even if they are blank right now with appropriate
page titles and banner names. See
Item 10.
Step 5: Use link bars generated by FrontPage (not user-defined
link bars) to generate your site's navigational structure. Begin by
dragging and dropping your pages into place in Navigation view—see
Item 10. Then add shared
borders to the home page and the child pages under home to include
navigation—See Step 6 and Step 7
below and see Item 12
and Item 13. Add
link bars in the body of any Child Level 2 pages as needed. Remember to
place link bars centered inside a centered, borderless, 640-pixel table
structure. (Click
here for steps if you
can't see the bottom of the Insert Table dialog box.)
Step 6: Include a bottom shared border on all pages
(except the frameset banner and contents pages) with a counter, the date
of revision, and a "top" picture with a hyperlink for navigation to the
top of the page. See Item 13. If you don't yet know how to insert a
counter, we will be covering it this week or next. You may add it as
soon as I explain it.
If you copied material from other Web sites, add a
generic citation in your footer as shown here from
Lollipop
Creations and remove any copyright for yourself. Also, see
Guidelines below and
Item 14.
Step 7: Include a top shared border on the home
pages and all child pages under home with the home page as an additional
link. Include a non-text "top" bookmark for navigation to the top of the
page. See Item 12.
Step 8: Place all page content inside the framework of a
640-pixel, fixed width, centered table for consistent display.
(Click here
for steps if you can't see the bottom of the Insert Table dialog box.)
Left align
paragraphs. See Item 9.
Step 9: Your home page should be nearly finished. It should
include top shared borders with a centered navigation link bar inside a
640-pixel borderless table and a bottom shared border as described below.
The home page content must answer the questions who, what,
when, where, and why. The purpose of your Web site
should be immediately clear to me when I read the home page title.
Step 10: Check the mechanics (spelling, punctuation,
capitalization, grammar, sentence fluency, etc.) in your Web site and PAS
with extreme care. Your visitors will judge you immediately on your
fluency in the language and will discount your Web site when they see
errors no matter how attractive the site is. See
Item 4. Use "Web site"
consistently if you use this wording on any pages.
Step 11: Apply a theme to the Web site. See
Item 19. Tell me the name of the
theme you used when you send me your email to grade this assignment.
Step 12: In one e-mail, paste the URL of your Final Web site and
the URL to your PAS page into the email message and tell me the name of
the theme you used. I can open your PAS.doc file on the Internet to
grade it. For example, your URLs would look like this:
Yuko Kondo's would look like this:
Guidelines:
- Use animations and transitions sparingly.
- Citations. See
Item 14 on the Final page
for information on citing copyrighted materials such as pictures and
content. Many sources of information are not in the public domain
and may not be used without the permission of their respective copyright
holders. Click here for information on how
to properly cite and format individual online sources. Since your Final
Web site is "for nonprofit educational purposes,"
we are taking some liberties here. But I still want sources cited. Click
here for an
interesting site regarding copyright myths. I check
http://www.ixquick.com/ and other
sites to see if students have cheated.
Click
here for
information on fair use and go to
http://www.centerforthepublicdomain.org/ for details on the concepts
of intellectual property (property
that derives from the work of the mind or intellect, specifically an
idea, invention, trade secret, process, program, data, formula, patent,
copyright, or trademark or application, right or registration relating
thereto that has the attributes of personal property and may be
purchased, assigned, licensed, pledged or transferred in the same manner
as personal property), public domain (a
space where intellectual property protection does not apply),
copyright, patents, and commons.
"Title 17,
Section 107 of the 1976 Copyright Act, "Limitations on exclusive
rights: Fair use".Title 17, Chapter 1, Sec.
107. - Limitations on exclusive rights: Fair use
Notwithstanding the provisions of sections 106 and 106A, the fair use of
a copyrighted work, including such use by reproduction in copies or
phonorecords or by any other means specified by that section, for
purposes such as criticism, comment, news reporting,
teaching (including multiple copies for
classroom use), scholarship, or research, is not an
infringement of copyright. In determining whether the use made of
a work in any particular case is a fair use the factors to be considered
shall include - (1) the purpose and character of the use, including
whether such use is of a commercial nature or is
for nonprofit educational purposes;
(2) the nature of the copyrighted work; (3) the amount and
substantiality of the portion used in relation to the copyrighted work
as a whole; and (4) the effect of the use upon the potential market for
or value of the copyrighted work. The fact that a work is unpublished
shall not itself bar a finding of fair use if such finding is made upon
consideration of all the above factors."
|
 |
- Continue working on the Final Web site incorporating all changes I
suggested today. Work on the form page for your Final this weekend. Our
semester is drawing rapidly to a close.
- Be sure to backup Garden and
Final to our backup server at
http://ca112bk.lacitycollege.edu/ca112axx/!!
Take this very seriously.
|
|
Extra credit assignments are due no later than Sunday evening. None
this week. |
Last revised
Tuesday, April 22, 2008 09:44 AM.
|
