Web Page Design
Job/Academic Resume Web Site Project

Please refer back to these directions often, as I will be revising the instructions as the project unfolds.

The goal of this project is to create a web site designed to present each student’s academic and job related accomplishments and skills. The intended audience is college admissions offices, scholarship committees, and prospective employers. The web site will serve as a “one stop shopping place” for all pertinent information about the student. The final form of this web site will be a CD that can either be duplicated for distribution or uploaded to the internet by the student.

Phase One: Planning

Phase One Rubric

Start by reading Webpage Design: Identify the Target Audience in order to prepare for our class discussion.

Discussion:
What information should and shouldn't be included in this web site?

Assignment:
Open Microsoft Word, and outline a plan for your site. Close any web browsers, and have ONLY Microsoft Word open.

• Create a new folder inside your network folder, and call it “first_lastname_ job_and_academic_resume_web_site”
• Save the plan inside this folder. Call it “job_and_academic_resume_web_site_plan”
• Provide a complete page headings, like this:

  Job/Academic Resume Website Plan
  Your Name
  Mr. O’Connell, Instructor
  4/25/2017
  Web Page Design
  Period Six

• Your first topic will read “These are pages of my website.”
• Include the following sub topics (and sub-sub topics):
  • Home page (index.html)
    • Personal statement
  • Goals
  • Resume (resume.html)
    • job #1
    • job #2
  • Community service (community_service.html)
  • Academics (academics.html)
    • Transcript from X2
    • Three examples of your work
  • Extracurricular, Skills and Talents (extracurricular.html)
    • sports, music, clubs, charity, personal interests/hobbies, political action, etc.
  • References/recommendations (references.html)
• Your second topic will read “These are the features included in my website. ”
  • Navigation
    • Dreamweaver navigation bar
  • Images
    • Picture of myself
  • Text
• Outline all of the special features you will be including in your site (examples: pictures, video, rollovers, music, flash, etc.).
• Include any other topics that you think will strengthen your plan. Remember the old saying: "Failing to plan is planning to fail."
  

Phase Two: Starting the Site

Phase Two Rubric

To begin, open Dreamweaver CS4, and establish your new site.

• The root folder will be the folder you created inside your network folder, called “first_lastname_ job_and_academic_resume_web_site”.
• Use the same name for the site itself.
• Create your pages by right clicking in the file panel, and choosing New File. Make sure you give the files web-friendly names.
  • index.html
  • resume.html
  • community_service.html
  • academics.html
  • extracurricular.html
  • references.html
• Each page must have a master table that contains cells for all objects: navigation, images, text, video, and anything else included in your site.
• Choose a color scheme for your website. Your color scheme must provide high readability and strong contrast. DO NOT USE A DARK BACKGROUND COLOR FOR THIS PROJECT.
  • Create a CSS document for your site. Name it job_res.css
  • Link all of your pages to this CSS document.
  • Add your color scheme to this CSS document.
  • Click here for a CSS Tutorial
• The following folders are required:
  • images
  • images>buttons
  • images>buttons>psd
  • images>buttons>gif
• Create a navigational bar for your web site, and place it on each page. You may use a vertical or a horizontal layout. Your navigation bar must use tables.
  • Create buttons from scratch using PhotoShop.
    • Save the .psd versions of your buttons in your psd folder.
      • images>buttons>psd
    • Once you have perfected your buttons, convert them to gif format, and save them in your gif folder.
      • images>buttons>gif
    • You must have 3 buttons for each page-"up,""over," and "down"
    • Your navigation bar must be saved in your Dreamweaver library. Read the tutorial if you forget how.
  • Spell check your button text in Microsoft Word if you are even slightly unsure of the spelling. Remember: spelling always counts in everything in life, directly or indirectly.
    • True story: a student posted their site on the web hoping to attract the attention of a college, and spelled "academic" incorrectly on every page. Do you think he was accepted by the college of his choice?
  • DO NOT USE FLASH BUTTONS! I will not provide technical support if you use them.
  • Each set of buttons must match.
    • Do not use black and red. Your grade will be zero if you do.
    • Your color scheme must provide high readability and strong contrast.
    • All design elements must match (color, filters, etc.)
    • The text must match (font, size, color, alignment, style)
    • The text must be coplanar across your button bar
  • Your navigation bar should not shift from page to page. It should remain in exactly in the same horizontal and vertical position on every page.
    • A simple test is to rest your cursor on a given letter on a button, and click.The cursor should remain in exactly the same position on the same letter on the target page.
  • As always, add titles to each page.

Phase Three: Adding Content

Phase Three Rubric

• General:
  
  • Make sure that you have thoroughly covered the subject matter for each topic on each page.
  • Minimum requirements are listed below. To check the number of words on a given page,
  • Body text must NOT use center alignment.
    • Justify your text, or use left alignment- the choice is yours.
  • Spell check your work (Shift+F7 or Text>Check Spelling).
    • Remember: spelling always counts in everything in life, directly or indirectly.
• resume.html (Requirement: 200 words or more)
• First, create a resume in Microsoft Word
• Use one of the Microsoft Word resume templates.
  • You can find them here:
    • View>Task Pane>New Document (task pane drop down menu)>templates, On my computer>Other Documents>Resume Wizard.
• Look at all of the templates, and use your intuition to decide which one to use. You can also include recommendations in this page.
• Save the document in your root folder. Call it firstname_last_name_resume.doc
• Open Dreamweaver, and drag firstname_lastname_resume.doc onto the page resume.html. A dialog box will open. Use the default settings.
• After you paste your resume onto your website, click Commands>Clean Up Word HTML in Dreamweaver. Follow the prompts.
• You will have to work with the page to make it look right- the Microsoft Word format doesn't translate very well to a web page. Make sure that it is properly formatted before you move on.
• index.html (Requirement: 200 words or more)
  • On your home page, create a welcome message that introduces your site and identifies your target audience.
  • Create a second paragraph about your goals. Start with "My goal is to..."
• extracurricular.html (Requirement: 200 words or more)
  • Your Extracurricular page should contain information about any organized activities that you think would be appropriate. This could include playing a musical instrument (either in a school sponsored program or not), playing a sport, being a member of a chess club, or a variety of other non-academic activities. Again, speak with me if you are unsure of what to include.
• academics.html (Requirement: 800 words or more)
  • Include a current transcript from X2. Present whatever information you think is appropriate from this transcript. If you are unsure of what to include, schedule time with me to discuss this.
  • Include three or more school assignments that you think represent your abilities. Possibilities include papers, web page assignments, movie clips of a drama presentation, or recordings of musical performances.
    • To get your work from your home computer to your web page folder:
      • You can upload the work to Google Documents (this method is free, easy, and reliable)
      • You can send the work to yourself by attaching it to an email that you can access from school. (this method is also free, easy, and reliable)
      • You can save the work to a flash drive that you plug into your computer at school.
      • You can burn the work to a CD.
      • You can scan the work and then use one of the above options to move it into your website folder.
      • You can retype the work from an original copy. This is the slowest method, but sometimes it's the only option.
• community.html (Requirement: 200 words or more)
  • Write a paragraph about what you've done in the past for community service.
  • Write a second paragraph about the community service you are planning for the future.
  • Special note: If you have never done any community service, use this part of the assignment as an opportunity to develop specific plans. List the organizations that you are planning on contacting, and information about what those organizations do for the community.
• references.html (Requirement: 100 words or more)
  • Provide the names of three responsible adults that you can count on to give you a great recommendation.
  • Do not use family members as references- many organizations specifically forbid them, even when a family business is involved.
  • Ask each of these responsible adults for their email address, and include it next to their name.
  • Make sure you link each email address.
  • Provide sentences for each reference explaining how long they have known you, and your relationship to that person.
    • Example: "Mary Smith has known me for three years and two months. She is my supervisor at the Mercy Street Animal Shelter where I currently work as a volunteer."

Phase Four: Adding Images

• Add images to each of your pages with the exception of your Resume page.
  • Each image should be optimized in Photoshop as per previous lessons.
  • Add drop shadow frames to all of your pictures.
    • In the lower left corner, click set background color, and choose a color that works with your page design. This will be the background color for your frame.
    • Go to the Effects pallet
    • Click the photo effects button at the top
    • Choose Photo Effects from the left drop down menu
    • Choose frame from the right drop down menu
    • Drag the drop shadow frame to your image
    • The frame will add to the size of your image. If necessary, resize your image.
    • Save as usual
  • include at least one Rollover Image on each page.
  • As always, make sure your images are school-appropriate as your teacher would define school appropriate. When in doubt, ask him.
  • Find images that tie into the theme of each page. For example, if you are on your extracurricular page, have pictures that relate to your interests.
• Include a picture of yourself on your homepage. The picture should be appropriate to the website. You should look well groomed and professional.
  • Type this question into Google: "What does it mean to dress professionally?"
  • Get a cross section of opinions in order to get a clear sense of what this means.
  • Make sure your picture reflects your new understanding.