week#8 
talk about Project B
HOME WORK
- last week you were to:
- come up with an idea, write a paragraph about it
- save as a pdf file
- add link from your class web page, to your .pdf file
- draw site structure and wire frames
Next week:
1) Have your site uploaded to a server before class
2) You will turn in a directory with:
- all images used in the site
-
all the .html pages
-
and CSS should be turned in
(I will copy them to an external hard drive, so be prepared)
3) You will present your work to the rest of the class
Let's look at this : aliflailasitar.com
WWW HISTORY
Some review :
| CSS Stuff 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 what is Netscape Navigator ? Z-INDEX EXAMPLE Always remember : Just Because You Can Doesn't Mean You Should |
basic JavaScript
<script type="text/javascript">
var image1=new Image()
image1.src="1.jpg"
var image2=new Image()
image2.src="2.jpg"
var image3=new Image()
image3.src="3.jpg"
var image4=new Image()
image4.src="4.jpg"
</script>
* Slide Show #1
Lightbox
http://lokeshdhakar.com/projects/lightbox2/
CSS & JS links:
Include CSS in the <head>
<link href="css/lightbox.css" rel="stylesheet">
<!-- --------------------END CSS----------------- -->
Include the Javascript at the bottom of your page before the closing </body> tag:
<script src="js/lightbox-plus-jquery.js"></script>
HTML:
<a href="images/1.jpg" data-lightbox="snoopy" data-title="Image 1">
<img src="images/01.JPG" width="100" height="67"></a>
<a href="images/2.jpg" data-lightbox="snoopy" data-title="Image 1">
<img src="images/02.JPG" width="100" height="67"></a>
.GIF ANIMATIONS???
HOME WORK (due at the beginning of class, next week)
KEEP WORKING ON "PROJECT B"
1) Have your site uploaded to a server before class
2) You will turn in a directory with:
- all images used in the site
-
all the .html pages
-
and CSS should be turned in
(I will copy them to an external hard drive, so be prepared)
3) You will present your work to the rest of the class