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. Some of the HTML/CSS material shown below we may not get to.
| |
Week
| Class Topics
| Reading/Homework Due (more will be added
as course progresses)
|
| |
Week 1
8/23
Course Introduction, HTML |
- ITE 170 Common Syllabus
- Course
information
- Student Services at Annandale
- ITE 170 and GMU
- Student email
- Access your Google Drive and create a folder for ite170 and within that folder, create a folder for inclass work and within that, a folder for today - e.g. day1 or use date
- starter.html - a file you can use as a start file for coding in this course
- Viewing the source code of a web page in a browser - Chrome or Firefox: Right-click in empty area of page (not over na image)> View page source. Edge: Right-click in page> View source
- <!DOCTYPE html>, <html>. <head>, <body>, and <title> elements
- 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
- 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
- Save your work for today in Google Drive
|
|
| |
Week 2
8/28, 8/30
HTML |
HTML
- Save starter.html to your desktop
- *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.
- head and body sections, <title> tag
- naming folders and pages - no spaces, lowercase (because case-sensitive on some servers), .html or .htm (use one consistently)
for pages
- Save and refresh - Brackets allows you to skip the refresh
- *Validation
- Using myDrive as your webspace - myDrive instructions - put everything in a folder called public; the public folder must be part of the URL the user enters in the browser, thus users should not see the myDrive logo or the file manager
- To upload your files, you can either use the myDrive file manager or use an FTP program such as Core FTP
- Default Pages and Directory Browsing
- *absolute and relative links
- *images - img tag, height, width, and alt attributes
- HTML comments - e.g. to indicate the source of the image
- *Making images into links
- *ordered and unordered lists, special entity characters (e.g. )
- <h1> ... <h6>, <p>, <br>, <hr>, <blockquote>, phrase/logical elements
- Structural elements - <div>, HTML5 structural elements: <header>, <nav>, <footer>
Dreamweaver
- Use courseinformationpractice.txt to use today - rename it as .html or .htm file
- Good to learn how to do common things in design view since it will often be quicker than doing it in code view
- adding text, and formatting
with headings, paragraphs, and line breaks
- Creating absolute links
- Insert>Hyperlink or by pasting into Link text box in Property panel
- Unordered and Ordered Lists
|
|
| |
Week 3
9/4, 9/6
Dreamweaver,
Web Graphics, CSS
|
Dreamweaver
- Adding Pages to Website by right-clicking in Files panel or by choosing File>New
- *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
- Importance of saving a file before creating relative reference from file
- *Creating relative links
- Site Definition in Dreamweaver (9 minute video)
- Renaming or moving files or folders within Files panel (updating depends on proper site definition)
- Setting default images folder in site definition
(when inserting file outside of site, will automatically copy into designated images folder within site)
- Publish and Manage 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. With NVCC myDrive, must specify public as the root directory so that all files are put there
- 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
- Copying and Pasting in Design and Code View
Cascading Style Sheets
- The role of HTML and CSS in a website
- *external, embedded, and inline CSS - external is generally best (ease of maintenance, consistency, responsiveness (can have different styles for different viewports (devices) through use of media queries (later in course)
- *styling tags - e.g. h2 {color:red}
- *CSS ways of specifying color - color names, hexadecimal, RGB
- *commonly used CSS properties - color, font-size, background-color, text-align, font-family (specifying first, second, and third choices)
- external, embedded, and inline overriding examples
- *classes and id's
- CSS vs. HTML comments
- *span tag
|
|
| |
Week 4
9/11, 9/13
Web Design |
CSS
Descendant/contextual selectors, use of HTML5 structural elements of <header>, <nav> and <footer>
Background Images and tiling
HTML and Dreamweaver
- *Tables with DW
- - <table>, <tr>, <td> and <th> tags
- border attribute of the <table> tag; colspan, rowspan attributes of the <td> and <th> tag
- Uploading a folder and its contents to myDrive simplest way is to zip the folder (right-click on the folder, and choose Send To>compressed (zip) folder, then upload the zip file, select it, and click on Upzip button at the far right
- Adding Keywords (Insert>HTML>Keywords), Description (Insert>HTML>Description) Meta Information)
- Horizontal Rules (Insert>HTML>Horizontal Rule) and Special Characters (Insert>HTML>Character
- Find and Replace (Find>Find and Replace in Files)
- 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
- 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
- Revisit Site Definition (site folder is not uploaded, the contents of the folder are; specifying the root directory on the server
|
|
| |
Week 5
9/18, 9/20
|
CSS
- fragment identifier example, Skip Navigation links
- *screen resolution, screen resolution statistics, screen resolution and pixels from cameras - change over time, no universal statistics, statistics will vary by website visited
- some text properties
- width and height - units can be absolute or percentage; width, min-width, max-width, and height properties
- the CSS box model - padding, border, margin
- Box Model examples
- *Using margin:auto to center an item
- 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
- Less important content
- 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 - example of CSS for tables - CSS substitutes for deprecated HTML attributes width, align, valign, cellpadding, cellspacing, background
- Lay out and Style Web Pages with CSS (15 minute video)
- example of compound or contextual CSS,
- Quick Docs (in stylesheet, to get more information about CSS property or value)
- Quick Edit - In an HTML file, place your cursor inside a class or id attribute (name or value) or in the tag name. Quick Edit shows you all the CSS in your project that match. You can edit these rules directly inline, without ever leaving the context of the HTML file.
- DW Real Time Preview on Mobile Devices (2 minute video) - feature requires that devices are on the same wi-fi network (might work in our classroom if you are using a laptop)
- downloadable fonts
|
|
| |
Week 6
9/25, 9/27
|
|
|
|
Week 7
10/2, 10/4
|
|
|
| |
Week 8
no class 10/9
(NVCC open but no classes)
|
|
|
| |
Week 9
10/16,10/18
|
|
|
| |
Week 10
10/23
(no class on 10/25 - instructor out of town)
|
|
|
| |
Week 11
10/30, 11/1
|
|
- Photoshop Chapter 1, 2
- Get to know Photoshop (Adobe video)
- Open and create images (3 minutes)
- Tour the work area (4 minutes)
- Zoom and pan (5 minutes)
- Undo a command (5 minutes)
- Save your work (4 1/2 minutes)
- My notes on the video
- Adjust the image quality (Adobe video)
- Adjust brightness and contrast (4 minutes)
- Adjust color vibrance (3 minutes)
- Adjust hue and saturation (5 minutes)
- Learn about adjustment layers (4 minutes)
- Retouch images (Adobe video)
- Remove small objects (4 minutes)
- Add objects by cloning (3 minutes)
- Remove a large object (3 minutes)
- My notes from the video
|
| |
Week 12
11/6, 11/8
|
|
- Photoshop Chapter 3
- Make selections (Adobe video)
- Learn selection basics (4 minutes)
- Learn how to use the Quick Selection and Lasso Tools (5 minutes)
- Fine tune a selection (5 minutes)
- Work with layers (Adobe video)
- Understand layers (5 minutes)
- Learn layer basics (5 minutes)
- Resize a layer (4 minutes)
- Add images to a layered design (4 minutes)
- Unlock the background layers (4 minutes)
|
| X |
Week 13
11/13, 11/15 (no class- snow), 11/20
|
|
- Use color (Adobe video)
- Work with brushes (5 minutes)
- Use foreground and background colors (2 minutes)
- Choose a color (3 1/2 minutes)
- Add text and shapes (Adobe video)
- Add text (5 minutes)
- Edit text (4 minutes)
- Create a graphic shape (4 1/2 minutes)
- Add a built-in custom shape (3 1/2 minutes)
- My notes from the video
- Change the image size (Adobe video)
- Resize an image (5 minutes)
- Set the resolution (4 minutes)
- Crop and straighten an image (4 minutes)
- Expand the canvas (5 minutes)
- My notes on the video
|
| |
Week 14
11/27, 11/29
|
|
|
| |
12/4, 12/6 |
|
|
| |
Week 15
12/13 12pm-1:40pm for 12:30 class
12/18 10am-11:40am for 11am class,
|
|
- Project (due December 12) (revised 12/6)
|
