Mr. O'Connell's Technology Home Page

Creating a Simple Website From Scratch: Seasons

We are creating this site in preparation for our Mid Year Exam. During the Mid Year 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 lastname_firstname_seasons. This is your root folder.
• Open the lastname_firstname_seasons site folder (also called a 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
• Name the new site lastname_firstname_seasons
• Click the browse icon next to Local root folder (it looks like a folder, remember?).
• Navigate to your network folder.
• Double click your lastname_firstname_seasons root folder.
• Click the Select button.
• Click Save
• Click Done

Part Three:
Creating the .html pages

• Right Click the root folder, and choose New File
  • Name it index.html (this is your Home Page- remember?)
• Right Click the root folder, and choose New File
  • Name it winter.html
• Right Click the root folder, and choose New File
  • Name it spring.html
• Right Click the root folder, and choose New File
  • Name it summer.html
• Right Click the root folder, 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 the word 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?).
• File<Save All
• Test your navigation. f12

Part Five: Color Scheme, Master Tables, Images, 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.

• A simple method of implementing your choices for fonts, sizes, colors, and other design elements:
  • Go to your Properties panel (at the bottom of your screen)
  • Click the Page Properties button
  • Input your choices
  • Click Apply to see how then look
  • Click Okay once you are satisfied with your choices
• Develop and implement a HIGH CONTRAST color scheme for your website.
• Use ONLY primary colors, black, and white:
  • red
  • yellow
  • blue
  • black
  • white
• Use a light color for your background, and dark color for your text.
• Use the same color scheme on each page.
• Develop and implement 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. If you are not sure, try a table width of 800 pixels.
• 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 sentence of content on each page.
  • examples:
    • Winter is a wonderful season to go skiing!
    • Summer is a nice time to go to the beach.
• Place at least one rollover image on each page. Create a link from each rollover, as explained in the Rollover Image Tutorial. The link should be directly related to the subject of the page.
  • All images must be the same size.
  • Your image must directly relate to the season.
  • 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 Elements to resize them.