Week #8



div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}

TOWSON WEATHER :
62° - 46°, Partly cloudy. 

*REVIEW UPLOADING*
*Finish in-class presentations


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


Magenta
"Magenta" by rS, digital image, 2022

Figure Tags...

https://www.w3schools.com/tags/tag_figure.asp

W3schools

<figure>
<img src="blue.png" width="152" height="150" title="blue" alt="blue gradient"/>
<br>
"<strong>Blue</strong>" by rS, digital image, 2022
</figure>


blue
"Blue" by rS, digital image, 2022

figure {
float: right;
width: 30%;
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}




review:
Positioning: W3schools

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

** OPEN WEEK6_2023.zip (205 kb.) **

blindTextGenerator.com/Lorem-Ipsum



// JavaScript Tutorial




VISIONARY ART:



// Slide Show #1


<script type="text/javascript">
//put this in the <head> of your .html page :)

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> 



CSS:

- Navigation bars

- CSS OPACITY AND TRANSPARENCY

- CSS Class and ID

- <ul> & <li>

- CSS Navigation

MORE LINKS:

What are media queries?
Responsive Webdesign (beginers guide)

Responsive Webdesign: article
Fun with media queries...

* Responsive Topnav *



talk about Project #2


examples:
- example_1
- example_2
- example_3




**Talk about: TYPOGRAPHY & readability 




HOMEWORK: (oct 17th - oct 24th )

* Keep working on Project #2


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