1. Student Name: Joe Fulcher
St Petersburg College Technology Education
TLA #1: Designing a Functional and Aesthetic Web Page
Context:
Web pages have become a daily part of our daily lives as we navigate the world wide web surfing
email, promotionals, homework, or our jobs. What determines how long we visit a web page, is
its ease of navigation, not aesthetically offensive, effective use of graphics and content layout.
Challenge:
Before the web page ever gets uploaded and published a great deal of care and planning must be
done. Plan for expansion, view other websites for ideas and layouts. When viewing other peoples
web sites, notice their use of colors, sounds and graphics, note items that turn you off or cause
you to click away in exploration of other sites. Keep notes of what could be done to enhance the
page in order to keep your attention.
Pick a topic i.e. cars, travel, animals…, brainstorm and storyboard your subject in your
notebooks. Draw out links and designs for additional pages. Record use of Hex code web safe
colors (http://www.web-source.net/216_color_chart.htm) that will be used for your background
and fonts as well as any other pertinent info that would enable someone else to pick up where you
left off at a future undetermined time.
Resources:
Notebook, Computer with Internet access and Internet Explorer, FrontPage or dream weaver,
Photoshop.
Objectives:
1. You and your team member are to write-down your 3 URL’s
2. Choose a topic or theme
3. Write a 2 paragraph introduction with bullets about key areas of your website
4. Story board an index page with at least 3 linked pages to your website expounding more
on what was presented on the index page.
5. Add navigational links to your pages as well links to three pages outside of yours to
pages of similar subject matter.
6. Use 2-3 different font colors, use an appropriate bold font for the heading.
7. Import or design a minimum of 2 graphics per web page at least 1 of which will be an
animation.
8. Extra points will be available for creative use of the following: Java script, VBScript,
CSS or Flash.
Limitations:
• Day 1 Visit websites for ideas noting personal preference do’s and don’ts along
with recording 3 visited URL’s
• Day 2 Storyboard, sketch and design 1 index page and 3 subject pages on paper.
• Day 3 & 4 Design web page using FrontPage or Dreamweaver
• Day 5 have website on saved media for classroom viewing and critique of
classmates pages on hand out that will be provided by the instructor.
2. Evaluation:
1. Keep a log of all fonts, colors diagrams and other information relevant to the design of
this site in a web log along with a printout of the html code saved as a text document.( in
Internet Explore this can be done by clicking on the Toolbar-View-Source) (20 points)
2. Written and diagramed storyboard for 1 index page and 3 linked pages of your own
design. (15 points)
3. 3 visited URL’s (5 points)
4. Aesthetic use of background color, Font color and use of images. (15 points)
5. Ease of navigation with no dead links (20 points)
6. Critique 2 other class web sites stating 2 positive design points and 2 areas that would
entice you to stay and explore the site further. (15 points)
7. Save all documentation to a floppy disk or CD. (10 points)