Thursday, November 29, 2012

Make a FilmMaker Website

I was given the task to produce a website for a friend of mine, local film producer Nicki Chavoya.  She wanted something that was simple, but had a few key features.  She wanted it to have all of her videos, in a list on the side, like a column.  And then she wanted some background images to flow along.

So I took to the internet, researching the one thing that really made the site unique.  The background slide show.  After testing and examining some code items, I found some applicable CSS that I made a few adjustments to serve the purpose of giving her website the background that she wanted.

Here are the details for the CSS.  It basically runs a series of files saved in a separate folder.

Remember that the phrase ../ means the directory before.  So if this file is

Site/Css/style.Css

and it needs to direct the image from the folder

Site/Slideshow/

then it needs to back up one directory (../) and then enter the /Slideshow/ directory to access the slideshow files.
That's why the code reads: url(../Slideshow/5.jpg)

This is the only real tricky piece of code necessary to get the script to run.  If you want to download it and make your own, the two files you need are this one, and this one.  You need to save those files as .CSS files in the proper folder, and then create another folder with the slideshow files saved as an ordered number of .Jpg images.

What's next after that?  Well not much really.  You can play around with the code to see what else you can do to make it more interesting.  A few other neat parts to this particular piece of code?

  • It resizes the image to the shape and size of the window
  • It also will rotate images the same way on any iOS device
Go ahead and try making one for your favorite local filmmaker.  I even made one for my friend Jimi.




No comments:

Post a Comment