week 5 – Color, Imagery, Type, Layout

index.html ????   student project example

Blackbird projects list

FTP= “file transfer protocol”

– uploading web files to the server using  FTP (file transfer protocol)
-we will use a free Mac ftp client called Cyberduck Mac,   Cyberduck PC is also available.
-Filezilla is also good, free and cross-platform
Steps:

  1. Open ftp software
  2. “Open Connection”
  3. Enter the following info:
    servername: dtc-wsuv.org
    username: first initial + last name + the year (’18”), all in lowercase, no spaces or symbols  + @dtc-wsuv.org (so, “Sam Jones” would be “sjones18@dtc-wsuv.org”)
    password: sent to your wsu email, can’t be changed!
  4. If successful, you should be in your personal server directory that has the same name as your username. Now you can either drag the folder and files in that directory or use the “action” menu to “upload”
  5. Please upload folders with the following in all lowercase: “blackbird” for the blackbird project, “recipe” for the recipe project, etc. You can always change the folder and file names on the remote server, as you would on your desktop.
  6. Make sure that your default page for the project is “index.html”
  7. Check how everything looks on the live absolute URL:
    http://dtc-wsuv.org/sjones18/blackbird/
  8. If you cannot see images, make sure that your file names and calls to access those files are all lowercase. Servers are case-sensitive!
  9. Email me that URL (wluers@wsu.edu)

—————————————-

CSS3

Gradients

Transform

Transitions

Multiple Columns

Text Shadow

Box Shadow

Border Radius

—————————————-

Web Color

Working with Web Colors:
Adobe Kuler  (also in PS)
colorschemedesigner.com

web color values: RGB, 0- 255
hexadecimals
rgb/rgba
hsl/hsla  HSL color picker

Design Talk

—————————————-

 

CSS Layout
Box Model– float

CSS Positioning –
position: fixed;
position: relative;
position: absolute;

Positioning  Example

Mr. Potatohead – extra credit (5pts)

Relative Positioning Puzzle

———————————-

Workshop: Blackbird

Previous Blackbird Projects

Nouspace Student Research Gallery