Assignment: Students will be creating a short, four page website for a fictitious art museum. The art museum website will include hotspot links and a Web Photo Album.

Before You Get Started: Create a folder IN YOUR WEBSITE FOLDER called "lastname_museum." IN YOUR MUSEUM FOLDER, create ANOTHER FOLDER called "ART." All of the artwork files you collect for your museum website will be placed into this folder.

What Your Museum Website Will Look Like When You Are Done: Here is Mr. B.'s Art Museum Website.

The Museum and the Artwork:  The first step in the process is deciding what kind of Art Museum you will be creating. Here are the guidelines for gathering the pieces of artwork that you will be showing at your museum:

• Your museum should have a particular theme. I do not care what your theme is, as long as it is school appropriate.  If you have a favorite artist (such as Van Gogh, Dali, Haring, etc.), feel free to use their work.  If not, you will need to come up with your own theme.  Some possibilities might be:
  • Museum of Western Art
  • Museum of Goth Art
  • Museum of Watercolor Art
  • Museum of Renaissance Art
  • Museum of 1960's Concert Poster Art
  • Museum of Skateboard Art
  • Museum of Black and White Landscape Photography
  • Museum of Manga Art
• Please DO NOT try to put together a "Museum of Cool Tats." I want pieces of artwork that you can actually hang on the wall. You can't hang a tattoo on the wall.
• You will be creating an online art gallery of at least 10 pieces of art for your museum (I recommend more, actually, but do not spend day after day collecting pictures online. Mr. B.'s Art Museum has 15 pictures.) You will gather these pictures from the internet. Remember, I would like to see appropriate ART, not just a collection of lame jpgs.
• Each picture you use in your art gallery should follow the "400 RULE." Please make sure to resize the pictures in Fireworks and FILE>EXPORT PREVIEW them as JPGs.
• PLEASE NOTE:  The photograph of your museum that you use for the home page of the website will NOT follow the 400 rule and will be about 800 x 500 pixels in size, see below...
• MAKE SURE TO SAVE ALL OF YOUR PIECES OF ARTWORK INTO YOUR lastname_museum/ART FOLDER!

The Homepage Picture for your Museum Website: We will be doing something a little different for the Homepage of your site. Most of your homepage will be created in FIREWORKS.  Follow these steps:

• To start, locate a large-sized photograph of the OUTSIDE of a museum or museum-like building. We need to make the picture roughly 800 x 500 pixels, so take the picture into Fireworks and do some size adjustment, if necessary.
• Once you have your picture at the right size, manipulate your building so that it has the proper name on a sign or wall of the building. Anything that you can do to manipulate your photograph to make it look more like your museum, the better. SAVE your final manipulation to your lastname_museum folder, call it museum.jpg. Remember, your museum is called "Lastname Museum of Whatever Your Theme Is." Mr. Burkhard's Museum is called "The Burkhard Museum of Tree Photography." Here is the picture of his building, after adjustment (notice the "Trees of Africa" Banner outside the door to enhance the effect):

• Now, we will need to start creating the canvas that will become your home page. In FIREWORKS, create a NEW canvas, 800 x 650 pixels, you can make the background color whatever color would be appropriate for your website.
• Then, copy in the picture of your museum that you saved as museum.jpg. You should have some extra room at the bottom or the top of your picture. In that open space, in big, bright letters, type in "LASTNAME MUSEUM OF WHATEVER YOUR THEME IS." Here is Mr. Burkhard's:

• Now, in a bright, bold font, easily seen, type the following THREE PHRASES right on top of the picture (feel free to place them whereever fits on your picture, be creative!):
  • "About the Museum"
  • "The Gallery"
  • "Visiting Us"
• Place them whereever on your picture it might look best so that you can read these new LINKS. Then, FILE>EXPORT PREVIEW your picture and save it as: "front_page.JPG." Here is Mr. Burkhard's completed front page picture:

\

• This will be the front page of your museum website.

Creating Your Museum Pages:

• At this point, it would probably be easiest if you created the pages of your website. In your "lastname_museum" folder, create three webpages, called:
  • INDEX.htm (your homepage)
  • about_the_museum.htm (the page which will talk about your museum and show a photograph of your "gallery."
  • visiting_us.htm (this page will have the hours that you museum is open, as well as a map to your museum, along with your address and phone number.)
  • Now we need to create your online gallery of the pictures that make up your museum. To do this, watch this video. Dreamweaver will automatically create a gallery page and individual pages for each picture in your gallery. The resulting gallery webpage will be in your ART folder and will be called INDEX.htm.

Linking Your Pages on Your Art Museum Website: Now, we need to create our links on the building picture on the INDEX page of the website. To complete this, watch this Video Tutorial on how to create a Hotspot Link. Then, link up your three webpages from your homepage picture. We are close to being done!

Finishing Your Museum Webpages: The last thing we need to do is finish putting our content onto our "About the Museum" and "Visiting Us" pages. I mentioned how I did mine at the end of the Hotspot Links video, but you can create your pages any way you like. The following is the list of what you NEED TO HAVE on those two pages:

• ABOUT THE MUSEUM: On this page, you will have-
  • a couple of sentences about "how you gathered your collection of artwork and how long you have had your museum."
  • In addition, YOU MUST HAVE a picture of the "inside of your art gallery". This picture should show artwork hanging on walls.
  • ALSO, please use Fireworks to PLACE YOUR ARTWORK PICTURES INTO THE FRAMES OF YOUR WORK ON THE WALLS OF YOUR PICTURE!
  • The last thing you need to include is a LINK BACK TO THE HOME PAGE OF YOUR WEBSITE!
• Here is Mr. B.'s Gallery Photograph, notice that all of the pictures in the photograph are from his Tree Gallery:
• 
• VISITING US: On this page, you will include the hours of the museum, your address and phone number AND A MAP OF THE LOCATION OF YOUR MUSEUM. You also need to include a "GO BACK TO THE HOME PAGE" Link on this page, as well. Dress this up any way that you wish, here is Mr. B.'s Map:
• 
• Once all of your pages are completed, open up your website INDEX and try an F12 to preview your website. Make sure that ALL pages are linked!

The Video Tutorials used for this Website Project:

• Video Tutorial on how to create a Hotspot Link on Images in Dreamweaver.
• Video Tutorial on creating a Web Photo Gallery in Dreamweaver.

SUBMITTING YOUR WEBSITE: When everything is completed and you are SURE that all of your links are working properly, just COPY your entire "lastname_websites" folder into the DROPBOX.