Monday - April 27

Basic HTML - Hyper Text Markup Language
Hand coding

Hello World Web Page Hand coded in Notepad

Hand coding Interactivity with Hyperlinks

Inserting Images
Download: http://www.tlachac.com/HelloWorld.jpg

Accessibility for persons with Disabilities
– Alternative  or    ALT Tags
Each image that you publish should have both the visible properties and its nonvisible properties—such as alt-text and long descriptions.

The hexadecimal numbering system
http://www.tlachac.com/ColorOnTheWeb/webcolorpicker.htm

Read more on Hexadecimal

Wednesday April 29  

Download:
http://www.tlachac.com/whites.gif

http://www.tlachac.com/pupil.gif

JavaScript exercise - Change the color of your Scrollbars

HTML Hand Coding -
Success Poem

The Title Tag is very important for many reasons... Read More

Fonts and Font Strings
Fonts that are comparable on a PS and a Mac
The browser will use the first value it recognizes
Font Family, Font Face, Font size

Comment Tags

Adding Background images
Image Resolution vs Screen Resolution

The Differences between HTML 4.01 and XHTML
http://www.w3schools.com/xhtml/xhtml_html.asp

Monday Course Syllabus

Anatomy of a Web page

Common HTML Tags


Hello World Part 1
IE Screen Capture
Internet Print out
Source Code

Hello World Part 2
IE Screen Capture
Internet Print out
Source Code

Anatomy of a Web Page
Worksheet

Common Internet Acronyms

Success Poem by
Ralph Waldo Emerson

Typography - Terms
Font Family

Heading Tags

helloworld.html

success.html

Eyechart.html

  Monday - May 4th

Introduction to Dreamweaver
FTP Set UP
Create home page in DW
Creating Links in DW

Dreamweaver
index.html

  Wednesday May 6th

Lecture on Typography
Serif - Sans Serif Fonts

DW Exercise - Practice with Text
Editing Text in Dreamweaver Classroom Exercise

Step 1: View the Source Code
Step 2: Ctrl +A to Select all
Step 3: Ctrl+ C to Copy

In a new Dreamweaver Document - Switch to Code View, Select and delete all markup, then in Code View choose CTRL + V to paste.

Dreamweaver
- Not-so-Funny  Haiku

Anchored Links - 50 States and Their capitals
Download this word Document
Copy and paste the contents into DW in the FiftyStates.html

http://www.tlachac.com/WebCurriculum/AnchoredLinks/
The Fifty States and their Capitals - Use for Anchored links.doc

Intro to JavaScript Rollovers
Download these images       HiBenOff.jpg          HiBenOn.jpg  

Rollover Beethoven
Download these images        Beethovenoff.jpg            Beethovenon.jpg      

FTP - short form
FTP - Long Form

index.html text

Dreamweaver View
Split Screen
Code-Split-Designer

Interactivity - Hyperlinks in DW

index.html

Practicewithtext.html

Upload

haikus.html

FiftyStates.html








/rollovers/rollovers.html

Upload

  Monday - May 11th & Wednesday May 13th

Two Excellent books on Web Design Principles.
Each Book has an online companion

Web Style Guide 3rd Edition
http://www.webstyleguide.com/wsg3/index.html


Access by Design: A Guide to Universal Usability for Web Designers.
http://www.universalusability.com/access_by_design/index.html

Lecture: Brief Intro to typography

DW Exercise - Aligning Images to Text
http://www.seashellworld.com

Use Thumbnail images to provide access to larger images.

Image Maps - National Parks
Create and /imagemaps/ directory in your web directory

Download these images to your /imagemaps/ directory
The colorful map of the United States for Practice
http://www.tlachac.com/map-usa.jpg

The image that the National Part Service uses for its awesome web site
http://www.nps.gov

Accessibility: Alternative or ALT Tags and Long Descriptions
Each image that you publish should have both the visible properties and its nonvisible properties—such as alt-text and long descriptions.

REVIEW working with JavaScript using Dreamweaver by adding transitions effects to our tables pages that are similar to a Power Point Transition.
Fun to do at anytime. :)
Practice altering the head and body tag in DW
Power Point Type transitions - HTML style
http://www.influential-computers.net/meta-reveal-demo.asp

Typography Worksheet

Aligning an Image in DW

Tables booklet

Telephone keypad

Aligning text in tables

Gemstones

Add to index.html

/shells/
AligningImages.html

/imagemaps/
NationalParks.html

Upload

  Monday - May 18th - Tables

Working With Tables

Seamless Tables
Reassemble an image using tables

Collapse the table width & Height.
Change Cell Pad, Cell space and Table border to 0 (zero)

Activity: Redesign your home page using tables
Add the portfolio image in a seamless table at the top of your index page.

  Wednesday May 20th - Cascading Style Sheets

Before Class:
Please look through this tutorial before coming to class
http://www.w3schools.com/css/css_intro.asp

Before Class:
Change the background color, H1, h1 or Paragraph tags on this sample CSS exercise.
http://www.w3schools.com/css/tryit.asp?filename=trycss_background-color
Use these W3c approved 16 color names to change the colors:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, purple, red, silver, teal, white, and yellow

Lecture: Cascading Style Sheets
External
Embedded
Inline
Pseudo Styles
ID Tags

Outside Links to consider:

3wSchools Dot Com
http://www.w3schools.com/

Project Seven
Before Class Read through the Cascading Style sheet Tutorial on Project Seven
Great site with progressive tutorials
http://www.projectseven.com/tutorials/index.htm
http://www.projectseven.com

CSS Selectors in DW

/Tables/
/Tables/Telephone.html
/Tables/Gemstones.html
/Tables/TablesAlign.html
/Tables/Seamless.html

Upload

PracticeWithStyles.html


/CSS/basicVerdana.css


ChickenLittle.html
/CSS/Chickenstyle.css

Upload

  Monday - May 25 - No School
  Memorial Day - Enjoy the 3 day weekend

  Wednesday- May 27

Cascading Style Sheets Continued

Descendant Selectors
Creating a versatile style sheet

Layers

Page Layout for the Internet
Grids in Design
Tracing images

Activity: Redesign your home page by incorporating Layers & an External Style Sheet

Dependant Selectors

Window Pane:
CSS

Star Wars Page for Adults to Download or for RBV students who were absent when we created the page.

Please download the star wars pictures into a starwars folder

Interesting Facts

Starwars.html
/CSS/theforce.css

/tracing-layers/bonsai.html

index.html

/CSS/SylingMySite.css

Upload

   Monday - June 1


Photoshop Layers - Layer Styles

Digital Pizza - Layers

Lectures - Intro to Photoshop
Exporting Photoshop Images for the Web

File Formats & Compression Methods
.jpg .gif .png (24)

Handouts:
JPEG File format - Joint Photographic's Experts Group
GIF File format - Graphics Interchange Format
PNG File format - Portable Network Graphics

Exporting optimized images for web publishing in Photoshop
File> Save for Web & Devices Image only PizzaSmaller.jpg
File> Save for Web & Devices Web Page and Image PizzaSmallerOnPage.html

Photoshop Slices - Slicing our pizza

Creating a web page in Photoshop complete with a table that reassembles the pizza slices!

EASY! but you don't slice a digital image this way - rectangles only!

Photoshop Slices - Color To Grayscale & Dreamweaver Rollovers

Photoshop Practice with slices
The Beatles - Let It BE
Photoshop & Dreamweaver Exercise
Rollovers created from a sliced image.
Grayscale - RGB color

Wednesday - June 3

Photoshop Quiz - Layers & File Compression Methods

Adobe Photoshop
Lecture / Discussion Topic

Resolution
Bitmap and Vector Graphics
File Formats and Compression
Deep bitmaps
Download Creekat72.jpg & Creekat300ppi.jpg

Interpolation:
Turning small Photos into Poster sized Prints 110%


Adobe Illustrator - Take a look at a Vector object
Lecture: Understanding Bit Depth
Exercise 15 Handout - Digital Imaging Terms

The Photoshop color Picker & digital color VS The Color Wheel of Pigment
HSB
RGB
LAB
CMYK
Hexadecimal
Pantone

Adobe Photoshop Digital Color Modes - Lecture
The Histogram - Adjusting Levels
Adjustment Layers vs Image>Adjustments>Levels

Color Corrections Photoshop exercises
High Key
Low Key
Color Balance Images
Reading the histogram and make your adjustments


Creating Background Images - Handout

Adobe Photoshop Creating Screen Captures - handout

Photoshop tool Bar - handout

Photoshop Interface - handout

Understanding color &
The digital Color Wheel

Exercise 11
& Exercise 13
- handouts to use for Digital Imaging & Photography
Terms and review

Exercise 20 handout
- Use for Photoshop terms and review

Exercise 15
- Digital Imaging Terms

Checking scan quality and tonal range-
10 Steps to Retouch

Bitmap and Vector Graphics




Deep bitmaps

Histograms

Photoshop documents

Pizza.psd

pizzasmaller.html
pizzasmaller.jpg

pizzasliced.psd

pizzasliced.html
pizzasliced_01.jpg
pizzasliced_02.jpg
pizzasliced_03.jpg
pizzasliced_04.jpg
pizzasliced_05.jpg

Upload

/Beatles/
OffBeatles.html
Upload

CuteKids.jpg

  Monday- June 8

Internet Topics- Web Marketing
Developing META Content for the Great Barrier Reef Site

Creating META Content
Web Marketing

Photoshop Layer Masks Photoshop exercises
Created San Diego skyline image
Create Great Barrier Reef image
Width must be cropped to 680 pixels with a resolution of 72

Great Barrier Reef Web Site
Download this MS Word File for your web pages

The Great Barrier Reef Rollover Buttons are C:\\Tutorials\

http://searchenginewatch.com/

Monitoring Google with SiteMeter
http://www.sitemeter.com

http://www.vistaadultschool.com


http://www.rbvhs.org

  Wednesday- - June 10

Spry Collapsible Menus
Scholarships offered in the year 2008 by The Art Institutes

Creating a PDF File using Adobe Acrobat

/GBR/home.html
/GBR/plantsAnimals.html
/GBR/corals.html
/GBR/tourism.html

Upload

LayerMasks.html

SanDiegoHeader.png
GBRHeader.png

PracticewithSpry.html

Upload

  Monday - June 15

Animation in Adobe FLASH

 Wednesday- June 17
No School - RBVHS Graduation
Congratulations to the Class of 2009!

  Monday - June 22

Forms -
Freedback Form Generator
http://www.freedback.com/

You must be able to access your email account from our classroom to use this service. If you don't have a web email account you can get one for free from hotmail.com, yahoo.com or gmail.com

  Monday - June 24
  Last Class