Web Design

HTML Help

W3Schools host a vast collections of Tutorials, References, and Examples for HTML, XHTML, CSS, JavaScript, XML, XSL, ASP, PHP, SQL, etc. http://www.w3schools.com

Basic Page Design

This is how I like to design my web pages. It's basic and straight forward.

wrapper: wraps all of the html.

headerContainer: contains everything that is found in the header.

headerNavContainer: contains the traditional header navigation bar.

contentContainer: contains the pages contents.

footerContainer: contains your footer content.

Sample HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
   <div id="wrapper">
      <div id="headerContainer"></div>
      <div id="headernavContainer"></div>
      <div id="contentContainer"></div>
      <div id="footerContainer"></div>
   </div>
</body>
</html>

Graphics Design

Gimp is an open source (free) image editing application. The GNU Image Manipulation Program, for X Windows systems. Official site, including download area, documentation, FAQs, and a plugin registry. It's easy to use and its free! http://www.gimp.org/

Scriptaculous

A collection of Web 2.0 style JavaScript libraries that help web developers to easily add visual and ajax effects to projects. Requires Prototype.js. Samples, documentation, and free script libraries available http://script.aculo.us/.

Transparency

Because using transparency is cool!

Sample:

CSS:

filter:alpha(opacity=65);
-moz-opacity:.65;
opacity:.65;

Navigation Drop Down Menu

A simple, barebones example of a navigation drop down, using absolute positioning. Mouse over the menu links below. Sample:

Menu 1

Menu 2

Menu 3

Sample HTML:

<div id="headerNavContainer">
   <table cellpadding="0" cellspacing="0" border="0" style="width:100%">
      <tr>
         <td onmouseover="ShowMenuDropDown('menuDropDown1');" onmouseout="HideMenuDropDown('menuDropDown1');">
            <a href="#">Menu 1</a>
            <div id="menuDropDown1" style="display:none; position:absolute;">
               <a href="#">menu 1 test 1</a><br/>
               <a href="#">menu 1 test 2</a><br/>
               <a href="#">menu 1 test 3</a><br/>
               <a href="#">menu 1 test 4</a>
            </div>
         </td>
         <td onmouseover="ShowMenuDropDown('menuDropDown2');" onmouseout="HideMenuDropDown('menuDropDown2');">
            <a href="#">Menu 2</a>
            <div id="menuDropDown2" style="display:none; position:absolute;">
               <a href="#">menu 2 test 1</a><br/>
               <a href="#">menu 2 test 2</a><br/>
               <a href="#">menu 2 test 3</a>
            </div>
         </td>
         <td onmouseover="ShowMenuDropDown('menuDropDown3');" onmouseout="HideMenuDropDown('menuDropDown3');">
            <a href="#">Menu 3</a>
            <div id="menuDropDown3" style="display:none; position:absolute;">
               <a href="#">menu 3 test 1</a><br/>
               <a href="#">menu 3 test 2</a>
            </div>
         </td>
         <td><a href="#">Test 4</a></td>
         <td><a href="#">Test 5</a></td>
      </tr>
   </table>

   <script type="text/Javascript">
   //<!--
      function ShowMenuDropDown(elementID)
      {
         document.getElementById(elementID).style.display = '';   
      }
      function HideMenuDropDown(elementID)
      {
         document.getElementById(elementID).style.display = 'none';   
      }
   //-->
   </script>
</div>