Web Gallery Assignment

Learning Objective

a beginning developer, you will create a website to effectively communicate to a target audience.

Assignment - Create the following Website

You will build a Weebly website with content of your choosing. You must have the elements listed in the assignment in order to receive full marks for this project.

Access and sign-up on the Weebly website to create a webpage.http://www.weebly.com/

Weebly Tutorials
Weebly Tutorial - How to Sign Up and Set Up Domain Name with Weebly
Weebly Review - The Easiest Way to Build Your Website
How to Use Weebly's Multimedia Elements
How to Use Weebly Photo Gallery Element

Here are some examples of teacher created websites (though they are pretty lame).

Required Website Contents

1. Home Page
A homepage is the the introductory page of a website that usually acts as a table of contents for the site. On this page you should have access to the basic information that is found on your site.

• Decide what your website is going to be about – This is the hardest part! Make it something you are interested in. It could be your favourite band or video game or sports team. It could be about how to do something, such as rebuilding a car or bike. It could be about how to freshwater fishes of British Columbia, or large mammal species of Africa. It can be about anything that interests YOU.

• Choose a design that best fits your needs; photographs personalizes and adds a nice touch to your website.

• Your homepage should include the following information:
     1. What is this page about? What will I find here?
     2. Who is making this page? What is their contact information?
     3. What am I going to learn from this site?

• Create hyperlinks to all the other pages in your website from the home page (this can be done at the end).

2. Links Page

• Find at least 6 websites that are related to your topic. Write a short description (1 – 3 sentences) about what will be found on the site. Create hyperlinks to each of them.

3. Videos Page

• Create at least 5 embedded links to YouTube videos related to your website topic with a short description of each one.

4. Documents Page

• Create at least 1 original document related to your topic. You can use information from other sites but you must list those sites in a references page. http://www.easybib.com/reference/guide/apa/website

• Upload and Create links to at least 3 documents from someone else in a PDF document format.  These can be ANYTHING related to you website.  The only requirement is that they are uploaded in PDF format.

• Upload and create links to at least 2 files that are related to your website topic. Write a brief description as to what the file contains.

5. Images

Create a gallery of at least 10 images. Embed a hyperlink to each image that takes you to the website that the image was take from.

6. Contact Me Page

• Create a page where you can be contacted.

Website Design Rubric

With the increasing popularity of the iPad and iPhone it’s no longer appropriate for most of us to create Flash based web galleries – they just can’t be easily viewed on these devices. If you want almost everyone to be able to see your galleries then you need to create them as HTML galleries and not Flash.

Lightroom has a range of HTML Templates you can use to create a reasonable looking gallery in a very short time.

To make your web gallery in Lightroom start by placing your images in a Collection. This makes it easier for you to work with the images and you can save the gallery so you can edit it in future if needed.

Select your Collection and switch to the Web module. From the Layout Style options, you can select Lightroom HTML gallery or, easier still, from the Template Browser panel on the left of the screen, select a gallery that is HTML based. If you look in the preview area the HTML gallery templates all have the letters HTML in their bottom left corner. Select a template to use.

From the toolbar (press T if it isn’t visible), choose All Filmstrip Photos if you have a Collection selected and this will add all the images to your gallery. What you see on the screen in the editing area is a live version of your web gallery. You can click on any image to view it as it will look on the web.

Open the Site Info panel and type a Site Title, a Collection Title and a Collection Description. If you don’t want to use all of these simply delete the placeholder text for those items you don’t want to use and the space they take up in the template will be freed for use for your images.

For the Contact Info, type your contact name if desired and then complete the Web Or Mail Link and this will be linked automatically to the contact name in the web gallery.

You can add an identity plate to the gallery, if desired, it will sit above the Site Title. You can link it back to your site if desired by completing the Web or Mail Link box.

The Color Palette options let you change the colors for the various elements in the website template.

In the Appearance panel you can set the thumbnail image grid size – it defaults to 3 x 3 and cannot be any smaller but it can be considerably larger. If you want to show cell numbers over the images you can do so – this is useful when you need to give viewers an easy way to identify images they like. Images are numbered sequentially and if you have multiple pages the images on the second page continue sequentially from the numbering from the first page.

You can control the size of the full size image on the Image Page by adjusting the Size slider. You can also add Photo Borders to the images in the Image Pages. Note that the Appearance panel is divided into Common Settings, Grid Pages and Image Pages allowing you to make change that effect the entire gallery, only the grid pages or only the image pages.

In the Image Info panel you can select to add labels to your images. These appear on the Image Page only. You can select a Title which appears above the image and a Caption which appears below the image. For each you can source the text from the image metadata and there is no reason why you can’t set the Title to be the Caption metadata and the Caption to be your Equipment metadata, for example.

In Output Settings select the quality of the larger size JPG images – 0 is low quality and 100 is high quality. If you want to include Metadata with the image select what to include – your choices are Copyright Only or All.

Also add a Watermark if desired. If you select to add a watermark, you’ll see it on the image page and the index pages so you can check to see that it’s what you want.

Select whether or not to sharpen the images – this sharpening is only applied as the images are output so you won’t see it on the screen. If you’re unsure what to use, enable Sharpening and set it to Standard.

When you’re done, click Create Saved Web Gallery – this is a new option in Lightroom 4 and it appears to the top right of the main editing area. Type a name for your web gallery and click Create. Doing this ensures that the gallery is saved and once you have done this, Lightroom will track your changes from now on.

In future you can come back to the web gallery by clicking the special collection that Lightroom creates for you.

If you want to upload your gallery to the web later on, click Export to export it to disk. Otherwise you can upload it direct to your website by selecting the Upload Settings panel and configure your FTP server. For this, you’ll need your server details, user name and password. You’ll also need the server path although you can click Browse to browse your server to find it if desired. Type a subfolder in which to place the gallery – you’ll need to do this if you plan to have multiple galleries in the server folder you are using. Each gallery needs to be placed in a different subfolder or it will overwrite the previously uploaded gallery.

When you have everything configured click Upload to render the gallery images, create the necessary html code and upload it all automatically to your server.

The HTML galleries in Lightroom aren’t the best looking galleries in town but having a gallery accessible to almost any device is definitely and incentive to use them in place of Flash galleries.

0 thoughts on “Web Gallery Assignment

Leave a Reply

Your email address will not be published. Required fields are marked *