#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
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
Notes on Navigation:
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
Selectors are style names given to elements in a stylesheet. They use this syntax:
NOTE: In Dreamweaver you can choose > Commands > Apply Source Formatting to set conventionally indented tabs in the CSS stylesheet.
Notepad Tutorials:| Simple Div Demo with Nav
For examples of online newsletters see:
|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.||
Add the line above in the
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
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.
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
Sample HTML code in actual page:
<!-- All masthead content may come from .css -->
This is a
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."
Make sure you have 3 nav effects:
Improve your Nav in your Cascading Stylesheet to set the styles for the Navigation of your Website.
Example of code in CSS:
Then right-click and View Source.
|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
Use a pseudo element for an enlarged first-letter of the newsletter.
Modify pattern at right.
|Example of code in the Cascading Stylesheet:
Example of code in body of your web page:
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.
This is a
|Include a good Title, Date, the Byline (author), and either an
ACME Quarterly NewsletterFall 2017 by Floyd Jay Winters
|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. Figure it out :-)
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.
|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.
|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
|-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
Right-click and View Source in FireFox. Errors will show in red. -5 points for each error
Avoid "inline" styles.
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.