Web Design

Designer’s Toolkit

XHTML & CSS Cheatsheets
Handy references for coding reminders.
Kuler
Kuler is a web-hosted application for generating color themes that can inspire any project.
Color Blender
Dial in a color, and it generates a scheme of corresponding colors.
Color Palette
Generates a color scheme from a web image.
Colour Selector
Free, downloadable application for developing your own color schemes.
Lorem Ipsum
Free easy source of filler text for your design mockups.
Favicon Generator
Create a favicon for your website.
Special Characters in HTML
Find the right HTML code for special characters.
Stock.xchng
Stock Photography (for FREE)
Icon Finder
Find great icons for your designs.

Web Design Tools

Firefox Add-Ons

Download and install one of these free coding applications:

Download and install one of these free FTP client applications:

WordPress Resources

Great Articles

Great Sites

Advanced Coding Articles

Resources

Domain Names

If you would like at some point to register your own domain name, here are a couple of good options:

Hosting

If you would ever like to establish your own web hosting account to set up and host your own web sites, with tons of options and tons of online spaces, WordPress.org lists some great hosting providers.

Reminders

Absolute Positioning

  • positions an element in relation to the browser window OR the nearest relative-positioned parent
  • Tip: If you want to position something absolute in relation to a “container” div, position the “container” div relative. This won’t change the position of the container, but it will help your absolute positioning! The line of code: 
    position: relative

Floats

  • Remember that floated elements are not recognized by the containing element UNLESS you:
  • Identify or add an element below the floats that can be cleared in the css (clear: both)
  • Float the containing element (floated elements do recognize other floated elements, beside them or inside them.

Code Snippets

Strict DocType Declaration

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Link to External Stylesheet

<link rel="stylesheet" type="text/css" href="style.css" />

iPhones and iPods

iPhone browser emulator – iPhoney

  • Download and install iPhoney to check iPhone site designs on your Mac.

Send iPhones to an iphone-specific stylesheet

  1. Create a javascript file named source.js, containing this code: 
    detect_iphone = function(){
css = document.getElementById('iphone');
this.construct = function(){
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))){
css.href = "iphone.css";
} else {
css.href = "style.css";
}
}
}
  2. Place this in the head of your document — note that the javascript follows the stylesheet link: 
    <link rel="stylesheet" id="iphone" type="text/css" href="style.css" />
<script type="text/javascript" src="source.js"></script>
<script type="text/javascript">
var detect = new detect_iphone();
detect.construct();
</script>
  3. Note that the above code snippets assume that you have your javascript file, markup, style.css (your main stylesheet) and iphone.css (your iphone stylesheet) all in the main folder. Adjust your filenames and links accordingly.

Form PHP

This method will give you a fully functional form that sends an e-mail to your desired e-mail address:

1. Place this folder of captcha code in your online web folder.

2. Place this code in the very top of the document where your form will reside, above the doctype. (Note that the error message is located near the bottom of this section of code. Change the words between the quotes will change the error message.)

<!-- //////////////////////////////////////////////////////

 FORM DOCTOP (above doctype) PHP:
  PASTE IN THE VERY TOP OF YOUR FORM HTML PAGE 

  //////////////////////////////////////////////////////  -->

<?php
  session_start();
  if($_POST){
  if(($_SESSION['security_code'] == $_POST['security_code']) && (!empty($_SESSION['security_code'])) ) {
  // Set success message
  $message = "Form submitted properly message...";
  // process form post data...
  $html = "<p>The following was submitted:</p>";
  foreach($_POST as $key => $value){
  if($key != "security_code"){
  $html .= "<p><strong>".$key.": </strong>".$value."</p>";
  }
  }
  // set your email address and subject...
  $to = "yourmail@domain.com";
  $from = "yourmail@domain.com";
  $subject = "contact form submission";
  // set headers and send email...
  $headers  = 'MIME-Version: 1.0' . "\r\n";
  $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
  $headers .= 'From: '.$from.''. "\r\n";
  $mail = mail($to, $subject, $html, $headers);
  } else {
  // Set error (captcha) message...
  // possible here to say...
  // if security code is wrong, or invalid email, etc.
  // see php's ctype and google valid email methods.
  $error = "WOOPS! Please try again.";
  }
  }
  ?>

<!-- //////////////////////////////////////////////////////

 END FORM DOCTOP PHP

//////////////////////////////////////////////////////  -->

3. Finally, place this where you want the form to appear. Modify the form elements, error and success messages, as desired:

<!-- //////////////////////////////////////////////////////

 FORM CODE:
  PASTE WHERE YOU WANT YOUR FORM TO APPEAR
  Modify labels, inputs, values, etc., as needed
  Also modify error and success messages as needed
  (Error and Success styles are in Forms section of stylesheet)

//////////////////////////////////////////////////////  -->

<?php if(!$_POST || $error){ ?>

 <h2>Contact Me!</h2>

 <form action="contact.php" method="post">
  <p class="error">
  <?=$error?>
  </p>

 <fieldset>
  <legend>Contact Form</legend>
  <p>Fields marked * are required.</p>
  <dl>
  <dt><label for="subject">Subject *</label></dt>
  <dd><select name="subject" id="subject" tabindex="1">
  <option value="">Pick one</option>
  <option value="I need help!">I need help!</option>
  <option value="I have a suggestion.">I have a suggestion.</option>
  <option value="I really like your site.">I really like your site.</option>
  <option value="I want to hire you.">I want to hire you.</option>
  </select></dd>
  <dt><label for="name">Name *</label></dt>
  <dd><input type="text" name="name" id="name" tabindex="2" /></dd>
  <dt><label for="email">Email *</label></dt>
  <dd><input type="text" name="email" id="email" tabindex="3" /></dd>
  <dt><label for="message">Message below</label></dt>
  <dd><textarea name="message" id="message" rows="9" cols="30"➥
  tabindex="4"></textarea></dd>
  <dt><label for="updates">I would like to receive updates: </label></dt>
  <dd><input type="radio" name="updates" id="updates" value="yes" ➥
  tabindex="5"/>Yes <br />
  <input type="radio" name="updates" id="updates" value="no" ➥
  tabindex="6"/>No
  </dd>
  </dl> 

 <p>
  <label for="captcha">Security Code:</label><br />
  <img src="captcha/image.php"  /><br
  <input type="text" id="captcha" name="security_code" />
  </p>
  <p>
  <input type="submit" value="Submit Form" tabindex="6" />
  </p>

 </fieldset>
  </form>

  <? } else { ?>

  <h2>Thank you!</h2> 

  <p class="success">Your request has been successfully submitted.</p>

  <p>What would you like to do next?

  <ul>
  <li>Return to <a href="portfolio.html">my portfolio</a>.</li>
  <li>Return to <a href="index.html">my homepage</a>.</li>
  <li>Read something cool at <a href="http://www.smashingmagazine.com">Smashing Magazine</a>.</li>
  <li>Learn about the new degree in <a href="http://think.ingcreative.com/2009/03/11/new-degree-program-graphic-design-marketing-dynamics/">Graphic Design and Marketing Dynamics at Oklahoma Wesleyan University</a>.</li>
  <? } ?>

<!-- //////////////////////////////////////////////////////

 END FORM 

//////////////////////////////////////////////////////  -->