iWebUnlimited.com » Video Tutorials

Video Tutorial – Comments in iWeb

iWebUnlimited — Wed, 12 May 2010 16:50:58 +0000

Are you hosting your iWeb site on your server? That means that you can’t use the built in comments feature in iWeb. It only works if you have a MobileMe membership. Well here comes iWebUnlimited to the rescue. Now you can get comments into iWeb no matter who your hosting your website with. Just follow the steps in this video and your set!

If your doing the iFrame way use this code below to create a blank HTML page:








Comments

If you found this video helpful, please consider donating to the iWebUnlimited cause by clicking here.

Video Tutorial – Photo Swapper

iWebUnlimited — Thu, 29 Apr 2010 18:36:24 +0000

Photo Swapper HTML Image Viewer in iWeb.

This adds a little image swapping viewer in iWeb. Just follow the steps in the video tutorial.

Here is the snippet code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Expanding Photos </title> <style type="text/css"> img.mini {border:none} /*no border around left column images */ div#minis a img.big {height: 0; width: 2; border-width: 2} /* hide the big image by making its height and width 0 */ div#minis a:hover img.big {position:absolute; top:18px; left:120px;height:400px;width:500px;border:none} /* make the big image appear in the same space as the frame at right when the visitor hovers over one of the image in left column */ #frame {position:absolute;top:16px;left:118px;height:355px;width:480px;border:none solid grey;font: 1em "Trebuchet MS", Verdana, sans-serif;color:grey;padding:10px} /* create an empty frame so that visitors expect something to go there */ p {margin-bottom:30px} /*add bottom margin to p elements so that they are (roughly) aligned with the big image frame */ </style> </head> <body> <div id="frame"> <p>My cool text that is there when no image is. </p> </div> <div id="minis">  <p> <a class="photo" title="Paradise with Palms"> </p>  <p> <a class="photo" title="Panda at the Zoo"> </p>  <p> <a class="photo" title="Viva Las Vegas"> </p>  <p> <a class="photo" title="iJason in Paradise"> </a> </p> </div> </body> </html>

Then just replace the items as outlined in the video to your images URL’s, and your Titles, and your set.

This was a video answer submitted in by an iWebUnlimited fan. You can submit your own questions in for a video answer under the “Video Tutorials” tab and click Video Answers or just click here.

Video Tutorial – Meta Tags in iWeb

iWebUnlimited — Wed, 10 Mar 2010 20:31:57 +0000

Need a little more help in the search engine war with your iWeb site? Well this tutorial will show you how to add Meta Tags to your iWeb pages.

Meta Tag Code:

Description:

Your site description here. Don't go over 150 characters."/>

Keywords:

your, keywords, here, seperated, by, commas, don't, do, more, than 7, to, 10, keywords"/>

Author:

Your Name or Company Here">

Video Tutorial-Highslide in iWeb

iWebUnlimited — Sun, 21 Feb 2010 22:53:54 +0000

Highslide JS is a great way to get that ever so popular image zoom effect just like the fancy zoom post I’ve done in the past. The difference is, is that this one will give you the ability to zoom more than just images. Though FancyZoom is a bit more light weight, there are some great advantages to Highslide. This tutorial will need the use of an HTML editor like Coda, Espresso, Dreamweaver, even TextEdit. You’ll also be using the tips page for the code reference and download which can be found here.

Video Tutorial-Manage Multiple Sites

iWebUnlimited — Sun, 21 Feb 2010 09:34:25 +0000

So your iWeb is getting pretty packed with pages and multiple sites and maybe even your band asked you to create a website for them and you don’t want to combine it with all your personal webpage files in iWeb. How do you create a whole new iWeb file and jump back and forth between your sites. Well this video shows you all of that. You can have as many iWeb files as you’d like. iWeb has no file>open option so learning this trick will help you make multiple sites and be able to jump between them as you please.

Video Tutorial-FancyZoom in iWeb

iWebUnlimited — Sun, 21 Feb 2010 09:31:45 +0000

FancyZoom in iWeb, huh? What’s that. Well there are a many websites these days that have that popular image zoom effect so that when you click on the image it animates the photo larger. Well many have asked, how can I do that with iWeb? Well here it is, this is the tutorial to show you just how to do that. Keep in mind this one is a bit more complex, but it can be done without getting your hands to dirty in code.

Video Tutorial-Using Keynote for Graphics

iWebUnlimited — Sun, 21 Feb 2010 09:29:15 +0000

This tutorial shows you how you can use Keynote from the iWork family to enhance the graphics in iWeb. Take a look.

Video Tutorial-Hot Spots in iWeb

iWebUnlimited — Sun, 21 Feb 2010 09:26:11 +0000

This tutorial will show you how to make different parts of your image clickable. Great if you want each head of a family photo to go to a different page, or a sports team photo, or many other possibilities.

Video Tutorial-Flash Video in iWeb

iWebUnlimited — Sun, 21 Feb 2010 09:02:34 +0000

Trying to get flash video into iWeb eh? You can’t bring it in like you do a regular flash .swf file. Flash video extension is .flv and it can’t work without some sort of .swf player to go with it. This video shows you some tricks to get flash video into iWeb. There are quite a few different options and this tutorial will show you how to get your flash video in iWeb in many different ways.

Here are the steps below:

VIEW DEMO »

Step 1:

Get video you desire to be a flash video and convert it to .flv format if it’s not already.

How do I convert my video to flash video you ask?

Well there are a number of different ways. You are going to need one of these converter below:

Adobe Media Converter (comes with CS4 or Flash Video Encoder from CS3)
Visual Hub (no longer in development, but if you got it while it was out, lucky you)
Aimersoft Video Converter ($65)
Perian QuickTime Plug-In + QuickTime Pro (Perian is free, QuickTime Pro is $29)
SoThink FLV Converter ($45)
FFMpegX (Free, but it requires some external file installations, they make it a little difficult to get, so here it is made easy by me. Click here to download the app and here to download the extra files. Your welcome ;-). You can get instructions and more info on the software here. After you open the .dmg file and drap application to your app folder and launch the app it will ask you to locate 3 files to add onto it. They are the ones I provided. I would recommend moving them to home folder/library/application support/ffmpegx (you’ll make this folder)/put 3 files here that were in the .zip folder here. Then in the FFMpegX App you’ll know where to find the 3 files to install and they’ll be in a safe place where no one will touch them. Hope that makes sense. If it sounds to complex, just go buy one of the other converters above to make life easier for you.)

Which ever converter you use, just convert that video file to a .flv format. So in a nutshell, step one is convert video to .flv

Step 2:

Download the Longtail Video JW player by clicking here»

You’ll be downloading a .zip file. Double-click to open and inside you will see 2 files; one called “player.swf” and the other “swfobject.js”. We will need these files to make this work. So now we should have a total of three files

Our .flv flash video we converted in step one
player.swf file
swfobject.js file

We just need to do one more thing and we’re ready to roll

Step 3:

We’ll need to have an image that will sit there until the user decides to click play. So just export out a frame of your video.

It might be easier to go back to your original video to export out the frame. You can do this in QuickTime pro, iMovie, Final Cut, and many other apps. Or if you want to make it simple, just play your video, stop it on a frame that you would like to be your hold image and do a screen shot. You can do a screen shot by pressing “command + shift + 4” on your mac, then draw a box around the frame of video your holding on. When you let go you’ll have a new .png still frame on your desktop. We are going to use this to be the video preview.

You should now have four files. Fyew. These are all the files we need and we are ready to roll. So we should have these four files

Flash Video (our .flv video we converted in step one)
“player.swf” (file we downloaded in step 2)
“swfobject.js” (file we downloaded in step3)
Preview image (file we created in this step. You should name it preview.png)

For file size reasons you may want to open that image you created in step 3 in the application “Preview” and choose file>save as and save it as a jpeg image and bring the image quality down a bit so that the file loads quickly on the web. Just a suggestion, if you have photoshop you could choose file>save for web and size it down that way too. You can use a .png file or a .jpeg file for this

Step 4:

Now put those four files (.flv, .swf, .js,(.png or .jpeg)) onto the server, meaning your iDisk or your own ftp server. If your using MobileMe I’d recommend making a folder called flash in this location: iDisk/Web/Sites/flash/put 4 files here. Just make sure you have these 4 files on your iDisk or server all all will be well.

Step 5:

Almost done. All we need to do now is use the below code in an html snippet and replace the items in red with our own server path names.




This text will be replaced

Just replace the items in red with the path that goes to your files on the iDisk replacing the appropriate names to point to the right place. So be sure to put in your MobileMe username and your correct flash video name (yourflashvideo.flv) and your preview image (myimage.jpeg or myimage.png). Also be sure to adjust the width and height of your video with the 2 numbers that are red in the code. Once it’s all updated and you have all your links pointing to the right spot, hit “apply”.

Done!

We now have flash video in iWeb successfully! Yay!

Hope it wasn’t too complicated for ya. Just do it a couple times and you’ll have it down in no time. There is a video I made that will walk you through this too if you’d rather look at that. Just got the Video Tutorials section and it’s all about flash video.

Note: You can use Longtail Video JW Player on your site for free as long as your not selling anything, have ads on your site, etc. If you are doing those things you need to purchase a license. It’s €30 (Euro) which is about $41 dollars. You can purchase a license here»

More Notes:

If your wanting to customize the JW player, they have a nifty little embed code creator that you can tell it what paramaters you want to be set. Click here to go to it.

Video Tutorial-Menu Navigation in iWeb

iWebUnlimited — Sun, 21 Feb 2010 08:58:16 +0000

This tutorial will show you how to get more advanced navigation in iWeb. Navigation such as custom rollovers, drop down menus, and more. It’s the ultimate tutorial on getting a new navigation that goes far and beyond what the default is offered in iWeb. It’s a must see for any heavy iWeb user.

Video Tutorial-iFrames in iWeb

iWebUnlimited — Sun, 21 Feb 2010 08:47:36 +0000

This tutorial from iWebUnlimited.com will help you learn how to add a website to go inside of your website in iWeb. Very useful if you want to load a page into iWeb, such as putting in a form, your facebook page, myspace page, etc. Use this tutorial to show you how.

Video Tutorial – Flash in iWeb

iWebUnlimited — Sun, 21 Feb 2010 08:35:53 +0000

This tutorial will show you how to get files created with Adobe Flash (.swf) into iWeb. By using a little code.