Mr. O'Connell's Technology Home Page

home web design business and personal finance biography links2

Creating a Simple Website From Scratch:
Primary Colors

red yellow blue

This project teaches you one way to create a simple website from scratch. In this example, you will create a four page website about Primary Colors. This tutorial is for Dreamweaver CC.

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 colors, 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 color red, then see the letters R-E-D, then connect the ideas together so they recognize that R-E-D means RED.

We are creating this website so we can get acquainted with Dreamweaver Creative Cloud. We are also 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 project.

red yellow blue

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 do this is to double-click the Mr. O'Connell Drop Folder on the Desktop, and then navigate to your network folder from there.
  • Create a new folder, and name it lastname_firstname_primary_colors. This is your root folder.
  • Open the lastname_firstname_primary_colorsroot folder. Create another new folder inside, and call it images.
  • Close Windows Explorer.

Part Two: Image Preparation

  • Use Google's advanced image search tools to find images for your website.
  • The images must be exactly 600 px by 600 px
  • Acceptable file types:
    • .jpg
    • .jpeg
    • .png
    • .gif
  • Rename the images using the format presented in class.
    • Examples:
      • 01_yellow_sun_600x600.jpg
      • 02_yellow_big_bird_600x600.png
      • 03_blue_cookie_monster_600x600.jpg
      • 04_blue_balloons_600x600.png
      • 05_red_clifford_the_dog_600x600.jpg
      • 06_red_apple_600x600.gif
      • 07_primary_color_legos_600x600.jpg
      • 08_primary_color_wheel_600x600.jpg
  • Find two images for each page, for a total of 8 images. You may download more if you wish, but make sure you follow the sequential numbering system we discussed in class.

Part Three: Creating a new site definition in Dreamweaver

  • Open Dreamweaver
  • Site>New Site
  • Name the new site lastname_firstname_primary_colors
  • Click the browse icon next to Local site folder (it looks like a folder, remember?).
  • Navigate to your network folder.
  • Double click your lastname_firstname_primary_colors root folder.
  • Click the Select button.
  • Click Okay
  • Click Done

Part Three: Creating the .html pages

  • In the Local Files panel on the right hand side, 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 red.html
  • Right Click the workspace, and choose New File
  • Name it yellow.html
  • Right Click the workspace, and choose New File
  • Name it blue.html

Part Four: Creating a simple text navigation bar

  • Open index.html
  • Type the following:
    • home | red | yellow | blue
  • 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 red.html page
    • Press and drag from the point-to-file icon to the yellow.html page
    • Press and drag from the point-to-file icon to the blue.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 (Home, Red, Yellow, Blue).
  • 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: Final Tasks

The basic site definition, pages, navigation, and titles for your website are now complete. Now, complete the website according to the requirements below. Make sure you rename each image, and save them in your images folder.

Website Requirements:

  • Master table on each page.
  • At least one image on each page.
  • Place one descriptive sentence on each page, written at a first grade level. Write the sentences in Google Documents as per the instructions in Google Classroom, and then copy and paste them to each page.
    • example:
      • Yellow, red, and blue are the primary colors.
      • Roses are red.
      • The sky is blue.
      • The sun is yellow.
  • Spell check your work in case any spelling mistakes have crept in.
    • Commands<Check Spelling (or Shift+F7)
  • Develop a consistent font scheme and apply it to each page.
    • To do this:
      • Modify<Page Properties (or Ctrl+J)
    • Use only large, sans-serif fonts.
    • As always, make sure your page has a high degree of READABILITY.
  • Develop a HIGH CONTRAST color scheme for each page.
    • If you want to add a background color other than white, add it to individual cells of your Master Table. Don't use it on the entire page.
    • Use ONLY primary colors, black, and white:
      • red
      • yellow
      • blue
      • black
      • white
    • DO NOT USE A BLACK BACKGROUND. 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-).
  • 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.
  • If you wish, you may place a rollover image on each page.
    • Insert<Image Objects<Rollover Image (or Ctrl+9)
    • 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 sky in your content sentence, include images where the sky 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 to resize them.