Week 1

Brief History of the Internet

Lecture-Part1:

Lecture-Part2:

Web Basic

Usability for the
web through the
design process.
Aesthetics in digital
media
Writing for the web
Global Structure of
HTML Documents
The elements that
Make up the
document head
Importance of good
design and
navigation

#1 Read and review
Glossary of Internet
& Web Jargon
http://www.lib.berkeley.edu/
TeachingLib/Guides
/Internet/Glossary.html

Lecture-Part3:

Tables Overview

• Table Tag Break down
• Table Sample 1
• Table Sample 2
• Table with Imported Data

Anchor Tag & Href

Basic Content (Images)
Image Tags Reference

HTML and Dreamweaver overview

page properties

• Understanding HTML TAG Layout
  • Using Tables for page Layout
  • Adding Basic Content
  • Linking Pages and Sites
  • Using named anchors
• Importing Data as Tables with Dreamweaver (textbook 57-58)

#2
1. Create a Table that contains your School Schedule(using the table coding reference page)

• Six Columns Cotaining:
  • Last Name
  • First Name
  • Course
  • Days
  • Time start
  • Time End
• Each column title must be a heading with a background color.
• Last, First name must have left alignment
• the data for Course &Date & Time must have center alignment.
  • SAMPLE1
• Merge Empty Data Cells.

2.Above the table add the image of the Kingsborough Logo

• Give this image a Hyperlink to KBCC's main web page

3. Importing Data from an Excel Sheet

• Modifying and cleaning up the table
• adding named anchor tags
  • Download the following files excel, text

Week 2

Lecture-Link:

• Templates Sample1:
  
• Template Samples2:
• Graphics (Image Tags)
  • Image Tags Lesson
• Image Map
  • Image Map Tutorial (pdf)
• Slicing and Rollovers
  • Slicing and Rollovers (pdf)

-

More Links:
Creating and managing templates

Working with library items

Navigation Bar

Insert Rollover with Flash Text and Buttons

______________________
Rich Media or Interactive Multimedia

Media Objects (movie clip)

Rich media (pdf)

• Rich Media Content(FLASH content)
• Sample
• flash sample
• sample page
  
  
  

#3
Creating Templates: pg. 45 and pg. 128

• Create a template for your Department Directory Tables from last week
• Create two pages using the same template
  • Include KBCC logo on link & footer info at the end of the page:
    
    • See sample

->Slicing image Assignment
Please download for this exercise:
these images 1. 2. (psd)

Due July 1 : 3 Page Story Board based on your Portfolio. You must sketch out or draw your web page design. They must be handed in. You can fit all three pages on one paper or on separate pieces.

• Page 1: Main Menu
• Page 2 : About Yourself
• Page 3: web page drawing of your choice.

Lecture - Frames & Framesets

Frames PDF:

Frames HTML Sample

Frame Sample 1:

Frames Sample 2

Frame Sample 3:

Iframes 1:

Iframes 2:

Due July 1 : 3 Page Story Board based on your Portfolio. You must sketch out or draw your web page design. They must be handed in. You can fit all three pages on one paper or on separate pieces.

• Page 1: Main Menu
• Page 2 : About Yourself
• Page 3: web page drawing of your choice.

Week 3

Frames Continued:

#4: Refer to pages 68-73 of your textbook
Create four pages with framesets (related to your Portfolio)

• About yourself
• Education/Courses taken/Training, etc.
• Skills/Talents/Previous Jobs, etc.
• Contact

Layers & Behaviors Lecture

Samples

DHTML with Animation & Behaviors/Navigation/Spry Sample

Using Layers for page Layout

CSS-based Layouts Lectures:

Layers using behaviors

Behavior sample (popup)

<div> tags,

Containers/Wrappers
Using Dreamweaver's CSS-GUI

Behaviors

Defining <div> tags and wrappers through Dreamweaver CSS options

Swap Images
Browser Pop-Up
Navigation Drop-down menus
Adding Interactivty with Spry

#5

Behavior Exercise 1

• Please Download these images for class & save them in the same directory
  • -->Images:

Behavior Exercise 2:

#6

Create a CSS-based web page with <div> tags and wrappers.

CSS-base tutorial

WEEK 3 (July 1)

MIDTERM

WEEK 3 (July 1)

MIDTERM

WEEK 3 (July 1)

MIDTERM

WEEK 3 (July 1)

MIDTERM

Due July 1 : 3 Page Story Board based on your Portfolio. You must sketch out or draw your web page design. They must be handed in. You can fit all three pages on one paper or on separate pieces.

• Page 1: Main Menu
• Page 2 : About Yourself
• Page 3: web page drawing of your choice.

Week 4:

Lecture: Forms & PHP

What are Forms?

Creating Forms (video)

Form Example 1:

Mailto Form:

Form PHP:

Understanding Forms and Form Objects

• Insert a form on a page
Format a frame using
the property Inspector
• Text form field
• Radio button group
• Check box
• Submit and Reset button

#7

Create A HTML Forms

MailTo Form Sample

Form Validation tutorial

Example:

Create a jump menu & Password Box

• Creating Jump Menus pg. 166.

Example1:

Example2:

 

Spry Validation Forms

Regular Navigation Bar

More Spry Interactivity and behaviors

Spry Tabbed Panels

Navigation Bar

Spry Excercise: Validating Text Field Input: Text book pg. 188

Online - Portfolio/Resume Project (DUE: JULY 22: Presentation Day). You are expected to present your portfolios/Reusme on that day.

FINAL (JULY 27 : TIME TBA)