Mr. O'Connell's Technology Home Page

home web design business and personal finance biography links2

Web Page Design

This hands-on course will focus on the use of applications such as Adobe Dreamweaver and Adobe Photoshop to create web pages for the Internet. The course will feature service learning in that students will be expected to collaborate with members of the school community to bring the work of various departments, clubs, and organizations to the World Wide Web.

  • Click here for Web Page Design Course Expectations 2017/2018
  • Click here to view my Opening Day Presentation.
  • Students are expected to use MLA Formatting for all written work. Click here to see a sample paper written in MLA format presented by Purdue University. Purdue OWL is the gold standard of MLA resources.
  • Click here for Assessment Rubrics.
  • Click here to download a copy of the latest syllabus.
  • Click here to visit a great resource for working with hexadecimal colors, courtesy of H. Daly, (OAHS Class of 2018). Visit the Links page for additional HTML resources.
  • Click here for a Quizlet set for our Keyboard Shortcut Test #1, courtesy of C. Ando, (OAHS Class of 2018).

Projects:

Academic Resume Website
Adaptive Technology for Blind and Visually Impaired Web Users
Adding Google Fonts to your CSS
Black and Red Website
Color Scheme Project
Creating a CSS Document
for an Existing Website
Creating a Simple Website From Scratch: Primary Colors
Creating a Simple Website From Scratch: Seasons
Creating a Simple Website From Scratch: Yesterday, Today, and Tomorrow
Dreamweaver Site Definition Project
Ethics Project One
Google Account Project
Google Docs/Dreamweaver Link Project
Google Sites: An Introduction
Image Project One: Four Square Images
Image Project Two: Rollover Images
Image Project Three: Collage
Image Project Four: Swap Image Behavior
Image Project Five: Image Maps
Image Project Six: Personal Website Images
Master Tables Project
Meta Description Project
Personal Website: A Project Overview
Personal Website: Paragraph Alignment Project
Personal Website: Academics Page Project
Personal Website: CSS Project
Personal Website: Content Project
Personal Website: Div Project
Personal Website: Lorem Ipsum Project
Personal Website: Navigation Project
Personal Website: Tutorials Project
Personal Website: Web Favorites Project
Photoshop Button Project
Portfolio: Fall
Portfolio: Spring
Tables Project
Thumbnail Project

Video Project One:
Filming a Welcome Message

Video Project Two:
Filming a Short Documentary
 

Tutorials:

Adding a New Library Item to Dreamweaver
Background Image Tutorial
Backup Tutorial
Creating a Personal
Dreamweaver CC Workspace
CSS Tutorial for Dreamweaver CS6
Dreamweaver Preferences
Dreamweaver Site Setup
Invisible gif Tutorial
Photoshop Elements Cropping Tutorial
Photoshop Elements File Conversion
Resizing an image in Photoshop Elements
Rollover Image Tutorial
Screen Shot Tutorial
Website Final Checklist

Video Tutorials:

Common HTML Coding Mistakes
How to Set Google Drive Share Settings
Notepad/Google Chrome Coding Setup (video)
Site Definition Tutorial for Dreamweaver CS6 (video)
 

Study Guides:

Midterm Study Guide
Common Web Design Mistakes
 

Tests and Quizzes:

Course Expectations
Screen Shot Recording Sheet/Quiz
File Management Quiz 1
File Management Quiz 2
Mid Year 2018
Final 2017: Seniors
Final 2017:
Freshman, Sophomores, and Juniors
 
Podcasts
Naming Conventions
 

 

Having trouble with your tables and navigation shifting?

Try this strategy, courtesy of C. Crouch (OA Class of 2018).

  • The page is shifting because of the scroll bar.
  • Add a scroll bar to all of your other pages by clicking below your Master Table, and hitting enter until a scroll bar appears.
  • File<Save All
  • F12 to test your pages in Google Chrome

 

 

 

 

 

 

 

 

 

    9/14/2015 Assignment:
    Creating Folders in
    Windows Explorer and Google Drive

      • Create folders for each of your courses in both Windows Explorer and Google Drive

        • Observe the four acceptable file-naming conventions for web developers
          • Short, logical names
          • lowercase letters, numbers, underscore, and the dot only.
        • Students will create folders for each course listed on their schedules, including advisory.
          • Folder names will reflect the course name. For example:
            • algebra_2, not math
            • elements of wellness, not gym
        • Students will create folders in both Windows Explorer and Google Drive

 

 

 

Portfolio Procedure, Fall 2015

  • Open Google Chrome, and sign in by clicking the icon of the person in the upper right hand corner, next to the minimize button.
  • Navigate to Google Classroom, and then open your Web Design folder
  • Create a new folder inside your Web Design folder, and name it Portfolio Fall 2015
  • Creat a new document, and name it lastname_firstname_personal_website_css
  • Open Dreamweaver CS6
  • Open your .css document
  • Ctrl+A to Select All
  • Ctrl+C to Copy
  • Return to your lastname_firstname_personal_website_css in Google Documents
  • Ctrl+V to Paste
  • Enter a page heading
    • Your name
    • the teacher’s name
    • the course name and section
    • the date
  • Print your work
    • Printer: Laserjet 400

 

 

 

 

Click here if you want to improve your grade on the pw_files assignment.

html_link
  • Click the globe
  • Save the Zip file in your html folder
  • Right-click the folder
  • Choose Extract All

top

Q: I got a low grade on the pw_files assignment. How did that happen? Is there anything I can do about it?

A: Yes. Figure out what you did wrong, correct all problems, and then show me your work after school. I will raise your grade. Let's look at what I wrote on the white board while you were working on the assignment:

 

White Board, 11/30/2015

pw_files

  1. If your Title appeared one way on the page, and a different way in the Title Box in Dreamweaver, your grade dropped. For example, if the page says "Links" and the Title box says "links". The first is correct, as it is written in Title Case. In any case, they must match.
  2. If you typed your name starting with a lowercase letter, it is considered to be a spelling error, and your grade dropped. Of course, misspellings of any kind lowered your grade. Standard mistakes include "Acedemics" rather than "Academics", "Intrests" instead of "Interests", and "Turtorial" instead of "Tutorial". By the way, everyone makes typing errors. That's why I am going to use the Check Spelling command right now: Shift+F7.
  3. Your file names can't be spell checked in Dreamweaver. However, you can spell check the page, and then compare the two yourself. Remember the four acceptable character types: lowercase letters, numbers, underscores, and the dot. You can refresh your files by clicking the curled arrow icon, or by using the shortcut F5.
  4. Double check your folder and file structure against what's written here. Make sure that your image folder is inside your root folder, and that your root folder is inside your network folder. If this is incorrect, you must move them and/or rename them as the case may be. You will have to reset your Site Definitions if you move or rename your root folder. There is a tutorial to help you with this, below.

 

Remember to use the Check Spelling command before you save your work, and before you consider your work to be complete. The Check Spelling shortcut: Shift+F7.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

We will begin today's class by reading an article, watching a video, and discussing what we have learned. Click on the link below, read the article, and then we will watch the video together. Be ready to discuss the article.

Former Apple designers say the company has lost 'the fundamental principles of good design'

-Special thanks to S. Scolaro (OAHS Class of 2017) for bringing this article to my attention.