AHS Logo
MVROP 			        
				     Logo
720-408-2051

AHSweb.mvrop.org

American High Web Page Design course taught through the generous support of M.V.R.O.P.

Curriculum Scope & Sequence:

Instructor: Mr. B.C.

This course meets weekly on Mon,Tue,Fri for 55 minute periods & on Thursdays for 90 min. periods.

Click Here to return to the AHS School Loop Web Page Design Site

Fremont Unified School District Catalogue Course Description

Explore web design as you incorporate graphics, sound, movies, and animation into HTML/ CSS built websites. Students will learn all phases of the design process from the idea state, through planning, production and testing while creating original web sites. Learn design concepts for content and layout as you design commercial web pages.

Course Purpose

In the dawn where web publishing has become completely accessible to the average consumer, businesses are seeking qualified web-designers to cut through the “boxed, cookie cutter”- excessive template-looking sites. This course aims to arm students with the knowledge to establish sites, which can offer companies, and their brands, products, and missions a tailored look and style; A creative design, with friendly, accessible user interfaces, that meet the needs of their clients’ innovations, ideas, and mission statements. This course aims to give students the base practical knowledge to create web sites from the ground up, using W3C standards building methods for current browser and media queries. Students will also become knowledgeable regarding: website accessibility, semantic mark-up, proper character encoding.

Course Goals

By completing Web Page Design , students will be able to describe the history of web design and make informed predictions about future trends; work in a team to deliver professional-quality projects on deadline; design content for desktop, handset and tablet delivery; choose appropriate tools to complete assigned tasks; and create standards-compliant web sites using HTML, CSS, JavaScript, bitmap and Flash assets.

Course Objectives

Present their artistic web site designs while create a semantically structured HTML document with a text editor, meeting publication requirements
Create a standards-based CSS document with a text editor
Use a Dropbox and file organization to manage and share documents, and back-ups, and collaborate with colleagues and instructors.
Use of browser property inspectors to effectively determine proper edits in markup.
Understand color theory and use of Pantone color charts, and hexadecimal colors
Open, copy, edit, and share Google Docs and spreadsheets
Embed images, audio, video, and Flash .swf files in an HTML document
Edit outdated HTML tags, and recreate websites with proper use of current standard methods.
Create their own forms, galleries, and website design templates requiring input interfaces.
Use Dreamweaver to create and manage a complete web site.
Use Photoshop to crop, mask, and color-correct images.
Explain the differences between JPEG and Gif, PNG file types
Give an accurate estimate for how long a web design project will take to complete.
Create and manage a personal web portfolio
Learn methods, responsibilities, and protocol for publishing work on the World Wide Web.
Critique, evaluate, and augment web site design to improve design effectiveness and communication.
Actuate Search engine optimization (SEO)

Texts & Supplemental Instructional Materials

Keith, J., DOM Scripting: Web Design with JavaScript and the Document Object Model, Apress
Negrino,T., Dreamweaver CS5 for Windows and Macintosh: Visual QuickStart Guide, Peachpit Press
Reding, E., Adobe Photoshop CS6 Revealed: Deluxe Education Edition, Thompson Course Technlogy
Weinmann,E., Photoshop CS6 for Windows and Macintosh: Visual QuickStart Guide, Peachpit Press
Zeldman, J., Designing with Web Standards: Third Edition, New Riders

Software

Microsoft Windows7 & Office 7
Adobe Creative Suite 6: Web Design Premium: Acrobat Professional, Dreamweaver, Fireworks,
Flash, Illustrator, Lightroom 2.0, Media Encoder, Photoshop
Apple Safari for PC, Google Chrome, Internet Explorer, Mozilla Firefox &
their inspector consoles. Sublime Text 2, Notepad ++,TextMate version 2.0-alpha.9529

Main Online Resources

unalleviably socialize Modzilla Developer Network

Thanks to spyrestudios.com for their tutorials which allowed the creation of this site to be possible. →

Course Introductions

Students will be introduced to the course syllabus, intructional methods, rules and daily routine practices of the course.

Student Work

Completed forms turned in on time, discussion of professionalism

HTML tutorial

Technical Readings

(580) 623-4299

Basic HTML, Tags, Elements, Expressions

Students will create a web page based resume, employing basic html tags. They will use: w3schools website & Mozilla Developer Network info. &tutorials to investigate, use and understand html.

Student Work

Non-Div'd student resume with images &links.

HTML tutorial

Click icon to see student work

HTML

Div's & Floats & Cascading Style Sheets (CSS)

Students learn the art of scoping a web site, using the Inspector element, and understanding Box Model Web Design

Following a set tutorial and gain the skills therein, students develop a set 2 column webpage, that they then personalize.

Student Work

Click icon to see student work

Chrome's Inspector 
					Element Box Model

Lesson Readings

Tutorial serves as this lesson's technical reading

Divs

Divs Vs. Spans

Following the enclosed tutorial students learn the usefulness of span vs. divs. creating a display of categorical columns.

Student Work

Click icon to see student work

Chrome's 
							Inspector Element Box Model

Lesson Readings

Tutorial serves as this lesson's technical reading

Spans

Personal Business Logo

Students create personal business logos in Adobe CS6: Illustrator & Photoshop.

Student Work

Chrome's 
									Thomas B.C. Business logo

Click icon to see student work examples

Lesson Links

Demo on Vector graphic logo creations

Lesson Readings

TBP

externation

RE-Engineered Resume Web site (Div's)

Students recreate their original Resume web site, including: their personalized logo, links to institutions, logos from their institutions, and updated resume information USING DIVS.

Student Work


						Justin Wei's Web site V1

Click icon to see student work examples

Lesson Links

Please see previous lesson links; if needed

Lesson Readings

Review prior readings if needed

5416547559

Learning & Presenting New HTML & HTML5 Elements and thier associated CSS Attributes

Using The Mozilla Developer Network & W3school.com, Students will investigate and find new html & html5 elements and CSS properties not previously learned in class. In a Multi-page web design, students will present the new tags,describe whether it has local or global attributes, and share what the properties of the attributes are, as found in researching their specific Elements to present to the class in an educational manner. Students will have a review and exam based upon the information presented to each other.

Student Work

Howard Meng's Element Presentation

Click icon to see student work

Lesson Readings

Students will read the MDN re: attribute, properties and their use

HTML5

Student Presentations of New Elements With Demonstration

Peer & Instructor Critique of Student Designed Web Sites which introduce new html elements not previously learned in class. Students will link to the Mozilla Developer Network Page and section of their chosen element, present its attributes, and associated traits from the MDN. Students will comment on the delivery of information as designed by the student, and how useful the demonstration of the Element was to their learning and understanding.

Student Work


						     Element Presentation

Click icon to see student work

Lesson Links

Presentation Rubric

To Be posted

813-876-3661

Using The Inspector Element: Deconstructing Students' Favorite sites

Using the DOMi ∼Inspector Element∼ & Mozilla's x-ray goggles web app, students will discover and re-create the main structure of their favorite web site. After the site is emulated, students will then personalize the content to their needs.

Student Work

Recreated Favorit Website

Click icon to compare Yahoo's Original To Their Re-designed Version

Lesson Readings

Using Moz X-ray Goggle Web App, students may come across new html tags and needs to read about them in the MDN.

2036317087

Quarter Exam Time →Course Application Page

Students are given a screen shot of a fictitious webpage, and are asked to recreate it as best as possible, only using the Mozilla Developer Network and past work files as a reference.

Student Work

Click icon to see student work

2269306474
507-398-4292

Quarter Exam 2 →ACME Corp Website

For students, Choice in decisions can sometime, make or break the motivational power student place in work. Also, the ability to challenge one's self further if they have the capacity and skills to do so, cannot be understated in allowing students to show their skills. Thus I give students the option of undertaking one of two different Quarter Exams, and then allow them to take on the challenge of furthering their knowledge and skills in the additional assessment.

Given An Image Logo, and a screen shot, how perfect can student match the screenshot. Students must design thier box model layout on paper showing the scoping design of their web page, and then complete it.

Student Work

Click icon to see student work

						     Recreated Favorit Website
Exam2

Re-Design1

After having framed their favorite websites box model layout, laying out the positioning of divs, columns, headers, etc... students will then personalize the content of their web site framing, making a unique web site from thier existing basic structure.

Student Work

Click icon to see student work


						     Recreated Favorite Website
Redesign

Re-Design2

After having framed their favorite websites box model layout, laying out the positioning of divs, columns, headers, etc... students will then personalize the content of their web site framing, making a unique web site from thier existing basic structure.

Student Work

Click icon to see student work


						     Recreated Favorite Website
Redesign2

Client Work

Mr. John Creger, English Instructor: Client

Mr. Creger approached our Web Design & Development Course to re-design his senior student Nethen Mou's existing SquareSpace website to an independent server hosted site. The students jumped at the opportunity to have a real-world client.

The Personal Creed Project Website

Click icon to see student work

Recreated Favorite Website

Lesson Links

Lesson Readings

626-918-5785

Client2 → Logo Use Policy Agreemeents

Mr. Fulton, our activities director, sent me this email one afternoon.

Hi BC, I have shared some example images of logo's we need for our school site. I'd like one for each of our social media accounts. Twitter, instagram, facebook, and youtube. I also think it would be cool to have one for our online store. I have included Granada High's, they use an amazon theme, and also American Eagle Outfitters, some of my students like the idea of calling ours this. Let me know if you think these would be possible. I want to use them as buttons on our homepage.

Thanks, Chris

After visiting Granada High School's web site, and acknowleging the blantant disregard of legal policies, I thought this would be a great assignment to pass on to my web design students. Instead after researching it and providing the readings, I challenged students to come up with a creative solution as an extra credit option.

Example Works

Click on image for link; see lower right corner for logo infringments


						     Granada High School's infringement of logo copyright
212-836-9119

CSS Animations

This lesson walks students through a scaffolded run of 4 CSS animation projects;
1→animating color changes with durations
2→the above with position changes
3→the above with duration, timing-function,delay,iteration, direction, play-state
4→Student creation using all of the the above skills.

Lesson Links

9728747858

Codecademy

In preparation for class exams and teacher observational assessments, students are asked to register an account through codecademy, and in an ongoing process complete trainings for the Html & CSS as well as the Javascript

Instructor can monitor the progression of a students learning as they go through the tutorials

Codecdmy

Panel 18

HTML & Javascript Animated Clock

Students will design and create html,css,animated clocks, then re-design them to become accurate through the use of Javascript to pull in from the DOM, the current local time.

Lesson Work Example

JavaSCriptClock

Lesson Readings

Web sites referenced material serves as the technical readings for this lesson

JS→Clock

Web Design Job Search,& Application

Students will research online the potential job market skills they currently meet through completion of this course and other skills they've mastered. Students will complete a job application, mock interview, and personal portfolio presentations

Lesson Work Example

To Be Posted

Lesson Links

  • To be posted
Jobs

Final Exam Project →Web Design Proposal &Completion

Students will write a proper web design proposal, and submit it for review by the instructor. Site should not be highly personal in nature, rather be a web site that benefits the community at large.

Lesson Work Example

To Be Posted

peptonaemia