Mr. O'Connell's Technology Home Page

home web design business and personal finance biography links2
navigation Part One Part Two Part Three Part Four faq


The goal of this project is for each student to begin collecting a series of Web Design tutorials. Students will search the Internet for tutorials that they find interesting and engaging. The objective is to find tutorials that have the potential to increase the student's skill set. It is also important that each tutorial yields an end product that can be added to the student's personal website. Each tutorial will be hyper linked from the student's Tutorials page on their personal website. The end product of each tutorial will then be added to the student's web page.

Note: Students are welcome to link to video tutorials. However, you are responsible for bringing in your own headphones to listen to the video tutorials, and you are responsible for staying on task. Do not surf to your favorite comedy video! Thank you for your cooperation.

Students are required to present their completed work to the class as part of their assessment. The student will open each tutorial in a separate tab in Google Chrome. The student will show each tutorial website. Then, the student will show examples of completed tutorials. Finally, the student will invite the class to ask questions.

In the event that the student has not completed the entire assignment, the student will still present the work they have completed for partial credit.

As per the F.A.Q. below, your tutorial must be written for the correct version of the software we use. You will not get credit for tutorials meant for other versions of our software. The most common error with this requirement is to link a Photoshop Elements 8 tutorial rather than a Photoshop CS6 tutorial.


Part One: Find Four tutorials

  1. Open Dreamweaver.
  2. Open your tutorials page on your personal website.
  3. Create a new Div Tag for your project:
    • First, decide where you want it to go.
      • One method is to click exactly where you want it to go, and then choose "At Insertion Point" in the "Insert" dialog box. If you have an existing Div and you want to place your project below it, choose "After Tag" and then choose the correct tag in the drop down menu that appears to the right.
    • Insert<Layout Objects<Div Tag
    • Insert<At Insertion Point point or After Tag (or wherever else you want the Div tag to go- see above)
    • ID: tutorial_list
    • Click New CSS Rule
    • Under Rule Definition, choose This document only from the drop-down menu at the bottom of the dialog box.
    • Click Okay
    • In the CSS Rule Definition dialog box, click Background
      • Choose a background color, making sure to align it with your color scheme
    • In the CSS Rule Definition dialog box, click Box
    • In the Box dialog box, enter the following:
      • Width: 840
      • Height: 300
      • Margin (remove check mark on Same for All)
        • Left<set drop-down menu to Auto
        • Right<set drop-down menu to Auto
      • Click Okay
  4. Open Google Chrome.
  5. Go to Google, and type Photoshop CS6 Tutorials into the search field.
  6. From the search results, find a link to a tutorial that teaches you how to do something interesting that you didn't know already.
    1. Example: Cloning Stamp Tutorial
  7. IMPORTANT! Make sure it is a link to an actual tutorial- not a list of tutorials or an offer to buy tutorials. A tutorial should teach you how to do something. If you don't see step-by-step instructions on how to do something, don't use it. Choose a different page.
    1. BAD Example (this is just a list!): Photoshop Elements Tutorials
    2. Another Bad Example (they want your $money$) Free Videos, Tutorials, and More!
  8. Copy the title of the page.
  9. Return to Dreamweaver.
  10. Type Photoshop Tutorials, and then hit Enter.
  11. Paste the title of the page.
  12. Select the title.
  13. Return to the page in Google Chrome.
  14. Copy the page's address.
  15. Return to Dreamweaver.
  16. Paste the address into the Link field in the Property Inspector.
  17. Save, and then test the link.
  18. Spell check. Then spell check again.
  19. Make sure you double check every link.



  1. Create two Photoshop CS6 tutorial links.
  2. Create a two Dreamweaver CS6 tutorial links.
  3. Your project must be placed in your Tutorial Div Tag.
  4. Present your tutorials as a bulleted list, like this:
    (the table can be visible invisible- it's up to you)
  5. Make sure the tutorials are on new techniques, and not on something we've already covered.
  6. You have to be able to show an "end product" on your web page.


Part Two: Write a paragraph for your tutorial page

  1. Write a paragraph describing your tutorial page. Replace your ipsum text with this paragraph.
    1. Open Google Drive
    2. Open your Classroom folder
    3. Open your Web Design folder
    4. Create<Document
    5. Title the document "Body Text: First Name Last Name Personal Website"
    6. Share the document with a partner. Your partner must be sitting across the room from you- don't choose anyone near you. If you wish, you can choose a partner from another one of my sections. Have your partner share their work with you. As you are writing, collaborate with each other. Proofread each other's work.
      1. Each person is expected to write at least two comments (insert<comment or ctrl+alt+m). At least one comment should be a compliment. At least one comment should be a suggestion for improvement.
    7. Write a paragraph of five or more sentences describing your tutorial page. Do not format the text.
    8. Spell check your text. Use both Google's spell check and the spell check located between your ears.
    9. You are writing for publication on the Internet, not texting your friend. Write accordingly. Please don't use text slang such as "i" for "I", "u" for "you", "IMHO" for "In my humble opinion".
    10. Submit your paragraph via Google Classroom
    11. Copy the paragraph.
    12. Return to Dreamweaver. Select your ipsum Latin text.
    13. Paste your paragraph.
    14. Select the paragraph, and if necessary, change the Id in the Property Inspector to none and then de-select Bold in Properties.
  2. Guidelines
    1. Challenge yourself, but avoid choosing tutorials that will take hours to complete.
    2. If you find that the tutorial is ineffective, find a better tutorial.


Part Three: Complete the tutorials

  • After you are completely done with Parts One and Two, complete each of the tutorials.
  • Do not start on the tutorials until you are completely done with Part One and Two, and you have links to the four tutorials as described above.
  • Remember, these tutorials are designed to be completed independently. Please don't ask me to explain each of the steps, and guide you through the tutorial.
  • If the tutorial is really too difficult for you, replace it with something less challenging.
  • If the tutorial doesn't work for you, replace it with a tutorial that does. Remember, there are tens of thousands of free tutorials to choose from.
  • You may create any folders you wish to organize the files for your tutorials.
  • In the case of the Photoshop CS6 tutorials, you must show the technique in a "after and before" format, with a rollover. You may reverse them if you wish. Make sure the "after" and "before" versions are exactly the same size.
    1. As with all previous projects, DO NOT TURN OFF CONSTRAIN PROPORTIONS TO RESIZE AN IMAGE! Use the Crop Tool, or perhaps the Resize Image Dialog Box, or even the Resize Canvas Dialog Box, depending on the situation. But NEVER TURN OFF CONSTRAIN PROPORTIONS to resize an image. You will loose major points on your project if you do. Your images will also look awful, terrible, and amateurish if you do.
  • Place your examples on your tutorial page. If you have a compelling reason, you may put your examples on any other page of your website. Please ask first.


Part Four: Present your work to the class

  • Open your tutorial page on the main screen
  • Open each tutorial in a separate tab in Google Chrome (use the center "scroll button" on your mouse
  • Show each tutorial website
  • Show each completed tutorial on your website
  • Ask the class if they have any questions



Q: Is it okay to complete each tutorial before I look for the next one?
A: No. Follow the work flow described in the directions. Find and link your tutorials first (as described in Part One), and then complete them (as described in Part Two).

Q: Is it okay to center align the links?
A: No. Center alignment for lists should be avoided just as much as center alignment for body text.

Q: Can you link to several tutorials within the same site?
A: No. Find four different sites. As of this writing, there are 20,900,000 results for the search Photoshop CS6 Tutorials.

Q: Is it okay to link to a list of tutorials?
A: No, and you will loose a significant number of points if you do. Read instruction #7, above.

Q: What if the page I want to go to is blocked?
A: Choose a different page that isn't blocked. There are several on the Internet. Actually, several million.

Q: Can I use tutorials for other versions of Photoshop or Dreamweaver?
A: No. Most other versions would have different tools and capabilities, so the tutorials won't be entirely useful.

Q: What if I can't do something that the tutorial asks me to do? Some of the tutorials ask me to select items that aren't in the menus.
A: You should confirm that the tutorial is for Photoshop CS6 or Dreamweaver CS6. If the tutorial is for a different version of either one, chances are excellent that the menus are different. If this is the case, reread the instructions above (especially numbers 5 and 20), and replace the tutorial on your web page with an appropriate tutorials. Also, look at the previous question in the F.A.Q.

Q: If I don't understand how to do something, is it okay to ask you for help with it?
A: Yes, but not during class time. I am available for extra help after school, Monday through Thursday. You can also replace the tutorial with something less challenging if you wish. Also, you can always look up how to do nearly anything in the Help menu of the application itself. The Help menu is usually located in the top right corner.

Q: Is it okay to include a tutorial for something I already know how to do, such as "How to create a Simple Hyper-link"?
A: No. This is a waste of your time and mine. It would be like including a tutorial on how to tie a shoe, or how to sharpen a pencil. Challenge yourself by learning something new, please.






  • Photoshop CS6
    • tutorial one
    • tutorial two
  • Dreamweaver CS6
    • tutorial one
    • tutorial two


Part One Part Three Part Four