How to Embed Working Processing Files in Your Webpage

HTML Resource Page:

Site which provides information and video tutorials on HTML (div tags, links, etc.)
http://www.killersites.com/HTML_CODES/



Example Webpage
HTML
<html>
 
<head>
 
</head>
 
<body>
 
<div class="work1">
 
/*insert appropriate .java file*/
<applet code= motion1v3.java
 
/*directory to appropriate .jar file*/
      archive="images_pro3/motion1v3.jar"
 
/*specifies which type of applet it will run*/
      type="application/x-java-applet"
 
/*specifies dimensions of the applet as it appears on your webpage*/
      width=315 height=315>
</applet>
</div>
 
</body>
 
</html>
- Both .java and .jar files can be found in the applet folder that you get when you export your Processing file
- Make sure both .java and .jar files are in the same folder for your webpage and the html is properly directed to it
- Delete the save("__.png"); line in your Processing file (if you have it) or it will not work on your webpage


Centre Page in a Browser Window


centre.gif
==link to sample file and tutorial
Centre your layout horizontally and vertically so it isn't stuck at the top left corner in expanded/larger browser windows.







Disjoint Rollover

This is the Rollover that when you hover over an image, text shows somewhere else.
  • You can add an image instead of text *

HTML
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html>
 
  <head>
    <link rel="stylesheet" href="style.css" type="text/css" />
 
  </head>
  <body>
 
 <div id="rollover">
<a href="#"><img src = "old-skeleton.jpg"><span>Text Goes Here or you can place another image here.</span></a>
</div>
 
</body>
</html>
CSS
#rollover a span {
visibility:hidden;
display:block;
position:absolute;
 
/**adjust disjointed text position in % or px**/
left:20%;
top:200px;
color:#666;
background-color: #69ff36;
border: 2px solid silver;
padding: 5px; }
 
#rollover a:hover span, #rollover a:active span, #rollover a:focus span {
visibility:visible;
}
 
#rollover a:hover, #rollover a:focus{
text-decoration: none;
color:#FF6600;
visibility:visible; }
 
to download, click this >


CSS Rollover

This is one example of a CSS rollover covered in class

HTML
<html>
<head>
 
/*link to CSS page*/
 
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
 
<body>
 
/*this class displays stamp*/
 
<div class ="stamprollover">
 
/*this id positions the stamp*/
<div id ="stamp">
 
/*make a link to a website or another page*/
<a href="website address">
</a>
 
</div>
</div>
</body>
 
</html>

CSS
/*positioning the image*/
 
#stamp{
position: absolute;
width: 370;
height: 400;
}
 
/*this class displays the stamp*/
.stamprollover{
display: block;
width: 370px;
height: 400px;
background: url(image.jpg) no-repeat;
}
 
/*this class will swap the background pic when the mouse hovers*/
.stamprollover a:hover{
background: url(imageover.jpg) no-repeat;
}
Download files

Another way



How to make your background transparent in CSS

http://randaclay.com/tips-tools/how-to-make-your-backgrounds-transparent-using-css/
Screen_shot_2010-03-25_at_11.14.36_AM.png


How to rotate/angle an image or text in CSS


/* for firefox, safari, chrome, etc. */
**-webkit-transform**: rotate(-90deg);
**-moz-transform**: rotate(-90deg);
/* for ie */
filter: progid:DXImageTransform.Microsoft.**BasicImage**(**rotation**=3);
Insert in the div tag/class you wish to transform.
Change the degree value for Firefox, Safari etc between 0 and 360.
The IE one works a bit differently in which you change the rotation value to either 0,1,2,3 (0, 90, 180, 270 respectively).


Javascript


Making a link to specified browser window size


ADD this in HTML in head (before </head>)


<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) {
window.open(theURL,winName,features); }
//-->
</script>


In the body, make a link using this code

<a href="#" onclick="MM_openBrWindow('fold.html','title', 'status=yes,scrollbars=yes,resizable=yes,width=800,height=600')">click here</a>

try this tutorial



jQuery


Jquerylogo.png




A lightweight cross-browser JavaScript library that emphasizes interaction between JavaScript and HTML.
jQuery provides a number of plugins platform of low-level interaction and animation, advanced effects and high-level, theme-able widgets.

Click here to see a sample site showing various jQuery examples. Click here to download this demo site.

More info on these examples:


See more examples here: 50+ Amazing Jquery Examples- Part1

Click here for a directory of all the jQuery plugins.



Random Code

Tutorial
How to make a page that links to random pages in your layout.


Javascript Position and Resize window


You may like to put your processing applications or other work in a smaller size browser window.
To do this, open the HTML file that you would like sized in an HTML editor and simply paste this <script> code ABOVE the closing </head> tag of the HTML code. Edit the values to your desired position and size.
<script language="JavaScript" type="text/JavaScript">
self.moveTo(0,0);
self.resizeTo(600,200);
</script>

If you would like a popup script that gives you more options such as the browser toolbar, scrolling,
try this tutorial .




Navigation Treatments

Here are some common navigation treatments. Review them and see if they are appropriate for your site's information architecture. PLEASE NOTE: If you consider using one of these, make it your own. Make sure you repurpose them to your page layout and style the navigation so it fits in with your look and feel. Make it your own.


Accordion Style Menu

Screen_shot_2010-03-15_at_1.05.02_PM.png
link to see it
Consists of an html file - links.html for navigation and content pages calling the CSS file and javascript files in the scripts folder. The layout is put together with an index.html file using iframes

Download the javascript files and use the View Source feature of your browser for the linked pages above to study the code and how the files are put together.


Tabbed Panels


link to example and tutorial

Screen_shot_2010-03-15_at_12.36.13_PM.png
Use the Spry tab feature in Dreamweaver for an automated feature that creates a tabbed panel.
It generates the javascript files and CSS files.
Edit the CSS file it creates (see sample here ) to customize the entire look of the default tabs; colour, font and size.



Menu Bar


link to example and tutorial


Screen_shot_2010-03-15_at_1.04.36_PM.png

More appropriate for sites with lots of content and a number of sub categories.

Use the Spry menu feature in Dreamweaver for an automated feature that creates a horizontal or vertical menu bar. It generates the javascript files and CSS files. Edit the CSS file it creates (see sample here ) to customize the entire look of the default menu; colour, font and size.