How to Build a Form

November 2nd, 2009

In either a new page, or in an existing page, create the form tag using either the Insert Form button on the Insert menu, or using INSERT/FORM/FORM from the Dreamweaver screen menu. This will create a red outlined box, which symbolizes the form tag. All form elements must be placed inside of that red box.

When adding a text field, be sure to name the field in a descriptive manner.For example, if you Label a field as “Name,” make sure you name (ID) the text field as “name.” When form data is sent to the end user, it will be arrayed according to the field ID. Labels are for users to quickly see what data should go into each field.

When adding either check boxes or radio buttons, make sure all the boxes or buttons for a given question have the same ID. For example, if you are asking if someone is male or female, both radio buttons need to have the same ID in order to work correctly. If you are using check boxes, also make sure all the IDs for a given question match each other.

Setting the length of a text field as visible characters can be problematic, as different browsers will formulate the text width differently. It is best to use a class to set the width of a text field.

Assuming you are using the form mail script from class, you will need to add two hidden fields to the Web site to make the form function correctly. One hidden field, is called “recipient” with the value set to a Creighton email address (such as joel@creighton.edu), which designates where the email should be sent. The second field is used to redirect the user to a landing page after they have clicked the button submitting the form. That field should be named “redirect” with a value of an absolute URL for a landing or “thank you” page.

for example:

http://people.creighton.edu/~abc12345/thankyou.php

To make the form actually function, you will need to add an action to the form. Click on the red box or the form tag in the bread crumb trail, and add the following URL to the “action” field:

http://jmc.creighton.edu/formmail.cgi

This script compiles the form and sends it to the email address specified in the “recipient” field. It will only work for creighton.edu email addresses. Most Web hosts have a standard script available for email forms.

Now, you might still have some gnarly looking text boxes on your page, and since this is a design course, we should remedy that. Never use the “character width” attribute to set the width of a text field, always use a class with a custom width.

Tags: , ,
Posted in Web Design |

Final Cut Server

October 29th, 2009

I’ve started posting Final Cut Server instructional videos in iTunes U, but I’ll provide direct links to the videos from our Podcast Library in this post.

This will get updated as new videos are added.

Tags: , , , ,
Posted in Podcast |

CSS powered image rollovers

October 28th, 2009

So you’ve designed some sweet rollovers in Photoshop, and you want to use rollover images in your navigation. You’re committed to the image, so simple a:hover styles aren’t going to work. However, building on concepts we have already learned, we can build kick-ass hovers without having to use complex Javascripts.

Read the rest of this entry »

Tags: , , , ,
Posted in Web Design |

The Anatomy (and Rules) of a CSS Rule

September 14th, 2009

There are two distinct elements to a CSS rule: the selector and the declaration.

  • The selector describes the element controlled by the rule, which can be an HTML tag, an ID, a class, or basically anything else that can be controlled using cascading style sheets.
  • The declaration tells the browser what should happen to the selected element. The declaration always follows the selector, and is surrounded by brackets: { declaration }

For the following example, the body tag is being selected, and the rule is declaring that the background color be black.

body { background-color: #000000; }

Inside the declaration, there are two elements separated by a colon (:)

  • the property, in this case background-color
  • and the value, in this case #000000, or black

Although Dreamweaver is going to write our rules for us, it is important to understand how the rule is structured, in case you need to be able to read rules designed by someone else later in the semester.

There are also some rules, wait – let’s call them guidelines, to remember when writing CSS rules.

  • Try to only use letters and numbers. Keep numbers to a minimum.
  • Use lowercase letters, but mimicking “Object Oriented Code” conventions is common. Often, capital letters are used to denote separate words, as in newsBox or leftNavigation
  • No spaces allowed. Spaces mean something, so don’t use them simply to separate words.
  • No punctuation allowed. You may use an underscore to simulate a space. As you will soon learn, certain punctuation marks and symbols characters have definite meaning in CSS rules.
  • Use classes sparingly. Classes should be used for nitpicky rules, or for tweaking existing rules. Don’t clutter up your style sheet with a ton of classes.
  • If something doesn’t work, relax. Stop. Take a deep breath. Look at the CSS and document structure again. CSS rules follow pretty strict logical structures. They will do exactly what they are told, but it’s possible that two rules are giving competing instructions. Use the Firefox Web Developer add-on to troubleshoot your CSS.
Tags: , , , , ,
Posted in Web Design |

Redefining HTML tags with CSS

September 14th, 2009

As we discussed in our first lecture looking at HTML code, all HTML tags have a default set of visual rules defined by the browser. A significant part of Web design is redefining those rules so those HTML tags look good, even damn good, in our sites.

The example we used in class was to look at the common paragraph, or p tag. Paragraphs unless told otherwise, are black, left aligned, 100% wide (as defined by their enclosing element), have a margin in between them, are displayed in Times or Times New Roman, and are 16 pixels (1 em) tall.

It is quite easy to write the selector for an HTML – just write the name of the tag:

p

The above tag will control all paragraphs on the page. To be honest, you will likely find it much more practical to use contextual selectors to redefine most HTML tags.

Tags: , , , , ,
Posted in Web Design |

CSS divs and IDs

September 14th, 2009

Div tags are the basic page layout element we are going to use to design our Web site. Each div can be given a unique identifying code, so that it can easily be controlled by a CSS rule. When using ID to control divs, you should remember that only one div with a given ID should appear on each page. If you already have a div “#container” on a page, do not add another div with the same ID.

Selectors for divs with an ID are written beginning with a pound sign: #

#container

Once a div has a rule defining it’s size, placement, color, etc, additional layout elements can be placed inside the div – much like a picture or text box in InDesign.

A good rule of thumb when using divs is to minimize the number of divs used on the page. Order the divs in a logical manner (such as header, then navigation, then content, then footer) and then use CSS rules to control their placement and appearance.

Tags: , , ,
Posted in Random Stuff |

Contextual Selectors

September 14th, 2009

Once you have created ID elements on your page, you will probably place additional elements in content inside these IDs. Contextual selectors allow you to control elements inside specific IDs.

Let’s say you defined all p tags to be Arial, size 12, black. However, you have a dark blue div (ID = sidebar) to hold navigation and news on the left side of the page, and the paragraphs inside the news box are showing as black text in a blue box – basically unreadable. You can create a style for the following rule:

#sidebar p

The space between #newsBox and p refers to the fact that the paragraph is inside the newsBox. You essentially read the rule backwards from right to left:

  • p controls all paragraphs;
  • space means inside of;
  • #sidebar refers to the div with ID sidebar

Spaces mean something in CSS rules, so be sure to use them in the proper context. Pun intended.

Tags: , , , , , ,
Posted in Random Stuff |

Need two columns? Float those divs!

September 14th, 2009

Divs want to display “block” style, meaning they want to sit atop one another. If you want them to work as two columns, you need to set them both to float.

What is a float? Well, the easiest analogy is that floated items allow content placed after them in the code to “wrap” around the floated item. If you have used InDesign, you have probably set the “Text Wrap” characteristics for a photo, allowing text to wrap around one side of the photo in question.

Floating is basically the same thing. By floating a div, you force the next div in the code to wrap around the floated div. In order to create two true columns, you must set them both to float.

Float property in Dreamweaver CSS Rule window.

Float property in Dreamweaver CSS Rule window.

Depending on your layout, you can choose to set them to float to either the left or the right. Web designers will often set them both to float the same direction, to control the space between columns more efficiently.

For an example using the Sequoia exercise, watch the video below:


Tags: , , , , , ,
Posted in Podcast, Web Design |

Link Pseudo-Classes

September 13th, 2009

There are 4 “states” of links that you need to worry about when creating pseudo-classes: link, active, hover and visited.

That being said, take some time to think about how you actually want your links to behave in a given div before you define the pseudo classes. Do you actually want the links to get darker when visited, or do you want them all to remain the same color? If you are working with your primary navigation, you probably don’t want the links to have a “visited” style.

Because I’m a huge fan of making things simpler, I almost never define all four pseudo-classes.

Writing a pseudo class is easy, you simply add a “colon” and the pseudo class state directly after the “a” tag in a selector. For instance, for links in a content div, I would start with a rule for:

#content a

The above rule will define how all four states behave, because I defined the “a” tag, and did not specify a pseudo-class. If I want a rollover for the link, I can also define

#content a:hover

and change any attributes that change when the mouse hovers over the link. Adding rules for “a:visited” or “a:active” will (respectively) define link states that activate when the browser can see a page in the user’s history, or when the mouse button is down.

Tags: , ,
Posted in Web Design |

PHP Server Side Includes

September 12th, 2009

I could also rename this post “A complex route to easy navigation.” Buckle up, because this is going to be a video entry.

First, let’s examine what a Server Side Include (SSI) actually does for your Web site. PHP is actually a very complex and powerful language that can really extend the function of the site. We are only going to barely scrape the surface of PHP to play with a SSI.

A SSI functions much like an external style sheet – it allows you to take repetitive elements (like your navigation) from individual pages of your Web site, and place them in an external file. So, if you have 300 pages of Web site, and need to change a link in your navigation, you can update it just by changing the link in your include, rather than changing it in 300 pages. 

An include is a separate PHP file that contains just a snippet of code that you can “include” or place inside a certain layout element (div) on another PHP page. When you set up your include, remember to strip out all the existing code before pasting in your included elements! What exactly does that mean, you ask? Well, watch the video below to find out.


Tags: , , , , , ,
Posted in Podcast, Web Design |
« Older Entries