It's always better to NOT waste paper. Try to learn to look at two windows at once on the screen. Exercises are subject to corrections & changes! Please do not rely on a printout of this assignment! Always check the online version for corrections and any links which will not be available in the printout.

There are LINKS on this page that you must click on. Do not email me to ask where the information is. Go back to the website and look at the page online!

POINTS: 76 points

SUMMARY: Make improvements to site, add 2 more pages and additional styles, Technical testing screen shots

Milestone 5 will be testing & evaluating of sites by fellow students. Assignments must be posted on time in order to be included in Milestone 5.


Basic requirements for this milestone. Please look at the checklist criteria and check that all your pages meet the criteria! No points will be awarded for page lacking sufficient content. At least 3 paragraphs or other content. Content should be enough to justify the page being a separate page versus the information being a part of another page.

  1. Look over Milestone 3 comments and make corrections to your site. Anything not corrected will result in additional points being subtracted from your score. Learn from past mistakes and don't repeat the do the same thing again. Milestone 3 be regraded.
    If structural corrections are not made from Milestone 2 and 3, 15 points will be deducted from this milestone.
  2. (14 pts for each page) Create 2 additional page be sure to save the files within your ICS107Site top level folder.
    • Grading Criteria
      • Pages are created using the template for your site. Save the file with the file name used on the navigation links.
        All web page files must be saved to the top level of your ICS107site folder.
      • Page has sufficient content. Content (previously submitted) is pasted into page and appropriate codes are added to make paragraphs, lists, heading, and any other text structures.
      • Double check all content to make sure it is in a proper structure. Look at the code to be sure paragraphs are defined by separate paragraph codes<p>..</p> and not by line breaks <br>
      • ALL IMAGES, STYLE SHEETS, HTML PAGES MUST BE SAVED WITHIN YOUR MAIN FOLDER!. Images may be saved in a sub-folder of the main folder, but do not save your project files in your exercises folder.
      • A unique title for each page,(title is the HTML code title and not a heading, though the first heading and the title can contain the same words. The tile should also include your site name.
        • For instance the first chapter in Alice in Wonderland has the title Alice in Wonderland Chapter 1. Chapter 1 alone is insufficient. Someone bookmarking the site won't know what Chapter 1 belongs to.
      • Page meets checklist criteria. - Points are awarded based on the checklist criteria.
  3. Make changes to style sheet to reflect improvements on visual design. Possibilities are endless. Here are a few ideas but come up with more on your own - Adding visual appeal: change font style, colors for elements, incorporate background graphics/colors in non-text areas. Improving layout: ensure your layout flows smoothly, and also limit the width of your content area! CSS reference
    1. (12 pts) Include new styles for at least 3 elements with a combination of at least 12 attributes. (These are in addition to the styles from the last milestone.)
    2. (4 pts) Styles that apply to all your pages MUST be placed in ONE external style sheet file that is linked to your template and to ALL your pages (The same style sheet should be linked to each page. Do NOT create sepearate style sheets for each page.
      1. If a style is used on just one page, then it may be placed in the head section of that page.
    3. (15 pts) Changes must meet the checklist criteria, particularly the accessibility & usability items. None of the styles added interfere with accessibility and the site now fully meets all accessibility criteria.
    4. (5 pts) No unnecessary styles - styles that don't do anything. For example:
      1. Check for styles set on parent element don't need to be set on every subsequent element
      2. Styles to center text should be centered text-align and not auto left & right margins
      3. Styles to center blocks (such as divisions) should be left & right margins and not centered text-align
      4. Styles that set things to the default such as setting text color to black or the background to white (unless needed to overrule a cascaded style such as a body background or color)
      5. Styles set more than once.
      6. Any other style which does nothing. If experimenting - delete styles that don't do anything when you set them.
  4. (12 pts) Check your pages from the server using different resolutions and web browsers. For each of the steps below take a screen shot to show that you have completed the item correctly. All screen shots should be for the same page. To take screen shots:
    For Macs: Screen shots can be made by pressing Command-Shift-3 which will save the screen shot as a file. Most likely saved on your desktop
    For Windows 8-10: Press and Windows key and the PrintScreen key simultaneously. This will create a screenshot file within the Screenshots folder which will be created in your Pictures folder.
    For Windows 7 & earlier: Press PrintScreen (sometimes labeled PrntScrn) - this copies the screen so it appears nothing happened. In order to see the screen shot, it needs to be pasted into an image editing program and save the image as a JPG file or into wordprocessing or presentations file.
    1. Check in normal resolution
      1. For Windows users check in Internet Explorer using the normal resolution for your computer. Take a screen shot of the main page of your website project then save the file as IE-normal.jpg. (If pasting into another file, type in the name above the image.)
        Note Microsoft Edge & Internet Explorer are not the same thing. Edge does not have the same capabilities. Here's an image showig both icons, use the one labeled Internet Explorer. (Background colors may vary on your computer.)
      2. For Mac users check in Safari using the normal resolution for your computer. Take a screen shot of your main page then save or rename the file as SF-normal.jpg
    2. Check with increased font --- Do NOT use the Zoom feature which only magnifies the whole page. We want to see the effects of increasing the actual font. Follow the instructions below:
      1. Windows users Check Internet Explorer with the font increased to largest. Not Zoom! From menu select View-Text Size-Largest. (If you don't see the menu press Alt.) Take a screen shot of the main page of your website project then save the file as IE-largefont.jpg or paste in a word processing document and label it IE-largefont.jpg. Be sure to set your font back to normal when you are finished. (If pasting into another file, type in the name above the image.)
      2. If using Mac,Safari's latest version (6) has taken away the ability to increase the font size without zooming. If you have access to a Windows computer, test your site using Internet Explorer on Windows (see instructions above). If not, use Firefox or Chrome on the Mac. In Chrome, Select Settings. At the bottom click Show advanced settings. In the Web Content section, use the Font size drop-down menu to make adjustments change to very large. In Firefox, click on the Firefox button, then select Options, then select the content panel. In Fonts and Colors click on Advanced and change the font size for minimum font size to a size of 24 Take a screen shot of the main page of your site. Be sure to set your font back to normal when you are finished. Rename the file as Safari-largefont.jpg
      3. Note: The size of the text should change when you do this. If your text doesn't change in size, a fixed-pixel size is used and should be deleted from the styles.
    3. Check in Firefox or another browser other than the one used above using the normal resolution for your computer. Take a screen shot of the main page of your website project then save or rename the file as browsername-normal.jpg (or paste in word processing and label with the browser name) If you don't have any other browser you can download one and install on your computer. Possibilities:
      1. Firefox
      2. Opera
      3. Chrome
    4. Use the WebAim's Accessibility checker for the first page of your website. (Submit a screen shot of your results) If you have accessibility errors. Make corrections to your page and upload your pages to the server.
    5. Create a compressed folder named yournameMilestone4.zip (substitute your first name for yourname) add the four image files to this folder and submit the file on Laulima. If screen shots were pasted into a file, just submit the file - be sure all the images are properly labeled. The screen shots will be submitted on Laulima.
  5. Upload ALLof your website files to the server including pages previously submitted and your template (located in the template folder for Dreamweaver and whereever you saved it in Expressions Web). Might be easiest just to upload the entire site.

Note: Grading for this assignment normally takes me extra time to complete. Please be patient and don't email me regarding whether your assignment has been graded. When your assignment is graded, I will release your score. Check Laulima.

  1. Printable checklist

    Website Checklist

    Proper Structure

    Page title specified

    • Pages must have a title specified.
      • The title for each page might begin with the name of your site, then have the words from the top heading on your page. Title must accurately describe the page. Each page in your site should have a unique name.

    Proper use of HTML

    • Paragraphs are defined as paragraphs
      • Do not indent paragraphs - Using the indent in Dreamweaver, inserts blockquote HTML.
    • Longer quotes should be defined as blockquotes. Short quotes within a paragraph do not need to be defines as a blockquote
    • Lists of items are defined as lists.(Note: Lists of links for navigation are lists.)
      • If order of items matters - ordered list is used
      • If order does not matter - unordered list is used
      • If a list of terms and definitions - definition list is used
    • Headings are defined as headings
      • Each page must have at least one unique heading to describe what is on that page this is in addition to a heading that identifies the site.
      • Headings must be appropriately applied - think of the headings as an outline.
        • h1 is a main heading. It must be present before an h2 level is used.
        • h2 is a subheading of h1 heading and must be present before an h3 is used.
        • h3 is a subheading of h2 heading and must be present before an h4 is used.
        • h4 is a subheading of h3 heading and must be present before an h5 is used.
        • h5 is a subheading of h4 heading and must be present before an h6 is used.
        • h6 is a subheading of h5 heading - last level
      • This does not mean that each heading number in your web page is used sequentially. Do NOT have h1 as your first heading on the page, then h2 as your second heading on the page then h3, then h4, then h5, then h6. Only use the next number if it is a subheading of the previous heading.
    • Keeps styles & structure separate.
      • Do not use left, right, center alignment as HTML coding
      • Do not use any formatting in HTML that is a style choice. In HTML bold and italic should be used only to emphasize a particular word or set of words.
      • If you want all words in a heading or other element to be bold or italic do not use the HTML coding.
    • Tables are used only to organize data, NEVER as a layout tool.
    • Do not enter deprecated tags (b,i, center, font) into the source code.
    • Any other improper use of HTML.

    Accessibility & Usability

    CSS should add visual appeal, but not detract from accessibility and usability.

    CSS styles should be stored in an EXTERNAL style sheet which is linked to your TEMPLATE.. Styles that are used for one page only may be internal styles defined in the head section of the page they are used, but the majority of your styles will be in the external style sheet.

    Alternatives are available

    • Images have alternative text
      • Image should be accurately described. One word is usually not enough!
      • Images with words should have the words as part of the alternative text.
      • Images used for decorative purposes only should have a space as the alternative text (do not leave blank!)
      • Images used to illustrate a point should have alternative text that details the illustration - may need a long description
    • Menus that drop down, slide out, or otherwise require fine motor movement, should have alternative means of accessing the same menu items.
    • Image maps should have an alternative text available with all the options on the image map
    • Recorded narrative should have a transcript and recorded video should have a long description and/or transcripts. (Optional for this class, due to the length of time involved in creating transcripts and long descriptions.)

    Readability

    • Text is spell checked (In Dreamweaver, use keys Shift-F7 or from menu Commands - Check spelling). Proper grammar is used.
    • Text is legible
      • High contrast between foreground & background (including any background images)
      • Background image does not interfere with readability
      • Font, styles and color choices should not interfere with readability.
        • Italics, oblique, bold and decorative fonts are very difficult to read for entire paragraphs
    • Allow for accessibility
      • Fixed pixels for font should be avoided. If you feel it is necessary, explain to the instructor why in the comment box. To increase the size of headings - use percents or ems
    • Control the page width for wide screen monitors
    • Anything else that interferes with readability of text.

    Submitting your assignment

    When you are finished with this milestone:

    • Upload all of the files using FTPSync
    • Check the pages using your web address!
      • Do NOT submit your assignment until you have all the files and images are visible from the server and all links are working.
      • Email me immediately if you are having difficulties with this.
    • On Laulima in Assignments, Tests, & Surveys, post your web address PLUS the names of pages to be graded. List only the amount needed for this assignment. All others will be ignored.
    • Also submit your screen shots in Laulima.

    Note: Grading for this assignment normally takes me extra time to complete. Please be patient and don't email me regarding whether your assignment has been graded. When your assignment is graded, I will release your score. Check Laulima.