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.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related searches
- central high school st joseph mo
- central high school hillsborough nc
- central high school saint joseph
- central high school missouri
- high school back to school list
- central school district rancho cucamonga
- central ohio school district rankings
- central ohio school district rating
- high school to flight school army
- central illinois school district map
- central ohio school district ratings
- central unified school district calendar