Creating a Class Knowledge Base--wiki posts on technology, troubleshooting, skill-building

From WRIT-2510 Spring 2007 Wiki

Offer a tutorial for a neat trick that you have discovered or taught yourself using someone else’s hints or troubleshoot something that you did not find easy to accomplish. This type of post could highlight a variety of technical skills--how to implement some of the CSS hacks or fixes from Cederholm’s text, how to do something we haven’t learned in our in-class workshops (fancy tricks with Photoshop), how to include audio, video, or anything else you did that you thought your peers might benefit from knowing how to do. You will need to come up with a title for your post that explains what it is you’re going to teach, some short directions geared to your primary audience—your class colleagues and me, and some images that help walk us through the process. Since writing itself is one of the skills you’ll be developing and improving in this course, you may also use this type of post to discuss strategies you found helpful for your writing. You may refer to Lanham’s text and include samples of your own work demonstrating how you’ve incorporated his or someone else’s techniques. You might also discuss your experiences visiting the Center for Communication Practices (in Folsom Library) or you could try using an online writing tutorial or centers at another university. You might try Virgil at University of Texas’s Undergraduate Writing Center, for example.

You should add your responses to this "article" by clicking on the edit tab at the top of the page, and then using two equal signs (title of your entry, your name) two more equal signs to create a "subsection." You should title your response appropriately and also put your name in the title, so you receive credit for completing your assignment. Each new subsection will have its own "edit" tab. To respond to someone else's comment, you should click on it, hit the "edit" tab that will appear to the right of it, and then use three equal signs (add a title and your name) three equal signs to create what should simulate a threaded discussion. You should use double brackets and the title of the main article to create a "category" which should be put at the end of your response, this way all responses to the same prompt will be grouped together. We'll see if this works. If you discover a method that works better, then we can reassess how we want to organize our conversation here, but let's give this a shot for now.

[edit] "Layer Style Your Text in Photoshop" by Kenny Johnson

Do you want to make cool looking text in an image using Photoshop? Then look no further! I am going to tell you how to use Layer Styles, as opposed to Rasterized Text, to make great looking words that you can even re-write when you're done - something you can't do if you Rasterize your text! To start, your text might look like this image below:

Uh oh, you forgot to capitalize World Wide Web! Don't worry about it for now, I'll show you that you can fix this mistake even after adding a Layer Style. An important thing to know is that you CAN NOT re-type text after you Rasterize it. If you try to run filters on text, Photoshop will prompt you to Rasterize the text layer, but it's unnecessary. You can make your text look great using Layer Styles instead. After you've typed some text, select your text layer and press Layer -> Layer Style -> Blending Options...:

Feel free to play around with the menus that pop up! By putting a checkbox in any of the categories on the left, you'll add a gaudy style to your text. You can add a Drop Shadow, Outer Glow, and even emboss the letters. Take it easy with the options, it's very easy to overdo it and make your text look ridiculous!

If you click on any category label to the left (I have Outer Glow selected in the image above), you'll see advanced parameters that allow you to tailor your Layer Styles to your preference. Under Drop Shadow, for example, you can set the angle at which the "light source" is causing a shadow to be cast, and you can adjust the distance and spread of the shadow from your text. The most useful option I think is Opacity - turn it down to make your Layer Style effect more subtle.

If you're satisfied with the way your text looks, you're done: you've created a Layer Style! But don't forget, you have to capitalize World Wide Web in your text! If you had Rasterized Text, you would be in trouble now because you CAN'T retype Rasterized Text. This is because "Rasterize Text" essentially means "turn my text into a picture". Photoshop will turn your text into pixels that you can modify like a photo, but you'll be unable to backspace and fix text without starting over from scratch.

Voila, with Layer Styles you can easily rewrite World Wide Web with capital W's! If I wanted to, I could even change the Font Size, Font Type, and more, just by editing the text as usual. In conclusion, use Layer Styles, NOT Rasterized Text, to make your text look amazing in Photoshop!

[edit] Response to Kenny Johnson's "Layer Style Your Text in Photoshop" by Chris Jaeger

Kenny's tutorial is quick and to the point, helping you realize how to fix texts without actually rastersizing. I remember before I learned layer styles, the problems. This also applies to auto-shapes, as well, so if you're drawing paths and other fun shapes, remember that not rastersizing the clipping mask makes editting a lot easier. Rastersization can be saved for when you finish. Note that merging layers will automatically rastersize any text and shapes! For a bit of an expansion, also consider two of the very useful Blending Options. These are useful both for text and for shapes. One is "Stroke", this follows all paths in the layer with lines. You can set the colour and pixel width. For text, this will basically outline all the letters. For shapes, any paths (such as the circumference of the circle) are marked, and this is how you can actually make simple circles that have a coloured fill but black outline! The other one is demonstrated at . This is the Color Overlay option, which lets you place a colour over all aspects of a layer. For something like unrastersized text, this is all the text, but in the example picture, I'm colouring an entire layer. The key trick is to choose "Color" as the blend mode for the color. Otherwise, it'll just solid fill the layer. In this example, I've coloured the wings.jpg, pictured above the version I copied and placed a sepia tone over it (you can achieve the same ol' feel with #e1d3b3 as the color) These two features have saved me hours and combined with Kenny's tutorial I think you'll find they'll help you a lot as well.

[edit] "Fully Functional CSS Image Rollovers/Links, No JavaScript!" by Andrew La Padula

This article will teach you how to make a standard image rollover effect. There are somewhat advanced elements of CSS discussed here, but everything has been explained in fairly easy terms. If you are still confused or are not sure about anything presented in this article, feel free to ask me questions in the response section or in class. Hopefully in the coming weeks the CSS will start to not look so foreign and understanding it will be a breeze.

What Is An Image Rollover?

An image rollover is just what it sounds like - when you "roll" your mouse over an image, the image changes into a different image. This is also commonly called a "hover" effect and also an "image swap." Here is an example at http://www.dynamicdrive.com - their top banner is using a rollover effect for the navigation buttons.

Image rollovers are everywhere on the Web. And with good cause: these effects add a good amount of interactivity while being comprised of just text and images. The most common image rollovers are done by using JavaScript. However, I assume most people here do not know how to code JavaScript (and do not want to go to a site that will simply generate some scripts for them) and it would also be much more efficient if we could make the effect using simple HTML code and not need to call to JavaScript functions. CSS will guide our path - here’s how it's done.

*Note Well: the Wiki did not like some of my formatting when putting HTML right onto the page, especially with the < div > and < table > tags. Whenever you see tags that have spaces in them, there would normally not be spaces in between the greater-than/less-than signs (i.e. < a href="..." > would always be <a href="...">).

A Simple Image Rollover

First, you will need the two images that you want to swap. I have made a simple “About Me” image and another that I want the user to see when they hover their mouse over the first.

(n.b. the tiny red border is just to indicate that the images are separate)

Each image is 100 pixels wide and 40 pixels high. The key to this CSS trick is to combine the images into one big image. You can set them anyway you like, but I find right next to each other left and right or top and bottom to be the simplest. I have done mine top and bottom, like so:

(n.b. the tiny red border is jut to show that the images are now combined into one image)

We now have one big image that is 100 pixels wide and 80 pixels high. In CSS, we can not only set individual backgrounds for each "container" element (like a < div > box or < table >) on the page, but we can even switch the position of the image around thanks to extra parameters like the hover tag. In short, when the user first loads the page, we will set a < div > element to show the “About Me” image starting from the top-left. Since we can control the height and width of the < div > box, we will make sure the image cuts off midway down and only shows the first black and white "About Me" part (the width will be set to 100 pixels while height will be set to 40 pixels). When the user hovers their mouse over the image, however, we will tell the code to switch the position of the image and start displaying from the bottom-left. Again, since the width and height of the < div > box containing the image are controlled, we will make sure that this time only the bottom part of the image (the blue and white) is shown.

You can click the following link to see it in action: CSS Image Swap

And here is the code to do it:

This is the CSS information you need:

   .aboutme {
     background: url("aboutme.jpg") top left no-repeat;
     width: 100px;
     height: 40px;
     display: block;
   }
   .aboutme:hover {
     background: url("aboutme.jpg") bottom left no-repeat;
     width: 100px;
     height: 40px;
     display: block;
   }

This defines the "aboutme" class. The "dot" before "aboutme" tells the browser that we are creating a class called "aboutme" (a class is a "codename" that you can reference to in your HTML document multiple times and the browser will know to use the parameters defined here in displaying your code). Any containing element that references this class will have the properties that are listed applied to it.

The first .aboutme is the default setting and what is displayed when the page first loads. Here is what the code is doing in each step:

1. "background:url("aboutme.jpg") top left no-repeat" - sets the background image (which has been uploaded in the same folder as my index page and is called “aboutme.jpg”) of the containing element and tells the browser to start showing the image from the top-left and not to repeat it.
2. "width:100px" - sets the width of the containing element to 100 pixels.
3. "height:40px" - sets the height of the containing element to 40 pixels.
4. "display:block" - tells the browser to display the containing element as a “block.” This ensures that browsers will render the image in light of nothing else being in the container element to “anchor” it to the page. You can check my note on this at the end.

The second .aboutme which has the :hover command attached to it will be what shows when the user hovers their mouse over the image. It first sets the background image, which is again “aboutme.jpg”, but this time it shows the image from the bottom-left, again without repeating it. Then it similarly sets the width, height, and tells the browser to display the containing element as a block.

(n.b. all individual parameters must end with a semicolon ";" and all parameters for a class must be contained in curly braces "{ }")

That’s it for the CSS, which would all be located in the <head> part of your .html document. Now let’s look at what goes in the <body>.

 < div class="aboutme" >< /div >

That’s it! Here's what's going on in the code:

1. "< div >" - this is a container element (similar to < table >) and can divide your page into separate areas of any width or height that you choose. We want to place our image into this element to separate it from other things that would eventually go on our page (like a main text area).
2. "class="aboutme" - this tells the browser that for this particular < div > element, we want the properties that are defined by the "aboutme" class to be applied. The browser now knows that for this box, it should display the "aboutme.jpg" background image, set the width to 100 pixels and the height to 40 pixels, and display as a block.
3. < /div > - this simply closes the open < div > tag. Since we have already defined all of the properties of the box in our CSS section, we do not actually have to put anything inside of the < div > tags!

And there you have it - a fully functional image swap with no JavaScript. Just one line of body code will get your image to display and rollover properly. Here is the link again to the .html page and also to the entire source code:

CSS Image Swap

CSS Image Swap - Source Code

I Want My Image Swap To Be A Hyperlink, How Do I Do This?

This is actually very simple if you have been following along. In the CSS, we will put an "a" in front of the class declarations. We do this because we want to tell the browser that all hyperlinks (i.e. <a href>) in the element need to to use our CSS parameters. Additionally, we will not call to the .aboutme class in the < div > tag but instead in a <a href> tag that will be used to make the link.

The CSS would look like this:

   a.aboutme {
     background:url("aboutme.jpg") top left no-repeat;
     width:100px;
     height:40px;
     display:block;
   }
   a.aboutme:hover {
     background:url("aboutme.jpg") bottom left no-repeat;
     width:100px;
     height:40px;
     display:block;
   }

and the <body> like this:

 < div >
   <a href="YOURLINKHERE.html" class="aboutme"></a>
 < /div >

It's as easy as that. You can check it out here: CSS Image Swap w/ Hyperlink

And view the source code here: CSS Image Swap w/ Hyperlink - Source Code

In The Real World

Image swaps take on all sorts of forms and can be pretty graphic intensive, but the code behind them is roughly the same. Here is quick example that shows a sample page layout using CSS image rollovers for the navigation bar with the banner above. Notice that the code is all very similar, just repeated many times for all of the images.

Link to the example: Example

Source Code: Example - Source Code

(n.b. this code also uses the “float:left” parameter to make sure that all of the images line up next to each other correctly – you could similarly do “float:right” for right alignment or none for a vertical menu)

That's Everything!

Feel free to use this code and simply change the class names, image names, and widths and heights so you can have a nice, interactive navigation menu or other rollover feature on your site. And if all this sounds too complicated for most, by the time we get to CSS in the weeks ahead it should feel pretty familiar.

* A note on “display:block” – Whenever a container element is opened on a page (like < div > or < table >), a browser generally needs something (like text or an image) in between the tags so that the container element will actually be displayed. If you wrote code to make a division on your page (i.e. < div style="width:500px” >< /div >) but do not put anything inside of it, it will not display. Similarly, if you only set a background for it (i.e. < div style="width: 500px; background: me.jpg" >< /div >), again, it will not display. Even with a background, the element still needs some data inside of it to “anchor” it to the page. A block display does just this without making anything else visible (blocks can, however, be set to have a border of any width and color, we are just not setting these parameters because we want it to be transparent). So by telling the browser to display an element as a block, it knows to render the container element and potential background image even though no data is actually inside of the element. Hope this clarifies what the code is doing.

[edit] Response to Andrew La Padula's "Fully Functional CSS Image Rollovers/Links, No JavaScript!" by Cory Anderson

I found this tutorial to be a very useful and a simple solution to rollovers. Not only is it simple, but the files are very small so it makes for fast loading, unlike a lot of JavaScript solutions. I recommend going through this tutorial even if you already know how to make different types of roll-overs, because I think this is a very good solution to rollovers. Just add a few lines of code to your CSS page and then you’re done. Andrew does a good and clear job of explaining the steps so it is easy to follow. If you plan to do any web design in the future, it is best to learn CSS because it will save you loads of time in the future, especially if you’re working for a company, or on big web projects. CSS will cut your work time in half.

[edit] ”Adding Flare with Rollout Menus, Javascript-Style” by Eric Wyler

Please note: I originally intended this to be a tutorial, but looking at the complexity of the Javascript it is essentially impossible to explain this to the required degree of understanding in an acceptable amount of space. I'll leave everything here, but remember this is more a throw-yourself-into-Javascript than a tutorial.

Rollout Menus

People like menus, so why not make them look cool? A well-implemented rollout menu has all of the visual and eye-catching advantages over a simple menu without a negative impact on usability. Rollout essentially means that the menu slowly appears as it unrolls itself next to a parent element, usually whatever the mouse is currently over.

In order to do this, we’re going to need:

1. A parent HTML element that will spawn the submenu
2. A separate HTML element that will act as the menu
3. A bit of javascript that will align and set the CSS properties of the parent and menu to what we need
4. A bit of javascript that will handle the animation

NB: The Javascript used here is quite a bit past the introductory level, but I'll walk you through it.

Define the parent element

Any element that supports the onmouseover and onmouseout attributes will work. For this example I’ll use a div. This will force us to use absolute positioning, which is appropriate since menus such as this usually slide over content of some sort.

<div id="menuParent" onmouseover="this.setFocus(true)" onmouseout="this.setFocus(false)"
    style="width:200px;background-color:red;">
    Mouse me!
</div>

I’ll explain the onmouseover and onmouseout code when we get to the Javascript.

Define the menu

Like the parent, this element needs to support the onmouseover and onmouseout attributes so that the javascript code can be notified to do things. The contents of this element can be whatever you desire.

<span id="menu" onmouseover="this.setFocus(true)" onmouseout="this.setFocus(false)"
    style="width:200px;height:200px;background-color:blue;">
    <ul>
        <li>Thing 1</li>
        <li>Thing 2</li>
        <li>Thing 3</li>
        <li>Thing 4</li>
    </ul>
</span>

Set up the Properties

We need to absolutely position the menu, and we also need to align it with the parent element. In Javascript, that is done with the following:

var parent = document.getElementById("menuParent");
var menu = document.getElementById("menu");

menu.style.position = "absolute";
menu.style.left = parent.offsetLeft + parent.offsetWidth;
menu.style.top = parent.offsetTop;
menu.style.clip = "rect(0px 0px 200px 0px)";

I can't explain all of the constructs of the Javascript language, but basically we're setting the position of the menu to "absolute" (so we can move it around), putting it next to the parent, and then clipping it so you can't see any of it.

Implement the Rollout/Rollin

Here's the fun part. First off, the statements this.setFocus(true) and this.setFocus(false) in the onmouseover and onmouseout attributes are making a call to a Javascript function, saying that either the current element (that's what the this keyword is for) has the mouse over it, or it doesn't (the purpose of true and false). Let's write and assign a setFocus function:

// First make sure that the hasFocus properties for the both the parent and menu elements
// are set to false (since your mouse is initially outside of them).
parent.hasFocus = false;
menu.hasFocus = false;

var setFocusFunction = function ( hasFocus ) {
	this.hasFocus = hasFocus;
	if (parent.hasFocus == false && menu.hasFocus == false) {
		clearTimeout(timer);
		rollMenuIn();
	} else {
		clearTimeout(timer);
		rollMenuOut();
	}
};
parent.setFocus = setFocusFunction;
menu.setFocus = setFocusFunction;

In the function, what we're doing is updating the focus of the element that has called this function, and then we are either rolling the menu in or out, depending on whether or not the parent/menu has focus. If neither one does, the menu rolls in, otherwise, it rolls out. timer is a global variable that is used in the rolling functions:

function rollMenuOut() {

	rightClip = validateClip( rightClip + 10 );
	applyRightClip();

	if (rightClip < 200) {
		timer = setTimeout( "rollMenuOut()", 10 )
	}
}

function rollMenuIn() {

	rightClip = validateClip( rightClip - 10 );
	applyRightClip();

	if (rightClip > 0) {
		timer = setTimeout( "rollMenuIn()", 10 );
	}
}

Oh boy, right? These two functions are very similar; the only difference really is that one lessens how much we can see while the other increases it. Clip is what is used to change how much you can see of the menu. In this application, the rightClip is basically where the cutoff line is from its left side. For this example, the menu is 200 pixels wide. If the right clip is 100 pixels, then you can only see the the left half of the menu. validateClip is needed for technical reasons to make sure that the clip is a legal value. After we change and apply the clip, we test to see whether the menu needs to roll in/out further. If it does, set a timer to call this function again in 10 milliseconds. It's called setTimeout because once it calls the function, it doesn't do it again in 10 more milliseconds (it "times out").

That's the main brunt of the code. The final source can be found at http://rpi.edu/~wylere/W4/javascriptFlare.html . For technical reasons, there are a few things in there that I didn't touch on here simply because they were way out of the scope of this article. Also, a variable here and there may have been moved around from how I presented the code here, but it still works the same way. Feel free to use this code if you'd like.

[edit] "JavaScript-free Rollout Menu" by Ryan Bobrowski

The following instructions will allow you to create a menu similar to Eric's, without the use of JavaScript. The advantages are that it only uses CSS, and it is slightly less flashy. The disadvantage is that it does not maintain that cool JavaScript effect that can be seen here (http://rpi.edu/~wylere/W4/javascriptFlare.html). However, if you want something that is easy to code and simple in presentation, then this one is for you.

• • • Please note that to make this work in Internet Explorer 6 or below, some JavaScript is required (it should work for all other browsers without JavaScript)

The first thing you will need to do is create an HTML file and a CSS file. I named my files "menu.html" and "menu.css". You can also embed your CSS into the HTML document if you want, but I will use an external file for this example. Now you will need to link the CSS file to that HTML document. To do this, use the following code in menu.html:

<html>

<head>
<link rel="stylesheet" type="text/css" href="menu.css" />
</head>

<body>

</body>

</html>

Make sure that both files are located in the same folder, or this will not work. The next step is to set up your menu. To do this, you are going to need to use the 'ul' and 'li' tags, which stand for 'unordered list' and 'list item,' respectively. My menu will include four main items, which will be movie genres. There will be 3 sub-items within each main item, which will be movies in that particular genre. These sub-items will be links. Here is the code to set up the movie menu:

<html>

<head>
<link rel="stylesheet" type="text/css" href="menu.css" />
</head>

<body>

<div id="menu">

<ul>

<li>Action
<ul>
<li><a href="#">Die Hard</a></li>
<li><a href="#">Terminator 2</a></li>
<li><a href="#">300</a></li>
</ul>
</li>

<li>Western
<ul>
<li><a href="#">The Good, the Bad, and the Ugly</a></li>
<li><a href="#">Unforgiven</a></li>
<li><a href="#">High Plains Drifter</a></li>
</ul>
</li>

<li>Comedy
<ul>
<li><a href="#">Dr. Strangelove</a></li>
<li><a href="#">Groundhog Day</a></li>
<li><a href="#">Animal House</a></li>
</ul>
</li>

</ul>
</div>

</body>

</html>

Note the 'id' attribute in the div tag. This is the identifier that will let the CSS file know which div we are talking about. Also note the pound sign (#) after all of the 'href' attributes of the 'a' tags. In your code, just replace those #s with the link of the page you want associated with that item.

Now for the CSS. Open your menu.css file, and insert the followind code:

#menu 
{
width: 120px;
}

#menu ul
{
list-style: none;
margin: 0;
padding: 0;
}

#menu li     //[pound-sign]xxxx signifies an 'id' - remember the id="menu" in the html code?  
{
margin: 0;   
display: block;
color: black;
background-color: #E3CF57;
border: 1px solid black;
font: bold 14px Verdana;
position: relative;
}

#menu li:hover
{
color: #990000;     //The color the font of the main items will change to when hovered over with the mouse
}

#menu a
{
display: block;
padding: 2px 2px 2px 2px;
text-decoration: none;
color: black;
}

#menu a:hover
{
background-color: black;
color: white;
}

#menu ul li ul
{
position: absolute;     //This line and the following 3 lines align the rollout items next to the main items
top: 0;
width: 100%;
left: 100%;
display: none;     //When the menu is not activated, the sub-items will not appear
}

#menu ul li:hover ul
{
display: block;     //When an item is moused over, the sub-items will appear
}

Now, you might have entered all this code and still have a non-working menu. The reason for this is because you are using Internet Explorer. Unfortunately, in this case JavaScript is necessary. Download the required JavaScript at http://www.xs4all.nl/~peterned/htc/csshover2.htc and save it in the same folder as your other files. Enter the following code in between the 'head' tags of you HTML file to call that file:

<!--[if IE]>
<style type="text/css" media="screen">
body {behavior: url(csshover.htc);} 

</style>
<![endif]-->

The tags are actually special comments that act as conditionals read only by Internet Explorer. Using these tags allows for fixes just like this one. Now, when you rollover the desired item, the sub-items will pop out just as they do in any other browser. There may be positioning and alignment issues with the IE menu, but you can always add some CSS inside your conditional statement to alter these attributes without affecting other browsers.

Here is a link to a working menu: http://rpi.edu/~bobror/menu.html. If you have any questions, pleas email me at bobror@rpi.edu.

[edit] Response to "JavaScript-free Rollout Menu" by Eric Wyler

Ryan does a great job here of exemplifying one of the most interesting aspects of software development (and most development in general), and that is variety. There's More Than One Way To Do It, acronymed as TMTOWTDI and commonly pronounced "timtoady" in the software development industry, is commonly heard and can, interestingly enough, be interpreted in more than one way.

In the most obvious sense, variety is good, right? Doing something one way requires one thought process, while the other way may require an entirely different approach. These different thought processes can then spawn bouts of creativity that would otherwise have been missed given a restriction on the methods of design. On the other hand, though, variety makes things difficult for a wide variety of people to understand quickly. There are committees devoted to defining standards for all kinds of things (e.g. IEEE, W3C) for the exact reason that people don't want to waste time learning something new when they shouldn't have to. So, what gives? How do you choose a side? Well, you can't really. You just have to figure out your current goals and probably future ones and go from there.

Referring to above, Ryan's method of a menu is, as a whole, less complicated than my method. It is accordingly less error-prone and it is very unlikely to have any bugs associated with it; there simply aren't that many things going on that can go wrong. Also, for the most impatient of users, the menu appears right away without any "rollout" effect that may hinder your ability to read its contents. From a developer's perspective, Ryan's method is also more straighforward because you don't need to include yet another programming language in your HTML; chances are you're already using CSS. Finally, since some people fear security issues will arise with Javascript (possible, but very unlikely), they disable Javascript, thus removing all animation from the menu in my script. Alas, it is never this simple, though. What if, in the future, you wanted to add a rollout or similar effect to the menu? As of right now (as far as I know), there is no way to do that in CSS. You would end up having to do extra work now, because you would need to write Javascript code to do everything you're doing now in CSS, plus add the new code to do the special effects. If you aren't using dynamic pages, then you'll have to add a line to import the Javascript file into all of the pages on your website that use the special effects.

As you can see, choosing your tools for development is a delicate process of balancing resources, needs, and wants, both current and future. Predicting the future is hard enough, even when you have millions of dollars of equipment and thousands of people working on it (e.g. weathermen), so don't get discouraged if you make an early design decision that turns out to be suboptimal; it happens all the time. Seriously, we'll be reading an article soon called "Why Software Sucks," and while it doesn't specifically touch on all that I've mentioned, it brings up many good points, the main one being that its hard to predict what the customer will want. Technology is complicated, and so is its development, so just be patient, relax, talk out loud (I'm serious, even to a wall; it does wonders), enjoy the variety, and relish in the fact that the very thing that make us human is our imperfection.

[edit] "A List of Very Common CSS Commands" by Andrew La Padula

What follows is a list of some of the most commonly used commands in CSS. You can use this list as a reference if you need help coding your CSS or have forgotten which attributes can be applied to specific keywords. Feel free to edit and add to this list if you think there are important items that others will benefit from using.

Another excellent reference is the W3C's style site: Web Style Sheets. This site has everything you would ever need to know about CSS.

The format for the following commands is:

• keyword
  • keyword's function
  • values that can be assigned
  • example

FONT DEFINITIONS

• font-family
  • Denotes typeface.
  • Arial, Verdana, Times, Serif, Sans-Serif, etc.
  • p { font-family : arial; }
• font-style
  • Denotes the style of the text.
  • normal, italic, small-caps, oblique
  • p { font-style : italic; }
• font-size
  • Denotes the size of the text.
  • pt (points), in (inches), cm (centimeters), px (pixels), % (percentage)
  • p { font-size : 20px; }
• font-weight
  • Denotes text presence.
  • extra-light, light, demi-light, medium, bold, demi-bold, extra-bold
  • p { font-weight : extra-bold; }
• text-align
  • Justifies the alignment of text.
  • left, center, right
  • h1 { text-align : center; }
• text-decoration
  • Applies extra visual styles to text.
  • italic, blink, underline, line-through, overline, none
  • a { text-decoration : blink; }
• text-indent
  • Denotes margins.
  • in (inches), cm (centimeters), px (pixels)
  • p { text-indent: 1in; }
• word-spacing
  • Denotes the amount of space between words.
  • pt (points), in (inches), cm (centimeters), px (pixels), % (percentage)
  • p { word-spacing : 10%; }
• letter-spacing
  • Denotes space between letters.
  • pt (points), in (inches), cm (centimeters), px (pixels), % (percentage)
  • p { letter-spacing : 2pt; }
• text-transform
  • Denotes a transformation of the text case.
  • capitalize, uppercase, lowercase
  • p { text-transform : uppercase; }
• color
  • Denotes color of text.
  • black, white, red, green, blue, darkblue, orange, yellow, brown, pink, purple, or any Web color code, such as #000000 (which is black)
  • a { color : #000000; }

MARGIN/BACKGROUND DEFINITIONS

Note! When used with the "body" tag these commands affect the entire page!

• margin
  • Denotes space around an element.
  • pt (points), in (inches), cm (centimeters), px (pixels)
  • body { margin : 1px 5px 6px 1px; } (the order is top, bottom, right, left - notice no commas or semi-colons)
  • body { margin : 0px; } (will set all four to the same value)
• margin-right, margin-left, margin-top, margin-bottom
  • pt (points), in (inches), cm (centimeters), px (pixels)
  • p { margin-right : 5cm; } (individual sides get just one value)
• line-height
  • Denotes space between lines of text.
  • pt (points), in (inches), cm (centimeters), px (pixels), % (percentage)
  • p { line-height : 150%; }
• background-color
  • Denotes background color.
  • black, white, yellow etc., or any Web color code
  • body { background-color : #000000; }
• background-image
  • Denotes background image.
  • Specify the image you want through that image's URL.
  • body { background-image : url(images/background.jpg); }
• background-repeat
  • Denotes how the image will tile.
  • repeat-x (horizontal), repeat-y (vertical), no-repeat
  • body { background-repeat : repeat-y; }
• background-attachment
  • Denotes how the image will react to a scroll.
  • scroll, fixed
  • body { background-attachment : fixed; }

POSITIONING/DIVISION DEFINITIONS

• position
  • Denotes the placement of an image or a division of the page.
  • absolute (specific placement), relative (relative placement to other elements)
  • img { position : absolute; }
• left
  • Denotes amount of space allowed from the left of the browser screen when positioning an item.
  • pt (points), in (inches), cm (centimeters), px (pixels), % (percentage)
  • img { position : absolute; left : 20px; }
• top
  • Denotes amount of space allowed from the top of the browser screen when positioning an item.
  • pt (points), in (inches), cm (centimeters), px (pixels), % (percentage)
  • img { position : absolute; top : 200pt; }
• width
  • Denotes width of image or page division.
  • pt (points), in (inches), cm (centimeters), px (pixels), % (percentage)
  • div { width : 500px; }
• height
  • Denotes height of image or page division.
  • pt (points), in (inches), cm (centimeters), px (pixels), % (percentage)
  • div { height : 100px; }
• overflow
  • If the item is too large for the height and width specified, this tells the page what to do with the overflow.
  • visible, hidden, scroll
  • img { overflow : hidden; }
• z-index
  • Denotes an item's position in the layering structure. The lower the number, the lower the layer. An image marker with a 20 would go overtop of an image marked with a 10.
  • Specify by number.
  • img { z-index : 10; }

Putting It All Together

Try combining some of these CSS elements and changing the variables. Start with values that affect the whole body, then work with ones that affect indivual elements, like images, div boxes, or paragraphs. Here's something to start with:

 <style type="text/css">
 body {
   background : darkblue;
   margin : 0px;
 }
 a {
   color : yellow;
 }
 a:hover {
   color : orange;
 }
 h1 {
   font-family : verdana;
   font-size : 24px;
   color : yellow;
   font-weight : bold;
 }
 h2 {
   font-family : verdana;
   font-size : 18px;
   color : white;
   text-decoration : underline;
 }
 p {
   font-family : verdana;
   font-size : 12px;
   color : white;
   line-height : 130%;
 }
 </style>

[edit] Making Money On The Web (Or A Dummy's Guide To Advertising Methods) by Matthew Fyffe

Once you’ve made a web site and promoted it enough to gain visitors, a new problem comes to the forefront: money. Running a site costs money, be it for monthly hosting, domain name costs or advertising to gain visitors. So how can a web site turn from a money sink to a steady source of income? Developers today can choose between Cost Per Mille (CPM) ads, Cost Per Click (CPC) ads, Cost Per Action (CPA) ads, and text links. Here is a run down of what each type of ad means for a developer.

Cost Per Mille(CPM): Also known as impressions ads, these are ads in which a host is paid a certain amount per 1,000 impressions of the ad. Typically in the form of a banner, these ads are designed to get a services name out or to lure visitors via a more colorful presentation. The return rate for these services vary tremendously, with high-end selective services like Tribalfusion paying on average $7 per click and 2nd-tier services like burstmedia and cpxinteractive offering closer to 10-30 cents per 1,000.

Cost Per Click(CPC): These ads are different from CPM ads because they only generate revenue when they are clicked. However, because a click means the user was successfully led to the advertised site, rates are typically higher with these ads. The main distributors of these types of ads are Google’s Adwords and Yahoo’s Search Marketing. Various advertisers bid on keywords with the different advertising companies and have their ads appear as links on user’s sites in the order of highest bid. The ads are typically targeted towards the site they are advertised on, based upon the keywords relevant to the site and the keywords relevant to the advertiser. Revenue per click varies significantly based upon the keywords used.

Cost Per Action(CPA): Cost per action ads are known as affiliate ads because your site acts as a direct dealer for another site. Rather than be paid to advertise a service like CPM ads or for getting sites visitors like CPC ads, CPA is similar to acting like a salesman. Many online stores have a feature in which web sites can sell the stores products through their site and receive a commission based on the amount of people who buy the product based on the reference. The companies that offer these services range wildly and include Amazon, Snapfish and Genius Babies. These types of ads typically work well when the audience of the web site has a clearly identifiable interest.

Text Links: These are typically done in a less formal manner than the other methods of advertising. Rather than being done through a middle-man, text links are typically done between web administrators. To sell text links, a stub link can be placed on one’s site saying “Your Link Here.” Sites administrators will sell these ads for a weekly, monthly or one-time payment in exchange for a link to the purchaser’s site. Other sites will buy these links in order to boost their rankings on search engines and to potentially lure traffic from the site the link was purchased on. The earnings from these links varies significantly depending on the popularity and page rank of the hosting site.

Potential responses: Experiences with these different types of services, best placement on a web site using these services

[edit] Easily Posting files to your RPI Public Space by David Crolius

All of us have used our public space provided by RPI to post things to the Internet. Many of us follow the directions on the class website telling us to go through \\sambasrv or something like that. There is an easier way to post files though. Below are a series of steps that will illustrate how to easily post to your public space.

To use www.rpi.edu/~rcsuserid

1. Start your internet browser (Firefox, Internet Explorer, Netscape, etc.)

2. In the address bar enter ftp.rpi.edu

3. Press Enter

4. Go to the file menu and select Log-in as

5. Enter your RCS ID and password

6. Open your public_html folder

7. Drag and Drop files into your public_html folder

You should now be able to view your files by starting your browser and entering the address www.rpi.edu/~rcsuserid.

Hopefully this makes it easier to post to your public space.

[edit] Response to Easily Posting files your RPI Public Space by Graham Gordon

These are very good instructions. These will allow people to use a very valuable resource on their RPI webspace.

[edit] "How to Involve Action Buttons into a Presentation" by Jeff Connolly

This section describes how to involve Action Buttons into a presentation. This adds a nice extra twist to a presentation that makes it seem like more time is spent on the presentation and that the presentation is very well organized. It is appealing to someone who is looking at your presentation.

1. Select the second slide by clicking on the second slide in the left window.

2. Select the first text box and change the text so that it reads "Click button in order to proceed to the next slide."

3. Find and click Slide Show on the top menu bar, then click once on Action Buttons, and select the first tiny box.

4. Now click once in the middle of the slide. An action button and a new window should appear.

5. On the new window select the small circle next to Hyperlink to:, then click Ok on this new window. Press F5 on the keyboard to view the presentation.

6. After the first slide has completed its animation, click the left mouse button once to proceed to the second slide. Now, click once on the action button. This should cause the slide show to move to the last slide. Press escape in order to exit the slide show.

[edit] Response to "How to Involve Action Buttons into a Presentation" by Daniel Wong

I think that Jeff has brought up an interesting topic and tool for using Microsoft Powerpoint. In many of the classes we take here at RPI, we as students are required to make presentations to our peers and our professors. From personal experience, no matter how much you prepare for a presentation, the presentation itself is a direct representation of you and the work that you do. Using the feature that Jeff has pointed out, you can now include action buttons that will demonstrate to your audience that you exhibit sophistication and professionalism.

[edit] Response to "How to Involve Action Buttons into a Presentation" by Jeff Connolly by Andrew La Padula

Jeff's suggestion here really helped me out during a final presentation yesterday. In my HCI class, we had to demo our final product and also had movies to simulate some information. Instead of needing to alt-tab or minimize out of the powerpoint in between data, we simply linked action buttons to load the programs for us. I definitely think it made our powerpoint look more professional and it certainly made it easier for us to present to the class. This is very useful for anyone that needs to do a powerpoint presentation in the future, as you could even make "back" and "next" buttons if you wanted.

[edit] Wrap around text in Photoshop by Keve Zoltani

1. Begin by placing your text all on the way on the left side of the page

2. Under the Layers pallete, uncheck "Preserve Transparency"

3. Now we are able to wrap our text, but to prevent the text from looking squeezed together goto GotoLayer, then Transform and finally Scale. Increase the size of the text by half.

4. Select the Marquee tool and hold the shift key while drawing a square around the text.

5. Select toapplyFilter, then Distort, then Polar Coordinates and select Rectangle to Polar.

[edit] "Wrap around text in Photoshop" Response by Robert Augelli

I think Keve hit an excellent topic here. Manipulating text in Photoshop is something that can be very important for a given application. There are many different tools that can be used to help make the text look exactly as you would like in your Photoshop project.

Keve mentioned the Scale tool within the Transform option. The Transform option itself is very powerful. It has many different options that can twist and move text to make it look like it is properly laying on a background image. The options available initially to text just added are:

Scale, Rotate, and Skew

Each of these allow the transformation of text in a specific way. Scale allows you to essentially make the text grow or shrink. Rotate allows you to turn the text on an axis so the text is viewable at a different angle, and skew allows you to distort the text with an emphasis on one side. These options are great, but you will notice that there are two options that are grayed out. These options are:

Distort and Perspective

Distort allows a stronger manipulation of skew on more than one side, and Perspective allows a user to make the text look as though it is going "into the distance" or "into the forefront" of the image. As I mentioned however, each of these options are grayed. These options can only be used on images. However, there is a way to turn your text into an image, allowing you to use these tools. If you right click on the layer that the text is currently selected on, there is an option called "Rasterize." This effectively turns the text into an image, allowing the user to use the Distort and Perspective commands.

There is one catch however. Turning the text into an image now prevents the user from being able to actually edit the text. That is, if there are any typos, or if you want to change the font, it now isn't possible. Therefore, it is very important to make sure that all of the text is checked over, looks proper, and has the right style since these things cannot be changed after the text is Rasterized into an image.

[edit] Web Design Resolution on Thinkpad Machines by Chris Jaeger

When you create web pages, you're probably looking at your own native resolution. 1024x768, 1600x1200, and other high resolutions offerred in the current day and age. But most machines, or more accurately, the most common resolution used, is roughly 800x600. And that is a lot smaller and stretched than what you see in your own native resolution, typically. This usually won't bother you until you are at points that you're producing material for others to view. In picture drawing, you'll be working resolution of images like crazy, but in Web Design you don't often see that directly. Yet, it's crucial in the creation of web pages. People hate side-scrolling. Vertical scrolling is understandable but horizontal is annoying to nearly anyone, so it's important to make sure things are under 800 pixels in width. But how will they actually look when in those small resolutions? If you have a Thinkpad machine, which all RPI students are given, then here's a very convenient item.
By pressing Fn+Space (that's the function key in the lower left, and the spacebar), you will automatically set your machine to 800x600 resolution. Pressing the combination again will reset your resolution to its native state. This is a useful command, as you can utilize it to see how the site actually appears, judge the size and spacing of your text, and revise your site as necessary.
A warning, though. Your desktop icons will probably see a good amount of rearrangement whenever you swap your resolutions back and forth.

[edit] Response to "Web Design Resolution on Thinkpad Machines by Chris Jaeger" by Andrew La Padula

This is a very neat trick that almost everyone in the class should be able to take advantage of (assuming they bought their laptop through RPI). However, only about 14% of Internet users are still sporting 800x600 resolutions while more than 75% are using displays of 1024x768 or higher (according to the W3C's statistics). In some cases you may be designing a site where you know your audience will have screen resolutions greater than 800x600. For this reason, I think the "Resize" feature of the Web Developer Toolbar plug-in for Mozilla Firefox accomplishes the same goal Christ points out but in a much more efficient way and also adds support for any resolution that you, the developer, wants.

For example, if you think all of your users will be using 1024x768 resolution, you can add this resolution to your Resize bar and see how it looks. Additionally, this tool does not resize your entire desktop resolution but only that of your web browser. Thus, the change is instant and does not tamper with any personal settings. You can also set custom resolutions to check like 1000x320 if you so desire.

If you have Mozilla Firefox, you can get the Web Developer Toolbar here: [https://addons.mozilla.org/en-US/firefox/addon/60]

[edit] Using Microsoft Office Picture Manager by Daniel Wong

I have always used Microsoft Office Picture Manager for all my picture needs. It’s a simpler program as opposed to using something like Photoshop. There are two features that I constantly use. The cropping function and the resizing function.

The Cropping Function

1) Go to the toolbar and select “picture” and the crop function

2) Then drag the black corners to size of the picture that you want, leaving out what ever you want to crop out.

3) Click the “ok” button on the right hand side

4) Now you have your cropped picture!

The Resizing Function

1) Go to the toolbar and select “picture” and the resize function

2) You can change the height or the width or just the percentage of the original dimensions

3) Now you have your resized image!

[edit] Response to “Using Microsoft Office Picture Manager” by Jeff Connolly

I think that Daniel has put together a tutorial here that can really come in handy now while working on our projects for class. I know from a recent experience of my trial period of Photoshop expiring has forced me to find alternative ways to crop images. I think that Daniel has demonstrated an easy technique that will benefit anyone without Photoshop and who do not care for paint too much. This will help to improve the quality of work being done on our website projects.

[edit] Free Music for All (College Students)! Ruckus "How To" by Robert Augelli

If there is one thing that nearly all of us share, it is the love of music. Be it rap, rock, folk, oldies, or country, each one of us shares a passion for music that helps us get through the day. Music helps us move through our moods by relaxing us when we are nervous, by energizing us when we need a lift, and by soothing us when we are tired.

This day and age however, music is not so simple, and having legal music is sometimes more of a headache than it may be worth. But if you are so inclined to pursue a legal music downloading service, I will help you set up and use Ruckus.com. This is a free music downloading service available on every college campus.

The first thing to do is to www.ruckus.com. Here you will find a login page. Click the Join Ruckus link below the login information to get started in creating a Ruckus account. Remember, this account is FREE if you have an email address that ends in “.edu!” The screen below is the registration page you should be currently looking at:

Simply fill in the information, making sure to use your school email address and you are ready to start downloading your favorite music legally! Upon finishing your registration, you can go back to the www.ruckus.com page and input your information to log into Ruckus. After doing so you will be greeted with the Ruckus homepage seen below:

Here you can search by Artist, Album, or Song in the upper left. Note that there is no KEYWORD search, so make sure you have chosen the correct search filter or you will not get the correct results. More importantly, when you decide to start downloading music, you will need the Ruckus Music Player to download. You can get this from going to the way upper right and clicking on “Ruckus Player.” You can then install the program and download music. An important note: you do NOT NEED to use the Ruckus Player to sort and manage your music, programs such as Winamp CAN be used. The Ruckus Player is needed to download music and authenticate the music, which must be done every month. In order to do this, go to your Ruckus music player and right click on the song that you wish to re-authenticate. In the menu click “Renew” and wait a few seconds for the song to update. A green key signifies the song is in the process of being updated and when it disappears the process is done. This process can be seen below:

Finally, some important tips; if you would like to transport your music to a compatible MP3 player, you must sign up for “Ruckus To Go.” This costs about $15 a semester. Likewise, this service is only compatible with PlayForSure Subscription MP3 players so check yours to see if it works beforehand. Note that Apple iPods do NOT work with this service. To sign up for Ruckus To Go, simply go to your account page and choose the service.

This is just a brief introduction to the Ruckus service. If anyone has any specifics, please feel free to ask! I have used the service for almost 2 years now and know the ‘ins and outs’ of it pretty well, so do not hesitate.

[edit] Response to Robert Augelli's "Free Music for All (College Students)! Ruckus "How To"" by Marissa Hecker

As a fan of all types of music and an active user of Ruckus, I appreciate this "How To" because I feel all students should know and use the services of Ruckus. It provides a wide variety of music that allows users to browse and listen to music choices that they wouldn’t have necessarily bought or took the risk in downloading illegally. Although the site’s music database is quite large and steadily growing, I can not depend on it to have all the newest music of my favorite artists. Ruckus is good for finding old songs and browsing through genre related artists; but in order to keep up with what is new in the music world, buying music and an occasional file share are the ways to go.

[edit] Response to Robert Augelli's "Free Music for All (College Students)! Ruckus "How To"" by Daniel Jones

Another way to get "free music" that is open to anyone is last.fm. This service is very easy to use. When you sign up to Last.fm it creates a profile of your musical taste by recording the songs you listens to, which comes from either a streamed radio station you are listening to, songs on your computer, or from your iPod. These songs are transferred to Last.fm's database through a plugin that is installed in your music player. This database is considered your radio station and anyone else who is signed up can listen to your station. This service is open to anyone with e-mail. It's a quick process. Sign up at http://www.last.fm/. After you sign up download the plugin and player which can be found here http://www.last.fm/tools/. Once you do that record the songs you want to share with other users. Once signed up you can listen to other people radio stations to see what people are listening to.

[edit] Uploading Pictures and making Galleries on Wikipedia by E. Filipov

Since pictures are a great way to present information, Wikipedia has made it extremely easy to upload, format, and link images. Inserting relevant charts, graphs, and other image files on Wikipedia helps to strengthen claims and make the content more believable.

1.The first thing you need to do is log into wikipedia (or our wiki)

2.Click on the Upload file link in the Toolbox on the left. There you can upload a variety of files including .jpg, .png and .gif in the same way you would attach an email file. However, you first need confirm that the file is not copyrighted, and you need to give your file a descriptive name that hasn’t been used before.

3.Once you upload the file it will be in the Special pages link in the toolbox and you can include it in an article by simply entering

[[Image: coffee.jpg|200px]]

Yields

4.The resizing, floating and formatting images works in a way very similar to CSS, however, the wiki software makes everething a lot easier

5.To change the appearance you can use a vertical line( | )and a command as shown below

[[Image:coffee.jpg|thumb|180px|right|Wonderful Coffee]]

Yields -->

Wonderful Coffee

These are the most common commands

• Right, left, center, none– float image

• Frame – frame picture
• Thumb – make image into thumbnail
• ###px – resize picture
• Any other text will appear as a caption

6.To insert a gallery use the following commands – you can view the illium gallery I created at Team 2.0

<gallery>

Image:descriptivename.jpg|Caption 1

Image:descriptivename2.jpg|Caption 2

</gallery>

Notes:

• Always upload hightest quality image and resize in wikipedia
• Make sure the copyright for the image doesn’t violate the wikipedia rules
• Images are a great way to present your ideas and I strongly recommend using them

[edit] Creating Interactive Web Photo Galleries by Kevin Kelly

I know there are many of you that can spout off code and create interactive flash web photo galleries in a 'flash'. I am definitely not one of those kids. Therefore, I have found probably the easiest way to create web photo galleries with only a few clicks of the mouse. My good friend Corey Anderson 'showed me the light' one fine Sunday afternoon. "So, all the fellas out there with ladies to impress, it's easy to do, just follow these steps":

Step 1

Step 2

THREE: Click OK. Your web album will then be created to your designated folder. Many files and folders will show up in the destination folder. There will be subfolders with pictures and thumbnails from which the automatically created code will draw from. To open the finished product in a browser window, you click on the HTML file. It is very easy to insert a flash object(our gallery in this case) in a webpage that is created in Dreamweaver. To do so, in the design view select the part of the site where you want to add then gallery. You click on the Insert drop-down menu, and then hover over the Media submenu, and finally click on the Flash option. The quick keys are: Ctr + Alt + F. You then select the gallery.swf file that was automatically created in your destination folder. You are then prompted to title your flash object. The gallery is inserted into your page, and you are done.

I found a few poker images on Google Images and made a simple flash gallery that I uploaded to my RPI webspace. For an example of a gallery created in Photoshop, click here. I couldn't have imagined how easy it was to set up pictures that can easily be viewed online. A reason could be that our group spent hours and hours trying to set up a respectable thumbnail image gallery within our site.

[edit] Response to Creating Interactive Web Photo Galleries by Terrence Isabella

Kevin’s piece Creating Interactive Web Photo Galleries is a great eye opener. It highlights one of several terrific features of Adobe Photoshop’s usefulness in web design. Initially, I thought that Photoshop’s only purpose was for manipulating images. Throughout this semester, I have learned that Photoshop has several great features that cater to the development of web pages. Some of these features are the ‘Save for web’ option, preparing graphics for the web, and creating rollover animations. Additionally, the designing web pages feature offers a number of great options such as page design, slices, rollovers, animations, export and image optimization, preparation in Adobe GoLive, and automating the workflow. I haven not had the opportunity to learn how to use all of these great features, but I look forward to it in the future

[edit] How to make buttons in Flash, by Cory Anderson

Document Properties

Rectangle Properties

Symbol Properties

Instance name

Inserting keyframes

Inserting layers

This.button1.OnRelease = function(){ getURL(“http://www.google.com”); }

Once you have this typed out hit ctrl enter, and test your button! Now just save it, and export your button as a flash movie, because then you can put it in a website.

[edit] Create Actions in Photoshop to Kill the Monotony by Terrence Isabella

Actions in Photoshop will allow you to record a series of commands. For example, anytime you have a large number of images that you want to resize and save for the web, create an ‘action’.

First, open one of the images you intend to resize and ‘Save for web’ in Photoshop. Now, go to the menu bar and select Window>Actions. A small window will open with two tabs: ‘History’ and ‘Actions’—select ‘Actions’. At the bottom of this window, select the icon whose rollover reads ‘Create new action’. A new window will open named ‘New Action’ asking you to create a name. Once you have named your action, click record in the upper right hand corner. From this point forward, your every move is being recorded.

Go to ‘File’ on the menu bar and select ‘Save for Web’. A new window will open showing your image. Next, on the right hand side of the screen select ‘Image Size’ and input your desired dimensions and click ‘Apply’. Once you have completed the resizing, select the format and quality you want to save your image as. These options are located just above ‘Image Size’.

Then select ‘Save’, give your file a name in the window that opens (make sure you have opened the appropriate folder for your image to be saved) and select ‘Save’ again. At this point, you have returned to the main Photoshop window. Direct your pointer back to the ‘Actions’ window and at the bottom select the icon which on rollover reads ‘Stop playing/recording’.

Now that you have created your ‘action’ it’s time to put it to use. From the menu bar, select File>Automate>Batch…. A new Photoshop window has now opened entitled ‘Batch’.

Under ‘Play’, select the batch you would like to automate. Next, select ‘Folder’ as your ‘Source’. Click on ‘Choose’ to designate the folder where your images are located. Move down to ‘Destination’ and select ‘Folder’. Click on ‘Choose’ (the one located under ‘Destination’) and designate the folder where your new images should be saved (you may want to create a new folder for your images ahead of time). Using ‘File Naming’, you need to give your images a new a new name to complete the process. Follow the example that is given here and click ‘OK’ at the top of the window. The automated process will now take over. Get yourself a snack. When you return, your images will be saved for the web and ready to be uploaded.

[edit] Using Microsoft EXCEL to sort data by Chris Dromms

This isn't something directly related to building a web design, but a useful feature if you wanted to wuickly organize data in some manner to put on the webpage. This is something that would be useful for something like my wepage team (TNO) that had lots of businesses listed.

To start you put all your data into excel. In my example you could put the name of the business in the first column and the type of business in the second column. Other organizational columns could be added in the same manner as these two.

For my example we can assume that there are 50 businesses of types food, bar, music, and shopping. The businesses are put in the different rows without worrying about how they are organized. The first step in organizing the data will be to select all the cells. Do this by clicking on the first cell and holding and dragging until all the cells are highlighted.

Next go to the data menu and choose the "Sort" option. A box will pop up with 3 ways to sort. The top sort option will be applied first, the second sort will be applied within the first sort. IE, if you sort the first column by name, you can then sort within that letter organization based on type of business. Under the word "sort" there is a drop bown box you can use to pick which column to apply the specific sort to. To the right you can choose whether to sort in ascending or descending order.

Once you hit ok, the data is re-arranged according to the options you picked. In this case, I picked to sort first by name in ascending order, and then by type in ascending order. This provided me with a cleanly organized lift of businesses that I could then import into a business listing on the TNO web page.

I know I didn't use any pictures, but I figured a dialog box was easy to see when it popped up so a picture wasn't required.

[edit] Making the NSBE/SHPE Career Fair Work For You by Marissa Hecker

The Annual NSBE/SHPE Career Fair is held in the fall and with over 150 companies in attendance last year, is one of the largest student run career fairs in the country. The NSBE/SHPE Career Fair has a website, www.careerfair.rpi.edu, where companies are provided with information to make the most of their Career Fair experience at RPI and an opportunity to register. Students also use the site to research registered companies and plan their careers. One of the resources provided for students is the student request form for company recruitment. Here, students can request companies for the recruiting committee to send information to about the NSBE/SHPE Career Fair and invite them to attend.

At this section of the site, a student must input their name and email address and select their major(s). Then the student can make at least 3 recruitment requests that are not already a part of the recruiting list shown.

When all the information is submitted by the student, he will receive a message saying that the request was completed and will be notified when company requested registers for the Career Fair.

[edit] Configuring Gmail Accounts To Use Microsoft Outlook by Graham Gordon

There are a lot of students who use Google's mail service, there are also a lot of students who use Outlook as a tool to receive their email. The configuration of Microsoft Outlook to get my Gmail was a task that took me a significant amount of time. A tutorial to do this could save students some valuable time.

Step 1. Enable POP in your gmail account. You are able to do this on gmail's settings page.

Step 2.

Open Microsoft Outlook

Step 3.

Add a new email account. You will have to click on the "tools" part of the toolbar. There will be a drop down list for you to select email accounts after that. When you click email accounts you will go to a screen giving you the option to add a new account. Select add a new account, then click continue. Choose POP3 as the server type while creating a new account.

Step 4.

Enter your email address, name and other information. The incoming server is pop.gmail.com. The outgoing server is smtp.gmail.com.

Step 5.

Select More Settings and choose my smtp requires authentication. Then choose use the same settings as my incoming server.

Step 6.

Click on the advanced tab button. Make the incoming server 995 and the outgoing server 465.

Step 7.

Test Account Settings. If all tasks aren't completed then go back step by step and find your error.

Step 8.

Use Outlook to receive and send your Gmail.

Gmail also has a tutorial that you can attempt to use if this tutorial cant help you