Home   CGS 2820C
  Web Development
#05 Grading Criteria for:
Create an online Resume using the same style sheet as your other pages. Link your resume.htm to index.htm.

Description:  Create a very attractive 2 or 3 column professional online Resume using the same masthead and external stylesheet as your home page. Make sure you have a navigation <nav> element linking your resume.htm to index.htm and to all your other existing pages, and back.

Below is one way to save time and also make your pages consistent:
  1. Save your refined index.htm as resume.htm.
  2. Delete the specific content from the index page.
  3. Make sure the <title> tag, <meta> tags and <h1> are changed to be specific to the resume page.
  4. Place the resume content within the <main> element or within a <section> element inside the <body>.
  5. All pages should have the same centered width (but not across entire screen): body {width:1000px; margin:auto ...
  6. Use the same Cascading stylesheet, same masthead, and same navigation inside the <nav> element for your home page, resume, portfolio, newsletter, and contact page.
Your Resume and ALL other pages (Home, Resume, Portfolio, Newsletter, Resume) should be:
  • Full and attractive pages, college level, and consistent.
  • All pages must use the same External Cascading Stylesheet, and same Navigation. (There should no longer be an "Internal" Stylesheet.)
  • All pages should be formatted in similar fashion.
  • All webpages must be centered on the screen and have the same width, which will not exceed 1200px. Notice how this page is centered on the screen. (In CSS you can center your page on the screen by setting a body width in pixels, then setting margin to auto.) However, also notice that this paragraph and almost all of the text on this page is NOT centered. Do NOT center all of your text and images on your webpage.

Create and External Stylesheet from your existing Internal Stylesheet:

  1. Highlight all the content within your current Internal Stylesheet: highlight everything between the <style> tags. Highlight just the content. Do not highlight the <style> tags.
  2. Copy all the highlighted content.
  3. Open a new document in Notepad.
  4. Paste the copied content into the new document
  5. Save the new document as YourSiteName.css
  6. Go back to your webpage and delete all the <style> tags and all the content in the style tags
  7. Add the following code to replace the Internal stylesheet with the linked External stylesheet:
    <link href="yourSite.css" rel="stylesheet" type="text/css">

There are 3 types of selectors used with cascading stylesheets.
GROUP SELECTORS IN THE ORDER SHOWN BELOW (Existing Tags, IDs, Classes)
1. Existing HTML tags. Examples: <body> or <h1> or <p> Examples:
   body {width:1000px; margin:auto} /* center page on screen */
   h1 {color:#036; font-family:Arial, Helvetica, sans-serif}
   header {color:#FFF; background-color:#369} /* white on blue */
   nav {text-align:center; padding:12px; background-color:#FCF}
   main {color:#009; background-color:#FFF} /* dark blue on white */
   aside {width:25%; color:white; background-color:blue; box-sizing:border-box;}
   section {width:75%; color:white; background-color:blue}
   footer {color:#FFF; background-color:#369}

NOTE: In Dreamweaver you can choose > Commands > Apply Source Formatting to set conventionally indented tabs in the CSS stylesheet.

Unless there is an inline style or internal stylesheet to override the properties above, all h1 tags in the website will inherit the properties defined in the external cascading stylesheet.
2. ID Selectors are used in a stylesheet to define a division on a page. They start with a #, for example:
   #wrapper {...}
   #social{background-color:#FFC}
   #column1{...}

3. Class Selectors are custom defined styles. They start with a period (.)  Examples:
   .chapterTitle {font-size:28px; font-weight:bold}
   .important {color:red; font-weight:bold}
   .selected {color:#C0C0C0} /* light grey for current page selected in nav */
This class can be used in the nav element body to indicate what page you are on:
  <li><a href="resume.htm"><span class="selected">Resume</span></a></li>

CSS pseudo-elements are used to add special effects to some selectors.
Syntax: selector: pseudo-element {property: value}
Examples of setting pseudo-element values in CSS:
a:hover {color:#F0F}
h1:before {content:url('images/arrow.gif')

nav a:hover {color:#006} [also a:visited, a:active, a:link (unvisited)]

Make sure you meet all grading criteria below.
For an example of an online resume see: www.wintersonline.net/Resume.htm
For a HTML tutorial see: WinWebTutor
For CSS Tutorial 1 see: ../NotePad_Tutorials/CSS.htm with Video
For CSS Tutorial 2 using Expression Web step-by-step see: Expression Web CSS Demo
To Setup and Publish your site using Expression Web: 2820Web/ExpressionSiteDemo/setup.htm
To Setup and FTP your site using Dreamweaver: 2820Web/ExpressionSiteDemo/DW_Setup.htm
Topic Directions Points
Include a proper page Title that appears in the title bar.
Enter appropriate meta tags for Page Description and Keywords.
Example of page title and meta tags (in the <head>):
<title>Resume for Your Name</title>
<meta name="description" content="Resume for ...
5
Link your resume to your existing cascading style sheet.

Use your existing Navigation Div. ALL pages should be linked through the same Nav.

Add a pseudo-element to your hyperlinks to give a rollover effect. Example:
selector: pseudo-element {property: value}
nav a:hover {

Make sure you have 3 nav effects:
Unselected (normal)
Hover (a:hover)
Selected (.selected)

Note: The navigation code shown at the right works. But it is very basic. Make your code look and work nice and at a college level. Use your customized styles and colors. All pages will use the same navigation.

For a live sample showing the html/css structure, see:
.../DivDemo-VerySimpleNav.htm

Example of linking your stylesheet:
<link href="yourSite.css" rel="stylesheet" type="text/css">
Be sure to set body attributes in CSS - -
{width:1000px; margin:auto}

Define a nice consistent nav effect, for example:
nav a:{
color:blue; background-color:white
}
nav a:hover {
color:white; background-color:blue
}
nav .selected{
color:white; background-color:gray
}
nav li {list-style:none; display:inline; padding:0px 14px}

In the body, use the nav element defined above in your stylesheet:
<nav>
  <ul>
   <li><a href="index.htm">Home</a></li>
   <li><a href="resume.htm">
   <span class="selected">
Resume</span></a>
   </li>

   <li><a href="portfolio.htm">Portfolio</a></li>
   <li><a href="contact.htm">Contact</a></li>
  </ul>
</nav>

Notice the <span class="selected"> for "selected" Resume link above.

All pages (Home, Resume, Portfolio, Contact... ) must have attractive college level content, and a common Masthead, linked to a common Nav (with a rollover effect), and the same CSS file.

20 siteName.css

All pages link to the same "External" Stylesheet. There should no longer be an "Internal" Stylesheet.

All pages must have the same width and must be centered on the screen.

That does not mean you should center the page content on the webpage.

All pages have the same consistent Nav
Note: If you set your navigation up for Home | Resume | Portfolio | Newsletter | Contact, make sure you do not change the size of the "hover" or "selected" page link. For instance, if you hover over the Portfolio link and you set the css a:hover to bold or a larger font, then Home | Resume will push or bounce to the left and the Newsletter | Contact will bounce to the right. This is unsightly.  
Enter your name, address and email address at the top of your resume.

Note: the proper way to display Florida in an address is FL (not Fl).

Use both an <abbr> or an <address> tag.
See examples at right.
<h1>William Smith</h1>
<address>
Bradenton, FL 34210<br>
<a href="mailto:Me@MySite.Net">
Me@MySite.Net</a>
</address>


I am <abbr title="Certified Internet Web Associate">CIW</abbr> certified.
5 <address>
<abbr>

I am CIW certified.

(Hover over CIW at top. Add a style to abbr selector to make it distinctive.)
Include a working link to your Email address under your full name.
Example of an Email address:
<a href="mailto:Me@aol.com">Me@MySite.Net</a>
10 mailto:
Use a 2 or 3 column div or semantic element structure with borders. (Alternative HTML techniques may be used.)

Add a comment  <!--  after each closing </div> tag to indicate which div is being closed. See at right.

Your resume and other pages (Home, Portfolio, Newsletter) should be attractive, college level, and consistent - all pages using the same CSS Stylesheet and same Navigation; all pages formatted in similar fashion.

Note1: The box-sizing property takes into consideration both padding and borders, making it easier to set percents.

Note2: Later, when you code your site for Responsive Web Design, you will use a media query to remove the aside and section widths and float attribute to allow the <h2>Education</h2> to display on top of its data when viewed on mobile devices.
Note1: There are a number of ways to create a nice HTML resume. Feel free use an alternative method, but be sure to meet all the grading criteria.

Example of creating columns using <div> tags:
<div id="container">
     <aside>
      <h2>Education</h2>
     </aside>

     <section>
       <p>2017-18 State College of Florida<br>
       Courses: Web Development, Math</p>

       <p>2013-17 Manatee High School<br>
       Varsity Football</p>
     </section>
</div> <!-- / container -->

/* External Stylesheet */
body {width:1000px; margin:auto}
h2 {color:#099}
aside {width:25%; float:left;
       text-align:right;
       padding:14px;
       box-sizing:border-box;}

section {width:75%; float:right}
20

Add comments
to label all closing </div> tags.
(See left)
External hyperlink and a Local (relative) hyperlink to somewhere on the same site. Add at least one external (absolute) hyperlink to another website, such as SCF.edu
Add local hyperlinks to index.htm, portfolio.htm...
10 <a href...
Linked image or a linked logo or a linked button.

Miriam Salpeter, U.S. News & World Report, states that having no photo on your LinkedIn profile may make others assume that you're either "really ugly" or "don't know how to upload a picture." If a person will not hire you if you are grey haired or bald or ..., why waste your time?
Insert a .jpg image of yourself or a logo image, with Alt text, to link to another web page when the image is clicked. Don't just grab the first picture you find; consider a flattering, professional, and well cropped photo.

<a href="index.htm">
<img src="Logo.gif" alt="Home Page">
</a>
10 <img
Categories
Use an <h2> tag that is customized in your cascading stylesheet so it can be attractively and consistently used for each category (Education, Employment, Certifications, Skills, References...).
Include at least 3 major categories, such as Education and Employment, Certifications, References as <h2> tags with a distinctive font and color defined in the style sheet.
Add dates where appropriate, all dates listed as most recent first.
Add city or locations where appropriate.
Spell check everything and make everything attractive.
Example of a categories:
<h2>Education</h2>
<p>
Education Content Here</p>

<h2>Work Experience</h2>
<p>
Employment History Here</p>
20 categories
Reminder: Deprecated (outdated and replaced) tags will not be accepted in this course. Also remember: ALL tags should be in lower case. Do NOT use: <center>, <font>, bgcolor, or <a name="Top">Top</a>
Use instead: <span style="text-align:center; font-family:arial; color:#0FF">
It is far better to use a class in your stylesheet.
-5 for each use of deprected tags
Check your code to make sure you do not have any autostyles. Autostyles are inserted by Dreamweaver and Expression Web whenever you format objects through the menu bar or properties sheet. Both editors name each new occurrence as Autosyle1, Autostyle2... These are not descriptive or helpful names. Edit these names so they are renamed .ChapterTitle or .important or... If you are using Expression Web: right-click any .auto-style1 in the Manage Styles panel (on the right-hand side) and choose Rename to provide a relevant name for every reference to .auto-style1. This will rename it in the internal stylesheet and each time it is referenced as a class. Later cut the style from the internal stylesheet and paste it to the External Cascading Stylesheet that is used for your entire site.

If you cannot see the Manage Styles Panel, choose Panels > Manage Styles or choose Panels > Reset Current Workspace.
-5 for any autostyles that are not appropriately renamed

Avoid "inline" styles.
There should no longer be an "Internal" Stylesheet.

General Check List:
HTML 5 DOCTYPE
Same professional Masthead for all pages
Same professional Nav for all pages
Same External Cascading Stylesheet for all pages
Centered page on monitor, (do not center all content)
General Check List:
Unique page specific <title> for Resume -5 pts each
Unique page specific Meta Description for Resume
Unique page specific <h1> for Resume heading
Comment for all closing </divs> -5 pts each
No deprecated tags like <center> or <font> -5 pts each
No AutoStyles (double check code before you submit)
No spaces for file or image names
You will lose between 3 to 10 points for any of the items to the left that you overlook.
1. Validate and FTP your file(s) to your website.
2. Upload the complete URL address  (http://yourDomain/resume.htm) into the Message portion of the SCF online [Assignment Dropbox].
Validate your code (In Dreamweaver: File > Check Page > Browser Compatibility. In Expression Web: Tools > Compatibility Checker.) Then FTP your file(s) to your website. This project will not be graded if it is not on the Web.
Test your site on multiple browsers: such as IE, FireFox, Chrome, Safari, Opera. Also try to test on a smart phone.

Make sure your finished resume is attractive and complete, fills a full page and will reflect well on your abilities.
When using Expression Web your folder path should be: UserName | My Documents | My Web Sites | YourWebSiteName
The Web site folder of your actual local (USB thumb drive or C:\Users\UserName\Documents\My Web Sites\YourDomainName) and the pubic_html folder in the remote (webserver) website should look now like this:
YourWebSiteName   [Dir] This is your main Folder as seen on drive C - Your image folder and all your .htm files go here
    images     [Dir] This is a subFolder under the main folder (which should be your WebSiteName). All images go here. 
       index.htm Your Home page (usually must be in lower case)
       resume.htm  
       yourSiteName.css Your external stylesheet