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.

• Download and Install Final Cut Server
• Uploading Student Assets (Projects)

This will get updated as new videos are added.

First, start by actually typing in the text of the navigation, and format each link as a separate heading style (H1, then H2, etc). If you run out of Heading tags, try creating new ones – you can make a h7, h8, etc in the code. Create a CSS rule for each heading (and make it a contextual selector, such as #nav h1) that creates a box the correct size for each graphic that is going to be used, and place the normal state graphic in the background.

After you have created all the header styles with graphics, create an overall link style for the navigation (#nav a) and size the link font to 1 pixel. Also choose a truly awful background color for the links. This is going to show you the box that will activate the link. At this point, it should be a pathetic little box in the upper left corner of each link graphic. At least the font is too small to read.

Now, create rules for each link to increase the size of the box. These will also be contextual selectors such as #nav h1 a, #nav h2 a, etc. Use padding on the right and bottom size of the boxes to fill most, but not all of the box. Leave a little wiggle room in case someone starts increasing text sizes in a browser. The awful tacky background color should cover the text contents of each graphic, at the very least.

Next, create the rollover styles. These selectors should read as pseudo classes applied to the headings, such as #nav h1:hover, #nav h2:hover, etc. All these rules simply need to declare a new background image – the rollover image you created in Photoshop.

Finally, go back into #nav a and get rid of the background color. Set the text color to something that will disappear into the background of the graphic.

Upload all the page and it’s dependent files, and test it online. you should be able to activate the links and see the rollovers. You might notice a flash when the links are rolled over. We’ll fix this next, but you have two choices how to create preloaders.

Preloaders via Javascript in Dreamweaver

Go up to the Window menu, and load the Behaviors panel. Select the body tag in your breadcrumb trail, and use the “+” button in the Behaviors panel to Preload Images. MAke sure the top of the behaviors panel shows the body tag. Add each rollover image to the list using Browse and then the “+” button until all the rollovers are present. Hit return. You should see the behavior added as an “onLoad” behavior. This will tell the web browser to download each image when the page loads, so that when they are rolled over, they instantly appear (without the white flash).

Preloaders via the CSS head fake

I hate Javascript. Try this method for a change of pace, and a method controlled entirely by your style sheet.  You’ll have to dive into the CSS slightly with this solution, but not in any particularly hard manner.

Create an empty div with ID “preloader” at the bottom of your layout, and create a rule to control the div. Set the left margin to “-1000″ pixels (that’s negative one thousand), and the height and width to something small, like 10 pixels each. This is going to move the div off the left side of your screen, and it won’t create a horizontal scrollbar.

The next part is slightly more complicated. Go into the CSS code and add the following code inside the #preloader rule to create multiple background images for the div:

background:url(images/rollover1.gif) no-repeat;

You will need one line of this code per rollover image. Change the folder and file name as necessary to point to your rollover images.

That’s it. Upload the style sheet and the dependent files. The preloader div should not be visible in any way, but all the images should preload as the page loads.

And, you have a preloader “script” that lives inside your style sheet, which means it’s one step to add or change images. Bad-ass.

• 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.

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.

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.

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.

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.

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:

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.

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.