| Week |
Topics Covered |
Week 1
8/27 |
Introduction to the course
- Go over syllabus
- What you'll learn
- What you need
- Assignments
- Grading
- Expectations
- Lab time
- Edinboro Network
- Take roll
- Make sure all of us can run the Adobe software
- Make sure you all want to learn about making web pages!!
- Take notes because all the necessary information is not in the book.
Your Homework Website:
Implement the following:
- Create the initial web page for every student that has a link to all future homework
- Make it live on the eup web server
- Briefly explain how internet works as it relates to Edinboro and your web pages.
- Make sure we can all get to the EUP WebDir directory
In Windows Expplorer -> \\eup\dfs\webdir\dt123456
In a browser -> http://users.edinboro.edu/dt123456
Web Site Work flow:
- Define scope of project, objectives, target audience, schedule & available resources
- Develop Design strategy and establish the look and feel of the web pages
- Develop Prototype (This will be our actual site)
- Present to client
- Assemble & create the web site.
Start Chapter 1 - How the internet works
|
9/3
No Class Monday |
Chapter 1 - Internet and web page basics
- Chapter 1 Notes
- Discuss what Dreamweaver is and how it can help build web pages.
- Notepad vs. Dreamweaver
- Work on making our homework page
- Introduce Dreamweaver
Steps to Create a Web Site
- Create the folders you will need in Windows Explorer
- Create a new HTML document (we'll use Dreamweaver in class for this step)
- Create your first page (index.html) in your web site.
- Notes on how to start your web pages
*** Don't forget to make Folders!! ***
*** Don't forget "No spaces in folders or web page names!!" these become URLs ***
Chapter 2 - HTML Basics
- Finish Chapter 1 notes
- Create a template.html page for trying new things
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title Goes Here</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
- Start Chapter 2 Notes if time
- Heading
- Paragraph
- Line break vs. new paragraph
- Lists
- Special Characters
- HTML syntax validation
- Anchor
- Hyper-link
- e-mail link
- Let's do some hands-on exercises from the book in chapter 2. (Maybe 2.4)
|
| 9/10 |
Chapter 2 - HTML Basics
- Finish Chapter 2 Notes
- Make a page using heading elements for our fonts
- show example of <br> vs. <p>
- Make ordered and unordered lists
- Use of anchors
- hyper-links
- make an e-mail hyper-link
- Talk about Yoga Studio Case Study
Chapter 3 Web Design Basics
|
9/17
|
Chapter 3 Web Design Basics & FTP
- Discuss FTP: File transfer protocol → you can use this to copy files to the web server from home or anywhere you are not logged into the Edinboro Network.
- Open Windows Explorer
- type in ftp://webstorage.edinboro.edu
- Login
- This will open up the folder containing your files
- Open another instance of windows explorer
- Use drag-and-drop to copy your files to the web server
- Take a look at Photo shop
- Color Selection
- Making a simple gif
- GIF vs. JPG vs. PNG
- Let's make a small background image and put it on a new web page.
Chapter 4 - Cascading Style Sheets
- Chapter 4 Notes
- Finish the discussion on HTML
- Work on the Pacific Trails in-class example
- If time - Open our Template & make CSS styles
- Inline
- Embedded
- External
- Class Selector
- ID Selector
- Descendant Selector
- Hands-On Practice 4.1 → template.html (download or use the one you made earlier)
- Hands-On Practice 4.3
- Hands-On Practice 4.4 → embedded.html
- Hands-On Practice 4.5 → starter.html
|
| 9/24 |
Chapter 4 - Cascading Style Sheets
- Continue with some examples
- Discuss the exam
Exam 1:
Boro: Friday September 28th.
Porreco: Thursday September 27th |
| 10/1 |
Chapter 5 - Web Graphics Styling Basics
Solution to Pacific Trails up to Chapter 4
|
| 10/8 |
Chapter 6 - More CSS
Image Map (not in the book)
|
| 10/15 |
Chapter 7 - Page Layout Basics
- Vertical and horizontal navigation
- Using CSS
- Using DIV and their placement
|
| 10/22 |
Chapter 8 - More on Links, Layout, and Mobile
- Chapter 8 Notes
- Maybe Some Photoshop stuff
- Insert a banner up top
- Make a cell per navigation
- Make buttons in Photoshop (designed for rollovers)
- insert them
- make links
- Insert and center a table
Discuss the exam
- Chapter 5 - Graphics and Styling
- Chapter 6 - More CSS
- Chapter 7 - Page Layout
- Chapter 8 - More on Links, Layout, and Mobile
I'm thinking a practical exam, create a web site and e-mail me the URL.
|
| 10/29 |
Review for the Exam
Review: Exam 2 Notes <- Practice exam stuff in here
Exam 2 - Chapters 5 through 8 |
| 11/5 |
Chapter 9 - Table Basics
|
| 11/12 |
Chapter 10 - Form Basics
- Our server doesn't support server side programming though
- Chapter 10 Notes
- Work on Form
|
| 11/19 |
Working with MS Word
Thanksgiving
Happy Thanksgiving! - No classes Wednesday → Friday
|
| 11/26 |
Chapter 11 - Media and Interactivity Basics
|
| 12/3 |
Java Script
Lets Make a web page that caclulates something, like maybe a temperature converter. We'll use forms.
Review for Final
Link to the Javascript page
|
|
Boro : Final Exam Wednesday December 16th; 8:00 - 10:00 (Yes 8:00 am !!)
Porreco: Final Exam Tuesday December 11th; 10:15 - 12:15
|
Is on Fridays ! |
Assignments |
| Due Date |
Description |
| Some Notes |
Homework Files → Files for the Hands-On Exercises
Author's web page where you can download the files and unzip them
Notes on how to start your web pages
My Dummy Homework Page -> get Pacific Trails HTML and CSS from here
Boro Sample page |
9/14
|
Chapter 2 - Hands on Practice Exercises staring with 2.3
** Skip hands on 2.10
**
Case study Path of Light Yoga Studio - starts on Page 65 |
9/28 |
Chatper 3 - Hands on Exercise number 1 only. → Make a simple web page for your answer and link to your homework page. For part ' g. ' just list the Best Practices that they did not follow. If you don't like any of the ones listed you can choose your own.
* No Path of Light Yoga Studio for Chapter 3 * |
9/28 |
Chapter 4 Hands-On Practice Exercises except 4.8.
Chapter 4 Modify your Path of Light Yoga Studio web page. |
10/5 |
Chapter 5 Hands-On Practice Exercises
Path of Light Yoga Studio for chapter 5 |
10/12 |
Chapter 6 Hands-On Practice Exercises
Chapter 6 Path of Light Yoga Studio |
10/19 |
Chapter 7 Hands-On Practice Exercises
Chapter 7 Path of Light Yoga Studio |
10/26 |
Chapter 8 Hands-On Practice Exercises
Note: in 8.7 you need to delete the "nav" from the bottom list of style declarations for the print to work correctly (taking out the menu) in the BistroPrint.css
Chapter 8 Path of Light Yoga Studio |
11/9 |
Chapter 9 Hands-On Practice Exercises
Chapter 9 Path of Light Yoga Studio |
11/16 |
Chapter 10 Hands-On Practice Exercises
Chapter 10 Path of Light Yoga Studio |
11/30 |
Chapter 11 Hands-On Practice Exercises
Chapter 11 Path of Light Yoga Studio |
12/7 |
Word assignment |
