Week #9
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
*REVIEW UPLOADING*
*Finish in-class presentations
Talk about Student Pages:
https://ryansmithart.com/2024/students.html
NOTE:
When presenting your work this evening, remember these basic questions: WHO, WHAT, WHERE, WHEN, and WHY?
Who's works are you talking about? What kind of media/work is exhibited?
Where is this exhibition, and when is this happening?
And, why did you choose the color scheme for this website?
Most importantly, why did you choose these artists; what do you like about their works of art?
"Magenta" by rS, digital image, 2022
Figure Tags...
<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" 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.zip (205 kb.) **
blindTextGenerator.com/Lorem-Ipsum
CSS:
- Navigation bars
- Responsive Web Design (W3)
-
CSS DropDowns...
MORE LINKS:
What are media queries?
Responsive Webdesign (beginers guide) Responsive Webdesign: article
Fun with media queries...
// 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"
//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>
BOOTSTRAP
getBootStrap.com
Beginners Guide (video)
youtube.com/watch?v=WpzT-pTImyo
Bootstrap Grid (video)
youtube.com/watch?v=ceNe37KIjPY (12 columns)
getbootstrap.com/docs/5.1/examples/jumbotron/
getbootstrap.com/docs/5.1/examples/carousel/
Week #1
talk about Project #2
examples:
- example_1
- example_2
- example_3
HOMEWORK:
* 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