Creating a Simple Website Using Google Sites:
Yesterday, Today, and Tomorrow

Your target audience is first grade students. The assignment is to create a website geared towards first-graders that are just learning to read. The goal is to create a page that allows young students to take what they know about time lines, and connected this to their emerging knowledge of language.

First graders often leave kindergarten knowing their letters, but they are just beginning to understand how words are constructed. Your job is to help them get to the point where they can see the word "today", then see the letters "T-O-D-A-Y", then connect the ideas together so they recognize that "T-O-D-A-Y" means "TODAY".

We are creating this site in preparation for our Mid Term Exam. During the Mid Term you will be required to create a website from scratch, just as in this tutorial.

Part One:
Creating the root folder and image folder in Windows Explorer

• Open Windows Explorer (not Internet Explorer!), and navigate to your network folder.
  • The best way is to start this is to right-click the Mr. O'Connell Drop Folder on the Desktop, and choose Explore.
• Create a new folder, and name it timeline_lastname_firstname. This is your root folder.
• Open the timeline_lastname_firstname root folder. Create another new folder inside, and call it images.
• Close Windows Explorer.

Part Two:
Creating a new site definition in Dreamweaver

• Open Dreamweaver
• Site>New Site
• Click the Advanced tab
• Name the new site timeline_lastname_firstname
• Click the browse icon next to Local root folder (it looks like a folder, remember?).
• Navigate to your network folder.
  • Double click your timeline_lastname_firstnameroot folder.
  • Double click your images folder
• Click the Select button.
• Click the browse icon next to Default images folder.
• Double click your images folder.
• Click the Select button.
• Move your cursor to the end of the Default Image Folder name, and manually type in images (this step compensates for an incompatibility between Dreamweaver CS4 and our current version of Windows).
• Click Okay
• Click Done

Part Three:
Creating the .html pages

• Right Click the workspace, and choose New File
• Name it index.html (this is your Home Page- remember?)
• Right Click the workspace, and choose New File
• Name it today.html
• Right Click the workspace, and choose New File
• Name it yesterday.html
• Right Click the workspace, and choose New File
• Name it tomorrow.html

Part Four:
Creating a simple text navigation bar

• Open index.html
• Type the following:
  • home | yesterday | today | tomorrow
• Double click home
• Use point-to-file to link each page. (The point-to-file icon looks like a compass, and it's down in the Properties Inspector next to the link box- remember?)
  • Press and drag from the point-to-file icon to the index.html page
  • Press and drag from the point-to-file icon to the yesterday.html page
  • Press and drag from the point-to-file icon to the today.html page
  • Press and drag from the point-to-file icon to the tomorrow.html page
• Triple click your completed text navigation bar. Copy it. ctrl+c
• Open each page, and paste the navigation bar. ctrl+v
• Below the navigation bar, Type the title of the page (Yesterday, Today, and Tomorrow Homepage).
• Copy and paste the title into the Title: box (located directly above the page- remember?).
• Save your pages, and test your navigation. f12

Part Five:
Adding Master Tables, Images, and Content

The basic site definition, pages, navigation, and titles for your website are now complete. Continue by adding master tables to each page, and adding images and content. Make sure you rename each image, and save them in your images folder.

Website Requirements:

• Develop a HIGH CONTRAST color scheme for each page.
  • Use ONLY primary colors, black, and white:
    • red
    • yellow
    • blue
    • black
    • white
  • DO NOT USE A BLACK BACKGROUND. Have a clue, please. Your page is for first graders, who are almost universally afraid of the dark. Your page should be warm and inviting, and rich with primary colors.
  • As always, DO NOT USE A BLACK AND RED COLOR SCHEME.
    • ...unless you want to, based on the claim that you can read it. In that case, I will support you fully- go for it. But you will also be given an F-.
    • (This item is included for comedic effect, but I mean it about the F-).
• Develop a font scheme for each page.
  • Use only large, sans-serif fonts.
  • As always, make sure your page has a high degree of READABILITY.
• There must be a master table on each page. EVERYTHING MUST BE INSIDE THE MASTER TABLE. The size and shape of the Master Tables are up to you, but make sure that they are consistent from page to page. Also, force yourself to try a size and shape that you have never done before.
• Make sure you include a title on both the page itself and the title box above the page. If the title of your page is Untitled Document, your grade will suffer, and badly.
• Write at least one short sentence of content on each page.
  • example:
    • Yesterday I went to the park.
    • Today I am in school.
    • Tomorrow I am going skating.
• Place at least one rollover image on each page.
  • Your images must match your content.
  • Your best strategy is to find and download images that are already the size you need. Make sure they connect to your content- in other words, if you mention the park in your content sentence, include images where a park is featured.
  • All images must be renamed with short, logical names, and saved in your images folder.
  • Your rollover images must be the same size.
  • DO NOT RESIZE THE IMAGES IN DREAMWEAVER.
  • If you absolutely have to, open the images in Photoshop Elements to resize them.