Mr. O'Connell's Technology Home Page
home courses credentials links

Creating a Simple Website From Scratch: Seasons
This tutorial teaches you one way to create a simple website from scratch. In this example, you will create a quick five page website about Seasons. This tutorial is for Dreamweaver CS4.

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 seasons_lastname_firstname. This is your root folder.
  • Open the seasons_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 seasons_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 seasons_lastname_firstname root folder.
  • Click the Select button.
  • Click the browse icon next to Default images folder.
  • Double click your images folder.
  • Click the Select button.
  • 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 winter.html
  • Right Click the workspace, and choose New File
  • Name it spring.html
  • Right Click the workspace, and choose New File
  • Name it summer.html
  • Right Click the workspace, and choose New File
  • Name it fall.html

Part Four:
Creating a simple text navigation bar

  • Open index.html
  • Type the following:
    • home | winter | spring | summer | fall
  • 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 winter.html page
    • Press and drag from the point-to-file icon to the spring.html page
    • Press and drag from the point-to-file icon to the summer.html page
    • Press and drag from the point-to-file icon to the fall.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, Winter, Spring, Summer, Fall).
  • Copy and paste the title into the Title: box (located directly above the page- remember?).
  • Save your pages, and test your navigation. f12

Next steps:

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:

  • There must be a master table on each page. EVERYTHING MUST BE INSIDE THE MASTER TABLE.
  • Place at least one rollover image on each page.
    • DO NOT RESIZE THE IMAGES IN DREAMWEAVER.
    • Your best strategy is to find and download images that are already the size you need.
    • Remember, your rollovers will work best if they are the same size.
    • If you absolutely have to, open the images in Photoshop Elements to resize them.
    • All images must be renamed with short, logical names, and saved in your images folder.
  • Write at least one sentence of content on each page.
    • example:
      • Winter is a wonderful season to go skiing!