Web Design
Web Design Syllabus Remind: Text @webhhs to 81010
1/30 - 1/31:
First Assignment: Tell me all about you
For this assignment, please use one of three tools:
IMPORTANT NOTE: before you turn in the assignment, make sure that you have made your Piktochart or your Prezi PUBLIC!!!!!
Turn in the Assignment using this Form
Presentations on Monday, 2/6
2/1:
use this organization document to get organized electronically for the class
1/30 - 1/31:
First Assignment: Tell me all about you
For this assignment, please use one of three tools:
- Create an infograph: http://piktochart.com/
- Create a prezi: https://prezi.com/
- Create a video: use your phone, then upload it to Youtube
IMPORTANT NOTE: before you turn in the assignment, make sure that you have made your Piktochart or your Prezi PUBLIC!!!!!
Turn in the Assignment using this Form
Presentations on Monday, 2/6
2/1:
use this organization document to get organized electronically for the class
|
UNIT ONE - INTRODUCTION TO THE WORLD WIDE WEB AND THE INTERNET
February 1st - Website Review
Review the following websites and determine: What do you like or dislike about each site (list at least two likes and dislikes)? Which site do you like the best? Why? Which site is worst? Why? http://www.dunhamssports.com/ http://www.riversideartcenter.org/ http://www.hartlandhighschool.us/ Intro to WWW
2/2 - Complete the "Intel Internet" assignment, using this website: Intel, due 2/3, drop dead 2/10 2/3 - Reading unplugged 2/6 - Presentations of "all about you" 2/7 -Definitions PowerPoint that we reviewed together 2/8 - Read this and take notes: How Information Travels on the Internet - notes In addition, study for the quiz by reviewing this PowerPoint: here is the review 2/9 - Review three web sites and complete the document evaluating them (handout for you but attached here in case you are absent). Choose three web sites in the same industry. For example: three different sites that sell music, three retail store sites, or three sites representing a sport team. Turn in your document when it's complete. Make sure your name is on it! 2/10: READING 2/14: Quiz on how internet works Link to Quiz MAKE SURE you choose the red "google+" login button and login with your SCHOOL gmail account Typography
2/13: Presentation Typography Intro Assignment # 1 (done in groups in class) due 2/14 2/14: Helpful Typography Website - Read, Take notes, due 2/15 2/15: Typography Assignment (#2), due 2/16, drop dead 2/20 2/16, 2/17: Your ASSESSMENT for Typography Assignment (#3) due 2/17 Example of Assignment # 3 Directions for how to use the Snipping Tool on the computer UNIT 2: Design Principles
2/20: Notes on website planning in class 2/20 - 2/21: Design Definitions, Due 2/21, drop dead 3/2 1. Create a google doc, in your folder for Web Design. Name it: lastname_firstname_design_definitions 2. Start your document with this label: “Design Elements” 3. Define each of the following design elements: line, shape, texture, space, size/scale, value. For each item, define it IN YOUR OWN WORDS. Website to use: http://learn.daveharperdesign.com/design/ 4. Next, create a label: “Design Principles” 5. Define each of the following design principles: balance, proximity, alignment, repetition, contrast, space. For each item, define it IN YOUR OWN WORDS. Websites to use: http://www.j6design.com.au/ClientArea/6fundamentalprincipleofdesign http://desktoppub.about.com/od/designprinciples/tp/Principles_of_Design.htm 2/21 - 2/22: Discussion about design elements and principles, assignment due 2/22 end of class, drop dead: 3/3 UNIT 3: HTML
2/23: Introduction to HTML, Assignment One, due 2/28, drop dead 3/3 SAMPLE OF ASSIGNMENT ONE
2/28 - 3/1 Assignment Two, due 3/1 , drop dead 3/6 SAMPLE OF ASSIGNMENT TWO 3/6; Assignment Three, due 3/7, drop dead 3/10 SAMPLE OF ASSIGNMENT THREE 3/7 - 3/8: PERFORMANCE: Assignment Four, due 3/8 SAMPLE OF ASSIGNMENT FOUR Great websites for additional help, extra bells and whistles: Echo Echo W3 Schools 3/9 - 3/10: Assignment Five - Forms due 3/10 drop dead 3/15 All done? Explore more form components at: W3 Schools 3/13 - 3/16: Complete the HTML Assessment Helpful tips on how to make the columns the correct width in HTML 3/17: Quiz on HTML Review for quiz must be complete by begin of class on 3/15. Paper copies in classroom. 3/20: Warm Up: go to this website and draw. Tell me ... what is this? How does it work? To get the full effect, use headsets! Website peer review and turn in website 3/21: Thimble: complete at least three tutorials on this site and then complete the survey UNIT 4: CASCADING STYLE SHEETS
3/22: Introduction to CSS - Read this article and take notes due 3/22 3/22: Download this zip file and complete this assignment - done together in class - show Mrs. H 3/23 3/23 - 3/24: Complete this tutorial on CSS. Show Mrs. H your completed CSS document, and the HTML document you create during the tutorial. due 3/24 4/3 end of class: Answer these questions INVIDUALLY about CSS: - due 4/3 TURN THEM IN PRINTED WITH YOUR NAME ON THEM 1.What is CSS? 2.Why would I use CSS? 3.If I create a style sheet (a separate CSS document), how do I connect the style sheet to my website? (General terms, I don’t need the exact codes) 4.I want to use the selector I created in my CSS document that’s called “headlines” on the line at the top of my web page that reads “Welcome!” How do I do that? (General terms, I don’t need the exact codes) 4/3 - 4/4 Assignment One - work with a partner of your choice Assignment Description Zip File Due 4/4 end of class 4/5 - 4/6 Please create your CSS web page for your website. How do I create a CSS page for my website? - Handout CSS page for website due , end of class 4/6 UNIT 5: MICROSOFT EXPRESSION WEB
4/7 - Friday Read these two articles. Take detailed notes either on paper or in your electronic journal for this class. Why Should You Use Expression Web? 5 Best Free Alternatives to Dreamweaver - in case the link is blocked, here it is in a google doc (not as pretty, but workable) 4/10, 4/12, 4/13 Introduction to Expression Web Complete a tutorial on Expression Web - make a website about seals due 4/13 end of class (tutorial instructions in Mrs. Hasseld's class) 4/17 - 4/24 Create a website in Expression Web Create a four page website in Expression web following all the requirements. Rubric/Requirements Article that explains how to center your page in a browser: center page in a browser Code to add a "date last updated" feature: To add a "date last updated" feature to your website, copy the code below and paste it into each web page in the HTML code. <!--webbot bot="Timestamp" s- s-format="%A, %B %d, %Y" --> Read this article about Search Engine Optimization and take notes on the 8 tips. SEO, Security, Maintenance
April 26 - May 1st 4/26 - 4/27: NOTE: put notes for all three articles together, either handwritten or in a google doc, your choice 1. Read this article about Search Engine Optimization and take notes on the 8 tips. due 4/27 2. Read this: Article about Maintaining your website and take notes. due 4/27 3. Read this: Website Security Article, take notes due 4/27 4/27 halfway through class we will review: PowerPoint on SEO, Maintenance, Security 4/28: Carousel review of SEO, Maintenance, Security Reading 5/1: NOTE: Quiz on SEO, Security and Maintenance Select this link to Web Design Quiz Use your HHS gmail login and password - you MUST select the RED GOOGLE+ BUTTON! Allow Illuminate to recognize you and view your email address Choose the SEO, security, Maintenance quiz FINAL EXAM: Web Design Essay
Final Exam Essay Prompt and rubric - due Monday, May 15th In class work days: Monday 5/8 - Wednesday 5/10 Please use Turnitin.com to turn in your essay. For Fourth hour:
Unit 6: ADOBE PHOTOSHOP
5/11 Create a folder in your student drive, inside your Web Design Folder. Call it: Photoshop. Go to my Teacher folder on your shared drive. Copy the three pictures under the Photoshop folder: Old car, pitch in and cartoon guy. You will use these photos as you go through the tutorial 5/11 & 5/12: Watch this video and practice each task: (blemish fix, filters, layers, exposure tool, selective adjustment, remove object, move object, take object from pic and put on another, add text, save and save as jpeg) 10 top things to learn in Photoshop Tutorial (video tutorial ... step by step instructions) If you get stuck, this site gives helpful tips Due 5/12 end of class : An explanation (either typed or handwritten) IN YOUR OWN WORDS of how to complete each of these tasks: blemish fix, filters, layers, exposure tool, selective adjustment, remove object, move object, take object from pic and put on another, add text, save and save as jpeg. PRINTED, turned in to my box 5/15: Assignment one: Create a photo using the lighthouse and penguin photos in my share directory. (Remember to SAVE those photos to your directory before working on them!) You must do the following: put the penguins in the lighthouse photo, add text, use blemish fix, exposure tool or selective adjustment. Then, save the photo as a jpeg file in your student drive. When done, show Mrs. H your completed photo. Practice grade, due 5/15, drop dead 5/17. 5/16: Assignment two: Use any stock or personal photos THAT ARE SCHOOL APPROPRIATE to create a new, enhanced photo using at least five of the techniques you learned in the Photoshop tutorial. Feel free to use additional tools, but stay in the time allotted! Performance grade. You will show me your photo and explain what you have done. Due 5/17 end of class. SAVE your photo as a jpg file, and name it as follows: hour_lastname_firstname_photoshop2 Ex: 4_hasseld_anne_photoshop2 Drop your photo to Mrs. Hasseld’s drop box. Go to: www.dropitto.me/hasseld password: hasseld Submit your file 5/17 EXTRA CREDIT: Lightening Assignment three: Follow the directions to create lightening in a photo. Show me when done! PLEASE NOTE: you may use ANY photo you like. If you want to use the same photo that is in the example, you can find it on my share directory. DROP DEAD DATE: 5/25/17 5/18 - 5/19 PIXLR Link to Site Link to tutorials on Pixlr Your job: Spend Thursday and Friday learning to use Pixlr to alter/enhance photos. Answer the following questions (either show them to me online or handwritten or print and turn them into my box ... make sure your name is on it!): 1. How is Pixlr the same as Photoshop? 2. How is Pixlr different than Photoshop? 3. Make a list of the pros/cons of using Pixlr vs Photoshop 4. Write a couple sentences on which you would choose to use (Pixlr or Photoshop), defend your answer with facts. FINAL EXAM - Thursday, May 25th
Review Guide Helpful things to study: Intro to Computers Vocabulary PPT Design Elements and Principles PPT HTML: Refer to the handbook we used tutorial on CSS Expression Web: Refer to the handbook we used 10 top things to learn in Photoshop Tutorial TAKING THE EXAM: Select this link to Web Design Final Exam Use your HHS gmail login and password - you MUST select the RED GOOGLE+ BUTTON! Allow Illuminate to recognize you and view your email address Choose the Web Design Final Exam CAPSTONE PROJECT
Capstone Project Assignment 5/30: Introduction 5/31: Proposal 6/1: Proposal due, review with Mrs. Hasseld Begin Project work 6/9: video due, send youtube link 6/12: First hour show video and complete reflection 6/15: Seventh hour show video and complete reflection LINK TO ADD YOUR VIDEO TO THE LIST (no video, no grade for this project!) Instructions for Finalizing and Submitting Project (no project, no grade for this project!) Link to Reflection for this project - must complete on last day Adobe Illustrator Link to video tutorials |
|
