Home   CGS 2820C
  Web Development
#08 Grading Criteria for:
Create a professional Newsletter linked from and to your Home and Portfolio page. Create and attach a Cascading StyleSheet (CSS) to your Newsletter, then attach the same Cascading StyleSheet to your other pages.

Create a professional, attractive, realistic, and relevant Newsletter, with at least two or three paragraphs, using all your own words, and your own images. (If you feel it better fits your site, you can create an About Us or Commentary page instead, as long as you meet ALL the grading criteria listed below.) You should have the same or consistent Masthead for all pages. Add a consistent rollover navigation that links from and to all your other pages (Home page and Portfolio). (If you are using images for your Nav, use a rollover effect for other links on your page.) Modify your External Cascading StyleSheet for your Newsletter, then upload the same External Cascading StyleSheet to all your pages (Home page, Resume, Portfolio, Newsletter). (There should no longer be an "Internal" Stylesheet.)

If you have not finished your site, you may find that your Masthead and Nav will shift when you click on different links. However, if you are coding everything consistently, the masthead and Nav will be in the same place when you are finished. Let's say you have completed the Home, Resume, and Portfolio pages. And then you used the same template set up for your Newsletter and Contact page, but at this point you have no content yet in those pages. Consequently, the length of those pages is short and there is no need for the browser to put a vertical scroll bar on the right. However, your other pages are now complete and full length, and therefore there is a scroll bar. So when you navigate to the completed pages the scroll bar appears. But when you navigate to the incomplete pages there is no scroll bar so the page shifts to the right. This is not a problem at this time in your development, because once all of your pages are completed you will have a scroll bar on all of the pages and you will not have this shifting effect.

Your Newsletter and ALL other pages (Home, Resume, Portfolio) should be full and attractive pages, college level, and consistent: all pages must use the same External Cascading StyleSheet (.css), same professional Masthead, and same Navigation. 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.

  • Save your refined index.htm as newsletter.htm.
  • Delete the specific content from the index page.
  • Make sure the <title> tag, <meta> tags and <h1> are changed to be specific to the newsletter page.
  • Place the newsletter content within the main <div> tag, i.e. inside <div id="wrapper"> or <content>..
  • All pages should have the same centered width (but not across entire screen): body {width:1000px; margin:auto ...
  • Use the same CSS sheet, masthead, and navigation for your home page, portfolio, and newsletter page.

Note: Both Dreamweaver (DW) and Expression Web (EW) will Highlight Invalid Code. To make sure this option is turned on in Dreamweaver, choose View > Code View Options > Highlight Invalid Code (and while in Code View Options, be sure to verify that Line Numbers are also displayed.)

Begin this project by creating a new document: choose File > New > Page or File > New > HTML in either DW or EW. Depending on how you set your preferences, both Dreamweaver (Edit > Preferences) and Expression Web (Tools > Options) will create the skeleton of a new page when you create a new document. They will also define the Doctype through a line of code that appears before the starting <html> tag. DOCTYPE refers to a Document Type Definition (DTD). The DTD contains all HTML elements and attributes and specifies the rules for the markup language so that various browsers can render the page content correctly and consistently. It will also allow your web page editor (EW and DW) to properly highlight invalid code. The default DOCTYPE can also be set in preferences.

The DOCTYPE and first few lines of code for this web page are:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

To set DreamWeaver to start new files with the HTML5 DOCTYPE shown above, choose File > New > Page and chose HTML5 from the DocType: dropdown on the lower-right side of the screen.

Notes on Navigation:
When your Navigation links to webpages in the same site the protocol (http:) and the domain name (xyx.com) are not needed and should not be used in a local link:
<a href="http://mySiteName.com/newsletter.htm">Newsletter</a> should simply be a "relative" address (relative to the current site and local folder), such as
<a href="newsletter.htm">Newsletter</a>.
Also local links should NOT contain: target="_blank"
<a href="newsletter.htm" target="_blank">Newsletter</a>
You should probably open new a window when you go to a new site - so that your site is still up. But you will seldom open a new window when you are on your own site and just going to another webpage on your site.

In HTML, an element is everything between a start and an end tag, including its content, any tag attributes, and any attribute values. Attributes are tag properties, such as color, font-size, font-weight, height, width, or text-align...  These attributes can be given values such as blue, 36px, or center...  Each attribute has a name and is given a value, followed by a colon (:). When multiple attributes are used, each attribute is separated by a semi-colon (;).
For example: <h1 style="color:blue; font-size:36px; font-family:Arial">

Selectors are style names given to elements in a stylesheet. They use this syntax: Selector {Property: Value}
Examples: body {width:900px; margin:auto} or .important {color:red} or #masthead {background-color:#9FC}
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:
   header, nav, footer, section, article, aside {display:block} /* for older browsers */
   body {width:1000px; margin:auto} /* center page on screen */
   h1 {color:#036; font-family:Arial, Helvetica, sans-serif}
   header {width:100%; text-align:center; background-color:#FFC}
   nav {width:100%; text-align:center; border:2px #AAA solid;}
   nav li {list-style:none; display:inline; padding:0px 14px}
   nav a {color:blue; display:inline} /* use display:block for smaller screens */
   main {}
   section {}
   article {}
   aside {width:186px; color:white; background-color:blue}
   footer {}

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:
   /* ID selectors */
   #wrapper {background-color:#FFF}
   #social {height:200px; background-color:#FFC}
   #container {}
   #topNav {text-align:center; padding:12px; background-color:#FCF} Use new nav tag
   #leftColumn {width:186px; color:white; background-color:blue}> Use new aside tag

3. Class Selectors are custom defined styles. They start with a period (.)  Examples:
   /* Class selectors */
   .chapterTitle {font-size:28px; font-weight:bold}
   .important {color:red; font-weight:bold}
   .selected {color:#C0C0C0} /* light grey for current page selected in nav */
In the the actual HTML code classes are called in the following manner:
<span class="chapterTitle">Chapter 1</span> or <p class="important">Notes:</p>
In the <body> IDs are called with the syntax id="idName" as shown below. (You can copy and paste the styles above into the head section, and paste the divs below into the body section and easily test this code.)
   <div id="masthead">
   masthead info here
   </div>
   <div id="topNav"> Use new nav tag below
<nav> <!-- not how li tag is defined above in css -->
  <ul>
  <li><a href="index.htm">Home</a></li>
  <li><a href="Resume.htm">Resume</a></li>
  <li><a href="Portfolio.htm">Portfolio</a></li>
  <li><a href="Newsletter.htm"><span class="selected">Newsletter</span></a></li>
  </ul>
</nav>
   <div id="leftColumn"> Use new aside tag below
   <aside>

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:
blockquote:first-letter {font-size:1.8em; font-weight:bold}
p:first-line {font-variant:small-caps}
a:hover {color:#F0F}
h1:before {content:url('images/arrow.gif')
nav a:hover {color:#F0F}
/* also a:visited, a:active, a:link (unvisited) */

Notepad Tutorials:| Simple Div Demo with Nav
However, make sure you MEET ALL GRADING CRITERIA below.
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
To better understand CSS see: NotePad_Tutorials/CSS.htm with Video

For examples of online newsletters see:
http://faculty.scf.edu/winterf/0ClassFolders/2820Web/1GradingCriteria/08NewsletterSample-Chad.pdf
http://faculty.scf.edu/winterf/0ClassFolders/2820Web/1GradingCriteria/08NewsletterSample_Damaris.pdf
http://faculty.scf.edu/winterf/0ClassFolders/2820Web/1GradingCriteria/08NewsletterSample-Clint.pdf
http://faculty.scf.edu/winterf/0ClassFolders/1570Office/SamplesPDF/Newsletter0_WebServices_Scott.pdf
Topic Directions Points
Include one Cascading Style Sheet that is also linked to all the other pages on your site. This is a college class; make sure this assignment and your site looks like a project worthy of college credit. <link href="SiteName.css" rel="stylesheet" type="text/css">
Add the line above in the <head> to link to ALL pages in your site - this will give you the same masthead and styles for all other pages, such as your index page, which will also be checked for consistency and progress on this assignment.
See: Expression website and CSS Demo
The newsletter is the main grade - but all pages will be reviewed for Nav and styles consistency.
At minimum, set custom styles for your <body> and <h1> selectors (you may also set <p> and <a> and <ol> custom styles...)

Now that you have defined a DOCTYPE,, set your body width in your CSS, and center your page.

You must also use at least two defined IDs in your cascading style sheet and use the div IDs in your html file.

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

All pages must use the same External Cascading StyleSheet (.css), same Masthead, and same Navigation. There should no longer be an "Internal" Stylesheet.

Sample CSS code (note how you set a body width in pixels and then set margin to auto to center all your pages on the screen):

body {
  max-width:1000px;
  margin:auto;
  /* The 2 lines above center page on screen */
}


header {
  background-image:url('images/Banner.jpg');
  height:125px;
}

Sample HTML code in actual page:
<header>
<!-- All masthead content may come from .css -->
</header>
10

This is a <div> and styles assignment. This is not a table assignment.

Set the width and margin for all pages on your site to center the page on the screen.

However, you should not center the text on the webpage.

Use a pseudo element for a Nav rollover effect for all pages. A rollover means that when the mouse rolls over or hovers over the link, the link changes color or style to indicate the possible selection. Note: Normally you would not make the rollover effect produce a larger font size or bolder font. That is because a larger font size or bolder font would be wider and would cause the rest of the links to the left or to the right to shift to make room for the larger size, and this would create an unsightly "bounce."

If you are using images for your Nav, use a rollover effect for other links on your page.

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

Improve your Nav in your Cascading Stylesheet to set the styles for the Navigation of your Website. Example of code in CSS:
nav {text-align:center; font-weight:bold ...}

Use the hover pseudo-element in the Nav Div of the Cascading Stylesheet to create a rollover effect in the Navigation of your Website. Example of code in the Cascading Stylesheet:
nav a:hover {
  color:magenta;
  background-color:yellow
  }


Example of code in body of your web pages:
<nav>
  <ul>
  <li><a href="index.htm">Home</a></li>
  <li><a href="Port.htm">Portfolio</a></li>
  <li><a href="News.htm">
  <span class=
"selected">Newsletter</span>
  </a></li>

  <li><a href="Resume.htm">Resume</a></li>
  <ul>
</nav>

See DivDemo-VerySimpleNav.htm
Then right-click and View Source.

10

Consistent Nav
Rollover effect

Using your external stylesheet, add a box (which is really a Border) around part of your newsletter.   This is from a class called .box defined in the css   
 
.box {border:2px blue solid}
10
Include an <h1> and <h2> tag that are defined in the external css sheet with different color (any color but black) and font attributes.

Use a <blockquote> with a style to Full Justify the main text:
style="text-align:justify"

Use a pseudo element for an enlarged first-letter of the newsletter.

Modify pattern at right.
Example of code in the Cascading Stylesheet:
h1 {color: #003366;}
blockquote {text-align:justify}
blockquote:first-letter {font-size:1.8em; font-weight:bold}
.box {border:2px blue solid}


Example of code in body of your web page:
<blockquote>
Text goes here, notice the indent below

</blockquote>
Text goes here, notice the indent that is the result of using a <blockquote> tag for this short demo paragraph. Also notice that both the left and the right margins are justified or aligned straight as defined in the cascading stylesheet.
10

This is a <div> and cascading styles assignment.

This is NOT a table assignment.

 

Include a good Title, Date, the Byline (author), and either an <hr> tag or an attractive line image

ACME Quarterly Newsletter

Fall 2017 by Floyd Jay Winters

10
Add an Infobar  or Special Section header/banner with an "inverse" background, (light print on a dark bar). This is part of your newsletter, not part of your Nav or Masthead.  Web Seminar in Sarasota 

This Infobar is just light text on a dark background, with a &nbsp; before and after. Figure it out :-)
10

This is not part of your nav or your masthead.
Add Bullets with a relevant image.

Follow the pattern at right. Make sure you upload the image to your images folder on the server.
<ul style="list-style-image: url(images/point.gif)">
  •  Item 1
  •  Item 2
10
Add at least two CSS3 features that we have not covered in class See the CSS3 link for more infomation on the newer features of CSS3. Visit the sample tutorial links and find at least one feature that you want to add to your site. Make sure it will work on IE and FF.
When you upload your URL to the assignment dropbox, include a short note indicating where and what the CSS3 feature is.
20
Include at least 2 or 3 full paragraphs, each consisting of multiple sentences. Make your newsletter look complete, professional, attractive, and relevant to your site. 10
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
Use instead:
<p style="text-align:center; font-family:arial; color:#0FF">
It is far better to define the <p> tag in your stylesheet.
-5 for each use

Do not use a table for this assignment.
Check your code and make sure there are no "auto-styles1" or "style1" styles in your internal style sheet. Autostyles can be added automatically by Expression Web or Dreamweaver whenever you format text.

EW: To rename the .auto-style1 class to a relevant name such as KeyTerm or Important or Button: find and right click it in the Apply Style panel. Choose "Rename." The Rename class dialog box appears. Enter a descriptive style name, such as button or important, then click OK.
- 5 points for each auto-style that is not appropriately renamed.

Validate your file. See: http://validator.w3.org/
or for HTML5: http://validator.nu/
Optimize your page. See: web page Optimizer

Examine your code before you submit your newsletter to the Assignment Dropbox.

Verify that all of your images display properly, and make sure that each image has an associated alt tag.

Right-click and View Source in FireFox. Errors will show in red. -5 points for each error

-5

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 Newsletter -5 pts each
Unique page specific Meta Description for Newsletter
Unique page specific <h1> for Newsletter 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.
Test on multiple browsers: such as IE, FireFox, Chrome, Safari, Opera. Also try to test on a smart phone.

1. FTP your files to your website.
2. Upload the complete URL Web address to the SCF Canvas online Dropbox.
FTP your files (newsletter.htm and any images in the images folder) to your website. This project must be on the Web.
 
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 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)
       newsletter.htm  
       portfolio.htm Your artwork, or books, or items for sale...
       resume.htm  
       transcript.htm  
       yourSiteName.css Your external stylesheet (There should no longer be an "Internal" Stylesheet)