ITE 170 Schedule - Spring 2014

ITE 170 Schedule - Section 003, 004,005N - Spring 2014

Last revised: October 15, 2016

The schedule will be updated with links to homework exercises and additional material as the course progresses. The order of topics within Dreamweaver and Flash is likely to be different than shown below due to the change in texts but the topic coverage should be similar. The most current copy of this schedule can be found www.billpegram.com. Material, including exam dates, below the X below is tentative; students should not work on assignments shown below the X since the assignment will likely change.

	Week	Class Topics	Reading/Homework Due (more will be added as course progresses)
	Week 1 Jan 13(M), Jan 15(W), Jan 14, 16 (T-Th) Course Introduction, Web Graphics Images, Fireworks	Course information Student Services at Annandale ITE 170 and GMU Getting started on Annandale computers
		Conceptual Chapter 1 - Felke-Morris - Internet Basics (ppt on Blackboard) screen resolution and pixels - Data on screen resolution and pixels Working with Images (slides 2-5 only - gif and jpg formats) Resizing images in Fireworks for web and print (sample photo)	Felke-Morris, Chapter 1
	Week 2 Jan 27(M), Jan 22(W), Jan. 23, 28 (T-Th) Web Design	Conceptual HTML, XHTML, HTML5 - Depecated tags and attributes Default Pages and Directory Browsing Chapter 2 - HTML Basics - PowerPoint slides (in Blackboard)	HTML5 Tutorial (copies will be distributed) Felke-Morris, Chapter 2
		Hands-On starter.html and create desktop shortcut for Internet Explorer making filename extensions visible <!DOCTYPE html>, <html>. <head>, <body>, and <title> elements <h1> ... <h6>, <p>, <br>, <hr>, <blockquote>, phrase/logical elements ordered and unordered lists, special entity characters (e.g.  ) Validation Structural elements - <div>, HTML5 structural elements: <header>, <nav>, <footer> Absolute and Relative Links, email hyperlinks FTP using CoreFTP - www.nvcc.edu/about-nova/directories--offices/administrative-offices/ithd/students/ftpsettings/, NVCC FTP Instructions, FTP Instructions
	Week 3 Feb 3(M), Jan. 29 (W), Jan 30, Feb. 4(T-Th) CSS	Conceptual/Handson References and XHTML Rules Web Design - Chapter 3 PowerPoint slides in Blackboard - design for target audience, browsers, website organization, principles of visual design, accessibility, text and color design considerations, navigation design, fixed and fluid layouts Cascading Style Sheets - Chapter 4 PowerPoint slides in Blackboard (first part) - CSS selectors and style rules, CSS ways of specifying color, inline, embedded, and external CSS, classes Further references: CSS Reference, CSS validator	CSS Tutorial (reading) Felke-Morris Chapters 3 and 4 Assignment 1 (see Blackboard) due 2/5 at 9am for Wednesday class, due 2/10 9am for Monday class, due 2/10 at 10am for Tuesday/Thursday class
	Week 4 Feb 10(M), Feb 5 (W), Feb 6, 11 (T-Th) CSS, Web Graphics	Conceptual Remainder of Chapter 4 PowerPoint slides - id, contextual CSS (descendant), <span> element References and XHTML Rules (ppt) Web Graphics Styling - Chapter 5 PowerPoint slides on Blackboard - less important: background-attachment, background-position, CSS3 multiple background images, favorites icon, configure list style markers with css, image maps	Felke-Morris Chapter 5 HTML/CSS Assignment (due 2/12 9:00am for Wednesday class, 2/20 10am for Monday and Tuesday/Thursday class)
;		Hands-On Contextual CSS, use of HTML5 structural elements of <header>, <nav> and <footer> -- example to work with, using inline styles to override, using classes to override, using contextual with div, using contextual with html5 tags inline images with the <img> element Image Hyperlinks Background Images and tiling Controlling Tiling of Background Images with CSS background-repeat property- No Control possible with HTML, Using Vertically Tiled Image with CSS margin property for foreground - solid image Using Vertically Tiled Image with CSS margin property for body tag Using Vertically Tiled Image with CSS margin property for foreground - pattern image
	Week 5 Feb 17 (M), 18, 20 (TTh), Feb. 19 (W)	Conceputual More CSS - fonts, text properties, align and indent, width and height, the box model (margin, padding, and borders), center page content through margin:auto Less important content: CSS3 downloadable fonts, CSS3 rounded corners and CSS3 box shadow, CSS3 text shadow, CSS3 background size and origin, CSS3 background clip, CSS3 opacity, CSS3 rgba, hsl, and hsla colors, CSS3 gradients Page layout - CSS Layout examples from Judy Miller Normal flow example one Normal flow example two Float example one Clear example one CSS Float and Clear properties - Use with Images (DW text, p. 230), csslayout1, csslayout2, csslayout3 Two-column layout, navigation with unordered list, psuedo-classes for the a tag (a:link, a:visited, a:hover) Less important content: overflow, positioning, CSS sprites Working with Images (slides 6-10) Fireworks exercise - bluesky image (first 13 steps) Selection exercises: Use flower Selection techniques - adding to, subtracting from a selection, etc	Felke-Morris Chapter 6,7 Box Model - content, padding, border, margin (DW text, p. 228-230) CSS Positioning - static, relative, inherit, absolute, fixed (DW text, p. 229-230)
	Week 6 Week of Feb. 24	fragment identifiers, including Skip Navigation links- e.g http://www.hhs.gov (link becomes visible at far left when you hit the tab key, in IE must first click in the page), www.whitehouse.gov/ (not visible) (.skip{height:1px;left:-10000px;overflow:hidden;position:absolute;width:1px;}) HTML5 elements - <figure>, <figcaption> (example), HTML5 compatibility with older browsers floating figures (img tag alone, figurewithout float, figurewithfloat) CSS media attributes - example with separate external css files for different media, example with common external css file) less important content: CSS3 media queries flexible images (img with height and width in pixels, flexible image) Tables - inclass coding less important content: CSS3 Structural Psuedo-classes - :first-of-type and last-of-type example, :first-child, :last of child, :nth of type(n) Another CSS reference, basic to advanced	Felke-Morris Chapter 8,9 Tables section of HTML5 Tutorial
	Week 7 Week of March 3, Monday class exam will be on Monday March 24	Midterm on Concepts and HTML, CSS, Fireworks - sample multiple-choice/true false questions
	Week of March 10 - Spring Break
	Week 8 3/18, 3/20 (T/Th), 3/19 (Wed), 3/31 (Mon) Dreamweaver	Conceptual/Hands On - Dreamweaver Creating a New Web Page and Adding Keywords and Description Meta Information - http://tv.adobe.com/watch/learn-dreamweaver-cc/creating-a-new-web-page-and-adding-meta-information-dc/ Understanding WYSIWYG Editors - http://tv.adobe.com/watch/learn-dreamweaver-cc/understanding-wysiwyg-html-editors/ Property Inspector, Code, Split and Design View - http://tv.adobe.com/watch/learn-dreamweaver-cc/using-the-property-inspector/ DW site definition the CS5 video (http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs01-defining-a-new-site/ ) provides more detail than the CS6 version at http://tv.adobe.com/watch/learn-dreamweaver-cc/defining-a-site-in-dreamweaver/ ) - process is the same in both versions Adding Pages to Website by right-clicking in Files panel or by choosing File>New Titling page, adding text, and formatting with headings, paragraphs, and line breaks - http://tv.adobe.com/watch/learn-dreamweaver-cc/adding-and-editing-text/ Creating absolute links Previewing web pages - http://tv.adobe.com/watch/learn-dreamweaver-cc/testing-files-in-browsers/ Importance of saving a file before creating relative reference from file Creating Relative links in Dreamweaver - http://tv.adobe.com/watch/learn-dreamweaver-cc/creating-links-dc/ Renaming, Moving, and Deleting Files within Files panel (updating depends on proper site definition) - http://tv.adobe.com/watch/learn-dreamweaver-cc/working-with-files/ Setting up a remote server in Dreamweaver - http://tv.adobe.com/watch/learn-dreamweaver-cc/working-with-a-remote-site/ Dreamweaver FTP - http://tv.adobe.com/watch/learn-dreamweaver-cc/publishing-your-site-files/ - DW puts things in the right place, preserving the folder structure if you use the arrows for uploading and downloading, but drag-and-drop does not local files can appear on the right by choosing Edit>Preferences>Site Inserting Inline Graphics - http://tv.adobe.com/watch/learn-dreamweaver-cc/adding-images/ Setting HTML Image Properties - most are deprecated/obsolete in favor of CSS - see deprecated list (week 3) Making an Image into a Link Setting default images folder in site definition (when inserting file outside of site, will automatically copy into designated images folder within site) Alt and longdesc properties Settiing Page Properties - HTML and CSS, use of color picker to get colors from other sources Unordered and Ordered Lists - http://tv.adobe.com/watch/learn-dreamweaver-cc/creating-bulleted-and-numbered-lists/ Copying and Pasting in Design and Code View http://tv.adobe.com/watch/learn-dreamweaver-cc/previewing-web-pages-dc/ provides information on various ways to preview web pages beyond what was discussed in class	Dreamweaver CS6 text, Chapter 1 (skim), Chapter 2 (Sites), first part of Chapter 3
	Week 9 3/26 through 3/31 (T/Th, W), 4/7 (Mon) Dreamweaver	Hands-On Horizontal Rules and Special Characters (see p.31 and 42-43 in Felke-Morris for the HTML) Find and Replace Check Spelling Named Anchors/Fragment Identifiers (www.youtube.com/watch?v=WoIeq3PS2Es) Image Maps (see also pp. 146-147 in Felke-Morris for the HTML) - sample royalty-free USA map Email links (see pp. 54-55 in Felke-Morris for the HTML) CSS using CSS Styles Panel and Property Inspector Conceptual Students table with CSS for layout Two-column and three column fixed layout using CSS Three-column liquid layout using CSS	Dreamweaver CS6 text Chapters 3-7
X	Week 10 4/1-4/3, 4/7 Dreamweaver	Hands On Intelligent Code Completion for adding CSS in Code View for inline, embedded and external stylesheet Inserting <div> tags for page structure and styling - Insert>Layout>Div, http://tv.adobe.com/watch/learn-dreamweaver-cc/adding-html-structure-for-styling/ Using Predefined Dreamweaver CSS Layouts (DW text, p. 231-242) - put CSS in external file rather than default embedded stylesheet, can use Code Navigator (alt-click to show style selectors (tags, classes, id, compound) affecting point of click and cursor over to see CSS properties and double-click to take you to the CSS code (DW text, p. 225-226) How to Change the Appropriate Stylesheet Property in the Predefined Layouts Using CSS Inspection (DW text, pp. 258-259) - Click on Live button, then Inspect button next to it or choose View>Inspect (shows box model - aqua background, lavender padding, gray borders, yellow margins) - try with sample file Tables with DW (pp. 267-294) - http://tv.adobe.com/watch/learn-dreamweaver-cc/inserting-a-table/, http://tv.adobe.com/watch/learn-dreamweaver-cc/modifying-a-table/ , http://tv.adobe.com/watch/learn-dreamweaver-cc/splitting-and-merging-table-cells/ (begin here Monday 4/14) CSS Designer Panel (new in Dreamweaver CC) - will be covered at end of class if time http://tv.adobe.com/watch/learn-dreamweaver-cc/add-style-to-web-pages-with-css-in-dreamweaver/ (ends suddenly, incomplete) http://tv.adobe.com/watch/learn-dreamweaver-cc/using-the-css-designer-panel/ http://tv.adobe.com/watch/learn-dreamweaver-cc/styling-basic-layout-properties/ Conceptual CSS Frameworks 960.gs CSS Framework for rapid prototyping 12 and 16 column grid demo 960 Grid System Made Easy 960 code example	Dreamweaver homework (due 9am 4/2 in T/Th and Wednesday class, 9am 4/14 in Monday class)
	Week 11 4/8-4/8, 4/14 Dreamweaver	Hands-On Some ITE 170 Past Projects Forms with Dreamweaver including Accessibility (pp. 295-314) - form and action pages Alignment of Forms with Tables Alignment of Forms using CSS float and width properties Image Rollovers in DW - romney, bush (pp. 345-347) Templates and Library Items in DW (pp. 391-410) (Adobe video on templates, DW library video) http://tv.adobe.com/watch/learn-dreamweaver-cc/creating-a-new-template/	Forms HTML, Chapter 10
	Week 12 4/15-4/17, 4/21 Mon (and into week 13 material in Monday section) Flash	Hands-On Flash Drawing tools - pencil, Ink bottle, oval and rectangle, brush Flash drawing models - merge and object Creating gradients Frame by Frame Animation Publishing movie from Flash and Inserting swf from Dreamweaver Onionskinning - onion_start.fla Adding or Deleting Frames	Flash text pp. 1-56, 163-192 (frame by frame animation)
	Week 13 4/22-4/24, 4/28 Mon (and finish Week 14 material in Monday section) Flash	Shape Tweens, Shape Hints, Symbols and Instances, Animation within a Symbol Classic and Motion Tweens, Bitmaps and Tweening Alpha, Masks Button and movie clip symbols	Flash text pp. 149-162 (symbols), pp. 193-210 (classic tweening, pp. 211-222 (shape tweening). pp. 223-264 (motion tweeing), pp. 314-321, 326-330 (buttons, movie clip symbols) HTML portion of Project due
	Week 14 4/29-5/1 Flash, Accessibility, domain names	Conceptual Domain names Some possibilities for future web study Web site hosting Web accessibility (includes University of Washington video) Web content accessiblity guidelines Section 508 standards Designing for inclusion Keeping web accessibility in mind People with Disabilities on the Web (view video), and Principles of Accessible Design Flash CS6 - ActionScripting a Scene Training (Atomic Learning video - suggest using Chrome or Firefox to be able to login) Handw-On ActionScript for buttons to start and stop the main timeline ActionScript for slideshows, website in movie Photos for slideshow Where Do You Go From Here Adobe TV, Down Under: ActionScript 3 101 (thanks to Judy Miller) Adobe TV, Down Under: Programming My Button (thanks to Judy Miller)	Flash portion of Project due
	Week 15 Monday May 5 3:30-5:20 PM(M), Wednesday May 7 7:30-9:20PM(W), Thursday May 8 10-11:50AM (T/Th)	Terms you should understand Final - see times at left

Extra material -

Image editing and creation in Fireworks
Creating a Mobile App in Dreamweaver - Atomic Learning Tutorial with this name through www.nvcc.edu/about-nova/directories--offices/administrative-offices/ithd/students/onlinetraining/index.html (may be easier to access through Firefox or Chrome than IE)