So, here is the back-story. There is a Firefox extension called Greasemonkey which allows the user to build a library of scripts that change web pages. They automate tasks, and creating a script for Greasemonkey is much easier than writing and publicizing an extension.

Apparently there is now a script called Netflix Download Links which automates the long process of finding, hacking, and downloading a Netflix streaming movie.

DISCLAIMER: Download these movies at your own risk. This is a questionable process as you pay for the service, but are still violating copyright laws. In addition, it is possible to get your account banned for this. Don’t come crying to us if this doesn’t go well.

Now that we’re past that little bit, let’s get in to the details. You DO have to have a subscription to Netflix to do this. The script claims that it works on all platforms, but if you’re using Vista it is reported to have problems. The non-windows user will need to set the variable "IAmRunningWindows" to false, and you’ll still need a Windows machine or a Windows emulator to remove the DRM. For more help with this, you might want to look through the comments on the article that I heard about this from.

The most basic of all layouts is the one column layout. It has a small navigation above the header, a header, a navigation below the header, the content and the footer. This is a perfect design for a small organization or church, or a site where you don’t need a sidebar, or you have a lot of static content. I use a one-column layout on my personal site http://www.gorgefamily.com/alec and it works great!

We will make a fixed width version for this but you can make it fluid if you want.

Okay, let’s start with the basic tags.


<div id="wrapper">
<div id="top-nav"></div>
<div id="head"><h1>This is the header</h1></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

The wrapper allows us to center the content and get some separation from the top with the following CSS.


#wrapper {
width:790px;
margin:auto;
margin-top:15px;
}

What this does is it makes with entire website 790px wide and it centers it on the screen. This allows the page to be viewed at all popular resolutions. What the margin:auto part does is the browser renders a object with a margin that is the same on each side, thus centering it. Now let’s fill in some sample content:

<div id="wrapper">
<div id="top-nav">
<a href="#">Test Link 1</a><a href="#">Test Link 2</a>
</div>
<div id="head"><h1>The <span>header</span></h1></div>
<div id="nav"><a href="#">Test Link 1</a><a href="#">Test Link 2</a></div>
<div id="content">
Lorem ipsum dolor sit amet...
</div>
<div id="footer">Copyright blah blah blah</div>
</div>


The post gets really long after this so here is a break. Read the rest of this entry »