First Day of School!

Go over School Rules and Class Procedures
Finish class Introductions

1. Hand Out Computer Rule Sheet
2. Finish Introductions

Second Day of School!

Go over School Rules and Class Procedures
Finish class Introductions

1. Collect Signed Computer Rule Sheet
2. Finish Introductions
3. Turn on computers - Log in with new password
IF you are NEW - password1 is your password
IF you are OLD - use your old password BUT you must reset it immediately.

4.. Log into FOCUS through LaunchPad - Check out other resources

Computer Set-up

Look around computer – note programs.
Set up Start Menu and QuickLaunch settings.
QuickLaunch Taskbar at bottom, Show desktop link.
Chrome shortcut Link

Rules Test coming up at the end of next week. No pressure or anything - it's just to make sure you read the Rules sheet. You don' t need to study, but if you want to.... HERE (PDF) is a copy of my rules.

Review:

1. Tour of computer desktop
2. Adobe Programs
3. Quick Launch
4. Demonstrate QuickKeys to access shortcuts quicker.

Log into and set up OneDrive-BrevardSchools. There are 2 that you have acces to BUT use the Brevard Schools One NOT the Plain One

OneDrive - BrevardPublicSchools YES YES YES
OneDrive Personal - NO NO NO

Folder Set Up:

Dreamweaver, Animate, Photoshop, Premiere, ,LocalSites, OldSites, Stuff, Personal

Remember to store everything on your OneDrive. DO NOT to save anything on the computer/MyDocuments.

START QUICK KEYS ASSIGNMENT.

A,B,C,F,I,N,O,P,S,U,V,W,X,Y,Z, 1,5,2 | F7,F5,Alt+F4, Alt+Tab

Finish Quick Key assignment You can also watch a video of me doing it HERE!

If you are having troubles with the OneDrive - Here is a video to help you set it up.

We (as a class) will print the QuickKeys assignment out when done - please stay with me on this.

Short lesson on how to search for images on Google and download them. Copyright, proper usage discussion.

Printer - it should automatically recognize you in this room BUT it is the "LX360 Printer" (The 2011 is our school number)

PLEASE double check three things before printing:

1. Is the work done to the best of your ability?
2. Is it ONE page?
3. Is your name in the footer?
4. Print if OK - I'll take care of the printer today, but normally you can go get it.
_______

Review Quick Keys worksheet - there will be a test on it at some point in the future - study your printout and practice when you are in class.

Start your Web Browser Sheet HERE. Save it to your stuff folder.

Set up headers and footers.

OK - let's finish out the week -

1. Did you turn in your signed Computer Rules Sheet?
2. Are you using your OneDrive-Brevard Public Schools?
3. Did you set up your Task Bar?
4. Did you set up your Start Menu?
5. LAB FEE next week of $5 - try to remember that.
6. Did you print your finished Quick Keys Sheet?

TODAY
1. Finish and Upload your Web Browser Sheet - did you do the headers and footers?
2. Copyrght Rules Sheet - download both the links below and complete the new worksheet

Copyright Worksheet HERE Use this link HERE You will need to allow the SWF to run.

Check to make sure you have the following completed:

1.Quick Keys printed and returned (if I passed them out)
2. Web Browser sheet Uploaded
3. Copyright Sheet Uploaded

Ice Ice Baby - Copyright HERE

Yes, you can turn these in for full credit BUT you should keep track of what you have turned in. Remember you can do it at home as well. Log into your Drive account at home and use Word.

Make a new folder in your PS folder called PS-Ducky-Beiber and download these files into that folder. Download both Ducky and Beiber.

4 Main things you should learn today Memorize these and put them in the STICKIES!
1. PS is composed of layers!!
2. Unlock a layer to work with it.
3. Show transform controls!!
4. CTRL+ D = Deselect

4 layers for the duck - Hue&Saturation
New Colors for Ducky

DUCKY

Things you will learn/review:

1. Extraction using Marquee Tools,Lasso Tool, QuickSelection and Magic wand
2. Layers and Duplicating
3. Hue and Saturation coloring
4. Images from Internet - How to download and Save
5. Layer Arrangement
6. Text Tool - FX

Videos if you just need a review OR you didn't catch it.

Photoshop Introduction if you missed it!
How to Extract a Photoshop Image HERE NEEED TO LINK UP!

Quick Review of what you learned:

1. PS is composed of layers
2. CTRL+D or deselection for anything selected
3. Show Transform Controls MUST show to resize
4. MUST unlock layers

Other lessons:

1. Marquee Tool
2. Lasso
3. Quick Selection - Magic Wand
4. Crop Tool
5. Eraser Tool
6. T Tool for your name.
7. Saving as PSD
8. Exporting as JPG/GIF/PNG
   

Work on Beiber - give him a new background and put your name on it.

Save as PS_Beiber-After.

REVIEW VIDEOS

PS Introduction

PS Extraction

You can also review or watch my videos on this lesson. by going to my video page HERE.

Keep working on Beiber

We are going to:

1. Duplicate him 4X
2. Use Liquify to modify him
3. Arrange him 4 up all facing the center
4. Put a new background behind him
5. Put your name on it (PS-Beiber - LastName)

WHEN BEIBER IS FINISHED Do one more.

Find and download 2 celebrities and give them the "Beiber Treatment" or basically do the same thing to the new person that we did to Beiber.
2 HINTS
1. Find an image that will make it easy to extract the person from.
2. Use your Google Tools to find a image over 800px.

Save it as PS-Celebrity and be sure to put it in your PS-Beiber-Ducky Folder

Review Worksheets
1. Quick Keys - Next week friday Quiz
2. Web Browser Sheet
3. Copyright sheet

PS-Celebrity Finish

Together -- export 3 ways for the internet - GIF, PNG, JPG and Compare of Images
Use File Export Save for Web. (This is the ONLY time that we will be exporting this many images - you only need one image the rest of the year.)

Start new worksheet on Image Types- remember to set up Headers/Footers and use SAVE AS to put it into the Stuff folder.

HOMEWORK - get an image of yourself and e-mail it to yourself so you can practice your extract skills.

OK QUIZ TIME ON CLASS RULES and other misc things.

JUST A COUPLE THINGS FOR TODAY:

1. Go to Socrative.com and I'll help you log into your first quiz. You may only use your memory on this quiz.... just 17 questions today.Class name is ANGOVE
2. Worksheet on Image Type Comparison HERE (Word 202KB)
Put it in your Stuff folder and put your name in the footer. Use the internet to find out the answers. (Read what the site says, then use your own words to answer.) Use your files you exported PS-Celebrity to answer the questions.
3. I'll come around and check your 3 pictures you've done so far. Please have them open for me! PS-Ducky - PS-Beiber - PS-Celebrity
4. Keep working on your Image Types worksheet - upload when done. Not officially due until Monday, uploaded to FOCUS.

HOMEWORK - get an image of yourself and e-mail it to yourself so you can practice your extract skills.

CHECK YOUR GRADE - ANY ISSUES LET ME KNOW
Lab Fee this week if ready to turn it in = $5.

Keep working on the worksheet on Image Type Comparison --Upload the assignment to FOCUS today - yes, you might need to finish this for homework.

_______

PS DONKEY!!!!! Download this ZIP file and export to your desktop. Make a new folder in your PS called PS-Donkey and put all the files in there. (THIS is what we are trying to make.)

PS-Donkey1-3 First Video HERE
PS-Donkey2-3 - Second Video HERE
PS-Donkey3-3 - Third Video HERE

Things you should do with PS Donkey:
1. Extract and Import (Drag&Drop) the shed to the hills background.
2. Extract and Import the Donkey into the hills.
3.Reverse the Donkey to face to the right.
4.Make a new layer and plant some grass.
5. Burn the sky to mimic a rainstorm.
6. Put your name across the sky with FX on it.
7. Burn or Dodge the shed to reflect a light source.
8. Add shrek after extracting him from an internet image.

HOMEWORK - get an image of yourself and e-mail it to yourself so you can practice your extract skills.

Lab Fee this week if ready to turn it in =- $5.

Ok you should have most of your donkey done - we are going to put a couple more touches on the PS-Donkey (he's gotta have a Shrek friend) and then we will export PS-Donkey for Web.

If not completed, finish Friday's worksheet (Image Comparison.

HOMEWORK - get an image of yourself and e-mail it to yourself so you can practice your extract skills.

Lab Fee this week if ready to turn it in = $5.

Finishing touches on PS-Donkey.
Name, Shrek/Dragon, Burn Shed roof, Filter/Render/LensFlare

Make your own scene using the same skills you used in PS-Donkey
Do the following:
1. Extract yourself & Celebrity and 3 things to a new background - try to tell a story with good interaction.
2. Burn or Dodge the background (or something)
3. Save it as PS-Extract in a PS-Extract folder
4. Export as a JPG High. (Final export should be <1000px wide.)
5> Is your name on it with a warp and FX?
No story-C - Good interaction-B - Totally Interactive-A
Best in Class - A++

Keep working.

QUIZ ON QUICK KEYS!!!!
Log into Socrative.com with class name Angove

Finish your PS-Extract (You and a celebrity with a background) and export it the best way after comparing the sizes and quality.

SHOW ME:
1. PS-Donkey
2. PS-Extract

LAB FEE OF $5 - please turn in this week.

Check your grades.

Try this game HERE to tell the difference between sans-serif and serif fonts.

Go over the worksheet from last week - Image Comparison Sheet

_______

Introduction of W3Schools

Time to jump into HTML - the base language of almost all websites!

We are going to create websites using NotePad (OR Notepad++) (do a search on your computer) and learn about HTML on W3Schools.com - there are many resources there, so go in order and see what you can do!

HERE is your link to get started.

Make a new folder in your LocalSites folder called 1-FirstSite

HERE is what it should look like when done.

NOT ASSIGNED HURRICANE EVAC
Worksheet Grading Websites HERE. DUE FRIDAY Do this either at home OR in between what we are doing in class

$5? Did you PMLYOM ? BHMM.

Re-read yesterday's plans.
(IF you TOTALLY messed up yesterday, you can check out my video page HERE.)

So far - You have learned:
Basic Page setup - heading sizes, paragraphs, linking pages images and image size. "Sandwich Method"

Today you will learn:
1. Inserting Pictures / Controlling Picture size
2.HTML Attributes - ALT
3. HR tag (Horizontal Line)

Finish your first website using the HTML tags you just learned. New site tomorrow!

Website Accessible Standards at WebAIM

LAB FEE OF $5 - please turn in this week.

Keep working on your index.html page on your 1-FirstSite folder.

Yesterday Put your PS-Extract Image on the page
Remember You will need to put a copy of the image in the folder and probably resize the image as well using height and width

NEW NEW

Work through the HTML Basic
You will need to put an OL List on your page of your classes.
(so 7 different numbered list items)

Continue working through HTML Attributes.
Put some color in your words! Color each line (yes it will look like fruit loops)

1. OL and UL Lists
2. Style Attribute

As you are working through the W3Schools lessons, take a short informal quiz to test yourself- take the 4 testing exercises at the bottom of the Attributes page.

HERE is what your page should look like.

LAB FEE OF $5 this week - please turn in this week.

SHOW ME YOUR 1-FirstSite website.

2-QuickKeys assignment NEW WEBSITE!

Make a new folder in your LocalSites folder called 2-QuickKeys and put your html document in there (index.html). Use your current skills to make a new page reviewing the quick keys. Put your 22 quick key commands on it. Use the sandwich method of making a site.

Basic Steps:
1. Open Notepad++
2. Create your basic site with some H1 and H2's, headers and Footers with hr tags using the sandwich method.
3. Copy and Paste your Quick Keys over inside the body. DO NOT number it - You will use an OL list
4. Work through the exercises below.

Online Assignments:

• W3 Schools - HTML Headings - work through the page and do the exercises at the bottom. (How did you do?)
• Keep working through HTML Paragraphs work through the page and do the exercises at the bottom. (How did you do?)

Yes, I made you a video as well! HERE It's the QuickKey1 Video

This is how far you should be at the end of today on W3Schools.

Main Things Today:
1.Take a short quiz HERE onW3Schools at the bottom of the HTML Styles Page. Scroll to the bottom of the page.
2. Work through the second video and enhance your Quick Keys site.

Your 2-QuickKeys website should be looking decent at this time. Work through HTML Styles (Colors) do the exercises at the bottom of the HTML Styles sheet.

Make these changes to your 2-QuickKeys website after going throught HTML Styles:
1. Body background with hexadecimal color (find a nice color that doesn't clash with your background.)
2. Change your font AND font color (Use Word to find fonts.)
3. Headings - align to center (Don't center your QuickKey Info)
4. Use hr tag to put lines in (Sandwich method)
5. Address tag at bottom with your name.
6. Use some compound styles.
7. Switch ALL your colors to hexadecimal.

Yes, I have a video for you as well! HERE QuickKey2 Video

HERE is what my code looks like (DON"T COPY MINE - it's just and example.) I already did the OL list - you probably have not.

Main things today:

1. Check your grades - any issues - see me @ PH-A
2. $5 Lab Fee Due THIS WEEK - LAST WEEK TO TURN IN!!!
3. Keep working on your Quick Keys. You should be on Quick Keys Video #3 ! HERE QuickKey3 Video
4. Short informal quiz on HTML Formatting (Remember the quiz is at the bottom!) in W3Schools.

Use the following commands in addition to the previous lessons in your website.
1. Bold - Use the Strong Attribute
2. Italicize - Use the EM tag
3. Mark Tag (on the hard quick keys)
4. Address for your name at the bottom
5. Comment tag someplace at the bottom.
6.ALL Hexadecimal color codes. HERE

HERE is an image of the code I used - DO NOT COPY - use your own ideas! HERE is what my page looks like.

OK - your site should be looking good at this point and your site should almost be done.

DO NOT GO ON TO QUICK KEY CSS VIDEO YET!

These are the Tutorials that we are working on this week.
You have worked through HTML Paragraphs - keep pushing through to colors.

Main Things Today:
1.Finish up your 2-QuickKeys site (Did you complete both the video AND the list from yesterday?
2. Grade 2-QuickKeys page
3. Start ColorTheory worksheet (bottom of page)

CHECK TO MAKE SURE YOU HAVE ALL THE FOLLOWING:
1. Site is inside LocalSites/2-QuickKeys folder.
2. Page is called index.html
3. Sandwich method
4. Title in top tab
5. H1 at top of page centered
6. Address at bottom
7. Body background with hexadecimal color
8. Font color changed
9. Different Fonts (Make them noticeable! - Use Word to figure out what fonts are installed.)
10. Bold/Strong in text
11. Italicize/EM tag
12.Mark Tag
13.Comment tag someplace at the bottom.
14. 2 Appropriate pictures floated to the right (NEW)

PRINT your HTML version of the website for me to grade. I'll help you print it out. NO 2 PAGERS!

Start Color Theory worksheet HERE. (REMEMBER if you are behind - do can do this at home!)

Use these sites for the last questions on the worksheet -->Go to color.adobe.com OR www.paletton.com (Bookmark these sites!)

Keep working on your Color Theory Worksheet

Check your grades - if you have any issues - I might be able to take care of it in class, but the best bet is to come during PowerHour!

Work on your Color Theory Worksheet Print it out two sided when done. (Of course, you saved it in your Stuff folder AND put your name on it before you printed, right?)

That is all! Review for your Quiz tomorrow on HTML and ImageTypeComparison.

Quiz on Image Types& HTML
25 Questions on Socrative. Room Name ANGOVE

Remember to use your LastName,First Name format. You WILL get points off if you do not.

_____

Check out this site HERE for a quick demonstration of CSS.

HOW DO MODERN WEBSITES RELY ON CSS FOR FORMATTING?

HTML CSS Lesson We'll go through this today. Take your time and be careful of punctuation - yes the brackets matter. Complete the 6 exercises at the bottom of the page. You do NOT need to save them.

• Use the HTML style attribute for inline styling
• Use the HTML <style> element to define internal CSS

Edit your QuickKeys document to internal CSS.
You can also check out a video on my video page. You are on Video #4. HERE is a link to the video page. QK4

MAIN THINGS TODAY

1. Review Color Theory Worksheet
2. Review your 2-QuickKeys Site - address tag

OK - finish up QK #4 on CSS - Remove all your inline CSS (with the exception of the images) and put it at the top.

Work on Monday's work if you are ahead.

You should have completed and understand all these lessons so far - we are starting CSS soon!

Looking for a video? Check HERE!

HOW DOES CSS CLEAN UP YOUR WEB PAGE?

Finish changing your 2QuickKeys into an internal CSS document.

You are on QK5 video HERE.

When done - make sure you understand the following and have added CSS to support all the following.

• Use the HTML <link> element to refer to an external CSS file
• Use the HTML <head> element to store <style> and <link> elements
• Use the CSS color property for text colors
• Use the CSS font-family property for text fonts
• Use the CSS font-size property for text sizes
• Use the CSS border property for visible element borders
• Use the CSS padding property for space inside the border
• Use the CSS margin property for space outside the border

Add CSS to support ALL the following:

1. Body
2. H1
3. H2
4. OL
5. LI
6. Address
7. P

Remember to NOT use any color names, use only hexadecimal colors.
Remove ALL Inline CSS - you should ONLY have internal CSS.
(Your ONLY exception is your images, you will have some code on them. , which is OK.)

You can also check out a video on my video page. You are on Video QK5

Some additional CSS

OK - time to wrap up the 2-QuickKeys site with some finishing touches.
Make sure you have added ALL the items from yesterday to your CSS.

You can also check out a video on my video page. You are on Video QK6

Angove Lesson today on DIV tags
DIV means page DIVisions - or boxes - all modern sites are based on this theory.

Div Id Container.
<div id="container">
</div>

#container {
width:800px; background-color:yellow; margin-left:auto; margin-right:auto;
}

OK - Time to grade yourself - get a rubric, put your name on it and hang onto it. UPLOAD YOUR INDEX.HTML PAGE TO Focus!

NEW WEBSITE NEW WEBSITE NEW WEBSITE!

We are making a new site that will use modern design with HTML5 and CSS combined. Some of the HTML5 tags are a little different = check them out -- HERE if you are wondering why I named things a certain way.

HTML Links Section today HERE

3-ImageTypes Website Video #1 on my video page. 1/10 today. [11Min]
You will learn the following:
1. New Local Site folder
2. Setting up basic DIV tags.
3. Linking CSS.

You can also check out a video on my video page. 1/9 video

Second day 3-ImageTypes website

2-10 Video -Planning out website

Yes, you can work ahead if you want to!

Keep working on your website!

Video Lesson- 3/10 6:41 Minutes
Creating an index page
a. Basic page structure
b. DIV Tags (HTML5)
c. Use External CSS
d. Sandwich Method

Video Lesson 04/10 7:38 Minutes
Linking to Pages that don't exist *yet*

Video Lesson 05/10 10:56 Minutes

Creating Color Scheme using Paletton.com and CoolText.com (Bookmark these Sites!)
Modifying colors and DIV's
Take you time on this lesson!!!

BIG DAY for you - it's all coming together!

Video Lesson 06/10 11:56

Tables! Use W3Schools to check them out.

Video Lesson 07/10 7:22

Making all your pages - don't walk out today without having a complete website!

Video Lesson 08/10 10:20Minutes

Adding Content to your pages - pics and text.

Video Lesson 09/10 7:38Minutes

Images as links - Setting up a table to organize information. YES you have to set up your own table and YES this will take some time.

Video Lesson 10/10 7:40Minutes

Cleaning up website / putting images into folders.

WOW - You should be done - do your last checks...
Grade yourself if you are ready

Your site is NOT officially due today, BUT if you are ready to turn it it, follow these instructions to turn in your site:

1. Right-Click on your 3-ImageTypes folder.
2. Click Send To - Compressed (zipped) folder
3. Rename the zipped file with your period and last name (2-Smith)
4. Upload this file here.
5. Hand in your Rubric sheet.

TURN IN your 3ImageTypes website to Edline.
I will show you how to Rename your folder, zip it and submit it.
(or follow Friday's lesson)
100% STUDENTS TURN IT IN NOW
100% STUDENTS GRADE YOURSELF NOW
If you want to make some of it up, I am here for PowerHour M,T,W and will grade it one time late (yes, you will get points off!).

Do NOT work on the site in class anymore - you need to start the new assignment. Points will be deducted if you do!

NEW SITE 4PersonalSite - This site is like a comprehensive test on how to create an HTML Page so - I generally won't be helping you on this one, you can assist (just a little) your neighbor though.

Video Lesson Lesson01 4-Personal Site [7Min]

General Instructions - follow if you wish:

1. Make a new folder 4-PersonalSite
2. Make an image folder inside of it.
3. Go to Paletton to get some new colors for your personal site. Put the Paletton color scheme into your Images Folder.
4. Sketch site out using DIV tags in Paint like you did before. Save it as 4PerSiteCOMP.jpg
5. Start making your index.html page. Use your 3rd site as inspiration.
6. Set up your external CSS page and link it to your index page.
7. ONLY WORK ON YOUR INDEX PAGE

1. Home Page - index.html
   1. 2 Pictures of you floated- some general information.
2. Personal Page - personal.htm
   1. UL list with 5 links to school sites
   2. OL list with 5 links to personal sites
   3. 2 pictures floated
3. School Page - school.html
   1. 3 column 8 row table with Teacher/Class/Picture
4. Other Page - can be anything you like to do
   1. (NOT other.html) I called mine motorcycle.html
1. 2 pictures with written paragraph
5. Paletton Page -paletton.html
   1. Put your two Paletton Images on this page. \
   2. Put your 4PerSiteCOMP.jpg on this page.
   3. Text is not needed.
   
   

Work on ONLY your index page.
Here is what my basic code looks like - check out the new <nav> div - put your links inside this so you can control them. Use the code in your sketch we did yesterday.

Set up your links - get some content for the main section - your picture (PS-extract?) and some general information about yourself.

Change colors on H1-H3's and other sections.

ONLY WHEN YOUR INDEX PAGE IS PERFECT -
Time to make all your pages - copy and paste the index then rename each page. (If you forget how, check out the 7th video of 3-ImageTypes HERE) Change the Title and header of each page.

Paletton Page - add your pictures.

Personal Page

You should have - H1's, H2's, 2 pictures, and 5 UL links, 5OL links.
Also put 2 pictures floated to the right of the links. (You probably want to use PNG's because of the transparancy - but any pic is OK.)

Remember, you are not going to hurt my feelings if you do some work at home.

Other Page

Whatever you want - Put what you want in this page - 2 pictures, H1, H2 and some text about you or what you like to do. It should be something that you like to do in your spare time - band.html, skate.html, horses.html or whatever. Make sure you have 2 pictures and some text content.

NO SCHOOL TODAY!

Keep working on your site.

Start the table for the school page.
Find pictures for your classes - yes, you will have to control your height and width.

School Page

Add these to your website.

1. Picture of MHS
2. Picture of your class. (I'll take it and put the link below.)

PICTURES

• Period 02 HERE
  
• Period 04 HERE
• Period 07 HERE

DO NOT DO THE VIDEO
Put your class video on your site.
Read about how to input a video HERE. Put your code in so you can just place the video in.

Get your pages done HERE is a rubric that you will use to grade yourself tomorrow.

Other Page - anything you want (Sound file? Optional HERE)

Test on friday - color theory, CSS, HTML etc.

HEY - no more straight HTML coding.

Finish up site - due today at end of class.

Fill out your rubric turn it in to me. 100% YES YOU MUST DO THIS!

ZIP your website folder and upload it to Focus!

1. Right-Click on your 4-PersonalSite folder.
2. Click Send To - Compressed (zipped) folder
3. Rename the zipped file with your period and last name (2-Smith)
4. Upload this new zipped file to Focus.
5. Hand in your Rubric sheet.

Points deducted for each class day late is 10% or 20 Points - DON'T BE LATE!

PS-Banner1 today

Make a new folder in your Photoshop folder called PS-Banner1

What you are learning how to do is to paste an image behind text. You will use these on a future site (Halloween).

You should use 4 different pictures behind your text (Your Name) and export them as well as PNG's. BE SURE TO WATCH THE ENTIRE VIDEO so you only need ONE PS file to do all the work on.

Check out how to make a banner here. OR Direct Link HERE

You should make 4 different backgrounds using the same text.
Save them as:
1. PS-Banner1-1.png
2. PS-Banner1-2.png
3. PS-Banner1-3.png
4. PS-Banner1-4.png

IF YOU FINISH EARLY - you can start tomorrow's work.....

Halloween Banners - Find a scary/creepy backgrounds for the backgrounds for your website. Make 5 new banners for an upcoming site. Put them in a new folder called PS-Halloween

Use the same method as you did yesterday to create new banners for our 5-Halloween Site.
1.PS-Ban-Halloween.png - Text should read Halloween
2.PS-Ban-Ghost.png GHOST
3.PS-Ban-Zombie1.png ZOMBIE-1
4.PS-Ban-Zombie2.png ZOMBIE-2
5.PS-Ban-LastName.png - LASTNAME

1. Download this zipped file to your desktop HERE. Unzip them into your PS-Halloween folder.
You can check out my video on this here on how to do non-destructive masking.

We are going to be using 2 techniques - Destructive and Non-Destructive editing to make me a mummy/zombie. (You don't have to use me - you could use someone else if you want to.)

DESTRUCTIVE Save this as PS-Halloween1-CF (Example HERE)

AND

NONDESTRUCTIVE Save your scary face one as PS-Halloween2 (Example HERE)

In preparation for Halloween, we are going to make a couple of different creations and different types of that as well.
PS-Zombie-Celebrity

Put all your files into your PS-Halloween folder.

PS-Zombie-Celebrity
Download an image of a celebrity face (~1000px width)- no glasses, no facial hair, should be straight on.

THIS is what we are trying to create - here is one without the background HERE.

I am looking for:

1. Scary background/halloween theme.
2. Famous celebrity - extracted from background
3. Zombie face underneath celebrity layer
4. Layer mask on celebrity layer with zombie showing through.
5. Name of assignment with your name - FX applied to it with halloween colors.
6. Exported as a JPG with 700px width and keep it in your PSHalloween Folder

HOMEWORK - BRING A PICTURE OF YOURSELF with the same characteristics as the Celebrity!!!

Today's work is PS-Zombie-LastName

Put this in your Halloween folder.

PS-Zombie-LastName
Time to Zombify yourself - use your own picture to make a zombie picture of yourself, make sure you use non-destructive editing of the picture- Save it as PS-ZombieLASTNAME

1. Save your pic as a JPG and extract yourself from the background (in PS).
2. Get a scary background online.
3. Fit yourself into the background.
4. Put some scary text at the top (Use FX's)
5. Put some more zombies in it. (You might need to extract them.) KISS (Keep it super Simple!)
Save it as PS-ZombieName.psd and export as a JPG 700px PS-ZombieLastName.jpg.

End result should look like THIS.

ASSIGNMENTS FOR THE WEEK
1. PS-Banner 1-4
2. PS-Banners for Halloween (5)
3. PS-Halloween1-CF - Angove Destructive Editing
4. PS-Halloween2 - Angove NON-Destructive Editing
5. PS-Zombie-Celebrity
6. PS-Zombie-Self

Looking for a video? Check HERE!

If you are behind - COME TO POWERHOUR!!! We do have some light days later this week so use those as well.

New Folder - PS-Animations

My Video on how to do this is HERE.

PS-Animation-Ghost.gif (My Example HERE - I forgot the bat.)
1. Download a picture of a ghost, bat, and a scary background (~1000px) to your folder.
2. Extract the ghost from the background.
3. Extract the bat from the background.
4. Import all 3 into the same PS. (PS-Ghost-Animation)
5. Put your name on it - all frames.
6.Using Frame by frame animation, animate the ghost/ bat/name.
7. Export as an animated GIF. ~500 px width to fit on a website.

CONVERT YOUR ANIMATION TO A MOVIE
1. Change to movie timelime
2. Add a sound file from here HERE or Get your own HERE.
3. Make sure your green audio track is the same length as your animations.
4. File-Export-Render video to make a video. PS-Animation-Ghost.mp4 You only need to change the location (PS-Animations folder) and the size - take it down to 500px height and 300 width.
5. Save/close PS and check out your animations and videos.

When done with today's lesson you should have 2 files
1. PS-Animation-Ghost.GIF
2. PS-Animation-Ghost.MP4

Put these files into your PS-Animation Folder

Second Animation - PS-Animation-Zombie

My finished files HERE (GIF) and HERE (MP4)

Instead of making a frame-by frame animation, we can use a tween function to make the figure move.

My Video on how to do this is HERE (Scroll down to Zombie Animation Video)

ANIMATED GIF
1. Download a picture of a Zombie, something else (another zombie,sword or something) , and a scary background to your folder.
2. Extract the Zombie from the background.
3. Extract the other thing from the background.
4. Import all 3 both to the same PS. (PS-Animation-Zombie)
5. Put your name on it - tween that as well.
6. Using tweened animation, anuimate the zombie and other thing.
7. Export as an animated GIF. 500 px width to fit on a website.

CONVERT YOUR ANIMATION TO A MOVIE
1. Change to movie timelime
2. Add a sound file from here HERE or Get your own HERE.
3. Make sure your green audio track is the same length as your animations OR shorter.
4. File-Export-Render video to make a video. PS-Animation-Zombie.mp4 You only need to change the location (PS-Animations folder) and the size - take it down to 500px height and 300 width.
5. Save/close PS and check out your animations and videos.

End result should look like THIS *(GIF) (My Daughter)

When done with today's lesson you should have 2 files
1. PS-Animation-Zombie.GIF
2. PS-Animation-Zombie.MP4

Finish your animated GIF's and Movies

OK - what you should have:

3 Folders PS-Banner1 - PS-Halloween and PS-Animations

1. PS-Banners (4 with your name on it)
2. Banners for your new website (5 of them)
3. PS-Halloween1-CF (Angove with destructive editing)
4. PS-Halloween2 - (Angove Non-Destructive editing-Zombie)
5. PS-Zombie-Celebrity (Non-Destructive editing-Zombie)
6. PS-Zombie-SELF (Non-Destructive editing-Zombie)
7. PS-Animation-Ghost 2 of them (GIF and MP4 animations)
8. PS-Animation-Zombie (2- Gif and MP4 Tweened Animations)

We are going to use these in our next website that will set up on Friday.

START TOMORROW'S WORK TODAY IF YOU CAN.

THIS IS OPTIONAL AND EXTRA CREDIT - YOU DO NOT NEED TO DO THIS!!

PS-Faces-Halloween

My Video on how to do this is HERE.
This is what you are trying to create HERE.
Save this as PS-Face-Halloween

NEW PS Tools:

Liquify
Spot Healing(Band-Aid) tool to remove selections.
Content Aware Brush
Mulitple Layers
Quick Photoshop 

Just a couple easy assignments for today:

CHECK YOUR GRADES - ANY ISSUES MONDAY POWERHOUR

DO NOT WORK IN PHOTOSHOP TODAY!!!!!!!!!!

1. Make a new folder 5-Halloween in Local Sites
2. Make an Images folder inside it.
3. Get some Paletton colors for a halloween site. (Orangy/redy)
4. Clean up your desktop - put all extra files into it's proper folder & move any old websites to OldSites.
5. Make sure your PS folder is clean as well. You should put all images in their proper place - Yours should match mine (as shown in class)
6. Check that you did all the weekly work (and it is in the right folder).

ASSIGNMENTS FOR THE WEEK:

Copy and Paste all these images into your 5-Halloween/Images folder - DO NOT BRING OVER ANY PSD.

Banners:
1. PS-Halloween
2.PS-Ghost
3.PS-Zombie1
4.PS-Zombie2
5.PS-LastName

1. PS-Banner (with your name on it)
2. Banners for your new website (5 of them)
3. PS-Halloween CF (Angove with destructive editing)
4. PS-Halloween2 - (Angove Non-Destructive editing-Zombie)
5. PS-Zombie-Celebrity (Non-Destructive editing-Zombie)
6. PS-Zombie-SELF (Non-Destructive editing-Zombie)
7. PS-Animation-Ghost (GIF and MP4 animations)
8. PS-Animation-Zombie (Gif and MP4 Tweened Animations)
9. PS-Faces-Halloween [Optional]

Quick Introduction to Dreamweaver

Looking for a video? Check HERE!

Dreamweaver Introduction

Workspace - panels - docking - Custom Workspace
Preference - F12, Preview Editor

Sketch Site out on Paint to build it. Our 5-Halloween site will be similiar to what we did before on 3-ImageTypes

Review what the site will look like.

New Site - 5-Halloween.

HOW TO START A SITE
1. Turn off the computer.(Not really though)
2. Sketch Site out on paper/computer
3. Figure out names of each page.
index.html -PS-ZombieYOU Picture (JPG) and PS-Faces
halloween.html - PSHalloween1 and PSHalloween2 (2 Angoves) PS-Faces-Halloween
ghost.html - PS-Ghost-Animation (GIF and MP4)
zombie1.html - PS-ZombieAnimation (GIF and MP4)
zombie2.html -PS-ZombieCelebrity (JPG)
paletton.html - your color inspiration for your site.

4. Paletton for halloween colors
5. Get pictures in one folder.
6. Start DW for NewSite
7. Make the site
8. Test the site
9. Upload the site.

Video for DW Introduction AND How to set up /design a site.

Create DIV tags from design Comp.

Remember - DIV's are just boxes - put the correct information in the correct box. Look at your code to double check it.

Start new CSS internal document and put in what was on your COMP. Add colors as well, pulled from your Paletton colors.

Keep modifying your website to match your Comp and your Paletton colors.

Custom Fonts through Adobe
Insert Date Function

Set up PageProperties
Custom Background from Internet
H1-H3 colors
Link Colors
more

Externalize CSS and make all your pages - remember - you want to make your index.html page PERFECT before you make your other pages - remember we did this with both the 3-ImageTypes and 4-PerSite - this is no different!!

These are the link names - put them in your header.

Page Name - Page Title
index.html - This is your Home Page
halloween.html - Halloween Page
ghost.html - Ghost Page
zombie1.html - Zombie1 Page
zombie2.html - Zombie 2 Page
paletton.html - Paletton Page

After you make all your pages, change the following things on your site:

1. Change your Titles of each page (page properties)
2. Change the words above the pictures H1's
3. Put appropriate pictures on your site according to your COMP or Monday's lessons.

Make sure your site is linked together and working.

OK - your site should be almost finished and completed. If you are looking good - call me over for a sample upload if you want to.

I have uploaded all the videos for this website - you can find them on the Video Dreamweaver website below!

Looking for a video? Check HERE!

NO SCHOOL - TAKE CARE OF BUSINESS

JUST A COUPLE OF THINGS TODAY

1. Inserting videos into a website HTML5 - VIDEOS
2. Adding an external link to Paletton Page/Comp Sketch (Target Blank)
3. Upload your website.
4. Check your neighbor's websites out.
5. TRIPLE check that you did Last Thursday's 3 things to each page.

Uploading your site:
1. Do you have a page called index.html in your root folder?
2. There should be NO .psd files in your website. Remove them. (You can delete them BUT make sure you have a copy in the PS folder!!)
3. Connect to Remote Server
4. Expand View to show server and local site.
5. If there is anything on the left remote server delete what is in your site (on the left)BUT BUT BUT DO NOT TOUCH YOUR NAME!!!!
6. Click on your SITE on the right top.
7. Press PUT files to your site.
8. When done, DISCONNECT from site
9. COLLAPSE view
10. Check your website out MHS Web1
11. If it's wrong - go back to Step 3 after fixing it.

www.mhsweb1.com and then click on your link - make sure it is what you want to turn in.

WHEN DONE - complete the your rubric and/or help others.

Easy day - just taking care of business.

1. Upload your website NOW NOW NOW!
2. Grade yourself on your website Rubric provided in class.
3. Check out your classmate's sites at mhsweb1.com and see how yours compares.
4. 100% MUST TURN IN GRADE SHEET
5. Short FTP Worksheet HERE.- PRINT it out when done - make it is ONE page.
   DUE Friday - no later.

Download New Information for websites.

1. Go to THIS LINK and look at the "Green Book" information available to you.
2. DOWNLOAD and extract these files to your DW folder HERE. I'll help you with this.
3. Clean up your files in your PS folder.
4. IF your 5-Halloween is graded, move it to your OldSites folder BUT only once it's graded.
5. Online Worksheet on Chapter 1
   HERE IS THE ONLINE WORKSHEET! (Yes, it looks like a test, but it is graded as a worksheet (25 Points) Take your time and put your finger on the right answer before you answer it!!!

OK - another easy day:

1. Check your grades - are there any issues or problems SEE ME TODAY IF THERE ARE!
2. Work on Chapter 2 Online Worksheet HERE
Remember to put your finger on the correct answer before your answer it and submit ONLY once.
3. Clean up your drives - move all graded websites to OldSites
4. NO stray files on desktop OR on your OneDrive.

Looking for a video? Check HERE!

MAKE UP WORK

Previously was linked to Chapter2 Worksheet BUT you will need to do the end of chapter questions to make this up. Page 58 1-17 to make this up. (25 Points)

Go back to Chapter 2 and start setting up your next website.

1. Set up your new site 6-HD (Site/New Site - 6th website - Hardware Devices.) Remember to use ALL of the 4 tabs on the left to set your site up - especially the images folder. Remember I have a video that will help you if you forgot how HERE. It's also around Page 49 in your book but remember it's a little different.
2.Work through Chapter 2 Hardware Devices Site starting on Pg 49.
3. When done, your site should look like Page 54. (There are NO DIVs' on this site YET - we'll add them later.)

** There are somethings that you will NOT be able to complete, as DW has changed, if you cannot figure it out, ask a neighbor then move along and keep working on the next item.

Time to modernize our site / what we need to do:

Make a container for your pages (we are NOT doing a header, main or footer - this is just a simple site)

1. Div tag Container around index page. (Double check in code as well)
2. Customize it with a background #FFFFCC, 800px width, borders, center the DIV(like Halloween).
3. New body background (Download a repeating background from the internet and make it your background.)
4. Externalize your CSS on your index page.
5. Make Software page by copying the index page - save as software.html. Change the title and put a pic of DW and PS on it. Write a short description for each program.
6. Don't forget to change your title.
7. Make sure the pages are linked up properly.
8. Upload them. Use the instructions from last week or your FTP worksheet from last week.

OK finish up any work from yesterday - what # are you on? Continue on and upload your site when done - double check that is what you want to turn in and move on.

Building a site worksheet HERE. We'll do some of this together but do what you can.

Basically, you will be taking screen shots of how to make a new DW website. (Use your 6-HD site to take the pictures - DO NOT FORGET TO DO THE LEFT SIDE!

Keep working on your site if needed.

OK - I'll grade your 6-HD site today in class - you need to finish the following assignments.

1. Finish your Building a Site worksheet from yesterday. I'll come around and check it today or tomorrow.
2. Make 4 Manga characters that will represent you on your site using the links below. Put them in your stuff folder as Manga Characters. Of course, it should look like you as much as possible. Most of the sites, you will need to take snippets of your finished character.
3. IF YOU ARE BEHIND You can make your Manga Characters at home TONIGHT and work on your website.

Try the following sites to make your Manga Character - some are better than others, but you have a choice - you need to make 4 different characters and yes they should look like you!

Possible sites to use:
1. FaceYourManga ( I like this one!)
2. Avatar Maker
3. Rinmaru Some wierd choices and a little strange, but why not?
4. AvaChara
5. Cartoonify Nice one here
6. Scratch Not my favorite, but here you go...
7. Dolldivine meh

Save them to a new folder in your Stuff folder called MangaIcon. Icon-1.jpg, Icon-2.jpg, etc.

Change of plans:

1. Move your 6-HD site to OldSites folder.
2. Clean up your desktop / OneDrive.
3.We'llg go over FTP Info sheet - corrent any ones that you got wrong. (You did save it in your Stuff folder, correct?)
4. Show me your Building a Website worksheet - I hope you followed instructions THAT WERE CAPITALIZED! (If I don't get to this today, I'll get it Monday.
5. Quiz on Monday

Looking for a video? Check HERE!

Quiz on Dreamweaver and recent Photoshop files.

SHORT QUIZ (20 Questions) - you can use anything you want except for your neighbors and me. Go to Socrative - Log into ANGOVE room

______

Chapter 5 Project - Creating a website/MissionStatement/ Sketch

Chapter 5 Project HERE- Think about a website that you might want to design that would be around 10 pages. Keep this new site in mind while you do the worksheet. We are just planning this site, we are NOT going to build this oned.

Start Chapter 5 (Pg. 148 is REAL important)

Finish Chapter 5 project

THANKSGIVING

Some Cool Photoshops today and tomorrow!

Your video is HERE

Your Files are --> PS-Taxi Why so Blue? HERE this is what we are trying to create HERE.

Put this into a folder called PS-Taxi inside your PS folder.

THANKSGIVING

Finish your PS-Taxi Files.

PS-Taxi # 2 - adding filters.
Your PS-Taxi video is HERE.

Use your finished Blue Taxis to do the following:
1. Make 8 different copies on new layers.
2. Use the filters to put a different effect on each.
3. Export the different images to a folder. (PS-Taxi1.jpg, etc.)

LATER - need to do this with me OR you can try it yourself HERE.
4. Open the images in Picasa to make a collage. PS-Taxi-Collage move it to your Taxi folder on your desktop.
5. Movie as well if time AND webpage.
6. Move all finished products into your PS-Taxi folder.
7 Back up your work before you leave.

THANKSGIVING

CHECK YOUR GRADES - ANY LATE WORK - POWERHOUR!

UPLOAD YOUR CHAPTER 05 / Creating a website to FOCUS!
Remember this was due Tuesday - I will take it up until Wednesday for full credit - after that 1/2 credit.

NEW WEBSITE TODAY

Set up your new website, we are loosely following Chapter 6,7,8 website, we are going to make it more modern, but you should still read through Chapter 6 although you should follow my video instructions primarily.

1. Make a new folder 7-LC and an images folder.
2. Start video lesson and sketch site comp using both my video and the book (Page 171-175)**As a side note, we are making this site a DIV site - they are doing it the old way by using tables (Page 175 which we won't do)
3. Set website up in DW (follow Building a site in DW worksheet)
4. Complete video 1 - keep working if you finish!

Link to Dreamweaver Lessons HERE.

Did you turn in your Chapter 5 project (that could be completed at home? You have one more day......

DAY 02
1. Continuation of the previous website.
2. Skim through Chapter 6 around page 172-174 to get an idea of what the site will look like AGAIN it is an old site and we are modernizing it so some things will change. ALSO remember this is an old book - so some things won't be accurate.
3. Start the video - REMEMBER your images are in your Dreamweaver Chapter 6/Images folder. IF you set up your site correctly the images will transfer over correctly.
4. Continue on with today's video. Make sure you reference the book with this site.

Part 2 is your work for today.

Did you turn in your Chapter 5 project (that could be completed at home? This is the last day...

DAY03 - Changing your HMTL page to a .DWT page.

1. Changing your page to a .DWT and no longer and HTML page.
2. Be careful - you could mess your entire site up!
3. Start your video.
4. Make the pages and go through chapter 7 to do so.

Part 3 work for today.

DAY04 - Making all pages from a Template

1. Skim through Chapter 7 - Page 192-195
2. Start the video for today Part 4 LONG VIDEO GET STARTED
3. Use page 194 for the page names.
4. Your Images are in Dreamweaver/Chapter7/Images
5. Page 200 is when you work on the main page.A
6. You might need to copy and paste the text over for Events.

*** Remember, we altered the basic structure, so fit it into what we created. There are a lot of font changes, you do not need to do those, as you need to make a new CSS rule so just put the information on the site. 
Upload your site today - what ever you have done so I can check it.

DAY 05 Language Club Website

1. Part5 finish and upload your site
2. Double check your site is good after uploading and what you want to to turn in.
3. Add a picture floated to the left on your EVENTS page!!!

UPLOAD YOUR SITE AND MAKE SURE IT WORKS.

BONUS - Make your 8-SemExam folder today and hook it up in DW.

Check my site out HERE to see it yours matches up.

Looking for a video? Check HERE!

SEMESTER EXAM INFORMATION - COPY AND PASTE THESE TO YOUR 8-SemExam folder.

HERE are your instructions
HERE is your Rubric

TODAY:

Set up your site - triple check that it is hooked up.
Sketch out your site in Paint - put names of pages and sizes.
Set up your main page with div's
Put widths on it.
Type in your footer information.

HOMEWORK (To set yourself up for success.)
1. Go to Paletton and get some colors for your site. Make sure they are appropriate for your subject.
2. CoolText.com - Make banners for each of your pages.
3. Find pictures for your site. (1 Minimum each page 2 are better)
4. Find appropriate text for it. (Copy and paste, just not from Wikipedia.)

HINT FOR GOOD STUDENTS: DO as much as possible at home so you can use all your class time wisely.

SEMESTER EXAM
Your semester exam is 2 parts - 200 points for your website and 100 points for your MC test on the exam day.

Bring over your homework to your Images folder.
Use paletton colors to add to your site.
Don't forget Page Properties with H1-H3 and link colors.
Externalize CSS
Your main page should be almost 90% by the end of today.

SEMESTER EXAM

Make all your pages using Copy and Paste OR a template.
Put content into your pages - pics and text.

SEMESTER EXAM

Start looking at the rubric to determine what you are missing and tweak it tomorrow.

HINT FOR GOOD STUDENTS: Upload your website today and look over the rubric tonight so you can attack what you are misisng tomorrow.

Keep working on your site - DUE IN TWO CLASS DAYS

IF you want to review for the semester exam - review all your worksheets in you rStuff folder. That will help you out the most.

SEMESTER EXAM

Put any finishing touches on your website - do a test upload.

HINT FOR GOOD STUDENTS: Upload your website today and look over the rubric tonight so you can attack what you are misisng tomorrow.

Keep working on your site - DUE IN TWO CLASS DAYS

IF you want to review for the semester exam - review all your worksheets in you rStuff folder. That will help you out the most.

Looking for a video? Check HERE!

SEMESTER EXAM DUE DUE DUE DUE.
Rubric - fill it out and turn it in. IT IS 100% DUE TODAY.

REMEMBER:

Plan your time out so you can both upload AND grade yourself today. Grading yourself will tak 20 minutes so PLAN AHEAD.

10% OFF per day late. SITE IS DUE WHEN YOU EXIT!

IF you want to review for the semester exam - review all your worksheets in yourStuff folder. That will help you out the most.

Short Day - 7th Period Exam

Short day - just a couple of things:

1. Clean up your desktop / One Drive
2. Move all websites to the OldSites folder BUT NOT YOUR SEM EXAM.
3. Check your FTP-Worksheet - Do you have # 8 done? If not - copy and paste from Week 13 on tuesday (You should have done this already though.) IF NOT - you need to do that - it has instructions on how to upload a website. RE-DO IT
4. Check your Building a Site in DW worksheet, Did you finish that? (It contains everything you need to set up a site.) RE-DO IT!
5. Your first week back is to fix your semester exam website, start that NOW while it is fresh.
6. OR study for other classes.

1-2 Exam

3-4 Exam

5-6