WEEK #6

TOWSON WEATHER : Tuesday
72° - 60°, mostly cloudy

* Let's open up Adobe Photoshop & Dreamweaver

*TALK ABOUT HOMEWORK AND STUDENTS' WEBPAGES

LOOK AT WEBPAGES:
HIGHZERO | rachelBeetz | colorFactory | aBunchOfStuff.com
the Chambers Project (California)

AVAM
BMA | Amy Sherald
the Walters
Towson
MICA

AIC (Chicago)
HIRSHHORN (DC)

talk about Project #1

Cosmic Creativity - how art evolves consciousness

Alex Grey at TEDx Maui
2013

<iframe width="80%" height="315" src="https://www.youtube.com/embed/0_YJToyOp_4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

External style sheets:

<link href="proj1.css" rel="stylesheet" >

MORE CSS:

- Navigation bars

- CSS OPACITY AND TRANSPARENCY

- CSS Class and ID

- CSS Navigation

.zoom img{
transition: transform .2s;
margin: 0 auto;
}

.zoom img:hover {
-ms-transform: scale(1.5);
/* IE */
-webkit-transform: scale(1.5);
/* Safari 3-8 */
transform: scale(1.5);
}

.gal img{
padding:10px;
text-decoration:none;
}

.gal .opac img {
opacity: 0.5;
}

.gal img:hover {
opacity: 1.0;
}

HOME LINK 1 LINK 2

.logo{
float:right;
position:relative;

top:-50px;
left:20px;
}
.logo img{
border-radius: 50%;
}

.nav1{
width:100%;
background-color:black;
color:#C4C4C4;
height:28px;
font-size:15px;
font-weight:bold;
padding-top:3px;
}
.nav1 a:link{
padding:5px;
padding-left:10px;
background-color:black;
color:#C4C4C4;
text-decoration:none;

-webkit-transition: 1.5s ease-out;
-moz-transition: 1.5s ease-out;
transition: 1.5s ease-out;

}
.nav1 a:hover{

background-color:white;
color:#5135FF;
text-decoration:none;

-webkit-transition: 1.5s ease-in;
-moz-transition: 1.5s ease-in;
transition: 1.5s ease-in;

}

...What's jQuery?

lightBox: lightbox-plus-jquery.min.js

Things you need (for lightBox :)

*Make sure you have prev.png, next.png, close, etc... in an "images" folder saved as images

/* css: ( put this in your <head> section...) */
<link href="css/lightbox.css" rel="stylesheet">

// js: ( put this above your "closing" </body> tag! )
<script src="js/lightbox-plus-jquery.min.js"></script>



<a href="1.jpg" data-lightbox="visionary" data-title="Art by Amanda Sage">
<img src="1.jpg"></a>

<a href="2.jpg" data-lightbox="visionary" data-title="Art by Olga Klimova">
<img src="2.jpg"></a>

- Talk about Typography ?

Visit Towson U | 8000 York Rd, Towson, MD 21252

Visit the Chambers Project (California)

HOMEWORK:

* FINISH PROJECT #1 *
Due next class- 6:00pm

Remember...

Required materials for this class:

(1) a flash drive or hard drive: 2GB or more
(some external device to store your work on)

(2) *Personal Web Space (Towson user accounts are fine)