OK, we’re ready to go. Start your VM and open Aptana Studio (don’t know how? see previously)
In File->New->Web Project->Basic Web Template add the name ‘Lithophane’
On the Lithophane project, create a CSS and a JS folder (right click->New->Folder) under CSS create main.css and under JS, main.js (right click->New->File). Double click on Index.html and you’re ready to start programming.
The files main.css and main.js will contain our style sheet and JavaScript respectively, index.html is the main web page. First, we need to include these files into our HTML page so that we can reference the definitions within them.
Now to check it all works. Replace the default HTML (in Index.html) which probably looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>New Web Project</title>
</head>
<body>
<h1>New Web Project Page</h1>
</body>
</html>
With this:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Lithophane Generator</title> <link rel="stylesheet" href="css/main.css"> <!--our style sheet--> </head> <script src="js/main.js"></script> <!--our Java Script--> <body onload="initPage();"> <!--call function when page loaded--> <h1 id="pageheading">Lithophane Generator</h1> </body> </html>
Add the following to the main.css file
body {
color : #008; // change colour of body section
}
And the following to the main.js file
function initPage() { // called on page load
// find heading in document and change the displayed text
var headingText=document.getElementById('pageheading');
headingText.innerHTML="2D->3D Lithophane Generator™";
}
Save all the files, select the tab containing index.html and click the green run icon 
to see that you have everything setup correctly.
The browser should start and the web page should look like this:
The title text has been changed by the JavaScript and the colour has been set to blue by the CSS. So everything is working 🙂
Time to start some real programming!
