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.)

Example Webpage
<div class="work1">
/*insert appropriate .java file*/
<applet code=
/*directory to appropriate .jar file*/
/*specifies which type of applet it will run*/
/*specifies dimensions of the applet as it appears on your webpage*/
      width=315 height=315>
- 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

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <link rel="stylesheet" href="style.css" type="text/css" />
 <div id="rollover">
<a href="#"><img src = "old-skeleton.jpg"><span>Text Goes Here or you can place another image here.</span></a>
#rollover a span {
/**adjust disjointed text position in % or px**/
background-color: #69ff36;
border: 2px solid silver;
padding: 5px; }
#rollover a:hover span, #rollover a:active span, #rollover a:focus span {
#rollover a:hover, #rollover a:focus{
text-decoration: none;
visibility:visible; }
to download, click this >

CSS Rollover

This is one example of a CSS rollover covered in class

/*link to CSS page*/
<link rel="stylesheet" href="style.css" type="text/css"/>
/*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">

/*positioning the image*/
position: absolute;
width: 370;
height: 400;
/*this class displays the stamp*/
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

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).


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) {,winName,features); }

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



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

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

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

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

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


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.