Search Google

www.chagoyan.com

 

Web Design 1 - Quarter 3

Standards-Information and Communications Technology Sector

Standards-Arts, Media, and Entertainment Sector

Power Standards

Grading Guide

Assignments

Complete these assignments with Dreamweaver and Photoshop.

Remember to create a new folder for each assignment. If the assignment has images, create an image folder for each assignment. Save all images in this folder! Save all quarter 3 work in the Q3 folder.

Common Errors and Tips:

  • If you want a background that does not move with the Web page, use the CSS background-attachment property and set it to fixed
  • When testing links and using a:link, a:visited, a:hover, a:active, etc., clear your browser's history before testing
  • Do not use spaces in class or Id names. If you do, it won't work!
  • Do not use spaces in image file names. CSS can't read them.
  • Use classes for repeated styles and Ids for unique (one use per page) styles
Assignment004

Image Table Gallery

Objective:

Meta Tags, Table, and Images

Use your own background image

Pick your own theme. Find your own images.

Examples: Spongebob characters, Super Heroes, etc.

This is a summative assignment. I taught you everything you need to complete this assignment. Review your prior work. There will be no video. Good luck!

Demo Video - Table with Images

Demo Video - Same Size Images

Career - Leadership Skills

Complete leadership videos

ACareer004.pdf

Imago

Post certificate on portfolio as as:

ACareer004.pdf

Leadership Certificate

Complete Leadership Video Questions

Lessons Required:

  • Adaptability
  • Appearance
  • Attention
  • Body Language
  • Brand Your Story
  • Communication Skills
  • Design Solutions
  • Digital Communication
  • Digital Ethics
  • Digital Investigation
  • Diverse Perspectives
  • Engagement
  • Etiquette
  • Eye Contact
  • Fairness and Justice
  • Feedback
  • Handshake
  • Hygiene
  • Networking
  • Organization
  • Pattern Seeking
  • Personal Development
  • Systems Collaboration
  • Systems Thinking
  • Teamwork
  • Values and Attitude

* If lessons don't appear, search for them

Demo Video - Imago Leadership Certificate

 

Objective:

Develop Leadership Skills

Earn Leadership Certificate

Graphics - Photoshop

We are now back to Photoshop. We will start off with basic assignments to get comfortable again. Make sure to save your Photoshop fileas a .psd and export it as a .jpg when you place it on your assignment web page. Remember to create an Images folder for each of the following assignments.

 

Use the Color Scheme Generator for your colors

Color Scheme Generator

Mono, Contrast, Triad, Tetrad, or Analogic

Add a link to the Color Scheme Generator to your Portfolio

Customize all assignments with different colors, shapes, etc.

You cannot use the demo for your assignment

Assignment004B

Shapes, Fills, and Strokes

Objective:

Create Shapes and Strokes

Demo Video - Fills and Strokes

Assignment004C

Shapes, Fills, and Strokes

Objective:

Create Gradients Fills

Demo Video - Gradients

Assignment004Ca

Shapes, Fills, and Strokes

Objective:

Create Shapes using various Stroke Options

Demo Video - Stroke Options

Assignment004Cb

Styles - for shapes and text

Objective:

Create Shapes with various Style Options

Demo Video - Style Options

Assignment004C1

Paint Bucket

Objective:

Create images using the Paint Bucket tool

  • Include tolerance
  • Include Paint Spilling and Closing Gaps
  • Include using the Pencil tool
  • Include using Brightness and Contrast Adjustments

Demo Video - Paint Bucket

Assignment004C2

Magic Wand

Objective:

Create images using the magic wand

Allows you to select a color or range of colors.

  • Include tolerance
  • Include Pencil tool
  • Include Brush tool
  • Include Shape Tool

Demo Video - Magic Wand

Assignment004C3

Transparent Backgrounds - Gifs and Pngs

Objective:

Create images with transparent backgrounds

  • Include starting with a transparent canvas
  • Include deleting colors around your image

Note: Always save two copies of your images. Save a .psd and a .gif, .png or .jpg.

Demo Video - Transparent Backgrounds

Assignment004D

Layers

Objective:

Create Layers for image organization

Layers allow you to stack your images and organize them in folders.

Create layers for the following demo:

  • Include Snip It tool
  • Include naming layers
  • Include reordering layers
  • Include deleting/hiding layers

File - Killer Dora - Layers

File - Zombie Diego - Layers

Demo Video - Snip It tool

Demo Video - Layers

Assignment004E

Layer Styles/Effects

Objective:

Create Layer Styles for images

Layer Styles allow you to add bevels, drop shadows, and other effects to your images.

Demo Video - Layer Styles/Effects

Assignment004F

Custom Oscars 60 points!
Magic Wand, Layers, and Text

Objective:

Create Custom Oscars (high school mascot)

Apply what you have learned.
Use Layers to organize your image.
Add hats, shoes, purses, etc.

Extra

Use Warp Transformations Zip File

Demo Video - Custom Oscars

Demo Video - Custom Oscars Patterns

Demo Video - Custom Oscars Warp Pattern

Activity

 

Work Station Setup (Videos)

  • Unhide File Extensions
  • Map CHS File Server
    • Windows
    • Mac
  • Setup Dreamweaver Site
  • Configure Dreamweaver
    • Realtime Preview (browser)
    • Insert Toolbar
  • Setup Firefox Browser
    • Default Tabs
      • Portfolio (index.html)
      • Coalinga High School
      • Chagoyan Website
      • Gmail

Notes

Images Overview

Objective:

Create an image using various image types - .gif, .jpg, .png

Day 1 -

FileTypes Image | Image Preview Image

Demo Video - File Types Notes

Demo Video - Image Preview Export

Day 2 - Activities

Activity - Quia Graphics

Activity - Image of Choice Export from PSD
(.gif, .jpg, png)

Assignment004Fb

Image Type Attribute Table

Objective:

Create a Table of Image Type Attributes

.png, .jpg, .gif

Demo Video - File Types

Demo Video - Table Review Shortcuts

Demo Video 2 - Table Review

Assignment004F1

Gif Optimization and Export - for clip art

Objective:

Create optimized gif images at various color levels

max 256 colors
support animations
transparent backgrounds
no layers

Reduce Colors to Reduce File Size and to Increase Download Speed

Demo Video 2

Assignment004F2

Jpg Optimization and Export - for photography

Objective:

Create optimized jpg images at various qualities

millions of colors
no animations
no transparent backgrounds
no layers

Reduce Quality to Reduce File Size and to Increase Download Speed

Demo Video 2

Assignment004G1

Greyscale and Color (Masking)

Objective:

Create an imagte with a mask layer

Saturation, Hue, and Masking

Demo Video - Masked Layer

Demo Video - Hue, Saturation, Contrast

Demo Video - Mask Layer Dress Color

OnYourOwn004

Image File Types

On Your Own #4

Objective:

Create a website about varous image types used in web page design

  • Learn about image file types
  • Utilize html, css, and images to construct a web page.

Build the following web page using the provided resources:

text file | Images (zip) | HTML Code | CSS Code | Finished Web Page | Video

 

 

HTML Part II

  Back to HTML and CSS

Activity

Everything is a box!

Margin is outside the box (separates boxes)

Padding is inside the box (separates from border)

Demo Video - Padding and Margin

Box Model

Box Model Image

Assignment007

Link Styling - Divs

Objective:

Create a web page with Link Styling using pseudo classes

 

Links can have many states:

a - all links
a:link - all unclicked links
a: visited - all visited links
a:hover - all hovered links (with mouse)
a:focus - the tabbed links (with keyboard)
a:active - the last clicked link

tip: code your HTML first then code your CSS.

You must create the image to match your colors.

Color Scheme Generator

Demo Video part 1 - Image
Demo Video part 2 - Overview
Demo Video part 3 - Code

Assignment008

CSS Classes and IDs

Objective:

Create a web page with Classes and IDs

classes use the dot ( . )and can be used many times per Web page

IDs use the pound ( # )and can be used one time per Web page.

Demo Video part 1 - IDs review
Anabel Lee

Resource File - Anabel Lee

Demo Video part 2 - Classes
The Raven

Resource File - The Raven

Resource File - demoactivityzip

Assignment009a1

Background-Image Repeat-X -

Objective:

Create a web page with a Repeating X Background Image

 

Make an image like this one: image

Pick your own colors. Any color except white!

Make the body match the bottom of your image!

Demo Video

Assignment009a2

Background-Image Repeat-X + Div
Box Model

Objective:

Create a web page with a Repeating X Background Image

Include Divs


Symbol Required

Box Model

Use your own colors and symbol!

Make the body match the bottom of your image!

Push the body down with:

body
{
margin:120px 0px 0px 0px;
}

Box Model

Demo Video

Assignment009b

Background-Image Repeat-Y

Objective:

Create a web page with a Repeating Y Background Image

Include Divs

Make your own image! Right-click my image to get the properties (size)

Demo Video

Copyright © 2004-2024 Chagoyan.com/Chaggy.net | All Rights Reserved

All courses at Coalinga High School are open to all students without regard to race, color, national origin, sex, disability, sexual orientation, gender, ethnic group identification, ancestry, or religion.