Home Syllabus Outline Competencies ESLR      Activities Resources Students Instructor 

Activities

Activity 1

__ Class Flyer

^

Activity 2

__ Self-directed Learning - Life long learning in the Information Age

__ Computer Basics presentation.

__ Windows Skills - take the Windows Quiz

__ Windows Basics presentation.

__ Review your Windows skills with the PC/Mac-Task Performance Guide and/or try the Windows Basics Pre-Assessment document.

^

Activity 3

Safety Tip of the Week: Report any defective wiring, frayed cords, or broken plugs to your supervisor.

__ Web Design Careers
What are your options in the field of Web Design?
Where do you go after finishing this course?

__ Introduction to The Internet and World Wide Web

__ Browser Skills - assessment and review of your browser skills
          Browser Skills Pre-assessment

__ Search Skills: Seven Steps to Better Searching

__ Take the Seven Steps quiz

^

Activity 4

Safety Tip of the Week: Do not make repairs unless you have been trained and are authorized to make them.

__ HTML Basics: Hand-coding your first web page
HTML Reference

For a hardcopy reference, consider...
The Definitive Guide to HTML & XHTML from O'Reilly Publishing

__ HTML Lesson   - Get the graphics for this lesson here

Here's a color-coded diagram of your first page

^

Activity 5

Safety Tip of the Week: Never yank out electrical cords by the cord . . .
pull by the plug, and only after the equipment has been switched off.

__ Discussion on Chapter 4 in " The Non-Designer's Web Book "
__ NDWB Chapter outline
__ Quiz on chapter 4 from your NDWB
__ Web Site File Management

__ Dreamweaver:  Lesson 1 - Site Definition 
__ Site Definition
__ Creating your first web page using Dreamweaver
__ Inserting a simple one-cell table

__ Dreamweaver:  Lesson 2 - Text Formatting
__ text formatting using the Property Inspector, etc.
(source file for Lesson 2 - text_content.txt )

^

Activity 6

Safety Tip of the Week:
Pick up things from the floor. Make sure purses and backpacks are not in aisle.

__ Dreamweaver:  Lesson 3 - Hyperlinks
__ Relative (internal)
__ Absolute (external)
__ Target (aka - anchor or bookmark)
            (source files / Lesson 3 - link_text.txt  and wd_banner.jpg )

__ Dreamweaver Quiz on creating hyperlinks
Graphic for quiz_hyperlinks.html: worldmap.gif

__ Dreamweaver:  Lesson 4 - Images
__ inserting foreground images
__ inserting page background images (Page Properties dialog box)
__ inserting table and cell background images
Graphics files for this lesson:

Images Challenge: Can you reproduce this page in Dreamweaver?

Get dummy "filler" text from Lorem Ipsum at:  www.lipsum.com

__ Dreamweaver Quiz on working with images
      Source file for quiz: quiz_images.html

__ Discussion on Chapter 6 in " The Non-Designer's Web Book "
__ Quiz on chapter 6 from your NDWB (quiz examples)

__ Dreamweaver:  Lesson 5 - Tables
     __ working in Standard View
     __ setting table properties
     Creating your first web site (a collection of related pages!)

__ Dreamweaver Quiz on working with Standard Tables
      Source file for quiz: quiz_tables.htm

^

Activity 7

Safety Tip of the Week:
Always work carefully and safely so as not to cause injury to yourself or others.

__ Discussion on Chapter 7 in " The Non-Designer's Web Book "
      __ Quiz on Chapter 7

__ Dreamweaver:  Tables continued...

__ Thumbnails, Storyboards and Site Maps (class handout )
Related reading: Non Designer's Web Book pages 127 and 140

__ What's a Design Folder?

For Next Monday:
Read Chapters 8 and 9 in " The Non-Designer's Web Book "
^

Activity 8

Safety Tip of the Week:
Do not stretch electrical cords across an aisle where someone might trip over them.

__ Discussion on Chapter 8 in " The Non-Designer's Web Book "
      __ Quiz on Chapter 8

__ Discussion on Chapter 9 in " The Non-Designer's Web Book "
      __ Quiz on Chapter 9

For Next Monday:
Read Chapter 10 in " The Non-Designer's Web Book "
^

Activity 9

Safety Tip of the Week:
Avoid food and beverages near equipment where a spill might result in an electrical short.

__ Dreamweaver:  Lesson 6 - Flash Elements & Rollovers

1) From the Shared Folder\Graphics\Interactivity copy all five files into your practice\images folder

2) Create a new file in your Practice Site entitled: pr_interactivity.html

3) Title the document "Fun With Interactivity - Your name"

4) Create a Flash button and link it to mermaids.html

5) Create a Flash Text and link it to mermaids.html

6) Insert the Flash Movie surf_ad.swf

7) Create a Javascript rollover using the btn_home1.jpg and btn_home2.jpg graphics and link the rollover to mermaids.html

8) Create a Javascript rollover using climbing.jpg and kayaking.jpg and link the rollover to outdooradventures.com -
make this site open in a new window.

When finished with the 8 steps above, call me to your workstation and I will check your work for credit.

__ Project 1 assigned
          Designing, developing and publishing a personal web site

1) Open the Project 1 Assignment document and read the entire contents and become familiar with its requirements. Feel free to print this document - you will need to refer to it often to assure that you are completing the assignment as directed.

2) Follow the step-by-step procedures listed on page 3. Consider revisiting the information on creating thumbnails and storyboards presented in week 7. Here are examples of a set of thumbnails and a storyboard based on thumbnail #4. The site created from the final storyboard can be viewed here.

Take a look at this document to help you get started with "the process" of designing your first project.

When setting up your folder structure for this project, you will find it helpful to review the
NDWB Chapter 4 Outline, page 2.

NOTE: This is your first major project in this class - take it seriously, it will account for a large part of your semester grade.

This project will be graded on:

• your successful application of the 4 principles of design
• your ability to execute your design using your Dreamweaver skills (lessons 1-6).

Upon completion, this project will be published to the web and critiqued in class.

__ LAB time to work on Project 1

For Monday:
Read Chapter 11 in " The Non-Designer's Web Book "
^

Activity 10

Safety Tip of the Week:
Do not attempt to remove the cover of equipment for any reason while the power is on.

__ Thumbnail sketches and storyboards are due.
Be sure your name is on your design.

__ Discussion on Chapter 10 in " The Non-Designer's Web Book "
      __ Graphic Definitions (class handout )
      __ Quiz on Chapter 10

__ Discussion on Chapter 11 in " The Non-Designer's Web Book "

__ Photoshop Basics (class handout )
     __ a look at the interface
     __ preparing new graphics for screen delivery
     __ preparing existing graphics for screen delivery
     __ adjusting your view (Zoom and Hand tools)
     __ creating shapes (with the Marquee and Paint Bucket tools)
          --- review exercise #1

For Next Week:
Read Chapter 12 in " The Non-Designer's Web Book "
^

Activity 11

Safety Tip of the Week:
Do not attempt to repair equipment while it is plugged in. To avoid damage, most repairs should be done by an authorized service technician.

NO Class Tuesday, November 11th - in observance of Veteran's Day

__ Discussion on Chapter 12 in " The Non-Designer's Web Book "

__ Photoshop Review:
Here's a list of the tools you should now be familiar with:
__ Move tool
__ Marquee tools (rectangle and elipse)
__ Paint Bucket & Gradient tools (grouped together)
__ Type tool (horizontal & Vertical)
__ Zoom tool (the magnifier)
__ Foreground/Background tool (for Color Picker)

In addition, you should also know how to...
__ create basic shapes with the Marquee tools
__ create a new layer
__ rename a layer
__ toggle layer visibility on/off
__ delete a layer
__ rearrange layer order
__ change layer opacity
__ apply Layer Styles
__ apply Blending Modes

Project 1 DUE DATE: Thursday, November 20th

__ LAB time to work on Project 1

For Next Class meeting:
Read Chapters 12, 14 and 15 in "The NDWB"
^

Activity 12

NO CLASS Tuesday - in observance of Veteran's Day

__ Photoshop Basics continued...
     __ selecting pre-existing shapes (meet Mr. Melon Head)
          --- review exercise #2
     __ creating animated GIFs

Project 1 Checklist...
Use this document to help proofread your project before turning it in. Your grade will be based on the following criteria:
File Management
Content
Design

For Next Monday:
Read Chapters 12, 14 and 15 in " The NDWB"
^

Activity 13

Safety Tip of the Week:
Do not overload extension cords.

__ Use Monday, Tuesday and Wednesday to finish up your Project 1

__ Be sure to check your site against the following:
Project 1 Assignment document
Project 1 Checklist document

__ LAB time to work on Project 1 (DUE this Thursday, Nov. 20th)

For Next Monday :
No class next week - Thanksgiving vacation
^

Activity 14

NO CLASS THIS WEEK - Thanksgiving week

For Next Monday :
Enjoy your time off...
^

Activity 15

Safety Tip of the Week:
Follow manufacturer recommendations for safe use of products.

__ Dreamweaver:  Lesson 7 - Publishing (to a local folder)
__ Publishing your site to the shared folder
__ Preparing your site for presentation to the class

__ File Transfer Protocol - Publishing to the web (class handout )

__ LAB time to complete updates to Project 1?

__ Project 1 Presentations
class critiques this week
be prepared to present your site to the class

__ Photoshop Basics continued...
     __ photo effects

For Next Monday :

^

Activity 16

Safety Tip of the Week:
To avoid damage to the drives, do not insert pencils or other implements into the floppy disk drives. Do not jar system unit while hard drive is running.

__ Project 1 presentations

__ Dreamweaver:  Lesson 8 - Templates

The Dreamweaver Template tool provides a fast and efficient method for developing and controlling multiple html pages. Use this tool in your next project to expedite development time.

^

Activity 17

Safety Tip of the Week:
To prevent overheating, avoid blocking air vents.

Surf San Diego exercise:

1) Read through the entire document entitled Dreamweaver: Lesson 8 - Templates from last week's agenda.

2) If you did not do step 1, go back NOW and READ THE ENTIRE DOCUMENT before continuing. Once you have read through the lesson proceed to step 3.

3) In Dreamweaver (with your "Surf San Diego" Site Definition in place) open template.html and save it as a Dreamweaver template with the name template.dwt (you will no longer use the template.html).

4) As directed in the Dreamweaver Lesson, assign the following Editable Regions using the information provided below:
row 3, column 1 = main_content
row 3, column 2 = graphic

5) Save the Dreamweaver template file and close it.

6) Using the Assets panel (as directed in the lesson), create the four files referred to in the banner graphic hot spots (index.html, about_us.html, beaches.html and contact.html)

As you create each file from your Dreamweaver template, change the page heading to reflect the page you are making; for example, when creating contact.html change the page heading to read "Contact." Be sure to close each page before creating the next.

7) When finished, open and preview the index.html and check that all of your hot spot links work.

________________

8) Once all 4 pages have been created and tested, begin adding the additional content as shown in the screen-shot printout provided. Use additional Lorem Ipsum placeholder text as necessary.

Note: The Beaches page contains target links to the following page sections: Coronado, Pacific Beach, La Jolla, Del Mar and Solana Beach. Be sure to include links back to the top of the page.

Note: The email link on the Contact page goes to: info@surfsandiego.com

___________________________________________

__ The Design Process - The ADDIE model

__ Project 2 - Team-based Special Interests site

Consider downloading the 30 day free trial version of Dreamweaver so that you can work on Project 2 outside of class for the remainder of the semester!

Reminder: NO CLASS Dec. 22 through Jan. 2nd
Winter Break - Return to class on Monday, January 5th, 2009

^

Activity 18

__ No Class

Return to class on Monday, January 5th, 2009

^

Activity 19

__ No Class

Return to class on Monday, January 5th, 2009

^

Activity 20

Safety Tip of the Week:
Position keyboards to prevent bumping or dropping them off the work surface.

__ Dreamweaver: Lesson 9 - Frames

__ LAB - work on Project 2

__ Introduction to Cascading Style Sheets (class handout )

__ Dreamweaver: Lesson 10 - Cascading Style Sheets

__ LAB - work on Project 2

^

Activity 21

__ Photoshop Basics revisited...
      __ Advanced Tips and Tricks (from Chapter 13 in NDWB)
            __ creating Image Swaps

__ Usability Testing - The "Think Aloud" Method

__ LAB - finish up Project 2

__ Project 2 Presentations - class critiques on Wednesday

__ ROP Certificates and Awards presented

__ Discussion:  Where do you go from here?

Reminder: No class next Monday the 19th - Martin Luther King Day

__ Last class meeting - Wednesday, January 21st

^

Activity 22

NO CLASS MONDAY, January 19th - Martin Luther King Day observed

Final week of the first semester...