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
Aug 24(M), Aug 26(W)
Course Introduction, Web Graphics
Images, Fireworks |
|
|
| |
Conceptual
|
|
Week 2
Aug 31 (M), Sept 2 (W)
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
Sep 9(W), Sep 14(M)
Design, CSS
|
Conceptual/Hands on
- 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 - using courseinformationpractice.html
- Further references: W3C CSS Reference, CSS Reference, CSS validator
- NVCC Website Before May 2015 Redesign
|
|
Week 4
Sept 16 (W), Sept 21 (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, downloadable fonts
- Current browsers no longer display borders on Image links - image with transparency, image with transparency and link, image with transparency and link and CSS specified border
|
- Felke-Morris Chapter4 (rest), Chapter 5
- Homework 3 due (see Blackboard for assignment)
|
| |
Hands-On
|
|
Week 5
Sept 23 (W), Sept 28 (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
|
- Homework 4 due (see Blackboard for Assignment)
- Felke-Morris Chapter 6,7
- Box Model - content, padding, border, margin (DW text, p. 437-441)
|
Week 6
Sep 30 (W), Oct 5 (M)
|
- 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
- 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
Oct 7(W),
Oct 19 (M)
Dreamweaver |
Conceptual/Hands On - Dreamweaver
If the videos below don't work in one browser, try another browser; generally Chrome worked better for me than IE
- 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
- adding text, and formatting
with headings, paragraphs, and line breaks
-
- Creating absolute links
- Importance of saving a file before creating relative reference from file
- Creating internal and external links - (5 minute video)
- Renaming, Moving, and Deleting Files within Files panel (updating depends on proper site definition)
-
- Dreamweaver FTP (requires site definition) (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 left (like they do in CoreFTP) by choosing Edit>Preferences>Site
- Inserting Inline Graphics and Alternative Text and Using CSS Designer Panel to Float Image and Add Margin - (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, titling page, use of color picker (at lower right portion of panel) to get colors from other sources, specification of font-family for page, Adobe web fonts
- Unordered and Ordered Lists - (7 minute video)
- Copying and Pasting in Design and Code View
-
|
Homework 5 (tables) due
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
Oct 14(W),
Oct.26 (M)
|
|
|
Week 9
Oct 21(W),
Nov 2(M)
Dreamweaver
|
Hands-On
For the following, you can take view the source code of the course information page and copy and paste it into code view in Dreamweaver.
- Preview on Various Devices
(3 minute video)
- Adding Keywords (Insert>HTML>Keywords), Description (Insert>HTML>Description) Meta Information, and Viewport (Insert>HTML>Viewport)
- Horizontal Rules (Insert Horizontal Rule) and Special Characters (Insert>Character; see p.33 and 44-45 in Felke-Morris for the HTML)
- Find and Replace
(Edit>Find and Replace)
- Check Spelling
(Command>Check Spelling)
- Link to 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, after applying the tag selector will show id, and can use dropdown menu in Link box to reuse links and Window>Tile to link into other pages
- Image Maps
(see also pp. 164-165 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. 58-59 in Felke-Morris for the HTML)
- Insert>HTML>Email Link
- CSS Designer Panel (new in Dreamweaver CC) -
- Attaching Style Sheet to File if not done at page creation - Format>CSS Styles>Attach Style Sheet
Conceptual
|
|
Week 10
Oct 28(W),
Nov 9(M)
Dreamweaver
|
Hands On
Conceptual
|
|
Week 11
Nov 4(W),
Nov 16(M)
Dreamweaver
|
Hands-On
|
- Forms HTML (doesn't have new HTML5 features), Chapter 10
in Felke-Morris
|
Week 12
Nov 11(W),
Nov 23(M)
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
Nov 18(W)
Nov 30(M)
Flash
|
|
|
Week 14
Dec 2(W),
Dec 7(M)
Flash
|
Hands-On
Some training videos you may find useful
- 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
Dec 9(W)
|
No lecture but I will come to class to answer any questions about course material and provide individual help on projects. |
|
Monday Dec 14 - 3:30-5:10 (Monday class), Wednesday Dec 16 - 12-1:40 (the 12:30 section),
Wednesday Dec 16 - 7:30-9:10 (the evening section) |
|
|
