Week #12
DESIGN FOR THE WWW
ART 365
FALL 2019
webpage:
ryanSmithArt.com/courses/fall2019
"website_project_3"
.gif animations?
download my images if you want : images.zip
* Slide Show #1
<script type="text/javascript">
var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "images/1.jpg" // set image src property to image path, preloading image in the process
slideimages[1] = new Image()
slideimages[1].src = "images/2.jpg"
slideimages[2] = new Image()
slideimages[2].src = "images/3.jpg"
slideimages[3] = new Image()
slideimages[3].src = "images/4.jpg"
Image Src:
<img src="images/1.jpg" width="550" height="415" id="slide">
AND more JavaScript:
<script type="text/javascript">
//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
http://lokeshdhakar.com/projects/lightbox2/Things you need:
css: ( put this in your <head> )
<link href="css/lightbox.css" rel="stylesheet">
js: ( put this above your "closing" </body> tag! )
<script src="js/lightbox-plus-jquery.min.js"></script>
images:
<a href="images/1.jpg" data-lightbox="snoopy" data-title="Ocean Pines">><img src="images/01.JPG"></a>
&
<a href="images/2.jpg" data-lightbox="snoopy" data-title="Image #2"><img src="images/02.JPG"></a>
OR :
<a href="images/cat3.jpg" data-lightbox="roadtrip" data-title="cat#3">
<img src="images/thumbs/cat03.jpg" width="75" height="75" alt="cat">
</a>
| more CSS Stuff: <link href="365.css" rel="stylesheet" type="text/css" /> * using an external style sheet w3schools.com/css/css_boxmodel Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent Border - A border that goes around the padding and content. The border is affected by the background color of the box Padding - Clears an area around the content. The padding is affected by the background color of the box Content - The content of the box, where text and images appear (page layout) htmldog.com/guides/cssadvanced/layout/ LAYERS WITH CSSposition:relative; top:-50; left:5; color:red; font-size:80px; z-index:2;http://www.echoecho.com/csslayers.htm Z-INDEX EXAMPLE Z-Index example #2 |
some review...
CSS positioning & other fun stuff
HTML:
<div id="nav">
<a href='#top'>HOME</a>
<a href="#div1" >div1</a>
<a href="#div2" >div2</a>
</div><!-- END NAV -->
<a name="top"></a>
<div id="home">
Home / 'top'
</div>
<a name="div1"></a>
<div id="div1">
div #1
</div>
<a name="div2"></a>
<div id="div2">
div #2
</div>
* Branding, identity, & logo design
examples:
- christhurman.com
- studioix.com
- whirlpool.com
Homework :
your 3rd project:
"website_project_3"
Your 3rd project is due Tuesday, Nov. 19