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 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
August 21, 23
Course Introduction, HTML |
|
|
| |
|
Conceptual
- Chapter 1 - Felke-Morris - Internet Basics,
Chapter 2 - HTML Basics - PowerPoint slides (in Blackboard)
Hands-On
- starter.html - a file you can use as a start file for coding in this course
- Use courseinformationpractice.txt to use today - rename it as .html or .htm file
- <!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. )
- making filename extensions visible: In Windows 10, click on the Folder icon in the task bar to open in File Explorer, then select "View" on the menu and check the box "File name extensions". For earlier Windows operating systems, do a search on this topic.
- Structural elements - <div>, HTML5 structural elements: <header>, <nav>, <footer>
- Absolute links, email hyperlinks
|
- Felke-Morris, Chapter 1, 2
|
| |
Week 2
August 28, 30
HTML |
Conceptual/Hands on
- Practice file for today - courseinformationpractice.html
- viewing source code of any webpage
- Chrome - right click in empty area of page (not over an image)>View Page Source
- Edge - right click in page>View Source
- Firefox - Menu icon at far right>Developer>Page Source
- Internet Explorer - Ctrl U
- naming folders and files - no spaces, case-sensitive on some servers
- Validation
- <title> tag
- FTP using CoreFTP
- Default Pages and Directory Browsing
- Cascading Style Sheets - Chapter 4 PowerPoint slides in Blackboard - CSS selectors and style rules, CSS ways of specifying color, inline, embedded, and external CSS, classes, id's, descendant selectors
- Ways to save work in class - email to yourself as attachment, Google Drive, FTP to student webspace
|
|
| |
Week 3
Sept 6 (W), 11 (M)
Web Graphics, CSS
|
Conceptual
- Caching - browser and elsewhere
- Absolute and Relative References and XHTML Rules (revised 1/30/17)
- Web Graphics and More CSS - in this chapter, some material is 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 transparent color, image with background color identical to page background color, image with transparency and link, image with transparency and link and CSS specified border
- Deprecated tags and attributes
Hands-On
|
- Felke-Morris Chapter 5, Image Section of HTMLTutorial
- Homework 2 due
|
| |
Week 4
Sept. 13 (W), Sept. 18 (M)
Web Design |
Conceptual
- UTF-8 Character encoding
- 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
- Resizing images in Fireworks for web and print
(sample photo)
- screen resolution and pixels
- Data on screen resolution and pixels
- Working with Images (slides 2-5 only - gif and jpg formats)
|
|
| |
Week 5
Sept. 20 (W),
Sept. 25 (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
- Calculating the size of an element in the box model
- Box Model examples
- Less important content (similar links to those in PowerPoints)
- less important content: CSS3 Structural Psuedo-classes - :first-of-type and :last-of-type example, :first-child, :last of child, :nth of type(n)
- Tables - sample with CSS
|
- Homework 4 due - 26 multiple choice questions about Chapter 3 on Blackboard
- Felke-Morris Chapter 6, 9
- Box Model - content, padding, border, margin (DW text, p. 437-441)
|
| |
Week 6
Sept. 27 (W),
Oct. 2 (M) |
|
|
|
Week 7
Oct. 4 (W), Oct. 16 (M) -
(No NVCC classes Oct. 9-10) |
- Layout problem with images and text
- Wrapping img with block level element solution
- HTML and CSS solutions for Alignment of Images
- Page layout - CSS Layout examples from Judy Miller
- CSS Float, Clear, and Overflow properties
- Two-column layout
- navigation with unordered list, pseudo-classes for the a tag (a:link, a:visited, a:hover)
- Less important content: overflow, positioning
- 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 embedded stylesheet, example with single external stylesheet)
|
- Felke-Morris Chapter 7,8 (first part)
|
| |
Week 8
Oct. 11 (W)
Oct. 23 (M)
|
Conceptual/Hands On -
Dreamweaver
Dreamweaver is available in open computer lab - Open Computer Lab Hours and in computers in open area on first floor of CA building (open till 11pm each night)
If the videos below don't work in one browser, try another browser; generally Chrome worked better for me than IE
- When you launch Dreamweaver, choice between Developer and Standard Workspaces - choose Standard so that various Dreamweaver panels will be available (added 10/18)
- Window>Toolbars>Document - so that you can easily switch between code view, design/live, and split view - Live View will indicate how it actually will look, whereas Design view only supports limited CSS - Design view is better for entering text - Various split view options - View>Split (added 10/18)
- Window<Toolbars>Common so that you can FTP the document you are working on (added 10/18)
- Edit>Preferences - to set a variety of preferences within Dreamweaver, e.g. for when you create a new document
- Learn the User Interface - design, code, split, and live view; panels, property inspector- good to learn how to do common things in design view since it will often be quicker than doing it in code view
- Property inspector is context-sensitive and in CC now floats by default, can dock it by dragging to bottom till you use blue line (added 10/18)
- DW site definition
in CS5 (5 minute video), CC version (9 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
- Viewing page in browser
- File>Real-time Preview - If problems, to get legacy behavior, right click on filename in tab or in Files menu and choose Open in Browser
- Creating absolute links
- Insert>Hyperlink or by pasting into Link text box in Property panel
- Importance of saving a file before creating relative reference from file
- Creating internal and external links
- Renaming, Moving, and Deleting Files within Files panel (updating depends on proper site definition)
- FTP Websites (requires site definition) (8 minute video) - The video describes the synchronization process, but often you may simply want to put and get. 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; the contents of the dreamweaver site will be uploaded but the folder itself will not be
- local files can appear on the left (like they do in Core FTP) by choosing Edit>Preferences>Site
- Making an Image into a Link
- Unordered and Ordered Lists - nesting lists inside of lists
- Define the Page Structure (12 minute video) - shows entering of HTML5 structural tags in code view with a few completion shortcuts and advantage of defining stylesheet first - (1) closing tag - Edit>Preferences>Code Hints (2) typing a tag without angle brackets and then hitting tab (not in CS6), (3) typing an attribute within a tag and then hitting enter - the equal sign and double quotes are added (in CS6), and (4) htmltag.classname (already defined) and then tab (not in CS6)
- Adding Content to Your Page - (16 minute video)- shows making changes in Code view - Shortcuts: (1) Ctrl D for copying and pasting code
(2) Emmet shortcuts such as ul>li*5>a followed by tab)
(added 10/18)
- Copying and Pasting in Design and Code View
|
Homework 5 due (need to revise to make clear the two column layout should be done with CSS)
Chapter 8 - second part
Adobe Dreamweaver CC Classroom in a Book (2017 release, First Edition) -- login to your myNova account, and then click on the following link
http://proquest.safaribooksonline.com.ezproxy.vccs.edu:2048/book/web-design-and-development/9780134665269 |
| |
Week 9
Oct. 18 (W),
Oct. 30 (M) |
Hands-On - Dreamweaver
- Adding Keywords (Insert>HTML>Keywords), Description (Insert>HTML>Description) Meta Information)
- Horizontal Rules (Insert>HTML>Horizontal Rule) and Special Characters (Insert>HTML>Character; see p.33 and 44-45 in Felke-Morris for the HTML)
- Find and Replace
(Find>Find and Replace in Files)
- Viewport (Insert>HTML>Viewport)
- Setting default images folder in site definition
(when inserting file outside of site, will automatically copy into designated images folder within site)
- File>Page Properties - Appearance (HTML) produces deprecated HTML attributes, so use Appearance (CSS) instead, use of color picker (at lower right portion of panel) to get colors from other sources, specification of font-family for page, Adobe Edge Web Fonts (Classroom in a Book, Chapter 6, Global Type Styles)
- Check Spelling
(Tools > Spell Check)
- 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
- Image Maps (see also pp. 164-165 in Felke-Morris for the HTML) - sample royalty-free USA map - can use title attribute to provide tool tip for area
- Email links
(see pp. 58-59 in Felke-Morris for the HTML)
- Insert>HTML>Email Link
- Revisit Site Definition (site folder is not uploaded, the contents of the folder are; specifying the root directory on the server
- CSS Designer Panel (new in Dreamweaver CC)
- Attaching Style Sheet to File if not done at page creation - File > Attach Style Sheet)
- Intelligent Code Completion for adding CSS in Code View for inline, embedded and external stylesheet
- Tables with DW
- Insert a Table (7 minute video)
- "Creating and Styling Tables" in Chapter 9 of DW Classroom in a Book
- Right click Table and select Expanded Tables Mode to facilitate data entry if you don't specify a table width
Conceptual
|
Homework 6 (due October 18 in Wednesday section, and October 30 in Monday section) |
| |
10/25 (W) |
No class |
|
| |
Week 10
Nov. 1 (W),
Nov. 6 (M) |
Hands On - Dreamweaver
- Forms with Dreamweaver including Accessibility - form and action pages --
- Alignment of Forms with Tables
- Alignment of Forms using CSS
float and width properties
- Dreamweaver Templates (requires site definition)
- CS3-6 - www.youtube.com/watch?v=V5_-kaDZr6w (7 minute video)
- DW CC: The Missing Manual pp. 827-841 (templates)
- -Create the page as usual, then Insert>Template>Make Template and Insert>Template>Editable Region. To use template, File>New>Site Templates. If pages based on template don't automatically update when template is saved, choose Tools>Templates>Update Pages>Look in: Files That Use
- Dreamweaver Library items (requires site definition) - Tools>Library>Add Object to Library
|
|
| |
Week 11
Nov. 8(W),
Nov. 13(M) |
Hands-On - Dreamweaver
|
Forms homework (due November 8 in Wednesday class, November 13 in Monday class)
CSS Transitions Panel - Missing Manual pp. 397-411,
|
| |
Week 12 -
Nov. 15 (W),
Nov. 20 (M) |
Hands-On - Bootstrap
|
|
| X |
Week 13
Nov. 22 (W) is holiday
Nov. 27 (M),
Nov. 29 (W)
|
|
|
| |
Week 14
Dec. 4 (M),
Dec. 6 (W)
|
|
|
| |
Week 15
Final Exam
Dec. 11 (Monday 3:30pm) Dec. 13 (W)
12:00pm-1:40pm,
7:30-9:10pm
|
|
|
