Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

  • Print
  • + Share This
Like this article? We recommend

Design the Page

Here are the steps to bring the Florida Keys inline graphic to life:

  1. Open Dreamweaver and create a new Web page. The page must contain a layer that will hold the random graphic; or you can use a table cell.
  2. Select the layer or table cell that you want to use for the random graphic (Figure 1).
    Figure 1

    Figure 1 Example of a Web page with a blank layer to hold the inline graphics

  3. In the Dreamweaver document window, switch to the Code or Split view (Figure 2).
    Figure 2

    Figure 2 Split-screen view gives you access to the design and code of the active Web document.

  4. Insert an image source statement within the layer or table cell code. Include a dummy name for the graphic (keys/key.jpg), and then give it a reference name (florida). See Figure 3.
    <div id="keywest" style="position:absolute;	
    left:411px; top:124px; width:400px; height:300px; z-index:1; 
    visibility: visible"><img src="keys/key.jpg" width="400" height="300" 
    name="florida" />
    </div>
    Figure 3

    Figure 3 The modified HTML in Code view

  5. Create an insertion point directly after the image source statement, but before the closing </div> statement, and insert the following JavaScript code (see Figure 4):
  6. <script language="JavaScript1.1">
    <!--This JavaScript code creates the math to change the image source.
    document.florida.src="keys/key"+Math.round(Math.random()*6+.5)+".jpg";
    /-->
    </script>
    Figure 4

    Figure 4 The completed JavaScript in Code view

    The completed code for the entire layer will look like this:

    <div id="keywest" style="position:absolute; left:411px; top:124px; width:400px; height:300px; z-index:1; visibility: visible"><img src="keys/key.jpg" width="400" height="300" name="florida" /> 
    <script language="JavaScript1.1"> 
    <!--This JavaScript code creates the math to change the image source.
    document.florida.src="keys/key"+Math.round(Math.random()*6+.5)+".jpg"; 
    //-->
    </script>
    </div>
  7. Complete the design of the Web page by adding any additional desired objects, text, or static images.
  8. Save the document (File > Save).
  • + Share This
  • 🔖 Save To Your Account