FYI - Links

Listed by software/topic and then by document type.

Document types:

Adobe Animate

Exercises

  1. Zoom-Down Letters Using Adobe Animate CC 2019

Adobe Dreamweaver

Book Notes

  1. Adobe Dreamweaver CC release 2015 notes

Exercises

  1. NOTE: Do not use this:
    1. The Adobe site tutorial that this relies on is no longer available there (the link in the tutorial works but it goes to a newer tutorial different than this. How to make and style responsive web pages - Instructions for using the Adobe tutorial

How-Tos

  1. Dreamweaver preference settings
  2. How to specify custom code colors - NOT READY FOR PRIMETIME!
  3. Comparing the code of two files

User Guide

  1. Dreamweaver - Design View vs. Live View

Adobe Photoshop

Demos

  1. Channels demo - compare the primary and secondary colors in the Channels panel
  2. Using Photoshop's Generator Plugin to Create Image Assets

Exercises

  1. Optimizing images with Photoshop
  2. Create a GIF animation of a ball bouncing using Photoshop
  3. Masks 01 - Using the blue channel as a mask - Aurora
  4. Selections 01 - Tower of London

How-Tos

  1. Photoshop preference settings
  2. Downloading and installing patterns in Photoshop

Lessons

  1. Animated GIFs & Photoshop - An Overview
  2. Tiling Images - An Overview of the Principle

Aliasing

  1. Anti-Aliasing Examples

Browsers

  1. How to view the source code of a web page in a web browser
  2. How to save the code of a web page from a browser

Canvas

This refers to the Canvas LMS - learning management system - not the <canvas> HTML element

Exercises

  1. Upload to Canvas

Colors

Lessons

  1. Colors: Names | Web color names | RGB values | Hexadecimal values

CSS - Cascading Stylesheets

Demos

  1. User Agent (browser default) stylesheet examples:
    1. Firefox user agent (default) styles — These must be opened using the Firefox address bar:
      1. General default styles in Firefox:
        • Enter this in the Firefox address bar:
          resource://gre-resources/html.css
      2. Form styles used by Firefox
        • Enter this in the Firefox address bar:
          resource://gre-resources/forms.css
      3. Other resources used by Firefox
        • Enter this in the Firefox address bar:
          resource://gre-resources/
    2. Webkit stylesheet (Safari, and others; formerly Chrome)
    3. Jens Oliver Meiert's User Agent Style Sheets: Basics and Samples
      • Lots of examples, but may not be up to date.
  2. Alpha transparency using the "a" in rgba values
  3. Demo of inheritance: using the font-size property
  4. font-weight examples
  5. CSS rule proximity and precedence
  6. Media queries
    1. min-width and...
    2. ...an explanation of the demo
  7. CSS List item positioning of an image
  8. Example of CSS file from the Beverly Hills Public Library site to use for demo purposes only.
  9. Gradient backgrounds
    1. Simple 2-color linear gradient: full page and div with box-shadow
    2. Two simple 2-color linear gradients: full page
    3. Multi-color, diagonal linear gradient: full page

Exercises

  1. HTML & CSS Basics - 01

Lessons

  1. CSS Basics
  2. The CSS Box Model
  3. The CSS Cascade
  4. CSS selectors

Files & Operating Systems

How-Tos

  1. Set Your Computer to See File Extensions; also opting for Windows Details view
  2. Zip and Unzip files

FTP

How-Tos

  1. How to set up FTP in Filezilla and Dreamweaver

Google

How-Tos

  1. How to Create a Google Form For Use As a Survey Tool

HTML

Demos

  1. HTML flow and text wrap

Exercises

  1. Basic HTML5 file

Text Editors

How-Tos

  1. Choosing a plain text editor
  2. Instructions for changing TextEdit preferences in order to use it for writing code

YouTube

How-Tos

  1. Providing YouTube on a web page

Miscellaneous

Lessons

  1. Dan's Glossary