art466 (design_for_the_WWW_II)

instructor: ryanSmith
home | syllabus | contact | links | student work

Week 7

9:30am -9:45



Take a screenshot (or 2 ) of your homework.
Upload it.
Get ready to present it.

Project B

Any luck with domain names?
-bluehost.com/
-tumblr.com/docs/en/custom_domains
-free-webhosts.com/

example: http://sarah-nelson.tumblr.com/ or sarah-nelson.com

why have a blog?

OTHER USEFUL STUFF:

http://css-tricks.com/custom-scrollbars-in-webkit/

what is WebKit?

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

what is Netscape Navigator ?

More CSS Stuff

http://www.w3schools.com/css/css_boxmodel.asp


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


More CSS info (page layout)
http://www.htmldog.com/guides/cssadvanced/layout/

Media Player:
http://webplayer.yahoo.com/

11:30 - 11:45 BREAK

Typography

Readability ( on screen )

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

More Fun with jQuery

".slideToggle"

Click to show jQuery code:


Put this code in the <head>of your html:

<script src="jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>

Save this code as "jquery-1.7.1.min.js", and put it in the same directory as your html page:

jquery-1.7.1.min.js



click here to show JS in the <head> of your html:

<script type="text/javascript">
$(document).ready(function(){
$("#slideDiv").hide();
$("#slideDiv2").hide();

$(window).load(function(){

$("#toggle").click(function(){
$("#slideDiv").slideToggle(500);
});
$("#toggle2").click(function(){
$("#slideDiv2").slideToggle(500);
});

});
});
</script>

Example: fractalcatmusic.com



What do you want to do next week?
Animated gifs? drop-down list? More jQuery? Interactivity? Flash? JavaScript? PHP? Blogs? Networking? Artist Talk? Professional Practices in Art?

Homework:

Read this:
http://www.sitepoint.com/anatomy-web-fonts/

Complete most of Project B.
Have at least a few working webpages completed, and linked together.