or more importantly:

click here to download SharePoint Designer for free (registration required).

There were some questions in the comments and also maybe the instructions weren’t quite clear, so I’ve made a screencast showing the entire process.
 

Sorry for the bad sound quality. I’ve had trouble with microphone, so thanks to Audacity I didn’t need to record again. Below you can see the video screencast published on YouTube (Strange, MSN Video didn’t want to process it). If you want to see the video in better quality (not sound) and with Table of Contents, click here (17 mb streaming flash, 9 minutes).
 

But there is another online service for modifying your pictures that I believe is also very good: It’s called Picnik. You can find it on www.picnik.com.

There are some really nice features:

1. You don’t have to signup or register to upload and edit picture
2. Lots of basic tools like Auto fix, Rotate, Straighten, Crop, Resize, Fix exposure, Sharpen, Red-eye removal, …
3. Lots of effects for your photos

4. You can put texts, shapes, frames on the images
5. You can edit curves and color levels (for premium version only)
6. lots and lots of other stuff
7. If you want to experiment with the tool, it has some sample images for you to try the tools
8. It can connect to Flickr, Picasa, FaceBook and other online photo services, or you just upload your photo

Below is a sample that I made in just a couple of minutes using auto fix, exposure fix, rotate-straighten, added shape, text, some radial effect and drop shadow border and resized image:

I recommend you to visit the site and try it yourself.

I’ve tried and this functionality can be applied to all the lists and used in a data view. Let’s go in order.

To reorder the list go to _layouts/reorder.aspx?list={list_guid} in the same site. If you don’t know the list guid, go to list settings and replace listedit.aspx with reorder.aspx. You’ll go to the interface to reorder items in that list:

 
The change will not be visible in SharePoint’s AllItems.aspx page.
 

To sort items in the data view according to ordering you just made:

With data view inserted to the page the first thing we need to do is add the order field to the data view fields. To do this click the list name in the task pane Data Source Details. 
 

Next click button Fields, find and select Order in the left column and click Add.
 

Click OK to confirm the changes and close the Data Source Properties dialog by clicking OK again. Now you select data view Sorting (in Common Data View Tasks select Sort and Group) and you can choose Order. If you can’t find Order in the dialog box, click the last option (Add Sort Expression) and click Add.
 

In the next dialog box, you can select Order from the fields.
 

Now confirm all the selections by clicking OK to close all dialog boxes.

That’s not all. Now it’s sorted according to order number, but the XSLT is taking this like a text. So we have to fix this. In source code, find <xsl:sort select="@Order" and add a data-type="number" parameter to it.
 

That’s it. Now you have items sorted according to the ordering you’ve made.

What I usually like to add to the data view is a link to reorder items. Just add a footer and in the footer add a hyperlink to the reorder page (the one mentioned at the beginning).

1. To read the cookie value and use it as a parameter:

Open the properties pane of the XSLT Data View and select Parameters

Add a parameter, name it as you wish, and in the Parameter Source select Cookie. In the next field enter the name of the cookie which to read and again you can enter a default value.

And you can use the parameter value as you wish – for filtering, conditional formatting, as content in the dataview, etc.

2. But how to set or manipulate Cookies?

The easiest way to set a cookie value is with functions I’ve found on QuirksMode. I’ve contacted the author but got no reply so I’ll dare to publish the JavaScripts here. I repeat again: these are the property of QuirksMode. I use the functions below to set, change value or delete cookies 

Set or change value of a Cookie:

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = “; expires=”+date.toGMTString();
    }
    else
    var expires = “”;
    document.cookie = name+”=”+value+expires+”; path=/”;
}

Delete cookie:

function eraseCookie(name) {
    createCookie(name,”",-1);
}

To put the above example into practice. In a DataView I’d be reading a cookie named ShoeSize and use it as parameter $Size in a data view. To set the value of a cookie for example to M I’d use a function:

<script type=”text/javascript”>createCookie(‘ShoeSize’,'M’)</script>

If the third parameter is not supplied the cookie is active only as long as the browser is open. To change a cookie value to S and to be valid for 3 days, I’d use

<script type=”text/javascript”>createCookie(‘ShoeSize’,'S’,3)</script>

When I don’t need the cookie anymore, I just use <script type=”text/javascript”>eraseCookie(‘ShoeSize’)</script>.

Using cookies to pass parameters between pages has its benefits, like – you don’t complicate with codepages, long URLs, you can pass the parameter between more pages than one, etc. But you can’t pass the parameter with cookie between sites. For this I’d recomend QueryString.

An improvment in performance was immediate. And then suddenly a baloon pops up from my system tray explaining that there are solutions to my Vista problems (format? ). Desiring the better performance I follow the link and download the update. For all here’s the link to KB article from which you can download the update for 32-bit or 64-bit Windows Vista.

http://support.microsoft.com/default.aspx/kb/941649

After installing the patch and restart – the difference is obvious. Performance is better.

The best performance improvement I notice is that my SharePoint Designer crashes immediately instead of freezing for 2 minutes first :-)

1. Mouseover DOM inspector v. 2 – MODIv2

This thing is pure JavaScript, DHTML and CSS so you really don’t need anything else for inspecting a DOM of a certain page. All you need is to bookmark a link on the help homepage:

And then go to the page you want to inspect the DOM, and next just call the script from your favourites.

And you’re already exploring the DOM.

It doesn’t contain as many tools as the previously described toolbars, but it’s a very good solution for quick start and instant DOM inspection.

1. Web developer toolbar for Mozilla Firefox

It offers quite a wide array of tools for web developers, such as ruler, css validation, DOM explorer, etc.

It has a nice feature when exploring DOM – it displays all the parrent elements – so you can see how any element is nested.

A neat add-on to that feature would be to be able to pause the selection and view the nested DOM, since there are a lot of times too many nested elements and the text goes out of the screen.

2. Firebug

A good combination of both – ie and firefox dev toolbar, it has very good tools for debugging HTML, CSS and JavaScript. What I like about it is that you can select the elements and it automatically also selects the HTML. And to manipulate the HTML, JavaScript and CSS in real time is very easy.

What I like about it is that it is easy to use, it has ability to monitor, debug and execute JavaScript, it helps with visualising some of CSS properties, and its toolset is nicely organized and easy to use. On the image below you can see how easy is to manipulate HTML in real time.

The problem of displaying too many nested elements is solvet neatly with a simple solution: the elements are ordered in opposite sense – it displays nested elements from right to left – instead of html > body > … div it displays div < … < body < html.

These are some neat tools that may make your life easier. I recomend using them all together because you know what headaches the IE/FireFox display compatibility can cause

You can help yourself a bit with javascript:alert() or by viewing code, but there are tools to make your life as a web developer much easier:

1. Internet Explorer developer toolbar

This tool is a super add-on to Internet Explorer, with which you can easily explore the dom elements and their properties simply by mouse over and click.

Some screen shots

It has lots of other neat features like visual display of class and id info, outlining certain elements, disabling styles, images, clearing temporary files, etc. I especially like the color picker and the ruler, enabling you to select colors or to measure width or height of anything directly on the screen!

Color picker

Ruler

After a while I’ve found a great site, which not only offers animates gifs, but actually you can generate the loader alone, selecting the foreground, background and style of the preloader.

Click here to get (generate) your preloader image.