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
- 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.
|