John Jay High School - Wappingers Central School District



HTML Factory (Project)

Web Design & Production

John Jay High School

Department of Technology Education Mr. Butler

Name:____________________________________________________ Period:__________

INTRODUCTION: You will be creating a Website titled “HTML Factory”. Your Website will include (by linking) each of the Web pages you created from the previous SIX (7) Lessons in class.

• Lesson 1: HTML Basics (My First Page in HTML)

• Lesson 2: Font Styles

• Lesson 3: Font Color (This is Red, This is Green)

• Lesson 4: Links (Link to your 5 favorite Websites)

• Lesson 5: Adding Images (Zoo)

• Lesson 6: Photoshop Navigation Layouts

• Lesson 7: Design/Research Your Own (new HTML tags)

DIRECTIONS:

Setup Your Project Folders/Site Structure

• _ _ html_factory

o index.html (page)

o pages (folder) – Move your lessons 1-7 files in here.

o raw_files (folder)

o images (folder)

Make a Homepage

• Save this file as “index.html” (do not use initials)

• Design your homepage with good taste, add graphics and creativity

• Add your navigation to the homepage (see directions below)

Adobe Photoshop: Creating Navigation Buttons and Graphics

• Create Navigation Buttons for each of your EIGHT pages (SIX buttons for each page listed below, ONE for your homepage, and ONE of your choice = EIGHT TOTAL)

• Dimensions

o Use 100ppi (pixels per inch) wide and choose 75ppi tall

o 72ppi resolution

o RGB Color mode

• Create an additional graphic (mast head) for your index page

o 200ppi tall by 800ppi wide

o RGB Color Mode

o 72ppi Resolution

o save mast image as mast_head.jpg or .gif depending on graphic design

• After testing your navigation layout, you will copy and paste your HTML coding on each of the remaining SEVEN pages.

TIPS:

Saving as a Non-Native Format in Adobe Photoshop

• After saving your original Adobe Photoshop files as “.PSD” in your “raw_files” file folder, choose FILE( SAVE for WEB & DEVICES ( and choose “.JPG” or “.GIF”

Saving your Homepage

• Your homepage will be saved as “index.html”, this points your server and browser to the homepage.

Creating a Link from an Image

• Type in front of the text or image, replacing ? with the location of the linked image on your computer.

• Type after the text or image.

• EXAMPLES:

GRADING RUBRIC:

Top Mast Logo Design

• Design using Principles and Elements of Design _____/15

• Is it the proper dimension? (width, height, resolution, color mode)

Index/Home Page (index.html) _____/15

• Does your page utilize good design, good choice of colors? (5 points)

• Does your Navigation Buttons link to each of the EIGHT pages to your site?

Lesson 1: Basic HTML Programming _____/10

• Are all Formatting Tags Present: and etc…

• Is the Title present

• Does your Navigation Buttons link to each of the EIGHT pages?

Lesson 2: Font Styles _____/10

• Are all formatting Font Color Tags Present? (5 points)

• Is the Title present

• Does your Navigation Buttons link to each of the EIGHT pages?

Lesson 3: Font Color _____/10

• Are the background color properties present? (5 points)

• Is the Title present

• Does your Navigation Buttons link to each of the EIGHT pages?

Lesson 4: Links to your 5 favorite sites _____/10

• Does your Navigation Buttons link to each of the EIGHT pages?

• Does your site links work?

Lesson 5: Adding Images _____/10

• Does your Navigation Buttons link to each of the EIGHT pages?

• Are your images present, with no broken links?

Lesson 6: Photoshop Navigation Designs _____/10

• Does your Navigation Buttons link to each of the EIGHT pages?

• Did you fully research and utilize a new HTML Type of Code?

Lesson 7: HTML Design Your Own and Research Tags _____/10

• Did you research new HTML tags?

• Does your page utilize principles and elements of design?

• Is the Title present?

• Does your Navigation Buttons link to each of the EIGHT pages?

TOTAL: ____/100

-----------------------

HOME PAGE

(index.html)

HTML BASICS

(Lesson 1)

FONT STYLES

(Lesson 2)

FONT COLOR

(Lesson 3)

LINKS

(Lesson 4)

NAVIGATION DESIGNS

(Lesson 6)

IMAGES

(Lesson 5)

DESIGN/RES.

(Lesson 3)

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download