Today we will be working on three things:
- FTP file transfer
- Ulmer Assignments
- An Introduction to CSS
Setting Up an FTP Connection with BlueHost
FTP (file transfer protocol) is a program/application that allows you to connect to a web server. It facilitates moving a large number of files all at once (which is really necessary since the BlueHost file manager only lets you move one file at a time).
I recommend using FileZilla. Not only is it OS agnostic and free, but also it is supported by BlueHost.
Once you have downloaded FileZilla, you will want to go into BlueHost and find the FTP button from the top navigation. Scroll down to the bottom of this page (ignore the create FTP account) and find the Special FTP Accounts section. Click on the Configure FTP option on the right side of the screen.
Hopefully you see something like what you have above. Next, you will want to click on the FileZilla FTP Configuration File link. This will download a file.
Next, hop onto FileZilla and select “import” under the file menu, importing the file you just donwloaded.
Finally, under “File,” select Site Manager and you should have the option of connecting to your BlueHost server. You can now move files and folders from your computer onto the server in one drag.
Let’s Talk About MEmorials
Talkie Talkie Talkie.
A Brief Introduction to CSS
First, let’s play around.
While I can’t be sure what will come out of our discussion of MEmorial assignment sheets, I hope that we get to the point where we realize that a MEmorial is a series of images or web pages that explore something. What I don’t want: a 6 page paper cut into a series of text-based pages with a standard navigation system.
What I do want: I want you to make me a website that is not a website and is a MEmorial but is not a memorial. Got it?
I can think of three basic ways you might organize this thing.
Method One: Screen as Canvas. For this method of organization, each page would be static. It might have a background image and some text. It might have an image and some text juxtaposed. The text might be in different locations in every page. Perhaps one word per page is a different color, and that is the link to the next page. In this case, your MEmorial might end up being 20 or 30 pages, each with a different thought/image/purpose. rotating between 4-5 different CSS sheets. Or, if you are struggling, you could create one CSS sheet for the whole thing.
Method Two: Vertical scroll. Normally I would condemn this as boring, but I have become a bit enthralled with the new vertical “parallax” designs. The dynamic elements of these designs are complicated, but you don’t need to do them dynamically (having stuff move) to create the effect (having different background images on top of each other).
Here’s a NYT example of Parallax in action.
Here’s what looks like a pretty elementary introduction to parallax design
Method Three: Horizontal Scroll
Here’s a classic example of the technique.
Here’s a snippet of Kristen Gay’s mystory project.
Here’s a tutorial for creating a side scrolling design (involves some easy-to-borrow javascript)
Here is another (and seemingly simpler) tutorial
