Samples
Samples Page: -1- • -2- • -3- • -4-
iFrames • Images with Shapes • Apture • Facebook Fan Page Info • Rotating Photos •
This is an example of an iFrame showing a PDF document.
iFrames allow you to insert dynamic content into a website via a floating frame box. The iFrame can point to a specific web URL or a PDF document.
In this example, I used the following code:
<iframe src ="http://web.sajoba.net/iFrame/iFrame_sample.pdf
" width="341px" height="262px"> <p>Your browser does not support iframes.</p>
</iframe>
I also used CSS to customize the look of the iFrame and add the caption.
Okay, I confess to cheating a bit here. Sure, I could probably do this in Photoshop, but I mask my images in Keynote (Apple iWork -->Keynote) using a white background. I add the border and shadow, then take a screenshot (Command + Shift + 4) and then take the screenshot into Photoshop and optimize for the web.
This photo of Chenonceau, a chateau in the Loire Valley of France, is 104 kb. It took me all of three minutes to create it and that is including the time to write this explanation. This technique obviously works well on sites with white backgrounds, but with a little forethought could work for others as well.
On a side note, I consider visiting Chenonceau, one of the highlights of my life. It is stunning!
Return to Top
Explanation -- Apture lets you embed multimedia into your websites. Here is the Help page for Apture.
Say I want to add some of my photos from our land in Coffman Cove or view a map.
View My Saved Places in a larger map.
I simply create a link to the photo gallery (MobileMe) and then use the AptureEnhance class to enhance the link.
Adding Facebook Info to Your Website
First you go to the Facebook Fan Box Widget page and select the options you want. Then it is a simple matter of copying the source code and adding it to the page where you want it to go. I also created a div to contain it and send it to the right side of the page with a custom border.
People visiting your website can then become a Fan of your Facebook page. This works well for a business or organization.
The biggest problem I have run into so far is getting the text to be long enough to hold the div in the correct area....still working on that one. The size will vary as different posts appear on your page. Playing with the div settings helped.
I did have to tweak the FB code and add a height setting. I then edited my div to be 25px longer.
Facebook Photo Badge
Go to the Facebook Photo Badge creation page. Choose your settings, copy the code and paste it into your webpage.
There are Profile Badges:
Sally Jo Eberhart | Create Your Badge
There are also Photo Badges which randomly select some of your photos. I have not yet figured out how to choose the photos I want. Maybe they will randomly rotate. Right now I am seeing the Oregon Ducks football game, the Apple team in Barrow, and polar bears in Kaktovik. We'll see if they change.
<--Previous Next-->