Pronoia by Amanda Sage, acrylic painting, 2013

Week #5

*CHECK HOMEWORK*

NOTE: Let's open up Adobe Dreamweaver & Photoshop

Talk about Student Pages:
https://ryansmithart.com/fa2022/students.html

talk about Project #1

(Review)

***External Style Sheets

<link href="proj1.css" rel="stylesheet" type="text/css" >

an example of a CSS page

CSS: HOW TO & hyperlinks

- Navigation bars

Center divs using CSS:

#wrap{
text-align:left;
max-width:1000px;
min-width:600px;
margin-left:auto;
margin-right:auto;
width:60%;
background-color:white;
padding:10px;
}

* z-index

CSS POSITIONING
-Positioning: W3schools

OPEN WEEK5.zip (205 kb.)

How to add a youTube video...

<iframe width="560" 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>

Cosmic Creativity - how art evolves consciousness

Alex Grey at TEDx Maui
2013

helpful links:

- Google fonts

- CSS OPACITY AND TRANSPARENCY

- CSS Class and ID

- <ul> & <li>

- CSS Navigation

Here's something new:

ACTIONS...
- You can try using the Actions Window in Photoshop to record what you do.
- After recording any image size changes, you can replay them...
- Then you can go to: File, Automate, Batch...
- You can apply these actions to a folder filled with images files
- And, save yourself hours of time, by not having to reopen, resize, rename, and re-save all your images

// JavaScript Tutorial

VISIONARY ART:

// Slide Show #1

var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "1.jpg" // set image src property to image path, preloading image in the process
slideimages[1] = new Image()
slideimages[1].src = "2.jpg"
slideimages[2] = new Image()
slideimages[2].src = "3.jpg"
slideimages[3] = new Image()
slideimages[3].src = "4.jpg"

</script>

//Image Src:
<img src="1.jpg" width="500" height="500" id="slide">

//AND more JavaScript:

<script type="text/javascript">
// put this javaScript after your image src.
//variable that will increment through the images
var step=0
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
if (step<3)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
</script>

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

MORE LINKS : )

blindTextGenerator.com/Lorem-Ipsum

lokeshdhakar.com/projects/LightBox2/

tiffzhang.com

tiffzhang.com/startup/index.html...

HOMEWORK:

Finish Project #1

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)

(3) a sketchbook, something not too big, about 8x10 inches
(for notes and sketches)

(4) something to write & make drawings with