Step One:
Copy a Template

Step Two:
Adding a Side Menu

Alternate Copy &
Paste Method:
Starting the Page

Sidemenu

Ending the Page

Extras: FrontPage Settings Optional Elements
Adding a Counter Hiding Email Addresses
Creating Graphical Buttons


Creating Graphical Buttons

Graphical buttons enhance an interface and give it a more appealing quality. And as Web 2.0 becomes the standard across the Internet, more and more sites are using images to spice up their interface. These functions will allow GPC employees to add these graphical buttons on their pages quickly and without the need for graphic editing.

How To Add a Navigation Button:

To add this graphical button, add this code to your page. To use a button to navigate to another page in your website:
  1. Copy & paste this code into the CODE or SOURCE of your HTML file where you would like the button to show.

  2. <?  include_once('button.php');
            $btn = new Button("Go to Style Guide Home Page", "http://www.gpc.edu/StyleGuide", "blue");
            $btn->draw();
    ?>
    

  3. Change the caption, link(URL), and color in the code. The URL should be set to the page you would like the page to navigate to from your page.

Test the above code by pressing this button:

Go to Style Guide Home Page


The order of the parameters in the 'new Button' line in the code is:

  1. caption: The actual content of the button. Note: Any quotes must be escaped by a backslash. See the following example.
  2. link: The location to link to. This can also be javascript. (See below)
  3. color: The color of button to use. The choices are red, blue, gold, green, black, silver, or orange. The default is red.
  4. size: The size of button to use. The choices are small or medium. The default is medium.
  5. id (Advanced): The id to assign to the element. This would be used to change the contents of a button through javascript.
  6. onclick: Javascript code to execute when the button is clicked.

Executing an Alert before Redirecting:

This code will show an alert before the user is navigated away from the page.
<?
    include_once("button.php");
    $btn = new Button("Warning!", "http://www.gpc.edu/webpublishing/index.htm", "red", "medium", "id", "alert('Warning!  You\'re about to leave this page')");
    $btn->draw();
?>

Test the above code by pressing this button:

Warning!


Using a Button to Submit Form:

You can use the buttons to execute javascript code. The main use for this would be to submit a form.

Take this simple HTML page with a form:

 
<html>
<body>
  <form id='myform' action='mypage.php'>
    <input type='text' name='mytext' />
    <input type='submit' name='submit' value='Submit Form' />
  </form>
</body>
</html>

You could replace the standard submit button with a graphic button. The problem is that the second parameter for the graphic button takes a URL, but you want it to submit the form. To solve the problem, you need to put javascript in the link field of the button.
 
<html>
<body>
<script>
function mySubmit()
{  var myform = document.getElementById('myform');
   myform.submit();
}
</script>
  <form id='myform' action='mypage.php'>
    <input type='text' name='mytext' />
    <?  include_once('button.php');
        $btn = new Button("Submit Form", "javascript:mySubmit()", "blue");
        $btn->draw();
    ?>
  </form>
</body>
</html>