William M. Pegram
Home | Courses | Web Design | Office Software | Client-Side Scripting | Server-Side Scripting | About Me

ITE 170 Schedule - Section 001N,002N,004N- Spring 2017

Revised: April 1, 2018

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. A final project will be assigned (not shown below)

 

  Week Class Topics Reading/Homework Due (more will be added as course progresses) 
 

Week 1
Jan 9-11
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. &nbsp;)
  • making filename extensions visible: In the Windows search bar at the bottom left, search for Folder Options, or use the following instructions:
    Windows 7 : Open Windows Explorer (Window+E)>Hit Alt to view toolbar>Tools>Folder Options>View>Uncheck hide extensions>OK

    Windows 8: Open Windows Explorer (Windows + E)>View>CHECK file extensions

    Windows 10: Windows>File Explorer>View>Check the box next to the File Name extensions option
  • Structural elements - <div>, HTML5 structural elements: <header>, <nav>, <footer>
  • Felke-Morris, Chapter 1, 2
 

Week 2
Jan 17(T), Jan 18 (W), Jan 23(M)
HTML

 Conceptual

Hands On

 
 

Week 3
Jan 24(T), Jan 25(W), Jan 30(M)
Design, CSS


 Conceptual/Hands on
  • Felke-Morris Chapter 4, Styling section of HTML5 Tutorial
  • Homework 2 due
 

Week 4
Jan 31(T), Feb 1(W), Feb 6(M)
CSS, Web Graphics

Conceptual
  • Felke-Morris Chapter 5, Image Section of HTMLTutorial
  • Homework 3 due
 


Hands-On
  Week 5
Feb. 7(T), 8 (W), 13(M)



Conceputual
  • Homework 4 due
  • Felke-Morris Chapter 6, 9
  • Box Model - content, padding, border, margin (DW text, p. 437-441)
  Week 6
Feb. 14(T), 15(W), 20(M)




  • Felke-Morris Chapter 7,8

Week 7 Feb. 21(T), 22(W), 27(M)
 Midterm on Concepts and HTML, CSS. Chapters 1-6 and 9 of the text - test information, sample multiple-choice/true false questions, terms you should understand., Mid-semester grade calculator
 

Week 8
Feb. 28(T), March 1 (W),
March 20(M)

NVCC Spring Break March 6-12

No class 3/13 and 3/14 due to snow

Conceptual/Hands On - Dreamweaver

Suggest not doing your 7 day trial yet; Dreamweaver is available in open computer lab - Open Computer Lab Hours and in computers in open area on first floor of CA building

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) - a tool for designers and developers
  • Learn the User Interface (5 minute video) - 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
  • Use the Property Inspector (6 minute video).
  • 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
  • Edit>Preferences - to set a variety of preferences within Dreamweaver, e.g. for when you create a new document
  • Creating absolute links - Insert>Hyperlink or by pasting into Link textbox in Property panel
  • 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)
  • 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 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)-
  • Making an Image into a Link
  • Image manipulation within Dreamweaver - crop, resize and then resample, change brightness and contrast, sharpen - all alter the image, so make a copy of your original
  • Unordered and Ordered Lists - nesting lists inside of lists (6 minute video)
  • Copying and Pasting in Design and Code View
  • 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)

Dreamweaver CC: The Missing Manual -- 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/9781449365189/dreamweaver-cc-the-missing-manual/index_html?query=((Dreamweaver+CC%3a+The+Missing+Manual))#snippet

  Week 9
March 15(W)
March 20-27(M)
March 21(T)

Hands-On - Dreamweaver

  • 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 (Missing Manual, pp. 128-133)
  • 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) - Missing Manual, pp. 269-308 - Right click Table and select Expanded Tables Mode to facilitate data entry if you don't specify a table width
Conceptual 		Dreamweaver homework (due March 21 in Tuesday section, March 15 in Wednesday section, and March 27 in Monday section) -
 

Week 10
March 28 (T),
March 22(W),
March 27-April 3(M)

Hands On - Dreamweaver

  • Forms with Dreamweaver including Accessibility - form and action pages -- DW Missing Manual, pp. 615-668
  • Alignment of Forms with Tables
  • Alignment of Forms using CSS float and width properties
  • Creating 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
  • Library items (requires site definition) - Tools>Library>Add Object to Library
  • Image Rollovers in DW (uses JavaScript)- Insert>HTML>Rollover Image - romney, bush
    - DW: The Missing Manual, pp.254-257
  • Forms HTML (doesn't have new HTML5 features), Chapter 10 in Felke-Morris
  • Forms homework (due March 29 Wednesday section, April 4 Tuesday section, April 10 Monday section)
 

Week 11
April 4 (T),
March 29(W),
April 3(M)


Hands-On - Dreamweaver

 CSS Transitions Panel - Missing Manual pp. 397-411
  Week 12 -
April 11(T), April 5(W),
April 10(M)




Hands-On - Bootstrap

 
Week 13
April 18(T),
April 12(W),
April 17(M)





 

Week 14
April 18(T),
April 19(W),
April 24(M)








 
  Week 15
April 25(T),
April 26(W)
  • No new material will be presented, instructor will come to classroom at usual time and stay as needed for questions
  
X Week 16
Final Exam
May 1 (Monday 4pm) 2 (Tuesday 10am), May 3 (Wednesday 12pm)
Topics not covered or assigned Flash Short Assignment 2
Flash Assignment 3

Extra material -