Welcome back to school,
Fire drill procedures and first day of school instructions.

Log in and set up your computers. Take Edline test on Rules.

Set up Widows 10 desktop - look around - note programs installed.

Visit Adobe.com site - look around. - Check out Angove411.com

Angove Sites that I check out almost daily

1. Go to Abduzeedo.com and see what is happening.
2. https://www.awwwards.com/
Search for Wilderness Downtown - put in your address.

Also search Made with Google - might find some stuff there.

Set up folders on OneDrive
Local Sites, OldSites,PS,FL,DW,Stuff,Personal
Edline Test on Rules when you get a chance.

Buy a Site work sheet HERE-NEW. Download and Learn what it takes to buy a site and get some prices.

I am looking for 4 pictures - 1 Domain and 3 Hosting and any extra credit pictures you have as well.

Finish worksheet.

E-mail me your 5 pictures (Domain1, Hosting 1-4 and any extra credit questions) and your Website Questions Sheet.

Turn in your Website Terminology sheet online to me via my GMail address @ johnangove@gmail.com *(You will need to zip your 5 pictures together and send them)

We'll start off with a quick review of DW and the general idea of how websites are made and then make a site called Mystic Clothing.

Review Site 01-MysticClothing. Download the prep files HERE. and unzip them on your desktop. I'll help you set up the files.

Sample Upload of Mystic Clothing

Aligning and arranging the DIV tags

Set up FTP information and upload your CheckMagazine site.

Day 2 of Mystic Clothing

Clean up site - keep editing
Adobe Fonts (3) for body, links, and Headings

Edline Test on Rules. (Yes, you willl need to make it up if you missed it.)

$5 lab fee this week!

Check out this site ---> balitempleexplorer.com

Day 3 of Mystic Clothing Site

Lessons:
1. color.adobe.com - Use Image to make colors for our site.
2. Duplicating Pages - ONLY when index is PERFECT
3. Pseudo Tags - Class Tags- floating images (Second Page)
4. .ico file *Bookmark this for all future sites.

Embedding movie, Edmbed MIDI files

Mystic Clothing Day 4
Checklist:

1. Div tags
2. Proper external CSS
3. Pseudo Selectors "class tags"
4. Image with Floats - Second Page

1. Page Opacity
2. Rounded corners
3. Custom CSS - See HERE. Use this someplace on your page (.Class tag practicing.

Go over the buying a website worksheet and web terminology as well. - Test on Friday?

OK - time to try a special site - video background. It's actually fairly easyy.

HERE is your link to the code.

1. Take a video with your phone (short ~5 seconds or less)
(If you can't take a video you can use these BUT will not get full credit. Grass1, Grass2 PalmTree1
2. Use online converter to convert it to: ogv, webm and mp4. I used this site https://www.online-convert.com/
3. All the videos MUST have the same name (video.ogv, video.wemb, video.mp4) and location.
4. Create a basic site (#container and main) and use the code on the site to put the background in with some basic text in the main section.
5. Do NOT use the jquery - just the HTML5 and CSS Classes. Of course you must customize it to your video location and html code.
6. You don't need to put a lot of content in the main, maybe a picture and text - something like the last site.

Keep working on your video background.

$5 lab fee this week!

Grade Yourself on the Mystic Clothing Website HERE.

Keep working on your 2-Video Site- due soon

I'M ABSENT TODAY.

Your first page for the video site should be completed by now - time to do your second page.

Check out THIS video to see what you should do - you can also check out my site www.mhsweb2.com/angove to see it!

$5 lab fee this week!

Finish your PS-Video site with your two pages - don't forget to link up your second page.

Start tomorrow's work if you are done.

$5 lab fee this week!

OK - PS-CarWrap today - you will be downloading and watching a video HERE other instructions are HERE

We'll design the site and use rollovers to activate the functions.

$5 lab fee this week!

You will need to export 6 different images of your CarWrap as jpg's and put them on a new website.

Create buttons for your site. They will be small images of your cars.

Design site for Car Rollover functions.

Review all the worksheets we've done this year.

TEST ON WEBSITE TERMINOLOGY AND BUYING A WEBSITE SOON

Design a Favicon for your new website.
I would suggest using this site:
http://tools.dynamicdrive.com/favicon/

because it's the easiest and gives you the code.
BUT the favicon.com lets you draw the image.

Export Buttons for your site PNG with transparancy. (We are going to add the interactivity from last week to make them move upon rollover.)

Next Week we'll start the site

3-RolloverSite

NO SCHOOL LABOR DAY

DID YOU PAY YOUR $5 LAB FEE - THIS WEEK WOULD BE GREAT!

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

Start your website to showcase your new PS-CarWrap (2-CarWrap)

H1-H6 put a SANS serif font and a Serif font for everything else (#Container)

OK - We are going to PNG our images that we exported into buttons to change the color of rollover image. You should have 6 images including the original.

Make your buttons today and put them on your site.

Use the images to change the color of:
1. Background (try a gradient)
2. Container color (if applicable)
3. Font colors
4. Link colors (be sure to externalize your CSS)
5. ico file - anything you want. (Search Online - use your original Pic I used this one HERE --> http://www.favicon-generator.org/

Here is a video to assist you with your CarWrap website.

Add some of the CSS interactive behaviors you learned during week 2 (HERE) and finish so you can upload your site. Make sure you have all the requirements completed.

Using your 2-CarWrap site, make a new page (be sure to link it up to the first page) and create a lightbox on the new page. Have your full size car images scroll through.

Lightbox Tutorial HERE

Set your page up and copy/paste the text over. Play around with it and basically change the thumbnails with your buttons and full size with your main images. You should have 6 images minimum.

Bayside Beats Tutorial - Good Luck! HERE

Finish up your Lightbox and post it online.

PS-Animation - Try out this tutorial HERE to make an animated GIF

You will be making 3 of these - One for the water, one with pictures you took yourself and one with the car images from your site.

You will need to make your own GIF tomorrow with pictures that you have taken - BE CREATIVE.

PS-Animation 2
Keep working on these - play around with the speed of the animation (.1, 02. etc.) with different exports. They might look different on a website.

Put your 3 (or more) gif animations on a new 3rd page on your website.

UPLOAD your site.

IF you are done with everything:
1. Download Monday's work
2. Download next week's website.

Ok - Photoshop Day - Download this file HERE (31MB)and follow the instructions to make an animated GIF cinegraph.

Make a new folder in your PS called PS-Cinegraph. You will eventually need to do one of your own.

HOMEWORK
( I stress the HOME in homwork NO SCHOOL VIDOES!!!!)

Record your own 5-7 second video to make into a cinemagraph. Extra credit for originality/creativity. Points off for ANYTHING recorded at school.

PS- Cinemagraph - create your own one using your own video. I hope you remembered to do it!

New site 3-DemoSite Try these two tutorials - you can put them both on one site. You will need to make an index page to link to them though.

1. Easy one about Web Fonts HERE
2. Try this link to uderstand Padding and Margins HERE

Umbria Site Download this site HERE and unzip it to a new folder called 4-Umbria in your LocalSites folder.

Set up Index page that links to each lesson.

Lesson01 - Basic Page Setup - table with 3columns -
Lesson - Link - Summary

LESSON 02 Video Lesson HERE

• Attach CSS Style sheet
• Make new CSS Rules
• Compound / Descendant selectors
• Class Tags
• Print CSS Sheet

Upload your site
LESSON 03 Video Lesson HERE

o Headings and Paragraph Text
o Inserting test from another source
o Bulleted lists o Blockquotes
o Spell Check
o Search and Replace Text

Lesson 04 Images - PS-Round Trip Editing
Umbria Continued Using PS to edit images.
You can watch my videos on my video page if you want to...

I would like to grade your lesson 4 - get them done and uploaded.

Lesson 05 Finish with Accordian - Be careful - I can't fix it if you mess uip.
Lesson06 - SKIP DO NOT DO
Lesson 07 Creating a page using DIVs (again) and using alignment guides.

You can watch my videos on my video page if you want to...

Lesson08 FORMS Be sure to link up both of your pages with a short description - also look at the other snippets.

Lesson 09 - Multimedia with Flash - Using Media Encoder to put MP4 on your site.

Lesson10 - Templates - Editable Regions, Making Child Pages.

Lesson11 - FTP settings - uploading, learn icons.

Lesson 12 - Meta Information on site

FINISH AND UPLOAD EVERYTHING.

Start acatestprep.com Passwords will be provided in class - look around.

Make a new site that links up what you are learning on this site.

ACATestPrep
Lesson01 Take notes on each seciton - keep it organized.

VIDEO LESSONS

VIDEO LESSONS
DW101 - 3:03 101- The Design Process
DW102 - 4:35 102- Client Goals
DW103 - 5:00 103- Site Needs Vary The kind of site they want makes a HUGE impact on what they expect. **
DW104 - 7:30 104- Target Audience You talkin’ to ME? or them? or those other people? Figure it out and learn how to connect with them.
DW105 - 1:23 105- Brainstorm! That’s BrainSTORM, not braindrizzle. Let those ideas pour! (Speaking of brains… a tribute

VIDEO LESSONS

DW106 - 6:24 106 – Site Plan and Outline Think before you do. Trust me, it’s worth the time it takes.
DW107 - 4:12 107- Storyboarding Plan your work, then work your plan. No thinkee, your web site will stinkee.

Chapter 2 - take notes if you need to BUT you should be working on a website with the guy.

2.01- Workspace Basics **- Putting the Workspace in your Face! 2.02- Dreamweaver Experience ** – Welcome to the Dreamweaver Experience
NOTES:

1. DO NOT SET UP NEW SITE (I made a new folder Project-02)
2. NO, there are no Documents for us to use.

2.03- Project Planning – Prepare to be awesome and make the skeleton 2.04- Words, Words, Words – Controlling the machine
2.05- HTML Structure – Let’s face it… most creatives need a little more structure.

2.06- Can I get a Table Please? – Setting up tables in Dreamweaver! 2.07- A Site To Behold – Learn how to get that site setup so Dreamweaver becomes your file housekeeper
2.08- Review! – Wrap up your learning with a review of every critical concept in this tutorial set!

NOTE:
1. Put a custom color on the table.
2. Make the other pages as well@!
3. DO NOT MAKE A PORTFOLIO

3.01- Optimize Images – Don’t tell images they’re fat… but if they are, quietly FIX IT!
3.02- Insert Images – Pages go from LAME to GAME!
NOTE:
1. Copy and paste your files and put them in a new folder called Project-03 so you can differentiate the Lessons.Call me over if you have problems. (YOU do this in Lesson3.02)
2. DO NOT make a new site - just the folder.

3.03- Image Placements– NOBODY puts images in the corner!!
3.04- Edit Images the Right Way – There is a wrong way… it’s probably how you’re doing it. SIZE MATTERS!

NOTE:
1.IF you resize your images DO NOT OPTIMIZE or change the original.

3.05- Round-Trip Ticket, Please – Photoshop and Dreamweaver. They’re kind of a thing.
3.06- Heads Up for Attributes – Alt text and Attributes give awesome heads-up info to elements! (Pay Attention to this one!)

3.07- Whatever Floats your Boat -Positioning elements well with DIV Floats
3.08- Review – We covered a TON- This review is the recap of it ALL!

NO SCHOOL - COLUMBUS DAY

Set up practice testing in Gmetrix

NEED CODE TO LOG INTO GMETRIX AND CERTIPORT

Do a practice test in DreamweaverCC 2015 TESTING MODE

HOMEWORK: Complate 3 practice tests this week. Use Dreamweaver Test 1 TRAINING (So you can see the answers.)

NOTE:
1. Make a new folder Project-04 DO NOT MAKE A NEW SITE!!

Getting the Hook - Up This series of tutorials will help you create links to your site content to make it easier to get to. Learn how to get things linked up, and the multiple ways and best practices to make it happen!

4.01- Navigation in your Station – Link up your text to help you jump around the web-osphere! (6:14)
4.02- Quick Link Tricks – Learn the fast and easy ways to create links using Dreamweaver! (4:10)
4.03- Linking Absolutely Anywhere!– Doesn’t matter where you are, these directions get you there. (5:22)

Total 15 Minutes of Video!!

NOTE:

1. YES, I know he skips around - do your best on index and Ray page.
2. Yes, I know you can't go to Capesand Babes - just use my site (angove411.com)

4.04- Pick Your Path – There are actually many ways from here to there, figure out how to map it!(3:25)
4.05- Jump To It! – Anchor links are AWESOME. Get to EXACTLY where you want to go on a page! Cool tip! (8:31)
4.06- Links In Review – Double-tap all that linking info to your noggin! ( 6:30 Review)
18 Minutes of Class time.

HOMEWORK:Do three practice tests this week - Dreamweaver Test TRAINING (So you can see the answers.)
At this point, you should have 1 test and 2 trainings done after you complete this homework.

5.01- Contain Yourself – Setup your document using HTML Containers and organize everything! (5:52)
DO NOT DO THE PS COMP that he is working on - just pay attention to what he does. THIS IS A TRUE COMP - we do this in Paint.

5.02- Divide and Conquer -DIVide up your pages and learn to think smarter about web design! (8:29)
He is using a Div CLASS tag - go ahead and use an ID for this one!

5.03- Box Yourself In!– The CSS Box Model is everything. Without it, the world as we know it ceases to exist.* (11:04)

25 Minutes of video

DO YOUR HOMEWORK - DUE ON FRIDAY - Late work will NOT BE ACCEPTED. I am open for PowerHour as well.

5.04- Clean Up Before Moving In – Prepping your CSS page for content. Hurry, they’re on their way over!!! (8:39)

5.05- CSS is not your Foe – The Faux column technique!(5:27)

5.06- How’s the New Pad? – Adding space for your content by giving them padding (7:12)

21 Minutes of Video

5.07- Heads Up!! -Style the header to make a good first impression. (Not Sure)
YES - do this site-title DIV tag

5.08 – Review – Learn what you learned and let it sink in deep. (12:52)
DO NOT DO THE CSS-MATIC

20 Minutes of video

How is your homework coming along? Get then done - REMEMBER you can only do one review a day - PLEASE space them out.

Designing the UX It just sounds so cool to say (or type) UX. It stands for User eXperience- making sure that people don’t come after you for making your site an instrument of torture because it’s so poorly laid out. Make it awesome, and create a good UX!!

6.01- Create a Navigation Bar -Getting Stylish with Links and riding shotgun for your site. (9:53)

6.02- Links get LoVe HAppy!! -The 4 states of Linking Love: Link, Visited, Hover, and Active (7:04)

6.03- Nice Shoes! – Styling the Footer on your site to make it ready for a date. (16:18)

33 Minutes of Video

6.04- Getting the facts on the table! – Importing CSV files to make your spreadsheets prettier. (13:45)
DO NOT USE THE ONLINE TABLE MAKER

6.05- Making Contact – Feedback from site visitors is ALWAYS welcome!(13:53)
MAKE THE CONTACT FORM BUT USE THE SNIPPETS TO PUT A FORM IN.

6.06- YOURtube! – Adding HTML5 video and audio. So cool! (15:14)

42 Minutes today - get started!

6.07 – Reviewing the UX– Quick review of the UX critical concepts. (COMING SOON!) Check that your notes are good and highlight/underline anything he goes over again. (10 Min)

Show me your 3 Practice Tests.

YOU SHOULD HAVE 6 TOTAL PRACTICE LESSONS DONE.

GETTING RESPONSIVE Responsive design is a pretty big deal these days- and what it means is that the page responds to the device it’s being viewed on. This allows you do design one page that will change size, shape, and layout of elements when viewed on a phone versus a monitor.

7.01- Examining Responsive Design– Prepare to Get Small (7:43)
7.02- Scalable Images and elements-Respond to (something…responsive..uhh…I dunno) (7:40)
7.03- Media Queries– Styling for a Pocket-sized World (8:33)
ADD A BACKGROUND COLOR TO THE MEDIA QUERY SO I CAN SEE IT!!

24 Minutes of lessons

YOU SHOULD HAVE 6 TOTAL PRACTICE LESSONS DONE.

HOMEWORK:Do three test/tests this week - Dreamweaver Test TESTING Take as many as you want BUT I can only accept 800 (80%) or better. DO NOT DO THEM ON THE SAME DAY

7.04- Restyling Navigation– Dressing Up your Mobile View (13:14)
WHOA! Where did that come from?
DO NOT STYLE YOUR SMALL MEDIA QUERY WITH LINKS
ONLY YOUR MAIN MEDIA QUERY SHOULD LOOK GOOD.

13 Minutes of lessons

Prototype to Production Well, adventurer… your journey to designing the site is about done. Here’s where you test, polish, and push your site live! Bad news, it’s a little like sending your kid off to college- you might miss this project once you’re done working on it. Good news? Your site might become a doctor and support you in a lavish lifestyle for the rest of your life! Just make sure you do these steps to send your baby off right. If you just kick them out of your house- they won’t build you your own later! �

8.01- Clean Up Your Act– Final work on the prototype (7:08)
CLEAN UP YOUR CSS BUT DO NOT ADD COMMENTS!

8.02- Using your head– Metadata for making your site visible (7:07)

8.03- Prototype to Production– Crank it out!!! (13:53)
YES - APPLY THE TEMPLATE TO ALL YOUR PAGES

27 Minutes of lessons

8.04- Technical testing– Check yo’self before you wreck yo’self. (10:34)

8.05- Working With Web Servers– Tips for your server… (14:44)Mostly Notes

25 Minutes of lessons

8.06- Testing Usability– Don’t make a lame site. Usability is win. (6:40)
Mostly Notes

8.07- The Big Review!!– Rollout review! (14:28)
Take Notes - Review of everything

21 Minutes of Lessons

Remember last week that you needed to have 3 DW Tests completed with an 80% or better to take the test next week. They are due tomorrow!!!!

Make sure all your work is uploaded - check your site to make sure that is what you want to turn in.
Log into Certiport/Console8 on Desktop.

Review this weekend using Quizlet - do a search for DW CC 2015 Test. HERE was my quick search.

Angove Review in class.

Log into Certiport - Use the class code as shown in class.

THERE ARE DREAMWEAVER REVIEWS AT THE BOTTOM OF THE PAGE IF YOU WANT TO DO THEM.

Angove Review in class

Log into Certiport

Testing Testing Testing.

Test Debrief

Keep reviewing if you have not taken the test yet.

Review this weekend using Quizlet - do a search for DW CC 2015 Test. HERE was my quick search.

PS photoshop files.

PS - Photoshop files set it up and see what you can do.

Set up ACATestPrep website for Animate Files.

Angove Files and then ACATestPrep files -

Download Angove's Files HERE (100MB)
Download this one too for Chapter 5 HERE.
Download these questions HERE.
Download Lesson 6 Script HERE.

We'll start setting up our website for the Flash Files then if time, we'll start the Lesson 01 today.

Angove Lesson01 SlideShow of Vacation Pictures!
Download 3 pictures that you might take on vacation - make them all the same size and have them slide into a Flash Document.

Check out Export Options

Angove Lesson 01 Video Lesson HERE

Basic Introduction to Flash - Review of workspace, importing images, creating basic stage.

Upload to your site if time. You should have exported the .html, GIF (make sure you saved it as animated and NOT static) and SWF files -

Angove Lesson 01-2A HERE

Angove Lesson 01-2B HERE

Find a vacation spot and download 3 pictures of the site plus one image that you can use as a background image. (just like last lesson)

Make the same assignment that we did yesterday then we will animate them.

Time to export all your lessons - I'll show you how to do it today in class, but basically we are going to look at every option to export them.

Finish all of lesson 01 and put them on your website you do NOT need to upload all the ones that we did for the first Lesson (GIF, PNG, SVG, JPG) you should ONLY upload the GIF and SWF versions.

Review this weekend using Quizlet - do a search for DW CC 2015 Test. HERE was my quick search.

REVIEW

If you are testing on Wednesday, make sure you have 3 tests completed with over 800 on them FROM AFTER NOVEMBER 2ND - although you should get more!

Log into Console8. Go all the way through including your access code.
PD03 - 2022630
PD05 - 2022637
PD06 - 2022644

DW Test 2 days - work on Quizlet and other reviews online.

STUDENTS WHO HAVE PASSED DREAMWEAVER

Lesson 02 Fizzy Drink Ad

Video 1 HERE

Video 2 HERE

Review this weekend using Quizlet - do a search for DW CC 2015 Test. HERE was my quick search.

Log into Console8

Try this game out first.Finish MechWars - 4 animations + text movement.

Background sounds as well - space sound?

Export 3 ways - SWF, GIF, Movie

DREAMWEAVER TEST

Angove Lesson03 MECH WARS! Character Import from AI / PS
Edit layers and create simple motion/attack.

Flash Lesson03 PartA HERE

Flash Lesson3 Part B HERE

IF Time work on Monday's work as well.

Flash Les03 PartC HERE

CONGRATULATIONS ON TESTING YOU GUYS DID GREAT!

Video lessons for Flash

keep working through the lessons - don't know when ill be back

Sem Exam Discussion

Did you do a brain dump? Send it to me.

IF you passed your Dreamweaver test - work on your group site.

IF you FAILED your Dreamweaver Test OR did not take it yet.
BY next wednesday you should have completed:
1. 3 Additional Dreamweaver tests (dated December 04-13) DO NOT TAKE THEM ALL IN ONE DAY. I WILL NOT ACCEPT THEM.
2. Do some Quizlets online OR some Kahoots. You are looking for Dreamweaver CC 2015.
3. Take these test reviews. Yes I know the fill in the blanks are hard.

• Dreamweaver Domain Review 1
• Dreamweaver Domain Review 2
• Dreamweaver Domain Review 3
• Dreamweaver Domain Review 4
• Dreamweaver Domain Review 5
• Dreamweaver Domain Review 6

4. Review your notes from the ACATestPrep site.
5. Talk to the passing studnets for some tips.

Work on semester exam

Work on semester exam

Work on semester exam
YOUR SITE IS DUE SOON!

Keep working on your site

IF you passed your Dreamweaver test - work on your group site.

IF you FAILED your Dreamweaver Test OR did not take it yet.
BY next wednesday you should have completed:
1. 3 Additional Dreamweaver tests (dated December 04-13) DO NOT TAKE THEM ALL IN ONE DAY. I WILL NOT ACCEPT THEM.
2. Do some Quizlets online OR some Kahoots. You are looking for Dreamweaver CC 2015.
3. Take these test reviews. Yes I know the fill in the blanks are hard.

• Dreamweaver Domain Review 1
• Dreamweaver Domain Review 2
• Dreamweaver Domain Review 3
• Dreamweaver Domain Review 4
• Dreamweaver Domain Review 5
• Dreamweaver Domain Review 6

4. Review your notes from the ACATestPrep site.
5. Talk to the passing studnets for some tips.
6. 60 questions that might be on the test. ???!?!?

Keep working on your site

20 Minutes of review for DW CC Test tonight

20 Minutes of review for DW CC Test tonight

20 Minutes of review for DW CC Test tonight