Dreamweaver Project: 
"Updating the Nooberville Website"

Assignment: You have already created the Nooberville Website, using Macromedia Dreamweaver. Fortunately, you used a Template to create the website, because in this part of the project, you will be making a number of changes to the website.

BEFORE GETTING STARTED: MAKE SURE THAT YOU HAVE COPIED YOUR "TOWN" FOLDER TO THE DROPBOX.

THEN, USING "MY COMPUTER", PLEASE MAKE A COPY OF YOUR TOWN FOLDER AND NAME IT "TOWN_UPDATE".

You will do all of your work for this project in the NEW UPDATED folder!

When you are DONE with this part of the project, please copy ONLY the TOWN_UPDATE folder into your your WEBSITES folder on the DROPBOX!

How to Proceed:  You need to make the following changes to your Nooberville Website. You will be modifying your TEMPLATE and saving it, allowing Dreamweaver to make the updates to all of the pages on your website automatically.

  1. The Town Manager (by now your best friend) says that there must have been a miscommunication along the way. Your Website is not made using the town colors, which are purple and orange. Please make sure that either the background or the text color of your pages is purple or orange. (Any shade of purple or orange is fine...)
  2. The Town Manager would like you to create a "Town Logo" and place it onto the top of each webpage. To create the town logo, do the following:
    • Open Fireworks and create a new 600 x 600 pixel canvas. Make sure that your canvas is the same color as the background of your website (PURPLE or ORANGE, Mr. B.'s Logo is actually a very nice shade of blueish-purple!)
    • Now, create a nice graphic logo that shows the character of your town, and includes the town name "Nooberville." See Mr. B.'s Example to the right. Drawings and graphics pictures are prefered for a logo than photographs!
    • When you are done, FILE>EXPORT PREVIEW your logo and call it LOGO.JPEG.
    • Then, create another canvas in Fireworks, sized 700 x 200 pixels. Make this canvas the same color as your webpage background (PURPLE OR ORANGE!).
    • Copy and resize your logo to fit into the left side of the canvas.
    • Then, using interesting and appropriate fonts (Check out this link, if you would like to add really cool fonts.) add the word NOOBERVILLE to the right side of the canvas.
    • When you are done, FILE>EXPORT PREVIEW your canvas and call it "TITLE.JPG". See Mr. B.'s Sample Title Banner below:
    • Now click on the top ROW of your table ON YOUR TEMPLATE and RIGHT CLICK>TABLE>INSERT ROW to add a new ROW to the top of your website. Now, just INSERT this image into that top cell of your table on your TEMPLATE. This will leave the second row with your Template Editable Object at the top of your page to put page titles on each page.
  3. The Town Historical Society would like you to add a page to the website called "TOWN HISTORY." On this page, you will show a picture from the past (at least 50-100 years ago) of what the town looked like long ago. Make sure to link this page on all pages of your website!
  4. The Town Manager would also like you to update the boring look of your menu system.
    • To accomplish this, you will update your Template with a FLASH TEXT menu system. Here is a VIDEO TUTORIAL to help you creating Flash Text Menu Systems.
    • MAKE SURE that you COPY all of your Flash Menu .SWF Files from your TEMPLATE FOLDER to your TOWN FOLDER, or all of your menus will be broken!
    • A CHALLENGE FOR THOSE OF YOU WHO WOULD LIKE TO TRY CREATING A PERSONALIZED MENU SYSTEM: Try this Fireworks HTML Menu System Tutorial, it shows step-by-step how to create a Fireworks menu system, which lets you do your own personal button glows, stars, blood drips, etc.!  You can do this instead of a FLASH TEXT menu system, if you wish.
  5. The Town Manager is a little concerned that your fancy menus may not be visible on all computers. This being the case, add a new ROW to the bottom of your table and include a very small, simple TEXT MENU BAR with links to all of your webpages. If you put your cursor on the BOTTOM RIGHT cell of your table and hit the TAB key, Dreamweaver will insert a new row at the bottom of your website. To make formatting easier, I would recommend INSERTING A TABLE into this cell, 1 ROW and 11 columns and 100 PERCENT wide.
  6. When you are completely done, save all of your pages, open your index.html page and use F12 to test all of your links.

TUTORIALS:

A COMPLETED UPDATED NOOBERVILLE WEBSITE FOR YOUR STUDY AND APPROVAL: Is here. This is Mr. B.'s Nooberville website, where Nooberville is the home of the smartest people on the planet.

SUBMISSION AND GRADING: When you have tested your website and are sure all links work properly, copy the entire LASTNAME_WEBSITE folder to my drop box!

Here is how the pages will be graded:

  • Town Logo and Title Graphic = 30 points.
  • Webpage color changes = 10 points.
  • FLASH TEXT menu system on website = 30 points
  • Plain Text Menu system at the bottom of pages = 10 points
  • Town History Page included = 10 points.
  • Town History Page linked on all pages = 10 points.

If the grading item is included and working properly, you will receive full credit. If it is not, you will receive a ZERO for that grading item.