Second day of School Rules and Class Procedures Review
Finish class Introductions

1. Collect Signed Computer Rule Sheet Finish Introductions
2. Turn on computers - Log in with new password
3. Log into Edline

Take online test on Rules (not officially due until next friday)

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

Rules Test the end of this week. You don' t need to study, but if you want to.... HERE 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 - Remember it is the Brevard School one to set up NOT the plain OneDrive

Folder Set Up:

DW,FL,PS,LocalSites, OldSites, Stuff, Personal

Remember to store everything on your OneDrive. Try 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 it out when done - please stay with me on this.

Set up your printer - we'll do it together BUT I have a written method to the left on the links. DO NOT PRINT A TEST PAGE.

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?
_______

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

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.

We will print the Web Browser Sheet as well BUT it can ONLY be 2 pages. I will assist you to set it up and then print Front and Back.

When done - Start your last worksheet (!) Your computer will not like the second .swf file BUT it is ok and you can click through the warnings.

Copyright Worksheet (Maybe) HERE Use this HERE to answer the questions - don't forget your Headers and Footers.

You can print when you finish it - remember to NOT print 2 pages, use the picture below to assist you. PLEASE ask me if you have any issues, I'll be happy to assist you.

.

Finish Web Browser Sheet & the Copyright worksheet.

Check to make sure you have the following completed:

1. Quick Keys printed with name on it.
2. Web Browser sheet Printed
3. Copyright Sheet Printed

Yes, you can still print for full credit BUT you should keep track of what you have turned in.

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!
1. PS is composed of layers!!
2. Unlock a layer to work with it.
3. Show transform controls!!
4. CTRL+ D = Deselect

PS Lesson - Opening using PS, Extraction, Layers, CTRL+D, Move Tool, Marquee Tool, Magic Wand/Quick Selection.

Save as PS_Beiber-After

Photoshop Introduction if you missed it!
How to Extract a Photoshop Image HERE

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. Marquee Tool
5. Lasso
6. Quick Selection - Magic Wand
7. Crop Tool
8. Eraser Tool
9. T Tool for your name.
10. Saving as PSD
11. Exporting as JPG/GIF/PNG

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

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

REVIEW VIDEOS

PS Introduction

PS Extraction

WHEN BEIBER IS FINISHED Do one more.

Find a new celebrity and give them the "Beiber Treatment" or basically do the same thing to a new person that we did to Beiber.

Save it as PS-Beiber-CelebrityName (Mine was PS-Cruise) and be sure to put it in your PS-Beiber-Ducky Folder

Review Worksheets
1. Quick Keys
2. Web Browser Sheet
3. Copyright sheet

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

DUCKY

Things you will learn/review:

1. Extraction using Magic wand/quick selection
2. Layers a. Duplicating
3. Hue and Saturation coloring
4. Images from Internet - How to download and Save
5. Layer Arrangement
6. Text Tool - FX

Ducky Day 2

7. Exporting for Internet - GIF, PNG, JPG and Comparison 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.)

Download PS-Donkey and extract the images to your PS folder into PS-Donkey folder.

Open Video Lessons from next week so you know how to do it.

Download and Start Monday's lessons.

Go to Socrative.com and I'll help you log into your first quiz. You may only use your memory on this quiz.... just 10 questions today.

PS Celebrity2

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

Comparison of Image Types JPG, GIF, PNG

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-Ducky to answer the questions.

We will print it out later this week You might need to finish this for homework if you don't get it done today.

(Not that we are having a quiz BUT what are the 4.5 Photoshop Rules?)

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.

Take about 10-15 minutes and finish your Image Type Comparison - if you don't - do it 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.)

Photoshop Donkey 1 Video Online Video here or download it HERE
Photoshop Donkey 2 Video Online Video Here or download it 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.

Quick Introduction of File Types and Exporting for the Web.

I'll be grading Ducky, PS-Beiber, PS-Celebrity, and PS-Donkey soon.

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 Monday's worksheet (Image Comparison) using PS-Ducky for the comparison section.

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.

Make your own scene using the same skills you used in PS-Donkey
Do the following:
1. Extract yourself and 3 things to a new background
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.)

Show me your finished PS today - open them in photos.
REMINDER: I do NOT want to see the images in Photoshop to make sure you exported the images correctly.

OK - that was a busy week- you should have shown me all the following:

SHOW ME:
1. PS Beiber
2. PS-Ducky
3. PS-Celebrity
4. PS-Donkey
5. Printed your Image Comparison from Monday/Tuesay

You will shoe me PS-Extract next week

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

NO SCHOOL LABOR DAY!

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

Quick Game to try out at Method of Action

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

Go over the worksheets we completed last week.
1. Quick Keys
2. Web Browser Sheet
3. Copyright sheet
4. Image Comparison Sheet (from a week ago)

_______

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

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.

Website Accessible Standards at WebAIM

$5? Did you PMLYOM ? BHMM.

Re-read yesterday's plans.

How is your worksheet coming from Monday?

Basic Page setup - heading sizes, paragraphs, linking pages, images and image size. "Sandwich Method"

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

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

Keep working on your worksheet from Monday- Due Frida BUT you can turn in your Website Questions from Monday if you are ready on Edline Hand-In.

Finish 1-FirstSite website - 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.

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

Start tomorrow's work if there is time.

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

SHOW ME YOUR 1-FirstSite website.

1. Keep working on your how to grade websites worksheet - DUE TODAY -UPLOAD IT TO EDLINE WHEN DONE. DO NOT PRINT THIS ONE.

2. Check your grades - are you missing anything? GET IT DONE.

3. On W3 Schools, you should be through section HTML Headings and incorporated what you learned into your 1-FirstSite website.

You should now test yourself at the bottom of the HTML Attributes AND HTML Headings pages to see how much you understand. (No grades, just see how you do.)

4.TEST next week on Image Types and some from the other worksheets, you could review....

Main things today:

1. Check your grades.
2. New website today
3. Quiz Thursday

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 - we'll do that later together.
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
QuickKey1 Video

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. Keep working on your second site
2. Quiz on Thursday

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 color AND use a mix of Serif and Sans-Serif fonts (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.

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

Work through the following on W3Schools - stop at HTML Colors --- and do not go to CSS.

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

HTML Formatting (Remember to do the quizzes at the bottom!)
Use the following commands in addition to yesterday's 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.

HERE is an image of what it should look like.

HERE is an image of the code I used - DO NOT COPY - use your own ideas!

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

Discuss last week's worksheet on what makes a site good and how you think is important on a website

Quiz tomorrow on ImageTypes and other misc material.

Main Things Today:
1. Quiz on Image Types
2. Grade 2-QuickKeys page
3. Start ColorTheory worksheet

25 question quiz on Image Types worksheet and other general material. Log into Socrative Classroom with ANGOVE
Remember LastName,FirstName (Week04Quiz)

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!)

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 before school!

Quick Keys is officially due tomorrow BUT we can print it today if you are ready - See tomorrow's instructions.

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. Serif and Sans-Serif fonts (Make them noticeable!
10. Bold/Strong in texyt
11. Italicize/EM tag
12.Mark Tag
13.Comment tag someplace at the bottom.
14. 2 Appropriate pictures floated to the right (NEW)

Work on your Color Theory Worksheet.

Print it out two sided when done.

That is all!

More work on QuickKeys website next week

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

Looking for a video? Check HERE!

MAIN THINGS TODAY

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

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

Finish changing your 2QuickKeys into an internal CSS document.

• 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 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.
(You will have some code on your images which is OK.)

Add some additional Internal CSS to your page.
QK5

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 bullets from above to your CSS.

Code below ONLY IF WE HAVE TIME.

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

#container {
width:1000px;
color: yellow;
}

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

HTML Links Section today HERE

We are creating a new website called 3ImageTypes that compares the 3 main image types that we willl be using this year.

1-9 Video The video is linked on my video page. 1/9 today. [7Min]
You will learn the following:
1. Make a new folder in your LocalSites folder called 3ImageTypes.
2. Go to Paletton and choose a color scheme choose wisely as you will be using it for your new site.
3. Save your snipped as Paletton in your site folder- make sure you have the hexadecimal colors to use.
4. Make a new page called index.html and set up the basic page structure using Internal CSS for this page, your Paletton colors and the sandwich method.

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

Second day 3-ImageTypes website THIS IS IMPORTANT - MAKE SURE YOUR CODE MATCHES UP!

1. Set up DIV tags (page Divisions)
2. Use CSS to control the DIV tags

2-9 Video on 3-ImageTypes DIV Tags [7Min]

___________

Extra Lesson - we are going to use these images later, but make them for now.

Go to CoolText.com to make a 4 images for your site:
1. Text - LastName Image Types - Save as LastName-Header.png
2. Text - JPG Information - Save as JPG-Info.png
3. Text - GIF Information - Save as GIF-Info.png
4. Text - PNG Information - Save as PNG-Info.png

Remember to save them in your 3-ImageTypes folder.

HOW CAN AN INTERACTIVE WEBSITE BE MORE ATTRACTIVE TO THE VIEWER?

2 Videos for today's lesson!

LINKING PAGES - DIV Reviews
Video Lessons Lesson03/9 [5Min]

You will learn about the following:
Home Page - Linked to index.html
JPG Page - Linked to jpg-page.html
GIF Page - Linked to gif-page.html
PNG Page - Linked to png-page.html

None of these pages exist but they will soon enough (and your links won't work yet), triple check your spelling on each of these pages

LINKING PAGES - CSS Links
Video Lessons Lesson04 [3:45Min]

Quick Review of your HTML Links HERE

Put the link colors on your site in your CSS - you do will eventually need to change them to your Paletton Colors.

a:link    {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover   {color:red; background-color:transparent; text-decoration:underline}
a:active  {color:yellow; background-color:transparent; text-decoration:underline}

You can work ahead if you wish to!

Video Lessons Lesson05/9 [6:33Min]

Review of yesterday with HTML Links and Images as Links

Today's main lesson - Tables to organize your page.

If you need to review tables on W3Schools --> HERE

Complete the 6 lessons at the bottom of the page when done.

• Use the HTML <table> element to define a table
• Use the HTML <tr> element to define a table row
• Use the HTML <td> element to define a table data
• Use the HTML <th> element to define a table heading

YOU DO NOT NEED TO DO THESE BELOW:

• Use the HTML <caption> element to define a table caption
• Use the CSS border property to define a border
• Use the CSS border-collapse property to collapse cell borders
• Use the CSS padding property to add padding to cells
• Use the CSS text-align property to align cell text
• Use the CSS border-spacing property to set the spacing between cells
• Use the colspan attribute to make a cell span many columns
• Use the rowspan attribute to make a cell span many rows
• Use the id attribute to uniquely define one table

Internal to External CSS
Video Lessons Lesson06/9 [5:40Min]

Duplicating Pages and adding CoolText Images to your site.

Call me over if you want me to do a quick check of your site before you duplicate your pages if you want.

Video Lessons Lesson07 (6:00) Once your index page is 100% PERFECT and you have External CSS - you can duplicate your pages to make your site.

Short day BUT you need to 100% do this correctly or you will have issues.

Start tomorrow if you have time - I would MUCH rather you had some free time on Friday with a complete website than rushing on Friday.

Adding Content

Video Lessons Lesson08 (5:00)
Add content to your site and finish it up!

Center any content that you feel needs to be centered - remember to use the DIV's to center (Header,Main,Footer)

YOUR SITE IS DUE DUE DUE TOMORROW AND WILL BE HANDED IN ON MONDAY!!!!
If you are behind YOU CAN DO THIS AT HOME.

Cleaning up your site
Video Lessons Lesson09 [9Min]

Site is DUE DUE DUE 1st thin on Monday!

TURN IN your 3ImageTypes website to Edline.
I will show you how to Rename your folder, zip it and submit it.

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 (I'll help with this) Save it as 4PerSiteCOMP.jpg
5. Start making your index.html page from your 3rd site.(Copy and Paste)
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)
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.

HERE is what my code looks like.
HERE is how you will be graded. THATS A LOT OF POINTS!!

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, 2 pictures, and 5 UL links, 5OL links.

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.

Keep working on your site.

Start the table for the school page.
Find teacher pictures for your site on Edline. Yes, you will have to control your height and width.

School Page

Make a table 8X3 and put your Period | ClassName/Teachers Name | Picture that represents the class.

Above the table, put in a picture of MHS and below the table, put in a picture of this class.

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

PICTURES

• Period 02 HERE
  
• Period 02 Second One
• Period 04 HERE
• Period 07 HERE

VIDEOS

• Right click and save to your Images folder in your website.
• Period 02 HERE
• Period 04 HERE
• Period 07 HERE

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.

Finish up site - due today at end of class.

OK - DUE TO PSAT TESTING THE SITE IS DUE TOMORROW!!! You will still need to turn it in to Edline SO MAKE SURE YOUR (NOT parents) EDLINE WORKS.

Filll out your rubric and then TURN IN YOUR WEBSITE TO EDLINE!!!!

Make sure everything is working OK. (Test your site.)
CLOSE your Notepad ++
Change your 4PersonalSite Folder to your Period-Lastname(2-Angove)
Right click this folder and Send to Compressed folder
Upload it to Edline. IT MUST HAVE YOUR LAST NAME ON IT!! (I'll help you with this OR you can try yourself.)
AFTER UPLOADING - delete your zipped folder.
Rename your folder to 4PersonalSite and put in your OldSites folder.
You will lose points for not following instructions (10%)

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

HEY - no more straight HTML coding.

1. Quiz on HTML, colors, CSS

QUIZ on socrative - class name is ANGOVE

NO SCHOOL COLUMBUS DAY

Check out your site online at www.mhsweb1.com
If it doesn't work you probably didn't send the files to me correctly (Period--YourLastName [5-Angove]) ( Remember the turn in is LOCKED and you may not upload it, you must e-mail it to me. I'll help you during PowerHour.)
DO NOT WORK ON LATE WORK IN CLASS - WORK ON THE CURRENT ASSIGNMENT!!!

PS-Banner1 today - Paste an image behind text. You will use this on a future site (Halloween). You should use 4 different pictures behind your text (Your Name)and export them as well as PNG's.

Check out how to make a banner here.

After you learn how to make a banner - make 5 new ones (You can use the same background OR you can use diffeyrent ones. - IF you are a little slow - use the same backgrounds.

Halloween Banners - Find a scary/creepy backgrounds

Use the same method as you did yesterday to create new banners for our 5-Halloween Site (Next week or two.)
1.PS-Halloween
2.PS-Ghost
3.PS-Zombie1
4.PS-Zombie2
5.PS-LastName

Make a new folder called PS-Halloween and put your images in there.

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)

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 your self, 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.
Save it as PS-ZombieName.psd and export as a JPG 700px PS-ZombieLastName.jpg.

End result should look like THIS.

Looking for a video? Check HERE!

New Folder - PS-Animations

My Video on how to do this is HERE.

PS-Animation-Ghost.gif (My Example HERE)
1. Download a picture of a ghost, bat, and a scary background to your folder.
2. Extract the ghost from the background.
3. Extract the bat from the background.
4. Import all 3 both to the same PS. (PS-Ghost-Animation)
5. Using Frame by frame animation, anuimate the ghost and bat.
6. Put your name on it - all frames.
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.

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.

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)

Finish PS-Zombie-Animation

Export Movie and GIF.

Start Tomorrow's work.

Finish your animated GIF's and Movies

OK - what you should have:

2 Folders PS-Halloween and PS-Animations

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)

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

START TOMORROW'S WORK TODAY!

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 one easy assignment for 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.
4. Clean up your desktop - put all extra files into it's proper folder.
5. Make sure your PS folder is clean as well. - Yours should match mine.
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

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

Quick Introduction to Dreamweaver

Looking for a video? Check HERE!

Dreamweaver Introduction

Workspace - panels - docking -
Custom Workspace

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.
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)
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 - 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!!

Complete index page.

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- tomorrow make your entire site.

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
3. Put appropriate pictures on your site

Make sure your site is linked together and working.

OK - Time to make your site:

1. Put content on each page - see Monday's plan for what you put on each page.
2. DO NOT resize your animated GIF's if you do - they will NOT work!
3. Don't worry about the videos - I'll help you with the videos later on Monday.
4. Write a short explaination of how you did each image in PS at the top of each page.
5. You can try a sample upload if you want to.
6. Read Monday's plans.
7. Help some other kids.

You can try to do a sample upload if you want to.

Looking for a video? Check HERE!

3 THINGS TODAY

1. Inserting videos into a website HTML5 - VIDEOS
2. Adding a link to Paletton Page/Comp Sketch
3. Sample uploading

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. Delete what is in your site (on the left)
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 worksheet and/or help others.

UPLOAD UPLOAD UPLOAD!!!
Check out websites.

Easy day - just taking care of business.

1. Grade yourself on your website Rubric provided in class. (HERE is a link) but you will get a paper copy.
   
2. Check out your classmate's sites at mhsweb1.com and see how yours compares.
3. 100% MUST TURN IN GRADE SHEET

OK - just cleaning off somethings today - |
1. Short FTP Worksheet HERE.
2. Check out other people's websites.
3. NO POWER HOUR TODAY.
4. Start tomorrow's lessons.

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. Extract them to your DW folder. I'll help you with this.
3. Clean up your files.

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. Open your FTP worksheet from Wednesday- show me.
2. 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)
3. Clean up your drives - move all graded websites to OldSites
4. NO stray files on desktop OR on your OneDrive.

Discuss Chapter 1-2

Looking for a video? Check HERE!

NO SCHOOL VETERANS DAY.

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

1. Set up your new site 6HD (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. (Around Page 49 in your book)
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, move along and keep working on the next item.

When done - Do on this worksheet HERE. We'll do some of this together.

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 time.

Time to modernize our site:

1. Externalize your CSS on your index page.
2. Delete the css on your software page - link to your external CSS.

Making containers for your pages.

1. Div tag Container around index page. (Double check in code as well)
2. Customize it with a background, 800px width, border, center the DIV(like Halloween), and do the background color #FFFFCC
3. Div tag Container around Software page
4.New body background (Download a repeating background from the internet and make it your background.)

Finish your site and SYNCHRONIZE your site.

Keep working on 6HD site:

You can check out my site at mhsweb1.com

1. Add pictures to Software Applications - Get an image for Dreamweaver and Photoshop and put them in.
2. Chapter 3 - Add the content listed in Chapter 3 - Page 81-87
3. Put a link for each picture to an outside website. (Doesn't matter where) in the text on both the hardware and software page.
4. Upload your site (follow the instructions on your FTP-Worksheet).
5. If time. start tomorrow's work.

IF TIME PERMITS - DO THE FOLLOWING:

OK - you have 2 choices
1. 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.

2. OR 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 only need to make 4 different characters.

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

Make 2 using any of the sites, I like the first two better. Save them to a new folder in your Stuff folder called MangaIcon.

SHORT QUIZ (15 Questions - use JUST your brain!) on Socrative - Log into ANGOVE room.

Looking for a video? Check HERE!

OK - three plans today:

1. Take a short 15 question test - Log into Socrative (Class name ANGOVE)
2. If you are behind - work on late/missing work - especially your website.
3. IF you are on schedule - do some extra credit below OR Relax - work on something else.

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.

7th Period
Manga Characters
NO TEST

OK - three plans today:

1. If you are behind - work on late/missing work (feel free to ask me).
2. IF you are on schedule - continue with your extra credit below
3. Relax - work on something else.

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

THANKSGIVING

THANKSGIVING

Chapter 5 Project - Creating a website/MissionStatement/ Sketch

Chapter 5 Project HERE- Think about a wesite that you might want to design (We might turn this into your semester exam!!) while you do the worksheet.

Start Chapter 5 (Pg. 148 is REAL important)

SHOW ME YOUR PS-TAXI for extra credit.

Finish your Chapter 5 Project

Chapter 5 review Self-Review (Not graded, just for checking up.)
E=Review Self-Check
Review at home using PowerPoint 

Set up Chapter 6 website (7LC - Seventh website Bike and Hike)

.Page 172 - keep working on your website. 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).

Set up 7th website Language Club with DIV tags.
(7-LC is the name of your site)

Link to Dreamweaver Lessons HERE.

Start your 7LC website - if you cant do it - complete chapter 5 and 6 lesson reviews -- Chapter 5 Read through the chapter and answer THESE questions.

chapter 6 end of chaptrer questions

Set up your new site in DW - 7LC in your local sites folder then start with this video. Review your notes for how to set up a new site.

Part 1is your assignment today.

Chapter 6 - Review the set up and start making the template site.

Work starts on Pg. 172 - Remember this is an old book - so some thigns won't be accurate. If not complete - Finish the main design from Chapter 6.3-4

Part 2 is your work for today.

Part 3 work for today.

Chapter 7 Selecting and Designing Color.

Make the pages and go through chapter 7 to do so - make sure you read sections and see if you can answer the end of section questions. (You do NOT need to write anything down, but see if you can answer them anyway.)

Link to HTML Video lessons HERE
Link to Dreamweaver Lessons HERE
Link to Photoshop Lessons HERE

Looking for a video? Check HERE!

Part 4

7.1 - A See if you can do this
7.1 - B - DO NOT DO THIS
7.1 - C - Put in your headers

7.2 - D Make your Main section white - Not just the content.
7.2 - D Do NOT make the bodytext region - just put the information in the content region under the picture.

7.2 - E DO NOT do.

Page 216 1-2 - follow the instructions.#1 Put the table shown on your About Us page but put your friends names in it.

Pg. 217 #1 Fundraiser Page on page 217. Don't forget to link up the fundraiser page through the Events Page.

*** 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. You might want to put YOUR real e-mail in the footer so I can contact you if necessary.

IF YOU ARE HAVING SERIOUS ISSUES - remember, this is only a 4 page site. Look at the page and put the information on your site. ALSO complete Chapter 6-7 end of chapter questions (ONLY if your site is bad!)

Part5 finish and upload your site

UPLOAD YOUR SITE AND MAKE SURE IT WORKS.

If you missed anything - check out my Video Page at the bottom of the page.

Serif vs Sans-serif

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

New Site - Create a 1 page site- 8-Manga

Make a site that showcases your Manga characters and your PS-taxi if you did it.

You don't need to sketch out your site BUT if you have problems and want some help, I will be asking for it.

HERE (Word 28K) is your rubric that I am using to grade you. You do NOT need to turn it in for this site.

SITE IS DUE AT END OF CLASS!!!!

Semester Exam Review HERE or PDF HERE This is a sample of the type of questions that I will use on the test. The day of your Semester Exam you will have a 55 question M/C test.

SUGGESTED 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.)

________
Link to HTML Video lessons HERE
Link to Dreamweaver Lessons HERE
Link to Photoshop Lessons HERE

Looking for a video? Check HERE!

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

Here are your instructions for your 9-SemExam website HERE. Your rubric for grading yourself is HERE. You will get a paper copy as well.

Hope you did your homework over the weekend to set yourself up for success.

HINT: You should be just working on your first page.
DW - Sketch site, connect in DW, make your site, div tags, paletton colors, edit CSS
PS- make banner, edit images - keep it basic.

Work on your site

HINT: You should be just working on your first page.
DW - Make your first page perfect and when done - copy and paste to make your pages.

Work on your site

HINT: Make all your pages - put basic content in.
Test upload?

Work on your site

HINT: Almost there - site due tomorrow.
Test upload?

Work on your site

HINT: Get your Rubric and grade yourself. Turn it in today - IF you do not, you can still turn it in late, but there will be points off 10Points per class day.

Turn in your rubric TODAY - 100% MUST BE IN TODAY. LATE PENALTY IF NOT TURNED IN!!!!!