Creating a Picture Gallery and Thumbnails

Document Sample
Creating a Picture Gallery and Thumbnails Powered By Docstoc
					Week two handout/FrontPage class spring 05


Creating a Picture Gallery and Thumbnails

Almost everyone has photos that they would like to display on their
websites, whether it be family photos or just some hobby photo's that
you have taken and Front Page makes this SO easy with the auto
thumbnail option and the Photo Gallery Component.

Let’s make a new page and call it Picture Gallery. First open a new
page. Click File and then Save As to save the page and a new dialog
box will appear. Enter the name PictureGallery in the box next to
where it says File Name.




Once you have entered the page name PictureGallery, then click the
Change Title button just above that and a new dialog box will appear.
(Fig.fpwk3_10) Enter the Title you want the page to be, I simply called
mine Picture Gallery. Notice that in the title you can include spaces.

Click ok once you have it entered and then Save to complete the
saving operation. Your page should then show as being named
PictureGallery.html with a Page Title of "Picture Gallery" (or whatever
you named it)




                                                                          1
Week two handout/FrontPage class spring 05




If you don’t know what a title of a page is, the Page TITLE is what will
appear in the upper corner of anyone's browser that browses your site
and the name of the page is what would be part of your actual
address. If your website domain name is http://www.mytripodsite.com
then by naming the page PictureGallery.html, that would appear as
part of the actual address for that page like this:

             http://www.mytripodsite.com/PictureGallery.html



Ok, now we are going to create some thumbnails. Front page offers
you several different options for displaying your images, you can
create an attractive professional looking gallery in no time at all. You
can choose from four styles, arranging your pictures horizontally,
vertically, in a montage style or even in a slide show.

Find the images you would like to include in your gallery and place
then in your images folder within your web. You can create a new
folder for them if you would like to keep them separate from the rest
of your web graphics.

We have several options to choose from, you will need to decide which
is appropriate for you. First click the Insert option from the menu,
then choose Web Component, a new dialog box will appear with your
options.




                                                                           2
Week two handout/FrontPage class spring 05




Click on each of the options and read the description.

As you click on each option on the right you will get a description of
what each one has to offer (or not) some offer captions, some don't,
one is a slide show. Choose the one that you think would be of most
interest to you and let's play around with it ! Be sure and read the
comments at the bottom as you click each option on the right for a
better idea of how each FrontPage gallery will display your images!
Once you have decided click the option and a new dialog box will
appear asking you where to locate the images from.




                                                                         3
Week two handout/FrontPage class spring 05




Click the Pictures Tab if not already selected and then just below that
you will see an Add button, Click the Add button to start selecting
your images to be placed in your gallery. To select more than one
image at a time, hold down the shift key while selecting the images.
Once you have them all selected click OK, and they should appear in
the box.




                                                                     4
Week two handout/FrontPage class spring 05




On the far right you can set your images to show thumbnails, Front
Page will automatically create a link then for you to the FULL size
image so that your page doesn't take as long to load since it is only
displaying the thumbnails instead of the full size images. Set the size
to whatever you like and be sure and place a check in the Maintain
Aspect Ratio box or else your pictures will come out distorted and all
funny looking. (Fig.fpwk3_23) If you don't like the arrangement/order
that your images are in, simply click the image and then click the
Move Up or Move Down buttons below the image list.

The next section of the Photo Gallery Properties box allows you to
set your font attributes for the captions of your photos (if applicable).
You can choose to use the existing page fonts which you could have
already set if you are using a CSS to format the page, if not you can
click the second option and choose the font, color etc from the options
listed.

The Slide Show option offers a description below the FULL size image
of the picture instead of beside the thumbnail like the others. The
Montage only offers the caption text as you mouse over the
thumbnail image. I have selected the Vertical layout for simplicity
but I encourage you to experiment with as many of them as you like!
Have some fun with it and play around !

If at anytime you change your mind about the layout and want a
different one, it's simple as can be, click the second tab in the Photo


                                                                          5
Week two handout/FrontPage class spring 05


Gallery Properties box- Layout and from there you can easily
switch your selection to any of the other available options.

Auto thumbnails-

Now if you don't want to mess with an entire gallery and have just a
few images that you would like to display on your page there is
another simple way to do this with Front Page. Front Page has an
option called Auto Thumbnails, which will automatically create the
thumbnails for you and link to the full size image!

First thing, find a photo of yourself or if you are not comfortable
posting a photo of yourself, find one of your pet or someone or
something that you care about because you are going to write a short
paragraph to go along with the picture too! <g> This is will also give
us the opportunity to learn how to align our text with our images and
how to set up some space between the image and the paragraph of
text.

First we need to decide about what size you want your thumbnails to
be. Ideally, a thumbnail, IMO shouldn't be any larger than 100-150
pixels wide. To do this we need to go to Tools>Page Options and
then click the Auto Thumbnail Tab. You will then see your options for
setting your thumbnail sizes and different methods of displaying them.




                                                                       6
Week two handout/FrontPage class spring 05


If you want you can set your thumbnail to have a beveled edge, you
can set a border and set the thickness of the border. (The border color
will be the default color of your page font) Choose the settings that
suit you best and then click ok.

Make sure that you have the image you want to use saved to the
images folder within your current web and then place your cursor at
the beginning (left) side of your paragraph as shown here. Click the
Insert Image>From File

Find the Image that you want to insert and click insert. Image should
appear whatever size it is. Hopefully, larger than 125x125! Click the
image and the Image Toolbar will appear at the bottom of the
screen.




(If it doesn’t, go to View/Toolbars/Pictures)

Aligning Text with Images

Click the thumbnail image again, then Right click it and choose the
Pictures Properties from the Pop up box that appears. You should
already be at the Appearance Tab, if not click the Appearance Tab
to select it. In the center-layout area, click the box for the drop down
list and choose the Left Option from the list. This will align your image
with your text.

Here is where you can also add space around your images, as it is
right now, your text will go right up next to your image and IMO it
looks better if you have a little space between your text and your
image. In the same Layout Area of the Picture Properties box, just
to the right of the alignment you will see the Horizontal and




                                                                        7
Week two handout/FrontPage class spring 05


Vertical Spacing.




Now, one more little trick regarding images like this when we are using
thumbnails to open to a larger image before we move on. When you
have thumbnails that open up to a larger image it is always nice to
have them open in a Separate window so that your visitor doesn't
lose the page where they originally were at, especially for new users
that get confused easily! Front Page makes this simple to do to. If you
were coding by hand you will use the <blank> tag, thus making the
image open in a new window. To do this in Front Page, go back to your
image on your "about" page and Right click the picture again, choose
the Picture Properties and the Picture Properties Dialog box will
appear again.

Click the General Tab, then in the Default Hyperlink section, next
to where it says Target Frame, click the little Pencil looking item and
a new dialog box will appear. Click on Common Settings/New Window
and under Target Setting, the word _blank will appear showing that
it will open that particular link in a new window instead of the same
window that you or your visitor is currently in.


                                                                      8
Week two handout/FrontPage class spring 05




*TIP* If you place a check in the box below the Target Setting
where it says Set as page default then all the links on THAT page
will ALL open in a new window.




                                                                    9
Week two handout/FrontPage class spring 05




                                             10