Newsletter

CGS 2820C
Web Page Development #09 Grading Criteria for:
Create a professional Newsletter linked from and to your Home, Resume, and Portfolio page. Attach your improved CSS to your Newsletter, and to your other pages.

Create a professional, attractive, realistic, and relevant Newsletter, with at least two or three paragraphs, using all your own college level words, and your own relevant images. If you feel it better fits your site, you may create an About Us page instead, as long as you meet ALL the grading criteria listed below. Add a consistent Rollover Navigation that links from and to all your other pages (Home page, Resume, and Portfolio). Modify your External Cascading StyleSheet for your Newsletter, then upload the same External Cascading StyleSheet that is linked to all your pages. (There should no longer be inline styles or an "Internal" Stylesheet.)
Your <nav> for all pages will eventually contain:
Home | Resume | Portfolio | Newsletter | Contact

Note: You can quickly rebuild your entire site using WordPress. See:
https://www.youtube.com/watch?v=ffjN4Bpj2FM

Short Interactive Tutorials:

W3Schools BlockQuote:

W3Schools Layout Tutorial:

W3Schools Pseudo-elements

Try It Yourself

Save your lastest update of 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> tag.
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: If you choose to rebuild your website in WordPress, you still must meet the requirements below in order to receive full credit. Then submit the absolute WordPress URL address to the Canvas assignment Dropbox. Most WordPress Themes and editors have features to allow you to edit the HTML or CSS. My WordPress theme has a Visual tab for normal editing and a Text tab for HTML editing. My Theme editor also has an option for Additional CSS.

Selectors are style names given to elements in a stylesheet. They use this syntax: Selector {Property: Value}
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 */
   blockquote {text-align:justify}
   main {}
   section {}
   article {}
   aside {width:186px; color:white; background-color:blue}
   footer {}

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

3. Class Selectors are custom defined styles. They start with a period (.) Examples:
   /* Class selectors */
   .box {border:2px blue solid}
   .selected {color:#C0C0C0} /* light grey for current page selected in nav */

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) */

Also see: https://www.w3schools.com/w3css/ and https://www.w3schools.com/w3css/w3css_templates.asp for responsive mobile first design templates.

HTML Tutorials and Newsletter Examples below

Notepad Tutorials:| Simple Div Demo with Nav
To better understand CSS see: NotePad_Tutorials/CSS.htm with Video
09-NewsletterSample-Chad.pdf
09-NewsletterSample-Damaris.pdf

Responsive Web Design (RWD) Demo and Template (with Pancake)

Make sure you MEET ALL GRADING CRITERIA below.

Topic Directions Points

You still need
A unique <title> briefly describing your page
Meta Description: <meta name="description" content="Longer Page Description">
The same Stylesheet: <link href="SiteName.css" rel="stylesheet" type="text/css">
The same <nav>, <header> <footer> and stylesheet (.css) as your Home page and Resume
A comment for each closing </div> Example: </div> 
If you do not have a security certificate your URL/Web address is http://site.com, not https://site.com Points
-5
-5
-10
-10
-3
-1

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

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.

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;

/* center page on screen */

header {

	      background-image:url('images/Banner.jpg');

	      padding-top:25%; background-size:cover; 
	    

	    }

Sample HTML code in actual page:
<header>

</header>

-10

Build a nice header with an image or a transition slide show/carousel.

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 live DivDemo-VerySimpleNav.htm
Then right-click and View Source.

10
Consistent attractive Nav with a

Rollover

rollover effect (on hover) and a special font/effect.

Use the same External CSS stylesheet for all pages. Make your Nav look good!!!

When you revise your stylesheet you may need to tap [Ctrl] + [F5] to refresh your background images and background styles.

(p 434)

Using your external stylesheet, add a box (which is really a Border) around a special part of your newsletter. This is from a class called .box defined in the css
.box {border:2px blue solid} 10
.box class
(p 303)

Include an <h1> and <h2> tag that are defined in the external css sheet with different color (any color but black) and font attributes.

A Blockquote adds indentation to both the left and right margins. Use a <blockquote> with a style to Full Justify the main text:

style="text-align:justify"
(Note 
	  how sample at right has left and right margins are both straight or full 
	  justified)

Use a pseudo element for a noticeable and enlarged first-letter for the blockquote paragraphs of the newsletter.

Modify the pattern at right. Do not put a <p> tag inside a <blockquote>

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.Do NOT put <p> tags inside <blockquote> tags.

30 total
In Cascading Style Sheet set attributes for and use:
blockquote (10)
(p 52, 370)
:first-letter (10)
(p 289)
:justify (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. Use different colors, width, height, and design than those shown at right.

ACME Quarterly Newsletter

Fall 2022 by Floyd Jay Winters

<hr style="width:80%; border:4px solid #039; border-radius:6px">

10
Attractive Byline
with your own design and colors and width.

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   before and after the text content. Figure it out :-) 10

Infobar which 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
relevant ul image

Add at least two new CSS3 features that we have not covered in class.

Do a Web Search on:
Free Cool CSS3 code

When you upload your URL to the assignment dropbox, include a short note indicating where and what the CSS3 feature is.

Helpful CSS3 Links with live demos and code samples:

https://www.w3schools.com/css/- W3Schools, interactive: click the [Try it yourself] button.
http://css-tricks.com/examples/ShapesOfCSS/ - shapes, with code shown below
ttp://www.css3maker.com/ - scrollbars to set values, live results, and actual code
http://css3please.com/ - make changes to code, see results live

Zen Garden CSS demos - click links on right to keep text but change CSS

To view and modify stylesheets of other sites live on the web:
Right-click the webpage and choose View Source, then click on the CSS link. OR
Right-click the webpage and choose Inspect and play with the code.

20
Find and use Two CSS3 features NOT covered in class - add note to dropbox identifying these.

Do a Web Search on:
Free Cool CSS3 examples

Include at least 2 or 3 full paragraphs, each consisting of multiple sentences. Each paragraph is full justified. Make your newsletter look complete, professional, attractive, and relevant to your site. 10
2-3 full informative paragraphs

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.

- 5 points for each auto-style that is not appropriately renamed.

NOTE: as you make changes to your external CSS file, some browsers may not automatically update your CSS file and therefore may not reflect your most recent changes. To force a CSS update - load your web page then right-click and View Source > double-click the <link href="yourStyles.css"> link to open your CSS file > hit Refresh or tap F5 to update the file as well. Then refresh your html page. Confirm that you can see your changes in the CSS code.
You may also try a Hard Reload:

[Ctrl] + [F5]

Force Hard Reload to display the most recent images, styles and scripts

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

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

-5

Avoid "inline" styles.
There should no longer be an "Internal" Stylesheet or it should be very small and specific to just that page.

ALSO:
No "auto-styles1" or "style1" styles in your internal style sheet.

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 specific <meta name="description" for Newsletter
Unique page specific <h1> for Newsletter heading
Comment for all closing </div>s -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 Edge, FireFox, Chrome, Safari and smart phone. FTP your files (newsletter.htm and any images in the images folder) to your website. This project must be on the Web. Upload the complete URL Web address to the SCF Canvas online Dropbox.

The Web site folder of your actual local C:\Users\UserName\Documents\My Web Sites\YourDomainName and remote (webserver) website should look now like this:
YourSiteName [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 root folder. *All* images except possibly favicon.ico go here
favicon.ico	This is often in the images folder. See Favicon Tutorial and Favicon Generator
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	Your resume in two columns
transcript.htm	A transcript page using an unordered, an ordered list and a description list
yourSiteName.css	Your external stylesheet (There should no longer be an "Internal" Stylesheet)