Interactive Design Homepage

VUIT Digital Arts

Teacher Name: Lisa Cianci - email:
Education Manager: Adam Hutterer - email:

Class Website -

Subject: ID2 - Interactive Design

Course: Advanced Diploma of Graphic Design (CUV60411)

CLASS 15 - Dynamic Website Development


Class Exercises


Coding Exercise - Image Loader

Combining HTML, CSS, JavaScript & PHP to individually load a directory of images dynamically into a page.

See the outcome here: index.html

  1. Create a folder with your name on it - no spaces - eg: janesmith

  2. Create a new HTML file in Dreamweaver in your folder. Open the file in Dreamweaver and go to the Code View. You will see some basic HTML code there - a skeleton of tags that allow you to start building a page.

  3. Copy the first chunk of text in this text file [head.txt] and paste inside the <HEAD></HEAD> tags of the HTML file - this is the CSS and JavaScript code.

  4. Copy the second chunk of text in this text file [body.txt] to the <BODY></BODY> tags of the HTML file - this is the HTML code.

  5. Create a folder called "images" inside your named folder.

  6. Download and save the PHP file provided [getpics.txt] in the images folder. Rename it as "getpics.php". Open it in Dreamweaver and inspect the code. It's very important to get the file name and folder location correct otherwise the exercise won't work.

  7. Place a selection of your own images in the images folder with the PHP file. The PHP file will be able to detect the file names in that folder that are JPG, JPEG, GIF, or PNG and turn that information into a list to send to the HTML file for presentation.

  8. Once complete, copy your folder to MMSHARE. I will then upload them to our web server that has the PHP server running.

  9. Once online, you can view your own exercise and test it to see if it loads your images. I will let you know the URL to find your folder online.

  10. Note how if you try to open the HTML file from your computer, the PHP doesn't work. This is because you need the PHP server to "parse" the code and make it work with the HTML and other code languages. HTML, JavaScript & CSS don't require a special server to work and can run locally, but PHP does need its own server. This is why we have to upload the files before we can test them.

code from this source:



Quiz - Identify these coding languages

Are the following HTML, CSS, JavaScript or PHP? Email me your quiz list with number and code type.

EG: 1. HTML, 2. CSS etc...


<style type="text/css">
           -moz-opacity: 0;



<script type="text/javascript">
function showpicture(selectobj){
           piccontainerobj.innerHTML='<img src="'+locationstring+selectobj.options[selectobj.selectedIndex].value+'">'


<div style="float: left; width: 200px;">
<form id="picsform">
<select name="picslist" size="4" style="width: 200px" onClick="showpicture(this)">
4. <? $pathstring=pathinfo($_SERVER['PHP_SELF']);
$locationstring="http://" . $_SERVER['HTTP_HOST'].$pathstring['dirname'] . "/"; ?>


</head><body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0">
<table align="center" border="0" cellpadding="15" cellspacing="0" width="800">
<td valign="bottom" bgcolor="#CCCCCC">
<p class="plain1"><strong><a href="../index.html" class="link1">Interactive Design Homepage</a></strong></p>


    echo 'var locationstring="' . $locationstring . '";';
echo 'var picsarray=new Array();';
7. <style type="text/css"> .dochead {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #333300;
font-weight: bold;
} </style>

8. <script src="images/getpics.php" type="text/javascript"></script>