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
Aug 20(W), Aug 25(M)
Course Introduction, Web Graphics
Images, Fireworks |
|
|
| |
|
Conceptual
|
|
| |
Week 2
Aug 27(W), Sept 8(M)
Web Design |
Conceptual
|
|
| |
|
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, Judy Miller video
|
|
| |
Week 3
Sept 3(W), Sept 15(M)
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
|
- CSS Tutorial (reading)
- Felke-Morris Chapters 3 and 4 (part)
- Assignment 1 (see Blackboard)
|
| |
Week 4
Sept. 10(W), Sept. 22(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
|
|
| ; |
|
Hands-On
|
|
| |
Week 5
Sept 17(W), Sept 29 (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 - original width file, file with modifications
- 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
- CSS Float and Clear properties - Use with Images, 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. 56)
|
| |
Week 6
Sept. 24(W), Oct. 6 (M)
|
- 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
Oct. 1(W), Oct. 20 (M) (due to school holiday 10/13)
|
|
|
| |
Week 8
Oct. 8(W), Oct. 27(M)
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, Design, Live View - http://tv.adobe.com/watch/learn-dreamweaver-cc/using-the-property-inspector/
. Live Code example
- 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 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 9
Oct. 15(W), Nov. 3(M)
Dreamweaver
|
Hands-On
Conceptual
|
|
| |
Week 10
Oct. 29(W)(no class 10/22 if no prior Wednesday cancellations), Nov. 10(M)
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>Div, http://tv.adobe.com/watch/learn-dreamweaver-cc/adding-html-structure-for-styling/
- 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
- Using CSS Inspection - 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
- 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/ Conceptual
|
|
| |
Week 11
Nov. 5(W), Nov. 17(M)
Dreamweaver
|
Hands-On
|
|
| |
Week 12
Nov 12(W), Nov 24(M)
Flash
|
Hands-On
|
|
| |
Week 13
Nov. 19(W), Dec. 1 (M)
Flash
|
|
|
| X |
Week 14
Dec. 3(W) (no school 11/26), Dec. 8(M)
Flash
|
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
|
|
| |
Dec. 10, 7:30-9:10PM(W), Dec. 15 2-3:40PM(M) |
|
|
