Week #7

* Talk about "PROJECT #2"

*Review file management

WWW : History (if there's extra time)

More CSS
Positioning & other fun stuff
* Positioning:
static, relative, absolute & fixed

sound & video

http://www.animal-sounds.org/

<embed src="porlock.mp3" width="320" height="32"></embed>
or

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

autoplay?

Ira Glass on Storytelling from David Shiyang Liu on Vimeo.

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 CSS

position:relative; top:-50; left:5; color:red; font-size:80px; z-index:2;
http://www.echoecho.com/csslayers.htm

Z-INDEX EXAMPLE

Always remember :
Just Because You Can Doesn't Mean You Should

{ Content for id "gal" Goes Here }

#gal{
width:200px;
background-color:#000;
float:left;
color:white;
text-align:center;
margin-bottom:10px;
}

#gal img{
padding:5px;
}

a img{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}

basic JavaScript

download my images if you want : images.zip

* 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="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>

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>

Homework :

*Keep working on "Project #2"

- have some html pages (& CSS) finished
- finish as much of the site as you can (have an index.html page)
- add video, (or do research on how to add sound)
- try adding a slideshow, or animation
* Bring in hard copies of site structure and wire frames

Next Week:

- Bring in all your homework & projects on a flash drive, or hard drive.
- Copy them to a WWW folder
- All work should be uploaded by the end of next week's class

Let's postpone presentations 1 week. So, Week #9 for in-class presentations.