Comments Off

Horizontal Centering

Example Making something be horizontally Centered is a three step process

  1. the element containing the element that you want to be horizontally centered needs a text-align: center attribute
  2. The element that you want to be centered needs to be possition:relative
  3. the element that you want to be centered needs to have margin-right and margin-left set to “auto”
Comments Off

Index and About Pages

I spent WAY too long on these pages. I explored text rotation and using new typefaces. It’s not completely right yet… and it’s funky on IE :(. A good start though…
Index (click on the elephant to go to the About page)

Comments Off

Week 12


PHP basics

PHP is a server-side scripting language, which means that the code is processed before the page is sent to the browser. PHP is code that is embedded in your HTML. PHP must be installed on the server to use PHP in your HTML pages. In order for PHP to be recognized by the Web server, you must do two things:

PHP Syntax

Here is a basic PHP document, with no content:

<!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>

<title>PHP page</title>

</head>

<body>

<?php

?>

</body>

</html>

Now, everything you put between <?php ... ?> tags will be pre-processed by the PHP processor on the server.

Sending content to the browser:

In order to display text that is written within the PHP tags, you will need to use either the print or echo functions that are built into PHP:

echo 'The echo function is used with single quotes';

print("The print function is used with parentheses and double quotes");

Notes: Because the echo function uses single quotes and the print function uses double quotes to enclose the text to be printed to the browser, you must escape double quotes that are to displayed within the text by putting a backslash in front of them: \' or \"

Comments within PHP code are made using a double slash // or number sign #for single line comments or /* .... */ for multi-line quotes.

Declaring variables in PHP

All variable names in PHP begin with the dollar sign: $varname.

Variable types do not need to be explicitly declared in PHP.

So, a simple PHP script using variables and the print function might look like this:

<!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>

<title>PHP page</title>

</head>

<body>

<?php

$class=’Advanced Web Class’;

print(”<b>Hello $class !<b>”);

?>

</body>

</html>

The resulting output from this script would be:

Hello Advanced Web Class !

PHP Includes

One of the most useful things you can do with PHP is use it to include entire files in your HTML. This is helpful when you have elements that you want to appear on all pages of your site, such as your navigational elements.

The code for a php include is simple, just place it in your body take where you want the file contents included:

<?php include ('YOUR_FILENAME.txt');?>

The file that you include should not be a full HTML file, but just the code that is to be inserted in the page.


Form Processing with PHP

In order to process the information submitted by a user to a form on your site, you need a way to capture that data. Because HTML, CSS, and JavaScript all happen on the client-side, and can’t send information back to the browser, you need something like PHP, working on the server side, to do this. We’re going to go over one very simple form processing scripts today, which sends the results of a form as an email.

See the Form in action

Sample Files: (control+click or right click to download)

Step 1, Set the Form Action

To invoke the PHP code you are going to use to process the form, you are going to submit the form to a .php page. This is accomplished by setting the form action to the name of the page:

<form action=”http://classes.catherinegarnier.com/spr09/advweb/examples/email_form.html” method=”post”>

Step 2, Create the handler script

Next, you are going to create a .php file to process the form contents. In this example, we are going to name this script email_form.php

By submitting our form to this script, the values from the form are passed to it. These values are automatically stored in an array called $_POST. We can now access the values in this array, and the first thing we need to do is to make them easier to work with:

//Change post variables to regular variables

$ipod = $_POST['ipod'];

$laptop = $_POST[‘laptop’];

$cell_phone = $_POST[‘cell_phone’];

$borough = $_POST[‘borough’];

Note that the values between the brackets [’…’] match the names of the inputs you passed from your form.

The next thing you need to do is turn all these values into a single string so it can be emailed:

//Turn all the variables into a single string.

//Note: .= appends to the current variable value rather than replacing it

$formresults = "Ipod: ".$ipod."\n";

$formresults .= “Laptop: “.$laptop.”\n”;

$formresults .= “Cellphone: “.$cell_phone.”\n”;

$formresults .= “Borough: “.$borough;

Next, you will use the built-in function called mail to email the form results to the designated email:

//send values as email

mail(”youremail@domain.com”, “Form Results from Web site”, $formresults, “From: youremailhere@yourdomain.com”);

Now, it’s good practice to give your visitors a confirmation message so they know their information was submitted:

//print opening html

print(”<!DOCTYPE HTML PUBLIC \”-//W3C//DTD HTML 4.01 Transitional//EN\”

\”http://www.w3.org/TR/html4/loose.dtd\”>

<html>

<head>

<title>Form Example</title>

<meta name=\”generator\” content=\”BBEdit 8.2\”>

</head>

<body>”);

//Print confirmation message to the screen

print(”Your answers have been emailed to our secret headquarters. Thanks for playing!”);

//print closing html

print(”</body>

</html>”);

Last, don’t forget to close your php tag:

?>

If you want to know more about styling form elements with CSS, there is a pretty good article here

For more info about PHP, go to php.net


Homework | Week 11

  1. Create a simple PHP handled form with at least three inputs and a submit button OR create a functional form for your client site.
  2. Keep working on your sites!
Comments Off

KHalterman’s Second Set of Designs

Second set of designs including possible logo [click here] (the colors still need work)

Comments Off

DoubleYou Design Presentation

Index Page

News/Blog

Mission

Project

Family

Contact

Comments Off

Week 11

We’ll have presentations by anyone who still has not presented, then review of javascript assignments and then JQUERY, and then individual design reviews and discussion of how you’re going to build your sites in html.

A number of extended javascript libraries have been created by enterprising developers. These are popular:

I’m most familiar with JQuery, so that’s the one I’m going to walk you through today!

Quick Start with JQuery

  1. Download the JQuery Core code
  2. Download this HTML Example

HOMEWORK: Your home page and first 3 other pagetypes built in HTML

Comments Off

Color Scheme Designer

http://colorschemedesigner.com/

This is an amazing resource for the color-challenged (or timid) out there.

It also lets you see how vision-impaired people view your site – – which is crazy awesome.

Comments Off

Hanky Pancreas Design Update

Home

About

Accessories

Apparel

Meet the Designer

Comments Off

Horizontal Scroll Bar Examples

Cool example…

http://inside.nile.ru/#years-2008/

Came from here:

http://vandelaydesign.com/blog/galleries/horizontal-websites/

Comments Off

Week 10

We’ll have presentations by people who didn’t go last week first, then review of javascript assignments and then: JQUERY

A number of extended javascript libraries have been created by enterprising developers. These are popular:

I’m most familiar with JQuery, so that’s the one I’m going to walk you through today!

Quick Start with JQuery

  1. Download the JQuery Core code
  2. Download this HTML Example