SlideShare a Scribd company logo
1 of 2
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.
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)

More Related Content

Similar to Student Name: Joe Fulcher.doc

Individual web project
Individual web projectIndividual web project
Individual web projectSunil Joshi
 
web design course description.doc
web design course description.docweb design course description.doc
web design course description.docbutest
 
Chapter 4 Web design tech in formation technology msc class .pdf
Chapter 4 Web design tech in formation technology  msc class .pdfChapter 4 Web design tech in formation technology  msc class .pdf
Chapter 4 Web design tech in formation technology msc class .pdfwondimagegndesta
 
WEB240 Version 1 1 Course Syllabus College o.docx
 WEB240 Version 1 1 Course Syllabus College o.docx WEB240 Version 1 1 Course Syllabus College o.docx
WEB240 Version 1 1 Course Syllabus College o.docxMARRY7
 
Cis363 a all ilabs devry university
Cis363 a all ilabs devry universityCis363 a all ilabs devry university
Cis363 a all ilabs devry universityCIS363A
 
Cis363 all i labs devry university
Cis363 all i labs devry universityCis363 all i labs devry university
Cis363 all i labs devry universityjkkjhdy798iyi
 
Cis363 all i labs devry university
Cis363 all i labs devry universityCis363 all i labs devry university
Cis363 all i labs devry universityCIS363A
 
Cis363 a all ilabs devry university
Cis363 a all ilabs devry universityCis363 a all ilabs devry university
Cis363 a all ilabs devry universityCIS363A
 
finalproj.doc
finalproj.docfinalproj.doc
finalproj.docbutest
 
Personal website assignment
Personal website assignmentPersonal website assignment
Personal website assignmentcheap couk
 
School of Business and Tourism Web Development I (IS.docx
School of Business and Tourism Web Development I (IS.docxSchool of Business and Tourism Web Development I (IS.docx
School of Business and Tourism Web Development I (IS.docxanhlodge
 
The more information Website Design_New.pdf
The more information Website Design_New.pdfThe more information Website Design_New.pdf
The more information Website Design_New.pdfssuser088e5b
 
Website design principles
Website design principlesWebsite design principles
Website design principlesDhairya Joshi
 
Beginning Site Design
Beginning Site DesignBeginning Site Design
Beginning Site Designjadkin32
 
CM Web design implications and web considerations
CM Web design implications and web considerationsCM Web design implications and web considerations
CM Web design implications and web considerationsMegan Perkins
 

Similar to Student Name: Joe Fulcher.doc (20)

Individual web project
Individual web projectIndividual web project
Individual web project
 
web design course description.doc
web design course description.docweb design course description.doc
web design course description.doc
 
Chapter 4 Web design tech in formation technology msc class .pdf
Chapter 4 Web design tech in formation technology  msc class .pdfChapter 4 Web design tech in formation technology  msc class .pdf
Chapter 4 Web design tech in formation technology msc class .pdf
 
WEB240 Version 1 1 Course Syllabus College o.docx
 WEB240 Version 1 1 Course Syllabus College o.docx WEB240 Version 1 1 Course Syllabus College o.docx
WEB240 Version 1 1 Course Syllabus College o.docx
 
CCS PPT 10.pptx
CCS PPT 10.pptxCCS PPT 10.pptx
CCS PPT 10.pptx
 
Cis363 a all ilabs devry university
Cis363 a all ilabs devry universityCis363 a all ilabs devry university
Cis363 a all ilabs devry university
 
Cis363 all i labs devry university
Cis363 all i labs devry universityCis363 all i labs devry university
Cis363 all i labs devry university
 
Cis363 all i labs devry university
Cis363 all i labs devry universityCis363 all i labs devry university
Cis363 all i labs devry university
 
Cis363 a all ilabs devry university
Cis363 a all ilabs devry universityCis363 a all ilabs devry university
Cis363 a all ilabs devry university
 
finalproj.doc
finalproj.docfinalproj.doc
finalproj.doc
 
Personal website assignment
Personal website assignmentPersonal website assignment
Personal website assignment
 
School of Business and Tourism Web Development I (IS.docx
School of Business and Tourism Web Development I (IS.docxSchool of Business and Tourism Web Development I (IS.docx
School of Business and Tourism Web Development I (IS.docx
 
LO3 - Lesson 19 - Template & CSS
LO3 - Lesson 19 - Template & CSSLO3 - Lesson 19 - Template & CSS
LO3 - Lesson 19 - Template & CSS
 
Chapter 1.pdf
Chapter 1.pdfChapter 1.pdf
Chapter 1.pdf
 
Website
WebsiteWebsite
Website
 
The more information Website Design_New.pdf
The more information Website Design_New.pdfThe more information Website Design_New.pdf
The more information Website Design_New.pdf
 
Website design principles
Website design principlesWebsite design principles
Website design principles
 
Beginning Site Design
Beginning Site DesignBeginning Site Design
Beginning Site Design
 
CM Web design implications and web considerations
CM Web design implications and web considerationsCM Web design implications and web considerations
CM Web design implications and web considerations
 
Web Usability
Web UsabilityWeb Usability
Web Usability
 

More from butest

EL MODELO DE NEGOCIO DE YOUTUBE
EL MODELO DE NEGOCIO DE YOUTUBEEL MODELO DE NEGOCIO DE YOUTUBE
EL MODELO DE NEGOCIO DE YOUTUBEbutest
 
1. MPEG I.B.P frame之不同
1. MPEG I.B.P frame之不同1. MPEG I.B.P frame之不同
1. MPEG I.B.P frame之不同butest
 
LESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALLESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALbutest
 
Timeline: The Life of Michael Jackson
Timeline: The Life of Michael JacksonTimeline: The Life of Michael Jackson
Timeline: The Life of Michael Jacksonbutest
 
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...butest
 
LESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALLESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALbutest
 
Com 380, Summer II
Com 380, Summer IICom 380, Summer II
Com 380, Summer IIbutest
 
The MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazz
The MYnstrel Free Press Volume 2: Economic Struggles, Meet JazzThe MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazz
The MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazzbutest
 
MICHAEL JACKSON.doc
MICHAEL JACKSON.docMICHAEL JACKSON.doc
MICHAEL JACKSON.docbutest
 
Social Networks: Twitter Facebook SL - Slide 1
Social Networks: Twitter Facebook SL - Slide 1Social Networks: Twitter Facebook SL - Slide 1
Social Networks: Twitter Facebook SL - Slide 1butest
 
Facebook
Facebook Facebook
Facebook butest
 
Executive Summary Hare Chevrolet is a General Motors dealership ...
Executive Summary Hare Chevrolet is a General Motors dealership ...Executive Summary Hare Chevrolet is a General Motors dealership ...
Executive Summary Hare Chevrolet is a General Motors dealership ...butest
 
Welcome to the Dougherty County Public Library's Facebook and ...
Welcome to the Dougherty County Public Library's Facebook and ...Welcome to the Dougherty County Public Library's Facebook and ...
Welcome to the Dougherty County Public Library's Facebook and ...butest
 
NEWS ANNOUNCEMENT
NEWS ANNOUNCEMENTNEWS ANNOUNCEMENT
NEWS ANNOUNCEMENTbutest
 
MAC Printing on ITS Printers.doc.doc
MAC Printing on ITS Printers.doc.docMAC Printing on ITS Printers.doc.doc
MAC Printing on ITS Printers.doc.docbutest
 
WEB DESIGN!
WEB DESIGN!WEB DESIGN!
WEB DESIGN!butest
 
Download
DownloadDownload
Downloadbutest
 
Resume
ResumeResume
Resumebutest
 

More from butest (20)

EL MODELO DE NEGOCIO DE YOUTUBE
EL MODELO DE NEGOCIO DE YOUTUBEEL MODELO DE NEGOCIO DE YOUTUBE
EL MODELO DE NEGOCIO DE YOUTUBE
 
1. MPEG I.B.P frame之不同
1. MPEG I.B.P frame之不同1. MPEG I.B.P frame之不同
1. MPEG I.B.P frame之不同
 
LESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALLESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIAL
 
Timeline: The Life of Michael Jackson
Timeline: The Life of Michael JacksonTimeline: The Life of Michael Jackson
Timeline: The Life of Michael Jackson
 
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...
 
LESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALLESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIAL
 
Com 380, Summer II
Com 380, Summer IICom 380, Summer II
Com 380, Summer II
 
PPT
PPTPPT
PPT
 
The MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazz
The MYnstrel Free Press Volume 2: Economic Struggles, Meet JazzThe MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazz
The MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazz
 
MICHAEL JACKSON.doc
MICHAEL JACKSON.docMICHAEL JACKSON.doc
MICHAEL JACKSON.doc
 
Social Networks: Twitter Facebook SL - Slide 1
Social Networks: Twitter Facebook SL - Slide 1Social Networks: Twitter Facebook SL - Slide 1
Social Networks: Twitter Facebook SL - Slide 1
 
Facebook
Facebook Facebook
Facebook
 
Executive Summary Hare Chevrolet is a General Motors dealership ...
Executive Summary Hare Chevrolet is a General Motors dealership ...Executive Summary Hare Chevrolet is a General Motors dealership ...
Executive Summary Hare Chevrolet is a General Motors dealership ...
 
Welcome to the Dougherty County Public Library's Facebook and ...
Welcome to the Dougherty County Public Library's Facebook and ...Welcome to the Dougherty County Public Library's Facebook and ...
Welcome to the Dougherty County Public Library's Facebook and ...
 
NEWS ANNOUNCEMENT
NEWS ANNOUNCEMENTNEWS ANNOUNCEMENT
NEWS ANNOUNCEMENT
 
MAC Printing on ITS Printers.doc.doc
MAC Printing on ITS Printers.doc.docMAC Printing on ITS Printers.doc.doc
MAC Printing on ITS Printers.doc.doc
 
hier
hierhier
hier
 
WEB DESIGN!
WEB DESIGN!WEB DESIGN!
WEB DESIGN!
 
Download
DownloadDownload
Download
 
Resume
ResumeResume
Resume
 

Student Name: Joe Fulcher.doc

  • 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)