The schedule will
be updated with links to homework exercises and additional material as the
course progresses. The most current copy of this schedule can be found
www.billpegram.com. Material, including exam dates, below the X in the first column 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 12(M), 14(W)
Course Introduction, Web Graphics
Images, Fireworks |
|
|
| |
|
Conceptual
|
|
| |
Week 2
Jan 21 (W), Feb 2(M-due to weather cancellation 1/26)
HTML |
Conceptual
|
- Upload photo homework due
- HTML5
Tutorial (copies will be distributed)
- Felke-Morris, Chapter 2
|
| |
|
Hands-On
- starter.html and create desktop shortcut for Internet Explorer
- Showing menu bar in Internet Explorer - right click on blank area at top of screen>click on Menu Bar
- making filename extensions visible - Windows Explorer>Organize>Folder and Search Options>View>uncheck Hide Extensions for Known File Types
- <!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
|
|
| |
Week 3
Jan 28 (W), Feb 9(M)
Design, CSS
|
Conceptual/Handson
- 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
- NVCC Website Before May 2015 Redesign
|
|
| |
Week 4
Feb 4(W), Feb. 16 (M)
CSS,
Web Graphics
|
Conceptual
- Remainder of Chapter 4 PowerPoint slides - id, contextual CSS (descendant), <span> element
- Absolute and Relative References and XHTML Rules
- 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 Chapter4 (rest), Chapter 5
- Homework 3 and 4 due 2/11 in Wednesday class (see Blackboard)
Homework 3 due 2/16 and homework 4 due 2/23 in Monday class (see Blackboard)
|
| ; |
|
Hands-On
|
|
| |
Week 5
Feb. 11(W), Feb. 16 (M)
|
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:
- Page layout - CSS Layout examples from Judy Miller
- CSS Float and Clear properties
- 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
|
- Felke-Morris Chapter 6,7
- Box Model - content, padding, border, margin (DW text, p. 437-441)
|
| |
Week 6 February18 (W 12:30), Feb. 23 (M), Feb. 25 (W 7:30)
|
- 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
- fragment identifiers, including Skip Navigation links- e.g http://www.hhs.gov, www.whitehouse.gov/
- 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 no specification of height and width, 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)
|
|
| |
Week 7
February 25(W 12:30), March 16(M), March 18 (Wed 7:30)
Dreamweaver |
Conceptual/Hands On - Dreamweaver
- Dreamweaver overview - What is Dreamweaver (1 minute video)
- Understanding the Box Model (3 minute video)
- Learn the User Interface (5 minute video)
- Property Inspector (3 minute video).
- DW site definition
in CS5 (5 minute video), CC version (5 minute video) - 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
-
- Creating absolute links
- Design and Live View and Previewing Pages in Various Browsers (6 minute video)
- Importance of saving a file before creating relative reference from file
- Creating internal and external links - (6 minute video)
- Renaming, Moving, and Deleting Files within Files panel (updating depends on proper site definition)
-
- Setting up a remote server in Dreamweaver
- Dreamweaver FTP - (5 minute video) - 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 and Alternative Text - (5 minute video)-
- 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)
- Settiing Page Properties - HTML and CSS, use of color picker (at lower right portion of panel) to get colors from other sources
- Unordered and Ordered Lists - (7 minute video)
- Copying and Pasting in Design and Code View
-
|
Dreamweaver CC: The Missing Manual -- free online at http://proquest.safaribooksonline.com.ezproxy.vccs.edu:2048/book/web-design-and-development/9781449365189/dreamweaver-cc-the-missing-manual/index_html?query=((Dreamweaver+CC%3a+The+Missing+Manual))#snippet |
| |
Week 8
March 4 (W 12:30 and 7:30), March 2 (M)
|
|
|
| |
Week 9
March 18 (W aft), March 25 (Wed even), March 23 (M)
Dreamweaver
|
Hands-On
- Adding Keywords (Insert>Head>Keywords) and Description (Insert>Head>Description) Meta Information -
- Horizontal Rules (Insert Horizontal Rule) and Special Characters (Insert>Character; see p.31 and 42-43 in Felke-Morris for the HTML)
- Find and Replace
(Edit>Find and Replace)
- Check Spelling
(Command>Check Spelling)
- Named Anchors/Fragment Identifiers
(www.youtube.com/watch?v=WoIeq3PS2Es - 8 minute video)
- id's are assigned in the Property Inspector and the links to those are as well, with the id preceded by a # sign, click on desired tag in Tag Selector at bottom of screen before assigning id to make sure it's assigned to correct tag and can use dropdown menu in Link box to reuse links
- Image Maps
(see also pp. 146-147 in Felke-Morris for the HTML)
- sample royalty-free USA map
- Example - picture of people at www.mediawiki.org/wiki/Extension:ImageMap,
http://camping.about.com/od/campgroundreviews/l/blpcgndx.htm
- Email links
(see pp. 54-55 in Felke-Morris for the HTML)
- Insert>Email Link
- CSS Designer Panel (new in Dreamweaver CC) - Using the CSS Designer Panel
Conceptual
|
|
| |
Week 10
March 25 (W aft), April 1 (Wed even), March 30 (M)
Dreamweaver
|
Hands On
- Attaching Style Sheet to File if not done at page creation - Format>CSS Styles>Attach Style Sheet
- Using Adobe Edge Web Fonts (Missing Manual, pp. 128-133)
- Intelligent Code Completion for adding CSS in Code View for inline, embedded and external stylesheet
- Inserting <div> tags for page structure and styling - Insert>Div,
Inserting Structural Elements (8 minute video)
- Using Predefined Dreamweaver CSS Layouts
- 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
- How to Change the Appropriate Stylesheet Property in the Predefined Layouts
- Tables with DW
- Insert a Table (7 minute video)
- Missing Manual, pp. 269-308
Conceptual
|
- Dreamweaver homework (due March 25 in Wed aft class, April 1 in Wed even class, and March 30 in Monday class
|
| X |
Week 11
April 1 (W aft), 6(M), 8(Wed. even)
Dreamweaver
|
Hands-On
|
- Project Proposal due (April 1 in Wed aft class, April 8 in Wed even class, April 6 in Monda class)
- Forms HTML (doesn't have new HTML5 features), Chapter 10
in Felke-Morris
|
| |
Week 12
April 8 (W aft), April 13 (M), 15(Wec. even)
Flash
|
Hands-On
- Flash formats - ActionScript 2.0 (not present in CC), ActionScript 3.0, HTML5 Canvas, WebGL(Preview)
- 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
(for Flash created in ActionScript format)
- Onion skinning
- onion_start.fla
- Adding or Deleting Frames
|
|
| |
Week 13
April 15 (W aft), 20 (M), 22(Wed even)
Flash
|
|
|
| |
Week 14
April 22 (W), April 27 (M), April 29 (Wed even)
Flash
No Class April 29 Wednesday afternoon
|
Hands-On
Some training videos you may find useful
- Adobe TV, Down Under: ActionScript 3 101 (thanks to Judy Miller)
- Adobe TV, Down Under: Programming My Button (thanks to Judy Miller)
- Atomic Learning video on Flash CS6 - ActionScripting a Scene Training - go to STUDENTS: Access Atomic Learning and after entering your username and password, search for Flash CS6 - ActionScripting a Scene Training on the Atomic Learning site
|
|
| |
Week 15
Monday May 4 3;30-5:10 (Monday class), Wednesday May 6 12-1:40 (the 12:30 section),
Wednesday May 6 7:30-9:10 (the evening section) |
|
|
