From a usability standpoint, I stay away from frames. They are bothersome to the user for the most part, making them do extra scrolling just to see what’s going on. Most visitors want to see it quickly, not figure out HOW to see it

However, sometimes you have information coming from another location, usually outside of your URL, and you want that information to be ‘captured’ within your site. This is useful if you want to display dynamic content that comes from another location, while keeping the design of your site intact. It also keeps the visitor on your web site, instead of sending them away .. hoping they will come back. That’s when this information can be extremely useful.

An example I’m going to use is something I did for a client recently - adding a survey. Instead of sending the visitor to another location for the survey, I wanted the visitor to stay ‘in’ the site. Now, it is a fact that not all browsers will view the ‘framed information’ correctly, so this little extra bit of information is very useful:

Give it a try; you’ll find that this is a handy way to display outside information on your web site.

CSS is definitely the wave of the future.  Once a die-hard html coder, I LOVE CSS but I have to admit there are times when it makes me want to pull my hair out.

The thing to remember, I think, is to think of it as a complete coding language in and of itself, rather than just something to embellish the HTML pages.  While it’s true that CSS cannot really do anything by itself, it is an extremely powerful tool and you have to really dig into it to make it work FOR you, instead of well…against you.

To begin, you have to know this:

SELECTOR { PROPERTY: VALUE }

That is the standard layout of a CSS statement.  You can have multiple property:value statements within this single statement.

Let’s start at a very basic level and define the LARGE elements in our web page, such as the body, paragraphs and links.

Body: This defines, well, the body of the page.  You can define many properties within this selector, such as the background color or image, margins, etc. etc.  An example would be:

body {
background-color:#ffffff
}

That defines the body background as WHITE.

Paragraphs: This defines the larger sections of text within your web page.  Here you can define the text size, color, weight, and more all in one location - MUCH easier than trying to code that information into HTML.  An example:

p {
font-family:Tahoma;
font-size:12px;
}

That one is pretty self explanatory, I think.

Finally, LINKS: If you want your links to be anything except that BLUE, you’ll need to master this selector. NOTE: don’t go crazy here.  Please like to know what they are getting into and that said, links really should be underlined unless there’s a super good reason not to.

a {

font-color:#ff0000;
font-decoration:underline;
font-weight:bold;
}

Now, this will give you links that are red, underlined and bold.  NOTE: This only covers 1 STATE of links, the resting or regular state.  We need to go one step further and define the HOVER state and the VISITED state.

a.hover
{
font-color:#ff6600;
font-decoration:underline;
font-weight:bold;
}

When on hover, the link will turn ORANGE.

a.visited
{
font-color:#000000;
font-decoration:underline;
font-weight:bold;
}

After the URL has been visited, it will turn BLACK.

That is a very basic beginning to CSS.  Sign up for our UPDATES and we’ll notify you when we post more on the CSS tutorial series.

Ok, here’s a coding tutorial that will help you open a NEW window when a link is clicked, but it will give you several OPTIONS of what you want to do with that window. For example, maybe you want to RESIZE the window - that is what I often find is necessary.

First off, the code will look like this:

As you can see, the TEXT for your link is ‘Click here to open this popup window’.

Now, the javascript is telling the link that when someone clicks (onclick) the window opens (window.open) and then the stuff after that is describing it. Please note that all the the attributes are separated by commas and no spaces!

Now, keep in mind that there are a BUNCH of things you can do to this link. These are called ‘attributes’. Here is a list of the most popular:

Window Attributes

Below is a list of the attributes you can use:

Width=300
Defines the width of the new window.

Height=200
Defines the height of the new window.

Resizable=yes or no
Can the user resize the window.

Scrollbars=yes or no
Scrollbars on the window.

Toolbar=yes or no
Whether or not the new window should have the browser nav bar at the top (The back, foward, stop buttons..etc.).

Location=yes or no
Whether or not you wish to show the location box (the box where you type in the www…)

Directories=yes or no
Whether or not the window should show the extra buttons. (what’s cool, personal buttons, etc…).

Status=yes or no
Window status bar at the bottom of the window.

Menubar=yes or no
Menus at the top of the window (File, Edit, etc…).

Copyhistory=yes or no
Copy the old browser window’s history list to the new window.

Ok, that’s it. Keep in mind that if you do not define (list) an attribute, it will typically default to NO.