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. Students should not work on assignments shown below where a calendar due date is not shown in the third column since the assignment will likely change.
PowerPoints based on the text can be found on Blackboard.
| |
Week
| Class Topics
| Reading/Homework Due (more will be added
as course progresses)
|
| |
Week 1
Wed - Jan 10
Mon - Jan 22
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
Wed - Jan 17
Mon - Jan 29
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
- 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
Wed - Jan 24,
Monday- 2/5.
Web Graphics, FTP, CSS
|
Conceptual
- 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
Hands-On
|
- Felke-Morris Chapter 5, Image Section of HTMLTutorial
- Homework 2 due
|
| |
Week 4
Wed. - 1/31
Mon - 2/12
Web Design |
Conceptual
- Comments - can be on single line or across lines
HTML <!-- comment -->
CSS /* comment */
|
|
| |
Week 5
Wed - 2/7
Mon - 2/19. 2/26
|
Conceptual
- 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
- Monday section - Midterm on HTML- Chapters 1,2, 5 (just the first few pages (pp. 141-147)dealing with web graphics, inline images, image hyperlinks) - emphasis on Chapter 2 - mostly multiple choice, a few where you need to write code - closed book, closed notes
|
- 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
Wed - 2/14,
Mon 3/5
|
|
|
|
Week 7
Wed- 2/21
|
|
|
| |
Week 8
Wed - 2/28
Mon - 3/5
|
Conceptual/Hands On -
-
Dreamweaver is available in open computer lab - Open Computer Lab Hours
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
- 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
- Window>Toolbars>Common so that you can FTP the document you are working on
- 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
- 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
|
- Pacific Trails Chapter 2 assignment due February 27 (Wednesday section) and February 25 (Monday section) followed by Chapter 4 assignment the following week
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.eznvcc.vccs.edu:2048/9780134665269 |
| |
Week 9
Wed 3/7
Monday 3/19
|
- More on CSS layout
- pseudo-classes for the a tag (a:link, a:visited, a:hover)
- 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)
- Viewport Meta Tag - <meta name="viewport" content = "width=device-width, initial scale=1.0">
- CSS3 media queries - two column example with media query going to 1 column under 768px
- images
|
- Pacific Trails Chapter 4 due
- Chapter 8
|
| |
Week 10/11
Wed 3/28
Monday 3/26
Wed 3/21
- class cancelled due to snow cancellation)
|
|
- Chapter 10
- Forms HTML (doesn't have new HTML5 features), Chapter 10
in Felke-Morris
- Pacific Trails Chapter 5 due
|
| |
Week 12
Monday 4/2
Wed 4/4
|
Hands-On - Bootstrap
- Create an html file by copying and pasting a basic Bootstrap 4 template (uses CDN) -
- Alternatively, Download Bootstrap 4 (choose the compiled CSS and JavaScript option, unzip the zip file and you will have 2 folders - css and js - view contents of each. Create a Hello World file, with h1 formatting, outside of these two folders. Add references to the CSS and js files you have downloaded. If properly hooked up, the template file will still have the same appearance as wehn you used the CDN (sans-serif, no margin). Also in Chrome, choose Inspect>Console and check for errors.
- Template code reference to jQuery on CDN and to download code - for CDN, copy and paste URL; to download, (right click and choose Save as") and then reference the downloaded file (3.x)
- Place a Bootstrap 4 component into your html file and edit it in code view - e.g. navbar - sample resulting file
- Bootstrap 4 Carousel (Bootstrap site)
- Using DW Starter Bootstrap Templates for Responsive Design
- Inserting Bootstrap Components through Dreamweaver Insert>Bootstrap Components (DC CC 2017uses Bootstrap 3; DW CC 2018 uses Bootstrap 3 when inserting components into document where Bootstrap not already present, but will use Bootstrap 4 if Bootstrap 4 is already referenced by html file)
- Bootstrap 3 Containers and Breakpoints
- Bootstrap 4 Containers and Breakpoints
|
|
| |
Week 13
Mon 4/9
Wed 4/11
|
|
|
| X |
Week 14
Mon 4/16
Wed 4/18
|
|
|
| |
Week 15
Mon 4/23
Wed 4/25
|
- Monday class - remaining Bootstrap material
- Bootstrap Presentations (Wed 4/25 and Monday 4/30)
|
|
| |
Week 16
Final Exam
May 7 (Monday 3:30pm) May 2 (W)
12:00pm-1:40pm,
|
|
|
