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 - 1/14, 1/16
Course Introduction and HTML |
HTML
- starter.html - a file you can use as a start file for coding in this course
- File>Open in Browser (Ctrl O in any browser)
- Viewing the source code of a web page in a browser - Chrome or Firefox: Right-click in empty area of page (not over an image)> View page source. Edge: Right-click in page> View source
- Free Text editors
- <!DOCTYPE html>, <html>. <head>, <body>, head and body sections, <title> tag
- When you make a change in the file in the text editor, you must save the file and refresh/reload the page in the browser
- Is the extension html or htm - 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.
- Browsers ignore whitespace in file
- Advantages of NotePad++ over Notepad (once file is saved as .html or .htm)
- color-coding
- can have multiple tabs, one file per tab
- line numbers
- tag and attribute suggestions when you type first letter
- "fold up" sections of code
- click on opening tag shows you the corresponding end tag
- Can launch browser from NotePad++ program to display file in tab
- some error finding
Dreamweaver
- When you launch Dreamweaver, choice between Developer and Standard Workspaces - choose Developer
- 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
HTML
- naming folders and pages - no spaces, lowercase (because case-sensitive on some servers), .html or .htm (use one consistently) for pages
- <h1> ... <h6>, <p>, <br>
- Validation
|
|
| |
Week 2 - 1/21, 1/23
HTML |
- Using myDrive as your webspace - myDrive instructions and myDrive video - put everything in a folder called public. To get the URL you give to others, click on "My Web Root" in myDrive.; When you give the URL of your website to to others, make sure it contains your myNOVA username and the word "public" - the viewer of your website should not see the myDrive logo or the file manager. Do not use the "Share" or "Email" options discussed in the video since the goal is to have your website available to everyone.
- To upload your files, you can either use the myDrive file manager or use an FTP program such as Core FTP
- FTP settings using myDrive
- Uploading a folder and its contents to myDrive - 1) zip the folder (right-click on the folder, and then within myDrive, choose Send To>compressed (zip) folder, then upload the zip file, select it, and click on Upzip button at the far right or 2) Use an FTP program to upload the folder (not the zipped folder)
- Judy Miller video on using Core FTP (10min, 48 seconds) - the hostname, username, and password for myDrive are different than indicated in the video but otherwise a good intro
- *Creating absolute and relative links - the html and in DW
- * images - img tag, height, width, and alt attributes
- HTML comments
- ordered and unordered lists
HTML/Dreamweaver
- Property inspector is context-sensitive and in CC now floats by default, can dock it by dragging to bottom till you use blue line
- Viewing page in browser from Dreamweaver
- 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
- *Making images into links
- Importance of saving a file before creating relative reference from file
- Site Definition in Dreamweaver (9 minute video)
- Renaming or moving files or folders within Files panel (updating depends on proper site definition)
- 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
- special entity characters (e.g. )
|
- * HTML Tutorial
- So You Want to Make a Website
- Creating Your First Web Page
- Naming Your Page
- Viewing Your Page in a Browser
- Revising Your Web Page
- Validation
- FTPing to the Server
- Linking
- Images
- Lists
W3Schools HTML Tutorial
- HTML Intro
- text editors and viewing your page in a browser
- HTML Basic Examples
- HTML Elements
- HTML Attributes
- HTML Headings
- HTML Paragraphs
- HTML 5 Tags and Attribute reference (from W3C Schools) (for reference)
- Dreamweaver in a Book - Chapter 1 (Customizing Your Workspace), Chapter 2 (HTML Basics)
|
| |
Week 3 - 1/28, 1/30
Dreamweaver, CSS
|
- if you want, you can put all your work for this course in a folder on myDrive, e.g. ite170 - in this case your URL would be mydrive.nvcc.edu/username/public/ite170
- the effect of index.html pages; don't use them yet
- Dreamweaver PowerPoints
- <hr>
- Copying and Pasting in Design and Code View
- Adding Pages to Website by right-clicking in Files panel or by choosing File>New
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, font-family (specifying first, second, and third choices)
- specificity
- CSS classes
- HTML and CSS comments
-
Cascading Style Sheets
- text-align property
- classes and id's
- span tag
HTML5 Structural elements - Most common: <header>, <nav>, <main>, <footer>; also <article>, <aside> - previously structure done with div
Overriding examples
|
|
| |
Week 4 - 2/4, 2/6
|
Background Images and tiling
Tables with Dreamweaverr
- <table>, <tr>, <td> and <th> tags
- border attribute of the <table> tag; colspan and rowspan attributes of the <td> and <th> tag
Using background-color to supplement background images when the background images serve as background for text
Dreamweaver
Dreamweaver site definition
- Setting default images folder in site definition
(when inserting image from your computer but outside of the Dreamweaver site definition, will automatically copy into designated images folder within site)
- Adding Keywords (Insert>HTML>Keywords), Description (Insert>HTML>Description) Meta Information)
- 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)
|
|
| |
Week 5 - 2/11, 2/13 |
- Coding Reminders and Absolute and Relative References (ppt on Canvas)
- 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; fragment identifier example (source code line 393), Skip Navigation links article
- CSS
|
|
| |
Week 6 - 2/18, 2/20 |
- vertical navigation with unordered list - 2 column layout
- horizontal navigation with unordered list
- Changing Links Colors with CSS and Hover Effects (important to maintain contrast between text and background, when you are changing the background color or image from white)
- Fixing the Horizontal Sprawl Problem on Web Pages
- downloadable fonts
- CSS @font-face (in Dreamweaver, termed "local web fonts")
- Google fonts - on the Google fonts website, select font, then click on bar titled "Family Selected" to expand it
- Adobe Edge Web Fonts - free, no subscription required - can access through the Adobe Edge Web Fonts site, or through Dreamweaver
-------------------------
- Web design
- Developing a new website - purpose of site, target audience and how this affects content and design
- Principles of visual design - principles of visual design (repetition, contrast, proximity, alignment)
- Accessibility
- CSS media attributes of print and screen
- CSS3 media queries - two column example with media query going to 1 column under 768px
- flexible images
- Viewport (Insert>HTML>Viewport) - <meta name="viewport" content = "width=device-width, initial scale=1.0">
- Topics not covered in my sections this term
|
|
|
Week 7 - 2/25, 2/27 |
|
|
| |
Week 8 - 3/3, 3/5 |
Hands-on Midterm (3/3)
Multiple choice midterm - HTML, CSS, Dreamweaver (3/5)
|
|
| |
Spring Break - 3/9-3/15 |
|
|
| |
3/17 |
- Faculty training days to switch to online instruction due to coronavirus; instruction will initially be asynchronous, not occurring in the time slot for the previous in-class instruction, i.e. lectures will be recorded and available here and in Canvas
|
|
| |
Week 9 3/19
|
|
|
| |
Week 10 - 3/24, 3/26
|
|
|
| |
Week 11 - 3/31, 4/2
|
|
- 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 - 4/7, 4/9
|
|
- 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)
- 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
- Photoshop layers assignment
|
| |
Week 13 - 4/14, 4/16
|
|
|
| |
Week 14 - 4/21, 4/23
|
|
|
| |
Week 15 - 4/28, 4/30 |
|
- Course Evaluation (see announcement in Canvas)
- Project (revised 5/8)
- 2 great student projects from Spring 2019
|
| |
Week 16 -
12:30 pm class Tues 5/5 -
12-1:40
11am class: Thur 5/7
10-11:40
|
|
|
