Week #8
TOWSON WEATHER : Oct. 14th 2025
67° - 53° Mostly Cloudy.
*Finish in-class presentations
*COLLECT PROJ. #1 FILES*
*CHECK HOMEWORK*
Talk about Student Pages:
https://ryansmithart.com/fall2025/students.html
"Colors" by rS, digital image, 2024
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
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;
}
CSS REVIEW:
- Navigation bars
- CSS OPACITY AND TRANSPARENCY
- CSS Navigation
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>
.zoom img{
transition: transform .2s;
margin: 0 auto;
}
.zoom img:hover {
-ms-transform: scale(1.5);
/* IE 9 */
-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;
}
...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>
<!-- html images: -->
<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>
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/
EXAMPLE:
talk about Project #2
examples:
- example_1
- example_2
- example_3
Something I made last year: Wellness.html
**Talk about: TYPOGRAPHY & readability