Dreamweaver Project: 
"The Nooberville Website"

Assignment: The Nooberville Website,  using Macromedia Dreamweaver, students will use a Template to create a website for a fictitious town: “NOOBERVILLE.”

Video Tutorial:  Here is the video demonstrating the use of TEMPLATES, which you will need when creating your NOOBERVILLE website!

The TOWN:  You are responsible for coming up with the THEME of you NOOBERVILLE town.  Anything that is school appropriate is fine.  In the past I have had:  Cheerleader Town, Cowboy Town, Football Town, Transformer Town, High-heeled Shoes Town, Redneck Town, Stupid People Town, Fairy and Dragon Town.  Mr. B. created his own town:

"Really Smart People Nooberville Website"

Think of your theme, then go ONLINE and locate a PHOTOGRAPH of a TOWN WELCOME SIGN.  Use your Fireworks RUBBER STAMP tool to make your sign say "NOOBERVILLE."  See the Smart People Website above for an example!

The PAGES of your Website:  You will be creating a TEN PAGE website for your NOOBERVILLE town.  Here is a list of the pages you will need to create.  Each page will have an appropriate picture and words to describe the page:

  • Homepage of the Nooberville website: Introductory page for your town.  (INDEX.html)
  • Town Mayor:  The Mayor's Page- the mayor can be anyone or anything you wish
  • The Fire Department-  Describe the fire department
  • The Police Department- Describe the police department
  • Local Attractions- Describe the "big thing" that visitors should make sure to visit in your town.
  • The Local Sports Team-  ANY type of "team" with an appropriate name.
  • The Local High School-  Describe the local high school and their school mascot.
  • The Real Estate Page- Describe the "fancy property" in town that is for sale.
  • The Restaurant Page- What restaurant should all visitors eat at in your town
  • The Hotel Page- Describe the hotel that visitors should stay at in your town.

How to Proceed:  Here is a specific list of everything you are responsible on this project.   While the Video Tutorial outlines much of this list, you are responsible for everything below:

  1. Create a new folder in your WEBSITES folder, call it “LASTNAME_TOWN”.
  2. Decide on your NOOBERVILLE THEME. Head out to the Internet and collect a total of 10 pictures for each of your webpages (listed below), save them to your TOWN folder. Make sure to follow the 400 rule!  In addition, check out the special rules for the Homepage picture in Step 13 below!
  3. In Dreamweaver, make a NEW BASIC PAGE- HTML.
  4. Click on FILE>SAVE AS TEMPLATE to save this page as the template for your NOOBERVILLE website. This template will be a PATTERN website that you will use to create all of your other webpages.  When you update information on the TEMPLATE, Dreamweaver will automatically update ALL PAGES created from that file for you!  Call the template TOWN.DWT, Dreamweaver will automatically save it into a TEMPLATE folder in your WEBSITE folder (not your TOWN folder!)
  5. Change the colors of the background of your page, the text on your page and the links on your page as needed to fit the theme of your NOOBERVILLE.
  6. TITLE your page. Something like “The NOOBERVILLE Website” is fine.
  7. Use the INSERT>TABLE command to create the structure which will hold your webpage. You need different spaces for:
    • Webpage Title
    • A Menu Bar with room for TEN different links:
      • Homepage of the Nooberville website: Introductory page for your town.  (INDEX.html)
      • Town Mayor:  The Mayor's Page- the mayor can be anyone or anything you wish
      • The Fire Department-  Describe the fire department
      • The Police Department- Describe the police department
      • Local Attractions- Describe the "big thing" that visitors should make sure to visit in your town.
      • The Local Sports Team-  ANY type of "team" with an appropriate name.
      • The Local High School-  Describe the local high school and their school mascot.
      • The Real Estate Page- Describe the "fancy property" in town that is for sale.
      • The Restaurant Page- What restaurant should all visitors eat at in your town
      • The Hotel Page- Describe the hotel that visitors should stay at in your town.
    • A picture to illustrate each webpage.
    • TEXT, you need room to type 1-3 paragraphs to describe each of your webpages.
    • I recommend a structure like the one that you used for the HHS website, but you can use any format that you wish:
        Space for a Webpage Title

        Menu

        Menu

        Menu

        Menu

        Menu
        Space for a Picture
        Space for some text to explain the page.
  8. Once you have your table put together, at the top of your page (where your title will go), you need to INSERT>TEMPLATE OBJECTS>EDITABLE REGIONS, name this region “TITLE.” This will be the title for each of your pages. In the two large center sections, you also need to INSERT>TEMPLATE OBJECTS>EDITABLE REGIONS. Name these two areas “PICS” and “TEXT.” This will be where you place your page picture and text for each webpage.
  9. In your Menu Bar area, you need to type in the names of the TEN different webpages in your NOOBERVILLE website, listed above. Don’t forget the HOME page.
  10. RESAVE your template.
  11. Begin creating, one after another, the webpages for your website, by clicking FILE>NEW>TEMPLATES>CREATE. As soon as you create a page, save it to your LASTNAME_TOWN folder as mayor.html, attractions.html, etc. Remember, your HOMEPAGE must be called INDEX.html!
  12. Once all of your pages are created for your Town Website, reopen your TOWN TEMPLATE and link up all of the pages in your MENU bar. Resave your TEMPLATE. The program will ask if you want to update your pages, say YES. This should change all of your webpages to look like your Template page!
  13. On your HOMEPAGE, please place a picture of a Welcoming Sign for your town of NOOBERVILLE. Use your Fireworks RUBBER STAMP tool and a real photograph to create a NOOBERVILLE sign. Then, use the TEXT space to describe your town to visitors to the website. You should be using a picture similar to the one at the right when creating your Nooberville sign.
  14. Fill in the rest of your pages! Each page should have a picture that fits with the page and a couple of paragraphs explaining the stuff on that page.
  15. When you are completely done, save all of your pages, open your index.html page and use F12 to test all of your links. Then, copy the entire LASTNAME_WEBSITE folder to my drop box!