Mr. O'Connell's Technology Home Page

Web Design Midyear
January 2020
Mr. O’Connell

Your goal is to create a website from scratch by following the directions below.

You will end this term by creating a four page web site that reflects your thoughts and ideas about your web design experience in the past, present, and future. During this course, we have discussed a number of different applications related to web design, and we have acquired a variety of new skills. This Mid-Year is designed to give you an opportunity to show some of your web design skills, and reflect on your learning.

1. Web Page Design Midyear: Reflections on the Present Past and Future

This test will be given on the computers. Read all of the instructions carefully before you begin! You may use any hand written notes that you wish, as long as they are your own work. You may use a graphic organizer if you wish. You may use any high school appropriate web resources you wish, including the tutorials on this website. You may print out this exam and use it as a checklist if you wish.

Use a consistent color scheme for your site, and follow it consistently for all four pages. Do this by linking all four pages to a Cascading Style Sheet or CSS. Use a light colored background, and use darker colors for the text and links- not the opposite. Make sure the pages have good contrast, as described during the first half of the course.

Each web page (except the home page) must contain one paragraph. This paragraph will contain a minimum of five complete sentences- an opening sentence, three or more sentences in the body of the paragraph, and a closing sentence. Do not give one-word answers. Your paragraphs must be left aligned. Do not center align, or right align your text.

Because of the hypertext format, it is impossible to give you an exact number of words as a requirement, but you are expected to be working on the page for the entire exam period. Do not plan on leaving early. Also, no help will be given during the exam, although you are welcome to use any online help resources you wish, including any instructions on my website.

II. Required attributes:

A. (10 points) Create a root folder inside your network folder called "lastname_firstname_midyear_jan_2020”

Create an image folder inside of this folder.

B. Create four web pages. To create a new .html file, right click your root folder and chose "New File"

1. index.html
2. past.html
3. present.html
4. future.html

C. Link your CSS Cascading Style Sheet) to each of these four pages.

Tools<CSS<Attach Style Sheet<Browse<select style sheet<Click OK

D. (5 points) Insert a table on each page (Ctrl+Alt+T).

1. Each table will be 4 rows, 3 columns, 800 pixels wide, with a border thickness of 0.

2. You may split and merge the cells to meet your design needs.

   Split: Select Cells<Ctrl+Alt+Shift+T

   Merge: Select Cells<Ctrl+Alt+M

3. You may also add rows or columns if you wish.

4. You may change the width, but you must do it consistently on all pages. The maximum allowable width is 800 pixels.

5. You must center align your tables on each page.

   Select the table<in Properties, Align<Center

E. (10 points) Put a complete page heading on all four pages:

1. Page Title (example: "Web Page Design Mid-Year: Reflections on the Present, Past, and Future")

2. First and last name

3. Date

4. Section

F. (10 points) Create text navigation on your home page, test it, and then copy and paste it on your Past, Present, and Future pages. It should look like this:

home | past | present | future

G. (10 points) Save eight images in your images folder.

• Download eight images, 300 pixels by 300 pixels, and only eight. No more, no less.
• Use only the four acceptable elements for your file names. Create short, logical file names.
• Don't resize the images in Dreamweaver. Download images that are the correct size to begin with.

*You may choose a different size (400 by 400 for example), but all eight of your images need to be that size.

H. (10 points) Insert one simple rollover image per page.

Insert<HTML<Rollover Image

• As always, Alt tags are required.
• Link your rollovers to websites directly related to your text. For example, if you are writing a lot about Windows Explorer, link the rollover to Microsoft's Windows Explorer home page.

In Google Chrome, find an appropriate website related to your content.
Click in the address field, and copy the web address (Ctrl+C)
In Dreamweaver CC, Select the rollover image
In Properties, paste (Ctrl+V) the web address into the Link field.

Writing Requirements for Each Page

You will write text on each page of your website. As you will see, your Home page only requires a welcome message. Write full paragraphs on your past, present and future pages. Each paragraph will contain five or more complete sentences. The paragraphs will be exclusively about your experience in Web Page Design. Write the paragraphs in Standard English. Do not use text language or slang.

I have included writing prompts for each page. Here are the requirements, by page:

A. (10 points) On your Home (index.html) page, write a short welcome message, such as this:

"Welcome to my Mid Year website about my past, present and future in web design here at Oliver Ames High School. Thanks for visiting!"

B. (10 points) On the Past (past.html) page, write about the first months of our Web Design course. Write about these five things in your paragraph:

• " I leaned how to ....."
• " I used the applications..."
• " I learned a number of new skills, including...."
• "My greatest success was....
• "The greatest problems and challenges that I faced were..."

C. . (10 points) On the Present (present.html) page, write about your recent work in the course. Be sure to mention Photoshop CC, Dreamweaver CC, Include sentences about these five things in your paragraph:

• "I am currently working on the ____project ..."
• "Specifically, I am in the middle of ...."
• "My short term goals are to finish ____ and then get to started on _____"
• "This term, I was able to finish several important tasks on my website, including..."
• "My greatest success this term is..."

D. (10 points) Content for The Future (future.html) Write about these things in your paragraph:

• After I leave this course, I will apply my web design skills by...."
  (Possible examples: create a site for your own business, create a site for your college portfolio, work to design and maintain a web site for a local non-profit organization).
• "Before the end of this course,I would like to learn how to ..."

Adding Links to Support Websites

(5 points) Go back to each page, and add links to the support websites of each application you mentioned in your paragraphs. If you didn't mention any of the applications below, rewrite your paragraphs to included each of the five.

Example,
"I used Dreamweaver CC for my main web design application."

You must mention and link to the support websites for the following applications:

• Notepad
• Dreamweaver CC
• Photoshop CC
• Google Chrome
• File Explorer

As you are finishing the exam:

• Re-read the instructions, check every bit of your work, and then re-check every bit of your work. Web Design is all about attending to the thousands of small details that make up a site, so check all of the details, and then re-check them.
• Make sure your name, date, and section appear on EACH page.

• Use Dreamweaver's Check Spelling command on each page (Shift+F7), and then check your spelling again by reading the text yourself. Dreamweaver's imperfect Check Spelling command will not pick up certain mistakes, such as misspelling the word "I" by erroneously typing "i", or misspelling the word "you" by erroneously typing "u".

• Make sure you have included a Title for each page. The Title must appear at the top of the page as well as in the Title Bar.

• You do not have to print your exam. Just DOUBLE CHECK that the root folder is named properly, and that it is saved in your network folder.