|
| |
Unit 1 Web Mastering TEKS
Watch for ICONS
|

Sharpen your Skills (practice) |

Create or Produce a Product |
Research and/or Read |

Try |

Discuss |

Tools Needed |

Think |

Look at, See
Example |

Explore, Experiment |
Introductory Level of the
following:
Through the study of technology applications foundations, including
technology-related terms, concepts, and data input strategies, students learn to
make informed decisions about technologies and their applications. The efficient
acquisition of information includes the identification of task requirements; the
plan for using search strategies; and the use of technology to access, analyze,
and evaluate the acquired information. By using technology as a tool that
supports the work of individuals and groups in solving problems, students will
select the technology appropriate for the task, synthesize knowledge, create a
solution, and evaluate the results. Students communicate information in
different formats and to diverse audiences. A variety of technologies will be
used. Students will analyze and evaluate the results.
Knowledge and skills.
(1) Foundations. The student demonstrates knowledge and
appropriate use of hardware components, software programs, and their
connections. The student is expected to:
(A) demonstrate knowledge and appropriate use of
operating systems, software applications, and communication and networking
components;
(B) compare, contrast, and use appropriately the
various input, processing, output, and primary/secondary storage devices;
(C) make decisions regarding the selection,
acquisition, and use of software taking under consideration its quality,
appropriateness, effectiveness, and efficiency;
(D) delineate and make necessary adjustments regarding
compatibility issues including, but not limited to, digital file formats and
cross platform connectivity;
(E) use vocabulary related to web mastering and
delineate between the Internet and an intranet;
(G) summarize the development of Internet protocols
including, but not limited to, hypertext transfer protocol (http), gopher, file
transfer protocol (ftp), telnet, and wide area information system (wais).
(3) Foundations. The student complies with the laws and
examines the issues regarding the use of technology in society. The student is
expected to:
(A) discuss copyright laws/issues and model ethical
acquisition and use of digital information, citing sources using established
methods;
(B) demonstrate proper etiquette and knowledge of
acceptable use policies when using networks, especially resources on the
Internet and intranet; and
(C) analyze the impact of the WWW on society through
research, interviews, and personal observation.
(4) Information acquisition. The student uses a variety
of strategies to acquire information from electronic resources, with appropriate
supervision. The student is expected to:
(B) construct appropriate search strategies in the
acquisition of information from the Internet including keyword and Boolean
search strategies; and
(C) obtain Uniform Resource Locators (URLs) and
distinguish among the protocols including hypertext transfer protocol (http),
gopher, file transfer protocol (ftp), telnet, and wide area information system
(wais).
(5) Information acquisition. The student acquires
electronic information in a variety of formats, with appropriate supervision.
The student is expected to:
(A) acquire information in electronic formats
including text, audio, video, and graphics, citing the source; and
(B) identify, create, and use available file formats
including text, image, video (analog and digital), and audio files.
(7) Solving problems. The student uses appropriate
computer-based productivity tools to create and modify solutions to problems.
The student is expected to:
(A) use technology tools to create a knowledge base
with a broad perspective;
(B) select and integrate appropriate productivity
tools including, but not limited to, word processor, database, spreadsheet,
telecommunication, draw, paint, and utility programs into the creation of WWW
documents;
(C) use foundation and enrichment curricular content
in the creation of WWW pages;
(D) create WWW pages using specific authoring tools
such as text-based editing programs or graphical-based editing programs;
(E) read, use, and develop technical documentation;
(F) create and edit WWW documents using established
design principles including consistency, repetition, alignment, proximity, ratio
of text to white space, image file size, color use, font size, type, and style;
(8) Solving problems. The student uses research skills
and electronic communication, with appropriate supervision, to create new
knowledge. The student is expected to:
(A) demonstrate proficiency in, appropriate use of,
and navigation of LANs, WANs, the Internet, and intranet for research and for
sharing of resources;
(B) extend teaching and learning in the local
environment to the worldwide community through the creation and sharing of WWW
documents;
(C) synthesize and generate new information from data
gathered from electronic and telecommunications resources;
(D) create and format WWW documents containing
bookmarks of on-line resources and share them electronically;
(E) demonstrate the use of WWW pages, collaborative
software, and productivity tools to create products;
(F) participate with electronic communities as a
learner, initiator, contributor, and teacher/mentor; and
(G) participate in relevant, meaningful activities in
the larger community and society to create electronic projects.
(9) Solving problems. The student uses technology
applications to facilitate evaluation of work, both process and product. The
student is expected to:
(A) design and implement procedures to track trends,
set timelines, and review/evaluate progress for continual improvement in process
and product;
(B) seek and respond to advice from peers and
professionals in delineating technological tasks;
(C) create technology specifications for tasks and
evaluation rubrics; and
(D) resolve information conflicts and validate
information through accessing, researching, and comparing data.
(10) Communication. The student formats digital
information for appropriate and effective communication. The student is expected
to:
(A) use hypertext linking appropriately when creating
WWW pages;
(B) develop interactivity for the web server via
scripting additions such as Common Gateway Interface (CGI), Java Script, or
JAVA; and
(C) demonstrate the ability to conduct secure
transactions from the web server to the client.
(11) Communication. The student delivers the product
electronically in a variety of media, with appropriate supervision. The student
is expected to:
(A) synthesize and publish information in a variety of
ways including, but not limited to, printed copy, monitor display, Internet
documents, and video; and
(B) identify and use LANs, WANs, and remote resources
to exchange and publish information.
(12) Communication. The student uses technology
applications to facilitate evaluation of communication, both process and
product. The student is expected to:
(A) create technology specifications for tasks and
evaluation rubrics; and
(B) seek and respond to input from peers and
professionals in evaluating the product.
|

Sharpen your Skills (practice) |

Create or Produce a Product |
Research and/or Read |

Try |

Discuss |

Tools Needed |

Think |

Look at, See
Example |

Explore, Experiment |
DAY 1
Introduction to
Class
Introduction to
SCANS
Introduction to Web
Spinning Text
 |
Web Site Design |
 |
10 Commandments
of Web Design |
Assignment: Rubric
Design
Day 2
Introduction to
Personalities and Peers--
Color Test

 |
How do I relate to
others in a group? |
 |
What is a balanced
adult? |
Introduction to Web
Spinning Booklet
 |
Assign groups |
 |
Skimming for
understanding |
 |
Assign Chapter 3 |
Day 3
Finish Chapter 3 reading
Assignment on Web Design & Storyboarding
Discuss examples of
storyboards & Web site design
Introduction to HTML --
like building a sandwich
Tools Needed: Any
Text Editor (like Word Pad, Note Pad, preferably not Microsoft Word)
 |
Web Spinning Chapter 4 |
 |
Open/Close Tags |
 |
Single Tags |
 |
Format for saving
lessons
 |
C4_1.htm (Chapter 4
lesson 1) |
 |
<title> Your First
Name, Last Initial, and C4_1.htm </title> |
|
 |
Assign lessons |
 |
Purpose of Lesson 1 to
work with <body> modifiers:
 |
text="#ffffff" |
 |
link="#ffffff" |
 |
alink="#ffffff" |
 |
vlink="#ffffff" |
 |
bgcolor="#ffffff" |
AND to include in the
text on P. 28 the following tags:
 |
<P> |
 |
<H1> </H1> |
 |
<BR> |
 |
<HR> |
 |
<B> </BR> |
 |
<I> </I> |
 |
<Center> </Center> |
|
Thinking Futuristically:
Creating an original site
Day 4
Basic HTML
 |
Web Spinning Chapter 4,
pages 30-33 |
 |
Review Open/Close Tags |
 |
Review Single Tags |
 |
Title this lesson
C4_2.htm |
 |
Goal of this lesson is
to demonstrate the purpose of the <pre> </pre> tag |
 |
Copy and paste the
following text into your editor first without the <pre> tag and then with the
<pre> tag: |

CONSENT REQUIREMENTS
Copyrighted software or data may
not be placed on any system connected to the District’s system without
permission from the holder of the copyright. Only the owner(s) or individual(s)
the owner specifically authorizes may upload copyrighted material to the system.
No original work created by any
District student or employee will be posted on a web page under the District’s
control unless the District has received written consent from the student (and
the student’s parent) or employee who created the work and the work complies
with the district's Media Publishing and
Posting Policies.
No personally identifiable
information about a District student will be posted on a web page under the
District’s control or provided by the district for posting elsewhere unless the
District has received written consent from the student’s parent. An exception
may be made for "directory information" as allowed by the Family Education
Records Privacy Act and District policy.
SYSTEM ACCESS
Access to the District’s
electronic communications system will be governed as follows:
1. Upon completion of practicum
requirements, as appropriate, and with the written approval of the immediate
supervisor, District employees will be granted access to the District’s system.
2. Students in grades K-12 will
be granted access to the District’s system by their teachers, as appropriate.
Students in grades 5 - 12 will be assigned individual accounts upon completion
of practicum requirements for Internet
Driver’s License.

Add these commands (see p.
33) to lesson C4_2.htm 
 |
More Header Tags
 |
<H1> This
is Header 1 </H1> |
 |
<H2> This
is Header 2 </H2> |
 |
<H3> This
is Header 3 </H3> |
 |
<H4> This
is Header 4 </H4> |
 |
<H5> This
is Header 5 </H5> |
 |
<H6> This
is Header 6 </H6> |
|
 |
Don't forget
the
<body> tag modifiers |
Day 5
Basic HTML
 |
Web Spinning Chapter 4,
page 34 |
 |
Review Open/Close Tags |
 |
Review Single Tags |
 |
Modifiers for the HR
tag
 |
size=1 |
 |
size=5 |
 |
size=15 |
 |
width=5% |
 |
width=25% |
 |
width=75% |
 |
noshade |
|
 |
Experiment with these
modifiers. Make sure you can answer questions about what each modifier does. |
 |
Save this lesson as
C4_3.htm |
 |
Individual Practice: Complete Lesson on Page 37 by yourself. Save this
lesson as C4_4.htm. Don't forget to place the correct information in the Title
Tag (Your First Name, Last Initial and Lesson name). Make sure you add the Body
Tag Modifiers.
|
TOOLS REQUIRED FOR THE
NEXT FEW LESSONS:
 |
GIF CONSTRUCTION
SOFTWARE |
 |
DIGITAL CAMERA |
Day 6
Basic HTM
Goal: Internet Research:
Work in Groups of 3. Student in the middle is the scribe. Add each Student's
name to the document below. Students on each side will do the research and
provide the information and sources
 |
Open Word Document and
Save to Desktop. Click Here
Web_Graphics.doc |
 |
Answer each question
using the Internet. |
 |
Make sure you cite your
source by attaching the URL where the information was found to each detail you
provide. |
DISCUSSION
 |
Web Spinning Chapter 5,
pages 39-41 |
 |
Goal is to understand
limitations of Images on the Web and the <img src="images/filename.jpg">
tag
|
 |
THINGS to Remember:
 |
Use ONLY Graphics
that are .jpg or
.gif (for now) |
 |
Learn the difference:
JPG VS GIF VS PNG
 |
Most common graphic
formats used on the Web |
 |
Since the Web is
visualized by RGB monitors, the images you place on the Web should be RGB
24bit graphics (this is default for jpg graphics). |
 |
Source of graphics:
clip art, photos, or original graphics. The source graphic should be kept
as a bmp. The Bmp format is a larger file and can be edited and saved in a
graphic editor as a 24 bit gif or jpg. |
 |
JPG and GIF files
are compressed using algorithms that reduce the file size of the image.
Since saving a BMP as a JPG results in a "lossy" compression, actual loss
of data, it is good to keep the original BMP in case you wish to edit the
graphic again. |
 |
The Web Safe
Palette has 256 Colors in it and can be readily visualized in true color
on a computer monitor. |
 |
http://www.webwitchery.com/articles/format/ |
 |
Utilize these colors to maintain a predictable color palette on your Web
site. |
|
 |
The GIF file format
reduces the size of a graphic by 30-50%. GIF allow the use to create
transparent backgrounds and animation files |
 |
The JPG file format
is not limited in color (17 million colors), however, each time you re-save
the graphic you are compressing it again and losing information.
|
 |
The PNG file format
is not supported by all browsers, is an improvement on the GIF allowing for
transparency and does not degrade with re-saving. |
 |
http://www.siriusweb.com/tutorials/gifvsjpg/ Read for
understanding of GIF, JPG, and Dithering. |
 |
Rule of Thumb:
Use JPGs for photorealistic graphics
and GIF for bright minimal color useage (buttons, animations, cartoons,
line art, etc.)
http://www.codinghorror.com/blog/archives/000464.html
|
|
 |
For now...make sure you
save the graphic in the same folder as the html file |
 |
Web-based
graphics should be no more than 300 X 200 pixels @ 72 pixels/inch. No more
than 2-15K in size. The entire Web page should be no more than 30 Kilobytes.
What is a Kilobyte? |
 |
|
 |
|
8 bits (informal notation: kilobyte = 1024 bytes) |
|
bits |
8 |
|
bytes |
1 |
|
kilobits |
0.0078125 |
|
kilobytes |
0.0009765625 |
|
megabits |
7.62939453125e-06 |
|
megabytes |
9.5367431640625e-07 |
|
gigabits |
7.45058059692383e-09 |
|
gigabytes |
9.31322574615479e-10 |
|
terabytes |
9.09494701772928e-13 |
|
petabytes |
8.88178419700125e-16 |
|
|
 |
Use all the tags and
modifiers on pages 40-41

 |
Learn the IMG Tag: <img src="filename.extension"> |
 |
Learn the ALT subtag |
 |
align subtags -
experiment with top, center, bottom |
|
 |
Title this lesson
C5_1.htm |
 |
Remember to correctly
identify your lesson in the Title Tag |
 |
Remember to add your
Body Tag modifiers. |
Day 7
 |
All graphics from the
Web need accompanying copyright information and ALT tags |
 <IMG SRC="name.gif" ALT="Text-only display"
WIDTH=100 HEIGHT=200
border="11">
 |
All graphics need
to be a reasonable size for a Web Page. How do we make graphics a reasonable
size? HINT: Using Width & Height is NOT the answer! |
 |
http://www.its2.uidaho.edu/cti/tutorials/web_graphics/index.htm Read
and report. What size should a Web Graphic be? |
 |
Width & Height are used
to "tweak" graphics, NOT to size them! |
 |
Add the Width, Height,
and Border subtag to lesson C5_1.htm and save it as C5_2.htm |
 |
Make sure you edit the
<title> tag information |
 |
Make sure you add all
the modifiers in the <body> tag. |
TABLES
<Table Border=0
Width="97%">
<TD width="10%"> </TD> <!-- left margin of 10%>
<TD width="80%"></TD> <!--main text area of 80%>
<TD width="10%"></TD> <!-- rt margin of 10%>
MANAGING MEDIA:
 |
In order to edit a Web
page, we need an HTML editor. Name 4 HTML editors. Which HTML editors do
you have available to you? |
 |
In order to edit
graphics, we needs a graphics editor. Name 4 graphic editors. Which
graphic editors do you have available to you? |
 |
In order to edit music,
we need an audio editor. Name 3 audio editors? Do you have an audio
editor available to you? |
 |
In order to edit video,
we need a video editor. Name 4 video editors? Do you have a video editor
available to you? |
Animated GIFs
Animation
Tutor
Animated Gif PowerPoint for Gif
Construction Set
<img src="smiley.gif">
This is NOT a transparent Gif.
 |
Software Tools |
 |
Keep them Small -
 |
If you generate a GIF and find it's too big, DON'T use HEIGHT and
WIDTH tags to reduce it. A big GIF squeezed down will still take a long time
to load. Make your GIFs the right size.(source:
http://members.aol.com/royalef/conserva.htm ) |
 |
On a Web Page, your
GIF animation will need your name underneath it to give copyright credit to
the author.
MORE Examples: Click Here

|
|
 |
Animated GIFs are like
cartoon frames. Saving each frame individually allows you to create the sense
of motion. |
 |
ANIMATION STEPS -
Create, Erase, Replace in new position, with new color, or with new feature. |
Day 8
BASIC HTML
GOALS for Today:
Successfully link pages together AND link pages to other resources on the Internet (URLS)
 |
Linking Pages Together |
 |
Linking Pages to
Internet URL |
 |
Linking Pages using
Buttons (graphics)
|
Day 9
BASIC HTML
GOALS for Today: Link all
existing lessons together using a Default.htm page as a Splash page and an Index
to all your lessons. Add text on the page to let us know what the page's purpose
is (i.e. This is the Index to Joy's Lessons). Link all Lessons back to the Index
(default.htm). In the Title tag put you name and the word INDEX.
Exploring DreamWeaver:
Look in the DreamWeaver Menu Bar, Click on the Globe
This
will allow you to preview your pages in a Browser. Make sure that all your pages
are linked to the Index page.
THREE REASONS A LINK MAY
NOT WORK PROPERLY:
-
You did not Save the Web page you
were working on BEFORE attempting to put in links OR images on a page.
Unless you establish the location of the Web page first (by saving it in a
location), it will have issues pointing to other pages or to images.
-
A Syntax Error: A syntax
error is an error in typing the Tag or command. An extra space, incorrect command,
forgetting the ">", forgetting the quotes, forgetting to close the tag
"</a>", OR misspelling the name of the html file you are point to.
-
A Location Error: The
file you have identified for your link is NOT in the location that you have
pointed to using the link tag.
Day 10
Using a digital Camera
take a picture, resize it and place it on your Index page.
Digital Camera
QuickStart
 |
Use Macromedia
Fireworks
 |
Modify-->
Canvas-->Image Size |
 |
Make sure the picture
is under the maximum recommended size of 200 X 300 pixels. |
|
 |
Making a "scrap book"
of photos
 |
Take 4 or 5 pictures,
resize them, save them in your HTML folder |
 |
Use Gif Construction
Set, add each picture just as you did your paint files, and save them under
1 file name. Place this animation on your Index page. |
|
 |
JOURNAL ACTIVITY
- fill out your journal. Use complete sentences and paragraphs! This is a
communications class. Demonstrate your communication skills.
|
Day 11
Begin to
design a professional Web site using Storyboarding Techniques and Best
Practices. Research Best Practices on the Web. Collect 10 rules from experts on
how to design an excellent Web site. Report your findings in a Word document.
 |
Create a Storyboard for
your 5 page (minimum) First Project |
 |
Example:
|

Default Page might
include: A short description of the site (its purpose and content),
something interesting to draw Internet surfers into the the site, and an index
to all the other pages (or major segments) of the site. This is the one page
where you might want to add gif animation, sound, or flash.
Graphic & More
Information:
http://www.mediaworkshop.org/hses/criticalbasics01/day1/storyboardingtips.html
Another Resource:
http://www.plocktau.com/how-tos/web_development/index.html
QUESTIONS TO ANSWER:
Resource:
http://www.charlesriver.com/resrcs/chapters/1584500360_1stChap.pdf
INCLUDE AS PART OF
STORYBOARD:
Ø Who is
my target audience?
Ø What message does the
Web site need to convey?
Ø Will
I have a client? (Teacher, Coach, Organization, Classroom) What are my
client’s needs?
Ø What type of Web sites
does my client like and why?
Ø
How often will my site be updated? When I update,
will I add pages or just replace content? If I add pages, where will I add them?
WHAT ARE 10 RULES FOR
EXCELLENT WEBSITE DESIGN?
Research on the Web to
find out what experts feel good Web Design should include or avoid. Cite your
sources using the URL. Use at least 5 URLs (5 different sources from experts.) Type up 10 Rules in a Word
Document. Cite your Sources. Name this file: Rules.doc. Email document to your teacher.
Day 12
Today's Goal is to build
an assessment rubric in your groups to measure your Web site. You may use Word
to build the Rubric. Examples of Rubrics are:
EXAMPLE
OF A Beginner's Rubric
|
Develop Project Site

CRITERIA
 |
Collaborate as Mentor with classroom project = TEAM
|
 |
Create Thematic Web Site Storyboard |
 |
Follow 10 Rules for Good Design
|
 |
Collaborate with TEAM to Develop Goals & Objectives for Site
|
 |
Utilize HTML and animation on Splash page.
|
 |
Use Splash page, Index, & content flow chart
|
 |
Create an evaluation
rubric to determine success of site |
 |
Include interactive component that promotes global communication
|
 |
Incorporate into TEAM auxiliary members (business, community, on-line
experts, or Internet key-pals) |
 |
Keep project current |
 |
Provide efficient service to TEAM Project
|
|
Examples:
http://www.arp.sprnet.org/curric/classes.htm AND
http://www.arp.sprnet.org/curric/read/statt/page.htm
Decide
what materials you will need to collect for your Web site and begin planning how
you will collect the materials. Assign each member of your group to a specific
job (editor, photographer, writer, interviewer, etc.
 |
pictures |
 |
interviews |
 |
research and/or news content |
 |
schedules, calendars, event listings |
 |
media releases for individual pictures or student
content |
Decide who the client will be and have them sign the
Client contract.
DAY 13
REVIEW:
What items are involved in a Web site DESIGN THEME?
Click Here.
Make
decisions concerning the theme of your project Web site. Make sure you ADD THEME
to your RUBRIC.
New Skills: Design elaborate texts as
graphics and provide media on a Web site. Using the Websites below create titles
for each of your Web site main pages. Also look at creating buttons to match
your titles.
What
buttons (navigation hyperlinks) will you need on each page?
-
Cool Text
FlamingText.com
OR CoolText.com or
GraffitiCreator.net - Create Cool Titles and
Buttons
for your Splash Page. GIVE CREDIT to FlamingText or Cool Text for your
graphics.
 |
Follow instructions on the Web
site. You will have to wait for your graphic to be generated by the
FlamingText server. |
 |
Once it has been generated you
will need to save it into your project folder. |
 |
NOTE: CHANGE THE NAME of the
graphic (RENAME) so that it is really simple like "index.jpg" instead of
the weird name the FlamingText server gives it (like "cs800000021.jpg").
|
 |
REMEMBER animated graphics will
be .gif -- not .jpg |
 |
Add it to your Web page
using the |
<img src> tag
EXAMPLE:
http://www.arp.sprnet.org/hs/fca06_07/default.htm
 |
For Graphic Buttons: place the
<img src> tag INSIDE the open and closed <a href> tag |
EXAMPLE:
http://www.arp.sprnet.org/webmaster/organizations/NHS/class_02/default.htm
DAY 14:
GOAL:
POWERPOINT
ON ALL ABOUT MEDIA
-
SOUND
Sounds on Web Page: Sound
Effects...Free:
http://www.dewa.com/sound/ (Rt Mouse Click on Source and Save in
your project folder)
-
MOVIES
EXAMPLE
OF MOVIE:
http://www.arp.sprnet.org/webmaster/masters/default.htm
EXAMPLE
OF PODCAST:
http://podcast.arpisd.org//blojsom_resources/meta/joy/Hemphill1a.mp4
Using 28 Seconds of music you will recognize.
Use
all the tags and skills (animation, graphics, sound, etc.) you have learned
thus far to enhance your site.
 |
Utilize
email to acquire content |
 |
Utilize
digital camera to enhance site |
 |
Utilize
animation and graphics to coordinate theme |
 |
Utilize
best practices |
DAY 15
STUDY FOR HTML 6 Weeks TEST
JOURNAL ACTIVITY
- fill out your journal. Use complete sentences and paragraphs!

MEANING OF ICONS
|

Sharpen your Skills (practice) |

Create or Produce a Product |
Research and/or Read |

Try |

Discuss |

Tools Needed |

Think |

Look at, See
Example |

Explore, Experiment |
| |
|