Archive for the ‘Web Design’ Category

« Older Entries

How to Build a Form

Monday, 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 |

CSS powered image rollovers

Wednesday, 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.

(more…)

Tags: , , , ,
Posted in Web Design |

The Anatomy (and Rules) of a CSS Rule

Monday, 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

Monday, 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 |

Need two columns? Float those divs!

Monday, 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

Sunday, 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

Saturday, 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 |

Making a new Site in Dreamweaver

Saturday, September 12th, 2009

You guys are going to have to do this at least twice in Web Design, at least twice in Interactive Design, and GOD KNOWS how many times after graduating, so, without further ado – here’s the magic recipe to setting up a Site in Dreamweaver.

Step 1: Gather up your files for the Web site into a local root folder. This folder will store everything that will eventually be uploaded to the server, so don’t clog it up with a bunch of extra files, such as high-resolution scans that have no yet been “Saved for Web.”

Step 2: In Dreamweaver, go to Site/New Site, and click on the “Advanced” tab at the stop of the screen. You will need to fill in the following items on this (the LOCAL INFO) screen:

  • Site name (which can be anything, including any characters)
  • Local root folder: use the blue folder (browse) button to select the local root folder from step 1.
  • Default images folder: OPTIONAL – create a folder called “images” inside your local root folder and select it here.
  • Links relative to document (yes, unless you are an advanced user and know how to set site relative links for your own domain name)
  • http address: OPTIONAL – provide the actual URL of this website (for this blog, it’s http://joel.creighton.edu/blog/
  • Use case sensitive link checking (yes) 
  • Enable cache (yes)

Step 3: Set up your Remote Info screen (selected in the left column of the advanced view). Again, go through the following settings:

  • Access: FTP (I’ve never used anything but FTP)
  • FTP Host: people.creighton.edu (or another URL used by your own server – if you have purchased space and a custom domain name somewhere else)
  • Host directory public_html (this is for people.creighton.edu, this will almost certainly be different if you have a different server)
  • Login & password (either your Blue user/pass, or your user pass for another server)
  • Other settings: Some servers require Secure FTP (people does) and some require Passive FTP. I have found the only way to discover this if you haven’t been provided the information about the server is by trying the different settings and clicking “Test”
  • click Test, and if it connects successfully, you are ready to go.

Step 4: Finish and be smart with your site. Remember, Dreamweaver will be able to track changes to links, locations and file names ONLY if you make the changes in the Files window. If you do ANYTHING outside of the Files menu (F8), Dreamweaver will not update links, and you’ll end up with broken links, pages, and missing images.

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

The Box Model

Tuesday, August 18th, 2009

It’s essential in CSS design to understand the box model. Basically, the box model defines how margins and padding affect the placement and size of an element on the page.

In short, you can create a space outside the element using margins. With a margin on the top of an element, we can push it down from it’s default position.

Inside the box, padding is used to create space between the edges of the box and the content it holds. Be careful, as horizontal padding actually increases the width of the box. When you define a width, you are actually defining the size of the content within the box – when horizontal padding is added, the overall box size expands, while the set width for content remains the same.

Tags: , , , ,
Posted in Web Design |

The Universal Selector

Tuesday, August 18th, 2009

The universal selector is a very powerful rule you can create in a cascading style sheet.

Basically, whatever declarations you make in a universal selector are applied to every element of a Web site, unless a more specific rule is written. Therefore, you want to be really careful how you use the universal selector.

From a coding standpoint, it couldn’t be easier to write the rule. Just like when you perform a “wild card” search on a computer, you use an asterisk for the universal selector.

*

That’s it. Just add declarations to that rule, and you’re off.

Now for the fun part. I would recommend only doing the bare minimum with this rule. Pick a font. That’s about it. Any color, size, etc, declarations you make are going to be applied to the entire page.

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