• Graphic Design
  • Class Description
  • Syllabus
  • Schedule
  • Illustrator
  • Photoshop
  • Projects
  • Portfolios
  • GD Project Reflection Document

• Digital Art
  • Class Description
  • Syllabus
  • Schedule
  • Art Talk Textbook
  • Photoshop
  • Painter
  • Projects
  • Portfolios
  • DA Project Reflection Document

• Web Design
  • Class Description
  • Syllabus
  • Schedule
  • Dreamweaver
  • Photoshop
  • Projects
  • Portfolios
  • WD Project Reflection Document

• Resources
  • Dummy Text
  • Resolution
  • Item 3.3

Basic HTML5 - 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 All
– 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/webcolorpicker.htm

Remember there are no "Ohs" in Hexidecimal so when you see a zero it is a zero!

Read more on Hexadecimal

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

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



JavaScript exercise - Change the color of your Scrollbars
View the source code of this page. Look in the Head of the document.
Copy and Past the code into your web page.

JavaScript Exercise - Add a clock. This changed the content of your page every day automatically!

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

Resolution considerations

Adding Background images
Image Resolution vs Screen Resolution
8 x 600      1024 x 768       1280 x 1024    1600 x 1280

Case Study     http://www.hallmark.com

Screen Captures of Hallmark

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

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

Eyechart.html

success.html

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

use Dreamweaver to Upload your index.html

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     

Success Poem               SuccessOFF.jpg                SuccessON.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

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/Dreamweaver/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

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.

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

Upload

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

Window Pane Handout: CSS

Outside Links to consider on CSS:

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

Page Layout for the Internet
Grids in Design
Tracing images

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

Interesting Facts

CSS Selectors in DW

PracticeWithStyles.html


/CSS/basicVerdana.css


ChickenLittle.html
/CSS/Chickenstyle.css

Upload

Starwars.html
/CSS/theforce.css

index.html

/CSS/SylingMySite.css

Upload

/tracing-layers/bonsai.html

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

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

Creating a PDF File using Adobe Acrobat

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

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

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

Upload

LayerMasks.html

SanDiegoHeader.png
GBRHeader.png

Spry Collapsible Menus

RBVHS Podcast Archives

Spry Assets

Spry Menu Bar
Spry Tabbed Panels
Spry Accordian
Spry Collapsible Panes

PracticewithSpry.html

Upload

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

Sweet Child of Mine

Times like These

Topics listed on this page