Warning: count(): Parameter must be an array or an object that implements Countable in /homepages/42/d191189227/htdocs/snakeye2/wp-includes/post-template.php on line 284

Warning: count(): Parameter must be an array or an object that implements Countable in /homepages/42/d191189227/htdocs/snakeye2/wp-includes/post-template.php on line 284

The birth of this website goes hand-in-hand with my experience of coding html and websites. So basically my experience is pretty limited. But over the year I’ve had this website, I have built up a little bag of tricks that I like to use to beautify it or do some cool things. The thing I hate is when I want to do something and I know exactly what the outcome should look like, it usually takes me a day of research and with possibly a few extra days of fiddling until I get the results I want.

I’ve liked Limey’s website as an occasional reference for Photoshop tutorials. I’ve really grown to like using Photoshop as my choice picture editing or picture making (like my “Snakeye’s Frag” theme at the top of this website). Much of what I’ve learned from Photoshop comes from Limey’s research that he posts. Since I’ve done a little research myself on website coding, I figured I’d dedicate a “quick reference” post on the coding tricks I’ve learned over the year.

Centering images, objects and text

The easiest code that I use extensively when posting pictures or other objects is:

This is useful for when you just want to center the image or object up without throwing it in the text somewhere. I’ve always preferred my pictures centered up instead of off to the left like they default to. Pretty much any post that I’ve written and included pictures will show you examples of this.

Adding an mp3

The next thing I learned (mainly from Astro) is how to add songs or other MP3 files to the site. This uses QuickTime to play them at the user’s request. I like doing it this way because I can’t stand websites that just play music as soon as they pop up. It’s annoying. I’d rather be the one to play it if I feel like listening to it. So here’s the code to add an MP3:

An example of this can be found here.

Adding video

Adding video is a little more complicated, and may require you to spend a little extra money if you don’t have the right software. The main way you display videos through the internet is in the Flash format. If you happen to have Adobe’s Flash software, then that is all you need. But for those that don’t have $600 lying around to buy it, you have to find a way to convert your videos into a flash format. As far as I know, Windows Movie Maker (that comes with Windows) only makes WMV or AVI videos… not the FLV format required for the method I use.

The program I bought was $40 from Moyea. It allows you to take any video format (or even download it from a camcorder) and convert it to FLV. Not only does it convert, but it also allows you to play with the settings to make the file size somewhat reasonable (it’s pointless to throw up an HD-quality video on the internet that takes up a gigabyte of space). Anyway, with WordPress, I added the “FLV Embed” plug-in. With that plug-in and my converted FLV video file, this is the code I use:

Ensure you replace the {} brackets with [] brackets. For some reason, the window wouldn’t allow me to display the [] brackets; I think it may be the plug-in trying to make the video work. Anyway, the 400 and 300 represent the size of the video in pixels. So obviously you can change this to make the video play on a larger or smaller screen. An example of this can be seen here as well.

Moving Images

This one is actually pretty easy. Just use Adobe Photoshop on a series of pictures, and if you save it as a GIF (instead of JPG) it will allow you to animate the serious as one image. An example can be seen here.

Mouse-over Images

This is an easy way to put up a picture or button that changes when your mouse cursor is over it. You really need to make two different pictures of the same dimensions. Once you have those made and uploaded to your website, this is the code to make it happen:

Obviously, if you don’t want it to be a link (ie, you don’t want it to be “clickable”) then take out the “href=xxxxxxx” code. For pictures, this can be very useful to reveal something or show the changes between the pictures (example here). For buttons, you can even jazz it up a little bit and make the hover image a moving GIF animation.

Those are a few of the techniques I use to jazz up a post. Hopefully, those of you that keep up with this site and have sites of your own will find this a little useful. If not, well at least I have a quick-reference for myself.

Tagged with →